/* ============================================================
   MANSO OLIVA — hoja de estilos
   Diseño de referencia: WEB_MANSO 2 FINAL (artboard 1200 × 3479 px)

   Sistema de medidas
   ------------------
   --u equivale a 1px del artboard: escala linealmente hasta
   1200px de viewport y se congela arriba de eso. Así cada valor
   sacado del diseño se escribe tal cual: calc(219.6 * var(--u)).
   Abajo de 900px el layout se rearma con medidas propias.
   ============================================================ */

/* ---------- Tipografías ---------- */

/* Fraunces reemplaza a New Spirit Medium (Adobe Fonts), que no vino
   en el pack del cliente por ser una fuente protegida. Si se licencia,
   alcanza con sumar su @font-face y ponerla primera en --font-serif. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hajime';
  src: url('../fonts/Hajime.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('../fonts/Antonio-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --lima:      #cddf00;
  --verde:     #007438;
  --verde-osc: #31723e;
  --crema:     #f3f1eb;
  --naranja:   #ff7327;
  --naranja-2: #ed7b3e;
  --rosa:      #da5294;

  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-script: 'Hajime', 'Brush Script MT', cursive;
  --font-cond:   'Antonio', 'Arial Narrow', sans-serif;

  --u: min(0.0833333vw, 1px);   /* 1px del artboard de 1200 */
  --maxw: calc(1200 * var(--u));
  --header-h: calc(120 * var(--u));

  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--crema);
  color: var(--verde);
  font-family: var(--font-serif);
  font-variation-settings: 'SOFT' 32, 'WONK' 0, 'opsz' 24;
  font-weight: 500;
  line-height: 1.36;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
/* El padding que trae el navegador por defecto (1px 6px) ensanchaba los
   puntitos del carrusel y los dejaba ovalados en vez de redondos. */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--verde); color: var(--lima);
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  transition: top .2s var(--ease);
}
.skip:focus-visible { top: 0; }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }

/* ============================================================
   HEADER  ·  banda lima de 120px
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lima);
  transition: box-shadow .45s var(--ease);
}
.header--compacto { box-shadow: 0 6px 26px rgba(0,60,25,.13); }

.header__in {
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: var(--header-h);
  transition: min-height .45s var(--ease);
  padding-inline: calc(71.7 * var(--u)) calc(62 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}

.header__logo img {
  height: calc(82.11 * var(--u));
  width: auto;
  transition: transform .4s var(--ease), height .45s var(--ease);
}
.header--compacto .header__in    { min-height: calc(86 * var(--u)); }
.header--compacto .header__logo img { height: calc(58 * var(--u)); }
.header__logo:hover img { transform: rotate(-2deg) scale(1.03); }

.nav { display: flex; align-items: center; gap: calc(28 * var(--u)); }

.nav__list {
  display: flex;
  align-items: center;
  gap: calc(37 * var(--u));
  font-size: calc(17 * var(--u));
}

.nav__list a { position: relative; padding-block: calc(4 * var(--u)); }
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.ig { display: inline-flex; }
.ig img {
  width: calc(40.67 * var(--u));
  transition: transform .35s var(--ease);
}
.ig:hover img { transform: scale(1.12) rotate(-6deg); }

.burger { display: none; width: 34px; height: 26px; padding: 0; position: relative; }
.burger span {
  position: absolute; left: 0; right: 0; height: 3.5px; border-radius: 3px;
  background: var(--verde);
  transition: transform .35s var(--ease), opacity .2s linear, top .35s var(--ease);
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 11px; }
.burger span:nth-child(3) { top: 20px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* ============================================================
   HERO  ·  video a sangre, 1200 × 675
   ============================================================ */
.hero { position: relative; background: var(--crema); overflow: hidden; }

/* la foto marca el alto de la banda y el video se apoya encima */
.hero__media { position: relative; will-change: transform; }

.hero picture { display: block; }
.hero picture img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* el video es 1280x720 y la banda del diseño, 1200x675 */
  object-fit: cover;
  animation: heroIn 1.4s var(--ease) both;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.hero__video.listo { opacity: 1; }
@keyframes heroIn {
  from { transform: scale(1.06); opacity: .35; }
  to   { transform: none; opacity: 1; }
}

/* ============================================================
   MANIFIESTO  ·  banda lima de 345px
   ============================================================ */
.manifiesto {
  position: relative;
  background: var(--lima);
  padding-block: calc(63 * var(--u)) calc(63 * var(--u));
}

.manifiesto__texto {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: calc(385 * var(--u)) calc(250 * var(--u));
  font-size: calc(23 * var(--u));
  line-height: 1.357;
}
.manifiesto__texto span { display: block; }

.manifiesto__rama,
.manifiesto__mano {
  position: absolute;
  left: 50%;
  translate: calc(-600 * var(--u)) 0;      /* origen = borde izq. del artboard */
  pointer-events: none;
}
@supports not (translate: 1px) {
  .manifiesto__rama, .manifiesto__mano { left: 0; }
}

.manifiesto__rama {
  margin-left: calc(76.27 * var(--u));
  top: calc(46.8 * var(--u));
  width: calc(254.53 * var(--u));
}
.manifiesto__mano {
  margin-left: calc(957.03 * var(--u));
  top: calc(-42.1 * var(--u));
  width: calc(278.41 * var(--u));
}

/* ============================================================
   UN TOQUECITO DE MENDOZA  ·  banda verde de 341px
   ============================================================ */
.toquecito {
  position: relative;
  background: var(--verde);
  padding-block: calc(56 * var(--u)) calc(46 * var(--u));
}

.toquecito__titulo {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-right: calc(62 * var(--u));
  color: var(--lima);
  font-size: calc(92 * var(--u));
  line-height: .868;
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: center;
}
/* Cada línea es una ventana: las palabras entran desde abajo.
   El padding + margen negativo dan aire para las colas de la "q"
   sin mover el layout. */
.toquecito__titulo .linea {
  display: block;
  /* clip-path en vez de overflow + padding: recorta igual pero no
     ocupa lugar, así la banda mantiene su alto y las colas de la "q"
     siguen a la vista. */
  clip-path: inset(-0.4em 0 -0.22em 0);
}
.toquecito__titulo .palabra { display: inline-block; }

.toquecito__mapa {
  position: absolute;
  left: 50%;
  translate: calc(-600 * var(--u)) 0;
  margin-left: calc(873.5 * var(--u));
  top: calc(-50.6 * var(--u));
  width: calc(176.66 * var(--u));
}

/* ============================================================
   PRODUCTOS  ·  bloque crema de 957px
   ============================================================ */
.productos { position: relative; background: var(--crema); overflow: hidden; }

.productos__grid {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: calc(53 * var(--u));
  display: grid;
  grid-template-columns: calc(599 * var(--u)) 1fr;
}

/* línea divisoria: x 599, de y 279 a 782 dentro de la sección */
.productos__grid::after {
  content: '';
  position: absolute;
  left: calc(599 * var(--u));
  top: calc(279 * var(--u));
  width: max(1px, calc(0.87 * var(--u)));
  height: calc(503 * var(--u));
  background: var(--verde-osc);
}

.prod {
  display: flex;
  flex-direction: column;
  --pad: calc(64 * var(--u));
}
.prod--chef    { padding-right: var(--pad); align-items: flex-end; }
.prod--cocinar { padding-left:  var(--pad); align-items: flex-start; }

.prod__head { text-align: center; width: calc(337.4 * var(--u)); }

.prod__kicker {
  color: var(--verde-osc);
  font-size: calc(28.7 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.prod__script {
  font-family: var(--font-script);
  font-size: calc(60.9 * var(--u));
  line-height: 1;
  margin-top: calc(-12 * var(--u));
}
.prod--chef    .prod__script { color: var(--naranja); }
.prod--cocinar .prod__script { color: var(--rosa); }

/* elipse dibujada a mano + texto adentro */
.prod__badge {
  position: relative;
  width: calc(332.79 * var(--u));
  aspect-ratio: 332.79 / 96.45;
  margin-top: calc(30 * var(--u));
  display: grid;
  place-items: center;
  font-size: calc(31 * var(--u));
  font-weight: 500;
  line-height: .948;
  text-transform: uppercase;
}
.prod__badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.prod__badge span { position: relative; }
.prod--chef    .prod__badge { color: var(--naranja); }
.prod--cocinar .prod__badge { color: var(--rosa); }

.prod__bloques {
  margin-top: calc(41 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(19.3 * var(--u));
  max-width: calc(335 * var(--u));
}
.prod--chef    .prod__bloques { text-align: right; }
.prod--cocinar .prod__bloques { text-align: left; }

.bloque h4 {
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: 1.29;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.bloque p {
  font-size: calc(17 * var(--u));
  line-height: 1.365;
}

/* botella: la foto ya trae la mancha de color atrás */
.prod__pack {
  position: relative;
  align-self: stretch;
  margin-top: auto;
  padding-top: calc(24 * var(--u));
  height: calc(356 * var(--u));
}
.prod__botella {
  position: absolute;
  bottom: 0;
  width: calc(244 * var(--u));
  height: auto;
  max-width: none;
}
.prod--chef    .prod__botella { left: calc(24 * var(--u)); }
.prod--cocinar .prod__botella { right: calc(48 * var(--u)); }


/* ============================================================
   GALERÍA  ·  las dos fotos de uso a sangre, cerrando Productos
   ============================================================ */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--crema);
  line-height: 0;
  overflow: hidden;
}
.galeria figure { margin: 0; overflow: hidden; }
.galeria picture { display: block; height: 100%; will-change: transform; }
.galeria picture img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.galeria figure:hover picture img { transform: scale(1.04); }

/* ============================================================
   PLACAS  ·  carrusel con los tres key visuals
   ============================================================ */
.placas {
  position: relative;
  background: var(--lima);
  overflow: hidden;
  padding-bottom: calc(46 * var(--u));
}

.placas__track {
  display: flex;
  transition: transform .7s var(--ease);
  will-change: transform;
}

.placa {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  height: calc(668 * var(--u));
}

/* La placa reproduce el layout de las piezas originales (1200 × 668) */
.placa__art { position: absolute; }
.placa__art img {
  width: auto;
  max-width: none;
  animation: flotar 7s ease-in-out infinite;
}

/* cada ilustración conserva su posición y tamaño de la pieza original */
.placa:nth-child(1) .placa__art     { left: calc(84.7 * var(--u));  top: calc(52.3 * var(--u)); }
.placa:nth-child(1) .placa__art img { height: calc(315.3 * var(--u)); }
.placa:nth-child(2) .placa__art     { left: calc(36.1 * var(--u));  top: calc(41 * var(--u)); }
.placa:nth-child(2) .placa__art img { height: calc(355.2 * var(--u)); }
.placa:nth-child(3) .placa__art     { left: calc(115.2 * var(--u)); top: calc(46.4 * var(--u)); }
.placa:nth-child(3) .placa__art img { height: calc(328.2 * var(--u)); }

.placa__titulo {
  position: absolute;
  left: calc(124.1 * var(--u));
  top: calc(392 * var(--u));
  white-space: nowrap;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: calc(95 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}
.placa__titulo span { display: block; }
.placa:nth-child(1) .placa__titulo { left: calc(151 * var(--u)); }
.placa__titulo .naranja { color: var(--naranja-2); }
.placa__titulo .verde   { color: var(--verde-osc); }

.placa__foto {
  position: absolute;
  left: calc(912 * var(--u));
  top: calc(48 * var(--u));
}
.placa__foto img {
  height: calc(585 * var(--u));
  width: auto;
  max-width: none;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.15));
}
.placa__foto--doble { left: calc(882 * var(--u)); }
.placa__foto--doble img { height: calc(561 * var(--u)); }

.placas__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--verde-osc);
}

.placas__flecha {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.placas__flecha svg { width: 22px; height: 22px; }
.placas__flecha:hover { background: rgba(49,114,62,.14); transform: scale(1.08); }

.placas__dots { display: flex; gap: 10px; }
.placas__dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--verde-osc);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.placas__dots button[aria-selected="true"] { background: var(--verde-osc); transform: scale(1.25); }

/* ============================================================
   PELOTERO DE ACEITUNAS
   Las aceitunas descansan en una grilla hexagonal y vuelven a su
   lugar con un resorte; el puntero abre un hueco que deja ver la
   frase. En touch el hueco lo maneja el scroll.
   ============================================================ */
.pelotero {
  position: relative;
  background: var(--verde);
  overflow: hidden;
}

.pelotero__escena {
  position: relative;
  min-height: min(88svh, 720px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.pelotero__cv {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
}
.pelotero__cv:active { cursor: grabbing; }

.pelotero__frase {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-inline: clamp(16px, 2.5vw, 34px);
  max-width: min(92vw, calc(780 * var(--u)));
  pointer-events: none;
}

.pelotero__antetitulo {
  display: block;
  margin-bottom: calc(18 * var(--u));
  color: var(--naranja);
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pelotero__frase p {
  color: #fff;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,45,20,.55),
               0 calc(14 * var(--u)) calc(46 * var(--u)) rgba(0,45,20,.4);
}

.pelotero__pista {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* arriba y no abajo: al sacar la galería, el pelotero quedó pegado al
     footer y las aceitunas que cuelgan de ahí le caían encima */
  top: clamp(18px, 3vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--verde);
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,45,20,.35);
  font-size: clamp(12px, 1.15vw, 15px);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: pistaEntra 1s var(--ease) .8s both;
}
@keyframes pistaEntra {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pelotero__pista--fuera {
  opacity: 0;
  transition: opacity .5s var(--ease);
}


/* ============================================================
   FOOTER  ·  banda lima de 241px
   ============================================================ */
.footer {
  position: relative;
  background: var(--lima);
  padding-block: calc(43.3 * var(--u)) calc(32 * var(--u));
  text-align: center;
}

.footer__aceitunas {
  position: absolute;
  left: 50%;
  top: calc(-107.8 * var(--u));
  width: calc(155.4 * var(--u));
  transform: translateX(-50%);
  animation: flotarCentro 6s ease-in-out infinite;
  pointer-events: none;
}

.footer__logo { display: block; width: fit-content; margin-inline: auto; }
.footer__logo img {
  height: calc(102.13 * var(--u));
  width: auto;
  margin-inline: auto;
  transition: transform .4s var(--ease);
}
.footer__logo:hover img { transform: rotate(2deg) scale(1.03); }

.footer__nav {
  margin-top: calc(26.6 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--u));
  font-size: calc(17 * var(--u));
}
.footer__nav ul { display: flex; gap: calc(37 * var(--u)); }
.footer__nav a { position: relative; padding-block: calc(4 * var(--u)); }
.footer__nav ul a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.footer__nav ul a:hover::after { transform: scaleX(1); }

/* ============================================================
   BOTÓN DE WHATSAPP
   Verde de marca en vez del verde de WhatsApp: el ícono ya se
   reconoce solo y así el botón no le pelea a la paleta.
   ============================================================ */
.wa {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 2vw, 26px);
  bottom: calc(clamp(16px, 2vw, 26px) + env(safe-area-inset-bottom, 0px));

  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--lima);
  box-shadow: 0 10px 26px rgba(0,60,25,.28);

  opacity: 0;
  transform: translateY(18px) scale(.85);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              background .3s var(--ease), box-shadow .3s var(--ease);
}
.wa--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wa__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}
.wa__icono svg { width: 27px; height: 27px; }

/* aro que late para llamar la atención sin ser molesto */
.wa__icono::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--lima);
  opacity: 0;
}
.wa--visible .wa__icono::before { animation: aroWA 3.6s ease-out infinite 1.2s; }
@keyframes aroWA {
  0%       { transform: scale(.72); opacity: .5; }
  35%, 100% { transform: scale(1.12); opacity: 0; }
}

.wa__texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1;
  transition: max-width .45s var(--ease), padding-right .45s var(--ease);
}

.wa:hover, .wa:focus-visible {
  background: var(--verde-osc);
  box-shadow: 0 14px 32px rgba(0,60,25,.34);
}
.wa:hover .wa__texto,
.wa:focus-visible .wa__texto { max-width: 180px; padding-right: 12px; }
.wa:active { transform: scale(.96); }

@media (hover: none) {
  .wa__texto { display: none; }
}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-2deg); }
}
@keyframes flotarCentro {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(-10px) rotate(-3deg); }
}

.flota { animation: flotar 8s ease-in-out infinite; }
.flota--lento { animation-duration: 11s; animation-direction: alternate-reverse; }

.js .reveal { opacity: 0; transform: translateY(26px); }   /* sin JS el contenido se ve igual */
.reveal.visible {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* --- Entradas escalonadas ------------------------------------ */
@keyframes revelar {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revelarSuave {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.js .manifiesto__texto span,
.js .prod__head > *,
.js .prod__bloques .bloque { opacity: 0; }

.manifiesto__texto.visible span,
.prod.visible .prod__head > *,
.prod.visible .prod__bloques .bloque {
  animation: revelar .85s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Título: palabra por palabra, subiendo desde el borde de la línea */
@keyframes subirPalabra {
  from { transform: translateY(140%) rotate(2.5deg); }
  to   { transform: none; }
}
.js .toquecito__titulo .palabra { transform: translateY(140%); }
.toquecito__titulo.visible .palabra {
  animation: subirPalabra 1s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 105ms);
}

.prod.visible .prod__head > * { animation-name: revelarSuave; }

/* el bloque padre ya no se mueve: se mueven los hijos */
.js .manifiesto__texto.reveal,
.js .toquecito__titulo.reveal { opacity: 1; transform: none; }

/* --- Microinteracciones de producto --------------------------- */
.prod__pack { cursor: default; }
.prod__botella { transition: transform .6s var(--ease); }
.prod--chef    .prod__pack:hover .prod__botella { transform: translateY(calc(-14 * var(--u))) rotate(-2deg) scale(1.03); }
.prod--cocinar .prod__pack:hover .prod__botella { transform: translateY(calc(-14 * var(--u))) rotate(2deg)  scale(1.03); }

.prod__badge img { transition: transform .5s var(--ease); }
.prod__badge:hover img { transform: rotate(-2.5deg) scale(1.045); }
.prod__badge span { transition: transform .5s var(--ease); }
.prod__badge:hover span { transform: scale(1.03); }

.prod__script { transition: transform .6s var(--ease); }
.prod__head:hover .prod__script { transform: rotate(-1.5deg) scale(1.02); }

/* --- Placas: el contenido entra con la diapositiva ------------- */
.placa[aria-hidden="false"] .placa__art,
.placa[aria-hidden="false"] .placa__titulo span,
.placa[aria-hidden="false"] .placa__foto {
  animation: revelar .8s var(--ease) both;
}
.placa[aria-hidden="false"] .placa__titulo span:nth-child(1) { animation-delay: .1s; }
.placa[aria-hidden="false"] .placa__titulo span:nth-child(2) { animation-delay: .18s; }
.placa[aria-hidden="false"] .placa__foto { animation-delay: .12s; animation-name: revelarSuave; }

.placa__foto img { transition: transform .6s var(--ease); }
.placa__foto:hover img { transform: translateY(calc(-14 * var(--u))) rotate(-1.5deg); }

.placas { cursor: grab; }
.placas--agarrando { cursor: grabbing; }
.placas--agarrando .placas__track { transition: none; }

/* --- Galería ---------------------------------------------------- */

/* --- Footer ----------------------------------------------------- */
.footer__aceitunas { transition: transform .5s var(--ease); }

/* ============================================================
   RESPONSIVE  ·  abajo de 900px el layout se rearma
   ============================================================ */
@media (max-width: 900px) {
  :root { --header-h: 76px; }

  .header__in { min-height: 76px; padding-inline: 20px; gap: 16px; }
  .header__logo img { height: 46px; }
  .nav { gap: 20px; }
  .nav__list { font-size: 16px; gap: 24px; }
  .nav__list a { padding-block: 4px; }
  .ig img { width: 30px; }

  /* El header compacto estaba escrito en unidades del artboard y en el
     celular daba 27px de alto con el logo de 18px. Acá va en píxeles. */
  .header--compacto .header__in       { min-height: 62px; }
  .header--compacto .header__logo img { height: 36px; }

  /* Zonas de toque: los íconos se ven igual, lo que crece es el área
     sensible al dedo (mínimo 44px). */
  .ig { padding: 8px; margin: -8px; }
  .burger::before { content: ''; position: absolute; inset: -10px -8px; }

  /* Hero: la foto original es muy panorámica; en pantallas chicas se
     recorta de los costados (las botellas están centradas) para que el
     producto entre más grande. */
  .hero picture img { aspect-ratio: 3 / 2; }

  /* Manifiesto */
  .manifiesto { padding: 118px 22px 56px; }
  .manifiesto__texto {
    padding-inline: 0;
    font-size: clamp(16px, 2.6vw, 21px);
    line-height: 1.45;
    text-align: center;
    max-width: 620px;
  }
  .manifiesto__rama,
  .manifiesto__mano { translate: none; left: auto; }
  .manifiesto__rama { left: 16px; top: -26px; width: clamp(96px, 15vw, 130px); }
  .manifiesto__mano { right: 8px; top: -30px; width: clamp(130px, 22vw, 200px); }

  /* Toquecito */
  .toquecito { padding: 78px 22px 58px; }
  .toquecito__titulo {
    padding-right: 0;
    font-size: clamp(36px, 8vw, 68px);
    line-height: .98;
  }
  .toquecito__mapa {
    translate: none;
    left: auto;
    right: 5%;
    margin-left: 0;
    top: -40px;
    width: clamp(84px, 12vw, 120px);
  }

  /* Productos */
  .productos__grid { grid-template-columns: 1fr; padding-top: 48px; }
  .productos__grid::after { display: none; }
  .prod { --pad: 22px; align-items: center; padding-inline: 22px; }
  .prod--cocinar {
    border-top: 1.5px solid var(--verde-osc);
    padding-top: 52px;
    margin-top: 8px;
  }
  .prod__head { width: min(320px, 88vw); }
  .prod__kicker { font-size: clamp(22px, 4.4vw, 28px); }
  .prod__script { font-size: clamp(44px, 9vw, 60px); margin-top: -10px; }
  .prod__badge { width: min(300px, 84vw); margin-top: 14px; font-size: clamp(24px, 4.6vw, 30px); }
  .prod__bloques {
    margin-top: 36px;
    gap: 24px;
    max-width: 440px;
    text-align: center !important;
  }
  .bloque h4 { font-size: clamp(18px, 3.2vw, 21px); }
  .bloque p  { font-size: clamp(16px, 2.6vw, 17px); }

  .prod__pack { height: auto; width: 100%; padding-top: 24px; }
  .prod__botella {
    position: static;
    width: min(300px, 78vw);
    margin-inline: auto;
  }
  .prod--chef .prod__botella,
  .prod--cocinar .prod__botella { left: auto; right: auto; }
  .prod--chef .prod__pack:hover .prod__botella,
  .prod--cocinar .prod__pack:hover .prod__botella { transform: none; }

  /* Placas */
  .placas { padding-bottom: 34px; }
  .placa {
    height: auto;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding: 44px 22px 26px;
  }
  .placa__art,
  .placa__titulo,
  .placa__foto { position: static; left: auto; top: auto; }
  .placa__art img { height: auto; width: clamp(160px, 40vw, 280px); }
  .placa__titulo { font-size: clamp(30px, 8.4vw, 62px); line-height: 1.02; white-space: normal; }
  .placa__foto img,
  .placa__foto--doble img { height: clamp(210px, 42vw, 320px); }

  /* Los puntitos del carrusel, más grandes y más separados, para que
     cada uno tenga su propia zona de toque sin pisar al de al lado. */
  .placas__dots { gap: 16px; }
  .placas__dots button { width: 14px; height: 14px; position: relative; }
  .placas__dots button::before { content: ''; position: absolute; inset: -8px; }

  /* Pelotero */
  .pelotero__escena { min-height: min(76svh, 560px); }
  /* --u encoge en mobile: el tope tiene que ser en px, si no la frase
     queda angosta y "Todo empieza con" se parte en dos líneas */
  .pelotero__frase { padding-inline: 16px; max-width: min(92vw, 460px); }
  .pelotero__frase p { font-size: clamp(28px, 7.4vw, 42px); }
  .pelotero__antetitulo { margin-bottom: 10px; font-size: 12px; }
  .pelotero__pista { padding: 8px 14px; font-size: 12px; max-width: 88vw; }

  /* Galería */
  .galeria { grid-template-columns: 1fr; }
  .galeria picture img { aspect-ratio: 4 / 3; }

  /* Footer */
  .footer { padding: 40px 22px 48px; }
  .footer__aceitunas { top: -56px; width: clamp(84px, 14vw, 120px); }
  .footer__logo img { height: clamp(62px, 11vw, 90px); }
  .footer__nav { margin-top: 26px; font-size: 16px; gap: 22px; }
  .footer__nav ul { gap: 26px; }
}

@media (max-width: 640px) {
  /* el recorte vertical ya viene con la proporción justa */
  .hero picture img {
    aspect-ratio: auto;
    height: min(62vh, 520px);
    height: min(62svh, 520px);
    object-position: center 42%;
  }

  .header__in { padding-inline: 18px; }
  .burger { display: block; }
  .nav { gap: 14px; }

  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--lima);
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--ease);
    box-shadow: 0 16px 24px rgba(0,0,0,.08);
  }
  .nav__list.abierto { max-height: 260px; }
  .nav__list li { width: 100%; text-align: center; }
  .nav__list a { display: block; padding: 16px 0; }
  .nav__list a::after { display: none; }

  .manifiesto { padding-top: 104px; }
  .manifiesto__texto span { display: inline; }

  .footer__nav { flex-direction: column; gap: 20px; }
  .placas__nav { gap: 12px; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .header, .placas__nav, .burger { display: none; }
  body { background: #fff; }
}