/* ---------------------------------------------------------------
   Reset básico
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   Paleta e identidad visual
--------------------------------------------------------------- */
:root {
  --color-bg: #f2f1f1;
  --color-bg-alt: #e8e7e6;
  --color-text: #2b2723;
  --color-text-soft: #6b6259;
  --color-accent: #b5473f;
  --color-accent-dark: #8f372f;
  --color-sage: #6f7d5f;
  --color-border: rgba(43, 39, 35, 0.12);
  --color-surface: #ffffff;

  --font-titulares: "Syne", "Gotu", Georgia, serif;
  --font-cuerpo: "Space Grotesk", "Inter", "Segoe UI", sans-serif;

  --ancho-maximo: 1120px;
}

html {
  scroll-behavior: auto; /* salto instantáneo entre secciones, no animado */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-cuerpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-titulares);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}

h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease;
}

.site-header.is-scrolled {
  background: rgba(250, 246, 241, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--color-border);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 3.4rem;
  color: var(--color-accent);
  text-decoration: none;
  line-height: 1;
}

/* Junto al icono no se ve nada en reposo; "ENRÁMALO" se revela al pasar
   el ratón con el mismo tipo de expansión (ancho + fade encadenados,
   misma curva y duración) que antes cruzaba las iniciales a la palabra
   completa. .bt-reveal reserva el sitio real en el flujo (con `width`,
   no position:absolute) para que su crecimiento empuje de verdad al
   resto de la cabecera. */
.brand-texto {
  display: inline-flex;
  align-items: baseline;
  font-family: "Elsie", var(--font-titulares);
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--color-text);
}

.bt-reveal {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: baseline;
  transition: width 3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-mark:hover .bt-reveal,
.brand-mark:focus-visible .bt-reveal {
  width: 9.8ch;
}

.bt-palabra {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  -webkit-text-stroke: 0.6px currentColor;
  transition: opacity 3s ease;
}

.brand-mark:hover .bt-palabra,
.brand-mark:focus-visible .bt-palabra {
  opacity: 1;
}

.header-nav ul {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}

.header-nav a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
  display: none;
}

.site-header.is-scrolled .header-nav a {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--color-accent);
}

.header-nav-login {
  font-weight: 600;
}

/* Menú de tres puntos — solo en móvil (ver @media más abajo). En
   escritorio se queda todo oculto: ahí la navegación es la lista de
   .header-nav de arriba. */
.header-menu-movil {
  display: none;
  position: relative;
}

.header-menu-boton {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 150px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.header-menu-boton:hover,
.header-menu-boton:focus-visible {
  background: var(--color-border);
}

.site-header.is-scrolled .header-menu-boton {
  opacity: 1;
  transform: translateY(0);
}

.header-menu-texto {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.header-menu-icono {
  transition: transform 0.25s ease;
}

/* Se voltea hacia arriba mientras el menú está abierto. */
.header-menu-boton[aria-expanded="true"] .header-menu-icono {
  transform: rotate(180deg);
}

/* Pantalla completa por encima de todo lo demás — no un desplegable
   pequeño pegado al botón. Grisácea y translúcida (con desenfoque de lo
   que hay detrás) en vez de un fondo sólido, para que se note que flota
   por encima de la página. z-index por encima del propio .site-header
   (50) para que tape también la cabecera. */
.header-menu-desplegable {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(245, 244, 241, 0.68);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-menu-desplegable[hidden] {
  display: none;
}

.header-menu-cerrar {
  position: absolute;
  top: 1.1rem;
  right: clamp(1.25rem, 4vw, 3rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 50%;
}

.header-menu-cerrar:hover,
.header-menu-cerrar:focus-visible {
  background: var(--color-border);
}

.header-menu-desplegable ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

/* Misma tipografía que el título grande de la portada ("Tu ramo, a tu
   manera", .hero-title) para que el menú se sienta parte de la misma
   identidad. */
.header-menu-desplegable a {
  font-family: var(--font-titulares);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
  text-decoration: none;
  color: var(--color-accent);
}

.header-menu-desplegable a:hover,
.header-menu-desplegable a:focus-visible {
  color: var(--color-accent-dark);
}

.header-login-movil {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--color-accent);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.header-login-movil:hover,
.header-login-movil:focus-visible {
  background: var(--color-accent-dark);
}

.site-header.is-scrolled .header-login-movil {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .header-nav { display: none; }

  /* Pensado para el ratón (hover) y ya iba justo de sitio la cabecera en
     móvil junto al botón de menú y el de inicia sesión — se queda solo
     el icono. */
  .brand-texto {
    display: none;
  }

  .header-menu-movil {
    display: block;
  }

  .header-menu-boton {
    display: flex;
  }

  .header-login-movil {
    display: inline-block;
  }
}

/* ---------------------------------------------------------------
   Recorrido cinematográfico — scroll-track + escena fija
--------------------------------------------------------------- */
.scroll-track {
  position: relative;
  height: 850vh; /* 5 actos x 170vh de recorrido cada uno (150vh de movimiento/lectura + 20vh de reposo al principio, ver MOV/REPOSO en script.js) */
}

.scene {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.home-view,
.section-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
}

.home-view {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: 6rem 1.5rem 3rem;
  opacity: 1; /* estado inicial: vista de inicio visible */
}

.section-view {
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  pointer-events: none;
}

.section-view-grid {
  display: grid;
  grid-template-columns: minmax(180px, 32%) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  width: 100%;
}

.section-view-grid--invertida {
  grid-template-columns: 1fr minmax(180px, 32%);
}

.section-view-grid--invertida .elemento-slot { order: 2; }
.section-view-grid--invertida .apartado-inner { order: 1; }

.elemento-slot {
  display: block;
  height: clamp(200px, 26vw, 340px);
  width: 100%;
}

/* Los 5 elementos "reales" que se ven en todo momento: viven fuera del
   flujo normal (fixed) y js/script.js les da su posición/escala cada
   fotograma según el progreso de scroll. Las fotos dentro de .elementos
   (fila de inicio) quedan invisibles — solo aportan su hueco en el
   layout para poder medir dónde "descansa" cada elemento. */
.elementos-flotantes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* por detrás del texto (.home-view / .section-view, z-index: 2): así,
     si durante la transición el elemento pasa por encima de un bloque de
     texto, es el texto el que queda visible, nunca al revés */
  z-index: 1;
}

.elemento-flotante {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: auto;
  aspect-ratio: var(--w, 400) / var(--h, 1100);
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

/* Nombre + frase del elemento: solo se ve en los momentos en los que
   el elemento está solo en pantalla (grande, sin fila inicial ni
   apartado alrededor) — le da protagonismo propio a cada elemento,
   como un paso dentro del símil de montar un ramo. Va pegada al propio
   elemento (a un lado, según acto.etiquetaLado) en vez de en un punto
   fijo de la pantalla: script.js recalcula su posición cada fotograma
   igual que hace con las marcas de análisis. */
.etiqueta-elemento {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.etiqueta-elemento-nombre {
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.etiqueta-elemento-frase {
  margin-top: 0.4rem;
  font-family: "Epilogue", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text-soft);
}

.etiqueta-elemento-frase::before { content: "“"; }
.etiqueta-elemento-frase::after { content: "”"; }

/* Animación de entrada: se relanza (ver script.js) cada vez que el
   texto pasa de invisible a visible, para que cada elemento se sienta
   como una pequeña presentación propia, no solo un fundido. */
@keyframes etiqueta-elemento-aparece {
  from {
    opacity: 0;
    transform: translateY(10px);
    letter-spacing: 0.2em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: normal;
  }
}

.etiqueta-elemento.anima .etiqueta-elemento-nombre,
.etiqueta-elemento.anima .etiqueta-elemento-frase {
  animation: etiqueta-elemento-aparece 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.etiqueta-elemento.anima .etiqueta-elemento-frase {
  animation-delay: 0.08s;
}

/* ---------------------------------------------------------------
   Análisis de material: mientras el elemento está solo en pantalla
   (mismo momento que .etiqueta-elemento, ver script.js), unas marcas
   van señalando puntos concretos del propio elemento con una lectura
   breve de material/acabado — un guiño a un análisis técnico, con
   Courier Prime para que se lea como un dato, no como texto normal.
   La posición (línea, punto, etiqueta) la recalcula script.js cada
   fotograma para seguir el zoom; aquí solo se define el aspecto y la
   animación de aparición.
--------------------------------------------------------------- */
.analisis-lineas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}

.analisis-marca {
  opacity: 0;
}

.analisis-marca line {
  stroke: var(--color-accent);
  stroke-width: 1;
  opacity: 0.55;
}

.analisis-marca .analisis-punto-nucleo {
  fill: var(--color-accent);
}

.analisis-etiquetas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.analisis-punto-texto {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  font-family: "Courier Prime", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  white-space: nowrap;
  opacity: 0;
}

/* Aparición "de escáner": desenfoque que se resuelve de golpe, como si el
   análisis acabara de detectar ese punto. Solo anima opacidad/filtro —
   nunca transform, que ya lo pone script.js cada fotograma para que la
   marca siga al elemento activo mientras crece o encoge. */
@keyframes analisis-punto-aparece {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

.analisis-marca.anima,
.analisis-punto-texto.anima {
  animation: analisis-punto-aparece 0.5s ease-out both;
}

.analisis-marca[data-punto="1"].anima,
.analisis-punto-texto[data-punto="1"].anima {
  animation-delay: 0.22s;
}

.analisis-marca[data-punto="2"].anima,
.analisis-punto-texto[data-punto="2"].anima {
  animation-delay: 0.44s;
}

.hero-title {
  font-family: "Young Serif", serif;
  font-size: clamp(2.5rem, 1.8rem + 4vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: 1.5rem;
}

.hero-hint {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* Fila de elementos — es la navegación principal */
.elementos ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* centrado: al compartir todas la misma altura de bloque (foto +
     etiqueta), centrar alinea también el centro visual de cada foto */
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1700px;
}

.elementos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.5rem;
  border-radius: 12px;
}

.elementos a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Las fotos ya vienen de pie (recortadas de una única foto de conjunto),
   así que no hace falta rotar nada. Se fija la ALTURA (no el ancho) para
   que las 5 compartan una misma franja horizontal, y cada una ocupe solo
   el ancho que le corresponde según --w/--h (proporción real del recorte,
   en línea en el HTML) — así el jarrón (ancho) y la cuerdecilla
   (finísima) conviven bien en la misma fila. */
.elementos .foto {
  height: clamp(220px, 30vw, 420px);
  width: auto;
  aspect-ratio: var(--w, 400) / var(--h, 1100);
  display: block;
}

.elementos .foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* la imagen visible es el .elemento-flotante correspondiente; esta
     copia solo reserva el hueco de layout para poder medirlo */
  visibility: hidden;
}

.elementos .etiqueta {
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.elementos .etiqueta::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.elementos a:hover .etiqueta,
.elementos a:focus-visible .etiqueta {
  opacity: 1;
  /* Sube al aparecer, para quedar más cerca del elemento (que a su vez se
     desliza hacia arriba) y leerse mejor. */
  transform: translateY(-38px);
}

.elementos a:hover .etiqueta::after,
.elementos a:focus-visible .etiqueta::after {
  opacity: 1;
  transform: translateX(0);
}

/* En pantallas táctiles no existe :hover — mostramos la etiqueta siempre.
   En móvil (max-width: 720px, más abajo en este archivo) esto se anula:
   ahí solo aparece al pulsar, para dar más protagonismo a los iconos. */
@media (hover: none) {
  .elementos .etiqueta {
    opacity: 1;
    transform: none;
  }

  .elementos .etiqueta::after {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Contenido de cada apartado (dentro de .section-view)
--------------------------------------------------------------- */
.apartado-inner {
  max-width: 640px;
  min-width: 0;
}

.apartado-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 0.75rem;
}

.apartado-inner h2 {
  margin-bottom: 1.25rem;
  max-width: 20ch;
}

.apartado-lead {
  max-width: 60ch;
  color: var(--color-text-soft);
  font-size: 1.05rem;
}

.apartado-destacado {
  margin-top: 1.5rem;
  font-size: 1.2rem;
}

.lista-check {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 55ch;
}

.lista-check li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-text-soft);
}

.lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-sage);
  font-weight: 600;
}

/* Buscador de zona (apartado "Dónde trabajamos"): no es un directorio de
   floristerías (identidad.md §9 lo descarta explícitamente) — solo
   comprueba si un municipio/provincia ya tiene cobertura, a modo de
   "¿está mi zona disponible?". Pensado para crecer sin cambiar de forma
   a medida que se sumen municipios (ver ZONAS en script.js). */
.buscador-zona {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.buscador-zona-campo {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 360px;
}

.buscador-zona-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.buscador-zona-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.buscador-zona-input:hover {
  border-color: var(--color-text-soft);
}

.buscador-zona-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 71, 63, 0.15);
}

.buscador-zona-resultado {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  min-height: 2.4em;
  color: var(--color-text-soft);
}

.buscador-zona-resultado a {
  color: var(--color-accent);
  text-decoration: underline;
}

.mapa-zona {
  flex: 1 1 100px;
  min-width: 0;
  max-width: 170px;
  height: auto;
  overflow: visible;
}

.mapa-zona-silueta {
  fill: var(--color-bg-alt);
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.mapa-zona-punto .mapa-zona-nucleo {
  fill: var(--color-text-soft);
}

.mapa-zona-punto .mapa-zona-etiqueta {
  font-family: var(--font-cuerpo);
  font-size: 11px;
  fill: var(--color-text-soft);
}

.mapa-zona-punto--activo .mapa-zona-nucleo {
  fill: var(--color-accent);
}

.mapa-zona-punto--activo .mapa-zona-etiqueta {
  fill: var(--color-accent-dark);
  font-weight: 600;
}

.mapa-zona-halo {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0.35;
}

.mapa-zona-punto--resultado .mapa-zona-nucleo {
  fill: var(--color-accent);
}

.mapa-zona-punto--resultado .mapa-zona-etiqueta {
  fill: var(--color-accent-dark);
  font-weight: 600;
}

/* Pasos (Cómo funciona) */
.pasos {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.pasos li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pasos-numero {
  font-family: var(--font-titulares);
  font-size: 1.75rem;
  color: var(--color-accent);
}

.pasos p {
  color: var(--color-text-soft);
}

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

/* Variantes compactas: el contenido de .section-view vive dentro de una
   pantalla fija (100svh), así que necesita menos aire que el resto */
.pasos--compacto {
  margin-top: 1.5rem;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.formulario--compacto {
  margin-top: 1.25rem;
  gap: 0.85rem;
}

/* ---------------------------------------------------------------
   Recorrido cinematográfico en móvil — cada apartado sigue viviendo
   dentro de una pantalla fija (100svh, overflow:hidden, ver arriba):
   en pantallas estrechas la rejilla a 2 columnas dejaba la columna de
   texto tan estrecha que el contenido (y el botón) superaba esa altura
   fija y quedaba cortado, inalcanzable — el scroll de la página no
   mueve ese contenido, solo hace avanzar la animación. Se apila a 1
   columna y se compacta todo para que quepa entero.
--------------------------------------------------------------- */
@media (max-width: 720px) {
  .home-view {
    padding: 3.25rem 1.25rem 2rem;
    gap: 1.25rem;
  }

  /* El título grande, más arriba (menos aire encima) para dejar más hueco
     a la lista de elementos debajo. */
  .hero-title {
    margin-top: 0;
  }

  /* Sin el "sigue bajando ↓": en el hueco compacto del móvil da más
     protagonismo a los 5 elementos, que ya insinúan de sobra que hay más
     al ocupar toda la pantalla. */
  .hero-hint {
    display: none;
  }

  /* En móvil los 5 elementos van siempre tumbados (ver posicionarRotado en
     script.js), así que ya no comparten franja por ALTURA (como en
     escritorio) sino que cada uno reserva un hueco ANCHO y bajo — la fila
     pasa a ser una lista vertical (ver .elementos ul/a más abajo). */
  .elementos ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .elementos .foto {
    height: clamp(52px, 15vw, 80px);
    width: min(220px, 58vw);
    aspect-ratio: auto;
  }

  .elementos .etiqueta {
    font-size: 0.85rem;
    white-space: normal;
    text-align: center;
    max-width: min(220px, 58vw);
    /* Antes @media (hover:none), más abajo en este archivo, lo dejaba
       siempre visible al no haber :hover en táctil — aquí se anula: con
       más protagonismo para los iconos, el nombre solo aparece al
       seleccionar el elemento con un primer toque (clase .seleccionado,
       ver script.js) — un segundo toque sobre el mismo navega — o al
       enfocarlo con teclado (ya cubierto por la regla :focus-visible de
       más arriba, que sigue aplicando igual). */
    opacity: 0;
  }

  .elementos .etiqueta::after {
    opacity: 0;
  }

  .elementos a.seleccionado .etiqueta,
  .elementos a.seleccionado .etiqueta::after {
    opacity: 1;
  }

  .section-view-grid,
  .section-view-grid--invertida {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* La imagen del elemento siempre arriba en móvil (donde gira hasta
     quedar tumbada, ver script.js) — en escritorio --invertida la manda
     al otro lado de la rejilla; aquí se anula ese orden. */
  .section-view-grid--invertida .elemento-slot,
  .section-view-grid--invertida .apartado-inner {
    order: 0;
  }

  .elemento-slot {
    height: clamp(70px, 20vw, 110px);
  }

  .apartado-eyebrow { margin-bottom: 0.4rem; }
  .apartado-inner h2 { margin-bottom: 0.6rem; }
  .apartado-lead { font-size: 0.95rem; }

  /* Análisis de material en móvil: script.js reparte los 3 textos por
     encima y por debajo de la posición real del elemento (ver
     actualizarAnalisis), centrados sobre su propio punto en vez de
     pegados a un margen — aquí se hacen más grandes y, con un ancho
     máximo estrecho, se parten en 2-3 líneas cortas en vez de una tira
     larga de una sola línea (el nowrap de escritorio no aplica aquí). */
  .analisis-punto-texto {
    font-size: 0.95rem;
    white-space: normal;
    text-align: center;
    max-width: min(46vw, 190px);
  }

  .lista-check { margin-top: 0.85rem; gap: 0.4rem; }
  .cta-placeholder { margin-top: 1rem; }
  .buscador-zona { margin-top: 0.85rem; }
  .pasos--compacto { margin-top: 0.85rem; gap: 0.75rem; }
  .formulario--compacto { margin-top: 0.75rem; gap: 0.6rem; }
}

/* ---------------------------------------------------------------
   Botones
--------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primario {
  background: var(--color-accent);
  color: #fff;
}

.btn-primario:hover { background: var(--color-accent-dark); }
.btn-primario:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }
.btn-primario:active { transform: scale(0.97); }
.btn-primario:disabled {
  background: var(--color-border);
  color: var(--color-text-soft);
  cursor: not-allowed;
}

.btn-secundario {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-secundario:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-secundario:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn-secundario:active { transform: scale(0.97); }

.cta-placeholder {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.config-legal-check {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.config-legal-check label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: not-allowed;
}

.config-legal-check input[type="checkbox"] {
  margin-top: 0.2rem;
}

.config-legal-check a {
  color: inherit;
  text-decoration: underline;
}

.cta-nota {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  max-width: 40ch;
}

/* ---------------------------------------------------------------
   Formularios
--------------------------------------------------------------- */
.formulario {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 480px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.85rem;
  font-weight: 600;
}

.campo input,
.campo textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo input:hover,
.campo textarea:hover {
  border-color: var(--color-text-soft);
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 71, 63, 0.15);
}

.campo input:invalid:not(:placeholder-shown) {
  border-color: var(--color-accent-dark);
}

.formulario-estado {
  font-size: 0.9rem;
  min-height: 1.2em;
  color: var(--color-sage);
}

.formulario-estado[data-tipo="error"] {
  color: var(--color-accent-dark);
}

/* ---------------------------------------------------------------
   Cierre — tras el recorrido cinematográfico, en flujo normal de
   documento (scroll de toda la vida, sin sticky ni elementos fijos).
--------------------------------------------------------------- */
.cierre {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) 1.5rem;
  text-align: center;
}

.cierre-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.75rem;
}

.cierre-titulo {
  margin-bottom: 0.75rem;
}

.cierre-texto {
  color: var(--color-text-soft);
  margin-bottom: 2rem;
}

.cierre-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.cierre-nav .btn {
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer {
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-border);
}

.site-footer-nota {
  margin-top: 0.5rem;
}

.site-footer a {
  color: var(--color-accent);
  text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent-dark);
}

/* ---------------------------------------------------------------
   Modo sin movimiento — respeta prefers-reduced-motion desactivando
   por completo el secuestro de scroll: todo vuelve a flujo normal de
   documento, como una landing clásica de toda la vida.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-track {
    height: auto;
  }

  .scene {
    position: static;
    height: auto;
    overflow: visible;
  }

  .home-view {
    position: static;
    opacity: 1;
    min-height: 100svh;
  }

  .section-view {
    position: static;
    opacity: 1;
    pointer-events: auto;
    padding: clamp(4rem, 8vw, 7rem) 1.5rem;
  }

  .section-view:nth-of-type(even) {
    background: var(--color-bg-alt);
  }

  .section-view-grid {
    grid-template-columns: 1fr;
  }

  .elemento-slot {
    display: none;
  }

  .elementos-flotantes {
    display: none;
  }

  .etiqueta-elemento {
    display: none;
  }

  .analisis-lineas,
  .analisis-etiquetas {
    display: none;
  }

  .elementos .foto img {
    visibility: visible;
  }

  .apartado-inner {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
  }

  .pasos--compacto {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2.5rem;
    gap: 2rem;
  }

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