/* ==========================================================================
   Modo automático (html[data-animacion="auto"], animacion-auto.js)
   Cada sección animada mide una pantalla: la animación se reproduce sola al
   llegar y la página se recorre con scroll normal. Con data-animacion="scroll"
   nada de esto aplica y las secciones vuelven a su largo por scroll.
   ========================================================================== */

html[data-animacion="auto"] .hero.wrap,
html[data-animacion="auto"] .contact.contact-scroll,
html[data-animacion="auto"] .moving-road,
html[data-animacion="auto"] .cap--animado,
html[data-animacion="auto"] .tr53--animado,
html[data-animacion="auto"] .fv--animado,
html[data-animacion="auto"] .mud--animado { height: 100svh; }
html[data-animacion="auto"] .scroll-coverage { min-height: 100svh; }

/* ya no hay que deslizar para avanzar la animación */
html[data-animacion="auto"] .patio-scroll-hint,
html[data-animacion="auto"] #cobertura .scroll-hint,
html[data-animacion="auto"] .tr53__baja,
html[data-animacion="auto"] .moving-road-hint { display: none !important; }

/* pausa / reproducir / ver de nuevo */
.rc-auto-host { position: relative; }
.rc-auto-control {
  position: absolute; left: 16px; bottom: 16px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 8px 13px 8px 11px;
  border: 1px solid rgba(24, 26, 29, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: #181a1d;
  font: 600 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: .72; transition: opacity .25s, background .25s;
}
.rc-auto-control:hover, .rc-auto-control:focus-visible { opacity: 1; background: #fff; }
.rc-auto-control svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
@media (max-width: 760px) {
  /* abajo a la derecha, sin tapar textos ni botones */
  .rc-auto-control { left: auto; right: 12px; bottom: 12px; min-height: 34px; padding: 8px 10px; }
  /* en teléfono solo el ícono: el texto queda para lectores de pantalla */
  .rc-auto-control span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Hybrid mode: only these two 3D scenes follow a compact scroll journey. */
html[data-animacion="auto"] .cap--animado[data-animacion="scroll"],
html[data-animacion="auto"] .mud--animado[data-animacion="scroll"]{height:300svh}
@media(max-width:760px){
 [data-animacion="scroll"].cap--animado .cap__pasos li,
 [data-animacion="scroll"].mud--animado .mud__pasos li{right:35px}
}