/* =========================================================
   HERO: layout + tipografía específica
   ========================================================= */

.hero{
  min-height: 90vh;
  background-image: url("../img/libreria/bg-neon-3d.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero .overlay{
  background-color: rgb(0 0 0 / 60%);
  height: 90vh;
}
.hero-inner{
  display:flex;
  align-items:center;
}

.hero h1{
  font-size:clamp(36px,8vw,50px);
  line-height:1.05;
  margin:12px 0 18px;
}

.hero-title-highlight{
  background:linear-gradient(135deg,#38bdf8,#a855f7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  margin:0 0 22px;
  color:var(--muted);
  max-width:60ch;
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-visual{
  position:relative;
  justify-self:center;
}

/* Glow detrás del teléfono */
.purple-glow{
  position:absolute;
  z-index:0;
  width:300px;
  height:340px;
  opacity:.8;
  filter:blur(40px);
  pointer-events:none;
  background:
    radial-gradient(55% 55% at 60% 35%,rgba(124,58,237,.7),transparent 65%),
    radial-gradient(40% 40% at 75% 65%,rgba(99,102,241,.55),transparent 70%);
}

/* =========================================================
   PHONE MOCKUP + MODEL-VIEWER DEL HERO
   ========================================================= */

.phone{
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:40px;
  border:2px solid #2a2840;
  background:#fff;
  box-shadow:var(--glow),0 10px 30px rgba(0,0,0,.45);
}

/* Hero usa específicamente .phone.phone--viewer */
.phone.phone--viewer{
  width:min(var(--phone-max-w),86vw);
  aspect-ratio:var(--phone-ratio);
  height:auto;
  overflow:hidden;
}

.phone.phone--viewer .mv-deck,
.phone.phone--viewer model-viewer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
  --poster-color:transparent;
}

/* Controles del slider dentro del visor */
.mv-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  z-index:4;
  display:flex;
  justify-content:center;
  gap:8px;
}

.mv-nav{
  display:flex;
  gap:6px;
}

.mv-nav button{
  width:32px;
  height:32px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:rgba(0,0,0,.35);
  color:#fff;
}

/* =========================================================
   PHONE SHELL (CSS-only) — .device dentro de .phone--css-shell
   ========================================================= */

.device{
  --bezel:14px;
  --outer-r:42px;
  --inner-r:clamp(0px,calc(var(--outer-r) - var(--bezel)),999px);
  --edge:#2a2a35;
  --edge-hi:#3b3b48;
  --edge-lo:#101017;
  --notch-w:200px;
  --notch-h:32px;
  --notch-r:16px;
  --shadow-ext:0 24px 60px rgba(0,0,0,.45);
  --ring:0 0 0 1px rgba(255,255,255,.06) inset,
         0 0 0 2px rgba(0,0,0,.35) inset;

  position:relative;
  padding:var(--bezel);
  border-radius:var(--outer-r);
  background:
    linear-gradient(160deg,var(--edge-hi),var(--edge)),
    radial-gradient(120% 120% at 50% -20%,rgba(255,255,255,.12),transparent 60%);
  box-shadow:var(--shadow-ext);
  isolation:isolate;
}

.device::before,
.device::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--outer-r);
  pointer-events:none;
}

.device::before{
  box-shadow:var(--ring);
  opacity:.9;
}

.device::after{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    transparent 30% 70%,
    rgba(255,255,255,.06)
  );
  mix-blend-mode:overlay;
  opacity:.35;
}

/* Pantalla del teléfono */
.device-screen{
  position:relative;
  background:#fff;
  border-radius:var(--inner-r);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Arandela superior (se desactiva con .phone--css-shell) */
.device-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:var(--inner-r);
  box-shadow:0 0 0 calc(var(--bezel) * 1.15) var(--edge) inset;
}

/* model-viewer dentro de la pantalla */
.device-screen .mv-deck,
.device-screen model-viewer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.device-screen model-viewer{
  background:transparent !important;
  --poster-color:#ffffff !important;
}

/* Cálculo definitivo del radio interno */
.device{
  --inner-r:calc(var(--outer-r) - var(--bezel));
}

.device-screen{
  border-radius:var(--inner-r);
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Desactivar arandela al usar .phone--css-shell */
.phone--css-shell .device-screen::after{
  content:none !important;
  box-shadow:none !important;
}

/* Notch superior */
.device-notch{
  position:absolute;
  left:50%;
  top:calc(var(--bezel) - 2px);
  transform:translateX(-50%);
  width:var(--notch-w);
  height:var(--notch-h);
  border-bottom-left-radius:var(--notch-r);
  border-bottom-right-radius:var(--notch-r);
  background:linear-gradient(180deg,var(--edge-hi),var(--edge));
  z-index:3;
  pointer-events:none;
}

.device-notch::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:8px;
  border-radius:6px;
  background:linear-gradient(180deg,#2e2e39,#171722);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

.device-notch::after{
  content:"";
  position:absolute;
  top:8px;
  right:14px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--edge-hi),var(--edge));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 2px rgba(0,0,0,.45) inset;
}

/* Botones laterales decorativos */
.device-buttons{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.device-buttons::before,
.device-buttons::after{
  content:"";
  position:absolute;
  width:3px;
  height:44px;
  border-radius:2px;
  background:linear-gradient(180deg,#20202c,#101018);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

.device-buttons::before{
  left:-2px;
  top:110px;
}

.device-buttons::after{
  right:-2px;
  top:160px;
}

/* Presets de dispositivo (hero usa data-device="iphone-x") */
.device[data-device="iphone-x"]{
  --bezel:14px;
  --outer-r:42px;
  --notch-w:200px;
  --notch-h:32px;
  --notch-r:16px;
}

.device[data-device="pixel-7"]{
  --bezel:16px;
  --outer-r:36px;
  --notch-w:16px;
  --notch-h:16px;
  --notch-r:10px;
}

.device[data-device="pixel-7"] .device-notch{
  width:var(--notch-w);
  height:var(--notch-h);
  border-radius:50%;
  top:calc(var(--bezel) + 6px);
  left:auto;
  right:calc(50% - 28px);
  transform:none;
}

.device[data-device="pixel-7"] .device-notch::before,
.device[data-device="pixel-7"] .device-notch::after{
  display:none;
}

.device[data-device="generic"] .device-notch{
  display:none;
}

/* Activación del shell dentro de .phone.phone--viewer.phone--css-shell */
.phone.phone--viewer.phone--css-shell{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible;
}

.phone.phone--viewer.phone--css-shell > .device,
.phone.phone--viewer.phone--css-shell .device-screen{
  height:100%;
}

/* =========================================================
   REGLAS ESPECÍFICAS DEL VISOR DEL HERO
   ========================================================= */

/* Oculta el botón AR solo en este visor principal (mvMain) */
model-viewer#mvMain [slot="ar-button"]{
  display:none !important;
}

/* Opcional: más control solo para este visor */
model-viewer#mvMain::part(ar-button){
  display:none !important;
}

model-viewer#mvMain::part(ar-status){
  display:none !important;
}

/* =========================================================
   RESPONSIVE SOLO PARA EL HERO + GLOW + PHONE
   ========================================================= */

@media (min-width:980px){
  .hero-inner{
    grid-template-columns:1.15fr .85fr;
  }

  .purple-glow{
    inset:-18% -18% auto auto;
  }
}

@media (max-width:979px){
  .hero-inner{
    grid-template-columns:1fr;
    flex-direction:column;
  }

  .hero-copy{
    margin-bottom:3em !important;
  }

  .purple-glow{
    inset:-18% -7% auto auto;
  }
}

/* Ajuste del ancho máximo del teléfono en móviles pequeños */
@media (max-width:640px){
  :root{
    --phone-max-w:40vw;
  }
}