/* Landing de Cashita's (v3). Solo usa las variables de tokens.css. Primero teléfono; escritorio desde 900px.
   Planos (de atrás hacia adelante): fondo de sección < piezas lejanas (z 0) < ruta (z 1) < piezas medias (z 1)
   < contenido (z 2) < piezas cercanas (z 3). Animaciones solo con transform/opacity. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--c-tinta);
  background: var(--c-rojo);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
picture { display: contents; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 900; line-height: 0.98; letter-spacing: -0.01em; }
p { margin: 0; }
main { position: relative; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--c-blanco); color: var(--c-tinta); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.saltar:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--c-blanco); outline-offset: 3px; }
.seccion--clara :focus-visible, .seccion--amarilla :focus-visible, .tablero :focus-visible { outline-color: var(--c-tinta); }

.contenedor { position: relative; z-index: 2; width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { position: relative; padding: 76px 0 92px; overflow: hidden; }
/* Espacio para que la ruta cruce de un lado al otro en curvas amplias sin pasar por debajo del contenido */
.carrera .seccion { padding-bottom: 130px; }
.carrera .productos { padding-top: 120px; }
.titulo-seccion { font-size: var(--t-h2); }
.bajada { margin-top: 12px; font-size: 1.125rem; max-width: 34ch; }
.kicker {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px 6px; border-radius: var(--r-boton);
  background: var(--c-rojo); color: var(--c-blanco);
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.95rem; line-height: 1.1;
  rotate: -2deg;
}
.kicker--claro { background: var(--c-amarillo); color: var(--c-rojo-profundo); }

/* Corte en diagonal hacia la sección siguiente (pseudo-elemento: no crea contexto que tape la ruta) */
.seccion[data-km]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 7vw; min-height: 28px; z-index: 0;
  background: var(--siguiente, transparent); clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.productos { --siguiente: var(--c-amarillo); }
.concurso, .instagram { --siguiente: var(--c-crema); }

/* ---------- Piezas en parallax ---------- */
.piezas { position: absolute; inset: 0; pointer-events: none; }
.pieza { position: absolute; left: var(--xm, var(--x)); top: var(--ym, var(--y)); display: block; will-change: transform; }
.pieza--escritorio { display: none; }
.pieza img { width: 100%; height: auto; rotate: var(--giro, 0deg); }
.anima .pieza img { animation: deriva var(--dur, 8s) ease-in-out var(--retraso, 0s) infinite alternate; }
@keyframes deriva {
  from { transform: translate(0, 0) rotate(-6deg); }
  to { transform: translate(6px, -12px) rotate(9deg); }
}
.pieza--lejos { width: clamp(38px, 11vw, 70px); z-index: 0; opacity: 0.85; }
.pieza--medio { width: clamp(62px, 17vw, 110px); z-index: 1; }
.pieza--cerca { width: clamp(96px, 27vw, 180px); z-index: 3; filter: drop-shadow(0 14px 16px rgba(60, 10, 5, 0.28)); }
.hero .pieza--lejos, .hero .pieza--medio { z-index: 0; }
.hero .pieza--cerca { z-index: 3; }

/* ---------- Entrada al hacer scroll ---------- */
.anima .revela { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anima .revela--izq { transform: translateX(-48px); }
.anima .revela--der { transform: translateX(48px); }
.anima .revela.visible { opacity: 1; transform: none; }
/* movimiento.js mide el contenido sin el desplazamiento de entrada (dura un instante, no se pinta) */
.midiendo .revela { transform: none !important; transition: none !important; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; min-height: 100svh; color: var(--c-blanco); overflow: hidden; isolation: isolate; display: flex;
}
.hero__fondo { position: absolute; inset: 0; z-index: -1; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(150, 12, 8, 0.38) 0%, rgba(150, 12, 8, 0) 46%); }
.hero__dentro {
  position: relative; z-index: 2; width: 100%; max-width: var(--ancho-max); margin: 0 auto;
  padding: 28px var(--gutter) 22px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__logo { width: min(62vw, 250px); height: auto; filter: drop-shadow(0 6px 14px rgba(80, 0, 0, 0.35)); }
.etiqueta {
  display: inline-block; margin-top: 22px; padding: 7px 16px 8px;
  background: var(--c-amarillo); color: var(--c-rojo-profundo);
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1rem; line-height: 1.1;
  border-radius: var(--r-boton); rotate: -2deg;
}
.hero h1 { margin-top: 16px; font-size: var(--t-h1); max-width: 11ch; }
.hero__texto { margin-top: 14px; font-size: 1.125rem; font-weight: 600; max-width: 24ch; text-shadow: 0 1px 10px rgba(90, 0, 0, 0.45); }
.hero__empaques { position: relative; margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.hero__empaques img { height: auto; filter: drop-shadow(0 16px 22px rgba(70, 0, 0, 0.45)); }
.empaque-popcorn { width: clamp(150px, 42vw, 230px); rotate: -6deg; }
.empaque-japones { width: clamp(68px, 19vw, 105px); rotate: 8deg; translate: 0 -6px; }
.hero__acciones { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.desliza {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; text-align: center;
}
.desliza svg { width: 34px; height: 34px; animation: rebote 1.8s ease-in-out infinite; }
/* El letrero es más largo que el de antes: menos espacio entre letras para que quepa en una línea en teléfono; en
   pantallas muy angostas parte en dos renglones parejos. */
.desliza__texto { letter-spacing: 0.07em; text-wrap: balance; }
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Entrada de los empaques: caen con un rebote corto (el Japonés un instante después). movimiento.js pone .entra
   cuando la imagen ya cargó, para que el rebote no se pierda en una conexión lenta. Sin movimiento: solo aparecen. */
.anima .hero__empaques img { opacity: 0; }
.anima .hero__empaques img.entra { animation: empaque-entra 0.95s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
.anima .hero__empaques .empaque-japones.entra { animation-delay: 0.16s; }
@keyframes empaque-entra {
  0% { opacity: 0; transform: translateY(-80px) scale(0.86); }
  45% { opacity: 1; transform: translateY(12px) scale(1.03, 0.97); }
  66% { transform: translateY(-12px) scale(0.99, 1.01); }
  84% { transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__empaques img { animation: aparece 0.6s ease both !important; } }

.boton-video {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 10px 12px;
  background: rgba(255, 255, 255, 0.16); border: 2px solid var(--c-blanco); border-radius: var(--r-boton);
  font-weight: 800; cursor: pointer;
}
.boton-video svg { width: 28px; height: 28px; }
.video-marco { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(20, 5, 2, 0.88); }
.video-marco video { max-height: 86svh; width: auto; border-radius: 16px; background: #000; }
.video-marco__cerrar {
  position: absolute; top: 14px; right: 14px; min-width: 48px; min-height: 48px; border: 0; border-radius: 50%;
  background: var(--c-blanco); color: var(--c-tinta); font-size: 1.5rem; font-weight: 800; cursor: pointer;
}

/* ---------- La carrera (ruta) ----------
   Un sendero claro de corredor (no una carretera): banda clara con orilla amarilla y avance rojo, armada en
   movimiento.js (en escritorio: carriles rectos y arcos de un mismo radio). */
.carrera { position: relative; }
.ruta { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.ruta path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ruta__orilla { stroke: var(--c-amarillo-sol); }
.ruta__sendero { stroke: var(--c-sendero); }
.ruta__avance { stroke: var(--c-rojo); }
.ruta__corredor { fill: var(--c-amarillo); stroke: var(--c-rojo-profundo); stroke-width: 3; transition: opacity 0.3s ease; }
.ruta__huellas ellipse { fill: var(--c-rojo-profundo); }
.ruta__huellas g { opacity: 0; transition: opacity 0.6s ease; }
.ruta__huellas g.visible { opacity: 0.4; }
.ruta__marcas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ruta__km {
  position: absolute; transform: translate(-50%, -50%); padding: 4px 10px 5px; border-radius: 8px;
  background: var(--c-rojo); color: var(--c-blanco); border: 2px solid var(--c-blanco);
  font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px rgba(40, 10, 5, 0.25);
}

/* ---------- 2. Productos ---------- */
.seccion--clara { background: var(--c-crema); color: var(--c-tinta); }
.seccion--clara .titulo-seccion { color: var(--c-rojo); }
.productos__lista { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 34px; }
.producto { position: relative; isolation: isolate; display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 10px; min-height: 230px; padding: 20px 18px 20px 0; }
.producto::before {
  content: ""; position: absolute; inset: 22px 0 4px 10%; z-index: -1; border-radius: 30px;
  background: var(--c-amarillo); rotate: -3deg; box-shadow: var(--sombra-tarjeta);
}
.producto__foto { display: flex; justify-content: center; }
.producto__foto img { height: 230px; width: auto; filter: drop-shadow(0 14px 16px rgba(60, 10, 5, 0.35)); }
.producto--japones .producto__foto img { rotate: 7deg; }
.producto--popcorn { grid-template-columns: 1fr 48%; padding: 20px 0 20px 18px; color: var(--c-blanco); }
.producto--popcorn::before { inset: 22px 10% 4px 0; background: var(--c-rojo); rotate: 3deg; }
.producto--popcorn .producto__foto { order: 2; }
.producto--popcorn .producto__foto img { rotate: -6deg; height: 220px; }
.producto h3 { font-size: clamp(2rem, 9vw, 3.4rem); }
.producto--japones h3 { color: var(--c-rojo-profundo); }
.producto p { margin-top: 8px; font-size: 1rem; line-height: 1.35; font-weight: 600; }

/* Título del kit más grande (correo del cliente, 3-nov) y la pregunta del voto, con el botón en cada tarjeta */
/* Títulos de sección de la carrera: un solo tamaño y estilo para KM 1, KM 2, la familia y KM 3 (token --t-titulo-km) */
.titulo-km { font-size: var(--t-titulo-km); }
.productos .titulo-km { max-width: 12ch; }
.voto__pregunta {
  margin-top: 14px; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: clamp(1.45rem, 6vw, 2.1rem);
  line-height: 1.05; color: var(--c-rojo-profundo);
}
.voto__boton {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 46px; padding: 9px 16px 9px 10px;
  border: 2px solid transparent; border-radius: var(--r-boton); background: var(--c-rojo); color: var(--c-blanco);
  font-weight: 800; font-size: 0.9rem; line-height: 1.1; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 14px rgba(60, 10, 5, 0.22);
  transition: transform 0.2s ease, opacity 0.3s ease, background-color 0.2s ease;
}
.voto__boton:hover { transform: translateY(-2px); }
.voto__marca {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; color: inherit;
}
.voto__marca svg { opacity: 0; transition: opacity 0.2s ease; }
.voto__boton[aria-pressed="true"] .voto__marca { background: var(--c-blanco); border-color: var(--c-blanco); color: var(--c-rojo); }
.voto__boton[aria-pressed="true"] .voto__marca svg { opacity: 1; }
.voto__boton[aria-pressed="true"] { background: var(--c-rojo-profundo); }
.producto--popcorn .voto__boton { background: var(--c-blanco); color: var(--c-rojo-profundo); }
/* En teléfono la columna de texto del Popcorn es angosta: un poco más de ancho para que el botón quepa en una línea */
@media (max-width: 899px) { .producto--popcorn { grid-template-columns: 1fr 43%; } .voto__boton { padding: 8px 14px 8px 8px; gap: 7px; } }
.producto--popcorn .voto__boton[aria-pressed="true"] { background: var(--c-amarillo); }
.producto--popcorn .voto__boton[aria-pressed="true"] .voto__marca { background: var(--c-rojo); border-color: var(--c-rojo); color: var(--c-blanco); }
.voto--hecho .voto__boton[aria-pressed="false"] { opacity: 0.72; }
.productos .voto__estado { margin-top: 26px; }

/* ---------- 3. Concurso, paso 1: tu favorito (dentro del tablero) ---------- */
.voto__opciones { margin: 6px auto 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opcion {
  position: relative; display: flex; flex-direction: column; padding: 0; border: 4px solid transparent;
  border-radius: var(--r-tarjeta); overflow: hidden; background: var(--c-amarillo); color: var(--c-tinta);
  cursor: pointer; text-align: center; box-shadow: var(--sombra-tarjeta);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, scale 0.2s ease;
}
.opcion--izq { rotate: -2.5deg; }
.opcion--der { rotate: 2.5deg; }
.opcion img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.opcion__nombre { display: block; padding: 10px 6px 12px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.2rem; line-height: 1.05; color: var(--c-rojo-profundo); }
.opcion:hover { scale: 1.03; }
.opcion[aria-pressed="true"] { border-color: var(--c-rojo); scale: 1.04; }
.voto--hecho .opcion[aria-pressed="false"] { opacity: 0.6; }
.opcion__marca { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--c-rojo); color: var(--c-blanco); display: none; place-items: center; }
.opcion[aria-pressed="true"] .opcion__marca { display: grid; }
.voto__estado { min-height: 1.5em; font-weight: 700; text-align: center; color: var(--c-rojo-profundo); }

/* ---------- 4. Concurso ---------- */
.seccion--amarilla { background: linear-gradient(180deg, var(--c-amarillo) 0%, var(--c-amarillo-sol) 100%); color: var(--c-tinta); }
.seccion--amarilla .titulo-seccion { color: var(--c-rojo-profundo); }
.concurso__intro { text-align: center; }
.concurso__intro .titulo-seccion { max-width: 22ch; margin: 0 auto; }
.concurso__intro .bajada { margin-left: auto; margin-right: auto; max-width: 46ch; }
.concurso__cierre { margin: 12px auto 0; max-width: 46ch; font-weight: 800; color: var(--c-rojo-profundo); }
.concurso__bases { margin-top: 10px; font-weight: 700; }
.tablero {
  position: relative; margin: 26px auto 0; max-width: 760px; padding: 22px 18px 24px; border-radius: 28px;
  background: var(--c-blanco); color: var(--c-tinta); box-shadow: 0 22px 44px rgba(120, 40, 0, 0.25);
}
.pasos { list-style: none; margin: 0 0 18px; padding: 0 0 16px; display: flex; justify-content: space-between; gap: 6px; border-bottom: 2px dashed rgba(43, 24, 16, 0.18); font-size: 0.85rem; font-weight: 700; color: var(--c-tinta-suave); }
.pasos__item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pasos__item span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font-size: 0.8rem; }
.pasos__item.es-actual { color: var(--c-rojo-profundo); }
.pasos__item.es-hecho span { background: var(--c-rojo); border-color: var(--c-rojo); color: var(--c-blanco); }
.paso { display: grid; gap: 14px; }
.paso__titulo { font-size: 1.7rem; color: var(--c-rojo-profundo); outline: none; }
.paso__texto { font-size: 1.05rem; }
.paso__demo { display: block; margin-top: 8px; color: var(--c-tinta-suave); font-size: 0.85rem; }
.paso__botones { display: flex; gap: 10px; flex-wrap: wrap; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; font-size: 0.95rem; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid rgba(43, 24, 16, 0.3); border-radius: 14px; background: var(--c-blanco); font-size: 1rem;
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--c-rojo); box-shadow: 0 0 0 3px rgba(224, 36, 29, 0.18); }
.campo [aria-invalid="true"] { border-color: var(--c-rojo-profundo); }
.campo--casilla { grid-template-columns: 26px 1fr; align-items: start; column-gap: 10px; }
.campo--casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--c-rojo); }
.campo--casilla label { font-weight: 600; }
.campo--casilla .campo__error { grid-column: 2; }
.campo--verificacion { min-height: 0; }
.campo--verificacion iframe { max-width: 100%; }
.campo__error { min-height: 0; color: var(--c-rojo-profundo); font-size: 0.875rem; font-weight: 700; }
.campo__error:empty { display: none; }
.campo__ayuda { font-size: 0.85rem; color: var(--c-tinta-suave); }
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.campo label a { color: var(--c-rojo-profundo); }
.pregunta { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.pregunta + .pregunta { margin-top: 14px; }
.paso__titulo + .paso__texto { margin-top: -6px; }
.reloj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 14px; background: var(--c-crema); }
.reloj__avance { font-weight: 800; color: var(--c-tinta-suave); }
.reloj__tiempo { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--c-rojo-profundo); font-variant-numeric: tabular-nums; }
.pregunta legend { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 1.05rem; }
.respuesta { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 2px solid rgba(43, 24, 16, 0.2); border-radius: 14px; cursor: pointer; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease; }
.respuesta input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-rojo); }
.respuesta:has(input:checked) { background: #fff3cf; border-color: var(--c-rojo); }
.concurso__estado { margin-top: 12px; font-weight: 700; color: var(--c-rojo-profundo); }
.concurso__estado:empty { display: none; }

/* ---------- 3. Instagram y la familia (KM 2) ---------- */
.instagram__intro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.instagram__intro .kicker { rotate: -2deg; }
.instagram__intro .titulo-km { max-width: 12ch; }
.instagram__intro .bajada { margin-left: auto; margin-right: auto; }
.instagram__intro .boton { margin-top: 22px; }
.boton--icono { gap: 10px; }
.boton--icono svg { flex: none; }
.instagram__feed { list-style: none; margin: 30px auto 0; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.instagram__feed a { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px rgba(120, 40, 0, 0.2); }
.instagram__feed img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; transition: scale 0.3s ease; }
.instagram__feed a:hover img { scale: 1.04; }
.familia { margin-top: 46px; }
.familia__titulo { color: var(--c-rojo-profundo); text-align: center; }
.familia__marco { position: relative; margin-top: 20px; }
.familia__carrusel {
  list-style: none; margin: 0; padding: 6px 2px 18px; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.familia__carrusel::-webkit-scrollbar { display: none; }
.familia__carrusel:focus-visible { outline-offset: 4px; border-radius: var(--r-tarjeta); }
.familia__item {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center;
  padding: 16px 10px 14px; border-radius: var(--r-tarjeta); background: var(--c-crema); text-align: center;
  box-shadow: 0 10px 22px rgba(120, 40, 0, 0.18);
}
.familia__item img { height: 170px; width: auto; filter: drop-shadow(0 10px 10px rgba(60, 10, 5, 0.25)); }
.familia__tipo {
  margin-top: 12px; padding: 3px 10px 4px; border-radius: var(--r-boton); background: var(--c-rojo); color: var(--c-blanco);
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.75rem; line-height: 1.1;
}
.familia__nombre { margin-top: 8px; font-weight: 800; font-size: 0.92rem; line-height: 1.2; color: var(--c-tinta); }
.familia__flecha {
  position: absolute; top: calc(50% - 34px); width: 48px; height: 48px; display: none; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--c-rojo); color: var(--c-blanco); cursor: pointer;
  box-shadow: 0 8px 18px rgba(60, 10, 5, 0.3); transition: opacity 0.2s ease, transform 0.2s ease;
}
.familia__flecha svg { width: 26px; height: 26px; }
.familia__flecha:hover { transform: scale(1.06); }
.familia__flecha:disabled { opacity: 0; pointer-events: none; }
.familia__flecha--prev { left: -16px; }
.familia__flecha--sig { right: -16px; }
@media (hover: hover) and (pointer: fine) { .familia__flecha { display: grid; } }
/* Escritorio: el carrusel no termina en un corte seco; se desvanece hacia el fondo de la sección en el lado donde hay
   más tarjetas (app.js pone .hay-izq / .hay-der). Es una máscara: solo cuenta la opacidad, así que funde con el fondo
   que haya detrás (el amarillo de la sección). Las flechas están fuera del carrusel: no se desvanecen y siguen clicables.
   En teléfono no aplica: ahí la tarjeta corta en la orilla de la pantalla. */
@media (min-width: 900px) {
  .familia__carrusel {
    --desv-izq: 0px; --desv-der: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-tinta) var(--desv-izq), var(--c-tinta) calc(100% - var(--desv-der)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--c-tinta) var(--desv-izq), var(--c-tinta) calc(100% - var(--desv-der)), transparent 100%);
  }
  .familia__carrusel.hay-izq { --desv-izq: var(--desvanecido); }
  .familia__carrusel.hay-der { --desv-der: var(--desvanecido); }
  .familia__flecha { z-index: 1; }
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px;
  border-radius: var(--r-boton); border: 2px solid transparent; font-weight: 800; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:disabled { opacity: 0.6; cursor: progress; transform: none; }
.paso > .boton { justify-self: start; }
.paso--favorito > .boton { justify-self: center; min-width: 220px; }
.boton--rojo { background: var(--c-rojo); color: var(--c-blanco); }
.boton--claro { background: var(--c-blanco); color: var(--c-tinta); border-color: rgba(43, 24, 16, 0.3); }

/* ---------- 4. Dónde comprar: un botón por tienda con su logo (sin repetir "Comprar en") ---------- */
.tiendas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tiendas li { display: flex; }
.tienda {
  position: relative; flex: 1; display: grid; place-items: center; min-height: 96px; padding: 18px 20px;
  border-radius: var(--r-tarjeta); background: var(--c-blanco); color: var(--c-rojo); text-decoration: none;
  border: 2px solid transparent; box-shadow: 0 10px 24px rgba(60, 10, 5, 0.12);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tienda:hover { scale: 1.03; border-color: var(--c-amarillo); box-shadow: 0 14px 28px rgba(60, 10, 5, 0.18); }
.tienda__logo { width: 100%; max-width: 132px; max-height: 38px; height: auto; object-fit: contain; }
.tienda__logo--amazon { max-width: 112px; translate: 0 4px; }
.tienda__logo--walmart { max-width: 124px; }
.tienda__logo--chedraui { max-width: 142px; max-height: 40px; }
.tienda__flecha { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; opacity: 0.85; }

/* ---------- 6. Meta ---------- */
.seccion.cierre { position: relative; color: var(--c-blanco); isolation: isolate; padding: 0; }
.meta-cinta {
  position: relative; z-index: 2; height: 36px; display: grid; place-items: center;
  background: repeating-conic-gradient(var(--c-tinta) 0 25%, var(--c-blanco) 0 50%) 0 0 / 36px 36px;
}
.meta-cinta span {
  padding: 4px 18px 5px; border-radius: 8px; background: var(--c-rojo); color: var(--c-blanco); border: 2px solid var(--c-blanco);
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
}
.cierre__fondo { position: absolute; inset: 36px 0 0; z-index: -1; }
.cierre__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cierre__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 24, 16, 0.15) 0%, rgba(120, 10, 6, 0.86) 62%, var(--c-rojo) 100%); }
.cierre__dentro { min-height: 80svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-top: 140px; padding-bottom: 48px; }
.cierre .titulo-seccion { max-width: 13ch; }
.cierre__logo { width: 190px; height: auto; margin-top: 26px; }
.redes { margin-top: 26px; }
.redes p { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.875rem; }
.redes ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.redes a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: var(--r-boton); background: var(--c-blanco); color: var(--c-rojo-profundo); font-weight: 800; text-decoration: none; }

.pie { background: var(--c-rojo); color: var(--c-blanco); text-align: center; padding: 18px var(--gutter) 28px; font-size: var(--t-chico); }
.pie__leyenda { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pie p + p { margin-top: 6px; opacity: 0.9; }

/* Páginas simples (raíz y 404) */
.pagina-simple { min-height: 100vh; display: grid; place-items: center; color: var(--c-blanco); font-weight: 700; }
.pagina-simple a { color: var(--c-blanco); }
.pagina-simple__dentro { justify-content: center; gap: 22px; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .seccion { padding: 120px 0 150px; }
  /* Huecos medidos para que cada cruce de la ruta quepa con arcos de 180 px (RADIO en movimiento.js): dos arcos y un
     poco de inclinación entre secciones y también en la salida (baja del centro, bajo el aviso de scroll); uno solo
     en la meta. */
  .carrera .seccion { padding-top: 230px; padding-bottom: 250px; }
  .carrera .productos { padding-top: 430px; padding-bottom: 310px; }
  .carrera .concurso, .carrera .instagram { padding-top: 240px; }
  .carrera .comprar { padding-bottom: 240px; }
  .pieza { left: var(--x); top: var(--y); }
  .pieza--escritorio { display: block; }
  .hero { min-height: min(100svh, 860px); }
  .hero__fondo img { object-position: center center; }
  .hero__fondo::after { background: linear-gradient(90deg, rgba(150, 12, 8, 0.42) 0%, rgba(150, 12, 8, 0) 55%); }
  .hero__dentro { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: auto 1fr; align-items: center; text-align: left; padding-top: 48px; padding-bottom: 40px; column-gap: 32px; }
  .hero__copia { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; }
  .hero__logo { width: 300px; }
  .hero h1 { max-width: 12ch; }
  .hero__texto { max-width: 30ch; font-size: 1.375rem; }
  .hero__empaques { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding-top: 0; align-self: center; }
  .empaque-popcorn { width: 330px; }
  .empaque-japones { width: 150px; }
  .hero__acciones { align-items: flex-start; margin-top: 28px; }
  /* El aviso de scroll va al centro de la página, en el mismo eje que la marca de SALIDA (movimiento.js la pone en
     W / 2): letrero en pastilla amarilla y flecha en disco rojo, como las marcas de la ruta, para leerse sobre la foto. */
  .desliza { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 2; gap: 8px; padding: 0; }
  .desliza__texto {
    padding: 8px 20px 9px; border-radius: var(--r-boton); background: var(--c-amarillo); color: var(--c-rojo-profundo);
    font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 0.95rem; line-height: 1.1;
    letter-spacing: 0.06em; white-space: nowrap; box-shadow: 0 8px 20px rgba(70, 0, 0, 0.38);
  }
  .desliza svg { width: 40px; height: 40px; border-radius: 50%; background: var(--c-rojo); color: var(--c-blanco); box-shadow: 0 6px 14px rgba(40, 10, 5, 0.35); }
  .productos__lista { grid-template-columns: 1fr 1fr; gap: 56px; }
  .producto { min-height: 360px; }
  .producto__foto img { height: 330px; }
  .producto--popcorn { translate: 0 70px; }
  .producto--popcorn .producto__foto img { height: 320px; }
  .producto p { font-size: 1.125rem; }
  .voto__opciones { gap: 30px; }
  .opcion__nombre { font-size: 1.5rem; padding: 12px 10px 14px; }
  .tablero { margin-top: 40px; padding: 30px 40px 36px; }
  .pasos__item { flex-direction: row; gap: 6px; }
  .comprar .contenedor { max-width: 900px; text-align: center; }
  .comprar .bajada { margin-left: auto; margin-right: auto; }
  .tiendas { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .tienda { min-height: 120px; padding: 22px 26px; }
  .tienda__logo { max-width: 150px; max-height: 44px; }
  .tienda__logo--amazon { max-width: 128px; }
  .tienda__logo--walmart { max-width: 140px; }
  .voto__boton { font-size: 1.05rem; padding: 10px 20px 10px 12px; }
  /* KM 1 centrado en escritorio (Mike, 4-nov): título y pregunta sobre el eje de las dos tarjetas */
  .productos .contenedor > .titulo-km, .productos .voto__pregunta { text-align: center; margin-left: auto; margin-right: auto; }
  .titulo-km, .productos .titulo-km, .instagram__intro .titulo-km { max-width: none; }
  .productos .voto__estado { margin-top: 110px; text-align: center; font-size: 1.125rem; } /* debajo de la tarjeta del Popcorn, que baja 70 px */
  .instagram__feed { gap: 14px; }
  .familia { margin-top: 64px; }
  .familia__item { width: 184px; padding: 20px 12px 16px; }
  .familia__item img { height: 210px; }
  .familia__carrusel { gap: 18px; }
  .cierre__dentro { min-height: 78vh; }
  .cierre__logo { width: 230px; }
  .ruta__km { font-size: 0.95rem; padding: 6px 14px 7px; }
}
@media (min-width: 900px) and (max-height: 760px) { .hero { min-height: 760px; } }