/* =========================================================
   BUILDING LIVES · CAPA DE REDISEÑO
   ---------------------------------------------------------
   Se carga DESPUÉS de styles.css y refinamientos.css.
   Contiene el banner cinematográfico y las secciones nuevas
   orientadas a que el visitante se identifique y agende.

   Quitar el <link> de esta hoja devuelve el sitio al estado
   anterior sin romper nada.
   ========================================================= */

:root{
  --ease-cine:  cubic-bezier(.19,1,.22,1);
  --vidrio:     rgba(255,255,255,.06);
  --vidrio-l:   rgba(255,255,255,.14);
}

/* =========================================================
   1 · BANNER CINEMATOGRÁFICO
   Referencias: la narrativa a pantalla completa de Apple,
   el fondo de luz en movimiento de Stripe y la tipografía
   cinética de los sitios premiados de Awwwards.
   ========================================================= */

.hero--cine{
  position:relative;
  /* La barra de navegación ya ocupa su alto: se descuenta para que
     el banner entero quepa en la primera pantalla, sin cortes. */
  min-height:min(calc(100svh - var(--nav-h)),980px);
  display:flex;align-items:center;
  padding:clamp(2.4rem,4vw,3.4rem) 0 clamp(3.4rem,5vw,4.6rem);
  background:linear-gradient(168deg,var(--brand-950) 0%,var(--brand) 50%,var(--brand-1000) 100%);
  isolation:isolate;
}

/* ---------- La escena: foto, velo, auroras y motas ---------- */
.hero__escena{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* La fotografía vive en su propia capa para poder moverla */
.hero__foto{position:absolute;inset:-7%;opacity:0;transition:opacity 1.6s var(--ease-cine)}
.hero__foto.has-photo{
  background:var(--photo) center/cover no-repeat;
  opacity:.55;
  animation:kenBurns 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenBurns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-2%,-1.6%,0)}
}

/* Velo que garantiza el contraste del titular sobre cualquier foto */
.hero__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,  rgba(2,22,17,.95) 0%, rgba(2,22,17,.82) 32%, rgba(4,36,26,.44) 60%, rgba(4,36,26,.18) 100%),
    linear-gradient(180deg, rgba(2,22,17,.72) 0%, rgba(2,22,17,0) 26%, rgba(2,22,17,0) 58%, rgba(2,22,17,.88) 100%);
}

/* Auroras: luz que respira detrás del contenido */
.hero__aurora{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(90px);mix-blend-mode:screen;will-change:transform;
}
.hero__aurora--a{
  width:clamp(300px,46vw,760px);aspect-ratio:1;top:-14%;right:-8%;
  background:radial-gradient(circle,rgba(0,216,114,.5),transparent 68%);
  animation:deriva1 24s ease-in-out infinite alternate;
}
.hero__aurora--b{
  width:clamp(280px,40vw,660px);aspect-ratio:1;bottom:-22%;left:-10%;
  background:radial-gradient(circle,rgba(0,216,114,.3),transparent 70%);
  animation:deriva2 31s ease-in-out infinite alternate;
}
.hero__aurora--c{
  width:clamp(220px,28vw,460px);aspect-ratio:1;top:34%;left:38%;
  background:radial-gradient(circle,rgba(107,243,174,.22),transparent 72%);
  animation:deriva3 27s ease-in-out infinite alternate;
}
@keyframes deriva1{to{transform:translate3d(-7%,9%,0) scale(1.14)}}
@keyframes deriva2{to{transform:translate3d(10%,-8%,0) scale(1.1)}}
@keyframes deriva3{to{transform:translate3d(-9%,-11%,0) scale(.88)}}

/* Motas de luz dibujadas en canvas por banner.js */
.hero__motas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}

/* La retícula heredada queda entre la escena y el contenido */
.hero--cine::after{z-index:1}
.hero--cine .hero__grid{position:relative;z-index:3}

/* ---------- Entrada escalonada del contenido ----------
   El texto es visible por defecto. Solo se oculta cuando
   banner.js confirma que va a animarlo. Nunca puede quedar
   una pantalla en blanco si el javascript falla. */
html.banner-activo .hero--cine .entra{
  opacity:0;transform:translateY(30px);filter:blur(7px);
}
html.banner-activo .hero--cine.listo .entra{
  opacity:1;transform:none;filter:none;
  transition:opacity 1s var(--ease-cine) var(--d,0s),
             transform 1s var(--ease-cine) var(--d,0s),
             filter .9s var(--ease-cine) var(--d,0s);
}

/* ---------- Titular ---------- */
.hero__titular{
  margin:1.1rem 0 1.2rem;
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  line-height:1.04;letter-spacing:-.04em;
}
/* El titular vive en una columna, no en toda la pantalla: escala
   con el ancho de su contenedor para no desbordarse nunca. */
.hero__grid > div:first-of-type{container-type:inline-size}
@supports (font-size:1cqi){
  .hero__titular{font-size:clamp(2.1rem,8.1cqi,3.7rem)}
}
.hero__titular > span{display:block}
/* La tercera línea cierra la frase: un punto menos de peso para
   que el ojo caiga primero en la palabra que cambia. */
.hero__titular > span:last-of-type{
  font-size:.78em;color:rgba(255,255,255,.9);letter-spacing:-.03em;
}

/* ---------- Rotador de palabras (tipografía cinética) ---------- */
.rotor{
  position:relative;display:block;
  min-height:1.05em;
  color:var(--accent);
}
.rotor__item{
  position:absolute;left:0;top:0;width:100%;
  opacity:0;transform:translateY(68%);filter:blur(9px);
  transition:opacity .72s var(--ease-cine),transform .72s var(--ease-cine),filter .72s var(--ease-cine);
  background:linear-gradient(94deg,var(--accent) 12%,var(--accent-300) 58%,#ffffff 112%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.rotor__item.es-activo{opacity:1;transform:none;filter:none}
.rotor__item.se-va{opacity:0;transform:translateY(-62%);filter:blur(9px)}
/* Sin javascript o sin movimiento: se ve la primera, estática */
.rotor__item:first-child{position:relative}
html.banner-activo .rotor__item:first-child{position:absolute}
.rotor__barra{
  display:block;height:3px;width:0;border-radius:3px;margin-top:.18em;
  background:linear-gradient(90deg,var(--accent),transparent);
  animation:barraRotor 3.4s linear infinite;
}
@keyframes barraRotor{0%{width:0;opacity:.9}88%{width:100%;opacity:.9}100%{width:100%;opacity:0}}

/* ---------- Píldoras de confianza del banner ---------- */
.hero__trust b{font-variant-numeric:tabular-nums}
.hero__sello{
  display:flex;align-items:flex-start;gap:.55rem;flex-wrap:nowrap;
  margin-top:1.4rem;font-size:.82rem;color:var(--stone);font-weight:600;
  max-width:46ch;
}
.hero__sello > span:first-child{flex:none;display:inline-flex;margin-top:.12rem}
.hero__sello svg{width:16px;height:16px;color:var(--accent)}

/* ---------- Indicador de scroll ---------- */
.hero__cue{
  position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);
  z-index:4;display:grid;justify-items:center;gap:.4rem;
  color:var(--stone);font-size:.68rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .5s var(--ease);
}
.hero__cue i{
  display:block;width:1.5px;height:34px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),var(--accent));
  position:relative;overflow:hidden;
}
.hero__cue i::after{
  content:"";position:absolute;left:0;right:0;top:-34px;height:34px;
  background:linear-gradient(180deg,transparent,var(--accent));
  animation:gotaCue 2.3s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes gotaCue{0%{transform:translateY(0)}70%,100%{transform:translateY(68px)}}
.hero__cue.oculto{opacity:0;pointer-events:none}

/* El panel del modelo flota con vidrio esmerilado */
.hero--cine .model{
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--vidrio-l);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}

@media (max-width:960px){
  .hero--cine{min-height:auto;padding-top:clamp(3rem,10vw,4.5rem)}
  .hero__velo{
    background:linear-gradient(180deg,rgba(2,22,17,.93) 0%,rgba(4,36,26,.86) 50%,rgba(2,22,17,.95) 100%);
  }
  .hero__cue{display:none}
  /* La palabra que gira no debe partirse ni desbordar la columna */
  .rotor{font-size:.92em}
}

/* =========================================================
   2 · TICKER INFINITO
   Sustituye la fila estática por una banda que avanza.
   ========================================================= */
.marquee{overflow:hidden;padding:0}
.marquee__inner{
  display:flex;width:100%;gap:0;flex-wrap:nowrap;padding:1.05rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__pista{
  display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;
  flex:none;animation:correrTicker 34s linear infinite;will-change:transform;
}
.marquee:hover .ticker__pista{animation-play-state:paused}
.ticker__pista span{
  display:inline-flex;align-items:center;gap:2.6rem;white-space:nowrap;
  font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
}
.ticker__pista span::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.75;
}
@keyframes correrTicker{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__pista{animation:none}
  .marquee__inner{justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
}

/* =========================================================
   3 · "¿TE SUENA FAMILIAR?"  ·  identificación
   El visitante tiene que reconocerse antes de que le
   contemos nada sobre nosotros.
   ========================================================= */
.retos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.reto{
  position:relative;padding:1.7rem 1.6rem 1.5rem;
  border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-cine),box-shadow .45s var(--ease),border-color .35s var(--ease);
}
.reto:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:rgba(0,216,114,.55)}
.reto::before{
  content:"";position:absolute;left:0;top:1.9rem;bottom:1.9rem;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),rgba(0,216,114,0));
  transform:scaleY(.35);transform-origin:top;
  transition:transform .55s var(--ease-cine);
}
.reto:hover::before{transform:scaleY(1)}
.reto p{font-size:1.04rem;font-weight:700;letter-spacing:-.018em;line-height:1.45}
.reto small{display:block;margin-top:.6rem;color:var(--text-2);font-size:.9rem;font-weight:500;line-height:1.55}

.puente{
  margin-top:2.4rem;padding:1.5rem 1.8rem;border-radius:var(--r-lg);
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(0,216,114,.1),rgba(0,216,114,.03));
  border:1px solid rgba(0,216,114,.3);
}
.puente p{font-weight:800;font-size:1.06rem;letter-spacing:-.02em;flex:1;min-width:260px}
.puente svg{width:22px;height:22px;color:var(--accent-600);flex:none}

@media (max-width:860px){ .retos{grid-template-columns:1fr} }

/* =========================================================
   4 · EL CAMBIO  ·  antes y después
   Comparación honesta y cualitativa, sin cifras inventadas.
   ========================================================= */
.cambio{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch}
.cambio__col{
  border-radius:var(--r-xl);padding:2rem 1.9rem;
  border:1px solid var(--line);background:var(--surface-2);
}
.cambio__col h3{font-size:1.1rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.cambio__col li{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.62rem 0;font-size:.96rem;color:var(--text-2);line-height:1.5;
  border-top:1px solid var(--line);
}
.cambio__col li:first-of-type{border-top:0}
.cambio__col li i{
  flex:none;width:21px;height:21px;border-radius:50%;margin-top:.1rem;
  display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.72rem;
}
.cambio__col--hoy li i{background:#f0e6e4;color:#a4483a}
.cambio__col--hoy h3{color:var(--text-3)}
.cambio__col--si{
  background:linear-gradient(155deg,var(--brand) 0%,var(--brand-950) 100%);
  border-color:rgba(0,216,114,.4);color:#fff;
  box-shadow:0 34px 70px -34px rgba(7,62,44,.75);
  position:relative;overflow:hidden;
}
.cambio__col--si::after{
  content:"";position:absolute;width:320px;aspect-ratio:1;right:-110px;top:-110px;
  background:radial-gradient(circle,rgba(0,216,114,.3),transparent 68%);
}
.cambio__col--si h3{color:#fff}
.cambio__col--si li{color:var(--on-dark-2);border-top-color:rgba(255,255,255,.1)}
.cambio__col--si li i{background:var(--accent);color:var(--brand-950)}
.cambio__flecha{
  align-self:center;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--brand);color:var(--accent);
  box-shadow:0 12px 30px -10px rgba(7,62,44,.55);
  animation:latirFlecha 2.8s ease-in-out infinite;
}
.cambio__flecha svg{width:22px;height:22px}
@keyframes latirFlecha{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.cambio__flecha{animation:none}}
@media (max-width:900px){
  .cambio{grid-template-columns:1fr}
  .cambio__flecha{transform:rotate(90deg);margin-inline:auto;animation:none}
}

/* =========================================================
   5 · PREGUNTAS FRECUENTES  ·  resolver objeciones
   Se responden las dudas justo antes de pedir la cita.
   ========================================================= */
.faq{max-width:880px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.4rem .3rem;background:none;border:0;cursor:pointer;text-align:left;
  font-weight:800;font-size:1.04rem;letter-spacing:-.02em;color:var(--text);
  transition:color .25s var(--ease);
}
.faq__q:hover{color:var(--brand-700)}
.faq__q i{
  flex:none;width:30px;height:30px;border-radius:50%;margin-top:-.15rem;
  display:grid;place-items:center;position:relative;
  background:rgba(0,216,114,.13);transition:transform .45s var(--ease-cine),background .3s;
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;background:var(--brand-700);border-radius:2px;
  transition:transform .45s var(--ease-cine),opacity .3s;
}
.faq__q i::before{width:12px;height:2px}
.faq__q i::after{width:2px;height:12px}
.faq__item.abierto .faq__q i{background:var(--accent);transform:rotate(180deg)}
.faq__item.abierto .faq__q i::after{transform:scaleY(0);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-cine)}
.faq__item.abierto .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{
  color:var(--text-2);font-size:.98rem;line-height:1.68;
  padding:0 3rem 1.5rem .3rem;
}

/* =========================================================
   6 · AGENDAR  ·  el único paso siguiente
   Patrón de las páginas de servicio que mejor convierten:
   una acción dominante y expectativas claras.
   ========================================================= */
.agenda{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-950) 58%,var(--brand-1000) 100%);
  color:#fff;box-shadow:0 46px 90px -40px rgba(4,36,26,.8);
}
.agenda::before{
  content:"";position:absolute;width:min(60vw,640px);aspect-ratio:1;
  right:-16%;top:-42%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,216,114,.26),transparent 66%);
  animation:deriva1 26s ease-in-out infinite alternate;
}
.agenda > *{position:relative;z-index:2}
.agenda h2{font-size:clamp(1.8rem,3.5vw,2.7rem);letter-spacing:-.035em;margin:.7rem 0 .9rem;max-width:20ch}
.agenda__lead{color:var(--on-dark-2);max-width:56ch;font-size:1.04rem}
.agenda__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.agenda__pasos{display:grid;gap:.8rem;margin-top:2rem}
.agenda__paso{
  display:flex;gap:.95rem;align-items:flex-start;
  padding:1rem 1.2rem;border-radius:var(--r);
  background:var(--vidrio);border:1px solid var(--vidrio-l);
  transition:transform .4s var(--ease-cine),border-color .3s,background .3s;
}
.agenda__paso:hover{transform:translateX(5px);border-color:rgba(0,216,114,.45);background:rgba(0,216,114,.08)}
.agenda__paso b{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;
  background:var(--accent);color:var(--brand-950);
}
.agenda__paso span{font-size:.94rem;color:var(--on-dark-2);line-height:1.5}
.agenda__paso span strong{display:block;color:#fff;font-size:.98rem;margin-bottom:.15rem}
.agenda__acciones{display:grid;gap:.75rem}
.agenda__acciones .btn{width:100%}
.agenda__nota{
  margin-top:1rem;font-size:.82rem;color:var(--stone);
  display:flex;align-items:flex-start;gap:.5rem;line-height:1.5;
}
.agenda__nota svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:.15rem}
@media (max-width:900px){ .agenda__grid{grid-template-columns:1fr} }

/* =========================================================
   7 · TARJETAS DE PROGRAMA CON MÁS INTENCIÓN
   ========================================================= */
/* La banda superior es más alta y el velo verde más suave: ahora
   que hay fotografía real, conviene que se vea. El degradado sigue
   siendo opaco abajo, que es donde arranca el texto. */
.progcard.has-photo::before{
  height:178px;
  background:
    linear-gradient(180deg, rgba(7,62,44,.12) 0%, rgba(7,62,44,.45) 55%, rgba(7,62,44,.92) 100%),
    var(--photo) center 42%/cover no-repeat;
}
@media (max-width:720px){ .progcard.has-photo::before{height:150px} }
.progcard{display:flex;flex-direction:column}
.progcard p{flex:1}
.progcard__ver{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.84rem;font-weight:800;color:var(--accent);
  opacity:.001;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease-cine);
}
.progcard:hover .progcard__ver,
.progcard:focus-within .progcard__ver{opacity:1;transform:none}
.progcard__ver svg{width:15px;height:15px;transition:transform .35s var(--ease-cine)}
.progcard:hover .progcard__ver svg{transform:translateX(4px)}
@media (hover:none){ .progcard__ver{opacity:1;transform:none} }

/* =========================================================
   8 · BARRA FIJA EN MÓVIL
   En el teléfono la acción nunca queda a más de un pulgar.
   ========================================================= */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  grid-template-columns:1fr 1fr;gap:.55rem;padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(2,22,17,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
}
.barra-fija .btn{width:100%;padding:.8rem 1rem;font-size:.9rem}
/* La barra es oscura: el botón secundario necesita texto claro */
.barra-fija .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.3)}
.barra-fija .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
@media (max-width:720px){
  .barra-fija{display:grid}
  .fab{display:none}
  body{padding-bottom:4.6rem}
}

/* =========================================================
   9 · DETALLES FINOS
   ========================================================= */
/* Cabeceras de sección con más aire y jerarquía */
.section__head h2{letter-spacing:-.035em}
.section__head.center{text-align:center}

/* Campo de formulario: etiqueta que acompaña al foco */
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 4px rgba(0,216,114,.16);
}
.field select{
  width:100%;padding:.78rem .95rem;border:1.5px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a5a53' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;
}

/* Números del proceso con un trazo que los une */
.steps{position:relative}
.step::after{
  content:"";position:absolute;left:calc(44px + .6rem);right:-1.6rem;top:22px;height:1.5px;
  background:linear-gradient(90deg,rgba(0,216,114,.45),rgba(0,216,114,0));
}
.step:last-child::after{display:none}
@media (max-width:1150px){ .step::after{display:none} }

/* La marca del nav reacciona al cursor */
.nav__inner > a .brand{transition:transform .4s var(--ease-cine)}
.nav__inner > a:hover .brand{transform:scale(1.04)}

/* Enlaces de contacto del pie con subrayado animado */
.footer a{position:relative;width:fit-content}

/* =========================================================
   10 · MENOS MOVIMIENTO SI ASÍ SE PIDIÓ
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero__foto.has-photo{animation:none}
  .hero__aurora{animation:none}
  .hero__cue i::after{animation:none}
  .rotor__barra{animation:none;width:100%}
  .agenda::before{animation:none}
  html.banner-activo .hero--cine .entra{opacity:1;transform:none;filter:none}
}