/* ==========================================================================
   ROOTESSA — hoja de estilos del sitio (rebranding "Studio Ivory", 26-sep-2026)
   ==========================================================================

   DE DÓNDE SALE
   El diseño viene del paquete ROOTESSA-OPTIMIZADA-V3 (zip de Gerardo, 26-sep-
   2026, carpeta 03-modern-essentials). Ese paquete traía ~250 KB de CSS en 7
   archivos más 3 "bundles" con hash, con reglas de TRES temas distintos
   (botanical / ivory / modern) pisándose entre sí, cuando las páginas solo
   usan uno (ivory + modern). Esta hoja es ese resultado final, reescrito
   limpio: mismos colores, tamaños y espaciados que se ven en pantalla, sin
   las reglas muertas de los otros temas ni las cadenas de !important.

   QUÉ PÁGINAS LA USAN
   Todas las páginas públicas salvo /checkout (que conserva su CSS propio,
   adentro del archivo, por ser la página más auditada del proyecto).

   CÓMO SE ACTUALIZA SIN QUE NADIE SE QUEDE CON LA VIEJA
   Se carga como /css/rootessa.css?v=N y public/_headers la cachea un año
   ("immutable"). Si se cambia este archivo hay que subir el número ?v= en
   TODAS las páginas a la vez -- la prueba test-rebrand-studio-ivory.mjs
   falla si alguna página queda con un número distinto.

   ORDEN DE ESTE ARCHIVO
    1. Variables de marca          9. Reseñas y estrellas
    2. Base y tipografía          10. Preguntas frecuentes
    3. Botones y enlaces          11. Pie de página
    4. Cabecera y menú            12. Página de producto
    5. Portada (campaña)          13. Páginas informativas
    6. Colección y tarjetas       14. Carrito, ofertas y gracias
    7. Secciones de contenido     15. Avisos, barra móvil, animación
    8. Tabla comparativa
   ========================================================================== */

/* 1. Variables de marca ================================================== */
:root {
  --paper: #F3F0E7;          /* marfil: fondo general */
  --ink: #202321;            /* carbón: texto y botones */
  --muted: #575d55;          /* texto secundario */
  --line: #d2d5c9;           /* bordes y divisores */
  --soft: #e5e7dc;           /* paneles salvia claro */
  --card: #faf9f4;           /* superficie de tarjetas */
  --sage: #68734f;           /* estrellas y barras de puntaje */
  --sage-light: #c7d2b5;     /* estrellas sobre fondo oscuro */
  --focus: #697361;
  --white: #fff;
  --font-display: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .25, 1);
  --lift: 0 13px 30px -20px rgb(32 35 33 / 36%);
  --gutter: 5%;
}

/* 2. Base y tipografía =================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body.home-page { background: var(--white); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.12;
}
h1 { font-size: clamp(46px, 5.8vw, 91px); margin-bottom: 26px; }
h2 { font-size: clamp(32px, 3.7vw, 56px); margin-bottom: 22px; }
h3 { font-size: 29px; }
p { margin: 0 0 20px; }
em { font-style: normal; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
[hidden] { display: none !important; }
.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-link {
  position: fixed; z-index: 1000; top: -100px; left: 10px;
  padding: 12px 18px; border-radius: 99px; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 10px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; margin-bottom: 20px; text-transform: uppercase; }
.muted { color: var(--muted); font-size: 13px; }
.small { color: var(--muted); font-size: 12px; }
.section { max-width: 1600px; margin: 0 auto; padding: 85px var(--gutter); }
.section-heading { margin-bottom: 45px; }
.section-heading h2 { max-width: 770px; }
.section-heading p:last-child { max-width: 610px; color: var(--muted); }
.noscript { padding: 20px; background: var(--soft); text-align: center; font-size: 14px; }

/* 3. Botones y enlaces =================================================== */
.button {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  min-width: 190px; min-height: 54px; padding: 15px 24px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 600 15px/1.2 var(--font-body); text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 200ms ease, border-color 200ms ease;
}
.button > span[aria-hidden] { font-size: 22px; line-height: 1; }
.button:disabled { opacity: .5; cursor: default; }
.button-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { font-size: 14px; }
.terms-link { display: block; margin-top: 11px; font-size: 13px; text-align: center; }
.text-button {
  min-height: 44px; padding: 6px 0; border: 0; background: none;
  color: #454d40; font-size: 14px; text-decoration: underline; text-underline-offset: 4px;
}

/* 4. Cabecera y menú ===================================================== */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
  max-width: 1600px; height: 100px; margin: 0 auto; padding: 0 var(--gutter);
  background: var(--paper); color: var(--ink);
}
body.home-page .site-header { background: var(--white); border-bottom: 1px solid #e8e9e4; max-width: none; }
.wordmark { display: block; width: 174px; min-width: 120px; padding: 4px 0; line-height: 0; }
.wordmark img { width: 100%; height: auto; }
.site-nav { display: flex; gap: 32px; font-size: 14px; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.bag-button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 9px 16px;
  border: 1px solid #b2b6aa; border-radius: 30px;
  background: transparent; color: var(--ink);
  font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.bag-button span {
  display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px;
  border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px;
}
.mobile-menu-toggle { display: none; }

/* 5. Portada (campaña) =================================================== */
.campaign-hero { position: relative; isolation: isolate; margin: 0 auto; overflow: hidden; background: var(--white); }
.campaign-picture { display: block; width: 100%; overflow: hidden; }
.campaign-picture img { display: block; width: 100%; height: auto; filter: contrast(.96) saturate(.94) brightness(1.02); }
.campaign-default { position: absolute; inset: 0; z-index: 1; }
.campaign-default:focus-visible { outline: 3px solid #647650; outline-offset: -5px; }
.campaign-map { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 2; pointer-events: none; }
.campaign-map.mobile-map { display: none; }
.campaign-hotspot { outline: none; }
.campaign-hotspot path {
  fill: transparent; stroke: #718463; stroke-width: 2; stroke-opacity: 0;
  pointer-events: all; vector-effect: non-scaling-stroke;
  transition: stroke-opacity .25s, fill .25s;
}
.campaign-hotspot text {
  fill: #223c2a; font: 500 20px var(--font-body); text-anchor: middle;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.campaign-hotspot:focus-visible path { stroke-opacity: 1; fill: #6e825f0a; }
.campaign-hotspot:focus-visible text { opacity: 1; }
.campaign-copy { position: absolute; z-index: 3; pointer-events: none; color: var(--ink); }
.campaign-copy h1 { font-size: clamp(38px, 4.05vw, 76px); line-height: 1.06; margin-bottom: 22px; }
.campaign-intro { font-size: clamp(14px, 1.15vw, 19px); line-height: 1.6; max-width: 390px; margin-bottom: 24px; }
.campaign-cta {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 35px;
  min-height: 52px; padding: 14px 24px; border: 1px solid var(--ink); border-radius: 99px;
  background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.campaign-cta span { font-size: 21px; }
.campaign-cta:focus-visible { outline: 3px solid #718463; outline-offset: 4px; }
.campaign-hint { margin: 17px 0 0; font-size: 11px; letter-spacing: .03em; color: #68705e; }
/* Escritorio: foto 3:2 recortada a 2.1:1 (se ve un reflejo corto) */
@media (min-width: 761px) {
  .campaign-hero { width: 92%; max-width: 1536px; }
  .campaign-picture { aspect-ratio: 2.1 / 1; }
  .campaign-picture img, .campaign-map.desktop-map { aspect-ratio: 3 / 2; }
  .campaign-copy { left: 7.5%; top: 53.2%; transform: translateY(-50%); width: 30%; max-width: 430px; }
}
@media (min-width: 1600px) { .campaign-copy { left: 6%; width: 29%; } }
@media (min-width: 761px) and (max-width: 1024px) {
  .campaign-copy h1 { font-size: clamp(29px, 3.8vw, 39px); margin-bottom: 14px; }
  .campaign-intro { font-size: 12px; line-height: 1.45; margin-bottom: 16px; }
  .campaign-cta { font-size: 12px; min-height: 44px; padding: 10px 16px; gap: 18px; }
  .campaign-hint { font-size: 9px; margin-top: 10px; }
}
/* Celular: foto vertical 2:3 recortada a 10:11, el texto va debajo */
@media (max-width: 760px) {
  .campaign-picture { aspect-ratio: 10 / 11; }
  .campaign-picture img, .campaign-map.mobile-map { aspect-ratio: 2 / 3; }
  .campaign-map.desktop-map { display: none; }
  .campaign-map.mobile-map { display: block; }
  .campaign-hotspot text { font-size: 23px; }
  .campaign-copy { position: relative; width: 88%; margin: 20px auto 0; padding-bottom: 34px; }
  .campaign-copy h1 { font-size: clamp(33px, 6.9vw, 51px); line-height: 1.04; max-width: 520px; margin-bottom: 12px; }
  .campaign-intro { font-size: clamp(13px, 2.6vw, 17px); line-height: 1.45; max-width: 490px; margin-bottom: 15px; }
  .campaign-cta { font-size: 13px; min-height: 43px; padding: 10px 19px; gap: 28px; }
  .campaign-hint { font-size: 10px; margin-top: 10px; }
}
@media (max-width: 400px) {
  .campaign-copy h1 { font-size: 34px; max-width: 330px; }
  .campaign-intro { max-width: 300px; }
}

/* Franja de garantías debajo de la portada */
.reassurance {
  display: flex; justify-content: center; gap: 6%; flex-wrap: wrap;
  padding: 20px var(--gutter); background: var(--paper); font-size: 13px;
}
.reassurance span { display: flex; align-items: center; gap: 10px; }
.reassurance svg { width: 18px; height: 18px; flex: none; }

/* 6. Colección y tarjetas ================================================ */
body.home-page .collection-section { padding-top: 65px; }
.collection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.collection-heading h2 { margin-bottom: 0; max-width: 750px; }
.collection-heading > p { max-width: 330px; margin: 0; color: var(--muted); }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.collection-card {
  min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 26px; background: var(--card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms ease;
}
.collection-card:focus-within { box-shadow: var(--lift); }
.collection-image {
  position: relative; display: block; overflow: hidden; padding: 34px 22px 45px;
  border-radius: 18px; background: var(--white); text-decoration: none;
}
.collection-image img {
  width: 100%; height: 345px; object-fit: contain;
  filter: contrast(.96) saturate(.94) brightness(1.02);
  transition: transform 420ms var(--ease);
}
.collection-number { position: absolute; left: 22px; top: 18px; font-size: 12px; }
.image-link-label {
  position: absolute; left: 20px; right: 20px; bottom: 17px;
  display: flex; align-items: center; justify-content: space-between; font-size: 14px;
}
.image-link-label > span { font-size: 22px; }
.collection-content { padding: 24px 10px 10px; }
.collection-content > .rating-link { margin: 0 0 15px; }
.collection-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.collection-title h3 { max-width: 245px; margin: 0 0 18px; font-size: 25px; letter-spacing: -.045em; }
.collection-title h3 a { text-decoration: none; }
.collection-title h3 a:hover { text-decoration: underline; }
.collection-price { font-size: 19px; line-height: 1.3; text-align: right; white-space: nowrap; }
.collection-price small { display: block; max-width: 110px; margin-top: 5px; margin-left: auto; font-size: 12px; color: var(--muted); white-space: normal; }
.collection-content > p { margin-bottom: 16px; font-size: 16px; color: var(--muted); }
.collection-content > .collection-allergen { font-size: 13px; }
.collection-content > .collection-bundle { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.collection-actions { display: grid; gap: 10px; }
.collection-actions .button { width: 100%; min-width: 0; }
.shop-footnote { max-width: 920px; margin: 24px 0 0; font-size: 12px; color: var(--muted); }

/* 7. Secciones de contenido ============================================== */
/* Fotos de rutina (portada y producto) */
.routine-photos { background: #eeede5; }
.routine-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.routine-photo-grid figure { margin: 0; min-width: 0; }
.routine-photo-grid img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px;
  transition: transform 420ms var(--ease), box-shadow 320ms var(--ease);
}
.routine-photo-grid figcaption { padding: 20px 0 0; }
.routine-photo-grid figcaption > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.routine-photo-grid figcaption p { max-width: 300px; margin: 10px 0 13px; font: 500 22px/1.35 var(--font-display); letter-spacing: -.035em; }
.routine-photo-grid figcaption a { font-size: 14px; }
.image-disclosure { max-width: 900px; margin: 26px 0 0; font-size: 12px; color: var(--muted); }
.product-routine .routine-photo-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
.product-routine .routine-photo-grid img { max-height: 650px; object-position: center 35%; }

/* Tres pasos / tres beneficios */
.ritual { background: #e3e6da; }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.ritual-grid article {
  padding: 28px; border-radius: 18px; background: var(--paper);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.ritual-grid article > span {
  display: inline-grid; place-items: center; width: 37px; height: 37px;
  border: 1px solid #C7CCBD; border-radius: 50%; font-size: 14px;
}
.ritual-grid h3 { margin: 24px 0 20px; font-size: 27px; letter-spacing: -.045em; }
.ritual-grid p { max-width: 340px; margin-bottom: 0; font-size: 16px; color: var(--muted); }

/* Banda "Subscribe & Save" */
.subscribe-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9%;
  max-width: none; margin: 0 var(--gutter); padding: 65px var(--gutter);
  border-radius: 28px; background: var(--ink); color: var(--paper);
}
.subscribe-band .muted { color: #cdd2c4; font-size: 15px; }
.subscribe-band .button { max-width: 320px; background: var(--paper); color: var(--ink); }
.subscribe-band .terms-link { color: #e1e5d9; text-align: left; }
@media (min-width: 1600px) { .subscribe-band { max-width: 1440px; margin-left: auto; margin-right: auto; } }

/* Garantía de 30 días */
.guarantee { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: center; max-width: 1150px; }
.guarantee h2 { font-size: 44px; }
.guarantee p:not(.eyebrow) { max-width: 630px; color: var(--muted); }
.guarantee-number {
  font-family: var(--font-display); font-size: 145px; font-weight: 400;
  line-height: 1; letter-spacing: -.07em; text-align: center; color: var(--ink);
}
.guarantee-number span { display: block; margin-top: 15px; font: 12px var(--font-body); letter-spacing: .1em; }

/* 8. Tabla comparativa =================================================== */
.compare { padding-top: 45px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14px; text-align: left; }
th, td { padding: 21px 18px; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
thead th { font: 500 21px var(--font-body); letter-spacing: -.035em; vertical-align: bottom; }
thead th:first-child { width: 17%; min-width: 150px; }
tbody th { font-size: 13px; font-weight: 600; }
td small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }

/* 9. Reseñas y estrellas ================================================= */
.stars { display: inline-block; font-family: Arial, sans-serif; letter-spacing: .08em; line-height: 1; white-space: nowrap; color: var(--sage); }
.stars-partial { position: relative; color: #d5d8cc; }
.stars-partial > span { position: absolute; left: 0; top: 0; width: var(--star-fill); overflow: hidden; white-space: nowrap; color: var(--sage); }
.rating-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; width: fit-content;
  margin: -4px 0 17px; font-size: 14px; color: var(--ink); text-decoration: none;
}
.rating-link .stars { font-size: 16px; }
.rating-link:hover .rating-label { text-decoration: underline; }
.rating-average { font-weight: 650; font-variant-numeric: tabular-nums; }
.rating-label { font-size: 13px; color: var(--muted); }

.review-section { background: #e9ece2; border-top: 1px solid var(--line); max-width: none; }
.review-section > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.review-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.review-header h2 { margin-bottom: 0; }
.review-header > a, .review-header > p { margin: 0; font-size: 14px; }
.review-dashboard {
  display: grid; grid-template-columns: .6fr 1fr; gap: 7%; align-items: center;
  margin-bottom: 32px; padding: 32px var(--gutter);
  border-radius: 24px; background: var(--ink); color: var(--paper);
}
.review-score { text-align: center; }
.review-score > strong { display: block; font: 500 76px/1.1 var(--font-display); letter-spacing: -.06em; }
.review-score > .stars { margin: 13px 0; font-size: 22px; }
.review-score .stars-partial > span { color: var(--sage-light); }
.review-score p { margin: 0; font-size: 14px; color: #c7ccbd; }
.review-bars { display: grid; gap: 12px; }
.review-bar-row { display: grid; grid-template-columns: 58px 1fr 38px; align-items: center; gap: 13px; font-size: 14px; }
.review-bar-row > span:last-child { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.rating-track { height: 10px; overflow: hidden; border-radius: 99px; background: #3f4838; }
.rating-fill {
  display: block; width: var(--bar-width); height: 100%; border-radius: 99px; background: var(--sage-light);
  transform-origin: left; transition: transform 1100ms cubic-bezier(.2, .7, .2, 1);
}
/* Sin JS las barras se ven llenas; con JS (/js/site.js agrega .js al <html>)
   arrancan vacías y crecen al entrar en pantalla. */
.js .rating-fill:not(.is-grown) { transform: scaleX(0); }
.review-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review-card {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: 25px; border: 1px solid #d5dccb; border-radius: 20px; background: var(--card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms ease;
}
.review-card > .stars { margin-bottom: 18px; font-size: 15px; }
.review-card h3 { margin: 0 0 15px; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.review-card blockquote { flex: 1; margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: #4c5549; }
.review-card blockquote p { margin: 0; }
.review-byline { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; }
.review-initial { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #e2e7d8; font-size: 13px; }
.review-byline strong { display: block; font-weight: 600; }
.review-byline small { display: block; font-size: 12px; color: #67705d; }
.review-helpful { margin: 18px 0 0; font-size: 12px; color: #67705d; }
.review-more { margin-top: 20px; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 25px; margin-top: 26px; }
.review-actions button {
  min-height: 46px; padding: 12px 23px; border: 1px solid #69745c; border-radius: 99px;
  background: transparent; font-size: 14px;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.review-note { max-width: 950px; margin: 27px 0 0; font-size: 12px; line-height: 1.7; color: #5e6756; }
.home-review-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.home-review-item {
  padding: 24px; border: 1px solid #c9d0bc; border-radius: 20px; background: #f8f7f1; text-decoration: none;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms ease;
}
.home-review-item h3 { margin: 14px 0; font-size: 23px; }
.review-mini-total { font-size: 14px; color: var(--muted); }
.review-mini-total strong { font: 500 24px var(--font-display); letter-spacing: -.04em; color: var(--ink); }
.review-mini-link { display: block; margin-top: 16px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.home-original-review { margin-top: 36px; }

/* 10. Preguntas frecuentes =============================================== */
.faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10%; margin-top: 60px; border-top: 1px solid var(--line); }
.faq h2 { font-size: 44px; }
.faq > div > p { color: var(--muted); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary, .details-block summary {
  position: relative; padding: 23px 34px 23px 0; cursor: pointer; list-style: none; font-size: 15px;
  transition: transform 220ms var(--ease), color 180ms ease;
}
.faq-list summary::-webkit-details-marker, .details-block summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .details-block summary::after { content: "+"; position: absolute; right: 0; top: 17px; font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after, .details-block[open] summary::after { content: "\2212"; }
.faq-list details p { padding-right: 25px; font-size: 16px; line-height: 1.7; color: var(--muted); }

/* 11. Pie de página ====================================================== */
.site-footer { padding: 60px var(--gutter) 50px; background: var(--ink); color: var(--paper); }
.site-footer .wordmark { display: inline-block; width: 190px; margin-bottom: 35px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 13px 20px; margin-bottom: 32px; font-size: 14px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.footer-cards > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c7ccbd; }
.site-footer .legal { max-width: 1000px; font-size: 12px; line-height: 1.7; color: #c7ccbd; }
.site-footer .legal a { color: var(--paper); }

/* 12. Página de producto ================================================= */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; padding: 25px var(--gutter) 0; max-width: 1600px; margin: 0 auto; font-size: 12px; color: var(--muted); }
.sales-hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: 5%; align-items: start; padding-top: 30px; }
.sales-art { position: sticky; top: 18px; min-width: 0; }
.sales-offer { min-width: 0; }
.sales-offer .eyebrow { margin-bottom: 14px; }
.sales-offer h1 { margin: 0 0 12px; font-size: clamp(40px, 4.2vw, 66px); }
.disclaimer-short { margin: 0 0 16px; font-size: 11px; line-height: 1.5; color: #666c60; } /* 4.75:1 sobre marfil (minimo WCAG AA para texto chico: 4.5:1) */
.sales-lead { font: 500 22px/1.4 var(--font-display); letter-spacing: -.035em; }
.offer-desc { font-size: 16px; }
.allergy-note { margin-bottom: 17px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.offer-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 24px; padding: 0; list-style: none; }
.offer-highlights li { padding: 6px 10px; border: 1px solid #d3dac7; border-radius: 99px; background: #e5e9dd; font-size: 12px; }

/* Galería */
.product-gallery { position: relative; min-width: 0; }
.gallery-stage { position: relative; overflow: hidden; border: 1px solid #d6dacd; border-radius: 25px; background: var(--white); }
.gallery-viewport {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; touch-action: pan-x pan-y; aspect-ratio: 1 / 1.06; border-radius: 25px;
}
.gallery-viewport:focus-visible { outline-offset: -5px; }
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-slide { position: relative; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
/* HALLAZGO M13: las fotos 2 en adelante esperan su direccion (data-src) hasta
   que hacen falta -- mientras tanto no se dibuja nada (ni el texto alt). */
.gallery-slide img:not([src]) { visibility: hidden; }
.gallery-slide.is-packshot { background: var(--white); }
.gallery-slide.is-packshot img { object-fit: contain; padding: 10px 8px 30px; filter: contrast(.96) saturate(.94) brightness(1.02); }
.gallery-slide figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 18px; max-width: max-content;
  padding: 8px 12px; border-radius: 10px; background: #f3f0e7ed; font-size: 12px; line-height: 1.5;
}
.gallery-slide.is-packshot figcaption { left: 12px; right: 12px; bottom: 12px; max-width: none; background: transparent; text-align: center; }
.gallery-controls { position: absolute; left: 14px; right: 14px; top: 50%; display: flex; justify-content: space-between; pointer-events: none; }
.gallery-arrow, .gallery-zoom {
  display: grid; place-items: center; min-width: 43px; height: 43px;
  border: 1px solid #cbd1c0; border-radius: 50%; background: #f3f0e7ed; color: var(--ink);
  font-size: 24px; line-height: 1; pointer-events: auto; box-shadow: 0 2px 8px #2023210c;
  transition: transform 220ms var(--ease), background-color 200ms ease;
}
.gallery-arrow { transform: translateY(-50%); }
.gallery-zoom { position: absolute; right: 14px; top: 14px; min-width: 0; height: 36px; padding: 0 15px; border-radius: 99px; font-size: 13px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.gallery-thumb {
  min-width: 0; height: 78px; padding: 3px; overflow: hidden;
  border: 1px solid #cbd1c0; border-radius: 12px; background: #e3e7da;
  transition: transform 240ms var(--ease), border-color 200ms ease;
}
.gallery-thumb[aria-current="true"] { padding: 2px; border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.gallery-thumb:first-child { background: var(--white); }
.gallery-thumb:first-child img { object-fit: contain; }
.gallery-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; font-size: 12px; color: var(--muted); }
.gallery-footer p { margin: 0; }
.gallery-footer button { min-height: 28px; padding: 4px; border: 0; background: none; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.gallery-count { font-variant-numeric: tabular-nums; }
.gallery-lightbox {
  width: min(1000px, 96vw); max-height: 94dvh; padding: 48px 12px 12px;
  border: 0; border-radius: 18px; background: var(--white); color: var(--ink);
}
.gallery-lightbox::backdrop { background: #20232199; backdrop-filter: blur(4px); }
.gallery-lightbox img { width: 100%; max-height: 80dvh; object-fit: contain; }
.gallery-lightbox-close {
  position: absolute; right: 14px; top: 9px; padding: 8px 15px;
  border: 0; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 14px;
}

/* Selector de paquetes y suscripción */
.product-form fieldset { min-width: 0; margin: 0 0 19px; padding: 0; border: 0; }
.product-form legend { margin-bottom: 19px; font-size: 15px; font-weight: 600; }
.bundles { display: flex; gap: 7px; margin-top: 8px; }
.bundle {
  position: relative; display: flex; flex: 1; flex-direction: column; gap: 7px; min-width: 0;
  padding: 24px 6px 16px; border: 1px solid #b9c0ae; border-radius: 15px; background: var(--card);
  line-height: 1.3; text-align: center; cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 200ms ease, background-color 200ms ease;
}
.bundle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bundle:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.bundle.selected { border: 1.5px solid var(--ink); background: #dfe4d5; box-shadow: inset 0 0 0 .5px var(--ink); }
.bundle-q { font-size: 14px; font-weight: 600; }
.bundle-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 10px; background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.bundle-cost strong { font: 500 25px var(--font-display); }
.bundle-cost small, .bundle-total { display: block; font-size: 12px; color: var(--muted); }
.bundle-cost small { margin-top: 4px; }
.bundle-save { font-size: 12px; font-weight: 600; color: #365034; }
.subscribe {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px;
  border: 1px solid #c4cab8; border-radius: 15px; background: var(--soft);
  line-height: 1.5; cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 200ms ease;
}
.subscribe:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.subscribe input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.subscribe strong { display: block; font-size: 15px; }
.subscribe small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.subscribe-price { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; }
.renewal { margin: 12px 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.total-label { display: block; font-size: 13px; }
.current-total { font-size: 36px; font-weight: 400; letter-spacing: -.03em; }
.savings { text-align: right; font-size: 13px; }
.savings small { display: block; font-size: 13px; color: var(--muted); }
.referral-pill { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: #dce5ce; color: #28472e; font-size: 12px; font-weight: 600; }
.shipping-note { min-height: 20px; margin: 10px 0 17px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.buy-actions { display: grid; gap: 10px; }
.buy-actions .button { width: 100%; }
.lock-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.purchase-trust { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.purchase-trust .pt-item { display: flex; gap: 8px; margin-bottom: 10px; }
.purchase-trust .pt-item::before { content: "\2713"; color: #596746; }
.purchase-trust details summary { cursor: pointer; }
.purchase-trust details summary::marker { color: #596746; }
.pt-ship-list { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* Franja oscura de datos (5 peptides · 30 ml · 12%) */
.choice-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;
  padding: 30px var(--gutter); background: var(--ink); color: var(--paper); text-align: center;
}
.choice-value { display: block; font: 500 34px/1.2 var(--font-display); letter-spacing: -.05em; }
.choice-label { display: block; margin-top: 8px; font-size: 13px; color: #d3dac9; }

/* Beneficios, fórmula, ingredientes */
.sales-benefits { margin: 0 3%; border-radius: 25px; background: var(--soft); }
.sales-page .ritual h2 { font-size: 48px; }
.formula-story { display: grid; grid-template-columns: .95fr 1.05fr; gap: 8%; align-items: center; }
.formula-story > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 26px; transition: transform 420ms var(--ease), box-shadow 320ms var(--ease); }
.formula-story h2 { max-width: 580px; }
.formula-story p { font-size: 16px; color: var(--muted); }
.formula-story .button { max-width: 320px; margin-top: 25px; }
.formula-notes { display: grid; margin: 26px 0 0; padding: 0; list-style: none; }
.formula-notes li { padding: 17px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.formula-notes strong { display: block; margin-bottom: 5px; font-size: 17px; font-weight: 600; }
.formula-notes span { color: var(--muted); }
.formula-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.formula-section h3 { font-size: 23px; letter-spacing: -.025em; }
.spec-table { min-width: 0; margin-bottom: 24px; }
.spec-table th, .spec-table td { padding: 12px 10px 12px 0; font-size: 14px; }
.spec-table th { font-weight: 600; width: 46%; }
.inci-list { font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.details-block { margin-top: 25px; border-top: 1px solid var(--line); }
.details-block p { font-size: 14px; }

/* Decisión de compra y productos relacionados */
.sales-decision { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; align-items: center; }
.sales-decision .button { max-width: 370px; }
.sales-decision .terms-link { text-align: left; }
.decision-note { padding: 45px; border-radius: 23px; background: var(--soft); text-align: center; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.decision-note .guarantee-number { display: block; margin-bottom: 25px; font-size: 108px; }
.decision-note h3 { font-size: 27px; }
.decision-note p { font-size: 14px; }
.decision-note a { font-size: 13px; }
.related { background: var(--soft); max-width: none; }
.related > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.related-grid article {
  display: grid; grid-template-columns: .7fr 1fr; gap: 18px; align-items: center;
  padding: 25px; border-radius: 20px; background: var(--card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.related-grid article > a img { width: 100%; height: 270px; object-fit: contain; border-radius: 16px; filter: contrast(.96) saturate(.94) brightness(1.02); transition: transform 420ms var(--ease); }
.related-grid h3 { font-size: 27px; }
.related-grid h3 a { text-decoration: none; }
.related-grid .eyebrow { margin-bottom: 12px; font-size: 11px; }
.related-grid p { font-size: 16px; }
.related-grid .button { min-width: 0; font-size: 14px; }

/* 13. Páginas informativas =============================================== */
/* El fondo salvia ocupa todo el ancho; el contenido va en .policy-inner,
   que usa la misma caja que .policy-layout (clase .section) para que el
   título y el texto de abajo queden alineados en cualquier pantalla. */
.policy-hero { border-bottom: 1px solid var(--line); background: var(--soft); }
.policy-hero .policy-inner { padding-bottom: 45px; }
.policy-hero h1 { max-width: 970px; font-size: clamp(42px, 5.1vw, 80px); }
.policy-intro { max-width: 680px; font-size: 20px; color: var(--muted); }
.policy-date { margin-bottom: 0; font-size: 12px; color: var(--muted); }
.policy-layout { display: grid; grid-template-columns: 210px 1fr; gap: 9%; padding-top: 50px; }
.policy-layout aside { position: sticky; top: 30px; align-self: start; }
.policy-nav { display: flex; flex-direction: column; }
.policy-nav a { padding: 12px 16px; border-radius: 12px; font-size: 14px; text-decoration: none; }
.policy-nav a:hover { text-decoration: underline; }
.policy-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.policy-content { max-width: 850px; min-width: 0; }
.policy-content h2 { margin: 36px 0 17px; font-size: 30px; }
.policy-content h2:first-child { margin-top: 0; }
.policy-content h3 { margin: 26px 0 12px; font-size: 22px; letter-spacing: -.035em; }
.policy-content p, .policy-content li { font-size: 16px; }
.policy-content ul, .policy-content ol { padding-left: 22px; }
.policy-content li { margin-bottom: 8px; }
.policy-content table { min-width: 520px; font-size: 14px; }
.policy-content th, .policy-content td { padding: 16px 13px; }
.policy-content .small { font-size: 13px; }
.policy-content .callout { margin: 22px 0; padding: 18px 20px; border-radius: 14px; background: var(--soft); }
.policy-help { margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
.contact-grid section { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.contact-value { font-size: 22px; word-break: break-word; }
.contact-grid p { margin-top: 14px; font-size: 14px; }
.policy-country-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; padding-left: 18px; font-size: 14px; }
.founder { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; margin: 30px 0; }
.founder img { width: 100%; border-radius: 20px; }
.founder figure { margin: 0; }
.founder figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.policy-content h3.inci-title { margin: 26px 0 8px; font: 600 17px/1.35 var(--font-display); letter-spacing: -.02em; }
.policy-content .callout p:last-child { margin-bottom: 0; }
.callout-title { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.policy-content .callout.warn { border: 1px solid #cfad6e; background: #fff1d6; }
.policy-cta { margin: 34px 0 0; }
.policy-cta .button { display: inline-flex; }
.about-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 20px; }
.about-product { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.about-product img { width: 100%; max-width: 220px; margin: 0 auto 12px; border-radius: 14px; background: var(--white); }
.about-product-tag { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.about-product h3 { margin: 0 0 8px; font-size: 21px; }
.about-product h3 a { text-decoration: none; }
.about-product h3 a:hover { text-decoration: underline; }
.policy-content .about-product p { font-size: 14px; }
.policy-content .about-product-price { margin: 0; font-weight: 600; }
.toc { margin: 0 0 34px; padding: 18px 22px 20px; border-radius: 16px; background: var(--soft); }
.toc strong { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 10px 0 0; columns: 2; column-gap: 26px; }
.policy-content .toc li { margin-bottom: 4px; font-size: 14px; }
.country-line { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); line-height: 1.9; }
.policy-content .country-line { font-size: 14px; }
.product-block { margin: 18px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.product-block h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 0; }
.tag { padding: 3px 9px; border-radius: 99px; background: var(--soft); color: #3f473b; font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.tag.supp { background: #fff1d6; color: #5b4516; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 8px; }
.platform-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13.5px; line-height: 1.55; }
.platform-card a { font-weight: 600; font-size: 14.5px; }
.inci { font-size: 14px; }
.sources-list li { margin-bottom: 16px; }
.src-title { display: block; font-weight: 600; }
.src-note { color: var(--muted); font-size: 13px; }
.not-found { max-width: 760px; margin: 0 auto; padding: 70px var(--gutter) 90px; }
.not-found h1 { font-size: clamp(40px, 5vw, 64px); }
.not-found-links { margin: 0 0 30px; padding-left: 20px; line-height: 1.9; }
.not-found .button { display: inline-flex; }

/* 14. Carrito, ofertas y gracias ========================================= */
.checkout-shell { max-width: 1240px; margin: 0 auto; padding: 46px var(--gutter) 80px; }
.checkout-shell h1 { margin: 14px 0 22px; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; }
.checkout-shell h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.03em; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 40px; align-items: start; }
.checkout-panel { margin-bottom: 20px; padding: 28px; border: 1px solid #d1d5c7; border-radius: 22px; background: var(--card); }
.order-summary { position: sticky; top: 24px; background: #e6e9dd; }
.summary-row { display: flex; justify-content: space-between; gap: 20px; margin: 12px 0; font-size: 14px; }
.summary-total { padding-top: 18px; border-top: 1px solid #c8cdbc; font-size: 21px; font-weight: 600; }
.summary-save { color: #365034; }
.checkout-note { font-size: 12px; line-height: 1.6; color: var(--muted); }
.primary-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%;
  min-height: 60px; padding: 16px 20px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--paper); font: 650 16px var(--font-body); text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 200ms ease;
}
.primary-cta:disabled { opacity: .55; cursor: default; }
.cart-item { display: grid; grid-template-columns: 95px minmax(0, 1fr) auto; gap: 20px; padding: 26px 0; border-bottom: 1px solid #d1d5c7; }
.cart-item:first-child { padding-top: 0; }
.cart-item img { width: 95px; height: 124px; object-fit: contain; border-radius: 14px; background: var(--white); }
.cart-item h2 { margin: 4px 0 8px; font-size: 21px; }
.cart-item h2 a { text-decoration: none; }
.cart-item p { margin: 6px 0; font-size: 13px; }
.cart-item .item-price { text-align: right; font-weight: 600; white-space: nowrap; }
.cart-item .item-price del { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.quantity-control { display: inline-flex; align-items: center; margin-top: 14px; overflow: hidden; border: 1px solid #adb5a3; border-radius: 8px; }
.quantity-control button { width: 38px; height: 38px; border: 0; background: transparent; font-size: 20px; }
.quantity-control button:disabled { opacity: .3; cursor: default; }
.quantity-control span { min-width: 25px; text-align: center; font-size: 14px; }
.remove-line { display: block; margin-top: 8px; padding: 6px 0; border: 0; background: none; font-size: 12px; text-decoration: underline; }
.line-subscription { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12px; }
.line-subscription input { margin-top: 3px; accent-color: var(--ink); }
.pill { display: inline-block; padding: 5px 10px; border-radius: 99px; background: #dce5ce; color: #28472e; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.empty-state { max-width: 550px; margin: 0 auto; padding: 45px 0; text-align: center; }
.empty-state .primary-cta { margin-top: 24px; }
.empty-state .empty-links { margin-top: 18px; font-size: 14px; color: var(--muted); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #d1d5c7; font-size: 12px; }
.order-summary .primary-cta { margin: 22px 0 8px; }
.cart-item .item-price small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.cards-row-wrap { margin-top: 20px; padding-top: 16px; border-top: 1px solid #c8cdbc; }
.cards-row-wrap .checkout-note { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* Ofertas post-compra (upsell-1 / upsell-2) */
.offer-page { max-width: 1200px; margin: 0 auto; padding: 35px var(--gutter) 70px; }
.offer-topline { display: flex; justify-content: space-between; gap: 15px; margin: 0 0 20px; font-size: 12px; }
.offer-layout { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #cdd3c0; border-radius: 26px; background: var(--card); }
.offer-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; padding: 40px; background: var(--white); }
.offer-visual img { width: 100%; max-height: 470px; object-fit: contain; filter: contrast(.96) saturate(.94) brightness(1.02); transition: transform 420ms var(--ease); }
.offer-stamp {
  position: absolute; z-index: 2; top: 24px; left: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 90px; height: 90px; border-radius: 50%; background: var(--ink); color: var(--paper);
  font-size: 9px; font-weight: 600; letter-spacing: .08em; transform: rotate(-9deg);
}
.offer-stamp strong { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.offer-content { align-self: center; padding: 30px 40px; }
.offer-content h1 { margin: 16px 0 22px; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.1; }
.offer-content h2 { margin-bottom: 12px; font-size: 22px; }
.offer-content p { margin-bottom: 14px; line-height: 1.6; }
.offer-benefits { margin: 14px 0; padding: 0; list-style: none; font-size: 14px; }
.offer-benefits li { position: relative; margin: 10px 0; padding-left: 24px; }
.offer-benefits li::before { content: "\2713"; position: absolute; left: 0; color: #365034; }
.offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 13px; margin: 20px 0 3px; }
.offer-price strong { font-size: 40px; font-weight: 500; letter-spacing: -.04em; }
.offer-price del { font-size: 22px; color: #697260; }
.decline-offer {
  display: block; width: 100%; min-height: 46px; margin: 16px 0 6px;
  border: 0; background: none; color: #4d5846; font-size: 13px; text-decoration: underline;
}
.offer-warning { font-size: 12px; color: var(--muted); }
.offer-bottom { margin-top: 23px; text-align: center; font-size: 12px; color: var(--muted); }
.offer-alert, .checkout-alert { margin: 15px 0; padding: 12px 16px; border: 1px solid #cfad6e; border-radius: 10px; background: #fff1d6; font-size: 13px; }
.offer-alert:empty, .checkout-alert:empty { display: none; }
/* Piezas propias de las ofertas reales de un clic (los ids los llena el
   script de cada pagina -- ver public/upsell-1.html). */
.offer-steps { min-width: 190px; }
.offer-progress { display: flex; gap: 7px; margin-top: 10px; }
.offer-progress span { flex: 1; height: 4px; border-radius: 4px; background: #d3d9c7; }
.offer-progress .done { background: #405a35; }
.offer-content .eyebrow { margin-bottom: 0; }
.offer-content .lede { color: var(--muted); font-size: 15px; }
.offer-content .offer-name { margin: 26px 0 6px; font-size: 26px; letter-spacing: -.035em; }
.offer-content .offer-tag { color: var(--muted); font-size: 15px; }
.offer-content .primary-cta { gap: 6px; }
.offer-now { margin: 0 0 22px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.offer-now .was { margin-right: 10px; color: #697260; font-weight: 400; text-decoration: line-through; }
/* El script cambia className a "note err" en los avisos -- por eso el
   estilo cuelga de .note/.note.err y no de otra clase. */
.offer-content .note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.offer-content .note.err { padding: 12px 16px; border: 1px solid #cfad6e; border-radius: 10px; background: #fff1d6; color: #4a3a17; text-align: left; }
.offer-fineprint { max-width: 900px; margin: 22px auto 0; font-size: 11px; line-height: 1.6; color: var(--muted); text-align: center; }

/* Cabecera y pie mínimos de los pasos post-compra (mismo criterio que
   /checkout: logo y estado, sin menú que distraiga) */
.flow-header .flow-status { display: inline-flex; align-items: center; gap: 8px; color: #365034; font-size: 13px; font-weight: 600; }
.flow-header .flow-status svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-footer { padding: 26px var(--gutter) 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.flow-footer p { margin: 0; }

/* Gracias (/thank-you) */
.thanks-page { max-width: 700px; margin: 0 auto; padding: 50px var(--gutter) 80px; text-align: center; }
.thanks-page h1 { margin: 0 0 16px; font-size: clamp(38px, 5vw, 58px); }
.thanks-page .lede { max-width: 54ch; margin: 0 auto 30px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.thanks-check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: #dce5ce; }
.thanks-check svg { width: 30px; height: 30px; fill: none; stroke: #28472e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.order-box { margin: 0 0 18px; padding: 20px 24px; border: 1px solid #d1d5c7; border-radius: 20px; background: var(--card); text-align: left; }
.order-box .lbl { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.order-box .val { margin: 0; font: 600 21px/1.3 var(--font-display); letter-spacing: .01em; }
.order-box.order-number { display: inline-block; margin-bottom: 24px; padding: 12px 22px; text-align: center; }
.upsell-lines, .auth-line { margin: 0; font-size: 15px; line-height: 1.9; }
.thanks-steps { margin: 12px 0 30px; padding: 24px 26px; border-radius: 20px; background: var(--soft); text-align: left; }
.thanks-steps h2 { margin: 0 0 12px; font-size: 23px; letter-spacing: -.03em; }
.thanks-steps ol { margin: 0; padding-left: 20px; }
.thanks-steps li { margin-bottom: 6px; font-size: 15px; line-height: 1.7; }
.thanks-actions { display: flex; justify-content: center; margin: 18px 0 0; }
.helpline { margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* 15. Avisos, barra móvil, animación ===================================== */
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: 30px; max-width: 92%;
  padding: 15px 24px; border-radius: 16px; background: var(--ink); color: var(--paper);
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.mobile-bar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover, .bag-button:hover, .review-actions button:hover, .primary-cta:not(:disabled):hover {
    transform: translateY(-2px) scale(1.015); box-shadow: 0 9px 18px -14px rgb(32 35 33 / 48%);
  }
  .button:not(:disabled):hover { background: #454b42; }
  .button-outline:not(:disabled):hover, .button-light:not(:disabled):hover { background: #dce2d2; color: var(--ink); }
  .primary-cta:not(:disabled):hover { background: #454b42; }
  .campaign-hotspot:hover path { stroke-opacity: .55; fill: #6e825f04; }
  .campaign-hotspot:hover text { opacity: 1; }
  .campaign-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #20232122; background: #304432; }
  .collection-card:hover { transform: translateY(-5px) scale(1.008); box-shadow: var(--lift); border-color: #b8c0aa; }
  .collection-image:hover img, .collection-image:focus-visible img { transform: scale(1.035); }
  .review-card:hover, .home-review-item:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--lift); border-color: #adb99c; }
  .ritual-grid article:hover, .related-grid article:hover, .decision-note:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--lift); }
  .bundle:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 8px 16px -12px rgb(32 35 33 / 48%); border-color: #758169; }
  .bundle.selected:hover { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink), 0 8px 16px -12px rgb(32 35 33 / 48%); }
  .subscribe:hover { transform: translateY(-2px); border-color: #8d9b7d; box-shadow: 0 8px 18px -16px rgb(32 35 33 / 42%); }
  .routine-photo-grid img:hover, .formula-story > img:hover { transform: scale(1.015); box-shadow: 0 12px 25px -20px rgb(32 35 33 / 45%); }
  .related-grid article > a:hover img, .offer-visual:hover > img { transform: scale(1.025); }
  .gallery-thumb:hover { transform: translateY(-2px) scale(1.035); border-color: #758169; }
  .gallery-thumb[aria-current="true"]:hover { border-color: var(--ink); }
  .gallery-arrow:hover, .gallery-zoom:hover { background: var(--white); }
  .gallery-zoom:hover, .gallery-lightbox-close:hover { transform: scale(1.055); }
  .gallery-arrow:hover { transform: translateY(-50%) scale(1.055); }
  .faq-list summary:hover, .details-block summary:hover { transform: translateX(3px); color: #506243; }
  .quantity-control button:not(:disabled):hover { background: #e3e8d9; }
  .decline-offer:hover, .text-button:hover, .remove-line:hover { color: var(--ink); text-decoration-thickness: 2px; }
}

/* Anchos intermedios ===================================================== */
@media (max-width: 1100px) {
  .site-nav { gap: 20px; }
  .collection-image img { height: 290px; }
  .collection-title { display: block; }
  .collection-price { display: block; margin-bottom: 14px; text-align: left; }
  .collection-price small { display: inline; margin-left: 10px; max-width: none; }
  .collection-heading > p { max-width: 270px; }
  .sales-hero { gap: 4%; }
  .bundles { gap: 4px; }
  .bundle-q { font-size: 12px; }
}
@media (max-width: 1000px) {
  .gallery-thumbs { gap: 6px; }
  .gallery-thumb { height: 63px; }
  .review-card-grid { gap: 14px; }
  .review-card { padding: 21px; }
  .review-card h3 { font-size: 20px; }
  .formula-story { gap: 5%; }
  .related-grid article { display: block; }
  .related-grid article > a img { height: 230px; }
  .policy-layout { grid-template-columns: 165px 1fr; gap: 5%; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Menú de celular (lo arma /js/site.js; sin JS, el pie tiene todos los links) */
@media (max-width: 900px) {
  .site-header.has-mobile-nav { position: relative; flex-wrap: wrap; height: auto; min-height: 80px; gap: 12px; padding-top: 17px; padding-bottom: 17px; }
  .has-mobile-nav .wordmark { width: 140px; flex-shrink: 0; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-left: auto;
    min-height: 40px; padding: 9px 12px; border: 1px solid #b9c1ae; border-radius: 99px;
    background: transparent; color: var(--ink); font-size: 12px;
  }
  .has-mobile-nav .bag-button { min-height: 40px; padding: 8px 11px; }
  .has-mobile-nav .site-nav {
    display: none; order: 5; width: 100%; justify-content: space-between; gap: 10px;
    padding: 18px 0 0; border-top: 1px solid #d8ddcf; font-size: 13px;
  }
  .has-mobile-nav.navigation-open .site-nav { display: flex; }
}
@media (max-width: 359px) {
  .has-mobile-nav .wordmark { width: 120px; }
  .mobile-menu-toggle { padding: 8px 10px; }
}

@media (max-width: 800px) {
  html { scroll-padding-top: 25px; }
  .site-header { height: 82px; }
  .site-header:not(.has-mobile-nav) .site-nav { display: none; }
  .wordmark { width: 150px; }
  .section { padding: 58px var(--gutter); }
  .section-heading { margin-bottom: 30px; }
  .reassurance { justify-content: flex-start; gap: 14px; padding: 18px var(--gutter); font-size: 12px; }
  .reassurance svg { width: 15px; height: 15px; }
  body.home-page .collection-section { padding-top: 40px; }
  .collection-heading { display: block; margin-bottom: 30px; }
  .collection-heading > p { max-width: 600px; margin-top: 18px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
  .collection-image { height: 100%; padding: 40px 12px 45px; }
  .collection-image img { height: 330px; }
  .collection-content { padding: 18px 8px 18px 0; }
  .collection-price { font-size: 21px; }
  .collection-price small { display: block; margin: 4px 0 0; }
  .routine-photo-grid { gap: 16px; }
  .routine-photo-grid img { border-radius: 18px; }
  .routine-photo-grid figcaption p { font-size: 19px; }
  .product-routine .routine-photo-grid { gap: 20px; }
  .ritual-grid { gap: 12px; }
  .ritual-grid article { padding: 22px; }
  .ritual-grid h3 { font-size: 24px; }
  .subscribe-band { gap: 30px; padding: 45px var(--gutter); }
  .guarantee { gap: 28px; }
  .guarantee-number { font-size: 112px; }
  .guarantee h2 { font-size: 34px; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq h2 { font-size: 39px; }
  .review-header { flex-direction: column; align-items: flex-start; gap: 15px; }
  .review-dashboard { grid-template-columns: .65fr 1fr; gap: 5%; padding: 28px var(--gutter); }
  .review-score > strong { font-size: 64px; }
  .review-bar-row { grid-template-columns: 50px 1fr 32px; gap: 8px; font-size: 13px; }
  .review-card-grid { grid-template-columns: 1fr; }
  .review-card blockquote { font-size: 16px; }
  .home-review-strip { gap: 15px; }
  .home-review-item { padding: 20px; }
  .home-review-item h3 { font-size: 20px; }
  .sales-offer .bundle-cost strong { font-size: 21px; }
  .bundle-q { font-size: 13px; }
  .gallery-viewport { aspect-ratio: 1 / 1.25; }
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .gallery-thumb { height: 65px; }
  .choice-value { font-size: 30px; }
  .formula-story { grid-template-columns: 1fr 1fr; }
  .formula-section { gap: 6%; }
  .sales-decision { gap: 6%; }
  .decision-note { padding: 30px 20px; }
  .policy-hero h1 { font-size: 50px; }
  .policy-layout { grid-template-columns: 1fr; gap: 30px; }
  .policy-layout aside { position: static; }
  .policy-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .policy-nav a { padding: 9px 12px; border: 1px solid var(--line); font-size: 12px; }
  .policy-country-list { grid-template-columns: 1fr 1fr; }
  .about-products { grid-template-columns: 1fr 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder img { max-width: 280px; }
  .checkout-shell { padding: 30px var(--gutter) 50px; }
  .checkout-layout { grid-template-columns: 1fr; gap: 24px; }
  .checkout-panel { padding: 22px; }
  .order-summary { position: static; }
  .offer-layout { grid-template-columns: 1fr; }
  .offer-visual { min-height: 260px; padding: 20px; }
  .offer-visual img { max-height: 265px; }
  .offer-content { padding: 28px; }
  .offer-stamp { width: 84px; height: 84px; }
  .offer-topline { flex-wrap: wrap; }
  .offer-content h1 { font-size: 37px; }
  .toast { bottom: 85px; }
  /* Barra fija de compra (solo páginas de producto) */
  .mobile-bar {
    position: fixed; z-index: 20; left: 0; bottom: 0; width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px var(--gutter); border-top: 1px solid #C7CCBD;
    background: #F3F0E7f5; backdrop-filter: blur(10px); color: var(--ink); font-size: 12px;
  }
  .mobile-bar a { padding: 10px 19px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; }
  body.has-mobile-bar .site-footer { padding-bottom: 110px; }
}

@media (max-width: 560px) {
  .reassurance { justify-content: space-between; gap: 7px; font-size: 11px; }
  .reassurance span { gap: 5px; }
  .reassurance span:last-child { display: none; }
  .section-heading h2 { font-size: 38px; }
  .collection-card { display: block; }
  /* height:auto a proposito: el height:100% de la regla de <=800px (tarjeta
     en 2 columnas) estiraba la foto al alto de la tarjeta ENTERA en celular
     y empujaba precio y botones fuera de la tarjeta (bug heredado del zip,
     encontrado al probar en 375px el 26-sep-2026). */
  .collection-image { height: auto; padding: 40px 22px 50px; }
  .collection-image img { height: 360px; }
  .collection-content { padding: 23px 4px 6px; }
  .collection-title { display: flex; }
  .collection-price { text-align: right; }
  .collection-price small { max-width: 110px; }
  .routine-photo-grid, .product-routine .routine-photo-grid { grid-template-columns: 1fr; gap: 34px; }
  .routine-photo-grid img { aspect-ratio: 4 / 4.6; max-height: 500px; object-position: center 35%; }
  .routine-photo-grid figcaption p { font-size: 22px; max-width: none; }
  .ritual-grid { grid-template-columns: 1fr; gap: 28px; }
  .ritual-grid article { padding: 24px; }
  .ritual-grid h3 { margin-top: 23px; }
  .sales-page .ritual h2 { font-size: 40px; }
  .subscribe-band { grid-template-columns: 1fr; padding: 35px 7%; }
  .subscribe-band h2 { font-size: 38px; }
  .subscribe-band .button { max-width: none; }
  .guarantee { grid-template-columns: 1fr; gap: 25px; }
  .guarantee-number { text-align: left; font-size: 90px; }
  .guarantee-number span { padding-left: 8px; }
  .guarantee h2 { font-size: 35px; }
  .faq { margin-top: 15px; }
  .faq h2 { font-size: 35px; }
  .review-header h2 { font-size: 34px; }
  .review-dashboard { grid-template-columns: 1fr; gap: 27px; padding: 28px 7%; }
  .review-score > strong { font-size: 70px; }
  .review-bar-row { grid-template-columns: 58px 1fr 35px; font-size: 14px; }
  .review-card { padding: 24px; }
  .review-card h3 { font-size: 23px; }
  .home-review-strip { grid-template-columns: 1fr; }
  .home-review-item { padding: 22px; }
  .home-review-item h3 { font-size: 23px; }
  .review-mini-link { margin-top: 12px; }
  .breadcrumbs { gap: 8px; padding-top: 22px; font-size: 11px; }
  .sales-hero { grid-template-columns: 1fr; gap: 25px; padding-top: 22px; }
  .sales-art { position: static; }
  .sales-offer h1 { font-size: 43px; }
  .sales-lead { font-size: 22px; }
  .sales-offer .bundle-cost strong { font-size: 23px; }
  .bundle-q { font-size: 14px; }
  .current-total { font-size: 33px; }
  .gallery-viewport { aspect-ratio: 1; }
  .gallery-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .gallery-thumb { height: 58px; border-radius: 10px; }
  .gallery-thumb img { border-radius: 7px; }
  .gallery-zoom { height: 33px; font-size: 12px; }
  .gallery-arrow { min-width: 38px; height: 38px; }
  .gallery-slide figcaption { left: 12px; right: 12px; bottom: 12px; }
  .offer-highlights { gap: 7px; }
  .offer-highlights li { padding: 6px 9px; }
  .choice-strip { gap: 15px; padding: 26px var(--gutter); }
  .choice-value { font-size: 28px; }
  .choice-label { font-size: 12px; }
  .sales-benefits { margin: 0; border-radius: 0; }
  .formula-story { grid-template-columns: 1fr; gap: 28px; }
  .formula-story > img { aspect-ratio: 1.15; }
  .formula-section, .sales-decision { grid-template-columns: 1fr; gap: 25px; }
  .formula-section h2 { font-size: 39px; }
  .related-grid { grid-template-columns: 1fr; gap: 20px; }
  .related-grid article { display: grid; grid-template-columns: .65fr 1fr; gap: 15px; padding: 20px; }
  .related-grid article > a img { height: 220px; }
  .related-grid h3 { font-size: 24px; }
  .related-grid p { font-size: 14px; }
  .related-grid .button { gap: 8px; padding: 12px 16px; font-size: 13px; }
  .policy-hero .policy-inner { padding-top: 40px; padding-bottom: 30px; }
  .policy-hero h1 { font-size: 40px; }
  .policy-intro { font-size: 18px; }
  .policy-layout { padding-top: 30px; }
  .policy-content h2 { font-size: 28px; }
  .mobile-bar { padding: 9px var(--gutter); }
  .mobile-bar a { padding: 10px 16px; }
}
@media (max-width: 480px) {
  .cart-item { grid-template-columns: 66px minmax(0, 1fr); gap: 13px; }
  .cart-item img { width: 66px; height: 90px; }
  .cart-item .item-price { grid-column: 2; text-align: left; }
  .checkout-panel { padding: 18px; }
  .checkout-shell h1 { font-size: 42px; }
  .offer-content { padding: 24px; }
  .offer-content h1 { font-size: 33px; }
  .offer-page { padding: 24px 4% 45px; }
  .policy-country-list { grid-template-columns: 1fr; }
  .about-products { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rating-fill:not(.is-grown) { transform: scaleX(1); }
  .gallery-viewport { scroll-behavior: auto; }
}