/* =========================================================
   PACAS GUADALUPE - "Bodega abierta"
   Mobile first (390 px). Breakpoints: 720, 1024.
   ========================================================= */
:root {
  --papel: #FAF7F0;
  --papel-blanco: #FFFFFF;
  --marcador: #0B0B0A;        /* negro del logo */
  --tinta-suave: #4A463D;
  --etiqueta: #FC460C;        /* naranja del logo: etiquetas, cintas, acentos */
  --etiqueta-oscura: #C73508;
  --rojo: #E0312B;
  --verde: #1E9E4A;
  --azul: #FC460C;            /* anillo de foco, en el acento de marca */
  --azul-logo: #0B0B0A;   /* negro del logo (antes azul del logo viejo) */
  --naranja: #FC460C;     /* naranja del logo */
  --whatsapp: #25D366;
  --whatsapp-oscuro: #128C7E;
  --loseta: #EDE7DB;
  --sombra-dura: 5px 5px 0 var(--marcador);
  --f-rotulo: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-marcador: "Permanent Marker", "Comic Sans MS", cursive;
  --f-cuerpo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --ancho: 1240px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--marcador);
  font-family: var(--f-cuerpo);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before { /* loseta de la bodega, muy sutil */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23,21,15,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,21,15,.045) 1px, transparent 1px);
  background-size: 96px 96px;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button, input, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,210,63,.35); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }
h1, h2, h3 { text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--etiqueta); border: 2px solid var(--marcador); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: calc(var(--nav-h) + 8px); }
.error { color: #B3211C; font-weight: 700; font-size: 15px; margin: -4px 0 12px; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

/* ---------- Tipografía ---------- */
.rotulo {
  font-family: var(--f-rotulo);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  margin: 0;
}
/* Rótulo del hero en los colores del logo: negro, naranja, negro */
.rotulo--tricolor .l1 { color: var(--marcador); text-shadow: 4px 4px 0 var(--etiqueta); }
.rotulo--tricolor .l2 { color: var(--etiqueta); }
.rotulo--tricolor .l3 { color: var(--marcador); text-shadow: 4px 4px 0 var(--etiqueta); }
.rotulo--tricolor span {
  display: block;
  -webkit-text-stroke: 1.5px var(--azul-logo);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--azul-logo);
}
.rotulo--tricolor .l1, .rotulo--tricolor .l3 { text-shadow: 4px 4px 0 var(--etiqueta); }
h2.rotulo { font-size: clamp(38px, 9vw, 72px); }
.marcador { font-family: var(--f-marcador); letter-spacing: .005em; }
p { margin: 0 0 1em; }
.max-ch { max-width: 60ch; }
.mudo { color: var(--tinta-suave); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  border: 2.5px solid var(--marcador); border-radius: 999px;
  background: var(--papel-blanco); color: var(--marcador);
  font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--marcador);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--marcador); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--marcador); }
.btn--wa { background: var(--whatsapp); }
.btn--etiqueta { background: var(--etiqueta); }
.btn--mini { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: 3px 3px 0 var(--marcador); }
.btn svg { width: 22px; height: 22px; flex: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(250,247,240,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--marcador);
}
.nav .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__logo img { height: 28px; width: auto; }
.nav__links { display: none; gap: 26px; list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: 15px; }
.nav__links a { text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--etiqueta); }
@media (min-width: 720px) { .nav__links { display: flex; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end; overflow: clip;
  padding: calc(var(--nav-h) + 24px) 0 96px;
  isolation: isolate;
}
#catalogo { padding-top: 40px; }
.paca__sep:last-child { display: none; }
.pared__mas { margin-top: 10px; text-align: center; }
.hero__video, .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero__video--escritorio { display: none; }
.hero picture { display: contents; }
.hero::after { /* velo de plástico: claro arriba, denso abajo para legibilidad */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(250,247,240,.05) 0%, rgba(250,247,240,.15) 45%, rgba(250,247,240,.92) 78%, var(--papel) 100%);
}
.hero__rotulo { font-size: clamp(52px, 15vw, 150px); } /* "PACAS DE ROPA" cabe en una línea a 375 px */
.hero__sub { font-size: 19px; font-weight: 600; max-width: 34ch; margin: 18px 0 24px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__tape { /* cinta sobre el rótulo con el nombre */
  display: inline-block; transform: rotate(-2deg); margin-bottom: 14px;
  background: var(--etiqueta); padding: 6px 14px; font-weight: 700; font-size: 14px;
  box-shadow: 3px 3px 0 var(--marcador);
}
@media (min-width: 720px) {
  .hero { align-items: center; padding-bottom: 80px; }
  .hero__video--movil { display: none; }
  .hero__video--escritorio { display: block; }
  .hero::after { background: linear-gradient(to right, rgba(250,247,240,.9) 0%, rgba(250,247,240,.72) 48%, rgba(250,247,240,.05) 100%); }
  .hero__rotulo { font-size: clamp(90px, 11vw, 170px); }
}

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
.seccion__cabeza { margin-bottom: 28px; }
.seccion__cabeza p { font-size: 18px; margin-top: 10px; }
@media (min-width: 1024px) { .seccion { padding: 110px 0; } }

.aviso { background: var(--etiqueta); border: 2px solid var(--marcador); padding: 12px 16px; font-weight: 600; font-size: 15px; box-shadow: 3px 3px 0 var(--marcador); margin: 0 0 18px; max-width: 60ch; }

/* ---------- Filtros tipo pinza ---------- */
.filtros { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filtros::-webkit-scrollbar { display: none; }
.pinza {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 0;
  border: 2px solid var(--marcador); background: var(--papel-blanco); cursor: pointer;
  font-family: var(--f-marcador); font-size: 17px;
  box-shadow: 3px 3px 0 var(--marcador);
}
.pinza[aria-pressed="true"] { background: var(--etiqueta); }
.pinza:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marcador); }

/* ---------- Pared de letreros (catálogo) ---------- */
.pared { display: grid; gap: 34px; }
.paca { position: relative; margin: 0; transform: rotate(var(--giro, 0deg)); }
.paca__media {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden; /* apaisado: más pacas por pantalla en el celular */
  background: var(--loseta); border: 3px solid var(--marcador);
}
.paca__media video, .paca__media img { width: 100%; height: 100%; object-fit: cover; }
.paca__media::after { /* plástico */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.18) 100%);
}
.letrero { /* hoja de papel con cinta */
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  background: var(--papel-blanco); color: var(--marcador);
  padding: 14px 18px 12px; border: 2px solid var(--marcador);
  font-family: var(--f-marcador); font-size: clamp(17px, 4.6vw, 24px); line-height: 1.1; text-transform: uppercase;
  box-shadow: var(--sombra-dura); transform: rotate(var(--giro-letrero, -1.5deg));
}
.letrero::before, .letrero::after { /* cinta adhesiva */
  content: ""; position: absolute; top: -10px; width: 54px; height: 18px;
  background: rgba(255,210,63,.85); border: 1px solid rgba(23,21,15,.35); transform: rotate(-6deg);
}
.letrero::before { left: -14px; }
.letrero::after { right: -14px; transform: rotate(5deg); }
.etiqueta { /* precio en etiqueta amarilla */
  position: absolute; top: 14px; right: 12px; z-index: 2;
  background: var(--etiqueta); border: 2px solid var(--marcador);
  padding: 10px 14px; transform: rotate(3deg);
  font-family: var(--f-marcador); font-size: 20px; line-height: 1; white-space: nowrap;
  box-shadow: 4px 4px 0 var(--marcador);
}
.etiqueta small { display: block; font-family: var(--f-cuerpo); font-weight: 700; font-size: 11px; letter-spacing: .04em; margin-top: 5px; text-transform: uppercase; }
.etiqueta--agotada { background: var(--rojo); color: #fff; }
.sinvideo { /* paca sin video: hoja kraft con la franja del color del grado */
  width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 12px;
  padding: 22px 18px 18px; text-align: center; color: var(--marcador);
  background:
    linear-gradient(var(--c, var(--loseta)), var(--c, var(--loseta))) top / 100% 22px no-repeat,
    repeating-linear-gradient(0deg, rgba(23,21,15,.05) 0 1px, transparent 1px 7px),
    #D9CBB3;
}
.sinvideo b { font-family: var(--f-rotulo); font-weight: 400; font-size: clamp(34px, 9vw, 54px); line-height: .95; text-transform: uppercase; letter-spacing: .02em; }
.sinvideo span { font-family: var(--f-marcador); font-size: 16px; max-width: 16ch; }
.ficha__media .sinvideo b { font-size: clamp(40px, 6vw, 72px); }
.grado-pin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--c); border: 2px solid var(--marcador); border-radius: 50%; }
.paca__datos { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; font-size: 15px; }
.paca__datos b { font-weight: 700; }
.paca__sep { width: 6px; height: 6px; background: var(--marcador); border-radius: 50%; }
.paca__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.paca__abrir { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; cursor: pointer; }
.paca__media .etiqueta { pointer-events: none; } /* la etiqueta no tapa el botón que abre la ficha */
.paca__abrir:focus-visible { outline-offset: -4px; }
@media (min-width: 720px) {
  .pared { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
  .paca:nth-child(4n+2) { margin-top: 44px; }
}
@media (min-width: 1024px) {
  .pared { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
  .paca:nth-child(4n+2) { margin-top: 0; }
  .paca:nth-child(3n+2) { margin-top: 56px; }
  .paca:nth-child(3n+3) { margin-top: 24px; }
}
.pared__vacio { padding: 40px 0; font-family: var(--f-marcador); font-size: 24px; }

/* ---------- Ficha (hoja desplegable) ---------- */
.ficha { border: 0; padding: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--papel); color: var(--marcador); overflow-y: auto; overscroll-behavior: contain; }
.ficha dl, .etiqueta, .ficha__precio { font-variant-numeric: tabular-nums; }
.ficha::backdrop { background: rgba(23,21,15,.6); }
.ficha__cerrar { position: fixed; top: 14px; right: 14px; z-index: 3; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.ficha__cuerpo { display: grid; min-height: 100%; }
.ficha__media { position: relative; aspect-ratio: 5 / 4; max-height: 52dvh; overflow: hidden; border-bottom: 3px solid var(--marcador); background: var(--loseta); }
.ficha__media video { width: 100%; height: 100%; object-fit: cover; }
.ficha__texto { padding: 22px var(--gutter) 120px; }
.ficha__nombre { font-family: var(--f-marcador); font-size: clamp(28px, 7vw, 42px); line-height: 1.05; text-transform: uppercase; margin: 0 0 8px; }
.ficha__precio { display: inline-block; background: var(--etiqueta); border: 2px solid var(--marcador); padding: 10px 14px; font-family: var(--f-marcador); font-size: 26px; line-height: 1; box-shadow: 4px 4px 0 var(--marcador); transform: rotate(-2deg); margin: 10px 0 18px; }
.ficha__precio small { display: block; font-family: var(--f-cuerpo); font-weight: 700; font-size: 12px; margin-top: 6px; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 22px; font-size: 16px; }
.ficha dt { font-weight: 700; }
.ficha dd { margin: 0; }
.ficha__contenido ul { margin: 6px 0 0; padding-left: 20px; }
.ficha__cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 2px solid var(--marcador); display: flex; gap: 10px; }
.ficha__cta .btn { flex: 1; }
@media (min-width: 1024px) {
  .ficha__cuerpo { grid-template-columns: 1fr 1fr; }
  .ficha__media { aspect-ratio: auto; max-height: none; height: 100dvh; border-bottom: 0; border-right: 3px solid var(--marcador); }
  .ficha__texto { padding: 80px 64px 140px; }
  .ficha__cta { left: 50%; }
}

/* ---------- Destape: video real en autoplay ----------
   El video fuente es vertical 540x960. A pantalla completa en PC se pixelaba (pedido de Sergio, 25 oct):
   en celular ocupa el ancho; en escritorio va en un marco vertical al lado de las frases. */
.destape { position: relative; background: var(--marcador); color: var(--papel); }
/* alto por clamp y no por aspect-ratio: con min-height el aspect-ratio ensanchaba el bloque más que la pantalla */
.destape__pin { position: relative; display: grid; overflow: hidden; height: clamp(72dvh, 144vw, 90dvh); }
.destape__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #17150F; }
.destape__frases { position: absolute; inset: 0; display: grid; align-content: end; gap: 10px; padding: 0 var(--gutter) 56px; z-index: 2;
  background: linear-gradient(to top, rgba(23,21,15,.75), rgba(23,21,15,0) 60%); }
.destape__frase { margin: 0; font-family: var(--f-rotulo); text-transform: uppercase; font-size: clamp(26px, 6.5vw, 48px); line-height: .95; }
.destape__frase em { font-style: normal; color: var(--etiqueta); }
@media (min-width: 900px) {
  .destape__pin { height: auto; max-width: 1180px; margin: 0 auto;
    grid-template-columns: 1fr auto; align-items: center; gap: clamp(32px, 5vw, 80px); padding: clamp(48px, 7vh, 88px) var(--gutter); }
  .destape__video { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: min(76dvh, 760px); width: auto; aspect-ratio: 9 / 16;
    border: 2px solid var(--papel); box-shadow: 10px 10px 0 var(--etiqueta); transform: rotate(1.2deg); }
  .destape__frases { position: static; grid-column: 1; grid-row: 1; padding: 0; background: none; gap: 18px; }
  .destape__frase { font-size: clamp(40px, 4.6vw, 72px); }
}

/* ---------- Cómo comprar: la cinta ---------- */
.pasos { position: relative; display: grid; gap: 26px; counter-reset: paso; }
.paso { position: relative; padding: 22px 22px 22px 86px; background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: var(--sombra-dura); }
.paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 20px; top: 18px; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--etiqueta); border: 2px solid var(--marcador); font-family: var(--f-marcador); font-size: 26px; transform: rotate(-4deg); }
.paso h3 { margin: 0 0 6px; font-size: 22px; font-family: var(--f-marcador); text-transform: uppercase; }
.paso p { margin: 0; font-size: 16px; }
.paso .confirmar { display: inline-block; margin-top: 8px; font-weight: 700; color: #0B6E62; }
@media (min-width: 720px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .paso { padding: 86px 22px 26px; }
  .paso::before { left: 20px; top: 20px; }
  .paso:nth-child(2) { transform: rotate(1deg); }
  .paso:nth-child(3) { transform: rotate(-.6deg); }
}

/* ---------- Bodega: mosaico ---------- */
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mosaico figure { margin: 0; position: relative; overflow: hidden; border: 3px solid var(--marcador); background: var(--loseta); }
.mosaico img, .mosaico video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.mosaico figure:nth-child(1) { grid-column: span 2; }
.mosaico figure:nth-child(1) img, .mosaico figure:nth-child(1) video { aspect-ratio: 16 / 10; }
.mosaico .nota { position: absolute; left: 10px; bottom: 10px; background: var(--etiqueta); border: 2px solid var(--marcador); padding: 6px 10px; font-family: var(--f-marcador); font-size: 15px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--marcador); }
.bodega__texto { margin-top: 28px; }
.bodega__texto h3 { font-family: var(--f-marcador); font-size: 24px; text-transform: uppercase; margin: 0 0 8px; }
.testimonios { display: grid; gap: 16px; margin-top: 26px; }
.testimonio { background: var(--papel-blanco); border: 2px solid var(--marcador); padding: 18px; box-shadow: 4px 4px 0 var(--marcador); transform: rotate(var(--giro, 0deg)); }
.testimonio p { font-family: var(--f-marcador); font-size: 18px; margin: 0 0 8px; }
.testimonio cite { font-style: normal; font-size: 14px; font-weight: 700; }
@media (min-width: 1024px) {
  .bodega { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
  .bodega__texto { margin-top: 0; }
  .mosaico { grid-template-columns: repeat(3, 1fr); }
  .mosaico figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaico figure:nth-child(1) img, .mosaico figure:nth-child(1) video { aspect-ratio: auto; height: 100%; }
}

/* ---------- Preguntas ---------- */
.preguntas details { border-bottom: 2px solid var(--marcador); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative; font-weight: 700; font-size: 18px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--f-marcador); font-size: 30px; }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding: 0 0 18px; margin: 0; max-width: 62ch; }

/* ---------- Footer ---------- */
.pie { background: var(--marcador); color: var(--papel); padding: 56px 0 120px; }
.pie .contenedor { display: grid; gap: 28px; }
.pie__logo { display: inline-block; width: fit-content; }
.pie__logo img { height: 84px; width: auto; }
.pie a { color: var(--papel); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie li a { display: inline-block; padding: 10px 0; }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.preguntas details a, .bodega__texto a:not(.btn) { padding: 6px 0; display: inline-block; }
.pie__credito { font-size: 14px; color: #B7B1A4; }
.pie__credito a { color: #B7B1A4; text-decoration-color: var(--etiqueta); }
.pie__credito a:hover { color: var(--etiqueta); }
@media (min-width: 720px) { .pie { padding-bottom: 64px; } .pie .contenedor { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; } .pie__credito { grid-column: 1 / -1; } }

/* ---------- Barra WhatsApp fija (móvil) ---------- */
.barra-wa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 2px solid var(--marcador); }
.barra-wa .btn { width: 100%; }
@media (min-width: 720px) { .barra-wa { display: none; } }

/* ---------- Promo (landing 3 pasos) ---------- */
.promo-hero { min-height: auto; padding-bottom: 32px; }
.promo-hero .hero__rotulo { font-size: clamp(52px, 14vw, 110px); }
.formulario { position: relative; }
.progreso { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px; }
.progreso__barra { flex: 1; height: 10px; border: 2px solid var(--marcador); background: var(--papel-blanco); }
.progreso__barra i { display: block; height: 100%; background: var(--etiqueta); width: 33%; transition: width .3s ease; }
.hoja { background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: var(--sombra-dura); padding: 28px 22px; transform: rotate(var(--giro, -.6deg)); }
.hoja h2 { font-family: var(--f-marcador); text-transform: uppercase; font-size: clamp(26px, 7vw, 40px); line-height: 1.05; margin: 0 0 18px; }
.opciones { display: grid; gap: 12px; }
.opcion { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; border: 2.5px solid var(--marcador); background: var(--papel); cursor: pointer; text-align: left; font-weight: 600; font-size: 17px; box-shadow: 3px 3px 0 var(--marcador); }
.opcion:hover { background: var(--papel-blanco); }
.opcion[data-elegida] { background: var(--etiqueta); }
.opcion:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marcador); }
.hoja input[type="text"] { width: 100%; min-height: 56px; padding: 0 16px; border: 2.5px solid var(--marcador); background: var(--papel); font: inherit; font-size: 18px; margin-bottom: 12px; }
.hoja input::placeholder { color: #6B665B; }
.hoja__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.resultado { display: grid; gap: 28px; }
.resultado__cabeza { font-family: var(--f-marcador); text-transform: uppercase; font-size: clamp(26px, 7vw, 40px); margin: 0 0 6px; }
.recomendadas { display: grid; gap: 28px; }
.cuenta { display: inline-flex; gap: 8px; align-items: baseline; background: var(--papel-blanco); border: 2px solid var(--marcador); padding: 10px 14px; box-shadow: 3px 3px 0 var(--marcador); font-weight: 700; }
.cuenta b { font-family: var(--f-rotulo); font-size: 26px; }
@media (min-width: 720px) { .opciones { grid-template-columns: 1fr 1fr; } .recomendadas { grid-template-columns: repeat(3, 1fr); } .hoja { padding: 40px; } }
@media (min-width: 1024px) { .promo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }

/* ---------- Revelado al hacer scroll ---------- */
.js .revela { opacity: 0; transform: translateY(26px); }
.js .revela.visto { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .revela, .js .revela, .js .revela.visto { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn, .pinza, .opcion { transition: none; }
}


/* ---------- Menú (todas las páginas) ---------- */
.nav__links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--etiqueta); }
.nav__wa { display: none; }
.nav__menu { display: inline-grid; gap: 5px; width: 44px; height: 44px; place-content: center; padding: 0; background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: 3px 3px 0 var(--marcador); cursor: pointer; }
.nav__menu span { display: block; width: 22px; height: 3px; background: var(--marcador); transition: transform .2s ease, opacity .2s ease; }
.nav.abierto .nav__menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.abierto .nav__menu span:nth-child(2) { opacity: 0; }
.nav.abierto .nav__menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 719px) {
  .nav.abierto .nav__links { display: block; position: absolute; left: 0; right: 0; top: calc(var(--nav-h) - 2px); background: var(--papel); border-bottom: 3px solid var(--marcador); padding: 6px var(--gutter) 14px; box-shadow: 0 12px 0 -6px rgba(23,21,15,.15); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
  .nav.abierto .nav__links ul { flex-direction: column; gap: 0; }
  .nav.abierto .nav__links a { display: block; padding: 14px 0; border-bottom: 2px solid var(--loseta); font-size: 18px; }
  .nav.abierto .nav__links li:last-child a { border-bottom: 0; }
}
@media (min-width: 720px) { .nav__menu { display: none; } .nav__wa { display: inline-flex; } }

/* ---------- Páginas interiores ---------- */
.cabecera { padding: calc(var(--nav-h) + 40px) 0 36px; border-bottom: 3px solid var(--marcador); background: var(--papel); }
.cabecera .rotulo { font-size: clamp(44px, 11vw, 96px); }
.cabecera__sub { font-size: 18px; font-weight: 600; margin: 14px 0 0; }
.cabecera .hero__ctas { margin-top: 22px; }
.pinzas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pinzas .pinza { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pinzas .pinza small { font-family: var(--f-marcador); font-size: 13px; background: var(--etiqueta); padding: 1px 7px; border: 1.5px solid var(--marcador); }
.miga { font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.miga a { padding: 6px 0; display: inline-block; }
.texto h2 { font-family: var(--f-marcador); text-transform: uppercase; font-size: clamp(22px, 6vw, 30px); margin: 34px 0 10px; }
.texto h2:first-child { margin-top: 0; }
.texto .contenedor { max-width: min(100% - 2 * var(--gutter), 70ch); }
.tarjetas { display: grid; gap: 16px; }
.tarjeta { background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: var(--sombra-dura); padding: 22px; }
.tarjeta h3 { font-family: var(--f-marcador); text-transform: uppercase; font-size: 21px; margin: 0 0 8px; }
.tarjeta p, .tarjeta ul { margin: 0; font-size: 16px; }
.tarjeta ul { padding-left: 18px; display: grid; gap: 6px; }
@media (min-width: 720px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tarjetas { grid-template-columns: repeat(4, 1fr); } .tarjetas--dos { grid-template-columns: 1fr 1fr; } }

/* Mini tarjetas (relacionadas, destacadas, grados) */
.minis { display: grid; gap: 14px; }
.mini { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 14px; text-decoration: none; background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: 3px 3px 0 var(--marcador); padding: 10px 14px 10px 10px; transform: rotate(var(--giro, 0deg)); }
.mini:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--marcador); }
.mini__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--c); border: 2px solid var(--marcador); overflow: hidden; }
.mini__media img { width: 100%; height: 100%; object-fit: cover; }
.mini__media b { position: absolute; inset: auto 0 0 0; font-family: var(--f-marcador); font-size: 11px; text-align: center; background: rgba(250,247,240,.92); padding: 2px 4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__nombre { display: block; font-family: var(--f-marcador); text-transform: uppercase; font-size: 17px; line-height: 1.1; }
.mini__datos { display: block; font-size: 14px; color: var(--tinta-suave); margin-top: 4px; }
.mini__precio { font-family: var(--f-marcador); font-size: 20px; background: var(--etiqueta); border: 2px solid var(--marcador); padding: 6px 10px; transform: rotate(-3deg); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .minis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .minis { grid-template-columns: repeat(3, 1fr); } .minis--chicas { grid-template-columns: repeat(2, 1fr); } }

/* Lista de precios */
.lista { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.lista th, .lista td { text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--marcador); vertical-align: top; }
.lista th { font-family: var(--f-marcador); text-transform: uppercase; font-size: 16px; }
.lista td:last-child, .lista th:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.lista td a { font-weight: 600; }
.lista small { display: block; font-size: 13px; }
@media (max-width: 719px) { .lista th:nth-child(3), .lista td:nth-child(3) { display: none; } }

/* Ficha estática de paca */
.hoja-paca { padding: calc(var(--nav-h) + 24px) 0 48px; }
.hoja-paca__grid { display: grid; gap: 24px; }
.hoja-paca__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 3px solid var(--marcador); background: var(--loseta); }
.hoja-paca__media video { width: 100%; height: 100%; object-fit: cover; }
.hoja-paca__media .etiqueta { position: absolute; right: 12px; top: 12px; }
.hoja-paca__texto .ficha__nombre { margin-top: 10px; }
.hoja-paca__def { font-size: 16px; margin: 0 0 18px; }
.hoja-paca__datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 24px; font-size: 16px; font-variant-numeric: tabular-nums; }
.hoja-paca__datos dt { font-weight: 700; }
.hoja-paca__datos dd { margin: 0; }
.hoja-paca .btn--wa { width: 100%; }
@media (min-width: 720px) { .hoja-paca__grid { grid-template-columns: 1fr 1fr; align-items: start; } .hoja-paca .btn--wa { width: auto; } }
@media (min-width: 1024px) { .hoja-paca__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } }

/* Grados */
.grados { display: grid; gap: 28px; }
.grado { border: 3px solid var(--marcador); background: var(--papel-blanco); box-shadow: var(--sombra-dura); }
.grado__banda { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--c); border-bottom: 3px solid var(--marcador); }
.grado--oscuro .grado__banda { color: var(--papel); background: color-mix(in srgb, var(--c) 82%, #000); }
.grado__banda h2 { margin: 0; font-family: var(--f-rotulo); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 8vw, 48px); line-height: 1; letter-spacing: .02em; }
.grado__n { font-family: var(--f-marcador); font-size: 20px; font-weight: 700; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.grado__cuerpo { padding: 18px; }
.grado__def { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.grado .minis { margin-top: 12px; }

/* Contacto (estilo "elige cómo empezar") */
.contacto__grid { display: grid; gap: 28px; }
.sello { display: inline-block; margin-top: 18px; font-family: var(--f-marcador); font-size: 16px; background: var(--papel-blanco); border: 2px solid var(--marcador); padding: 8px 12px; box-shadow: 3px 3px 0 var(--marcador); transform: rotate(1deg); }
.qr { display: grid; justify-items: center; gap: 10px; background: var(--papel-blanco); border: 3px solid var(--marcador); box-shadow: var(--sombra-dura); padding: 18px; max-width: 300px; transform: rotate(-1.2deg); }
.qr__img { width: 200px; height: 200px; }
.qr__cabeza { font-family: var(--f-marcador); text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.qr__pie { font-size: 13px; text-align: center; color: var(--tinta-suave); }
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.canal { position: relative; background: var(--papel-blanco); border: 2px solid var(--marcador); box-shadow: var(--sombra-dura); padding: 20px 20px 20px 72px; transform: rotate(var(--giro, 0deg)); }
.canal:nth-child(odd) { --giro: -.5deg; } .canal:nth-child(even) { --giro: .5deg; }
.canal__n { position: absolute; left: 16px; top: 18px; font-family: var(--f-marcador); font-size: 20px; color: var(--rojo); }
.canal h2 { margin: 0 0 4px; font-family: var(--f-marcador); text-transform: uppercase; font-size: 22px; }
.canal__valor { display: inline-block; font-weight: 700; font-size: 17px; padding: 6px 0; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--etiqueta); }
.canal p { margin: 6px 0 0; font-size: 15px; color: var(--tinta-suave); }
.ubicaciones { display: grid; gap: 16px; }
.ubicacion { border-top: 3px solid var(--marcador); padding-top: 14px; }
.ubicacion h2 { font-family: var(--f-marcador); text-transform: uppercase; font-size: 20px; margin: 0 0 6px; }
.ubicacion p { margin: 0 0 6px; font-size: 16px; }
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.videos figure { margin: 0; position: relative; overflow: hidden; border: 3px solid var(--marcador); background: var(--loseta); }
.videos video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.videos .nota { position: absolute; left: 10px; bottom: 10px; background: var(--etiqueta); border: 2px solid var(--marcador); padding: 6px 10px; font-family: var(--f-marcador); font-size: 14px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--marcador); }
@media (min-width: 720px) {
  .contacto__grid { grid-template-columns: 1.3fr .7fr; align-items: center; }
  .qr { justify-self: end; }
  .canales { grid-template-columns: 1fr 1fr; }
  .ubicaciones { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .videos { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .canales { grid-template-columns: repeat(4, 1fr); } }


/* ---------- Movimiento: el recorrido se siente vivo, nunca pesado ---------- */
.nav { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.nav--oculta { transform: translateY(-100%); }
.nav__avance { position: absolute; left: 0; bottom: -2px; height: 4px; width: 100%; background: var(--etiqueta); transform-origin: left; transform: scaleX(0); z-index: 2; pointer-events: none; }

/* Cinta amarilla que corre: lo que importa, en una frase que pasa */
.cinta { overflow: hidden; background: var(--etiqueta); border-top: 2px solid var(--marcador); border-bottom: 2px solid var(--marcador); transform: rotate(-1deg) scale(1.03); margin: 10px 0 20px; }
.cinta__pista { display: flex; width: max-content; animation: cinta 42s linear infinite; }
.cinta span { font-family: var(--f-marcador); font-size: 15px; white-space: nowrap; padding: 9px 22px; border-right: 2px solid var(--marcador); }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Cabecera de cada página: entra por piezas, de arriba abajo */
.cabecera .hero__tape, .cabecera .rotulo, .cabecera__sub, .cabecera .pinzas, .cabecera .hero__ctas, .cabecera .sello, .hoja-paca .miga { animation: entrar .8s cubic-bezier(.16,1,.3,1) both; }
.cabecera .hero__tape { animation-name: entrar-tape; }
.cabecera .rotulo { animation-delay: .08s; }
.cabecera__sub { animation-delay: .18s; }
.cabecera .pinzas, .cabecera .hero__ctas, .cabecera .sello { animation-delay: .28s; }
.qr { animation: entrar .8s cubic-bezier(.16,1,.3,1) .4s both, flotar 6s ease-in-out 1.4s infinite; }
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes entrar-tape { from { opacity: 0; transform: rotate(-2deg) translateY(-14px); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes flotar { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(-1.2deg) translateY(-6px); } }

/* Tarjetas en cuadrícula: llegan escalonadas */
.js .revela:nth-child(2) { transition-delay: .07s; }
.js .revela:nth-child(3) { transition-delay: .14s; }
.js .revela:nth-child(4) { transition-delay: .21s; }
.js .revela:nth-child(5) { transition-delay: .28s; }
.js .revela:nth-child(6) { transition-delay: .35s; }

/* Etiqueta de precio: se cuelga cuando la tarjeta aparece */
.js .revela.visto .etiqueta { animation: colgar .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes colgar { from { opacity: 0; transform: rotate(10deg) translateY(-12px); } to { opacity: 1; transform: rotate(3deg); } }

/* Pared: la foto respira y el letrero se endereza al tocar */
.paca__media video, .paca__media img, .paca__media .sinvideo { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.paca:hover .paca__media video, .paca:hover .paca__media img, .paca:hover .paca__media .sinvideo { transform: scale(1.04); }
.letrero { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.paca:hover .letrero { transform: rotate(0deg) translateY(-3px); }
.tarjeta, .canal, .ubicacion, .mini { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
.tarjeta:hover, .canal:hover { transform: translate(-2px, -2px) rotate(0deg); box-shadow: 7px 7px 0 var(--marcador); }

/* Calidades: cada banda entra por un lado distinto */
.js .grado.revela { transform: translateX(-28px); }
.js .grado.revela:nth-child(even) { transform: translateX(28px); }
.js .grado.revela.visto { transform: none; }

/* Ficha estática: la foto se destapa como el plástico de la paca */
.js .destapar { clip-path: inset(0 0 100% 0); }
.js .destapar.visto { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* Barra de WhatsApp en móvil: un latido suave de vez en cuando */
.barra-wa .btn { animation: latido 7s ease-in-out 4s infinite; }
@keyframes latido { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.03); } 96% { transform: scale(.99); } }

.pared__control { display: flex; justify-content: flex-end; margin: -4px 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .cinta__pista, .qr, .barra-wa .btn, .cabecera .hero__tape, .cabecera .rotulo, .cabecera__sub, .cabecera .pinzas, .cabecera .hero__ctas, .cabecera .sello, .hoja-paca .miga, .js .revela.visto .etiqueta { animation: none !important; }
  .nav, .letrero, .tarjeta, .canal, .ubicacion, .mini, .paca__media video, .paca__media img, .paca__media .sinvideo { transition: none; }
  .js .destapar { clip-path: none; }
  .js .grado.revela { transform: none; }
}

/* ---------- Grupo de clientes: referencias de quien ya compró ---------- */
.grupo { background: var(--marcador); color: var(--papel); }
.grupo .rotulo { color: var(--papel); }
.grupo .hero__tape { color: var(--marcador); }
.grupo .btn { color: var(--marcador); }
.grupo .btn:not(.btn--wa) { background: var(--papel); }
.grupo__grid { display: grid; gap: 28px; }
.qr--grupo { color: var(--marcador); justify-self: start; }
.canal--grupo { background: var(--etiqueta); }
@media (min-width: 720px) { .grupo__grid { grid-template-columns: 1.3fr .7fr; align-items: center; } .qr--grupo { justify-self: end; } }

/* Barra de WhatsApp: se esconde mientras bajas y vuelve al parar o subir, para no tapar la pared */
.barra-wa { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.barra-wa--oculta { transform: none; } /* ya no se esconde: el CTA siempre a la vista */
@media (prefers-reduced-motion: reduce) { .barra-wa { transition: none; } }


/* ---------- Movimiento, segunda capa: la página respira de principio a fin ---------- */
/* Entrada y salida de página, como una app */
.js body { animation: pagina-entra .55s cubic-bezier(.16,1,.3,1) both; }
.js body.saliendo { animation: pagina-sale .22s ease-in forwards; }
/* Solo opacidad: un transform en <body> rompe position:fixed en iOS Safari (nav y barra de WhatsApp desaparecían) */
@keyframes pagina-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes pagina-sale { to { opacity: 0; } }

/* Hero: el video respira (Ken Burns) y el rótulo entra línea por línea */
.hero__video, .hero__poster { animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }
.hero__tape { animation: sello .7s cubic-bezier(.34,1.56,.64,1) .1s both; }
.hero__rotulo span { display: block; animation: entrar .9s cubic-bezier(.16,1,.3,1) both; }
.hero__rotulo .l1 { animation-delay: .25s; } .hero__rotulo .l2 { animation-delay: .38s; } .hero__rotulo .l3 { animation-delay: .51s; }
.hero__sub { animation: entrar .9s cubic-bezier(.16,1,.3,1) .7s both; }
.hero__ctas { animation: entrar .9s cubic-bezier(.16,1,.3,1) .85s both; }
.cabecera .hero__tape { animation-name: sello; animation-delay: .05s; }
@keyframes sello { from { opacity: 0; transform: rotate(-9deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-1deg) scale(.96); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }

/* Títulos de sección: el marcador amarillo los subraya al llegar */
.js .seccion__cabeza.revela .rotulo { background: linear-gradient(var(--etiqueta), var(--etiqueta)) no-repeat 0 88% / 0% 26%; transition: background-size .9s cubic-bezier(.16,1,.3,1) .25s; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.js .seccion__cabeza.revela.visto .rotulo { background-size: 100% 26%; }

/* Pinzas de filtro: saltan al aparecer */
.filtros .pinza, .pinzas .pinza { animation: pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.filtros .pinza:nth-child(2), .pinzas .pinza:nth-child(2) { animation-delay: .06s; }
.filtros .pinza:nth-child(3), .pinzas .pinza:nth-child(3) { animation-delay: .12s; }
.filtros .pinza:nth-child(4), .pinzas .pinza:nth-child(4) { animation-delay: .18s; }
.filtros .pinza:nth-child(5), .pinzas .pinza:nth-child(5) { animation-delay: .24s; }
.filtros .pinza:nth-child(6), .pinzas .pinza:nth-child(6) { animation-delay: .30s; }
.filtros .pinza:nth-child(7), .pinzas .pinza:nth-child(7) { animation-delay: .36s; }
@keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }

/* Pared: cada letrero se endereza al pasar por el centro de la pantalla (lo mueve app.js con --enderezar) */
.paca { transform: rotate(calc(var(--giro, 0deg) * var(--enderezar, 1))); transition: transform .25s linear; will-change: transform; }
.paca .letrero { transform: rotate(calc(var(--giro-letrero, -1.5deg) * var(--enderezar, 1))); }
.paca:hover .etiqueta { animation: columpio 1.1s ease-in-out; }
@keyframes columpio { 0% { transform: rotate(3deg); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(3deg); } }

/* WhatsApp: el ícono saluda cada tanto */
.btn--wa svg { animation: saludo 6s ease-in-out 2s infinite; transform-origin: 50% 70%; }
@keyframes saludo { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-14deg); } 92% { transform: rotate(12deg); } 95% { transform: rotate(-8deg); } 98% { transform: rotate(4deg); } }

/* Minis entran de lado; bandas de calidad se destapan de izquierda a derecha */
.js .mini.revela { transform: translateX(26px); }
.js .mini.revela.visto { transform: none; }
.js .grado.revela .grado__banda { clip-path: inset(0 100% 0 0); }
.js .grado.revela.visto .grado__banda { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.16,1,.3,1) .15s; }

/* Segunda cinta, en sentido contrario, antes del pie */
.cinta--reversa { transform: rotate(1deg) scale(1.03); margin: 0; border-bottom: 0; }
.cinta--reversa .cinta__pista { animation-direction: reverse; animation-duration: 48s; }

/* Pie: el logo se sacude al pasar */
.pie__logo:hover img { animation: sacudir .6s ease-in-out; }
@keyframes sacudir { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .js body, .hero__video, .hero__poster, .hero__tape, .hero__rotulo span, .hero__sub, .hero__ctas, .filtros .pinza, .pinzas .pinza, .btn--wa svg, .pie__logo:hover img, .paca:hover .etiqueta { animation: none !important; }
  .paca, .paca .letrero { transition: none; }
  .js .seccion__cabeza.revela .rotulo { background-size: 100% 26%; transition: none; }
  .js .mini.revela, .js .grado.revela .grado__banda { transform: none; clip-path: none; }
}
.js .paca.revela.visto { transform: rotate(calc(var(--giro, 0deg) * var(--enderezar, 1))); }

/* ---------- Movimiento, tercera capa: todo entra volando, de lados distintos ---------- */
.js .revela { opacity: 0; transform: translate3d(0, 110px, 0) rotate(2deg); }
.js .revela:nth-child(odd) { transform: translate3d(-80vw, 40px, 0) rotate(-7deg); }
.js .revela:nth-child(even) { transform: translate3d(80vw, 40px, 0) rotate(7deg); }
.js .revela:nth-child(3n) { transform: translate3d(0, 60vh, 0) scale(.7) rotate(-3deg); }
.js .revela:nth-child(5n) { transform: translate3d(-30vw, -50vh, 0) rotate(9deg); }
.js .revela.visto { opacity: 1; transform: none; transition: transform 1.1s cubic-bezier(.22, 1.25, .36, 1), opacity .55s ease; }
.js .paca.revela { transform: translate3d(-90vw, 0, 0) rotate(-12deg); }
.js .paca.revela:nth-child(even) { transform: translate3d(90vw, 0, 0) rotate(12deg); }
.js .paca.revela.visto { transform: rotate(calc(var(--giro, 0deg) * var(--enderezar, 1))); }
.js .seccion__cabeza.revela { transform: translate3d(0, 0, 0) scale(.6); transform-origin: left bottom; }
.js .seccion__cabeza.revela.visto { transform: none; }
.js .hoja-paca__media.revela { transform: translate3d(0, 40vh, 0) scale(.85); }
.js .hoja-paca__media.revela.visto { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revela, .js .paca.revela, .js .seccion__cabeza.revela, .js .hoja-paca__media.revela { opacity: 1; transform: none; transition: none; } }

/* iOS Safari: el cuerpo ya corta el eje X, pero html también debe hacerlo para que las entradas desde los lados no abran scroll lateral */
html { overflow-x: clip; }


/* ---------- Movimiento, cuarta capa: nada se queda quieto ---------- */
/* Pegatinas que flotan al fondo de cada sección, con paralaje al hacer scroll (las pone app.js) */
.seccion, .cabecera, .hoja-paca { position: relative; overflow: hidden; }
.seccion > .contenedor, .cabecera > .contenedor, .hoja-paca > .contenedor { position: relative; z-index: 1; }
.pegatina { position: absolute; z-index: 0; pointer-events: none; will-change: transform; opacity: .6; }
.cabecera .pegatina, .texto .pegatina { opacity: .42; }
.pegatina span { display: inline-block; font-family: var(--f-marcador); font-size: clamp(14px, 3.6vw, 22px); background: var(--etiqueta); border: 2px solid var(--marcador); padding: 6px 12px; box-shadow: 4px 4px 0 var(--marcador); white-space: nowrap; animation: pegatina-flota var(--dur, 10s) ease-in-out var(--ret, 0s) infinite alternate; transform: rotate(var(--rot, -6deg)); }
.pegatina--papel span { background: var(--papel-blanco); }
.pegatina--verde span { background: var(--whatsapp); }
.grupo .pegatina span { background: var(--papel); }
@keyframes pegatina-flota { from { transform: rotate(var(--rot, -6deg)) translateY(0); } to { transform: rotate(calc(var(--rot, -6deg) * -1)) translateY(-26px); } }

/* Letreros y etiquetas cuelgan y se mecen todo el tiempo */
.js .paca.revela.visto .letrero { animation: colgado 4.5s ease-in-out infinite; transform-origin: 50% -10px; }
@keyframes colgado { 0%, 100% { transform: rotate(calc(var(--giro-letrero, -1.5deg) - 1.2deg)); } 50% { transform: rotate(calc(var(--giro-letrero, -1.5deg) + 1.6deg)); } }
.js .revela.visto .etiqueta { animation: colgar .9s cubic-bezier(.34,1.56,.64,1) both, mecer 5s ease-in-out 1s infinite; transform-origin: 50% -8px; }
@keyframes mecer { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(5deg); } }

/* Botones de WhatsApp: destello que pasa cada tanto */
.btn--wa { position: relative; overflow: hidden; }
.btn--wa::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: destello 5s ease-in-out 2.5s infinite; pointer-events: none; }
@keyframes destello { 0%, 70%, 100% { left: -60%; } 85% { left: 130%; } }

/* El rótulo del hero respira; los rótulos de sección vibran al pasar */
.hero__rotulo { animation: respirar 7s ease-in-out 2s infinite; transform-origin: left bottom; }
@keyframes respirar { 0%, 100% { transform: none; } 50% { transform: scale(1.025) rotate(-.6deg); } }
h2.rotulo:hover { animation: vibrar .4s ease-in-out; }
@keyframes vibrar { 0%, 100% { transform: none; } 25% { transform: translateX(-3px) rotate(-1deg); } 75% { transform: translateX(3px) rotate(1deg); } }

/* Pinzas y tarjetas: inclinación con el mouse (escritorio); en táctil las mueve el scroll */
.paca__media { transition: transform .35s cubic-bezier(.16,1,.3,1); transform-style: preserve-3d; }

/* Las minis y los pasos laten muy despacio para no verse muertos */
.js .mini.revela.visto, .js .paso.revela.visto, .js .tarjeta.revela.visto, .js .canal.revela.visto { animation: latir 9s ease-in-out var(--ret, 0s) infinite; }
@keyframes latir { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) rotate(.4deg); } }

@media (prefers-reduced-motion: reduce) {
  .pegatina { display: none; }
  .js .paca.revela.visto .letrero, .js .revela.visto .etiqueta, .btn--wa::after, .hero__rotulo, h2.rotulo:hover, .js .mini.revela.visto, .js .paso.revela.visto, .js .tarjeta.revela.visto, .js .canal.revela.visto { animation: none !important; }
}