/* Clínica Dental Aguilar — muestra para Archix Agency.
   Paleta: blanco hielo de base, con el rosa y el verde muestreados del logo real
   del cliente (#ea186e y #99f934, contados sobre logoaguilar.png).
   El verde de marca es ácido y no pasa contraste sobre claro: se usa solo como
   acento gráfico, nunca para texto. */

:root{
  --hielo:#f7f5f1;
  --blanco:#fff;
  --tinta:#1a1a1c;
  --tinta-suave:#5d5d63;
  --rosa:#ea186e;
  --rosa-claro:#f04e8f;
  --rosa-hondo:#b80f53;
  --verde:#99f934;
  --filete:rgba(26,26,28,.1);

  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --max-w:1240px;
  --gutter:clamp(20px,5vw,64px);

  /* Gramática de animación tomada de la referencia: lenta y de recorrido corto.
     1,8 s para 30 px. Es lo que hace que nada salte y todo se asiente. */
  --mov:1.8s;
  --curva:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hielo);color:var(--tinta);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* El recorte horizontal se hace aqui, en la raiz. Ponerlo solo en body no basta:
   el desplazamiento lo genera el elemento html. Y no puede ir en las secciones,
   porque un ancestro con overflow oculto anula el position:sticky de la galeria
   y ademas impediria que las nubes se superpongan entre secciones. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ── Anclas bajo el nav fijo ──────────────────────────────
   En escritorio los saltos los gobierna Lenis, que ya descuenta la altura del
   nav. En movil no hay Lenis —el scroll nativo va mejor— y sin esto el salto
   dejaba el titulo de la seccion tapado por la barra de arriba. Va con la
   variable y no con un numero, para que siga cuadrando si el nav cambia. */
:where(section[id]){scroll-margin-top:calc(var(--nav-h,92px) + 12px)}
@media (pointer:coarse){ html{scroll-behavior:smooth} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.filtros{position:absolute;width:0;height:0;overflow:hidden}
.contenedor{max-width:var(--max-w);margin:0 auto;padding-inline:var(--gutter)}

/* ── Botones ──────────────────────────────────────────────
   Un solo material en toda la web: cristal liquido con las nueve sombras
   internas y el filtro de turbulencia. En reposo el vidrio esta a media
   intensidad; al pasar el cursor sube a pleno y el texto se vuelve rosa, igual
   que los enlaces de la barra de navegacion. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;white-space:nowrap;text-decoration:none;cursor:pointer;
  height:56px;padding:0 40px;border-radius:100px;
  font:600 16px/1 var(--sans);border:0;background:transparent;color:var(--tinta);
  transition:color .25s ease,transform .3s var(--curva);
  /* El boton crea su propio contexto de apilamiento: sin esto, el vidrio con
     z-index:-1 sube al contexto del ancestro y se pinta DETRAS del fondo blanco
     del panel, con lo que desaparece en todas las secciones con caja. */
  isolation:isolate;
}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  /* Detras del contenido. Un pseudo-elemento posicionado se pinta POR ENCIMA del
     texto suelto (que al no ser un elemento no admite z-index), y el filtro de
     turbulencia lo emborronaba al pasar el cursor. */
  z-index:-1;
  opacity:.5;transition:opacity .25s ease;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(0,0,0,.9),
    inset -3px -3px .5px -3px rgba(0,0,0,.85),
    inset 1px 1px 1px -.5px rgba(0,0,0,.6),
    inset -1px -1px 1px -.5px rgba(0,0,0,.6),
    inset 0 0 6px 6px rgba(0,0,0,.12),
    inset 0 0 2px 2px rgba(0,0,0,.06),
    0 0 12px rgba(255,255,255,.15);
  backdrop-filter:url("#cristal-liquido");
  -webkit-backdrop-filter:blur(2px);
}
.btn:hover::before,
.btn:focus-visible::before{opacity:1}
.btn:hover,
.btn:focus-visible{color:var(--rosa)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

/* Tamaños. La jerarquia entre botones la marca el tamaño, no el color: todos
   comparten material desde que se unificaron. */
.btn--sm{height:44px;padding:0 22px;font-size:15px}
.btn--oscuro{height:48px;padding:0 28px;font-size:15px}

/* ── Navegación ───────────────────────────────────────────
   Estructura de la referencia: logo, grupo de enlaces pegado a el, hueco grande,
   segundo grupo a la derecha y pildora de accion. El filete inferior arranca
   despues del logo y no llega al borde derecho. */

.nav{position:sticky;top:0;z-index:40;
  /* Cristal esmerilado: la barra deja ver lo de detras, pero desenfocado. Con el
     90% de opacidad que tenia antes no pasaba nada de fondo y parecia una banda
     solida. El saturado compensa el lavado de color que produce el desenfoque. */
  background:color-mix(in srgb,var(--hielo) 58%,transparent);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
}
/* Si el navegador no sabe desenfocar el fondo, se vuelve casi opaca: mas vale
   una banda solida que un texto ilegible sobre las nubes. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:color-mix(in srgb,var(--hielo) 94%,transparent)}
}
.nav__fila{position:relative;display:flex;align-items:center;gap:clamp(16px,2.4vw,44px);
  padding:clamp(12px,1.4vw,20px) clamp(18px,3.4vw,58px)}

/* El filete: arranca tras el logo, como en la referencia. */
.nav__fila::after{content:"";position:absolute;left:clamp(96px,9vw,150px);
  right:clamp(18px,3.4vw,58px);bottom:0;height:1px;background:var(--filete)}

.nav__logo{flex:none;display:block;line-height:0}
.nav__logo img{height:clamp(38px,3.4vw,52px);width:auto}

.nav__grupo{display:none;align-items:center;gap:clamp(10px,1.6vw,26px)}
.nav__grupo--izq{margin-left:clamp(8px,2vw,34px)}
.nav__grupo--der{margin-left:auto}
@media (min-width:1040px){ .nav__grupo{display:flex} }

/* Enlace con cristal liquido: la capa de vidrio aparece al pasar por encima. */
.nav__enlace{position:relative;display:inline-flex;align-items:center;
  /* 44 px de alto minimo: el criterio de area de toque se cumple tambien aqui,
     aunque estos enlaces solo se muestren en escritorio. */
  min-height:44px;padding:12px 16px;border-radius:100px;text-decoration:none;
  font:700 clamp(13px,1.02vw,15.5px)/1 var(--sans);color:var(--tinta);
  white-space:nowrap;transition:color .2s ease}
.nav__enlace > span:last-child{position:relative;z-index:1}
.nav__enlace .vidrio{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(0,0,0,.9),
    inset -3px -3px .5px -3px rgba(0,0,0,.85),
    inset 1px 1px 1px -.5px rgba(0,0,0,.6),
    inset -1px -1px 1px -.5px rgba(0,0,0,.6),
    inset 0 0 6px 6px rgba(0,0,0,.12),
    inset 0 0 2px 2px rgba(0,0,0,.06),
    0 0 12px rgba(255,255,255,.15);
  backdrop-filter:url("#cristal-liquido");
  -webkit-backdrop-filter:blur(2px);
}
.nav__enlace:hover .vidrio,
.nav__enlace:focus-visible .vidrio{opacity:1}
.nav__enlace:hover{color:var(--rosa)}

/* La pildora de accion comparte material con todo lo demas: cristal claro. El
   fondo oscuro dejaba el rosa del hover ilegible sobre negro. */
.btn--oscuro{height:48px;padding:0 28px;font-size:15px}

/* ── Hero editorial ───────────────────────────────────────
   Estructura de la referencia: antetitulo arriba a la izquierda, titular en tres
   lineas con sangrias distintas —la segunda se sale por la izquierda—, la pieza
   3D solapando entre la segunda y la tercera, y la tercera linea pasando POR
   ENCIMA de la pieza. Subtitulo abajo a la izquierda. */

.hero{position:relative;isolation:isolate;overflow:hidden;
  /* El hero cabe en una pantalla: si es mas alto, las nubes del pie se quedan
     fuera del primer golpe de vista y el efecto no se ve hasta hacer scroll.
     svh evita el salto por la barra del navegador en movil. */
  /* El hero empieza en el borde de arriba, por debajo de la barra: sin esto,
     detras del cristal no hay nada que desenfocar y parece una banda solida. */
  margin-top:calc(-1 * var(--nav-h,92px));
  padding-top:var(--nav-h,92px);
  min-height:100svh;
  /* Centrado vertical SIN flex: con flex los hijos se encogen a su contenido y
     las sangrias escalonadas del titular se pierden. Con grid conservan el
     ancho completo de la columna. */
  display:grid;grid-template-rows:1fr;align-content:center;
  padding-bottom:clamp(56px,7vw,104px)}
.hero__marco{position:relative;z-index:3;width:100%;max-width:1680px;margin:0 auto;
  align-self:center;
  padding-inline:clamp(18px,3.4vw,58px)}

/* Cielo de fondo: se apaga hacia abajo con una mascara para que el titular y los
   botones sigan teniendo contraste. Sin ese degradado el texto pelea con la foto. */
.hero__cielo{
  position:absolute;inset:0 -5% 0;z-index:0;
  background:url("../assets/img/cielo-fondo.webp") center 30%/cover no-repeat;
  opacity:.88;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 97%);
}
/* Un velo del color de fondo encima, para que la foto no suba el contraste. */
.hero__cielo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(247,245,241,.12),rgba(247,245,241,.62))}

/* Las nubes de los lados. Salen medio fuera del marco a proposito: asi el
   desplazamiento lateral no deja huecos vacios en los bordes. */
.hero__nube{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  width:clamp(380px,48vw,820px);height:auto;
  /* Apoyadas en el borde de abajo del hero, no flotando a media altura. */
  bottom:clamp(-70px,-4vw,-20px);
  opacity:.9;will-change:transform;
  /* La nube de arriba crece anclada por ABAJO: su borde inferior no se mueve de
     la linea de corte por mucho que aumente la escala. */
  transform-origin:bottom center;
  filter:drop-shadow(0 18px 30px rgba(26,26,28,.07));
}
.hero__nube--izq{left:clamp(-300px,-17vw,-110px)}
.hero__nube--der{right:clamp(-300px,-17vw,-110px);
  bottom:clamp(-96px,-6vw,-34px)}
/* El volteo de la nube derecha lo aplica el JS junto al desplazamiento: si se
   deja aqui, la primera transformacion del scroll se lo come. */
.hero__nube--der:not([style]){transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){ .hero__nube{will-change:auto} }
/* Las nubes son decoracion y en movil competian con el texto: a 390 px cada
   una ocupa casi toda la pantalla, y las dos se juntaban por el centro encima
   de titulares y botones. Se bajan de opacidad para que sigan estando sin
   taparlo todo. En escritorio no cambian. */
@media (max-width:760px){ .hero__nube{width:70vw;opacity:.42} }

.hero__antetitulo{margin:0 0 clamp(26px,5vw,74px);
  font:600 clamp(13px,1.1vw,16px)/1.45 var(--sans);color:var(--tinta)}

.hero__titulo{
  margin:0;position:relative;font-weight:500;
  font-size:clamp(50px,11.4vw,152px);line-height:.86;letter-spacing:-.035em;
}
.hero__l1,.hero__l2,.hero__l3{display:block;position:relative}
/* La primera entra sangrada; la segunda rompe hacia la izquierda; la tercera se
   va al lado contrario. Ese vaiven es lo que da el aire editorial. */
.hero__l1{margin-left:clamp(0px,11vw,182px)}
.hero__l2{margin-left:clamp(-10px,-1.2vw,-26px);margin-top:clamp(-6px,-.6vw,-2px)}
.hero__l3{text-align:right;margin-top:clamp(-8px,-.8vw,-2px);z-index:2}
.hero__l3 em{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.12em;color:var(--rosa);letter-spacing:-.015em;padding-right:.06em}

/* La pieza se coloca entre la segunda y la tercera linea, a la derecha, y queda
   por debajo del texto: la tercera linea le pasa por encima. */
.hero__molar{
  position:absolute;z-index:1;pointer-events:auto;
  right:clamp(0px,6vw,132px);
  /* Sube para ocupar el hueco muerto de la derecha, entre el antetitulo y la
     primera linea, y sigue solapando el titular por abajo. */
  bottom:clamp(30px,6.5vw,140px);
  width:clamp(230px,28vw,430px);aspect-ratio:1/1;
}
.hero__molar model-viewer{position:absolute;inset:0;width:100%;height:100%;
  background:transparent;--poster-color:transparent}
/* model-viewer pinta por defecto una barra de progreso fina en el borde superior
   y un poster de relleno. Aqui estorban: el respaldo propio ya cubre la espera. */
.hero__molar model-viewer::part(default-progress-bar){display:none}
.hero__molar model-viewer::part(default-poster){background:transparent;border:0}
.molar__respaldo{position:absolute;inset:0;display:grid;place-items:center;
  padding:10%;transition:opacity .6s ease;pointer-events:none}
.molar__respaldo svg{width:100%;height:auto;max-height:100%}
/* El respaldo ya no es una silueta plana: es el propio modelo renderizado a
   655x900 y guardado en WebP (29 kB). En movil es lo unico que se descarga. */
.molar__respaldo img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(60,52,48,.16))}

/* Boton de carga bajo demanda. Solo existe en tactil o pantalla estrecha, y se
   retira solo en cuanto el modelo esta en pantalla. */
.molar__ver3d{display:block;margin:-6px 0 0 auto;z-index:3;position:relative;
  min-height:44px;padding:11px 18px;border:0;border-radius:100px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 2px 14px rgba(60,52,48,.16),inset 0 0 0 1px rgba(255,255,255,.55);
  font:600 14px/1 var(--sans);color:var(--tinta);cursor:pointer;
  touch-action:manipulation;transition:opacity .25s ease}
.molar__ver3d:disabled{opacity:.6;cursor:default}
.molar__ver3d:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}

.hero__pie{margin:clamp(22px,3vw,40px) 0 0;margin-left:clamp(0px,9vw,190px);
  font:600 clamp(13px,1.05vw,16px)/1.5 var(--sans);color:var(--tinta)}

.hero__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:clamp(24px,3vw,36px);
  /* Desplazados hacia el centro: pegados al margen izquierdo, la nube rosa que
     sube desde esa esquina se les echaba encima. */
  margin-left:clamp(0px,9vw,190px)}
.tarjeta-argumento .hero__acciones{margin-top:0}
.fichas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ficha{display:flex;align-items:center;gap:8px;background:var(--blanco);
  border:1px solid var(--filete);border-radius:100px;padding:9px 16px;
  font-size:14px;color:var(--tinta-suave)}
.ficha b{color:var(--tinta);font-weight:600}
.ficha__punto{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none}

/* En pantalla estrecha el vaiven no cabe: el titular se alinea a la izquierda y
   la pieza pasa a ser un bloque mas, entre la segunda y la tercera linea. */
@media (max-width:760px){
  .hero__l1,.hero__l2{margin-left:0}
  .hero__l3{text-align:left}
  .hero__molar{position:relative;right:auto;bottom:auto;
    width:min(62vw,300px);margin:clamp(-18px,-3vw,-6px) 0 clamp(-14px,-2vw,-4px) auto;
    display:block}
}

/* ── Barra fija de móvil ──────────────────────────────────── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filete);
  border-top:1px solid var(--filete);padding-bottom:env(safe-area-inset-bottom,0)}
.barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:60px;background:var(--blanco);text-decoration:none;
  font:600 12px/1 var(--sans);color:var(--tinta)}
.barra svg{width:20px;height:20px;stroke:var(--rosa);fill:none;stroke-width:1.7}
@media (min-width:900px){ .barra{display:none} }
@media (max-width:899px){ body{padding-bottom:60px} }

/* ── Revelado al entrar en pantalla ───────────────────────── */
/* Entradas con direccion: el titular llega deslizandose desde las paredes y el
   epigrafe cae desde arriba. El recorrido es largo pero la curva es la misma que
   el resto, para que no desentone con la referencia. */
.revelar.desde-derecha{transform:translateX(58vw)}
.revelar.desde-izquierda{transform:translateX(-58vw)}
.revelar.desde-arriba{transform:translateY(-46px)}
.revelar.desde-derecha,.revelar.desde-izquierda{transition-duration:1.5s}
.revelar.visible.desde-derecha,
.revelar.visible.desde-izquierda,
.revelar.visible.desde-arriba{transform:none}

.revelar{opacity:0;transform:translateY(30px);
  transition:opacity var(--mov) var(--curva),transform var(--mov) var(--curva)}
.revelar.visible{opacity:1;transform:none}
.revelar[data-retardo="1"]{transition-delay:.2s}
.revelar[data-retardo="2"]{transition-delay:.4s}
.revelar[data-retardo="3"]{transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  .revelar{transition:none;opacity:1;transform:none}
  .btn--cristal{transition:none}
  *{animation-duration:.001ms!important}
}

/* ── Pie ──────────────────────────────────────────────────
   Estructura de la referencia: marca de agua grande y translucida al fondo,
   dos columnas de enlaces arriba a la derecha, el telefono a gran tamaño y una
   linea inferior con los legales. */
.pie{position:relative;isolation:isolate;overflow:hidden;
  background:var(--hielo);border-top:1px solid var(--filete);
  padding:clamp(48px,7vw,110px) 0 clamp(24px,3vw,40px)}

/* La marca de agua: el logo de la clinica, muy tenue, tras el contenido. */
/* A la derecha y arriba: sobre el telefono grande la marca de agua ensuciaba
   las dos piezas. Aqui ocupa el hueco que dejan las columnas de enlaces. */
.pie__marca{position:absolute;z-index:0;pointer-events:none;
  right:clamp(-60px,-2vw,20px);bottom:clamp(-30px,2vw,40px);
  width:clamp(300px,38vw,620px);height:auto;opacity:.07}
@media (max-width:900px){ .pie__marca{opacity:.05} }

.pie__caja{position:relative;z-index:1;max-width:1680px;margin:0 auto;
  padding-inline:clamp(18px,3.4vw,58px)}

.pie__columnas{display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:clamp(28px,5vw,90px);margin-bottom:clamp(30px,4vw,56px)}
.pie__col{display:flex;flex-direction:column;gap:2px;min-width:180px}
.pie__titulo{margin:0 0 6px;font:600 14px/1 var(--sans);color:var(--tinta-suave)}
/* 44 px de alto minimo: son doce enlaces seguidos y con 24 px se tocaba el de
   al lado. El margen negativo evita que la columna se ensanche por el relleno. */
.pie__col a{display:inline-flex;align-items:center;min-height:44px;
  padding-inline:10px;margin-inline:-10px;border-radius:10px;
  font-size:15px;color:var(--tinta);text-decoration:none;
  transition:color .2s ease,background-color .2s ease}
.pie__col a:hover{background:color-mix(in srgb,var(--rosa) 7%,transparent)}
.pie__col a:hover{color:var(--rosa)}

/* El telefono es lo mas grande del pie: en un negocio local, es la conversion. */
.pie__tel{display:block;text-decoration:none;color:var(--tinta);
  font-weight:500;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(46px,10.5vw,150px);
  transition:color .25s ease}
.pie__tel:hover{color:var(--rosa)}

.pie__abajo{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:clamp(18px,3vw,40px);
  margin-top:clamp(14px,2vw,26px)}
.pie__dir{font-style:normal;font-size:14px;line-height:1.6;color:var(--tinta-suave)}
.pie__mail{font-family:var(--serif);font-style:italic;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--tinta);text-decoration:none;
  font-size:clamp(34px,7vw,104px);transition:color .25s ease}
.pie__mail:hover{color:var(--rosa)}

/* ── Areas tactiles ───────────────────────────────────────
   En pantalla tactil todo lo pulsable tiene que medir 44 px de lado, que es el
   minimo con el que un dedo acierta sin fallar. Tres enlaces se quedaban cortos:
   el logo del nav (38 px de alto), el telefono gigante del pie (42, por su
   line-height de .92) y el enlace de WhatsApp (34). Se corrigen con relleno y se
   compensa con margen negativo, para que la maqueta no se mueva ni un pixel. */
@media (pointer:coarse), (max-width:899px){
  .nav__logo{display:flex;align-items:center;min-height:44px;
    margin-block:-3px}
  .pie__tel{padding-block:4px;margin-block:-4px}
  .pie__mail{display:inline-block;padding-block:5px;margin-block:-5px}
}

.pie__linea{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:10px 24px;margin-top:clamp(30px,4vw,56px);
  padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--filete);
  font-size:12px;color:var(--tinta-suave)}
.pie__aviso{max-width:52ch}

@media (max-width:760px){
  .pie__columnas{justify-content:flex-start}
  .pie__linea{flex-direction:column}
}


/* Copia volteada de las nubes, sobre la frontera de las dos secciones. Se sale
   del hero a proposito: por eso vive en su propio contenedor, con altura cero
   para no empujar nada, y por encima del panel blanco. */
.nubes-union{
  /* Empieza EXACTAMENTE donde acaba el hero, para que el reflejo nazca en la
     misma linea en la que se corta la nube de arriba. Altura propia y overflow
     oculto (clip-path recorta el dibujo pero no el area desplazable, y la pagina
     se arrastraba en horizontal). El margen inferior negativo evita que empuje
     la seccion siguiente. */
  position:relative;z-index:6;pointer-events:none;
  /* Sin overflow oculto: recortaba las nubes en la frontera entre secciones. El
     sobrante lateral ya lo recorta html{overflow-x:clip}, que ademas no rompe el
     position:sticky de la galeria. */
  /* Alto igual al de la nube (proporcion 1400x733 sobre su ancho): asi la copia
     se ve entera y no la corta la seccion de abajo. El margen negativo del mismo
     valor evita que empuje el contenido. */
  height:calc(clamp(300px,34vw,620px) * 1177 / 1200);
  margin-bottom:calc(-1 * clamp(300px,34vw,620px) * 1177 / 1200);
}
/* La copia se ancla por ARRIBA, en la misma linea de corte, y sube unos pixeles
   para morder la nube de arriba: la primera franja del reflejo es casi
   transparente y sin ese solape se veia una banda vacia entre las dos. */
.nubes-union .hero__nube{bottom:auto;width:clamp(300px,34vw,620px);opacity:.95;
  /* Anclada por abajo, la escala la baja: se compensa subiendola ese mismo
     recorrido (medido: 377 px a 1512 de ancho) y ademas unos pixeles mas para
     morder la nube de arriba, cuya primera franja es casi transparente. */
  /* Sube mas de la cuenta a proposito: la copia monta sobre la original en
     lugar de nacer justo debajo, que es lo que da la sensacion de volumen. */
  top:calc(-1 * clamp(300px,34vw,620px) * 1177 / 1200 - clamp(150px,15vw,320px));
  /* La copia va volteada con scaleY(-1): su "arriba" en la transformacion es el
     borde que en pantalla queda abajo. Para que el borde que toca la linea de
     corte no se mueva al escalar, hay que anclarla por el lado contrario. */
  transform-origin:bottom center}
/* La copia nace justo encima del titular de la seccion siguiente, asi que en
   movil es la que mas molesta: iba a opacity .95 y tapaba «...sin salir del
   pueblo». Se deja como un velo. */
@media (max-width:760px){ .nubes-union .hero__nube{opacity:.3} }
.nubes-union .hero__nube--der{top:calc(-1 * clamp(300px,34vw,620px) * 1177 / 1200 - clamp(150px,15vw,320px))}

/* ── Secciones sobre panel blanco ─────────────────────────
   La referencia apoya el contenido en DOS paneles blancos separados por un hueco
   estrecho: al tener las esquinas de arriba muy redondeadas, ese hueco dibuja una
   muesca en el borde superior. */
/* Sin margen lateral: el panel llega a las paredes de la ventana. Sin z-index
   propio, para que las nubes de union puedan quedar por encima de el. */
.panel{position:relative;padding:0}
.panel:first-of-type{margin-top:clamp(-40px,-3vw,-16px)}
.panel + .panel{margin-top:clamp(12px,1.4vw,22px)}

/* Panel unico: una sola caja blanca con todo dentro. */
/* Sin overflow:hidden aqui: un ancestro con overflow oculto anula el
   position:sticky de la galeria y el bloque deja de quedarse fijo. */
.panel__caja{background:var(--blanco);border-radius:clamp(22px,2.6vw,38px);
  padding:clamp(44px,6vw,96px) 0 clamp(48px,6.5vw,104px)}
.panel--claro .panel__caja{background:color-mix(in srgb,var(--hielo) 55%,var(--blanco))}
/* La galeria termina justo en el borde del panel: con relleno debajo quedaba una
   franja blanca suelta bajo la ultima tarjeta. */
.panel--galeria .panel__caja{padding-bottom:0}
.panel--galeria .galeria{margin-bottom:0}
.panel__contenido{padding-inline:clamp(18px,3.4vw,58px)}

.epigrafe{margin:0 0 clamp(20px,2.6vw,38px);text-align:center;
  font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta)}

/* Titular en dos lineas: la primera a la izquierda del centro, la segunda
   desplazada a la derecha y con la cursiva mucho mayor que la sans. */
.titulo-partido{margin:0 0 clamp(44px,6vw,92px);display:flex;flex-direction:column;
  align-items:center;font-weight:500;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(38px,6.6vw,92px)}
.titulo-partido__a{display:block;transform:translateX(clamp(-160px,-9vw,-20px))}
.titulo-partido__b{display:block;transform:translateX(clamp(20px,7vw,130px))}
.titulo-partido__b em{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.62em;letter-spacing:-.02em;color:var(--rosa);padding-left:.08em}

/* En escritorio las dos mitades se separan a los lados y se lee como un titulo
   partido a proposito. En una pantalla de 390 px no hay sitio para ese juego:
   el desplazamiento solo consigue que el titulo parezca mal centrado. Se anula
   y las dos lineas quedan al centro. */
@media (max-width:760px){
  .titulo-partido__a,.titulo-partido__b{transform:none}
  .titulo-partido{text-align:center}
}

/* ── Galería gobernada por el scroll ──────────────────────
   El bloque mide varias pantallas de alto; dentro, una capa pegada ocupa la
   pantalla entera. Al recorrer ese alto se cambia la imagen de fondo, el rotulo
   grande y la miniatura activa. Todo lo mueve js/main.js. */
.galeria{position:relative;height:calc(var(--n,10) * 46svh);
  margin-top:clamp(24px,3vw,44px)}
.galeria__pegado{position:sticky;top:0;height:100svh;overflow:hidden;
  border-radius:clamp(18px,2vw,28px);
  display:grid;place-items:center;isolation:isolate}

/* Fondos apilados: solo el activo esta visible, y el cambio es un fundido. */
.galeria__fondos{position:absolute;inset:0;z-index:0}
.galeria__fondo{position:absolute;inset:0;opacity:0;
  transition:opacity .8s var(--curva);
  background-size:cover;background-position:center;
  background-color:var(--hielo);
}
.galeria__fondo.activo{opacity:1}
/* Velo para que el rotulo y las miniaturas se lean sobre cualquier foto. */
.galeria__fondos::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(26,26,28,.18),rgba(26,26,28,.32))}

/* Rotulo enorme detras de las miniaturas */
.galeria__rotulos{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding-inline:clamp(12px,3vw,50px)}
.galeria__rotulo{grid-area:1/1;margin:0;text-align:center;color:var(--blanco);
  font-weight:500;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(46px,11vw,160px);
  opacity:0;transform:scale(.97);
  transition:opacity .7s var(--curva),transform .9s var(--curva);
  text-shadow:0 6px 40px rgba(26,26,28,.25);
}
.galeria__rotulo.activo{opacity:1;transform:none}

/* Columna de miniaturas, centrada, con la activa enmarcada. */
.galeria__barra{position:relative;z-index:2;
  height:clamp(320px,52svh,520px);width:clamp(64px,6vw,86px);
  overflow:hidden;border-radius:16px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:6px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}
.galeria__minis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:8px;will-change:transform}
.galeria__mini{flex:none}
.galeria__mini button{display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer}
.galeria__mini span{display:block;aspect-ratio:3/4;border-radius:10px;
  background-size:cover;background-position:center;
  background-color:var(--hielo);
  outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .35s var(--curva),transform .35s var(--curva)}
.galeria__mini.activa span{outline-color:var(--blanco);transform:scale(1.04)}

/* Pie: nombre completo y descripcion del servicio activo. */
.galeria__pies{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,54px);z-index:2;
  display:grid;place-items:center;padding-inline:clamp(18px,4vw,60px)}
.galeria__pie{grid-area:1/1;max-width:46ch;text-align:center;color:var(--blanco);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--curva),transform .6s var(--curva)}
.galeria__pie.activo{opacity:1;transform:none}
.galeria__pie-titulo{margin:0 0 6px;font:600 clamp(17px,1.7vw,22px)/1.2 var(--sans)}
.galeria__pie-texto{margin:0;font-size:clamp(14px,1.2vw,16px);line-height:1.55;
  color:rgba(255,255,255,.86)}

@media (prefers-reduced-motion:reduce){
  .galeria__fondo,.galeria__rotulo,.galeria__pie{transition:none}
}

/* ── La galeria en movil ──────────────────────────────────
   Dos cosas que solo se rompen en pantalla estrecha, medidas a 390 px:

   1· La tira de miniaturas iba centrada, porque el contenedor pegado es un
      grid con place-items:center. En escritorio el rotulo es tan ancho que la
      tira se lee como una capa por encima; en movil el rotulo mide 142 px y la
      tira le cruzaba por el medio (miniaturas 169-221, rotulo 124-266). Se
      lleva al margen derecho, donde no pisa nada.

   2· El pie terminaba en 810 px con la barra fija de contacto empezando en
      783: las dos ultimas lineas quedaban debajo. Se sube por encima de ella. */
@media (max-width:899px){
  .galeria__barra{justify-self:end;margin-right:clamp(10px,3vw,20px)}
  .galeria__pies{bottom:calc(61px + clamp(14px,3vh,26px));
    padding-inline:clamp(16px,5vw,28px)}
  /* El rotulo se aparta de la tira para que no se toquen ni en los nombres
     mas largos, como «Odontologia infantil». */
  .galeria__rotulos{padding-right:clamp(74px,22vw,104px)}
}

/* Tarjeta del argumento */
.tarjeta-argumento{text-align:center;max-width:980px}
.argumento{margin:0 auto clamp(18px,2vw,26px);
  font-weight:500;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(34px,5.6vw,76px)}
/* Cada linea es un bloque propio: asi entra por su lado sin arrastrar a las
   demas, y el salto de linea deja de depender del ancho de la ventana. */
.argumento span{display:block}
.argumento em{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.08em;color:var(--rosa)}
.argumento__pie{margin:0 auto clamp(26px,3vw,38px);max-width:56ch;
  font-size:clamp(16px,1.5vw,18px);color:var(--tinta-suave)}
/* El desplazamiento lateral es solo del hero (para esquivar la nube rosa): aqui
   se anula, o los botones quedan descentrados hacia la derecha. */
.tarjeta-argumento .hero__acciones{justify-content:center;margin-left:0}

/* ── Franja de confianza ──────────────────────────────────
   Los cuatro datos que decide alguien antes de coger el telefono. */
.panel__caja--franja{padding-block:clamp(30px,4vw,56px)}
.franja{display:grid;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:center}
/* Cada dato en su tarjeta de cristal: misma receta que los botones —las nueve
   sombras internas y el filtro de turbulencia sobre el fondo—, aqui en cuadrado. */
.franja__dato{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  padding:clamp(18px,1.8vw,26px) clamp(16px,1.6vw,24px);
  min-height:clamp(112px,9vw,136px);
  border-radius:18px;overflow:hidden;
  transition:transform .45s var(--curva)}
.franja__dato::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(0,0,0,.9),
    inset -3px -3px .5px -3px rgba(0,0,0,.85),
    inset 1px 1px 1px -.5px rgba(0,0,0,.6),
    inset -1px -1px 1px -.5px rgba(0,0,0,.6),
    inset 0 0 6px 6px rgba(0,0,0,.12),
    inset 0 0 2px 2px rgba(0,0,0,.06),
    0 0 12px rgba(255,255,255,.15);
  backdrop-filter:url("#cristal-liquido");
  -webkit-backdrop-filter:blur(2px);
  /* Mismo comportamiento que los enlaces de la barra: en reposo el vidrio esta
     atenuado y al pasar el cursor sube a pleno, con la misma transicion. */
  opacity:.5;transition:opacity .25s ease;
}
.franja__dato > *{position:relative;z-index:1}
.franja__dato:hover::before,
.franja__dato:focus-within::before{opacity:1}
/* Y el texto pasa al rosa de marca, como en la barra. */
.franja__dato .franja__cifra{transition:color .2s ease}
.franja__dato:hover .franja__cifra{color:var(--rosa)}
.franja__dato:hover{transform:translateY(-4px)}
/* Nada de cuadrado: con dos lineas de texto, un cuadrado de 373 px dejaba la
   franja altisima y el contenido flotando en el centro. */

/* El cristal se lee sobre fondo hielo, como en la barra de navegacion. Sobre el
   blanco del panel el borde se diluia y no parecia el mismo material. */
.panel__caja--franja{background:var(--hielo)}
.franja__cifra{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em}
.franja__cifra small{font-size:.62em;font-weight:500;color:var(--tinta-suave)}
.franja__pie{font-size:15px;color:var(--tinta-suave)}

/* ── Seis motivos ─────────────────────────────────────────── */
.motivos{display:grid;gap:clamp(14px,1.6vw,22px);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.motivo{background:var(--hielo);border:1px solid var(--filete);border-radius:18px;
  padding:clamp(24px,2.6vw,34px);
  transition:transform .45s var(--curva),box-shadow .45s var(--curva)}
.motivo:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(26,26,28,.07)}
.motivo__num{display:block;margin-bottom:12px;
  font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--rosa)}
.motivo h3{margin:0 0 8px;font-size:clamp(19px,1.7vw,23px);font-weight:600;
  letter-spacing:-.015em;line-height:1.2}
.motivo p{margin:0;font-size:15px;line-height:1.55;color:var(--tinta-suave)}

/* El formulario va en tinta: cierra la pagina en oscuro y separa el ultimo paso
   —dejar los datos— de todo lo anterior. Los campos se quedan claros para que
   escribir siga siendo comodo. */
#contacto .panel__caja{background:var(--tinta)}
#contacto .epigrafe{color:rgba(255,255,255,.7)}
#contacto .titulo-partido{color:var(--blanco)}
#contacto .titulo-partido__b em{color:var(--rosa-claro)}
#contacto .campo label{color:rgba(255,255,255,.86)}
#contacto .formulario__legal{color:rgba(255,255,255,.62)}
#contacto .campo input,
#contacto .campo textarea{background:var(--blanco);border-color:transparent;
  color:var(--tinta)}
#contacto .campo input:focus,
#contacto .campo textarea:focus{border-color:var(--rosa-claro);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rosa-claro) 34%,transparent)}
#contacto .formulario__aviso{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);color:var(--blanco)}
#contacto .formulario__aviso a{color:var(--rosa-claro)}
/* Sobre tinta, el vidrio de los botones se calca en blanco. */
#contacto .btn{color:var(--blanco)}
#contacto .btn::before{
  box-shadow:
    inset 3px 3px .5px -3px rgba(255,255,255,.9),
    inset -3px -3px .5px -3px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.1),
    inset 0 0 2px 2px rgba(255,255,255,.05),
    0 0 12px rgba(0,0,0,.2);
}
#contacto .btn:hover{color:var(--rosa-claro)}

/* La seccion de opiniones va invertida: rosa de marca al fondo y tarjetas
   claras encima. Es el unico bloque de color pleno de la pagina, asi que corta
   la sucesion de paneles claros y marca el punto donde se habla de confianza. */
#resenas .panel__caja{background:var(--rosa)}
#resenas .epigrafe{color:rgba(255,255,255,.82)}
#resenas .titulo-partido{color:var(--blanco)}
#resenas .titulo-partido__b em{color:var(--blanco)}
#resenas .opiniones__aviso{color:rgba(255,255,255,.78)}
/* Sobre rosa, el boton de cristal necesita texto blanco y su vidrio aclarado. */
#resenas .btn{color:var(--blanco)}
#resenas .btn::before{
  box-shadow:
    inset 3px 3px .5px -3px rgba(255,255,255,.9),
    inset -3px -3px .5px -3px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
}
#resenas .btn:hover{color:var(--blanco)}

/* ── Opiniones ────────────────────────────────────────────
   Dos filas que corren en sentidos opuestos, al modo del carrusel de
   referencia. Los textos de esta muestra son ejemplos declarados: las reseñas
   reales entran por la API de Google con atribucion. */
.opiniones__aviso{margin:clamp(-18px,-1.4vw,-8px) auto clamp(30px,3.4vw,48px);
  max-width:56ch;text-align:center;font-size:14px;color:var(--tinta-suave)}

.opiniones{display:grid;gap:clamp(12px,1.4vw,20px)}
.opiniones__fila{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.opiniones__pista{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;
  animation:correrOpiniones 46s linear infinite}
.opiniones__fila--vuelta .opiniones__pista{animation-direction:reverse;
  animation-duration:54s}
.opiniones:hover .opiniones__pista{animation-play-state:paused}

@keyframes correrOpiniones{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}     /* la mitad, porque el contenido va duplicado */
}

.opinion{flex:none;width:clamp(268px,25vw,360px);
  background:var(--blanco);border:1px solid var(--filete);border-radius:18px;
  padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:14px}
.opinion__estrellas{color:var(--rosa);font-size:15px;letter-spacing:.12em}
.opinion{box-shadow:0 14px 30px rgba(120,8,52,.14)}
.opinion__texto{margin:0;font-size:15px;line-height:1.6;color:var(--tinta)}
.opinion__firma{display:flex;align-items:center;gap:12px;margin-top:auto}
.opinion__inicial{flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--rosa) 12%,var(--hielo));
  color:var(--rosa);font-weight:700;font-size:15px}
.opinion__firma b{display:block;font-size:14px;font-weight:600}
.opinion__firma small{display:block;font-size:13px;color:var(--tinta-suave)}

.resenas__acciones{justify-content:center;margin-left:0;
  margin-top:clamp(28px,3.2vw,44px)}

/* Sin animacion no hay carrusel: las tarjetas se apilan y se ven todas. */
@media (prefers-reduced-motion:reduce){
  .opiniones__pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .opiniones__fila{-webkit-mask-image:none;mask-image:none}
}

/* ── Dónde estamos ────────────────────────────────────────── */
.donde{display:grid;gap:clamp(20px,2.6vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  text-align:center;margin-bottom:clamp(28px,3.4vw,46px)}
.donde__bloque h3{margin:0 0 10px;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosa)}
.donde__bloque p{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.6}
/* Telefono y WhatsApp son los enlaces mas importantes de la pagina: se les da
   area de toque de sobra en vez de dejarlos como texto corrido. */
.donde__bloque a{display:inline-block;min-height:44px;line-height:44px;
  padding-inline:14px;margin-inline:-14px;border-radius:100px;
  text-decoration:none;transition:color .2s ease,background-color .2s ease}
.donde__bloque a:hover{color:var(--rosa);
  background:color-mix(in srgb,var(--rosa) 8%,transparent)}
.donde__acciones{justify-content:center;margin-left:0}

/* ── Revelado por zoom ────────────────────────────────────
   Cada motivo arranca como una pastilla estrecha entre dos textos y crece con el
   scroll hasta llenar la pantalla. Las medidas las interpola js/main.js: aqui
   solo quedan el estado de partida y el escenario. */
.zoom{position:relative;height:calc(var(--n,6) * 100svh);margin-top:clamp(20px,3vw,40px)}
.zoom__pegado{position:sticky;top:0;height:100svh;overflow:hidden;
  border-radius:clamp(18px,2vw,28px);display:grid;place-items:center}

/* Todo va anclado al centro geometrico. En fila (flex) los textos laterales
   ocupaban sitio y empujaban la caja fuera del centro segun crecia. */
.zoom__pieza{grid-area:1/1;position:relative;width:100%;height:100%;
  opacity:0;visibility:hidden;transition:opacity .45s var(--curva)}
.zoom__pieza.activa{opacity:1;visibility:visible}

.zoom__lado{position:absolute;top:50%;white-space:nowrap;font-weight:500;
  letter-spacing:-.02em;font-size:clamp(26px,4.6vw,64px);color:var(--tinta);
  will-change:transform}
/* Cada uno cuelga del centro y se aparta lo que mida media caja, que lo calcula
   el JS: asi acompañan al crecimiento sin descentrarla. */
.zoom__lado--izq{right:50%}
.zoom__lado--der{left:50%}
.zoom__lado--der{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(30px,5.4vw,76px);color:var(--rosa)}

/* En movil la palabra de la derecha nace ya cortada: mide 83 px y arranca en
   x=341 sobre un viewport de 390, asi que no llega a leerse entera en ningun
   momento del recorrido. No se pierde nada al quitarla —es la cola del propio
   titular de la tarjeta, «...gratuita», «...sin compromiso», que se lee entero
   dentro de la caja—. El numero de la izquierda si cabe y se queda. */
@media (max-width:760px){ .zoom__lado--der{display:none} }

/* La caja es lo que crece. Empieza como pastilla y acaba como panel. */
.zoom__caja{position:absolute;left:50%;top:50%;translate:-50% -50%;overflow:hidden;
  width:240px;height:68px;border-radius:100px;
  background-size:cover;background-position:center;
  box-shadow:0 18px 40px rgba(26,26,28,.12);will-change:width,height,border-radius}
/* Velo para que el texto se lea cuando la caja ya es grande. */
.zoom__caja::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(26,26,28,.5),rgba(26,26,28,.3));
  opacity:0;transition:opacity .4s var(--curva)}
.zoom__pieza.abierta .zoom__caja::after{opacity:1}

/* Centrado en los dos ejes: antes iba anclado al borde inferior y en las cajas
   grandes el texto quedaba descolgado del centro de la imagen. */
.zoom__dentro{position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,60px);text-align:center;color:var(--blanco);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--curva),transform .5s var(--curva)}
.zoom__pieza.abierta .zoom__dentro{opacity:1;transform:none}
.zoom__dentro h3{margin:0 0 8px;font-size:clamp(24px,3.4vw,46px);font-weight:600;
  letter-spacing:-.02em;line-height:1.1}
.zoom__dentro p{margin:0 auto;max-width:48ch;font-size:clamp(14px,1.4vw,18px);
  line-height:1.55;color:rgba(255,255,255,.88)}

@media (prefers-reduced-motion:reduce){
  .zoom{height:auto}
  .zoom__pegado{position:static;height:auto;display:grid;gap:14px;padding:14px}
  .zoom__pieza{position:static;opacity:1;visibility:visible;flex-direction:column}
  .zoom__caja{width:100%;height:min(60vh,420px);border-radius:20px}
  .zoom__caja::after,.zoom__dentro{opacity:1;transform:none}
}

/* ── Preguntas frecuentes ─────────────────────────────────
   Barras horizontales semitransparentes sobre una foto, como la seccion de
   soluciones de la referencia. Sigue siendo un acordeon nativo <details>: se
   abre con teclado y con el dedo, no solo con el raton. */
.panel__caja--faq{padding-bottom:0;overflow:hidden}
.tiras__pista{margin:clamp(-18px,-1.4vw,-8px) 0 clamp(26px,3vw,44px);text-align:center;
  font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-suave)}
@media (pointer:coarse){ .tiras__pista{display:none} }

/* Ancho contenido: a sangre completa las barras se leian como una tabla y el
   texto quedaba disparado a los extremos de la pantalla. */
.tiras{position:relative;isolation:isolate;
  max-width:1080px;margin:0 auto;
  /* Sin overflow oculto: las motas del fondo se salen a proposito por los lados. */
  padding-block:clamp(20px,3vw,44px)}

/* Piezas sueltas repartidas por el fondo, con esquinas muy redondeadas y giros
   distintos. Decorativas: van tras las barras y no capturan el raton. */
.motas{position:absolute;inset:-4% -12%;z-index:0;pointer-events:none}
.mota{position:absolute;display:block;
  width:var(--w,120px);aspect-ratio:4/5;
  border-radius:clamp(18px,2vw,28px);
  background-size:cover;background-position:center;
  transform:rotate(var(--rot,0deg));
  box-shadow:0 16px 34px rgba(26,26,28,.10);
  opacity:.9;
}
/* En pantalla estrecha estorban: la columna de barras ya ocupa todo el ancho. */
@media (max-width:1100px){ .motas{display:none} }
.tiras__lista{position:relative;z-index:1;display:grid;gap:2px;padding:2px}

.tira-faq{position:relative;z-index:1;
  background:color-mix(in srgb,var(--blanco) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--filete);color:var(--tinta);
  border-radius:clamp(14px,1.4vw,22px);overflow:hidden;
  transition:background-color .45s var(--curva),box-shadow .45s var(--curva)}
.tira-faq summary{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,36px);cursor:pointer;list-style:none;
  min-height:64px}
.tira-faq summary::-webkit-details-marker{display:none}
.tira-faq__num{flex:none;font:600 12px/1 var(--sans);letter-spacing:.1em;
  color:var(--rosa);align-self:flex-start;padding-top:4px}
.tira-faq__q{flex:1;font-weight:500;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(19px,2.3vw,34px)}
.tira-faq__flecha{flex:none;width:26px;height:26px;display:grid;place-items:center;
  transition:transform .45s var(--curva)}
.tira-faq__flecha svg{width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* La respuesta se despliega en altura, sin saltos: grid-template-rows de 0fr a
   1fr es la unica forma de animar "auto" sin fijar una altura a mano. */
.tira-faq__r{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--curva)}
.tira-faq__r > p{overflow:hidden;margin:0;
  padding:0 clamp(20px,2.4vw,36px);
  max-width:74ch;font-size:clamp(15px,1.35vw,17px);line-height:1.6;
  color:var(--tinta-suave);
  opacity:0;transition:opacity .4s var(--curva),padding .5s var(--curva)}

/* Abierta: por clic, por teclado o —solo en escritorio— al pasar el cursor. */
.tira-faq[open],
.tira-faq:hover,
.tira-faq:focus-within{background:var(--blanco);
  box-shadow:0 18px 38px rgba(26,26,28,.10)}
.tira-faq[open] .tira-faq__r,
.tira-faq:focus-within .tira-faq__r{grid-template-rows:1fr}
.tira-faq[open] .tira-faq__r > p,
.tira-faq:focus-within .tira-faq__r > p{opacity:1;
  padding-bottom:clamp(20px,2.2vw,30px)}
.tira-faq[open] .tira-faq__flecha,
.tira-faq:focus-within .tira-faq__flecha{transform:rotate(90deg)}

@media (pointer:fine){
  .tira-faq:hover .tira-faq__r{grid-template-rows:1fr}
  .tira-faq:hover .tira-faq__r > p{opacity:1;padding-bottom:clamp(20px,2.2vw,30px)}
  .tira-faq:hover .tira-faq__flecha{transform:rotate(90deg)}
}

/* El titulo de cada barra se alterna de lado, en pares, como la referencia. */
@media (min-width:900px){
  .tira-faq:nth-child(4n+3) summary,
  .tira-faq:nth-child(4n+4) summary{flex-direction:row-reverse;text-align:right}
  .tira-faq:nth-child(4n+3) .tira-faq__flecha,
  .tira-faq:nth-child(4n+4) .tira-faq__flecha{transform:scaleX(-1)}
  .tira-faq:nth-child(4n+3)[open] .tira-faq__flecha,
  .tira-faq:nth-child(4n+4)[open] .tira-faq__flecha{transform:scaleX(-1) rotate(-90deg)}
  .tira-faq:nth-child(4n+3) .tira-faq__r > p,
  .tira-faq:nth-child(4n+4) .tira-faq__r > p{margin-left:auto;text-align:right}
}
@media (min-width:900px) and (pointer:fine){
  .tira-faq:nth-child(4n+3):hover .tira-faq__flecha,
  .tira-faq:nth-child(4n+4):hover .tira-faq__flecha{transform:scaleX(-1) rotate(-90deg)}
}

@media (prefers-reduced-motion:reduce){
  .tira-faq,.tira-faq__r,.tira-faq__r > p,.tira-faq__flecha{transition:none}
}

/* ── Formulario ───────────────────────────────────────────
   Tres campos y ni uno mas: cada campo de mas es gente que abandona. */
.formulario{display:grid;gap:16px;max-width:760px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.campo{display:flex;flex-direction:column;gap:7px}
.campo--ancho{grid-column:1/-1}
.campo label{font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--tinta)}
.campo input,.campo textarea{
  width:100%;padding:15px 18px;border-radius:14px;
  border:1px solid var(--filete);background:var(--blanco);color:var(--tinta);
  font:400 16px/1.4 var(--sans);   /* 16px evita el zoom automatico en iOS */
  transition:border-color .2s ease,box-shadow .2s ease}
.campo textarea{resize:vertical;min-height:96px}
.campo input::placeholder,.campo textarea::placeholder{color:#a3a2a0}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--rosa);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rosa) 18%,transparent)}
.campo input:user-invalid,.campo textarea:user-invalid{border-color:var(--rosa-hondo)}

.formulario__legal{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;
  color:var(--tinta-suave)}
.formulario__pie{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;
  gap:12px;margin-top:4px}
.formulario__aviso{grid-column:1/-1;margin:0;padding:14px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--rosa) 8%,var(--blanco));
  border:1px solid color-mix(in srgb,var(--rosa) 22%,transparent);
  font-size:15px;line-height:1.5}

/* ── Cepillo viajero ──────────────────────────────────────
   Capa fija que recorre la pagina: cambia de sitio en cada seccion, siempre en
   hueco libre. Las coordenadas de cada parada las fija js/main.js. */
.viajero{
  position:fixed;z-index:5;pointer-events:none;
  left:0;top:0;
  width:clamp(200px,22vw,360px);aspect-ratio:1/1;
  opacity:0;
  transform:translate3d(var(--x,50vw),var(--y,50vh),0)
             rotate(var(--rot,0deg)) scale(var(--esc,1));
  transform-origin:center;
  /* Sin transicion en transform: la posicion la escribe el JS en cada fotograma,
     acercandose poco a poco al destino. Si ademas hubiera transicion aqui, las
     dos suavizados se sumarian y el cepillo iria con retardo. */
  transition:opacity .8s ease;
  will-change:transform;
}
.viajero.visible{opacity:1}
.viajero model-viewer{width:100%;height:100%;background:transparent;
  --poster-color:transparent}
.viajero model-viewer::part(default-progress-bar){display:none}

/* Por debajo de 1100 px no hay huecos libres que aprovechar: la columna de
   contenido ocupa todo el ancho y el cepillo taparia texto. */
@media (max-width:1100px){ .viajero{display:none} }
@media (prefers-reduced-motion:reduce){ .viajero{transition:opacity .6s ease} }