/* =========================================================================
   Capa de movimiento. Va DESPUÉS de site.css y sólo añade: si se quita este
   fichero, la web sigue funcionando con los reveals originales.

   La idea rectora: no "más animación", sino movimiento con JERARQUÍA. Un
   titular no puede entrar igual que un párrafo ni que una tarjeta, porque
   entonces el ojo no sabe qué mira primero y todo se lee plano.
   ========================================================================= */

:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
  --d-fast:.55s;
  --d-base:.9s;
  --d-slow:1.25s;
}

/* ---------- 1. Titulares: entran por máscara, no por desplazamiento ----------
   El texto asoma desde detrás de una línea invisible. Es el gesto que
   distingue una web editorial de una plantilla: la letra no "aparece",
   se descubre. */
.h2.rv,.h2--alto.rv,h2.rv,.tira-zonas__t.rv{
  clip-path:inset(0 0 110% 0);
  transform:translateY(.22em);
  opacity:1;
  transition:clip-path var(--d-slow) var(--ease-out-expo),
             transform var(--d-slow) var(--ease-out-expo);
}
.h2.rv.in,.h2--alto.rv.in,h2.rv.in,.tira-zonas__t.rv.in{
  clip-path:inset(-30% -10% -30% -10%);
  transform:none;
}

/* ---------- 2. Eyebrow: la regla crece y el texto cierra su tracking ----------
   Dos gestos distintos a la vez en un elemento pequeño. Cuesta poco y se
   nota mucho, porque es lo primero que se lee de cada sección. */
.eyebrow.rv,.eyebrow.alive{opacity:0;transition:opacity var(--d-fast) var(--ease-out-soft)}
.eyebrow.rv.in,.eyebrow.alive.in,.eyebrow.alive.on{opacity:1}
.eyebrow::before{transform-origin:left center;transform:scaleX(0);
  transition:transform var(--d-base) var(--ease-out-expo) .1s}
.eyebrow.in::before,.eyebrow.on::before{transform:scaleX(1)}
.eyebrow > span,.eyebrow{letter-spacing:.22em}
.eyebrow.in,.eyebrow.on{letter-spacing:.12em;
  transition:opacity var(--d-fast) var(--ease-out-soft),letter-spacing var(--d-slow) var(--ease-out-expo)}

/* ---------- 3. Cuerpo de texto: gesto mínimo, y DESPUÉS del titular ----------
   24px de desplazamiento en un párrafo es mucho: se lee como salto. 10 basta
   para dar vida sin llamar la atención sobre el propio movimiento. */
.lede.rv,p.rv{transform:translateY(10px);transition:opacity var(--d-base) var(--ease-out-soft) .12s,
  transform var(--d-base) var(--ease-out-soft) .12s}
.lede.rv.in,p.rv.in{transform:none}

/* ---------- 4. (las filas de servicio son ahora tarjetas: ver bloque 12) ---------- */

/* ---------- 5. Imágenes: se descubren con escala, nunca aparecen de golpe ---------- */
figure.rv img,.gcar__card img,.calc__photo img{
  transition:transform var(--d-slow) var(--ease-out-expo),opacity var(--d-base) var(--ease-out-soft)}
figure.rv img{transform:scale(1.07)}
figure.rv.in img{transform:scale(1)}

/* ---------- 6. Tarjetas y momentos: escala además de subida ----------
   Un elemento que sube Y crece un pelo se lee como que se acerca. Es la
   diferencia entre movimiento en un plano y movimiento en profundidad. */
.clock.rv .beat,.claim.rv{opacity:0;transform:translateY(26px) scale(.975);
  transform-origin:center bottom;
  transition:opacity var(--d-base) var(--ease-out-expo),transform var(--d-base) var(--ease-out-expo)}
.clock.rv.in .beat,.claim.rv.in{opacity:1;transform:none}
.clock.rv.in .beat:nth-child(2){transition-delay:.1s}
.clock.rv.in .beat:nth-child(3){transition-delay:.2s}
.clock.rv.in .beat:nth-child(4){transition-delay:.3s}

/* ---------- 7. Costura entre secciones ----------
   El problema no es que falten animaciones: es que una sección clara choca
   contra una oscura con un corte a bisel. Un degradado de 140px hace que una
   entregue a la siguiente en vez de cortarla. */
.section--panel{position:relative}
.section--panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:linear-gradient(to bottom,var(--canvas),transparent);z-index:1;
}
.section--panel > *{position:relative;z-index:2}

/* ---------- 8. Parallax: sólo lo mueve JS, aquí sólo se declara ---------- */
[data-px]{will-change:transform}

/* ---------- 9. Zonas interactivas: el cursor dice que se puede tocar ---------- */
.gcar__stage,.ba{cursor:grab}
.gcar__stage:active,.ba:active{cursor:grabbing}

/* ---------- 10. Respeto por quien no quiere movimiento ----------
   Obligatorio, y aquí importa más que de costumbre: esta capa añade
   clip-path y escalas que pueden marear. */
@media (prefers-reduced-motion:reduce){
  .h2.rv,.h2--alto.rv,h2.rv,.tira-zonas__t.rv{clip-path:none;transform:none}
  .clock.rv .beat,.claim.rv,.lede.rv,p.rv{opacity:1;transform:none;transition-delay:0s}
  figure.rv img,figure.rv.in img{transform:none}
  .eyebrow::before{transform:scaleX(1)}
  [data-px]{transform:none !important}
}

/* =========================================================================
   11. La calculadora: que el nivel se lea como VOLUMEN
   -------------------------------------------------------------------------
   El diseño original era correcto en la idea (una marea que sube y dice
   cuánto ocupas) y fallaba en la lectura: con alpha 0.06 abajo sólo se veía
   el borde de 2px, así que el ojo leía "una raya azul cruzando la foto" en
   vez de "la caja se llena hasta aquí". Se arregla dando cuerpo al relleno y
   marcando la superficie, no la línea.
   ========================================================================= */
.calc__photo .calc__fill{
  background:
    linear-gradient(180deg,
      rgba(95,179,206,.30) 0%,
      rgba(95,179,206,.46) 38%,
      rgba(23,86,107,.62) 100%);
  border-top:1px solid rgba(180,229,244,.95);
  box-shadow:0 -1px 18px rgba(95,179,206,.38), inset 0 14px 26px -14px rgba(180,229,244,.55);
  backdrop-filter:saturate(1.25) blur(.4px);
  transition:height .7s var(--ease-out-expo);
}
/* Una cinta de medida sobre la superficie: convierte el nivel en una lectura,
   no en un adorno. El valor lo escribe el JS. */
.calc__photo .calc__fill::after{
  content:attr(data-nivel);
  position:absolute;right:10px;top:0;transform:translateY(-50%);
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  color:#0B1F27;background:rgba(180,229,244,.96);
  padding:3px 8px;border-radius:3px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(8,7,5,.4);
}
/* El pie no puede competir con la etiqueta: baja de peso y se aparta. */
.calc__photo figcaption{padding-top:38px}

@media (prefers-reduced-motion:reduce){
  .calc__photo .calc__fill{transition:none}
}

/* =========================================================================
   12. Servicios en tarjetas
   -------------------------------------------------------------------------
   Adaptado de un patrón de e-commerce (tarjetas altas con media de fondo y
   nombre grande). De ahí se toma el formato; se descartan el vídeo en
   autoplay (tres vídeos más sobre 7 MB de assets castigan justo al cliente
   que entra desde el móvil en la calle) y el texto vertical, que en inglés
   funciona con "face" y en español deja "Recogida de escombros" ilegible y
   además rompe la lectura por voz.
   ========================================================================= */
.svc-cards{
  margin-top:48px;display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.svc-card{
  position:relative;overflow:hidden;border-radius:12px;
  min-height:clamp(400px,42vw,560px);
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--rule);isolation:isolate;
  transition:transform .55s var(--ease-out-expo),border-color .45s var(--ease-out-soft);
}
.svc-card__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease-out-expo);
}
/* El velo es lo que hace legible el texto sobre foto. Sin él, cada tarjeta
   depende del brillo de su propia imagen y el conjunto se descuadra. */
.svc-card__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(12,10,8,.94) 0%,
    rgba(12,10,8,.78) 32%,
    rgba(12,10,8,.34) 62%,
    rgba(12,10,8,.14) 100%);
  transition:opacity .5s var(--ease-out-soft);
}
.svc-card__n{
  position:absolute;top:18px;left:20px;
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  color:var(--accent);
}
.svc-card__body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:9px}
.svc-card h3{
  font-size:clamp(1.2rem,.95rem + .75vw,1.6rem);line-height:1.1;letter-spacing:-.02em;
  transition:transform .5s var(--ease-out-expo);
}
.svc-card p{
  color:#CFC5B4;font-size:.9rem;line-height:1.5;margin:0;
}
.svc-card__cta{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:4px;
  font-family:var(--body);font-weight:600;font-size:.86rem;text-decoration:none;
  color:var(--text-primary);
  padding:9px 15px;border-radius:999px;border:1px solid var(--rule-strong);
  background:rgba(12,10,8,.42);backdrop-filter:blur(2px);
  transition:background .3s var(--ease-out-soft),color .3s var(--ease-out-soft),
             border-color .3s var(--ease-out-soft),transform .35s var(--ease-out-expo);
}
.svc-card__cta svg{transition:transform .35s var(--ease-out-expo)}

/* Hover: responde la tarjeta entera, como ya hacían las filas que sustituye. */
.svc-card:hover{transform:translateY(-6px);border-color:var(--accent-muted)}
.svc-card:hover .svc-card__bg{transform:scale(1.07)}
.svc-card:hover .svc-card__veil{opacity:.88}
.svc-card:hover h3{transform:translateY(-2px)}
.svc-card__cta:hover{background:var(--accent);color:#0B0906;border-color:var(--accent)}
.svc-card__cta:hover svg{transform:translateX(3px)}
.svc-card__cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Entrada escalonada, en la misma familia de gestos que el resto de la página. */
.svc-cards.rv .svc-card{
  opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);
}
.svc-cards.rv.in .svc-card{opacity:1;transform:none}
.svc-cards.rv.in .svc-card:nth-child(2){transition-delay:.1s}
.svc-cards.rv.in .svc-card:nth-child(3){transition-delay:.2s}
.svc-cards.rv.in .svc-card:nth-child(4){transition-delay:.3s}

@media (max-width:1000px){
  .svc-cards{grid-template-columns:repeat(2,1fr)}
  .svc-card{min-height:clamp(340px,52vw,460px)}
}
@media (max-width:560px){
  .svc-cards{grid-template-columns:1fr;gap:12px}
  .svc-card{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .svc-cards.rv .svc-card,.svc-cards.rv.in .svc-card{opacity:1;transform:none;transition-delay:0s}
  .svc-card:hover,.svc-card:hover .svc-card__bg,.svc-card:hover h3{transform:none}
}

/* =========================================================================
   13. El cierre, en clave de cine
   -------------------------------------------------------------------------
   Adaptado de un patrón de CTA con vídeo HLS de fondo. Se toma lo que vale
   -- fondo a sangre, fundidos a negro arriba y abajo, y un botón de cristal --
   y se descartan tres cosas: el stream de Mux (es de otro proyecto y exigiría
   cargar hls.js en una web que no tiene build), las dos tipografías nuevas
   (esta web ya tiene su pareja y sumar dos familias es peso y ruido de marca)
   y el negro puro #000, que rompería el marrón cálido del lienzo.

   El fondo reutiliza hero-ending.jpg, que el navegador ya tiene descargada
   del hero: cuesta cero bytes y además cierra el arco -- la web abre con la
   casa llena y termina con la misma habitación vacía y con luz.
   ========================================================================= */
.section--cierre{position:relative;overflow:hidden;isolation:isolate}

.cierre__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-3;opacity:.28;
  animation:cierre-deriva 38s var(--ease-out-soft) infinite alternate;
}
/* Un plano fijo se lee como fondo de plantilla; una deriva lentísima lo
   convierte en un plano de película. 38s es deliberado: si se percibe el
   movimiento, va demasiado rápido. */
@keyframes cierre-deriva{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.4%,-1.8%,0)}
}

/* Los fundidos son lo que hace que la imagen no tenga bordes: entra desde el
   lienzo y se va al lienzo, en vez de aparecer recortada en un rectángulo. */
.cierre__fade{position:absolute;left:0;right:0;height:220px;z-index:-2;pointer-events:none}
.cierre__fade--top{top:0;background:linear-gradient(to bottom,var(--canvas) 0%,rgba(20,16,12,.55) 45%,transparent 100%)}
.cierre__fade--bot{bottom:0;background:linear-gradient(to top,var(--canvas) 0%,rgba(20,16,12,.6) 45%,transparent 100%)}

/* La costura genérica de .section--panel sobra aquí: este cierre trae la suya. */
.section--cierre::before{display:none}

/* ---------- El botón de cristal ----------
   El truco del borde es el del patrón original: un ::before con padding de
   1.4px y mask-composite, que deja ver el degradado sólo en el marco. Se
   mantiene el efecto y se cambia el color: blanco puro sobre lienzo cálido
   se ve azulado y sucio, así que el brillo va tintado con el crema del texto. */
.btn--glass{
  position:relative;overflow:hidden;border:none;
  background:rgba(242,236,224,.045);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  color:var(--text-primary);
  box-shadow:0 4px 18px rgba(8,7,5,.35),inset 0 1px 1px rgba(242,236,224,.16);
}
.btn--glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(242,236,224,.55) 0%,
    rgba(242,236,224,.22) 20%,
    rgba(242,236,224,0) 40%,
    rgba(242,236,224,0) 60%,
    rgba(242,236,224,.22) 80%,
    rgba(242,236,224,.55) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.btn--glass:hover{background:rgba(242,236,224,.1)}

/* Sin backdrop-filter el botón quedaría casi invisible sobre la foto: ahí se
   cambia por un fondo sólido en vez de dejarlo al azar del navegador. */
@supports not (backdrop-filter:blur(2px)){
  .btn--glass{background:rgba(36,28,19,.88)}
}

@media (prefers-reduced-motion:reduce){
  .cierre__bg{animation:none;transform:scale(1.06)}
}

/* =========================================================================
   16. "Por qué nos llaman" en acordeón
   -------------------------------------------------------------------------
   Se ve la promesa; el detalle se abre al tocarla. Además de dar interacción,
   recorta a un tercio una sección que ocupaba pantalla y media para decir
   cuatro cosas.

   Va con <details>/<summary> nativos en vez de divs con JS: el navegador ya
   trae el manejo por teclado, el estado expandido para lectores de pantalla y
   la búsqueda dentro de la página. El atributo name="porque" los agrupa, así
   que abrir uno cierra el anterior sin una línea de script.
   ========================================================================= */
.claims--acordeon{margin-top:38px;display:flex;flex-direction:column}

.claims--acordeon .claim{
  border-top:1px solid var(--rule);
  padding:0;
}
.claims--acordeon .claim:last-child{border-bottom:1px solid var(--rule)}

.claims--acordeon summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:16px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
  transition:padding-left .45s var(--ease-out-expo);
}
/* El triángulo por defecto de Safari y Chrome hay que quitarlo en dos sitios. */
.claims--acordeon summary::-webkit-details-marker{display:none}
.claims--acordeon summary::marker{content:""}

.claims--acordeon summary:hover{padding-left:10px}
.claims--acordeon summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.claims--acordeon .claim__mark{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,1.2rem + .9vw,2rem);line-height:.8;
  color:var(--accent);opacity:.55;
  transition:opacity .4s var(--ease-out-soft),transform .5s var(--ease-out-expo);
}
.claims--acordeon .claim q{
  display:block;quotes:none;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,.95rem + .7vw,1.55rem);
  line-height:1.24;letter-spacing:-.018em;
  color:var(--text-primary);
  transition:color .35s var(--ease-out-soft);
}

/* El signo es lo que dice "esto se abre". Sin él, nadie toca. */
.claims--acordeon .claim__sig{
  position:relative;width:20px;height:20px;flex:none;margin-top:5px;
  transition:transform .5s var(--ease-out-expo);
}
.claims--acordeon .claim__sig::before,
.claims--acordeon .claim__sig::after{
  content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.5px;background:var(--accent);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--ease-out-expo),opacity .4s var(--ease-out-soft);
}
.claims--acordeon .claim__sig::after{transform:translate(-50%,-50%) rotate(90deg)}

.claims--acordeon .claim[open] .claim__sig{transform:rotate(180deg)}
.claims--acordeon .claim[open] .claim__sig::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg)}
.claims--acordeon .claim[open] .claim__mark{opacity:1;transform:translateY(-2px)}

/* El cuerpo entra con un gesto propio. <details> no interpola su altura, así
   que se anima lo que sí se puede animar de forma fiable en todos los
   navegadores: la opacidad y el desplazamiento del contenido. */
.claims--acordeon .claim__cuerpo{
  padding:0 4px 26px 0;
  margin-left:calc(clamp(1.5rem,1.2rem + .9vw,2rem) + 16px);
  animation:claim-abre .55s var(--ease-out-expo) both;
}
.claims--acordeon .claim__cuerpo p{
  color:var(--text-secondary);font-size:.98rem;line-height:1.6;max-width:56ch;margin:0;
}
@keyframes claim-abre{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:none}
}

@media (max-width:560px){
  .claims--acordeon summary{gap:12px;padding:18px 2px}
  .claims--acordeon .claim__cuerpo{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .claims--acordeon .claim__cuerpo{animation:none}
  .claims--acordeon summary:hover{padding-left:4px}
  .claims--acordeon .claim__sig,.claims--acordeon .claim[open] .claim__sig{transition:none}
}

/* =========================================================================
   17. Reseñas: carrusel horizontal continuo
   -------------------------------------------------------------------------
   Adaptado de un componente React con Tailwind. Se toma el mecanismo -- una
   cinta que avanza sola, con las tarjetas naciendo y muriendo en un degradado
   y pausa al pasar el ratón -- y se cambian tres cosas:

   - El original repite el juego de tarjetas CUATRO veces y desplaza -100%.
     Aquí van DOS juegos y se desplaza -50%: es lo que hace que al reiniciar
     la cinta esté exactamente donde empezó. Con -100% el track termina fuera
     de pantalla y al saltar se ve el hueco.
   - 40s para todo el recorrido era demasiado rápido para leer una reseña.
     Aquí el ritmo lo marca el ancho real: 112s para las siete tarjetas,
     que es la misma velocidad de lectura que tenía con cuatro.
   - Nada de retratos: iniciales. Las fotos de banco de imágenes son la señal
     que delata a una web con reseñas inventadas.
   ========================================================================= */
.marq{
  --gap:18px;
  position:relative;
  overflow:hidden;
  margin-top:38px;
  padding:6px 0;
  /* Los degradados laterales van en máscara y no en un div encima, así el
     fondo de la sección se ve a través sin tener que igualar su color. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.marq__track{
  display:flex;
  gap:var(--gap);
  /* El padding derecho DEBE valer lo mismo que el gap: con 8 tarjetas hay 7
     huecos, así que sin él la mitad del recorrido no cae donde empieza el
     juego duplicado y el bucle da un tirón en cada vuelta. */
  padding-right:var(--gap);
  width:max-content;
  animation:marq-corre 112s linear infinite;
  will-change:transform;
}
@keyframes marq-corre{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
.marq:hover .marq__track,
.marq:focus-within .marq__track{animation-play-state:paused}

.tcard{
  flex:0 0 auto;
  width:min(330px,80vw);
  background:linear-gradient(180deg,var(--panel-2),rgba(38,32,25,.35));
  border:1px solid var(--rule);
  border-top:1px solid rgba(242,236,224,.22);
  border-radius:14px;
  padding:22px 22px 24px;
  box-shadow:0 10px 28px rgba(8,7,5,.26);
  transition:border-color .4s var(--ease-out-soft),transform .5s var(--ease-out-expo);
}
.tcard:hover{border-color:var(--rule-strong);transform:translateY(-3px)}

.tcard__quien{display:flex;align-items:center;gap:11px}
.tcard__ini{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-muted);color:var(--accent);
  font-family:var(--display);font-weight:800;font-size:1rem;
}
.tcard__datos b{display:block;font-size:.92rem;font-weight:600;line-height:1.25}
.tcard__datos small{
  color:var(--text-secondary);font-family:var(--mono);
  font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
}
.tcard__txt{
  margin-top:15px;color:var(--text-secondary);
  font-size:.94rem;line-height:1.58;
}

/* La llamada a dejar reseña, separada de la cinta. */
.resenas__cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--rule);
}
.resenas__cta p{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
}

/* Una cinta que se mueve sola es de los peores casos para quien tiene
   sensibilidad al movimiento: aquí se convierte en una lista con scroll. */
@media (prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .marq__track{animation:none;padding-right:0}
  .tcard{scroll-snap-align:start}
  /* el segundo juego sobra si no hay bucle */
  .marq__track .tcard[aria-hidden="true"]{display:none}
}

/* =========================================================================
   18. La furgoneta se llena de verdad
   -------------------------------------------------------------------------
   Antes el volumen se representaba con una marea de color que subía por la
   foto. Funcionaba como indicador, pero no significaba nada: era una raya
   azul sobre una furgoneta quieta.

   Ahora hay cinco fotos de la MISMA furgoneta, mismo encuadre y misma luz,
   con la caja cada vez más cargada. El deslizador cambia de una a otra con un
   fundido, así que al mover la barra la furgoneta se llena. Es la misma
   información, pero entendida de un vistazo y sin leer una cifra.

   Cinco imágenes apiladas cuestan 644 KB; a cambio se quita el .calc__fill y
   la foto suelta que había antes.
   ========================================================================= */
.calc__photo--serie{position:relative;overflow:hidden}

.calc__van{
  grid-area:1/1;
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease-out-soft);
  /* Sin esto, al cambiar de capa se ve un parpadeo en algunos navegadores
     porque recomponen la imagen de cero. */
  backface-visibility:hidden;
}
.calc__van.is-on{opacity:1}

/* La primera capa va en flujo y no absoluta: es la que da altura a la figura.
   Si todas fuesen absolutas, el <figure> mediría cero. */
.calc__van[data-nivel="0"]{position:relative}

/* El pie tiene que quedar por encima de las cinco capas. */
.calc__photo--serie figcaption{z-index:3}

@media (prefers-reduced-motion:reduce){
  .calc__van{transition:none}
}

/* =========================================================================
   19. Preguntas frecuentes en tarjetas
   -------------------------------------------------------------------------
   Adaptado de un componente React monocromo. Se toman cuatro cosas: la
   tarjeta que se eleva, el icono circular cuyo + gira hasta convertirse en
   una ×, la etiqueta de categoría y -- lo mejor del original -- el resplandor
   que sigue al cursor dentro de la tarjeta.

   Se descartan dos: el interruptor día/noche, porque esta web es
   deliberadamente oscura y cálida y un tema claro sería rediseñarla entera;
   y la píldora "Signal FAQ" con su haz giratorio, su pulso y su medidor: son
   tres animaciones a la vez en un adorno que no dice nada.

   Igual que en "Por qué nos llaman", el mecanismo son <details> nativos con
   name="faq": teclado, estado para lectores y buscador del navegador vienen
   de serie, y abrir uno cierra el anterior sin JavaScript.
   ========================================================================= */
.faq--tarjetas{display:flex;flex-direction:column;gap:12px;margin-top:36px}

.faq--tarjetas .qa{
  position:relative;
  border:1px solid var(--rule);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(38,32,25,.55),rgba(38,32,25,.2));
  overflow:hidden;
  transition:transform .45s var(--ease-out-expo),
             border-color .45s var(--ease-out-soft),
             box-shadow .45s var(--ease-out-expo);
}
.faq--tarjetas .qa:hover,
.faq--tarjetas .qa:focus-within{
  transform:translateY(-2px);
  border-color:var(--rule-strong);
  box-shadow:0 18px 44px -22px rgba(8,7,5,.9);
}
.faq--tarjetas .qa[open]{border-color:rgba(95,179,206,.34)}

/* El resplandor sigue al cursor: las coordenadas las escribe motion.js en
   --faq-x / --faq-y. Sin JS se queda centrado, que también es válido. */
.faq--tarjetas .qa::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(260px circle at var(--faq-x,50%) var(--faq-y,50%),
             rgba(95,179,206,.13), transparent 68%);
  opacity:0;transition:opacity .5s var(--ease-out-soft);
}
.faq--tarjetas .qa:hover::before,
.faq--tarjetas .qa[open]::before{opacity:1}

.faq--tarjetas summary{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  cursor:pointer;
  list-style:none;
}
.faq--tarjetas summary::-webkit-details-marker{display:none}
.faq--tarjetas summary::marker{content:""}
.faq--tarjetas summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:16px}

/* El icono: un + que gira 45 grados y se lee como una ×. Un solo gesto que
   dice "esto se abre" y "esto se cierra" sin cambiar de símbolo. */
.faq--tarjetas .qa__sig{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--rule-strong);
  background:var(--accent-muted);
  transition:transform .55s var(--ease-out-expo),background .4s var(--ease-out-soft),border-color .4s var(--ease-out-soft);
}
.faq--tarjetas .qa__sig svg{width:19px;height:19px;color:var(--accent);transition:transform .55s var(--ease-out-expo)}
.faq--tarjetas .qa:hover .qa__sig{transform:scale(1.06)}
.faq--tarjetas .qa[open] .qa__sig{background:rgba(95,179,206,.2);border-color:var(--accent)}
.faq--tarjetas .qa[open] .qa__sig svg{transform:rotate(45deg)}

.faq--tarjetas .qa__q{
  font-size:clamp(1rem,.92rem + .35vw,1.16rem);
  line-height:1.3;font-weight:600;letter-spacing:-.012em;
  color:var(--text-primary);margin:0;
}

.faq--tarjetas .qa__meta{
  flex:none;
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  border:1px solid var(--rule);border-radius:999px;
  padding:5px 11px;white-space:nowrap;
  transition:color .4s var(--ease-out-soft),border-color .4s var(--ease-out-soft);
}
.faq--tarjetas .qa[open] .qa__meta{color:var(--accent);border-color:rgba(95,179,206,.34)}

.faq--tarjetas .qa__cuerpo{
  position:relative;z-index:1;
  padding:0 22px 22px calc(42px + 18px + 22px);
  animation:qa-abre .5s var(--ease-out-expo) both;
}
.faq--tarjetas .qa__a{
  color:var(--text-secondary);font-size:.97rem;line-height:1.62;max-width:62ch;margin:0;
}
@keyframes qa-abre{
  from{opacity:0;transform:translateY(-7px)}
  to  {opacity:1;transform:none}
}

@media (max-width:620px){
  .faq--tarjetas summary{grid-template-columns:auto 1fr;gap:13px;padding:16px 16px}
  /* La etiqueta pasa debajo del icono en vez de apretar el titular. */
  .faq--tarjetas .qa__meta{grid-column:2;justify-self:start;margin-top:2px}
  .faq--tarjetas .qa__cuerpo{padding:0 16px 18px calc(42px + 13px + 16px)}
}
@media (max-width:420px){
  .faq--tarjetas .qa__cuerpo{padding-left:16px}
}

@media (prefers-reduced-motion:reduce){
  .faq--tarjetas .qa,.faq--tarjetas .qa__sig,.faq--tarjetas .qa__sig svg{transition:none}
  .faq--tarjetas .qa:hover{transform:none}
  .faq--tarjetas .qa__cuerpo{animation:none}
  .faq--tarjetas .qa::before{display:none}
}


/* =========================================================================
   20. "Por qué nos llaman" a dos columnas
   -------------------------------------------------------------------------
   Estructura tomada de una sección de FAQ con imagen: foto grande a la
   izquierda, y a la derecha antetítulo, titular, entradilla y la lista de
   preguntas separadas por líneas.

   Encaja aquí mejor que el fondo animado que había antes por un motivo
   práctico: la sección se veía vacía por la derecha, y una imagen llena ese
   hueco con algo que además significa. La foto es el argumento -- unas manos
   envolviendo un marco de fotos -- de lo que dice el último punto.

   La imagen va a la IZQUIERDA en pantalla pero DESPUÉS en el orden de
   lectura para quien usa lector: primero el titular, luego la ilustración.
   ========================================================================= */
.section--porque .porque__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem);
  align-items:center;
  margin-top:10px;
}

.porque__foto{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 26px 60px -30px rgba(8,7,5,.9);
  aspect-ratio:1/1;
}
.porque__foto img{width:100%;height:100%;object-fit:cover;display:block}

.porque__texto{min-width:0}
.porque__texto .lede{margin-bottom:6px}

/* El acordeón pierde la línea superior: dentro de la columna ya hay
   suficiente separación y una regla más ensuciaría el arranque. */
.section--porque .claims--acordeon{margin-top:26px}
.section--porque .claims--acordeon .claim:first-child{border-top:none}

/* Con la mitad del ancho, el titular a --s4 se rompía en cuatro líneas. */
.section--porque .h2{max-width:16ch}

@media (max-width:900px){
  .section--porque .porque__grid{
    grid-template-columns:1fr;
    gap:clamp(1.6rem,1rem + 3vw,2.6rem);
  }
  /* En una sola columna la foto abre la sección y el texto va debajo: es el
     orden natural del DOM, sin display:contents ni reordenados frágiles.
     Y se recorta a apaisada para no comerse una pantalla entera de móvil. */
  .porque__foto{aspect-ratio:16/10;max-height:320px}
}