/* Fiona Navidad · Primalac Ultimate 3 — Figtree = sustituto temporal de Universal Sans (450→500, 750→800) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../assets/fonts/figtree-latin.woff2") format("woff2"); }
:root {
  --navy: #1b1c6e;
  --navy-dark: #10114a;
  --gold-light: #f9cc85;
  --cream: #fff7ea;
  --cream-2: #f6e7cf;
  --line: #eadfcb;
  --brown: #7a6556;
  --gold-grad: linear-gradient(180deg, #f0cf86 0%, #c99a3b 55%, #a97a26 100%);
  --gold-band: linear-gradient(90deg, #c59b57 0%, #ad8044 35%, #f9cc85 70%, #a4763d 100%);
  --header-h: 122px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  color: var(--navy-dark);
  background: #fff;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong, b { font-weight: 800; }
a { color: inherit; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #c99a3b; outline-offset: 3px; border-radius: 6px; }
.gold { color: var(--gold-light); }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.m-only { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.skip:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; border: 0;
  font-size: 16px; font-weight: 800; line-height: normal; color: #fff; text-decoration: none; white-space: nowrap;
  transition: box-shadow .2s, background .2s, border-color .2s, transform .2s;
}
.btn img { width: 20px; height: 20px; }
.btn--sm { padding: 12px 22px; }
.btn--block { width: 100%; }
.btn--gold { background: var(--gold-grad); box-shadow: 0 10px 14px rgba(169, 122, 38, .35); }
.btn--gold:hover { background: linear-gradient(180deg, #f7db99 0%, #d9ab4a 55%, #b8872e 100%); box-shadow: 0 14px 17px rgba(169, 122, 38, .5); }
.btn--gold:active { background: linear-gradient(180deg, #e0bf75 0%, #b88a30 55%, #94691f 100%); box-shadow: 0 4px 6px rgba(169, 122, 38, .3); }
.btn--navy { background: var(--navy); }
.btn--navy:hover { background: #292b8f; box-shadow: 0 12px 14px rgba(27, 28, 110, .4); }
.btn--navy:active { background: #121352; box-shadow: 0 4px 5px rgba(27, 28, 110, .25); }
.btn--ghost { background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .6); }
.btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .95); }
.btn--ghost:active { background: rgba(255, 255, 255, .24); border-color: #fff; }

/* ---------- Header fijo ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }
.ribbon {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 24px; background: var(--cream-2);
  color: var(--navy); font-size: 14px; font-weight: 800; text-align: center;
}
.ribbon img { width: 18px; flex: none; }
.bar { position: relative; z-index: 2; background: var(--navy-dark); box-shadow: 0 6px 10px rgba(0, 0, 0, .18); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.bar__logo img { width: 170px; height: 43px; object-fit: contain; }
.dnav { display: flex; gap: 36px; }
.dnav a { color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 800; text-decoration: none; }
.dnav a:hover { color: #fff; }
.bar__end { display: flex; align-items: center; gap: 28px; }
.bar__pharmalys { width: 120px; height: 25px; object-fit: contain; }
.menu-toggle, .mnav, .mnav-backdrop { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #2b1a12; color: #fff; min-height: 760px; }
.hero__media { position: absolute; inset: 0 0 auto; height: 760px; animation: kb-in 2.6s var(--ease-out) both, kb-loop 57.4s ease-in-out 2.6s infinite; }
/* Encuadre anclado abajo: en pantallas anchas la escena se agranda y así no se cortan las patas de Fiona. */
.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero__overlay {
  position: absolute; inset: 0 0 auto; height: 760px;
  /* Velo de lectura ligado a la columna de texto (centro ± px), no al % del ancho; luz cálida detrás de Fiona para separarla del fondo. */
  background: radial-gradient(ellipse 22% 42% at 69% 60%, rgba(255, 214, 160, .22), rgba(255, 214, 160, 0) 70%),
              linear-gradient(180deg, rgba(30, 17, 9, 0) 70%, rgba(30, 17, 9, .45) 100%),
              linear-gradient(90deg, rgba(30, 17, 9, .88) 0%, rgba(30, 17, 9, .55) calc(50% - 130px), rgba(30, 17, 9, 0) calc(50% + 110px));
}
.luces { position: absolute; inset: 0; overflow: hidden; }
/* Las luces se posicionan sobre el marco de 1512 px del diseño (x en %, y en px) */
.luz {
  position: absolute; width: 24px; height: auto;
  left: calc(var(--x) * 100% / 1512 - 4px); top: calc(var(--y) * 1px - 4px);
  opacity: 0; animation: twinkle calc(var(--h) * 2) ease-in-out var(--d) infinite;
}
.luz--19 { width: 27px; }
.luz--22 { width: 30px; }
.destello {
  position: absolute; width: 62px; left: calc(1189 * 100% / 1512 - 9px); top: 3px;
  animation: destello 4s ease-in-out .8s infinite both, spin 240s linear infinite;
}
.hero__copy { position: relative; min-height: 760px; padding-block: 134px 60px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  font-size: 14px; font-weight: 800;
}
.pill img { width: 16px; }
.hero__title { width: 720px; max-width: 100%; font-size: 81px; line-height: 1.02; letter-spacing: -1.62px; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.hero__title .w { display: inline-block; animation: word-in .343s cubic-bezier(0, 0, .58, 1) calc(.35s + var(--i) * .1714s) both; }
.oferta { display: flex; flex-direction: column; gap: 18px; }
.oferta__txt { width: 560px; max-width: 100%; font-size: 26px; line-height: 1.32; font-weight: 800; }
.sello { display: flex; align-items: center; gap: 12px; font-size: 38px; font-weight: 800; }
.sello__gift { width: 34px; animation: wiggle 6s ease-in-out 3s infinite; }
.hero__ctas { display: flex; gap: 16px; padding-top: 10px; flex-wrap: wrap; }
/* relativo al contenedor de 1200 px: a 1512 px queda a 36 px del borde, como en el diseño */
/* Las latas acompañan a la escena (que escala con el ancho) para quedar junto a Fiona como en el Figma, sin salirse de la pantalla. */
.hero__kv { position: absolute; left: min(calc(50% + max(32vw, 432px)), calc(50% + 50vw - 248px)); bottom: 40px; width: max-content; }
.latas { display: flex; }
.lata { width: 150px; height: 226px; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }
.lata--1 { margin-right: -60px; animation: slide-in .9s var(--ease-out) 1s both; }
.lata--2 { animation: slide-in .9s var(--ease-out) 1.12s both; }
.anim-drop { animation: drop-in .7s var(--ease-out) .15s both; }
.anim-up { animation: up-in .7s var(--ease-out) 1.15s both; }
.anim-up--late { animation-delay: 1.65s; }
.anim-pop { animation: pop-in .85s cubic-bezier(.34, 1.56, .64, 1) 1.35s both; }

/* ---------- Claim lactancia ---------- */
.claim { background: var(--navy-dark); color: #fff; padding-block: 40px; }
.claim__inner { display: flex; align-items: center; gap: 32px; }
.claim__icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gold-band); }
.claim__icon img { width: 38px; }
.claim p { font-size: 24px; line-height: 1.35; font-weight: 800; }

/* ---------- Encabezados de sección ---------- */
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sec-head h2 { max-width: 900px; font-size: 58px; line-height: 1.06; color: var(--navy); }
.sec-head p { max-width: 760px; font-size: 20px; line-height: 1.5; color: var(--brown); }

/* ---------- Mecánica ---------- */
.mecanica { background: var(--cream); padding-block: 88px 112px; }
.mecanica .wrap { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.ecuacion { display: flex; align-items: center; gap: 20px; width: 100%; }
.opcion {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 28px 32px; background: #fff; border-radius: 28px; box-shadow: 0 16px 40px rgba(122, 82, 22, .12); text-align: center;
}
.opcion__visual {
  position: relative; width: 100%; height: 240px; border-radius: 20px; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(180deg, #fff7ea, #f3e2c6);
}
.opcion__txt { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.duo { width: 249px; height: 186px; object-fit: contain; }
.par { display: flex; }
.par img { width: 123px; height: 186px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(122, 82, 22, .3)); }
.par img + img { margin-left: -34px; }
.badge { padding: 5px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }
.badge--big { padding: 8px 20px; font-size: 18px; letter-spacing: 1.8px; }
.opcion h3 { width: min(290px, 100% + 24px); font-size: 24px; line-height: 1.18; color: var(--navy); }
.opcion--regalo { border: 2px solid rgba(201, 154, 59, .8); }
.opcion--regalo .opcion__visual { background: linear-gradient(180deg, #3a2418, #5a3a26); }
.opcion--regalo h3 { font-size: 34px; line-height: 1.1; }
.opcion__desc { max-width: 280px; font-size: 15px; line-height: 1.45; color: var(--brown); }
.copo { position: absolute; left: 16px; top: 16px; width: 40px; animation: spin 180s linear infinite; }
.peluche { position: absolute; top: 6px; left: 50%; margin-left: -90px; width: 180px; height: 238px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .4)); animation: bob 6s ease-in-out infinite, sway 10s ease-in-out infinite; }
.op { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); color: #fff; font-size: 34px; font-weight: 800; }
.op--navy { background: var(--navy); }
.op--gold { background: var(--gold-grad); }
.op__right { width: 28px; animation: nudge-x 2.5s ease-in-out infinite; }
.op__down { display: none; width: 22px; animation: nudge-y 2.5s ease-in-out infinite; }
.leyenda {
  display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 18px;
  background: var(--navy); color: #fff; font-size: 16px; font-weight: 800;
}
.leyenda img { width: 24px; flex: none; }

/* ---------- Conoce a Fiona ---------- */
.conoce { position: relative; overflow: hidden; background: var(--navy-dark); color: #fff; }
.conoce__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: breathe 60s ease-in-out infinite; }
.conoce__overlay { position: absolute; inset: 0 auto 0 0; width: min(900px, 100%); background: linear-gradient(90deg, rgba(11, 12, 61, .85), rgba(11, 12, 61, 0)); }
.particulas { position: absolute; inset: 0; pointer-events: none; }
.pt { position: absolute; top: 900px; left: calc(var(--x) * 100% / 1512); animation: rise var(--dur) linear var(--dl) infinite; --rise: -980px; }
.pt img { animation: sway-x 4s ease-in-out infinite alternate; }
.conoce__inner { position: relative; height: 860px; }
.conoce__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 212px; max-width: 600px; }
.conoce h2 { font-size: 72px; line-height: 1.04; letter-spacing: -1.08px; }
.conoce__lead { max-width: 540px; font-size: 21px; line-height: 1.5; color: #e6e4f5; }
.conoce__note { font-size: 13px; color: rgba(255, 255, 255, .6); }
.conoce__visual { position: absolute; left: 676px; top: 110px; width: 640px; height: 705px; }
.halo { position: absolute; inset: 0 0 auto; width: 640px; animation: halo 6s ease-in-out infinite; }
.sombra { position: absolute; left: 40px; top: 615px; width: 560px; animation: sombra 6s ease-in-out infinite; }
.fiona { position: absolute; left: 72px; top: 10px; width: 496px; height: 660px; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); animation: bob-lg 6s ease-in-out infinite, sway-sm 12s ease-in-out infinite; }
.sello-gratis {
  position: absolute; left: 494px; top: -2px; width: 150px; height: 150px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--gold-band); border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  font-weight: 800; line-height: normal; rotate: 10deg;
  animation: sello-rot 6s ease-in-out -4.5s infinite, sello-pulse 3s ease-in-out infinite;
}
.sello-gratis span { font-size: 32px; }
.sello-gratis small { font-size: 15px; color: var(--navy-dark); }

/* ---------- Vigencia y puntos de venta ---------- */
.vigencia { background: var(--cream); padding-block: 112px; }
.vigencia .wrap { display: flex; flex-direction: column; gap: 56px; }
.vig-card { display: flex; background: #fff; border: 1.5px solid #eadfcf; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 48px rgba(164, 118, 61, .12); }
.vig-card__fecha { flex: none; width: 420px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 52px; background: linear-gradient(90deg, var(--navy), var(--navy-dark)); }
.filete { width: 48px; height: 4px; border-radius: 2px; background: var(--gold-band); }
.vig-card__big { font-size: 54px; line-height: 1.04; font-weight: 800; color: var(--gold-light); }
.vig-card__sub { font-size: 18px; line-height: 1.4; color: #d7d8f5; }
.vig-card__cadenas { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 52px 56px; }
.vig-card__cadenas h3 { font-size: 30px; line-height: 1.15; }
.vig-card__cadenas > p { font-size: 17px; line-height: 1.5; color: var(--brown); }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.logos li { display: grid; place-items: center; height: 76px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.logos img { max-width: 75%; object-fit: contain; }

.listado { display: flex; flex-direction: column; gap: 24px; padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 16px 24px rgba(16, 17, 74, .08); }
.listado__head { display: flex; align-items: center; gap: 32px; }
.listado__head > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.listado__head h3 { font-size: 34px; color: var(--navy); }
.listado__head > div p { font-size: 17px; color: var(--brown); }
.aviso { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 14px; border-radius: 999px; background: #fbf0d9; font-size: 14px; font-weight: 800; }
.aviso img { width: 18px; flex: none; }
.buscador { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px 0 18px; background: var(--cream); border: 1.5px solid var(--line); border-radius: 16px; }
.buscador:focus-within { border-color: #c99a3b; }
.buscador > img { width: 22px; flex: none; }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 800; color: var(--navy-dark); outline: none; }
.buscador input::placeholder { font-weight: 500; color: var(--brown); opacity: 1; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador__clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--line); }
.buscador__clear[hidden] { display: none; }
.chips-wrap { position: relative; }
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips__label { font-size: 14px; color: var(--brown); }
.chip { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 15px; font-weight: 800; white-space: nowrap; }
.chip:hover { border-color: #c99a3b; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.resultados { display: flex; flex-direction: column; gap: 12px; }
.resultados__head { display: flex; align-items: center; justify-content: space-between; }
.resultados__title { font-size: 18px; font-weight: 800; }
.resultados__orden { font-size: 13px; color: var(--brown); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; }
.tabla th, .tabla td { padding: 16px 0 16px 16px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.tabla tr > :first-child { padding-left: 20px; width: 206px; }
.tabla tr > :last-child { padding-right: 20px; width: 150px; }
.tabla tbody th { width: 266px; font-size: 16px; }
.tabla td address { color: var(--brown); }
.tabla .ciudad { font-weight: 800; }
.tabla thead th { padding-block: 12px; border-top: 0; background: var(--cream); font-size: 13px; color: var(--brown); }
.tabla tbody tr:first-child > * { border-top: 0; }
.tabla tr[hidden] { display: none; }
.cadena { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--navy); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cadena::before { content: ""; width: 7px; height: 7px; flex: none; background: url("../assets/dot-cadena.svg") no-repeat center / contain; }
.ver-mas { padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 800; }
.ver-mas:hover { border-color: #c99a3b; }
.ver-mas[hidden], .vacio[hidden], .tabla[hidden] { display: none !important; }
.vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; border-radius: 16px; background: var(--cream); text-align: center; font-size: 14px; color: var(--brown); }
.vacio__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.vacio__title { font-size: 20px; font-weight: 800; color: var(--navy-dark); }
.vacio__btn { padding: 10px 18px; border: 1.5px solid var(--navy); border-radius: 12px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 800; }
.nota { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--brown); }
.nota img { width: 18px; flex: none; }

/* ---------- Términos y Condiciones ---------- */
.terminos { background: #fff; padding-block: 112px; }
.terminos .wrap { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.terminos h2 { font-size: 58px; line-height: 1.06; color: var(--navy); text-align: center; }
.acordeon { width: min(900px, 100%); display: flex; flex-direction: column; gap: 12px; }
.acordeon details { border: 1px solid rgba(201, 154, 59, .25); border-radius: 18px; padding: 22px 28px; background: #fff; transition: border-color .2s; }
.acordeon details[open] { border-color: rgba(201, 154, 59, .7); }
.acordeon summary { display: flex; align-items: center; gap: 16px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 800; color: var(--navy); white-space: pre-wrap; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary span { flex: 1; }
.acordeon summary i {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-2) url("../assets/icon-plus-navy.svg") no-repeat center / 18px;
  transition: background-color .25s, transform .25s;
}
.acordeon details[open] summary i { background: var(--navy) url("../assets/icon-minus-white.svg") no-repeat center / 18px; transform: rotate(180deg); }
.acordeon details p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #4a3a30; }
.acordeon details a { color: var(--navy); font-weight: 800; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: #fff; padding-block: 64px 48px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 28px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer__logos { display: flex; align-items: center; gap: 24px; }
.footer__logos img:first-child { width: 150px; height: 38px; object-fit: contain; }
.footer__logos img:last-child { width: 120px; height: 25px; object-fit: contain; }
.footer__nav { display: flex; gap: 28px; }
.footer__nav a { font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, .8); text-decoration: none; }
.footer__nav a:hover { color: #fff; text-decoration: underline; }
.footer__claim { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-size: 16px; font-weight: 800; }
.footer__claim img { width: 22px; flex: none; }
.footer__legales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.footer__copy { font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ---------- Animaciones (recreadas de Figma, línea de tiempo 60 s) ---------- */
@keyframes kb-in { from { scale: 1.08; } to { scale: 1; } }
@keyframes kb-loop { 50% { scale: 1.04; } }
@keyframes twinkle { 0%, 100% { opacity: 0; scale: .7; } 50% { opacity: 1; scale: 1.1; } }
@keyframes destello { 0%, 100% { opacity: .3; scale: .75; } 50% { opacity: 1; scale: 1.1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes word-in { from { opacity: 0; translate: 0 24px; filter: blur(14px); } }
@keyframes drop-in { from { opacity: 0; translate: 0 -14px; } }
@keyframes up-in { from { opacity: 0; translate: 0 16px; } }
@keyframes pop-in { from { opacity: 0; scale: .9; } }
@keyframes slide-in { from { opacity: 0; translate: 90px 0; } }
@keyframes wiggle { 0%, 19.5%, 100% { rotate: 0deg; } 3.3% { rotate: -12deg; } 7.2% { rotate: 10deg; } 11.1% { rotate: -7deg; } 15% { rotate: 4deg; } }
@keyframes nudge-x { 50% { translate: 5px 0; } }
@keyframes nudge-y { 50% { translate: 0 5px; } }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
@keyframes breathe { 50% { scale: 1.06; } }
@keyframes rise { to { translate: 0 var(--rise); } }
@keyframes sway-x { from { translate: calc(var(--a, 12px) * -1) 0; } to { translate: var(--a, 12px) 0; } }
@keyframes halo { 50% { opacity: .72; scale: 1.06; } }
@keyframes sombra { 50% { opacity: .7; scale: .88 1; } }
@keyframes bob-lg { 50% { translate: 0 -12px; } }
@keyframes sway-sm { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
@keyframes sello-rot { 0%, 100% { rotate: 6deg; } 50% { rotate: 14deg; } }
@keyframes sello-pulse { 50% { scale: 1.05; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .luz { opacity: 1; }
}

/* ---------- Mobile (diseño 390 px) ---------- */
@media (max-width: 1023px) {
  :root { --header-h: 105px; }
  .wrap { width: min(600px, 100% - 48px); }
  .d-only { display: none; }
  .m-only { display: inline; }

  .ribbon { gap: 10px; padding: 10px 20px; justify-content: flex-start; text-align: left; font-size: 11px; line-height: 1.4; }
  .ribbon img { width: 16px; }
  .bar__inner { width: auto; padding: 14px 20px; }
  .bar__logo img { width: 120px; height: 30px; }
  .dnav { display: none; }
  .bar__end { gap: 14px; }
  .bar__pharmalys { width: 88px; height: 18px; }
  .menu-toggle { display: grid; width: 26px; height: 26px; padding: 0; border: 0; background: none; }
  .menu-toggle img { grid-area: 1 / 1; width: 26px; transition: opacity .2s, rotate .25s; }
  .menu-toggle__close { opacity: 0; rotate: -90deg; }
  .is-open .menu-toggle__open { opacity: 0; rotate: 90deg; }
  .is-open .menu-toggle__close { opacity: 1; rotate: 0deg; }
  .mnav-backdrop { display: block; position: fixed; inset: 0; z-index: 0; background: rgba(5, 5, 20, .62); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .mnav {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
    padding: 4px 24px 28px; background: var(--navy-dark); border-radius: 0 0 24px 24px; box-shadow: 0 18px 36px rgba(0, 0, 0, .4);
    translate: 0 -110%; visibility: hidden; transition: translate .35s var(--ease-out), visibility .35s;
  }
  .is-open .mnav { translate: 0 0; visibility: visible; }
  .is-open .mnav-backdrop { opacity: 1; visibility: visible; }
  .mnav > a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 20px; font-weight: 800; text-decoration: none; }
  .mnav > a img { width: 20px; }
  .mnav__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 24px; }
  .mnav__cta p { font-size: 13px; color: rgba(240, 207, 135, .8); text-align: center; }

  /* Hero */
  .hero { min-height: 0; background: #1e1109; }
  .hero__media { height: 624px; }
  .hero__bg { object-position: 50% 50%; }
  .hero__overlay { height: 663px; background: linear-gradient(180deg, rgba(30, 17, 9, .92) 0%, rgba(30, 17, 9, .35) 22%, rgba(30, 17, 9, 0) 45%, rgba(30, 17, 9, .1) 72%, #1e1109 86%); }
  .luz { display: none; width: 17px; left: calc(var(--mx) * 100% / 390 - 3px); top: calc(var(--my) * 1px - 3px); }
  .luz.m { display: block; }
  .luz--19 { width: 19px; }
  .luz--22 { width: 21px; }
  .destello { display: none; }
  .hero__copy { min-height: 0; align-items: center; gap: 14px; padding-block: 32px 40px; text-align: center; }
  .pill { gap: 6px; padding: 7px 14px; font-size: 13px; }
  .pill img { width: 14px; }
  .hero__title { width: auto; font-size: 47px; line-height: 1; letter-spacing: 0; text-shadow: 0 3px 18px rgba(0, 0, 0, .4); }
  .hero__kv { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 330px; }
  .latas { position: absolute; right: -6px; bottom: 6px; }
  .lata { width: 70px; height: 106px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); }
  .lata--1 { margin-right: -28px; }
  .oferta { align-items: center; gap: 12px; }
  .oferta__txt { width: 342px; font-size: 19px; line-height: 1.35; }
  .sello { gap: 10px; font-size: 27px; }
  .sello__gift { width: 24px; }
  .hero__ctas { flex-direction: column; gap: 14px; width: 100%; padding-top: 0; }
  .hero__ctas .btn { width: 100%; }

  /* Claim */
  .claim { padding-block: 40px; }
  .claim__inner { flex-direction: column; gap: 24px; text-align: center; }
  .claim p { font-size: 18px; }

  .sec-head { gap: 10px; }
  .sec-head h2 { font-size: 36px; line-height: 1.08; }
  .sec-head p { font-size: 16px; }

  /* Mecánica */
  .mecanica { padding-block: 56px 64px; }
  .mecanica .wrap { gap: 16px; }
  .ecuacion { flex-direction: column; gap: 16px; }
  .opcion { flex: none; width: 100%; flex-direction: row; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 24px; box-shadow: 0 10px 28px rgba(122, 82, 22, .12); text-align: left; }
  .opcion__visual { flex: none; width: 110px; height: 120px; border-radius: 16px; }
  .opcion__txt { flex: 1; align-items: flex-start; gap: 8px; }
  .duo { width: 105px; height: 78px; }
  .par img { width: 52px; height: 78px; filter: none; }
  .par img + img { margin-left: -15px; }
  .badge { padding: 4px 10px; font-size: 11px; letter-spacing: 1.1px; }
  .badge--big { padding: 6px 16px; font-size: 15px; letter-spacing: 1.5px; background: var(--gold-grad); }
  .opcion h3 { width: auto; font-size: 18px; line-height: 1.2; }
  .opcion--regalo h3 { font-size: 24px; }
  .opcion__desc, .copo { display: none; }
  .peluche { top: 1px; width: 96px; height: 118px; margin-left: -48px; filter: none; }
  .op { width: 44px; height: 44px; font-size: 22px; box-shadow: none; }
  .op__right { display: none; }
  .op__down { display: block; }
  .leyenda { width: 100%; gap: 12px; padding: 16px 18px; font-size: 13px; line-height: 1.45; }
  .leyenda img { width: 22px; }

  /* Conoce */
  .conoce__overlay { width: 100%; background: rgba(11, 12, 61, .35); }
  .pt { display: none; top: 440px; left: calc(var(--mx) * 100% / 390); --rise: -520px; }
  .pt.m { display: block; }
  .conoce__inner { height: auto; display: flex; flex-direction: column; padding-block: 48px 56px; }
  .conoce__visual { position: relative; order: -1; left: auto; top: auto; width: 342px; max-width: 100%; height: 380px; margin: 0 auto 18px; }
  .halo { left: -19px; width: 380px; }
  .sombra { display: none; }
  .fiona { left: 36px; top: 10px; width: 271px; height: 360px; }
  .sello-gratis { left: 241px; top: 8px; width: 96px; height: 96px; border-width: 2.5px; }
  .sello-gratis span { font-size: 21px; }
  .sello-gratis small { font-size: 10px; }
  .conoce__copy { gap: 18px; padding-top: 0; max-width: none; }
  .conoce h2 { font-size: 43px; line-height: 1.06; letter-spacing: -.43px; }
  .conoce__lead { font-size: 17px; }
  .conoce__copy .btn { width: 100%; }
  .conoce__note { font-size: 12px; }

  /* Vigencia */
  .vigencia { padding-block: 64px; }
  .vigencia .wrap { gap: 20px; }
  .vig-card { flex-direction: column; }
  .vig-card__fecha { width: 100%; padding: 32px 28px; }
  .vig-card__big { font-size: 40px; }
  .vig-card__sub { font-size: 16px; }
  .vig-card__cadenas { padding: 32px 28px; }
  .vig-card__cadenas h3 { font-size: 24px; }
  .vig-card__cadenas > p { font-size: 15px; }
  .logos { gap: 8px; }
  .logos li { height: 54px; border-radius: 12px; }
  .logos img { max-width: 80%; }

  .listado { margin-top: 12px; gap: 20px; padding: 20px; border-radius: 24px; box-shadow: 0 12px 16px rgba(16, 17, 74, .08); }
  .listado__head { flex-direction: column; align-items: stretch; gap: 12px; }
  .listado__head h3 { font-size: 26px; }
  .listado__head > div { gap: 12px; }
  .listado__head > div p { font-size: 15px; }
  .aviso { padding: 10px 14px 10px 12px; border-radius: 12px; font-size: 13px; }
  .buscador { height: 52px; }
  .buscador input { font-size: 15px; }
  .chips-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 32px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { font-size: 14px; }
  .resultados__title { font-size: 16px; }
  .resultados__orden { display: none; }
  /* La tabla se convierte en tarjetas */
  .tabla, .tabla tbody { display: block; border: 0; border-radius: 0; overflow: visible; }
  .tabla thead { display: none; }
  .tabla tbody { display: flex; flex-direction: column; gap: 10px; }
  .tabla tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
  .tabla tbody tr[hidden] { display: none; }
  .tabla tbody tr > * { padding: 0 !important; border: 0; width: auto !important; }
  .tabla td:first-child { grid-row: 1; grid-column: 1; }
  .tabla .ciudad { grid-row: 1; grid-column: 2; align-self: center; font-size: 13px; color: var(--navy); }
  .tabla tbody th { grid-column: 1 / -1; font-size: 16px; }
  .tabla td:nth-child(3) { grid-column: 1 / -1; font-size: 14px; }
  .nota { align-items: flex-start; font-size: 13px; }

  /* Términos */
  .terminos { padding-block: 56px; }
  .terminos .wrap { gap: 24px; }
  .terminos h2 { font-size: 36px; }
  .acordeon details { padding: 18px 20px; border-radius: 16px; }
  .acordeon summary { font-size: 16px; white-space: normal; }
  .acordeon details p { font-size: 15px; }
  .terminos .btn { width: 100%; }

  /* Footer */
  .site-footer { padding-block: 40px; }
  .site-footer .wrap { gap: 24px; }
  .footer__top { justify-content: center; }
  .footer__nav { display: none; }
  .footer__claim { align-items: flex-start; padding: 16px 20px; font-size: 14px; line-height: 1.45; }
  .footer__legales { gap: 8px; font-size: 13px; line-height: 1.4; }
  .footer__copy { font-size: 13px; text-align: center; }
}