/* =========================================================
   la-casa.css — las cuatro hojas del sitio, en una.

   GENERADO por scripts/generar.js. No lo edites: se reescribe en cada
   corrida. Lo que se edita es cada hoja por separado, en este orden:
   tipografias.css -> style.css -> la-casa-brand.css -> la-casa-sitio.css

   Existe para ahorrar tres viajes de ida y vuelta antes del primer dibujo.
   ========================================================= */

/* ===== tipografias.css ===== */
/* =========================================================
   tipografias.css — Archivo, Archivo Black e IBM Plex Mono, servidas de acá.

   Generado por scripts/traer-fuentes.js. NO lo edites a mano: se reescribe.

   Por qué no salen de fonts.googleapis.com: esa hoja era el recurso que más
   demoraba el primer dibujo del sitio. Sirviéndolas desde acá viajan por la
   conexión que ya está abierta, con el mismo cache que el resto, y de paso
   nadie afuera se entera de quién entra a leer.
   ========================================================= */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/archivo-black-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/archivo-black-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== style.css ===== */
/* =========================================================
   Aura Modern Luxe — sistema de diseño
   Implementación de design.md para Riku · Navegante · Ferragosto

   Tokens en :root, componentes construidos siempre a través de ellos.
   Para cambiar la identidad completa, tocás solo el primer bloque.
   ========================================================= */

:root{
  /* ---------- Superficies ---------- */
  --surface:#fcf9f8;
  --surface-dim:#dcd9d9;
  --surface-bright:#fcf9f8;
  --sc-lowest:#ffffff;
  --sc-low:#f6f3f2;
  --sc:#f1eeee;
  --sc-high:#ebe8e7;
  --sc-highest:#e5e2e1;

  /* ---------- Marca ----------
     Los tres primeros son los valores BASE: los que edita el panel. Los
     tokens que usa el resto del CSS derivan de ellos, y en modo oscuro se
     aclaran con color-mix para que sigan legibles sobre fondo oscuro. Así la
     identidad elegida en el panel manda en los dos temas, en vez de tener un
     juego de colores fijo para la noche que no tenga nada que ver. */
  --marca-primaria:#4a5d4e;    /* verde bosque profundo */
  --marca-secundaria:#60615b;  /* gris piedra */
  --marca-terciaria:#765a40;   /* marrón tierra */

  --primary:var(--marca-primaria);
  --primary-hover:color-mix(in srgb, var(--marca-primaria) 82%, #000);
  --on-primary:#ffffff;
  --secondary:var(--marca-secundaria);
  --tertiary:var(--marca-terciaria);
  --error:#ba1a1a;

  /* ---------- Contornos y texto ---------- */
  --outline:#7a7776;
  --outline-variant:#cbc6c5;
  --on-surface:#1d1b1b;
  --on-surface-variant:#4b4645;

  /* ---------- Extensión: las tres marcas ----------
     design.md no define un tono para el vermut. Derivamos un ladrillo
     apagado, armónico con el marrón tierra. `error` queda reservado
     para errores reales, no para identidad de marca. */
  --marca-riku:var(--tertiary);      /* café — marrón tierra */
  --marca-navegante:var(--primary);  /* gin — verde bosque */
  --marca-ferragosto:#8f4a3c;        /* vermut — ladrillo apagado */

  /* ---------- Tipografía ---------- */
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --display-lg:clamp(2.5rem,6vw,3.5625rem);   /* 57px */
  --display-md:clamp(2rem,4.5vw,2.8125rem);   /* 45px */
  --headline-lg:clamp(1.75rem,3.5vw,2rem);    /* 32px */
  --headline-md:1.75rem;                      /* 28px */
  --headline-sm:1.5rem;                       /* 24px */
  --title-lg:1.375rem;                        /* 22px */
  --body-lg:1rem;                             /* 16px */
  --body-md:0.875rem;                         /* 14px */
  --label-sm:0.6875rem;                       /* 11px */

  /* ---------- Geometría ---------- */
  --round:8px;                /* ROUND_EIGHT — todo el sistema */
  --gutter:24px;
  --margen:64px;
  --gap-seccion:clamp(80px,10vw,120px);
  --ancho:1200px;

  --ancho-titulo:20ch;        /* ancho del título de portada, editable desde el panel */
  --nav-alto:72px;
  --sombra:0 1px 2px rgba(29,27,27,.04), 0 12px 32px -16px rgba(29,27,27,.14);
  --sombra-alta:0 2px 6px rgba(29,27,27,.06), 0 24px 48px -20px rgba(29,27,27,.2);
}

/* =========================================================
   TEMA OSCURO

   Tres estados, no dos: el visitante puede no haber elegido nada, y ahí
   manda su sistema. Por eso hay dos bloques casi iguales — uno para
   «sigue al sistema» y otro para «lo eligió a mano»— y el segundo tiene
   que poder ganarle al primero en las dos direcciones.

   Las superficies se redefinen enteras. Los colores de marca no: se aclaran
   a partir de los mismos valores que puso el panel, para que la identidad
   se mantenga y no aparezca una paleta ajena de noche.
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --surface:#14181a;
    --surface-dim:#0f1214;
    --surface-bright:#1c2124;
    --sc-lowest:#181d20;
    --sc-low:#1c2225;
    --sc:#212729;
    --sc-high:#272e31;
    --sc-highest:#2e3639;

    --on-surface:#e4e8ea;
    --on-surface-variant:#a8b1b4;
    --outline:#8b9497;
    --outline-variant:#394144;

    --primary:color-mix(in srgb, var(--marca-primaria) 45%, #e8f2ea);
    --primary-hover:color-mix(in srgb, var(--marca-primaria) 30%, #ffffff);
    --on-primary:#10201a;
    --secondary:color-mix(in srgb, var(--marca-secundaria) 45%, #eef0ee);
    --tertiary:color-mix(in srgb, var(--marca-terciaria) 42%, #f4e6d8);
    --error:#f2b8b5;

    --marca-ferragosto:#e0938a;

    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
    --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
  }
}

:root[data-tema="oscuro"]{
  --surface:#14181a;
  --surface-dim:#0f1214;
  --surface-bright:#1c2124;
  --sc-lowest:#181d20;
  --sc-low:#1c2225;
  --sc:#212729;
  --sc-high:#272e31;
  --sc-highest:#2e3639;

  --on-surface:#e4e8ea;
  --on-surface-variant:#a8b1b4;
  --outline:#8b9497;
  --outline-variant:#394144;

  --primary:color-mix(in srgb, var(--marca-primaria) 45%, #e8f2ea);
  --primary-hover:color-mix(in srgb, var(--marca-primaria) 30%, #ffffff);
  --on-primary:#10201a;
  --secondary:color-mix(in srgb, var(--marca-secundaria) 45%, #eef0ee);
  --tertiary:color-mix(in srgb, var(--marca-terciaria) 42%, #f4e6d8);
  --error:#f2b8b5;

  --marca-ferragosto:#e0938a;

  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
}

/* Los logos que traen fondo blanco propio quedan como un parche brillante
   sobre fondo oscuro. Un fondo claro detrás los integra sin alterarlos. */
:root[data-tema="oscuro"] .firma .logo,
:root[data-tema="oscuro"] .plan .logo-marca{background:var(--sc-highest);padding:4px}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .firma .logo,
  :root:not([data-tema="claro"]) .plan .logo-marca{background:var(--sc-highest);padding:4px}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-alto) + 24px)}
body{
  font-family:var(--sans);
  font-size:var(--body-lg);
  line-height:1.5;
  color:var(--on-surface);
  background:var(--surface);
  padding-top:var(--nav-alto);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
h1{font-size:var(--display-lg);line-height:1.12;text-wrap:balance}
h2{font-size:var(--headline-lg);line-height:1.25;text-wrap:balance}
h3{font-size:var(--headline-sm);line-height:1.3}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:var(--on-primary);padding:12px 20px;z-index:200;border-radius:0 0 var(--round) 0}
.skip:focus{left:0;top:0}

/* ---------- Rejilla ---------- */
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--margen)}
.wrap-angosto{max-width:760px;margin:0 auto;padding-inline:var(--margen)}
section{padding-block:var(--gap-seccion)}

/* ---------- Etiquetas ---------- */
.label{
  font-size:var(--label-sm);font-weight:600;line-height:1.45;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-variant);
}
.eyebrow{
  font-size:var(--label-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tertiary);
  margin-bottom:20px;
}
.lead{font-size:1.0625rem;line-height:1.65;color:var(--on-surface-variant);max-width:60ch}
p{max-width:66ch}

/* =========================================================
   NAVEGACIÓN — fija, translúcida, con desenfoque de fondo
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-alto);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--outline-variant);
}
.nav .interior{
  max-width:var(--ancho);height:100%;margin:0 auto;padding-inline:var(--margen);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gutter);
}
.nav .marca{
  font-family:var(--serif);font-weight:600;font-size:1.0625rem;
  color:var(--primary);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;
  min-width:0;   /* sin esto, la columna 1fr no baja del ancho del texto y la barra desborda */
}
.nav .marca .sep{color:var(--outline-variant);margin-inline:4px;font-weight:400}
.nav .enlaces{display:flex;justify-content:center;gap:32px}
.nav .enlaces a{
  font-size:var(--body-md);font-weight:500;color:var(--on-surface-variant);
  text-decoration:none;transition:color .18s ease;white-space:nowrap;
}
.nav .enlaces a:hover{color:var(--primary)}
.nav .utilidad{display:flex;justify-content:flex-end;align-items:center;gap:12px}

/* Bolsa de compra */
.bolsa{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--body-md);font-weight:500;
  background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface);
  padding:9px 16px;border-radius:var(--round);cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.bolsa:hover{border-color:var(--primary);background:var(--sc-low)}
.bolsa svg{width:17px;height:17px;flex:none}
.bolsa .cuenta{
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--primary);color:var(--on-primary);
  font-size:var(--label-sm);font-weight:600;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.bolsa[hidden]{display:none}

@media (max-width:980px){
  .nav .interior{grid-template-columns:1fr auto}
  .nav .enlaces{display:none}
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:var(--body-md);font-weight:600;line-height:1;
  padding:15px 26px;border-radius:var(--round);border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-lleno{background:var(--primary);color:var(--on-primary)}
.btn-lleno:hover{background:var(--primary-hover)}
.btn-contorno{background:transparent;color:var(--primary);border-color:var(--outline-variant)}
.btn-contorno:hover{border-color:var(--primary);background:var(--sc-low)}
.btn-texto{background:transparent;color:var(--primary);padding-inline:0}
.btn-texto:hover{color:var(--primary-hover)}
.btn-chico{padding:11px 18px;font-size:var(--body-md)}
.btn-ancho{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.acciones{display:flex;gap:12px;flex-wrap:wrap}

/* =========================================================
   PORTADA
   ========================================================= */
.portada{
  padding-block:clamp(64px,9vw,112px) var(--gap-seccion);
  background:var(--surface);
}
/* El ancho va en el h1, no en el contenedor: `ch` se mide contra la tipografía
   del elemento, y en el contenedor daba una columna diez veces más angosta. */
.portada .contenido{max-width:none}
/* `ch` se mide contra la tipografía del título: en móvil, 20ch de una fuente
   de 40 px son 400 px y desbordan la pantalla. El min() lo acota. */
.portada h1{max-width:min(var(--ancho-titulo), 100%);margin-bottom:28px}
.portada h1 em{font-style:italic;color:var(--tertiary)}
.portada .lead{margin-bottom:40px;max-width:54ch}
.portada .acciones{margin-bottom:64px}

.firmas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gutter);padding-top:32px;border-top:1px solid var(--outline-variant);
}
.firma .nombre{
  font-family:var(--serif);font-size:var(--title-lg);font-weight:600;
  display:block;margin-bottom:2px;
}
.firma .logo{
  height:44px;width:auto;max-width:100%;margin-bottom:12px;
  object-fit:contain;object-position:left;border-radius:6px;
}
.firma .que{font-size:var(--body-md);color:var(--on-surface-variant)}

/* Logo de marca dentro de las tarjetas. Nunca se le aplica un filtro de color:
   muchos logos traen su propio fondo y un filtro los convertiría en una mancha. */
.logo-marca{width:auto;object-fit:contain;display:block;border-radius:5px}
.plan .logo-marca{margin-bottom:12px}
.producto .imagen.con-logo{background:var(--sc-high);padding:12%}
.producto .imagen .logo-marca{width:100%;height:100%;max-height:100%}
.firma.riku .nombre{color:var(--marca-riku)}
.firma.navegante .nombre{color:var(--marca-navegante)}
.firma.ferragosto .nombre{color:var(--marca-ferragosto)}

/* Portada interna, más contenida */
.portada-doc{padding-block:clamp(56px,7vw,88px) 0;background:var(--sc-low)}
.portada-doc h1{font-size:var(--display-md);margin-bottom:20px}
.portada-doc .lead{margin-bottom:clamp(56px,7vw,88px)}

/* =========================================================
   TARJETAS
   ========================================================= */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gutter)}
.tarjeta{
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:32px 28px;
}
.tarjeta h3{font-size:var(--title-lg);margin-bottom:10px}
.tarjeta p{font-size:var(--body-md);color:var(--on-surface-variant);line-height:1.6}
.tarjeta .dato{
  font-family:var(--serif);font-size:var(--headline-md);font-weight:600;
  color:var(--tertiary);display:block;margin-bottom:14px;
}

/* Banda destacada */
.banda{
  margin-top:56px;background:var(--primary);color:var(--on-primary);
  border-radius:var(--round);padding:36px 40px;
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.banda strong{font-family:var(--serif);font-size:var(--title-lg);font-weight:600;display:block;margin-bottom:6px}
.banda p{color:color-mix(in srgb,var(--on-primary) 78%,var(--primary));font-size:var(--body-md);margin:0}
.banda .btn-contorno{color:var(--on-primary);border-color:color-mix(in srgb,var(--on-primary) 40%,transparent)}
.banda .btn-contorno:hover{background:color-mix(in srgb,var(--on-primary) 12%,transparent);border-color:var(--on-primary)}

/* =========================================================
   PLANES
   ========================================================= */
.seccion-planes{background:var(--sc-low)}
.selector{
  display:inline-flex;gap:4px;background:var(--sc-lowest);
  border:1px solid var(--outline-variant);border-radius:var(--round);
  padding:4px;margin:28px 0 12px;flex-wrap:wrap;
}
.selector button{
  font-family:var(--sans);font-size:var(--body-md);font-weight:500;
  background:transparent;border:0;color:var(--on-surface-variant);
  padding:10px 20px;border-radius:5px;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.selector button:hover{color:var(--on-surface)}
.selector button[aria-selected="true"]{background:var(--primary);color:var(--on-primary);font-weight:600}
.detalle-frecuencia{
  font-size:var(--body-md);color:var(--on-surface-variant);
  min-height:1.5em;margin-bottom:48px;
}

.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--gutter)}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:32px 28px 28px;
}
.plan.destacado{border-color:var(--primary);box-shadow:var(--sombra)}
.plan .insignia{
  position:absolute;top:-1px;right:24px;transform:translateY(-50%);
  background:var(--primary);color:var(--on-primary);
  font-size:var(--label-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:5px;
}
.plan .marca{
  font-size:var(--label-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}
.plan.cafe .marca{color:var(--marca-riku)}
.plan.aperitivo .marca{color:var(--marca-navegante)}
.plan.placeres .marca{color:var(--marca-ferragosto)}
.plan.completa .marca{color:var(--secondary)}
.plan h3{font-size:var(--headline-sm);margin-bottom:20px}
.plan .precio{
  font-family:var(--serif);font-size:var(--headline-md);font-weight:600;
  line-height:1.1;display:block;
}
.plan .precio .unidad{
  font-family:var(--sans);font-size:var(--body-md);font-weight:400;
  color:var(--on-surface-variant);letter-spacing:0;
}
.plan .antes{
  font-size:var(--body-md);color:var(--outline);text-decoration:line-through;
  display:block;margin-bottom:4px;
}
.plan .cadencia{
  font-size:var(--body-md);color:var(--on-surface-variant);
  margin:10px 0 0;padding-bottom:24px;border-bottom:1px solid var(--outline-variant);
}
.plan ul{list-style:none;margin:24px 0 28px;flex:1;display:flex;flex-direction:column;gap:10px}
.plan li{
  position:relative;padding-left:26px;
  font-size:var(--body-md);line-height:1.55;color:var(--on-surface-variant);
}
.plan li::before{
  content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:99px;background:var(--primary);
}
.plan .acciones{flex-direction:column;gap:10px}
.plan .acciones .btn{width:100%}
.nota{font-size:var(--body-md);color:var(--on-surface-variant);margin-top:40px;max-width:78ch}
.nota a{color:var(--primary);font-weight:500}

/* Adicional destacado */
.adicional{
  margin-top:var(--gutter);background:var(--sc-lowest);
  border:1px solid var(--outline-variant);border-left:3px solid var(--tertiary);
  border-radius:var(--round);padding:32px 36px;
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.adicional h3{font-size:var(--title-lg);margin:10px 0 8px}
.adicional p{font-size:var(--body-md);color:var(--on-surface-variant);max-width:56ch;margin:0}
.marca-chip{
  display:inline-block;font-size:var(--label-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--sc-high);color:var(--tertiary);
  padding:5px 12px;border-radius:5px;
}

/* =========================================================
   REGALO
   ========================================================= */
.seccion-regalo{background:var(--sc-lowest);border-block:1px solid var(--outline-variant)}
.pasos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gutter);margin-top:48px;
}
.paso{border-top:2px solid var(--primary);padding-top:20px}
.paso .n{
  font-family:var(--serif);font-size:var(--body-md);font-weight:600;
  color:var(--primary);display:block;margin-bottom:8px;
}
.paso b{font-family:var(--serif);font-size:var(--title-lg);font-weight:600;display:block;margin-bottom:8px}
.paso p{font-size:var(--body-md);color:var(--on-surface-variant);margin:0}

/* =========================================================
   PREGUNTAS
   ========================================================= */
.faq{margin-top:48px;border-top:1px solid var(--outline-variant)}
.faq details{border-bottom:1px solid var(--outline-variant)}
.faq summary{
  font-size:1.0625rem;font-weight:500;cursor:pointer;padding:24px 40px 24px 0;
  position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:32px;
  width:9px;height:9px;border-right:1.5px solid var(--outline);border-bottom:1.5px solid var(--outline);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq details p{
  font-size:var(--body-md);line-height:1.7;color:var(--on-surface-variant);
  padding-bottom:24px;max-width:70ch;
}
.faq a{color:var(--primary);font-weight:500}

/* =========================================================
   TIENDA
   ========================================================= */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:48px}
.filtros button{
  font-family:var(--sans);font-size:var(--body-md);font-weight:500;
  background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface-variant);
  padding:10px 20px;border-radius:var(--round);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.filtros button:hover{border-color:var(--outline);color:var(--on-surface)}
.filtros button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:600}

.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--gutter)}
.producto{
  display:flex;flex-direction:column;
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);overflow:hidden;
}
.producto .imagen{
  aspect-ratio:1/1;display:grid;place-items:center;
  font-family:var(--serif);font-size:3.5rem;font-weight:600;color:var(--on-primary);
  opacity:.98;
}
.producto .imagen img{width:100%;height:100%;object-fit:cover}
.producto .imagen.riku{background:var(--marca-riku)}
.producto .imagen.navegante{background:var(--marca-navegante)}
.producto .imagen.ferragosto{background:var(--marca-ferragosto)}
.producto .cuerpo{padding:24px 22px 22px;display:flex;flex-direction:column;flex:1;gap:8px}
.producto .marca{font-size:var(--label-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-variant)}
.producto h3{font-size:1.0625rem;line-height:1.35;font-family:var(--serif)}
.producto .desc{font-size:var(--body-md);color:var(--on-surface-variant);line-height:1.6;flex:1}
.producto .precio{font-family:var(--serif);font-size:var(--title-lg);font-weight:600;margin-top:4px}
.producto .nota-frio{
  font-size:var(--label-sm);letter-spacing:.02em;color:var(--tertiary);
  background:var(--sc-high);border-radius:5px;padding:7px 11px;line-height:1.4;
}
.producto .agotado{font-size:var(--body-md);color:var(--outline);font-weight:500;padding:15px 0}

/* =========================================================
   BOLSA (panel lateral)
   ========================================================= */
.velo{
  position:fixed;inset:0;z-index:110;background:rgba(29,27,27,.32);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.velo.abierto{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;z-index:120;
  height:100dvh;width:min(440px,100%);
  background:var(--surface);border-left:1px solid var(--outline-variant);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.panel.abierto{transform:none;box-shadow:var(--sombra-alta)}
.panel .cabecera{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 28px;border-bottom:1px solid var(--outline-variant);
}
.panel .cabecera h2{font-size:var(--headline-sm)}
.panel .cerrar{
  background:transparent;border:0;cursor:pointer;color:var(--on-surface-variant);
  width:44px;height:44px;border-radius:var(--round);display:grid;place-items:center;
  font-size:1.4rem;line-height:1;transition:background .18s ease;
}
.panel .cerrar:hover{background:var(--sc-high);color:var(--on-surface)}
/* El cuerpo entero se desplaza; el pie fijo queda solo con el total y los
   botones, que es lo que tiene que estar siempre a mano. */
.panel .cuerpo-panel{flex:1;overflow-y:auto;padding:20px 28px;display:flex;flex-direction:column;gap:22px}
.panel .lineas{display:flex;flex-direction:column;gap:20px}
.panel .vacia{
  font-size:var(--body-md);color:var(--on-surface-variant);
  text-align:center;margin-top:56px;
}
.linea{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding-bottom:20px;border-bottom:1px solid var(--outline-variant)}
.linea:last-child{border-bottom:0;padding-bottom:0}
.linea .nombre{font-size:var(--body-md);font-weight:500;line-height:1.4}
.linea .unitario{font-size:var(--body-md);color:var(--on-surface-variant)}
.linea .subtotal{font-family:var(--serif);font-weight:600;text-align:right;white-space:nowrap}
.cantidad{
  display:inline-flex;align-items:center;margin-top:10px;
  border:1px solid var(--outline-variant);border-radius:var(--round);background:var(--sc-lowest);
}
.cantidad button{
  width:32px;height:32px;border:0;background:transparent;cursor:pointer;
  color:var(--primary);font-size:1.05rem;line-height:1;border-radius:5px;
}
.cantidad button:hover{background:var(--sc-high)}
.cantidad span{min-width:30px;text-align:center;font-size:var(--body-md);font-weight:500;font-variant-numeric:tabular-nums}
.panel .pie{
  border-top:1px solid var(--outline-variant);background:var(--sc-lowest);
  padding:24px 28px;display:flex;flex-direction:column;gap:14px;
}
.panel .total{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif);font-size:var(--title-lg);font-weight:600;
}
.panel .total span:last-child{font-variant-numeric:tabular-nums}
.panel .aclaracion{font-size:var(--body-md);color:var(--on-surface-variant);line-height:1.55;margin:0}

/* =========================================================
   PUERTA DE EDAD
   ========================================================= */
.puerta{
  position:fixed;inset:0;z-index:200;background:var(--surface);
  display:grid;place-items:center;padding:var(--margen);text-align:center;
}
.puerta[hidden]{display:none}
.puerta .caja{max-width:44ch}
.puerta h2{font-size:var(--headline-lg);margin-bottom:16px}
.puerta p{font-size:var(--body-md);color:var(--on-surface-variant);margin:0 auto 32px;line-height:1.65}
.puerta .acciones{justify-content:center}
.puerta .aviso{font-size:var(--label-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--outline);margin-top:40px}
.puerta .caja[hidden]{display:none}
.sello-puerta{display:inline-block;margin-bottom:24px}
.sello-puerta .logo-sitio{max-height:72px;margin:0 auto}
.puerta .volver{margin:0 auto 24px}
/* Un botón que se lee como enlace: hace falta que sea <button> porque no
   navega a ningún lado, pero no tiene que parecer una acción principal. */
.enlace-simple{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--on-surface-variant);text-decoration:underline;text-underline-offset:3px;
  font:inherit;
}
.enlace-simple:hover{color:var(--on-surface)}

/* =========================================================
   DOCUMENTOS LEGALES
   ========================================================= */
.doc{padding-block:clamp(48px,6vw,72px) var(--gap-seccion)}
.doc h1{font-size:var(--display-md);margin-bottom:12px}
.doc .eyebrow{margin-bottom:14px}
.doc h2{font-size:var(--headline-md);margin:56px 0 14px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:var(--title-lg);margin:32px 0 10px}
.doc p,.doc li{font-size:var(--body-lg);line-height:1.7;color:var(--on-surface-variant);margin-bottom:14px}
.doc ul,.doc ol{padding-left:24px}
.doc li{margin-bottom:8px}
.doc a{color:var(--primary);font-weight:500}
.doc .actualizado{font-size:var(--body-md);color:var(--outline)}
.recuadro{
  background:var(--sc-low);border:1px solid var(--outline-variant);
  border-left:3px solid var(--tertiary);border-radius:var(--round);
  padding:24px 28px;margin:32px 0;
}
.recuadro p{margin-bottom:12px}
.recuadro p:last-child{margin-bottom:0}
.recuadro.acento{border-left-color:var(--primary)}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.form{
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:36px;margin:40px 0;
  display:flex;flex-direction:column;gap:22px;
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:var(--body-md);font-weight:500;color:var(--on-surface)}
.campo input,.campo select,.campo textarea{
  font-family:var(--sans);font-size:var(--body-lg);color:var(--on-surface);
  background:var(--surface);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:13px 16px;transition:border-color .18s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--primary);outline-offset:1px}
.campo textarea{min-height:120px;resize:vertical;line-height:1.6}
.campo .ayuda{font-size:var(--body-md);color:var(--on-surface-variant)}
.form .ayuda a{color:var(--primary);font-weight:500}

/* =========================================================
   PIE — rejilla multicolumna sobre Surface Container Low
   ========================================================= */
.pie-sitio{background:var(--sc-low);border-top:1px solid var(--outline-variant);padding-block:var(--gap-seccion) 40px}
.pie-sitio .columnas{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:var(--gutter);
  max-width:var(--ancho);margin:0 auto;padding-inline:var(--margen);
}
.pie-sitio h4{
  font-family:var(--sans);font-size:var(--label-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface);margin-bottom:18px;
}
.pie-sitio .relato .marca{
  font-family:var(--serif);font-size:var(--title-lg);font-weight:600;
  color:var(--primary);display:block;margin-bottom:14px;
}
.pie-sitio .relato p{font-size:var(--body-md);line-height:1.7;color:var(--on-surface-variant);max-width:38ch}
.pie-sitio ul{list-style:none;display:flex;flex-direction:column;gap:2px}
/* Los enlaces del pie son lista, no texto corrido: se agrandan para el dedo. */
.pie-sitio li a{display:inline-flex;align-items:center;min-height:40px}
.pie-sitio a{font-size:var(--body-md);color:var(--on-surface-variant);text-decoration:none;transition:color .18s ease}
.pie-sitio a:hover{color:var(--primary)}
.pie-sitio .fiscales p{font-size:var(--body-md);color:var(--on-surface-variant);line-height:1.7;margin-bottom:16px}
.pie-sitio .data-fiscal img{width:56px;border-radius:5px;background:var(--sc-lowest)}

/* Suscripción al newsletter */
.newsletter{margin-top:20px}
.newsletter p{font-size:var(--body-md);color:var(--on-surface-variant);margin-bottom:12px;max-width:34ch}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter input{
  flex:1;min-width:180px;font-family:var(--sans);font-size:var(--body-md);
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:12px 14px;color:var(--on-surface);
}
.newsletter input:focus{border-color:var(--primary)}
.newsletter .gracias{font-size:var(--body-md);color:var(--primary);font-weight:500}

.arrepentimiento{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:11px 18px;
  font-size:var(--body-md);font-weight:500;color:var(--on-surface);text-decoration:none;
}
.arrepentimiento:hover{border-color:var(--primary);color:var(--primary)}

.pie-sitio .legal{
  max-width:var(--ancho);margin:56px auto 0;padding:28px var(--margen) 0;
  border-top:1px solid var(--outline-variant);
  font-size:var(--body-md);color:var(--outline);line-height:1.65;
}

@media (max-width:900px){
  .pie-sitio .columnas{grid-template-columns:1fr 1fr}
  .pie-sitio .relato,.pie-sitio .fiscales{grid-column:1/-1}
}

/* =========================================================
   ADAPTATIVO
   ========================================================= */
/* Toque: 44 px de alto mínimo en todo lo que se toca. Va sin condicionar por
   tipo de puntero: `(pointer:coarse)` no se puede verificar en las pruebas
   automáticas, y 44 px tampoco molesta con mouse. Mejor una regla comprobable
   que una elegante que no se puede testear. */
.btn,.bolsa,.filtros button,.selector button,.abrir-menu,.borrar{min-height:44px}
.cantidad button{width:38px;height:38px}
.nav .marca{display:inline-flex;align-items:center;min-height:44px}

/* Base primero, media query después: al revés, la regla base gana por venir
   más tarde con la misma especificidad y el botón no aparecía nunca. */
.menu-movil .cta-movil{display:none;margin-top:18px}
.menu-movil .cta-movil .btn{width:100%}

@media (max-width:560px){
  /* La marca y la hamburguesa entran; el botón de acción pasa al menú, donde
     además queda más grande. Ver interfaz.js: se clona, no se pierde. */
  .nav .marca{font-size:.95rem}
  .nav .utilidad > .btn{display:none}
  .menu-movil .cta-movil{display:block}
}

@media (max-width:720px){
  :root{--margen:24px;--nav-alto:64px}
  .banda,.adicional{flex-direction:column;align-items:flex-start;gap:24px}
  .portada .contenido{max-width:none}
  .pie-sitio .columnas{grid-template-columns:1fr;gap:40px}
}

/* =========================================================
   ANIMACIONES
   Los estados iniciales existen SOLO bajo html.anima, que el script del
   <head> agrega únicamente si el visitante no pidió menos movimiento y quita
   si el módulo no llega a cargar. Sin esa clase, todo se ve de entrada:
   ninguna animación puede dejar contenido invisible.
   ========================================================= */
html.anima #titulo-portada,
html.anima #portada-eyebrow,
html.anima #portada-lead,
html.anima #portada-botones,
html.anima .firmas{opacity:0}

/* Apariciones al desplazar: transición de CSS, para que no dependan de
   ninguna biblioteca. El escalonado lo pone el JS con transition-delay.

   Ojo con el orden: el estado oculto NO lleva transición. Si la llevara, al
   agregar la clase el contenido se desvanecería a la vista durante medio
   segundo antes de esconderse. La transición se arma un cuadro después,
   con `.con-transicion`, cuando ya está oculto y solo falta revelarlo. */
html.anima .aparece{opacity:0;transform:translateY(12px)}
html.anima .aparece.con-transicion{
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
html.anima .aparece.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  /* Cinturón y tiradores: aunque la clase llegara a estar, nada queda oculto. */
  html.anima *{opacity:1!important;transform:none!important}
}

/* =========================================================
   MICROINTERACCIONES Y ESTADOS

   Todo lo de hover va dentro de @media (hover:hover). En una pantalla
   táctil no existe el "pasar por encima": el navegador simula un hover al
   tocar y queda pegado hasta que tocás otra cosa. Encerrarlo evita eso.

   Lo de :active y :focus-visible queda afuera, porque sí aplica al tacto
   y al teclado.
   ========================================================= */

/* ---------- Botones ---------- */
.btn{
  transition:background .2s ease, border-color .2s ease, color .2s ease,
             transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
  will-change:transform;
}
.btn:active{transform:translateY(1px) scale(.985)}

@media (hover:hover){
  .btn-lleno:hover{transform:translateY(-2px);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--primary) 65%,transparent)}
  .btn-contorno:hover{transform:translateY(-2px)}
  .bolsa:hover{transform:translateY(-1px)}
}

/* La bolsa late cuando entra algo: confirma la acción sin robar la atención. */
@keyframes late{0%,100%{transform:scale(1)}35%{transform:scale(1.28)}}
.bolsa .cuenta.late{animation:late .42s cubic-bezier(.16,1,.3,1)}

/* ---------- Tarjetas de producto ---------- */
.producto{
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.producto .imagen{overflow:hidden}
.producto .imagen img,
.producto .imagen .logo-marca{transition:transform .45s cubic-bezier(.16,1,.3,1)}

@media (hover:hover){
  .producto:hover{transform:translateY(-4px);border-color:var(--outline);box-shadow:var(--sombra)}
  .producto:hover .imagen img{transform:scale(1.05)}
  .producto:hover .imagen .logo-marca{transform:scale(1.06)}
}
/* Al tocar, el mismo gesto pero hacia adentro: el dedo "hunde" la tarjeta. */
.producto:active{transform:translateY(-1px) scale(.995)}

/* ---------- Tarjetas de plan ---------- */
.plan{transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease}
@media (hover:hover){
  .plan:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--sombra)}
}

/* ---------- Enlaces de navegación: subrayado que crece ---------- */
.nav .enlaces a{position:relative;padding-block:6px}
.nav .enlaces a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){ .nav .enlaces a:hover::after{transform:scaleX(1)} }
.nav .enlaces a:focus-visible::after{transform:scaleX(1)}

/* ---------- Filtros y selector de frecuencia ---------- */
.filtros button,.selector button{transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s cubic-bezier(.16,1,.3,1)}
.filtros button:active,.selector button:active{transform:scale(.97)}
@media (hover:hover){ .filtros button:hover{transform:translateY(-1px)} }

/* ---------- Tarjetas de la portada y notas ---------- */
.tarjeta{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease}
@media (hover:hover){
  a.tarjeta:hover{transform:translateY(-3px);border-color:var(--outline);box-shadow:var(--sombra)}
}

/* ---------- Preguntas ---------- */
.faq summary{transition:color .2s ease}
@media (hover:hover){ .faq summary:hover{color:var(--primary)} }

/* ---------- Enlaces del pie ---------- */
.pie-sitio a{transition:color .2s ease}

/* Con "menos movimiento", ninguna microinteracción desplaza nada. */
@media (prefers-reduced-motion:reduce){
  .btn,.producto,.plan,.tarjeta,.filtros button,.selector button,.bolsa{transition:color .2s ease,background .2s ease,border-color .2s ease!important}
  .btn:active,.producto:active,.producto:hover,.plan:hover,a.tarjeta:hover,
  .btn-lleno:hover,.btn-contorno:hover,.bolsa:hover{transform:none!important}
  .producto:hover .imagen img,.producto:hover .imagen .logo-marca{transform:none!important}
  .nav .enlaces a::after{transition:none}
  .bolsa .cuenta.late{animation:none}
}

/* =========================================================
   MENÚ MÓVIL Y VOLVER ARRIBA
   ========================================================= */

/* Botón de las tres rayas: solo existe donde los enlaces no entran. */
.abrir-menu{
  display:none;width:42px;height:42px;flex:none;
  background:transparent;border:1px solid var(--outline-variant);
  border-radius:var(--round);cursor:pointer;color:var(--on-surface);
  align-items:center;justify-content:center;
  transition:border-color .2s ease,background .2s ease;
}
.abrir-menu .rayas{display:block;width:18px;height:12px;position:relative}
.abrir-menu .rayas i{
  position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.abrir-menu .rayas i:nth-child(1){top:0}
.abrir-menu .rayas i:nth-child(2){top:5.2px}
.abrir-menu .rayas i:nth-child(3){top:10.4px}
/* Abierto, las rayas se cruzan: el mismo botón cierra. */
.abrir-menu.abierto .rayas i:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.abrir-menu.abierto .rayas i:nth-child(2){opacity:0}
.abrir-menu.abierto .rayas i:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

.menu-movil{
  position:absolute;top:100%;left:0;right:0;
  background:var(--surface);border-bottom:1px solid var(--outline-variant);
  box-shadow:var(--sombra);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.16,1,.3,1);
}
.menu-movil.visible{opacity:1;transform:none;pointer-events:auto}
.menu-movil[hidden]{display:none}
.menu-movil nav{display:flex;flex-direction:column;padding:8px var(--margen) 20px}
.menu-movil a{
  padding:15px 0;text-decoration:none;font-size:1.05rem;font-weight:500;
  color:var(--on-surface);border-bottom:1px solid var(--outline-variant);
}
.menu-movil a:last-child{border-bottom:0}

/* Con el menú abierto, el fondo no se desplaza. */
html.menu-abierto,html.menu-abierto body{overflow:hidden}

@media (max-width:980px){
  .abrir-menu{display:inline-flex}
}
@media (min-width:981px){
  .menu-movil{display:none}
}

/* ---------- Volver arriba ---------- */
.volver-arriba{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:46px;height:46px;border-radius:var(--round);
  background:var(--primary);color:var(--on-primary);border:0;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sombra);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .2s ease;
}
.volver-arriba.visible{opacity:1;transform:none;pointer-events:auto}
.volver-arriba svg{width:19px;height:19px}
@media (hover:hover){
  .volver-arriba:hover{background:var(--primary-hover);transform:translateY(-2px)}
}
.volver-arriba:active{transform:scale(.94)}

/* No se superpone con la bolsa abierta ni con el pie de acciones del panel. */
html.menu-abierto .volver-arriba{opacity:0;pointer-events:none}

@media (max-width:520px){
  .volver-arriba{right:14px;bottom:14px;width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .menu-movil,.volver-arriba,.abrir-menu .rayas i{transition:opacity .15s ease}
  .volver-arriba.visible{transform:none}
  .volver-arriba:hover,.volver-arriba:active{transform:none}
}

/* =========================================================
   ESQUELETOS DE CARGA (punto 8)

   No hay pantalla de carga a propósito: una cortina que tapa todo hasta que
   termina de cargar hace que un sitio rápido se sienta lento, y retrasa el
   primer dibujo. En su lugar, los bloques que se arman con datos muestran su
   forma mientras llegan, así el diseño no salta cuando aparecen.
   ========================================================= */
.esqueleto{
  position:relative;overflow:hidden;
  background:var(--sc-low);border:1px solid var(--outline-variant);
  border-radius:var(--round);
}
.esqueleto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sc-lowest) 70%,transparent),transparent);
  transform:translateX(-100%);
  animation:brillo 1.4s ease-in-out infinite;
}
@keyframes brillo{100%{transform:translateX(100%)}}
.esqueleto.plan{min-height:420px}
.esqueleto.producto{min-height:380px}
[aria-busy="true"] .aparece{opacity:1;transform:none}   /* el esqueleto nunca se oculta */

@media (prefers-reduced-motion:reduce){
  .esqueleto::after{animation:none;opacity:.5}
}

/* =========================================================
   TRANSICIONES ENTRE PÁGINAS (punto 9)

   Con la API de transiciones de vista, pasar de la portada a la tienda hace
   un fundido en vez de un parpadeo blanco. Donde no está soportada, la
   navegación es la de siempre: no hay nada que arreglar ni polyfill que
   cargar.
   ========================================================= */
@view-transition{ navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
/* La barra superior no participa del fundido: se queda quieta y da
   sensación de que es la misma página. */
.nav{view-transition-name:barra-superior}

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation: none; }
}

/* =========================================================
   LLAMADA A LA ACCIÓN REPETIDA (punto 11)
   Antes del pie, para quien llegó leyendo hasta abajo y no quiere volver
   a subir a buscar el botón.
   ========================================================= */
.cta-final{background:var(--primary);color:var(--on-primary);text-align:center}
.cta-final h2{color:var(--on-primary);max-width:22ch;margin:0 auto 16px}
.cta-final p{
  color:color-mix(in srgb,var(--on-primary) 78%,var(--primary));
  max-width:52ch;margin:0 auto 32px;font-size:1.0625rem;line-height:1.65;
}
.cta-final .acciones{justify-content:center}
.cta-final .btn-lleno{background:var(--on-primary);color:var(--primary)}
.cta-final .btn-lleno:hover{background:var(--sc-high)}
.cta-final .btn-contorno{color:var(--on-primary);border-color:color-mix(in srgb,var(--on-primary) 42%,transparent)}
.cta-final .btn-contorno:hover{background:color-mix(in srgb,var(--on-primary) 12%,transparent);border-color:var(--on-primary)}
.cta-final .aclara{font-size:var(--body-md);margin-top:24px;opacity:.72}

/* ---------- Redes sociales (punto 17) ---------- */
.redes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.redes a{
  width:42px;height:42px;border-radius:var(--round);
  display:grid;place-items:center;color:var(--on-surface-variant);
  border:1px solid var(--outline-variant);
  transition:color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.redes svg{width:19px;height:19px}
@media (hover:hover){
  .redes a:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
}
.pie-sitio .redes a{color:var(--on-surface-variant)}

/* ---------- La línea sobre las marcas se dibuja (punto 10) ---------- */
html.anima .firmas{border-top-color:transparent;position:relative}
html.anima .firmas::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--outline-variant);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
html.anima .firmas.linea-lista::before{transform:scaleX(1)}

/* =========================================================
   VALIDACIÓN Y ESTADOS DE ENVÍO (puntos 13 y 14)
   ========================================================= */
.error-campo{
  font-size:var(--body-md);color:var(--error);font-weight:500;
  margin-top:6px;display:flex;gap:6px;align-items:flex-start;line-height:1.45;
}
.error-campo::before{content:"⚠";flex:none;font-size:.95em}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea,
.campo-chico.con-error input,.campo-chico.con-error select,.campo-chico.con-error textarea{
  border-color:var(--error);
  /* El color no alcanza como única señal: quien no distingue rojo necesita
     otra pista. El borde más grueso y el icono del mensaje la dan. */
  border-width:2px;
}
.campo.con-error input:focus,.campo.con-error textarea:focus{outline-color:var(--error)}

.estado-envio{
  border-radius:var(--round);padding:14px 18px;margin-bottom:20px;
  font-size:var(--body-md);line-height:1.55;
}
.estado-envio:empty{display:none}
.estado-envio.yendo{background:var(--sc-high);color:var(--on-surface-variant)}
.estado-envio.mal{background:color-mix(in srgb,var(--error) 8%,var(--sc-lowest));color:var(--error);border:1px solid color-mix(in srgb,var(--error) 35%,transparent)}
.estado-envio.ok{background:color-mix(in srgb,var(--primary) 8%,var(--sc-lowest));color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 35%,transparent)}

/* ---------- Aviso de sin conexión ---------- */
.sin-conexion{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);
  z-index:150;max-width:min(460px,calc(100vw - 32px));
  background:var(--on-surface);color:var(--surface);
  border-radius:var(--round);padding:13px 20px;
  font-size:var(--body-md);line-height:1.5;box-shadow:var(--sombra-alta);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.sin-conexion.visible{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .sin-conexion{transition:none}
}

/* ---------- Testimonios (punto 18) ---------- */
#testimonios[hidden]{display:none}
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter);margin-top:48px}
.testimonio{
  background:var(--sc-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--round);padding:30px 28px;margin:0;
  display:flex;flex-direction:column;gap:20px;
}
.testimonio blockquote{
  margin:0;font-family:var(--serif);font-size:1.125rem;line-height:1.55;
  color:var(--on-surface);
}
.testimonio blockquote::before{content:"\201C";color:var(--tertiary);margin-right:2px}
.testimonio blockquote::after{content:"\201D";color:var(--tertiary)}
.testimonio figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.testimonio .quien{font-size:var(--body-md);font-weight:600}
.testimonio .donde{font-size:var(--body-md);color:var(--on-surface-variant)}

/* =========================================================
   ENVÍOS Y PROMOCIONES EN EL CARRITO
   ========================================================= */
.panel .envios{border:0;padding:0;margin:0;min-width:0}
.panel .envios legend{
  font-size:var(--label-sm);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-surface-variant);padding:0;margin-bottom:10px;
}
.opcion-envio{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  border:1px solid var(--outline-variant);border-radius:var(--round);
  padding:12px 14px;margin-bottom:8px;background:var(--surface);
  transition:border-color .2s ease,background .2s ease;
}
.opcion-envio.elegida{border-color:var(--primary);background:var(--sc-low)}
.opcion-envio input{margin-top:3px;accent-color:var(--primary);flex:none;width:17px;height:17px}
.opcion-envio .datos{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.opcion-envio .nombre{font-size:var(--body-md);font-weight:600;line-height:1.35}
.opcion-envio .desc{font-size:var(--label-sm);color:var(--on-surface-variant);line-height:1.45}
.opcion-envio .precio{
  font-size:var(--body-md);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--on-surface-variant);
}
@media (hover:hover){ .opcion-envio:hover{border-color:var(--outline)} }

.panel .detalle{
  display:flex;flex-direction:column;gap:6px;
  padding-top:18px;border-top:1px solid var(--outline-variant);
}
.panel .detalle .fila{
  display:flex;justify-content:space-between;gap:16px;
  font-size:var(--body-md);color:var(--on-surface-variant);
  font-variant-numeric:tabular-nums;
}
.panel .detalle .ahorro{color:var(--primary);font-weight:600}

.aviso-carrito{
  display:block;padding:8px 0;line-height:1.5;
  border-top:1px solid var(--outline-variant);
}
.aviso-carrito:first-child{border-top:0;padding-top:0}

/* Etiqueta de promoción sobre las tarjetas de producto */
.promo-chip{
  display:inline-block;font-size:var(--label-sm);font-weight:600;
  letter-spacing:.06em;background:var(--primary);color:var(--on-primary);
  padding:4px 10px;border-radius:5px;
}

/* ---------- Interruptor de tema ---------- */
.tema{
  width:42px;height:42px;flex:none;background:transparent;
  border:1px solid var(--outline-variant);border-radius:var(--round);
  color:var(--on-surface-variant);cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.tema svg{width:19px;height:19px;grid-area:1/1;transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
/* Se muestra el icono del tema al que vas a cambiar, no el actual: el botón
   anuncia lo que hace, no lo que ya está pasando. */
.tema .sol{opacity:0;transform:rotate(-45deg) scale(.7)}
.tema .luna{opacity:1;transform:none}
:root[data-tema="oscuro"] .tema .sol{opacity:1;transform:none}
:root[data-tema="oscuro"] .tema .luna{opacity:0;transform:rotate(45deg) scale(.7)}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .tema .sol{opacity:1;transform:none}
  :root:not([data-tema="claro"]) .tema .luna{opacity:0;transform:rotate(45deg) scale(.7)}
}
@media (hover:hover){
  .tema:hover{border-color:var(--primary);color:var(--primary)}
}
@media (prefers-reduced-motion:reduce){
  .tema svg{transition:opacity .15s ease}
}

/* ---------- Logo del sitio (barra superior y pie) ---------- */
.logo-sitio{width:auto;max-width:100%;object-fit:contain;object-position:left;display:block}
.nav .marca.con-logo{display:inline-flex;align-items:center}
.pie-sitio .relato .marca.con-logo{margin-bottom:14px}

/* Los logos con fondo propio quedan como un parche brillante sobre el fondo
   oscuro: un fondo claro detrás los integra sin alterar la imagen. */
:root[data-tema="oscuro"] .logo-sitio{background:var(--sc-highest);padding:3px 6px;border-radius:5px}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .logo-sitio{background:var(--sc-highest);padding:3px 6px;border-radius:5px}
}
@media (max-width:560px){
  .nav .marca.con-logo .logo-sitio{max-height:32px}
}

/* =========================================================
   MÓDULOS DE LA LANDING
   Cada bloque trae su fondo y su color de texto como variables propias, para
   que el orden y la paleta se decidan desde el panel sin tocar el CSS.
   ========================================================= */
.modulo{
  background:var(--m-fondo, var(--surface));
  color:var(--m-texto, var(--on-surface));
  padding-block:var(--gap-seccion);
}
.modulo-portada{padding-block:clamp(64px,9vw,112px) var(--gap-seccion)}

/* Sobre fondo de color, lo que hereda tonos claros del tema tiene que
   recalcularse contra el fondo del módulo, no contra el del sitio. */
.modulo-inverso h1,.modulo-inverso h2,.modulo-inverso h3,.modulo-inverso strong{color:inherit}
.modulo-inverso .eyebrow{color:inherit;opacity:.75}
.modulo-inverso .lead,.modulo-inverso p{color:color-mix(in srgb, currentColor 78%, transparent)}
.modulo-inverso .btn-lleno{background:var(--m-texto);color:var(--m-fondo)}
.modulo-inverso .btn-contorno{color:inherit;border-color:color-mix(in srgb, currentColor 42%, transparent)}
.modulo-inverso .btn-contorno:hover{background:color-mix(in srgb, currentColor 12%, transparent);border-color:currentColor}
.modulo-inverso .tarjeta{background:color-mix(in srgb, currentColor 8%, transparent);border-color:color-mix(in srgb, currentColor 22%, transparent)}
.modulo-inverso .paso{border-top-color:currentColor}
.modulo-inverso .paso .n{color:inherit;opacity:.7}

.modulo-cta{text-align:center}
.modulo-cta h2{max-width:22ch;margin-inline:auto}
.modulo-cta p{max-width:52ch;margin-inline:auto}
.modulo-cta .acciones{justify-content:center}
.modulo-cta .aclara{font-size:var(--body-md);margin-top:24px;opacity:.72}

.cuerpo-libre p{margin-bottom:14px}
.cuerpo-libre h3{margin:28px 0 8px}

@media print{
  .nav,.pie-sitio,.panel,.velo,.puerta{display:none!important}
  body{padding-top:0}
}

/* Mi cuenta, al lado de la bolsa. Misma forma que la bolsa pero sin relleno:
   es una puerta, no una acción de compra, y no tiene que competir con ella. */
.mi-cuenta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--body-md);font-weight:500;
  color:var(--on-surface-variant);text-decoration:none;
  padding:9px 12px;border-radius:var(--round);
  transition:color .18s ease,background .18s ease;
}
.mi-cuenta:hover{color:var(--on-surface);background:var(--sc-low)}
.mi-cuenta[aria-current="page"]{color:var(--on-surface)}
.mi-cuenta svg{width:17px;height:17px;flex:none}

@media (max-width:560px){
  /* El texto se esconde, no se borra: el nombre accesible sigue siendo
     «Mi cuenta» y quien navega por voz lo puede nombrar. */
  .mi-cuenta .texto-cuenta{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .mi-cuenta{padding:9px 8px}
}


/* ===== la-casa-brand.css ===== */
/* ==========================================================================
   LA CASA — spirits & coffee · Sistema "Sello apilado" (2a)
   Pegar este archivo en tu proyecto y linkearlo DESPUÉS de tu CSS actual.
   Fuentes: Archivo Black (display) / Archivo (texto) / IBM Plex Mono (datos)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* --- Color base (marca madre) --- */
  --lc-crudo:      #F4F3F0;  /* fondo general */
  --lc-tinta:      #1B1A18;  /* texto, sello, bordes */
  --lc-acido:      #D8DE3C;  /* acento único: CTA, hover, dato de Riku */
  --lc-gris:       #7A776F;  /* labels y datos secundarios */
  --lc-texto:      #4A473F;  /* cuerpo de texto */
  --lc-linea:      #D5D2CA;  /* divisores finos */
  --lc-linea-osc:  #3A3833;  /* divisores sobre fondo tinta */

  /* --- Color por producto --- */
  --lc-navegante:  #1B3A6B;  /* gin · azul marino · aventura */
  --lc-ferragosto: #8E1B2E;  /* vermut · bordó · encuentro */
  --lc-riku:       #2A2320;  /* café · negro/marrón · energía zen */

  /* Variantes de apoyo (solo fondos suaves o estados) */
  --lc-navegante-claro:  #E7EAF0;
  --lc-ferragosto-claro: #F2E5E7;
  --lc-riku-claro:       #EAE6E2;

  /* --- Tipografía --- */
  --lc-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --lc-texto-ff: 'Archivo', system-ui, sans-serif;
  --lc-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Marcas: principal / secundario / terciario --- */
  --lc-navegante:      #1B3A6B;  --lc-navegante-2: #3A6C9E;  --lc-navegante-3: #E7EAF0;
  --lc-ferragosto:     #8E1B2E;  --lc-ferragosto-2:#B23A47;  --lc-ferragosto-3:#F2E5E7;
  --lc-riku:           #2A2320;  --lc-riku-2:      #6B4B33;  --lc-riku-3:      #D8DE3C;

  /* --- Superficies · TEMA CLARO (default) --- */
  --lc-fondo:          #F4F3F0;
  --lc-fondo-tarjeta:  #FFFFFF;
  --lc-fondo-alterno:  #E9E7E1;
  --lc-fondo-destacado:#D8DE3C;
  --lc-txt:            #1B1A18;
  --lc-txt-2:          #6E6B63;
  --lc-borde-color:    #D5D2CA;

  /* --- Espaciado / geometría --- */
  --lc-sp-1: 8px;  --lc-sp-2: 14px; --lc-sp-3: 20px;
  --lc-sp-4: 40px; --lc-sp-5: 80px;
  --lc-max: 1440px;
  --lc-borde: 2px;      /* módulo del sistema: grosor de caja del sello */
  --lc-radio: 0;        /* el sistema NO usa esquinas redondeadas */
}

/* --------------------------------------------------------------- base --- */
body.lc {
  margin: 0;
  background: var(--lc-crudo);
  color: var(--lc-tinta);
  font-family: var(--lc-texto-ff);
  -webkit-font-smoothing: antialiased;
}
.lc-wrap { max-width: var(--lc-max); margin: 0 auto; padding-inline: var(--lc-sp-4); }
.lc a { color: var(--lc-tinta); text-decoration: none; }
.lc a:hover { color: var(--lc-navegante); }
.lc ::selection { background: var(--lc-acido); color: var(--lc-tinta); }

/* --------------------------------------------------- escala tipográfica --- */
.lc-h1 { font-family: var(--lc-display); font-size: clamp(52px, 7.4vw, 116px);
         line-height: .84; letter-spacing: -.05em; margin: 0; }
.lc-h2 { font-family: var(--lc-display); font-size: clamp(34px, 4.4vw, 64px);
         line-height: .88; letter-spacing: -.045em; margin: 0; }
.lc-h3 { font-family: var(--lc-display); font-size: 42px;
         line-height: .86; letter-spacing: -.05em; margin: 0; }
.lc-h4 { font-family: var(--lc-display); font-size: 26px;
         line-height: .9;  letter-spacing: -.04em; margin: 0; }
.lc-body  { font-size: 16px; line-height: 1.6; color: var(--lc-texto); text-wrap: pretty; }
.lc-small { font-size: 13.5px; line-height: 1.55; color: var(--lc-texto); }
/* Etiqueta mono: TODO dato técnico, nav, labels y botones */
.lc-mono  { font-family: var(--lc-mono); font-size: 11px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--lc-gris); }

/* -------------------------------------------------------------- sello --- */
.lc-sello {                       /* logo apilado, versión principal */
  display: inline-block; border: var(--lc-borde) solid currentColor;
  padding: 9px 11px 8px; color: var(--lc-tinta);
}
.lc-sello__nombre { display: block; font-family: var(--lc-display);
  font-size: 26px; line-height: .84; letter-spacing: -.045em; }
.lc-sello__desc { display: block; margin-top: 8px; padding-top: 7px;
  border-top: var(--lc-borde) solid currentColor;
  font-family: var(--lc-mono); font-size: 8px; letter-spacing: .16em; }
.lc-sello--sm .lc-sello__nombre { font-size: 15px; }
.lc-sello--sm { padding: 7px 9px 6px; }
.lc-sello--neg { color: var(--lc-crudo); }         /* sobre fondo de color */
.lc-monograma {                                    /* "LC" para favicon / 12mm */
  width: 52px; height: 52px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--lc-acido); color: var(--lc-tinta);
  font-family: var(--lc-display); font-size: 22px; letter-spacing: -.06em;
}

/* ------------------------------------------------------------ botones --- */
a.lc-btn, .lc a.lc-btn, .lc-btn { display: inline-block; padding: 15px 24px; font-family: var(--lc-mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border: var(--lc-borde) solid var(--lc-tinta); cursor: pointer; }
a.lc-btn--solido, .lc a.lc-btn--solido, .lc-btn--solido { background: var(--lc-tinta); color: var(--lc-crudo); }
a.lc-btn--solido:hover, .lc a.lc-btn--solido:hover, .lc-btn--solido:hover { background: var(--lc-navegante); border-color: var(--lc-navegante); color: var(--lc-crudo); }
a.lc-btn--linea, .lc a.lc-btn--linea, .lc-btn--linea { background: transparent; color: var(--lc-tinta); }
.lc-btn--linea:hover { background: var(--lc-acido); }
a.lc-btn--acido, .lc a.lc-btn--acido, .lc-btn--acido { background: var(--lc-acido); border-color: var(--lc-acido); color: var(--lc-tinta); }

/* ------------------------------------------- tema por producto (scope) --- */
/* Uso: <article class="lc-prod lc-prod--navegante"> … </article> */
.lc-prod { background: var(--lc-prod-bg); color: var(--lc-crudo); display: flex; flex-direction: column; }
.lc-prod--navegante  { --lc-prod-bg: var(--lc-navegante);  --lc-prod-cta: var(--lc-crudo); }
.lc-prod--ferragosto { --lc-prod-bg: var(--lc-ferragosto); --lc-prod-cta: var(--lc-crudo); }
.lc-prod--riku       { --lc-prod-bg: var(--lc-riku);       --lc-prod-cta: var(--lc-acido); }
.lc-prod__cuerpo { padding: var(--lc-sp-3); display: flex; flex-direction: column; gap: var(--lc-sp-2); }
.lc-prod__texto { font-size: 14.5px; line-height: 1.55; color: rgba(244,243,240,.82); }
.lc-prod__datos { display: flex; flex-direction: column; gap: 6px; padding-top: 12px;
  border-top: 1px solid rgba(244,243,240,.32); font-family: var(--lc-mono);
  font-size: 10.5px; letter-spacing: .1em; color: rgba(244,243,240,.72); }
.lc-prod__datos > div { display: flex; justify-content: space-between; }
a.lc-prod__cta, .lc a.lc-prod__cta, .lc-prod__cta { display: block; padding: 13px 0; text-align: center; font-family: var(--lc-mono);
  font-size: 11px; letter-spacing: .16em; background: var(--lc-prod-cta); color: var(--lc-prod-bg); }
.lc-prod--riku .lc-prod__cta { color: var(--lc-tinta); }
.lc-prod__cta:hover { background: var(--lc-acido); color: var(--lc-tinta); }

/* ------------------------------------------------------ estructura UI --- */
.lc-header { position: sticky; top: 0; z-index: 20; background: var(--lc-crudo);
  border-bottom: 1px solid var(--lc-tinta); }
.lc-header__inner { max-width: var(--lc-max); margin: 0 auto; padding: 14px var(--lc-sp-4);
  display: flex; align-items: center; gap: var(--lc-sp-4); }
.lc-nav { display: flex; gap: 26px; font-family: var(--lc-mono); font-size: 11px; letter-spacing: .16em; }
.lc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lc-sp-3); }
.lc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lc-sp-3); }
.lc-regla { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.lc-regla::after { content: ''; height: var(--lc-borde); flex: 1; background: var(--lc-tinta); }
.lc-seccion { padding-top: var(--lc-sp-5); }
.lc-oscuro { background: var(--lc-tinta); color: var(--lc-crudo); }
.lc-oscuro .lc-body { color: #9A9488; }
.lc-lista-fila { display: flex; align-items: center; gap: var(--lc-sp-3); padding: var(--lc-sp-3) 0;
  border-top: 1px solid var(--lc-linea); }
.lc-oscuro .lc-lista-fila { border-top-color: var(--lc-linea-osc); }
.lc-muestra { width: 14px; height: 14px; flex: none; }  /* cuadrito de color (ex .lc-chip) */
.lc-input { border: var(--lc-borde) solid var(--lc-tinta); border-right: none; padding: 16px 18px;
  font-family: var(--lc-mono); font-size: 12px; background: var(--lc-crudo);
  color: var(--lc-tinta); outline: none; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .lc-wrap, .lc-header__inner { padding-left: var(--lc-sp-3); padding-right: var(--lc-sp-3); }
  .lc-grid-3, .lc-grid-4 { grid-template-columns: 1fr; }
  .lc-h1 { font-size: clamp(40px, 12vw, 64px); }
  .lc-nav { display: none; }
  .lc-seccion { padding-top: var(--lc-sp-4); }
}

/* --------------------------------------------------------------- reglas --
   1. El SELLO nunca va en color: solo tinta sobre crudo, o crudo sobre color.
   2. Un solo color de producto por pieza. Nunca dos fondos de producto juntos.
   3. El ácido (#D8DE3C) es acento, no fondo de página: CTA, hover, dato de Riku,
      piezas de servicio (posavasos, cinta, delantal).
   4. Cero border-radius, cero sombras, cero degradados.
   5. Todo dato técnico (ABV, lote, tueste, formato) va en mono, mayúsculas,
      tracking .1–.16em. El texto corrido va en Archivo regular.
   6. Jerarquía de foto: siempre encuadre limpio sobre el color del producto.
   ----------------------------------------------------------------------- */

/* ======================================================== TEMA OSCURO ===
   Activar con <html data-tema="oscuro"> o dejar que siga al sistema.
   ====================================================================== */
[data-tema="oscuro"] {
  --lc-fondo:          #141312;
  --lc-fondo-tarjeta:  #1F1E1B;
  --lc-fondo-alterno:  #2A2825;
  --lc-fondo-destacado:#D8DE3C;   /* texto sobre destacado: var(--lc-tinta) */
  --lc-txt:            #F4F3F0;
  --lc-txt-2:          #A8A49B;
  --lc-borde-color:    #3A3833;
  /* las marcas suben un paso para mantener contraste sobre oscuro */
  --lc-navegante:      #3A6C9E;
  --lc-ferragosto:     #B23A47;
  --lc-riku:           #8A6A4F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --lc-fondo: #141312; --lc-fondo-tarjeta: #1F1E1B; --lc-fondo-alterno: #2A2825;
    --lc-txt: #F4F3F0; --lc-txt-2: #A8A49B; --lc-borde-color: #3A3833;
    --lc-navegante: #3A6C9E; --lc-ferragosto: #B23A47; --lc-riku: #8A6A4F;
  }
}

/* Superficies semánticas (funcionan igual en los dos temas) */
body.lc, .lc-fondo   { background: var(--lc-fondo); color: var(--lc-txt); }
.lc-tarjeta          { background: var(--lc-fondo-tarjeta); border: 1px solid var(--lc-borde-color); }
.lc-alterno          { background: var(--lc-fondo-alterno); }
.lc-destacado        { background: var(--lc-fondo-destacado); color: var(--lc-tinta); }
.lc-txt-2            { color: var(--lc-txt-2); }
.lc-chip             { display:inline-block; align-self:flex-start; padding:4px 8px; font-family:var(--lc-mono);
                       font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
                       background: var(--lc-fondo-destacado); color: var(--lc-tinta); }
.lc-chip--linea      { background:transparent; border:1px solid var(--lc-borde-color); color: var(--lc-txt-2); }


/* ===== la-casa-sitio.css ===== */
/* ==========================================================================
   LA CASA — aplicación al sitio real
   Se carga DESPUÉS de style.css y de la-casa-brand.css.

   Por qué existe este archivo y no se reescribió style.css entero:

   · `la-casa-brand.css` viene del diseñador y se copia verbatim, para poder
     reemplazarlo cuando mande una versión nueva sin perder ajustes.
   · El sitio ya tiene su propio sistema de tokens, que además el panel de
     administración edita. Traducir mis tokens a los valores de LA CASA hace
     que TODO lo adopte de una vez —la tienda, las notas, las páginas legales,
     el carrito— en vez de tener que reetiquetar clase por clase cada página.
   · Lo que sí se reescribe acá es el TRATAMIENTO de cada componente: cero
     radio, cero sombra, cero degradado, bordes de 2px, títulos en Archivo
     Black y todo dato técnico en mono.
   ========================================================================== */

/* ============================================================== 1. TOKENS ==
   El puente entre los dos sistemas. A la izquierda mis nombres, a la derecha
   los valores de LA CASA. */
:root{
  /* Superficies */
  --surface:            #F4F3F0;   /* crudo */
  --surface-dim:        #E9E7E1;
  --surface-bright:     #FFFFFF;
  --sc-lowest:          #FFFFFF;
  --sc-low:             #E9E7E1;
  --sc:                 #E9E7E1;
  --sc-high:            #E1DED7;
  --sc-highest:         #D5D2CA;

  /* Texto y líneas */
  --on-surface:         #1B1A18;   /* tinta */
  --on-surface-variant: #6E6B63;
  --outline:            #7A776F;   /* gris */
  --outline-variant:    #D5D2CA;   /* línea */

  /* El color de los marcadores [[COMPLETAR]]. Aparte de `--error`, que es el
     bordó de Ferragosto y de noche no llega al contraste mínimo. */
  --falta:              #8E1B2E;

  /* Marca. En LA CASA el botón sólido es tinta, no un color: el único
     acento es el ácido, y se reserva para CTA y detalles. */
  /* Estos tres son los VALORES POR DEFECTO del sistema. El panel los pisa
     inyectando --marca-*, así que todo lo que sigue deriva de ellos en vez de
     repetir el literal: si no, editar la paleta desde el panel no hace nada. */
  --marca-primaria:     #1B1A18;
  --marca-secundaria:   #7A776F;
  --marca-terciaria:    #6E6B63;
  --primary:            var(--marca-primaria);
  --primary-hover:      #1B3A6B;   /* el sólido vira a navegante, no a un negro más negro */
  --on-primary:         #F4F3F0;
  --secondary:          var(--marca-secundaria);
  --tertiary:           var(--marca-terciaria);
  --error:              #8E1B2E;   /* el bordó de Ferragosto hace de rojo del sistema */

  /* --- Los dos anclas de la paleta de La Casa --- */
  --tinta:  #1B1A18;   /* el oscuro de la casa: texto, sellos, bordes */
  --crema:  #EFE7D8;   /* el claro cálido (la panna de Ferragosto) */
  /* La superficie general se queda en el crudo #F4F3F0, no en la crema: la
     crema es la panna de Ferragosto, y usar el color de una de las tres marcas
     como fondo de la casa inclina el sitio hacia esa marca. El crudo es neutro
     y deja que los tres acentos se vean como lo que son. La crema queda
     disponible como token para piezas cálidas. */

  /* --- Paleta por marca ---
     Un acento por marca, cada uno con su clara para fondos suaves.

     Ojo con de dónde sale cada cosa: el color que PINTA los paneles de marca
     de la portada, la cabecera de los planes y el recuadro de los productos
     sin foto NO sale de acá, sale del panel (Marcas → Color), que lo inyecta
     como `--color-marca`. Estos tokens son para todo lo demás —acentos,
     bordes, detalles— y para que el CSS tenga de dónde agarrarse. Si cambiás
     uno acá, cambialo también en el panel o van a discrepar. */

  /* Ferragosto: los cuatro valores de marca. */
  --ferragosto-rosso:   #7A2420;   /* rosso vermut */
  --ferragosto-oro:     #B98A3C;
  --ferragosto-nero:    #100D0B;
  --ferragosto-panna:   #EFE7D8;

  /* Navegante: el azul de la botella, el mismo que trajo el handoff. */
  --navegante-azul:     #1B3A6B;
  --navegante-claro:    #E7EAF0;

  /* Riku: el tostado medio del handoff, no el oscuro. El #2A2320 que venía
     antes está a 1,13:1 de la tinta, o sea que se lee como negro: con tres
     marcas, dos quedaban iguales. Este contrasta 2,22:1 contra la tinta y
     7,06:1 con el texto en crudo que lleva encima. */
  --riku-tostado:       #6B4B33;
  --riku-claro:         #EAE6E2;

  /* Colores de producto: derivan de la paleta de arriba, no la repiten. Tocás
     el token de la marca y cambia en todo el sitio. */
  --marca-riku:         var(--riku-tostado);
  --marca-navegante:    var(--navegante-azul);
  --marca-ferragosto:   var(--ferragosto-rosso);
  /* El único acento del sistema. Deriva del panel igual que los otros tres:
     si no, editarlo desde "Colores de marca" no hacía nada y el amarillo
     quedaba clavado en el CSS. El literal es el valor de LA CASA. */
  --acido:              var(--marca-acento, #D8DE3C);

  /* Tipografía: display para títulos, Archivo para texto. `--serif` conserva
     el nombre por compatibilidad con el resto del CSS, aunque ya no lo sea. */
  --serif: 'Archivo Black','Archivo',system-ui,sans-serif;
  --sans:  'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:  'IBM Plex Mono',ui-monospace,monospace;

  /* Escala de LA CASA */
  --display-lg: clamp(52px, 7.4vw, 116px);
  --display-md: clamp(34px, 4.4vw, 64px);
  --headline-lg: clamp(34px, 4.4vw, 64px);
  --headline-md: 42px;
  --headline-sm: 26px;
  --title-lg:    22px;
  --body-lg:     16px;
  --body-md:     13.5px;
  --label-sm:    11px;

  /* --- Espaciado ---
     La escala del handoff, con los mismos cinco pasos que usa el diseñador en
     `la-casa-brand.css`. Los nombres de abajo son los que ya usaba el sitio y
     se conservan para no reescribir cuarenta reglas: apuntan a la escala. */
  --esp-1: 8px;
  --esp-2: 14px;
  --esp-3: 20px;
  --esp-4: 40px;
  --esp-5: 80px;

  --gutter:      var(--esp-3);   /* separación entre columnas de una grilla */
  --margen:      var(--esp-4);   /* aire lateral de la página */
  --gap-seccion: var(--esp-5);   /* respiro entre secciones */
  --ancho: 1440px;
  --nav-alto: auto;

  /* --- Radios y sombras ---
     En cero y en none a propósito: es la regla 4 del sistema. Están como
     variables igual, para que se puedan prender desde un solo lugar si alguna
     vez el sistema cambia de idea. */
  --round: 0;
  --sombra: none;
  --sombra-alta: none;
}

[data-tema="oscuro"]{
  --surface:            #141312;
  --surface-dim:        #0F0E0D;
  --surface-bright:     #1F1E1B;
  --sc-lowest:          #1F1E1B;
  --sc-low:             #2A2825;
  --sc:                 #2A2825;
  --sc-high:            #33302C;
  --sc-highest:         #3A3833;
  --on-surface:         #F4F3F0;
  --on-surface-variant: #A8A49B;
  --outline:            #A8A49B;
  --outline-variant:    #3A3833;
  --falta:              #FF8A9B;   /* 7,2:1 sobre el fondo oscuro */

  --marca-primaria:     #F4F3F0;
  --primary:            #F4F3F0;
  --primary-hover:      #D8DE3C;
  --on-primary:         #1B1A18;
  --secondary:          #A8A49B;
  --tertiary:           #A8A49B;
  --error:              #B23A47;

  /* Las marcas suben un paso: el principal no contrasta sobre fondo oscuro. */
  --marca-riku:         #6B4B33;   /* secundario documentado: como fondo, el #8A6A4F deja el crudo en 4,4:1 */
  --marca-navegante:    #3A6C9E;
  --marca-ferragosto:   #B23A47;
}
/* ---------- Qué color es esto, para los controles del sistema ----------
   Un desplegable abierto NO lo dibuja la página: lo dibuja el navegador. Lo
   mismo el calendario de un campo de fecha, las barras de desplazamiento y
   el relleno de un campo recordado. Sin `color-scheme` los dibuja todos en
   claro, así que en tema oscuro la lista de un `select` salía con el texto
   claro de la página sobre el fondo blanco del sistema, ilegible.

   Va en la raíz y no en cada control: el sitio tiene siete desplegables y el
   problema los alcanzaba a todos. Los `option` se pintan además a mano,
   porque no todos los navegadores los derivan de `color-scheme`. */
:root[data-tema="oscuro"]{ color-scheme:dark }
:root[data-tema="claro"] { color-scheme:light }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){ color-scheme:dark }
}
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]){ color-scheme:light }
}
body.lc select option{ background:var(--surface); color:var(--on-surface) }

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --surface:#141312; --surface-dim:#0F0E0D; --surface-bright:#1F1E1B;
    --sc-lowest:#1F1E1B; --sc-low:#2A2825; --sc:#2A2825; --sc-high:#33302C; --sc-highest:#3A3833;
    --on-surface:#F4F3F0; --on-surface-variant:#A8A49B;
    --outline:#A8A49B; --outline-variant:#3A3833; --falta:#FF8A9B;
    --marca-primaria:#F4F3F0; --primary:#F4F3F0; --primary-hover:#D8DE3C; --on-primary:#1B1A18;
    --secondary:#A8A49B; --tertiary:#A8A49B; --error:#B23A47;
    --marca-riku:#6B4B33; --marca-navegante:#3A6C9E; --marca-ferragosto:#B23A47;
  }
}

/* ====================================================== 2. REGLA GENERAL ==
   Regla 4 del sistema: cero radio, cero sombra, cero degradado. Se barre de
   una vez en lugar de perseguir cuarenta declaraciones sueltas. */
body.lc :where(*, *::before, *::after){
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* `la-casa-brand.css` pinta TODO enlace con `.lc a{ color:var(--lc-tinta) }`, y
   la tinta no cambia con el tema: es el negro de la marca, pensado para leerse
   sobre crudo o sobre el ácido. En tema oscuro eso deja enlaces negros sobre
   fondo negro —el menú móvil entero, los enlaces dentro de las respuestas de
   las preguntas, el del formulario de baja en la nota de los planes, los de la
   banda oscura—.

   El sitio ya tenía su regla, en style.css: un enlace toma el color de lo que
   lo rodea. Se restablece acá, con más peso, sin tocar el archivo del
   diseñador, que se reemplaza entero cuando manda una versión nueva. Las
   reglas que sí eligen un color a propósito (el pie, las redes) son más
   específicas y siguen mandando. */
body.lc a{ color:inherit }

/* Con el color heredado, un enlace metido en un párrafo queda igual que el
   texto que lo rodea. LA CASA no le da un color propio —el ácido no contrasta
   sobre crudo y el azul de Navegante no es un color de texto del sistema—, así
   que se marcan con subrayado: no depende del color, funciona en los dos temas
   y no lo confunde nadie con un renglón cualquiera. */
body.lc .nota a,
body.lc .faq a,
body.lc .doc a,
body.lc .cuerpo-libre a{ text-decoration:underline; text-underline-offset:3px }

body.lc{
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--sans);
  padding-top: 0;
}

/* ==================================================== 3. TIPOGRAFÍA BASE == */
body.lc h1, body.lc h2, body.lc h3, body.lc h4{
  font-family: var(--serif);
  font-weight: 400;              /* Archivo Black ya es negra: 700 la deforma */
  text-transform: uppercase;
  text-wrap: balance;
}
body.lc h1{ font-size:var(--display-lg); line-height:.84; letter-spacing:-.05em }
body.lc h2{ font-size:var(--headline-lg); line-height:.88; letter-spacing:-.045em }
body.lc h3{ font-size:var(--headline-sm); line-height:.95; letter-spacing:-.04em }
body.lc h4{ font-size:var(--title-lg); line-height:.9; letter-spacing:-.04em }

body.lc .lead{ font-size:16px; line-height:1.6; color:var(--on-surface-variant); max-width:62ch }
body.lc p{ text-wrap:pretty }

/* Todo dato técnico va en mono, mayúscula y con tracking. */
body.lc .eyebrow,
body.lc .label,
body.lc .marca-chip,
body.lc .plan .marca,
body.lc .producto .marca,
body.lc .nav .enlaces a,
body.lc .paso .n,
body.lc .pie-sitio h4,
body.lc .plan .antes,
body.lc .nota,
body.lc .aclara{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 400;
}
body.lc .eyebrow{ font-size:11px; letter-spacing:.2em; color:var(--tertiary); margin-bottom:14px }
body.lc .nota,
body.lc .aclara{ font-size:12px; letter-spacing:.08em; line-height:1.8; color:var(--on-surface-variant) }
/* La aclaración sobre un bloque invertido se resuelve más abajo, en un solo
   lugar: había tres reglas para lo mismo en tres partes del archivo y ganaba
   la última, que era la más oscura. */

/* Regla horizontal que acompaña al título de cada sección. */
body.lc .modulo > .wrap > h2{ position:relative }
body.lc .cabecera-lc{ display:flex; align-items:baseline; gap:16px; margin:0 0 28px }
body.lc .cabecera-lc::after{ content:''; height:2px; flex:1; background:currentColor; opacity:.9 }

/* ========================================================== 4. BOTONES ==
   Mono, mayúscula, caja de 2px. El selector lleva `a.` para ganarle al color
   de link base: si no, el texto del botón hereda y queda invisible. */
body.lc .btn,
body.lc a.btn{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 15px 24px;
  border: 2px solid currentColor;
  min-height: 0;
  transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
body.lc .btn-lleno,  body.lc a.btn-lleno{ background:var(--primary); color:var(--on-primary); border-color:var(--primary) }
body.lc .btn-lleno:hover, body.lc a.btn-lleno:hover{ background:var(--marca-navegante); border-color:var(--marca-navegante); color:#F4F3F0 }
body.lc .btn-contorno, body.lc a.btn-contorno{ background:transparent; color:var(--primary); border-color:var(--primary) }
body.lc .btn-contorno:hover, body.lc a.btn-contorno:hover{ background:var(--acido); color:#1B1A18; border-color:var(--acido) }
body.lc .btn-chico{ padding:11px 18px; font-size:11px }
body.lc .btn:active{ transform:none }
body.lc .btn:hover{ transform:none }   /* el sistema es seco: sin levantar */

/* El CTA ácido, reservado para el llamado principal. */
body.lc .btn-acido, body.lc a.btn-acido{
  background:var(--acido); border-color:var(--acido); color:#1B1A18;
}
body.lc .btn-acido:hover{ background:#1B1A18; border-color:#1B1A18; color:var(--acido) }

/* ============================================================ 5. CHIPS == */
body.lc .marca-chip,
body.lc .lc-chip{
  display:inline-block; align-self:flex-start;
  padding:4px 8px; font-size:9.5px; letter-spacing:.14em;
  background:var(--acido); color:#1B1A18; border:0;
}
body.lc .lc-chip--linea{ background:transparent; border:1px solid var(--outline-variant); color:var(--on-surface-variant) }

/* ====================================================== 6. BARRA SUPERIOR ==
   Deja de ser fija y translúcida: en LA CASA es pegajosa, opaca y con una
   línea de tinta abajo. El desenfoque de fondo es un efecto que el sistema
   no usa. */
body.lc .nav{
  position: sticky;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--on-surface);
  height: auto;
}
body.lc .nav .interior{
  max-width: var(--ancho);
  padding: 14px var(--margen);
  gap: var(--margen);
  height: auto;
}
body.lc .nav .enlaces{ gap:26px }
body.lc .nav .enlaces a{
  font-size:11px; letter-spacing:.16em; color:var(--on-surface); padding-block:0;
}
body.lc .nav .enlaces a::after{ display:none }   /* el subrayado animado no es del sistema */
body.lc .nav .enlaces a:hover{ color:var(--marca-navegante) }
body.lc .nav .utilidad{ margin-left:auto }

/* El sello: caja de 2px con el nombre apilado. Reemplaza al texto corrido. */
body.lc .nav .marca{
  display:inline-block;
  border:2px solid currentColor;
  padding:7px 9px 6px;
  font-family:var(--serif);
  font-size:15px;
  line-height:.84;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--on-surface);
  min-height:0;
  white-space:normal;
  max-width:none;
}
body.lc .nav .marca .sep{ display:none }         /* el sello apila, no separa con puntos */
body.lc .nav .marca.con-logo{ border:0; padding:0 }

/* Aviso legal superior: banda de tinta a sangre. */

/* Controles de la barra */
body.lc .tema,
body.lc .abrir-menu,
body.lc .bolsa{
  border:2px solid var(--on-surface); color:var(--on-surface);
  background:transparent; min-height:0;
}
body.lc .bolsa{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:11px 16px }
body.lc .bolsa .cuenta{ background:var(--acido); color:#1B1A18; font-family:var(--mono) }
body.lc .tema:hover, body.lc .abrir-menu:hover, body.lc .bolsa:hover{
  background:var(--acido); color:#1B1A18; border-color:var(--acido);
}
body.lc .menu-movil{
  background:var(--surface); border-bottom:2px solid var(--on-surface);
  /* El menú es fixed y el JS le pone `top` con la posición visual del nav
     (getBoundingClientRect). Con el nav sticky, `position:absolute;top:100%`
     lo anclaba al nav en el flujo del documento: si el visitante scrolleó,
     el menú quedaba arriba de la página y no se veía. */
  position:fixed; top:0; left:0; right:0;
  overflow-y:auto;
}
body.lc .menu-movil a{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--outline-variant);
}

/* ============================================================== 7. HERO == */
body.lc .modulo-portada{ padding-top:64px }
body.lc .modulo-portada .contenido{ max-width:none }
/* El deslizador del panel vuelve a mandar. El min() lo acota para que en
   móvil no desborde. */
body.lc .modulo-portada h1{ max-width:min(var(--ancho-titulo, 20ch), 100%) }
body.lc .modulo-portada .lead{ max-width:52ch }

/* Los tres paneles de marca, a color pleno. */
body.lc .firmas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; margin-top:40px; padding-top:0; border-top:0;
}
body.lc .firma{
  display:flex; flex-direction:column; gap:10px; padding:20px;
  color:#F4F3F0; min-width:0;
  /* --color-marca lo inyecta el panel por cada marca. El respaldo cubre una
     marca sin color cargado. */
  background:var(--color-marca, #1B1A18);
}
body.lc .firma .nombre{
  font-family:var(--serif); font-size:22px; letter-spacing:-.04em;
  text-transform:uppercase; color:#F4F3F0; margin:0;
}
body.lc .firma .que{ font-size:13px; line-height:1.5; color:rgba(244,243,240,.82) }
/* Los tres paneles ya miden lo mismo —la grilla los estira—, pero el que no
   tiene logo arrancaba con el nombre pegado arriba y los otros dos más abajo,
   así que los tres nombres quedaban en tres alturas distintas. Cuando el
   nombre es el primer elemento, o sea cuando no hay logo, se reserva el hueco
   del logo que falta. */
body.lc .firma .nombre:first-child::before{
  content:""; display:block; height:var(--logo-firma, 44px); margin-bottom:2px;
}
/* El alto y el fondo del logo se definen una sola vez, en el bloque de logos
   de marca del final. */
body.lc .firmas::before{ display:none }   /* la línea que se dibujaba ya no aplica */

/* =========================================================== 8. TARJETAS == */
body.lc .tarjeta{
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
  padding:24px; display:flex; flex-direction:column; gap:14px;
}
body.lc .tarjeta h3{ font-size:24px; line-height:.95; color:var(--on-surface) }
body.lc .tarjeta p{ font-size:14.5px; line-height:1.6; color:var(--on-surface-variant) }
body.lc .tarjeta .dato{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--acido); color:#1B1A18; padding:4px 8px; align-self:flex-start; margin:0;
}
body.lc a.tarjeta:hover{ transform:none; border-color:var(--on-surface) }

/* Banda comparativa */
body.lc .banda{
  background:var(--sc-low); color:var(--on-surface); border:0;
  margin-top:20px; padding:32px;
}
body.lc .banda strong{
  font-family:var(--serif); font-size:24px; letter-spacing:-.04em;
  line-height:1.05; text-transform:uppercase; display:block; margin-bottom:10px;
}
body.lc .banda p{ font-size:15px; line-height:1.6; color:var(--on-surface-variant) }
body.lc .banda .btn-contorno{ color:var(--on-surface); border-color:var(--on-surface) }

/* ============================================================== 9. PLANES == */
body.lc .plan{
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
  padding:0; display:flex; flex-direction:column;
}
body.lc .plan.destacado{ border:2px solid var(--on-surface) }
/* La cabecera de color mide lo mismo en todas las tarjetas, tenga logo,
   etiqueta, las dos cosas o ninguna. Antes cada combinación daba una altura
   distinta —con cuatro planes, cuatro alturas— y la fila se veía despareja.

   El alto reservado sale del alto de logo que se elige en el panel, así sigue
   siendo el mismo en todas cuando esa medida cambia. El contenido se apoya en
   el borde de abajo: los nombres de los cuatro planes quedan sobre la misma
   línea, que es lo que hace que se lean como una fila y no como cuatro cajas
   sueltas. La etiqueta se clava en la esquina, fuera del flujo, para no
   empujar nada. */
body.lc .plan .plan-top{
  position:relative;
  padding:20px; display:flex; flex-direction:column; gap:8px;
  justify-content:flex-end;
  min-height:calc(var(--logo-plan, 32px) + 130px);
  color:#F4F3F0; background:var(--color-marca, #1B1A18);
}

body.lc .plan .plan-top .marca{ font-size:11px; color:rgba(244,243,240,.82); margin:0 }
body.lc .plan .plan-top h3{ font-size:26px; letter-spacing:-.04em; color:#F4F3F0; margin:0 }
body.lc .plan .plan-cuerpo{ padding:20px; display:flex; flex-direction:column; gap:14px; flex:1 }
body.lc .plan .precio{
  font-family:var(--serif); font-size:38px; letter-spacing:-.045em; line-height:1;
  color:var(--on-surface); display:block;
}
body.lc .plan .precio .unidad{ display:none }   /* el sistema lo dice en la línea de abajo */
body.lc .plan .antes{
  font-size:11px; letter-spacing:.1em; color:var(--on-surface-variant);
  text-decoration:line-through; display:block; margin:0;
}
body.lc .plan .cadencia{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant); border:0; padding:0; margin:0;
}
body.lc .plan ul{ margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1 }
body.lc .plan li{
  font-size:14px; line-height:1.5; color:var(--on-surface-variant);
  padding-left:16px; position:relative;
}
body.lc .plan li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:7px; height:7px; background:var(--acido); border-radius:0;
}
body.lc .plan .acciones{ margin-top:auto }
body.lc .plan .acciones .btn{ text-align:center }
body.lc .plan:hover{ transform:none; border-color:var(--on-surface) }
body.lc .plan .insignia{
  position:absolute; top:0; left:0; transform:none; margin:0;
  background:var(--acido); color:#1B1A18;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; padding:4px 8px;
}

/* Selector de frecuencia */
body.lc .selector{ border:2px solid var(--on-surface); background:transparent; padding:0; gap:0 }
body.lc .selector button{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 20px; color:var(--on-surface); border-right:1px solid var(--outline-variant);
}
body.lc .selector button:last-child{ border-right:0 }
body.lc .selector button[aria-selected="true"]{ background:var(--on-surface); color:var(--surface) }
body.lc .selector button:active{ transform:none }
body.lc .detalle-frecuencia{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant);
}

/* Adicional cold brew */
body.lc .adicional{
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
  border-left:1px solid var(--outline-variant); padding:24px;
}
body.lc .adicional h3{ font-size:24px; margin:10px 0 8px }
body.lc .adicional p{ font-size:14.5px; color:var(--on-surface-variant) }

/* ====================================================== 10. PASOS Y LISTAS ==
   "Cómo funciona" deja de ser tarjetas y pasa a filas con regla: número mono
   a la izquierda, título al medio y descripción alineada a la derecha. */
body.lc .modulo-pasos .pasos{ display:flex; flex-direction:column; gap:0; margin-top:28px }
body.lc .paso{
  display:flex; align-items:center; gap:20px;
  padding:20px 0; border-top:1px solid var(--outline-variant);
  flex-wrap:wrap;
}
body.lc .paso:first-child{ border-top:2px solid var(--on-surface) }
body.lc .paso:last-child{ border-bottom:2px solid var(--on-surface) }
body.lc .paso .n{
  width:40px; flex:none; font-size:11px; letter-spacing:.16em;
  color:var(--on-surface-variant); margin:0;
}
body.lc .paso b{
  font-family:var(--serif); font-size:26px; line-height:.9; letter-spacing:-.04em;
  text-transform:uppercase; color:var(--on-surface); margin:0; flex:none;
}
body.lc .paso p{
  margin-left:auto; font-size:14.5px; line-height:1.55;
  color:var(--on-surface-variant); max-width:44ch; text-align:right; margin-bottom:0;
}
@media (max-width:900px){
  body.lc .paso{ align-items:flex-start; gap:12px }
  body.lc .paso p{ margin-left:0; text-align:left; max-width:none; flex-basis:100% }
}

/* El módulo de regalo conserva las tarjetas numeradas de la referencia. */
body.lc .modulo-pasos.con-tarjetas .pasos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
body.lc .modulo-pasos.con-tarjetas .paso{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
  padding:24px; margin:0;
}
body.lc .modulo-pasos.con-tarjetas .paso:first-child,
body.lc .modulo-pasos.con-tarjetas .paso:last-child{ border:1px solid var(--outline-variant) }
/* La tarjeta apila: número, título y texto, cada uno en su línea. Sin fijar
   `flex-basis` y `width` acá, el paso seguía comportándose como la fila del
   otro formato y el texto se iba al costado, fuera de la pantalla. */
body.lc .modulo-pasos.con-tarjetas .paso{ flex-direction:column; flex-wrap:nowrap; min-width:0 }
body.lc .modulo-pasos.con-tarjetas .paso > *{ flex:0 0 auto; width:100%; margin-left:0 }
body.lc .modulo-pasos.con-tarjetas .paso p{ margin-left:0; text-align:left; max-width:none; flex-basis:auto }
@media (max-width:900px){
  body.lc .modulo-pasos.con-tarjetas .pasos{ grid-template-columns:1fr }
}

/* ========================================================= 11. PREGUNTAS == */
body.lc .faq{ margin-top:28px; border-top:0 }
body.lc .faq details{ border-top:1px solid var(--outline-variant); border-bottom:0 }
body.lc .faq details:last-child{ border-bottom:1px solid var(--outline-variant) }
body.lc .faq summary{
  font-family:var(--serif); font-size:19px; letter-spacing:-.03em;
  text-transform:none; padding:20px 0; display:flex; gap:16px; align-items:baseline;
  color:var(--on-surface);
}
body.lc .faq summary::after{
  content:'+'; margin-left:auto; font-family:var(--mono); font-size:18px;
  border:0; width:auto; height:auto; transform:none; position:static; top:auto; right:auto;
}
body.lc .faq details[open] summary::after{ content:'–'; transform:none; top:auto }
body.lc .faq summary:hover{ color:var(--marca-navegante) }
body.lc .faq details p{ font-size:15px; line-height:1.6; color:var(--on-surface-variant); padding-bottom:22px }

/* ======================================================= 12. TESTIMONIOS == */
body.lc .testimonios{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px }
body.lc .testimonio{
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
  padding:24px; gap:14px;
}
body.lc .testimonio blockquote{
  font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--on-surface);
}
body.lc .testimonio blockquote::before,
body.lc .testimonio blockquote::after{ color:var(--on-surface-variant) }
body.lc .testimonio figcaption{ margin-top:auto; flex-direction:row; gap:8px; flex-wrap:wrap }
body.lc .testimonio .quien,
body.lc .testimonio .donde{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-surface-variant); font-weight:400;
}
@media (max-width:900px){ body.lc .testimonios{ grid-template-columns:1fr } }

/* ============================================ 13. MÓDULO OSCURO Y CTA ==
   La banda "empezá cuando quieras" va en tinta a sangre completa. */
body.lc .modulo-inverso,
body.lc .cta-final{
  --m-fondo:#1B1A18; --m-texto:#F4F3F0;
  background:#1B1A18; color:#F4F3F0;
}
body.lc .modulo-inverso .eyebrow,
body.lc .cta-final .eyebrow{ color:var(--acido); opacity:1 }
body.lc .modulo-inverso .lead,
body.lc .modulo-inverso p,
body.lc .cta-final .lead,
body.lc .cta-final p{ color:#9A9488 }
body.lc .modulo-inverso h2,
body.lc .cta-final h2{ max-width:24ch }
body.lc .modulo-inverso .btn-lleno,
body.lc .modulo-inverso a.btn-lleno,
body.lc .cta-final .btn-lleno,
body.lc .cta-final a.btn-lleno{ background:var(--acido); border-color:var(--acido); color:#1B1A18 }
body.lc .modulo-inverso .btn-lleno:hover,
body.lc .cta-final .btn-lleno:hover{ background:#F4F3F0; border-color:#F4F3F0; color:#1B1A18 }
body.lc .modulo-inverso .btn-contorno,
body.lc .modulo-inverso a.btn-contorno,
body.lc .cta-final .btn-contorno,
body.lc .cta-final a.btn-contorno{ color:#F4F3F0; border-color:#F4F3F0; background:transparent }
body.lc .modulo-inverso .btn-contorno:hover,
body.lc .cta-final .btn-contorno:hover{ background:var(--acido); border-color:var(--acido); color:#1B1A18 }
/* (el color de `.aclara` sobre fondo invertido está más abajo, junto al
   resto de los textos secundarios en negativo) */
body.lc .modulo-cta{ text-align:left }
body.lc .modulo-cta h2, body.lc .modulo-cta p{ margin-inline:0 }
body.lc .modulo-cta .acciones{ justify-content:flex-start }

/* =============================================================== 14. PIE == */
body.lc .pie-sitio{
  background:#1B1A18; color:#F4F3F0; border-top:0;
  padding-block:56px 0; margin-top:80px;
}
body.lc .pie-sitio .columnas{
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:40px; padding-inline:var(--margen); padding-bottom:32px;
}
body.lc .pie-sitio h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#7A776F; font-weight:400; margin-bottom:12px;
}
body.lc .pie-sitio a{ color:#F4F3F0; font-size:13.5px }
body.lc .pie-sitio a:hover{ color:var(--acido) }
body.lc .pie-sitio li a{ min-height:0; padding-block:4px }
body.lc .pie-sitio .relato p{ font-size:13.5px; line-height:1.6; color:#9A9488; max-width:44ch }
body.lc .pie-sitio .fiscales p{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#9A9488 }
/* El sello del pie va en negativo: crudo sobre tinta. */
body.lc .pie-sitio .relato .marca{
  display:inline-block; border:2px solid currentColor; padding:9px 11px 8px;
  font-family:var(--serif); font-size:26px; line-height:.84; letter-spacing:-.045em;
  text-transform:uppercase; color:#F4F3F0; margin-bottom:0;
}
body.lc .pie-sitio .relato .marca.con-logo{ border:0; padding:0 }
body.lc .pie-sitio .legal{
  /* 12 px, no 10: es el aviso de la Ley 24.788 y el titular del copyright.
     Son las dos líneas del sitio que no pueden estar en letra chica —ni por
     diseño ni por ley— y a 10 px el 46 % del texto de la página quedaba por
     debajo del mínimo legible. */
  border-top:1px solid #3A3833; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:none; color:#9A9488; line-height:1.7;
  margin-top:0; padding:18px var(--margen) 40px; max-width:var(--ancho);
}
body.lc .redes a{ border:1px solid #3A3833; color:#F4F3F0 }
body.lc .redes a:hover{ background:var(--acido); border-color:var(--acido); color:#1B1A18 }
body.lc .arrepentimiento{
  background:transparent; border:2px solid #F4F3F0; color:#F4F3F0;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
body.lc .arrepentimiento:hover{ background:var(--acido); border-color:var(--acido); color:#1B1A18 }
/* --- Newsletter ---
   El formulario ES `.newsletter` y adentro tiene una `.fila`. Las reglas
   apuntaban a `.newsletter form`, que no existe: nunca se aplicaron. Lo que sí
   se aplicaba era el `width:100%` del botón, pensado para ese apilado que
   nunca ocurrió, y dentro de la fila horizontal le comía todo el ancho al
   campo —el input quedaba en 32 px y el botón en 620—. Pasaba en el pie de
   las doce páginas, en escritorio.

   Ahora: el campo se estira, el botón ocupa lo que necesita, y recién abajo de
   520 px se apilan, que es donde el campo dejaría de entrar. */
body.lc .newsletter .fila{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap }
body.lc .newsletter input{
  border:2px solid #F4F3F0; background:transparent; color:#F4F3F0;
  font-family:var(--mono); font-size:12px; padding:16px 18px;
  flex:1 1 200px; min-width:0;
}
body.lc .newsletter input::placeholder{ color:#7A776F }
body.lc .newsletter .btn{
  flex:0 0 auto; background:var(--acido); border-color:var(--acido); color:#1B1A18;
}
@media (max-width:520px){
  body.lc .newsletter .fila{ flex-direction:column; gap:0 }
  body.lc .newsletter input{ border-bottom:none }
  body.lc .newsletter .btn{ width:100% }
}
body.lc .pie-sitio .data-fiscal img{ background:#F4F3F0 }
@media (max-width:900px){
  body.lc .pie-sitio .columnas{ grid-template-columns:1fr; gap:32px }
}

/* ================================================ 15. TIENDA Y CARRITO ==
   El rediseño no toca la funcionalidad, pero la tienda comparte componentes
   con la landing y tiene que hablar el mismo idioma. */
body.lc .producto{ background:var(--sc-lowest); border:1px solid var(--outline-variant) }
body.lc .producto:hover{ transform:none; border-color:var(--on-surface) }
body.lc .producto:hover .imagen img,
body.lc .producto:hover .imagen .logo-marca{ transform:none }
body.lc .producto .imagen{ background:var(--color-marca, #1B1A18) }
body.lc .producto .marca{ font-size:9.5px; letter-spacing:.14em; color:var(--on-surface-variant) }
body.lc .producto h3{ font-family:var(--serif); font-size:20px; line-height:.95; letter-spacing:-.03em }
body.lc .producto .desc{ font-size:14px; line-height:1.55; color:var(--on-surface-variant) }
body.lc .producto .precio{ font-family:var(--serif); font-size:26px; letter-spacing:-.04em }
body.lc .producto .nota-frio{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--acido); color:#1B1A18;
}
body.lc .producto .agotado{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase }

body.lc .filtros button{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:2px solid var(--on-surface); color:var(--on-surface); background:transparent;
}
body.lc .filtros button:hover{ transform:none; background:var(--acido); border-color:var(--acido); color:#1B1A18 }
body.lc .filtros button[aria-pressed="true"]{ background:var(--on-surface); border-color:var(--on-surface); color:var(--surface) }

body.lc .panel{ background:var(--surface); border-left:2px solid var(--on-surface) }
body.lc .panel .cabecera{ border-bottom:1px solid var(--on-surface) }
body.lc .panel .cabecera h2{ font-size:26px }
body.lc .panel .pie{ background:var(--sc-lowest); border-top:1px solid var(--on-surface) }
body.lc .panel .total{ font-family:var(--serif); font-size:26px; letter-spacing:-.04em; text-transform:uppercase }
body.lc .opcion-envio{ border:1px solid var(--outline-variant); background:var(--surface) }
body.lc .opcion-envio.elegida{ border-color:var(--on-surface); background:var(--sc-low) }
body.lc .opcion-envio .nombre{ font-size:13.5px }
body.lc .opcion-envio .desc,
body.lc .opcion-envio .precio,
body.lc .panel .detalle .fila{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
body.lc .cantidad{ border:1px solid var(--outline-variant); background:var(--surface) }
body.lc .linea .nombre{ font-size:14px }
body.lc .linea .subtotal{ font-family:var(--serif); letter-spacing:-.03em }
body.lc .aviso-carrito{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase }

/* ============================================ 16. FORMULARIOS Y LEGALES == */
body.lc .form{ background:var(--sc-lowest); border:1px solid var(--outline-variant); padding:32px }
body.lc .campo label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .campo input, body.lc .campo select, body.lc .campo textarea{
  border:2px solid var(--on-surface); background:var(--surface); color:var(--on-surface);
  font-family:var(--sans); font-size:15px; padding:14px 16px;
}
body.lc .campo input:focus, body.lc .campo select:focus, body.lc .campo textarea:focus{
  border-color:var(--marca-navegante); outline:2px solid var(--acido); outline-offset:1px;
}
body.lc .campo .ayuda{ font-size:13px; color:var(--on-surface-variant) }
body.lc .error-campo{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase }
body.lc .estado-envio{ border:2px solid currentColor; font-size:13.5px }
body.lc .recuadro{
  background:var(--sc-low); border:0; border-left:2px solid var(--on-surface); padding:24px 28px;
}
body.lc .recuadro.acento{ border-left-color:var(--acido) }
body.lc .doc h1{ font-size:var(--display-md) }
body.lc .doc h2{ font-size:32px }
body.lc .doc h3{ font-size:22px }
body.lc .doc .actualizado{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase }
body.lc .portada-doc{ background:var(--sc-low) }

/* ================================================= 17. VARIOS Y ARREGLOS == */
/* El brillo del esqueleto era un degradado: la regla 4 no los admite.
   Se reemplaza por un latido de opacidad plano. */
body.lc .esqueleto{ background:var(--sc-low); border:1px solid var(--outline-variant) }
body.lc .esqueleto::after{ background:none; animation:none }
body.lc .esqueleto{ animation:lc-latido 1.4s ease-in-out infinite }
@keyframes lc-latido{ 0%,100%{opacity:1} 50%{opacity:.55} }
@media (prefers-reduced-motion:reduce){ body.lc .esqueleto{ animation:none } }

body.lc .volver-arriba{
  background:var(--acido); color:#1B1A18; border:2px solid #1B1A18;
}
body.lc .volver-arriba:hover{ background:#1B1A18; color:var(--acido); border-color:#1B1A18; transform:none }
body.lc .skip{ background:var(--acido); color:#1B1A18; font-family:var(--mono); font-size:11px; letter-spacing:.14em }
body.lc .puerta{ background:var(--surface) }
body.lc .puerta .aviso{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; line-height:1.6 }

/* El sello de la casa preside la puerta: es la primera pieza del sistema que
   ve cualquiera que entra. Misma caja de 2 px que en la barra, más grande.
   Con logo cargado la caja sobra: el logo trae su propia forma. */
body.lc .sello-puerta{
  display:inline-block; border:2px solid currentColor;
  padding:12px 16px 10px; margin-bottom:28px;
  font-family:var(--serif); font-size:22px; line-height:.84;
  letter-spacing:-.045em; text-transform:uppercase;
}
body.lc .sello-puerta.con-logo{ border:0; padding:0 }
body.lc .puerta h2{ font-size:clamp(30px,6vw,46px); line-height:.9 }
body.lc .enlace-simple{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
body.lc .sin-conexion{ background:#1B1A18; color:#F4F3F0; border:2px solid var(--acido) }
body.lc .selector, body.lc .filtros button, body.lc .btn{ border-radius:0 }

/* Foco visible sobre ácido, como pide el handoff. */
body.lc :focus-visible{ outline:3px solid var(--acido); outline-offset:2px }

/* ================================================= 18. ANCHO Y GRILLAS == */
body.lc .wrap{ max-width:var(--ancho); padding-inline:var(--margen) }
body.lc .wrap-angosto{ max-width:900px; padding-inline:var(--margen) }
body.lc .modulo{ padding-block:80px 0 }
body.lc .modulo:last-child{ padding-bottom:80px }
body.lc .modulo-inverso{ padding-block:80px }
body.lc .tarjetas{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
body.lc .planes{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
body.lc .catalogo{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }

/* La grilla del sistema es de tres columnas y bajaba a una de golpe. Entre 620
   y 900 px —una tablet en vertical, un teléfono grande apaisado, una ventana a
   media pantalla— entran dos de sobra, y con una sola el catálogo son once
   fichas con su foto cuadrada, una abajo de la otra.

   Los paneles de marca no acompañan: son tres, y dos arriba con uno suelto
   abajo desordena la tira más de lo que la ordena. Se quedan apilados. */
@media (max-width:900px){
  body.lc{ --margen:20px }
  body.lc .tarjetas,
  body.lc .planes,
  body.lc .catalogo{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  body.lc .firmas{ grid-template-columns:1fr }
  body.lc h1{ font-size:clamp(38px,11vw,60px) }
}
@media (max-width:620px){
  body.lc .tarjetas,
  body.lc .planes{ grid-template-columns:1fr }
  /* El catálogo se queda en dos: una ficha por fila obliga a scrollear once
     veces para ver once productos. */
  body.lc .catalogo{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  body.lc .catalogo .cuerpo{ padding:14px 12px 16px }
  body.lc .catalogo h3{ font-size:15px }
  body.lc .catalogo .desc{ display:none }
}

/* El sello apila el nombre. El separador "·" del markup se convierte en un
   salto de línea en vez de borrarse: así el texto sigue siendo el mismo y no
   hubo que reescribir la marca en las doce páginas. */
body.lc .nav .marca .sep,
body.lc .pie-sitio .relato .marca .sep{
  display:block; font-size:0; line-height:0; height:0; margin:0; overflow:hidden;
}

/* ==================================================== 19. AJUSTES FINOS ==
   Correcciones detectadas al ver la página renderizada. */

/* Archivo Black no tiene itálica real: el navegador la sintetiza inclinando
   las letras, y en un título de 100px se nota como un error. El destacado
   del H1 se distingue por el aire, no por la inclinación. */
body.lc h1 em,
body.lc .modulo-portada h1 em{ font-style:normal }

/* El sello es una caja compacta, no una barra: sin esto el elemento de
   grilla se estira a toda la columna. */
body.lc .nav .marca{ justify-self:start }
body.lc .pie-sitio .relato .marca{ align-self:flex-start }

/* ---------- Logos de marca ----------

   El logo vuelve al panel: es un campo del administrador y tiene que hacer
   algo. Va sin fondo propio, para no meter un segundo color en la pieza —el
   panel de marca YA es un color pleno—, y su alto lo decide el panel:
   `--logo-firma` y `--logo-plan` los inyecta contenido.js desde `identidad`.
   Los valores de respaldo son los del sistema, para cuando el JSON no trae
   la medida.

   Los selectores repiten el tema a propósito. style.css pinta un fondo claro
   detrás de estos logos en tema oscuro (pensado para un logo con fondo blanco
   sobre superficie oscura) y esa regla pesa más que `body.lc .firma .logo`:
   ganaba, y dentro de la tarjeta de marca aparecía un recuadro gris que no es
   de nadie. Acá no hace falta ese fondo, porque el logo nunca está sobre la
   superficie: está sobre el color de su propia marca. */
body.lc .firma .logo{
  display:block; width:auto; height:var(--logo-firma, 44px);
  margin-bottom:2px; background:transparent; padding:0;
}
:root[data-tema="oscuro"] body.lc .firma .logo,
:root[data-tema="claro"]  body.lc .firma .logo{ background:transparent; padding:0 }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .firma .logo{ background:transparent; padding:0 }
}

/* Lo mismo para el sello del sitio: bajo LA CASA la barra ya es una pieza de
   un solo color y el recuadro claro se veía como un parche pegado. */
:root[data-tema="oscuro"] body.lc .logo-sitio,
:root[data-tema="claro"]  body.lc .logo-sitio{ background:transparent; padding:0 }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .logo-sitio{ background:transparent; padding:0 }
}

/* El pie va pegado a la última sección: el sistema no deja aire muerto. */
body.lc .pie-sitio{ margin-top:0 }
body.lc .modulo:last-child{ padding-bottom:80px }
body.lc .modulo-inverso + .pie-sitio{ margin-top:0 }

/* Textos secundarios sobre tinta. El gris de etiquetas da 3,9:1 contra ese
   fondo, por debajo del mínimo; este da 8,89:1.

   La `opacity` que traía `style.css` se anula acá: atenuar un texto con
   opacidad baja el contraste igual que elegir un color más apagado, porque el
   navegador lo mezcla con el fondo. Con el gris claro al 72 % quedaba en
   3,62:1, o sea peor que antes de aclararlo. Si hay que atenuar, se atenúa
   eligiendo el color, que es lo único que se puede medir. */
body.lc .modulo-inverso .aclara,
body.lc .modulo-inverso .nota,
body.lc .modulo-cta .aclara,
body.lc .cta-final .aclara,
body.lc .pie-sitio .legal,
body.lc .pie-sitio h4{ color:#BDB9B0; opacity:1 }

/* Aire entre el título y la bajada de la banda oscura. */
body.lc .modulo-inverso .lead{ margin-top:16px }
body.lc .modulo-inverso .acciones{ margin-top:26px }

/* Regla 1 del sistema: sobre un fondo de color pleno el texto va SIEMPRE en
   crudo. El panel inyecta el color de cada marca sobre `.firma .nombre` con
   una especificidad alta para el tema oscuro, y eso dejaba el nombre en su
   propio color sobre su propio fondo: 1,6:1 de contraste, ilegible. Estos
   selectores le ganan sin tocar el generador, que sigue sirviendo para el
   resto del sitio. */
:root[data-tema="oscuro"] body.lc .firmas .firma .nombre,
:root[data-tema="claro"]  body.lc .firmas .firma .nombre{ color:#F4F3F0 }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .firmas .firma .nombre{ color:#F4F3F0 }
}
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]) body.lc .firmas .firma .nombre{ color:#F4F3F0 }
}

/* Igual que en los paneles de marca: sobre la cabecera de color, la volanta
   del plan tiene que ir en crudo. La regla inyectada por el panel le ganaba
   en tema oscuro y dejaba la marca en 1,9:1. */
:root[data-tema="oscuro"] body.lc .plan .plan-top .marca,
:root[data-tema="claro"]  body.lc .plan .plan-top .marca{ color:rgba(244,243,240,.82) }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .plan .plan-top .marca{ color:rgba(244,243,240,.82) }
}
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]) body.lc .plan .plan-top .marca{ color:rgba(244,243,240,.82) }
}

/* El logo dentro de la tarjeta de plan va sobre la cabecera de color: sin
   fondo propio, para no meter un segundo color en la pieza. */
/* `align-self` es lo que lo alinea con el nombre: en una columna flex, un
   elemento sin ancho propio se estira a todo el ancho y la imagen queda
   centrada adentro, desalineada del texto que tiene debajo. */
body.lc .plan .plan-top .logo-marca{
  background:transparent; padding:0; margin-bottom:4px;
  height:var(--logo-plan, 32px); width:auto; align-self:flex-start;
  max-width:100%; object-fit:contain; object-position:left;
}
:root[data-tema="oscuro"] body.lc .plan .plan-top .logo-marca{ background:transparent; padding:0 }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .plan .plan-top .logo-marca{ background:transparent; padding:0 }
}

/* ======================================== 19a. ENCABEZADO Y NAVEGACIÓN ==
   La barra se genera una sola vez en `scripts/plantillas.js` y se estampa en
   las doce páginas, así no vuelve a haber tres versiones distintas. */

/* La franja de beneficio: lo primero que se lee, y dice lo que más mueve la
   aguja. Sale de las formas de entrega cargadas en el panel. */
body.lc .barra-beneficio{
  margin:0; background:var(--tinta); color:var(--crema);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; padding:9px 20px; line-height:1.4;
}

/* La barra: sello a la izquierda, menú al centro, bolsa a la derecha. */
body.lc .nav .interior{
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--esp-3);
  padding-block:14px; transition:padding-block .2s ease;
}
body.lc .nav .marca{ grid-row:1; align-self:center }
body.lc .marcas-casa{
  grid-row:2; grid-column:1; margin:4px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant); line-height:1;
  transition:opacity .2s ease, max-height .2s ease;
}
body.lc .nav .enlaces{ grid-row:1 / span 2; grid-column:2 }
body.lc .nav .utilidad{ grid-row:1 / span 2; grid-column:3 }

/* Compacta al bajar: el sello pierde la bajada de marcas y la barra se achica.
   En 360 px eso la deja en 56 px de alto, debajo de los 64 que se pidieron. */
body.lc .nav.compacta .interior{ padding-block:7px }
body.lc .nav.compacta .marcas-casa{ opacity:0; max-height:0; margin-top:0; overflow:hidden }

/* El desplegable de la tienda. Se abre al pasar el mouse y también con el
   botón de al lado, que es lo que lo hace usable con teclado y con un dedo. */
body.lc .con-submenu{ position:relative; display:inline-flex; align-items:center; gap:4px }
body.lc .abrir-submenu{
  background:none; border:0; padding:4px; cursor:pointer; color:inherit;
  display:inline-flex; line-height:0;
}
body.lc .abrir-submenu svg{ width:10px; height:6px; transition:transform .2s ease }
body.lc .con-submenu.abierto .abrir-submenu svg{ transform:rotate(180deg) }
body.lc .submenu{
  position:absolute; top:100%; left:-14px; z-index:60;
  display:flex; flex-direction:column; min-width:220px;
  background:var(--sc-lowest); border:2px solid var(--on-surface); padding:6px 0;
}
body.lc .submenu[hidden]{ display:none }
body.lc .submenu a{
  padding:10px 18px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
body.lc .submenu a:hover{ background:var(--acido); color:var(--tinta) }
@media (hover:hover){
  body.lc .con-submenu:hover .submenu{ display:flex }
  body.lc .con-submenu:hover .submenu[hidden]{ display:flex }
}

/* La bolsa se ve siempre, también en pantalla chica: es a lo que se vuelve. */
body.lc .bolsa{
  border:2px solid var(--on-surface); background:transparent;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 14px; gap:8px; text-decoration:none;
}
body.lc .bolsa .cuenta{
  background:var(--acido); color:var(--tinta);
  font-family:var(--mono); font-size:10px; min-width:19px; height:19px;
  display:grid; place-items:center; padding:0 5px;
}
body.lc .bolsa:hover{ background:var(--acido); border-color:var(--acido); color:var(--tinta) }

@media (max-width:980px){
  body.lc .nav .enlaces{ display:none }
  body.lc .abrir-menu{ display:inline-flex; order:-1 }
  body.lc .nav .utilidad{ display:flex; align-items:center; gap:10px }
}
@media (max-width:560px){
  body.lc .bolsa .texto-bolsa{ display:none }
  body.lc .mi-cuenta{ padding:9px 8px }
  body.lc .bolsa{ padding:9px 11px }
  body.lc .barra-beneficio{ font-size:11px; letter-spacing:.1em; padding:7px 14px }
}

/* El menú de pantalla chica ocupa todo, con las marcas a la vista: en un
   teléfono no hay lugar para un desplegable adentro de otro. */
body.lc .menu-movil{
  position:fixed; inset:0; z-index:150; top:0;
  background:var(--surface); overflow-y:auto; max-height:100vh;
  padding:84px var(--margen) 40px; border:0;
  opacity:0; transform:none; pointer-events:none;
  transition:opacity .22s ease;
}
body.lc .menu-movil.visible{ opacity:1; pointer-events:auto }
body.lc .menu-movil nav{ display:flex; flex-direction:column; padding:0 }
body.lc .menu-movil .con-submenu{ display:block }
body.lc .menu-movil .con-submenu > a{ font-size:20px; letter-spacing:-.02em; text-transform:uppercase }
body.lc .menu-movil a{
  font-family:var(--serif); font-size:20px; letter-spacing:-.02em;
  text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--outline-variant);
}
body.lc .submenu-movil{
  position:static; border:0; padding:0 0 0 18px; min-width:0;
  background:transparent; display:flex;
}
body.lc .submenu-movil a{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; padding:11px 0;
}
body.lc .menu-ayuda{
  display:flex; flex-direction:column; margin-top:28px; padding-top:20px;
  border-top:2px solid var(--on-surface);
}
body.lc .menu-ayuda a{ font-family:var(--mono); font-size:11px; border-bottom:0; padding:9px 0 }

/* ============================================== 19g. TIENDA: FILTROS Y FICHA ==
   Los filtros salen del catálogo cargado: marca, tipo y tramos de precio
   calculados sobre los precios reales. */
body.lc .barra-filtros{ display:none; gap:10px; align-items:center; margin-bottom:16px }
body.lc .filtros-caja{ margin-bottom:22px }
body.lc .grupo-filtro{ border:0; padding:0; margin:0 0 16px }
body.lc .grupo-filtro legend{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-surface-variant); padding:0; margin-bottom:9px;
}
body.lc .grupo-filtro .opciones{ display:flex; flex-wrap:wrap; gap:8px }
body.lc .grupo-filtro button{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; border:1px solid var(--outline-variant); color:var(--on-surface);
  padding:8px 12px; cursor:pointer;
}
body.lc .grupo-filtro button:hover{ border-color:var(--on-surface) }
body.lc .grupo-filtro button[aria-pressed="true"]{
  background:var(--on-surface); color:var(--surface); border-color:var(--on-surface);
}
body.lc .grupo-filtro button[aria-pressed="true"] .cuenta-filtro{ background:var(--acido); color:var(--tinta) }

/* La etiqueta de la ficha: una sola, clavada en la esquina de la foto. */
body.lc .producto{ position:relative }
body.lc .etiqueta-ficha{
  position:absolute; top:0; left:0; z-index:2;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 8px;
}
body.lc .etiqueta-ficha.acento{ background:var(--acido); color:var(--tinta) }
body.lc .etiqueta-ficha.aviso{ background:var(--ferragosto-oro); color:var(--tinta) }
body.lc .etiqueta-ficha.apagada{ background:var(--on-surface-variant); color:var(--surface) }
body.lc .producto .imagen{ display:block }
body.lc .producto h3 a{ text-decoration:none }
body.lc .producto h3 a:hover{ text-decoration:underline; text-underline-offset:4px }
body.lc .precio-transferencia{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-surface-variant); margin:2px 0 0;
}
body.lc .precio-transferencia strong{ color:var(--on-surface) }

/* Avisame cuando vuelva: el campo aparece en la misma ficha. */
body.lc .avisar-form{ display:flex; gap:6px; margin-top:4px }
body.lc .avisar-form input{
  flex:1; min-width:0; border:1px solid var(--outline-variant); background:var(--surface);
  color:var(--on-surface); padding:8px 10px; font-family:var(--mono); font-size:10.5px;
}
body.lc .avisado{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin:6px 0 0 }

/* Sin resultados. */
body.lc .sin-resultados{
  grid-column:1/-1; text-align:center; padding:48px 20px;
  border:1px solid var(--outline-variant); display:flex; flex-direction:column; gap:16px; align-items:center;
}
body.lc .sin-resultados p{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:0;
}

/* La franja chica hacia el Club, en lugar de la banda repetida. */
body.lc .franja-club-chica{ background:var(--tinta); color:var(--crema); padding:20px 0 }
body.lc .franja-club-chica .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
body.lc .franja-club-chica p{ margin:0; font-size:15px }
body.lc .franja-club-chica .btn-contorno{ color:var(--crema); border-color:var(--crema) }
body.lc .franja-club-chica .btn-contorno:hover{ background:var(--acido); color:var(--tinta); border-color:var(--acido) }

/* ============================================ 19h. LA FICHA DE PRODUCTO == */
body.lc .ficha-producto{ padding-block:var(--gap-seccion) }

/* --- Galería --- */
body.lc .galeria-principal{ position:relative; background:var(--sc-low) }
body.lc .galeria-principal img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }
body.lc .galeria-principal img[hidden]{ display:none }
body.lc .galeria-principal.sin-fotos{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio:1/1; gap:16px; padding:24px; background:var(--color-marca, var(--tinta));
}
body.lc .galeria-principal.sin-fotos .sin-foto{
  display:grid; place-items:center; color:var(--crema);
  font-family:var(--serif); font-size:64px; width:50%;
}
body.lc .galeria-principal.sin-fotos .sin-foto img{ width:100%; aspect-ratio:auto; object-fit:contain }
body.lc .galeria-principal.sin-fotos .pendiente{
  font-family:var(--mono); font-size:10px; color:rgba(244,243,240,.8); text-align:center; margin:0;
}
body.lc .galeria-miniaturas{
  display:flex; gap:8px; margin-top:8px; overflow-x:auto; padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
body.lc .galeria-miniaturas button{
  flex:none; width:80px; padding:0; border:2px solid transparent;
  background:none; cursor:pointer; scroll-snap-align:start;
}
body.lc .galeria-miniaturas button[aria-selected="true"]{ border-color:var(--on-surface) }
body.lc .galeria-miniaturas img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block }

/* --- Datos --- */
body.lc .ficha-datos .marca a{ text-decoration:none; border-bottom:1px solid currentColor }
body.lc .ficha-datos .puntaje{ margin:0 0 14px }
body.lc .cuotas{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:4px 0 0;
}
/* El marcador de un dato que falta. Tiene que molestar, así que se lee: a
   10 px y con el bordó del sistema quedaba en 3,17:1 sobre el fondo oscuro
   —por debajo del mínimo— y además caía en el aviso de «texto demasiado
   chico». Sube a 12 px y usa un token que cambia con el tema. */
body.lc .pendiente{ font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--falta) }

/* --- Compra única o suscripción --- */
body.lc .elegir-compra{ border:0; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:8px }
body.lc .opcion-compra{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:2px solid var(--outline-variant); padding:14px 16px; font-size:14px;
}
body.lc .opcion-compra:has(input:checked){ border-color:var(--on-surface); background:var(--sc-low) }
body.lc .opcion-compra input{ width:18px; height:18px; flex:none; accent-color:var(--on-surface) }
body.lc .opcion-compra strong{ display:block }
body.lc .frecuencia-ficha{ display:flex; align-items:center; gap:10px; margin-top:4px }
body.lc .frecuencia-ficha label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase }
body.lc .frecuencia-ficha select{
  border:2px solid var(--on-surface); background:var(--sc-lowest); color:var(--on-surface);
  padding:9px 12px; font-family:var(--mono); font-size:11px;
}

/* --- Cantidad y botón --- */
body.lc .comprar{ display:flex; gap:12px; align-items:stretch; margin-top:24px; flex-wrap:wrap }
body.lc .cantidad-ficha{ display:flex; border:2px solid var(--on-surface) }
body.lc .cantidad-ficha button{
  width:42px; background:transparent; border:0; color:inherit; cursor:pointer; font-size:18px;
}
body.lc .cantidad-ficha button:hover{ background:var(--acido); color:var(--tinta) }
body.lc .cantidad-ficha input{
  width:54px; border:0; border-inline:2px solid var(--on-surface); text-align:center;
  background:transparent; color:inherit; font-family:var(--mono); font-size:14px;
  -moz-appearance:textfield;
}
body.lc .cantidad-ficha input::-webkit-outer-spin-button,
body.lc .cantidad-ficha input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
body.lc .btn-grande{ flex:1; min-width:180px; padding:16px 28px; font-size:13px }

/* --- Cómo llega --- */
body.lc .entregas-ficha{ margin-top:32px; border-top:1px solid var(--outline-variant); padding-top:20px }
body.lc .entregas-ficha h2{ font-size:14px; letter-spacing:.14em; font-family:var(--mono); text-transform:uppercase; margin-bottom:12px }
body.lc .entregas-ficha ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
body.lc .entregas-ficha li{ font-size:13.5px; line-height:1.5; color:var(--on-surface-variant) }
body.lc .entregas-ficha strong{ color:var(--on-surface) }
body.lc .aclara-envio{ font-size:12px; line-height:1.55; color:var(--on-surface-variant); margin-top:12px }

/* --- Acordeones --- */
body.lc .pliegues{ margin-top:56px; border-top:1px solid var(--outline-variant) }
body.lc .pliegue{ border-bottom:1px solid var(--outline-variant) }
body.lc .pliegue summary{
  cursor:pointer; padding:18px 0; list-style:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
body.lc .pliegue summary::-webkit-details-marker{ display:none }
body.lc .pliegue summary::after{ content:"+"; font-size:16px }
body.lc .pliegue[open] summary::after{ content:"−" }
body.lc .pliegue > div{ padding-bottom:22px; font-size:15px; line-height:1.65; max-width:70ch }
body.lc .tecnica{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
body.lc .tecnica li{ display:flex; gap:12px; font-size:14px }
body.lc .tecnica strong{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); min-width:110px;
}

/* --- Combinalo con / reseñas --- */
body.lc .combinalo, body.lc .resenas{ margin-top:56px }
body.lc .combinalo h2, body.lc .resenas h2{ font-size:26px; margin-bottom:20px }
body.lc .combinalo-linea{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--outline-variant); padding:18px;
}
body.lc .combinalo-linea .datos{ display:flex; flex-direction:column; flex:1; min-width:140px; text-decoration:none }
body.lc .combinalo-linea .marca{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant);
}
body.lc .combinalo-linea .nombre{ font-size:15px }
body.lc .combinalo-linea .precio{ font-family:var(--serif); font-size:18px }

/* --- Barra de compra en pantalla chica ---
   Aparece recién cuando el botón de arriba se fue de la vista. Mientras está,
   el botón de WhatsApp sube: si no, quedan uno encima del otro justo donde va
   el pulgar. */
body.lc .barra-compra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  background:var(--sc-lowest); border-top:2px solid var(--on-surface);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
body.lc .barra-compra-movil .precio{ font-family:var(--serif); font-size:20px; letter-spacing:-.03em }
body.lc .barra-compra-movil .btn{ flex:1; max-width:60% }
@media (max-width:900px){
  body.lc .barra-compra-movil.visible{ display:flex }
  /* Sitio para la barra: si no, tapa el pie. */
  :root.con-barra-visible body.lc{ padding-bottom:76px }
  :root.con-barra-visible body.lc .wa-flotante{ bottom:84px }
}
body.lc .miga{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant); margin-bottom:24px;
}
body.lc .ficha{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
body.lc .ficha-foto img, body.lc .ficha-foto .sin-foto{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:grid; place-items:center;
}
body.lc .ficha-foto .sin-foto{
  background:var(--color-marca, var(--tinta)); color:var(--crema);
  font-family:var(--serif); font-size:64px; padding:18%;
}
body.lc .ficha-foto .sin-foto img{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain }
body.lc .ficha-datos .marca{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-surface-variant); margin:0 0 8px;
}
body.lc .ficha-datos h1{ font-size:clamp(28px,4vw,46px); margin-bottom:16px }
body.lc .ficha-datos .desc{ font-size:16px; line-height:1.6; max-width:52ch; margin-bottom:22px }
body.lc .ficha-datos .precio{ font-family:var(--serif); font-size:36px; letter-spacing:-.04em; margin:0 }
body.lc .ficha-datos .btn{ margin-top:22px }
/* Lo mismo: el aviso de la ley va en 12 px y sin versalitas, que a este
   tamaño cuestan más de leer que ayudan. */
body.lc .aviso-alcohol{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; line-height:1.6;
  color:var(--on-surface-variant); margin-top:28px;
}

@media (max-width:900px){
  body.lc .barra-filtros{ display:flex }
  body.lc .filtros-caja[hidden]{ display:none }
  body.lc .ficha{ grid-template-columns:1fr; gap:24px }
}

/* ========================================== 19f. LA PORTADA COMO PUERTA ==
   La portada dejó de ser una landing de suscripciones: ahora es la entrada a
   las tres casas. */

/* Las tres tarjetas grandes. Toda la tarjeta es el enlace: en un teléfono un
   rectángulo se toca y un enlace de texto se erra. */
body.lc .firma{
  position:relative; overflow:hidden; text-decoration:none;
  min-height:300px; justify-content:flex-end;
}
body.lc .firma .foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
/* Un velo sobre la foto: sin él, el texto en crudo depende de qué haya en la
   imagen y a veces no se lee. */
body.lc .firma.con-foto::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(16,13,11,.85) 0%, rgba(16,13,11,.35) 55%, rgba(16,13,11,.1) 100%);
}
body.lc .firma > *:not(.foto){ position:relative; z-index:2 }
body.lc .firma .ir{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; margin-top:12px;
  border-bottom:2px solid currentColor; align-self:flex-start; padding-bottom:3px;
}
body.lc .firma:hover .ir{ background:var(--acido); color:var(--tinta); border-color:var(--acido) }

@media (max-width:900px){
  /* Las tres entran en el primer pantallazo: más bajas y apiladas. */
  body.lc .firma{ min-height:132px; padding:16px }
  body.lc .firma .logo{ height:26px }
  body.lc .firma .nombre{ font-size:18px }
  body.lc .firma .que{ display:none }
  body.lc .firma .ir{ margin-top:8px }
}

/* --- Más vendidos --- */
body.lc .destacados{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:40px }
body.lc .precio-club{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-surface-variant); margin:2px 0 0;
}
body.lc .precio-club strong{ color:var(--on-surface) }
body.lc .ver-mas{ margin-top:32px }

/* --- Combos por ocasión --- */
body.lc .combos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:40px }
body.lc .combo{
  display:flex; flex-direction:column; gap:10px; padding:24px;
  background:var(--sc-lowest); border:1px solid var(--outline-variant);
}
body.lc .combo .ocasion{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--acido); color:var(--tinta); padding:4px 8px; align-self:flex-start;
}
body.lc .combo h3{ font-size:22px; line-height:.98 }
body.lc .combo .desc{ font-size:14px; line-height:1.55; color:var(--on-surface-variant); flex:1 }
body.lc .combo .precios{ display:flex; align-items:baseline; gap:10px; margin:0 }
body.lc .combo .precio{ font-family:var(--serif); font-size:24px; letter-spacing:-.04em }
body.lc .combo .btn{ align-self:flex-start }

/* --- El Club, en franja --- */
body.lc .franja-club{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:36px 0 }
body.lc .plan-chico{
  display:flex; flex-direction:column; gap:3px; padding:20px;
  border:2px solid currentColor;
}
body.lc .plan-chico .nombre{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.8;
}
body.lc .plan-chico .precio{ font-family:var(--serif); font-size:30px; letter-spacing:-.04em; line-height:1 }
body.lc .plan-chico .cada{ font-size:12.5px; opacity:.8 }
body.lc .plan-chico .menos{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--acido); color:var(--tinta); align-self:flex-start; padding:3px 7px; margin-top:8px;
}

/* --- Las tres casas --- */
body.lc .casas{ display:grid; gap:1px; margin-top:40px; background:var(--outline-variant) }
body.lc .casa{
  background:var(--color-marca, var(--tinta)); color:var(--crema);
  padding:32px; display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
body.lc .casa h3{ color:var(--crema); font-size:30px; margin:0 }
body.lc .casa p{ color:rgba(244,243,240,.84); font-size:15px; line-height:1.6; max-width:60ch; margin:0 }
body.lc .casa .btn-contorno{ color:var(--crema); border-color:var(--crema) }
body.lc .casa .btn-contorno:hover{ background:var(--crema); color:var(--tinta) }

/* --- Bitácora --- */
body.lc .notas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:40px }
body.lc .nota-tarjeta{
  background:var(--sc-lowest); border:1px solid var(--outline-variant); padding:24px;
  display:flex; flex-direction:column; gap:10px;
}
body.lc .nota-tarjeta .fecha{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--on-surface-variant);
}
body.lc .nota-tarjeta h3{ font-size:20px; line-height:1 }
body.lc .nota-tarjeta h3 a{ text-decoration:none }
body.lc .nota-tarjeta h3 a:hover{ text-decoration:underline; text-underline-offset:4px }
body.lc .nota-tarjeta p{ font-size:14px; line-height:1.55; color:var(--on-surface-variant); margin:0 }

/* --- Redes y newsletter --- */
body.lc .social{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
body.lc .social h2{ font-size:28px; margin-bottom:12px }
body.lc .social .cuentas-marca{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant); margin-top:14px;
}
body.lc .social .newsletter .fila{ display:flex; gap:8px; margin-top:14px }
body.lc .social .newsletter input{
  flex:1; min-width:0; background:var(--sc-lowest); border:2px solid var(--on-surface);
  color:var(--on-surface); padding:12px 14px; font-family:var(--mono); font-size:11px;
}

/* --- Barra de confianza --- */
body.lc .confianza-barra{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--outline-variant);
  border:1px solid var(--outline-variant);
}
body.lc .confianza-barra li{
  background:var(--surface); padding:20px 18px; display:flex; flex-direction:column; gap:4px;
}
body.lc .confianza-barra strong{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
body.lc .confianza-barra span{ font-size:13px; line-height:1.5; color:var(--on-surface-variant) }

@media (max-width:900px){
  body.lc .destacados{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  body.lc .combos, body.lc .notas, body.lc .franja-club{ grid-template-columns:1fr }
  body.lc .social{ grid-template-columns:1fr; gap:32px }
  body.lc .confianza-barra{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px){
  body.lc .destacados{ grid-template-columns:1fr }
  body.lc .confianza-barra{ grid-template-columns:1fr }
}

/* ============================================== 19e. LA BOLSA POR DENTRO ==
   El panel ya existía; lo que sigue es lo que se le sumó: la barra de envío,
   la línea con foto, la sugerencia, la bolsa vacía y el pie de pago. */

/* Cuánto falta para el envío sin cargo. La barra acompaña al texto, no lo
   reemplaza: sola no le dice nada a quien no la ve. */
body.lc .progreso-envio:empty{ display:none }
body.lc .progreso-envio{ margin-bottom:18px }
body.lc .progreso-texto{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 7px; color:var(--on-surface-variant);
}
body.lc .progreso-texto.logrado{ color:var(--on-surface) }
body.lc .barra{ height:6px; background:var(--sc-high); overflow:hidden }
body.lc .barra span{ display:block; height:100%; background:var(--acido); transition:width .3s ease }
@media (prefers-reduced-motion:reduce){ body.lc .barra span{ transition:none } }

/* La línea: foto, datos, subtotal. */
body.lc .carrito .linea, body.lc .lineas .linea{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px;
  align-items:start; padding:16px 0; border-bottom:1px solid var(--outline-variant);
}
body.lc .lineas .foto img, body.lc .lineas .mini{
  width:64px; height:64px; object-fit:cover; display:grid; place-items:center;
}
body.lc .lineas .mini{
  background:var(--color-marca, var(--tinta)); color:var(--crema);
  font-family:var(--serif); font-size:24px;
}
body.lc .lineas .mini.con-logo{ padding:8px }
body.lc .lineas .mini .logo-marca{ width:100%; height:100%; object-fit:contain }
body.lc .lineas .datos{ display:flex; flex-direction:column; gap:3px; min-width:0 }
body.lc .lineas .datos .marca{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant);
}
body.lc .lineas .datos .nombre{ font-size:14px; line-height:1.35 }
body.lc .lineas .unitario{
  font-family:var(--mono); font-size:10.5px; color:var(--on-surface-variant);
}
body.lc .lineas .cantidad{ display:flex; align-items:center; gap:6px; margin-top:6px }
body.lc .lineas .cantidad button{
  width:28px; height:28px; border:1px solid var(--outline-variant);
  background:transparent; color:inherit; cursor:pointer; font-size:15px; line-height:1;
}
body.lc .lineas .cantidad button:hover{ border-color:var(--on-surface) }
body.lc .lineas .cantidad .quitar{
  width:auto; padding:0 9px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; border:0; margin-left:4px;
  color:var(--on-surface-variant); text-decoration:underline; text-underline-offset:3px;
}
body.lc .lineas .cantidad .quitar:hover{ color:var(--error) }
body.lc .lineas .subtotal{ font-family:var(--serif); font-size:16px; letter-spacing:-.02em }

/* La sugerencia: una sola, chica, de una marca que no esté en la bolsa. */
body.lc .sugerencia:empty{ display:none }
body.lc .sugerencia{
  margin:18px 0 4px; padding:14px; background:var(--sc-low);
  border:1px solid var(--outline-variant);
}
body.lc .titulo-sugerencia{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-surface-variant); margin:0 0 10px;
}
body.lc .linea-sugerencia{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
body.lc .linea-sugerencia .datos{ display:flex; flex-direction:column; flex:1; min-width:120px }
body.lc .linea-sugerencia .marca{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-surface-variant);
}
body.lc .linea-sugerencia .nombre{ font-size:13.5px; line-height:1.3 }
body.lc .linea-sugerencia .precio{ font-family:var(--serif); font-size:15px }

/* La bolsa vacía, con sus tres puertas. */
body.lc .vacia{ text-align:left; padding:8px 0 }
body.lc .vacia p{ margin:0 0 6px }
body.lc .vacia .chica{ font-size:13.5px; color:var(--on-surface-variant); margin-bottom:20px }
body.lc .puertas{ display:flex; flex-direction:column; gap:10px }
body.lc .puerta-marca{
  display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer;
  padding:14px 16px; border:0; background:var(--color-marca, var(--tinta)); color:var(--crema);
}
body.lc .puerta-marca .nombre{
  font-family:var(--serif); font-size:17px; letter-spacing:-.03em; text-transform:uppercase;
}
body.lc .puerta-marca .que{ font-size:12.5px; line-height:1.45; color:rgba(244,243,240,.82) }

/* El pie de pago: edad, botón grande, alternativa discreta y confianza. */
body.lc .confirma-edad{
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 14px;
  font-size:13px; line-height:1.4; cursor:pointer;
}
body.lc .confirma-edad input{ width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--on-surface) }
body.lc #btn-wa-pedido{
  display:block; width:100%; margin-top:10px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
body.lc #btn-wa-pedido[disabled]{ opacity:.45; cursor:not-allowed; text-decoration:none }
body.lc .confianza{
  display:flex; flex-direction:column; gap:5px; margin:16px 0 0;
  font-size:12px; line-height:1.5; color:var(--on-surface-variant);
}
body.lc .confianza .pendiente{
  font-family:var(--mono); font-size:10px; color:var(--error); line-height:1.5;
}

/* ================================================= 19c. BOTÓN DE WHATSAPP ==
   Abajo a la derecha, por encima del «volver arriba» y por debajo de la bolsa.
   Desaparece con la bolsa abierta, que es cuando estorbaría justo arriba del
   botón de pagar. */
body.lc .wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:95;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--tinta); color:var(--crema); border:2px solid var(--tinta);
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
body.lc .wa-flotante svg{ width:26px; height:26px }
body.lc .wa-flotante:hover{ background:var(--acido); color:var(--tinta); border-color:var(--acido) }
body.lc .wa-flotante.escondido{ opacity:0; transform:scale(.8); pointer-events:none }
@media (max-width:560px){
  /* Más arriba que el «volver arriba» y fuera del pulgar que toca «agregar». */
  body.lc .wa-flotante{ width:46px; height:46px; right:14px; bottom:14px }
  body.lc .volver-arriba{ bottom:70px }
}
@media (prefers-reduced-motion:reduce){
  body.lc .wa-flotante{ transition:none }
}

/* ====================================================== 19d. PIE EN CUATRO ==
   Comprar · La Casa · Ayuda · Legales, y abajo el resto. */
body.lc .pie-sitio .columnas{ grid-template-columns:repeat(4,minmax(0,1fr)) }
body.lc .titulo-columna{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#9A9488; margin:0 0 14px;
}
body.lc .pie-sitio ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
body.lc .pie-abajo{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  max-width:var(--ancho); margin:0 auto; padding:36px var(--margen);
  border-top:1px solid #3A3833;
}
body.lc .newsletter label{ display:block; font-size:13.5px; line-height:1.5; margin-bottom:12px; color:#F4F3F0 }
body.lc .newsletter .fila{ display:flex; gap:8px }
body.lc .newsletter input{
  flex:1; min-width:0; background:transparent; border:2px solid #3A3833;
  color:#F4F3F0; padding:11px 14px; font-family:var(--mono); font-size:11px;
}
body.lc .lista-redes{ display:flex; flex-direction:column; gap:8px }
body.lc .lista-redes a, body.lc .sin-red{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
body.lc .sin-red em{ font-style:normal; color:#9A9488; letter-spacing:0; text-transform:none }
body.lc .medios, body.lc .alias{ font-size:13px; line-height:1.6; margin:0 0 8px; color:#9A9488 }
body.lc .alias strong{ color:#F4F3F0 }
body.lc .data-fiscal{ display:inline-block; margin-top:12px }
body.lc .sin-fiscal{ font-family:var(--mono); font-size:12px; color:var(--falta); line-height:1.5; display:block; max-width:26ch }
body.lc .datos-fiscales{
  max-width:var(--ancho); margin:0 auto; padding:22px var(--margen) 30px;
  border-top:1px solid #3A3833;
}
body.lc .datos-fiscales p{ font-size:12.5px; line-height:1.7; color:#9A9488; margin:0 }
body.lc .datos-fiscales .legal{ margin-top:6px }

@media (max-width:900px){
  body.lc .pie-sitio .columnas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px }
  body.lc .pie-abajo{ grid-template-columns:1fr; gap:28px }
}
@media (max-width:560px){
  body.lc .pie-sitio .columnas{ grid-template-columns:1fr }
}

/* Las tres marcas en «Nosotros». */
body.lc .marcas-nosotros{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0 40px }
body.lc .marca-nosotros{ background:var(--color-marca,var(--tinta)); color:var(--crema); padding:22px }
body.lc .marca-nosotros h3{ color:var(--crema); margin:0 0 10px }
body.lc .marca-nosotros p{ color:rgba(244,243,240,.84); font-size:14px; line-height:1.55; margin:0 0 10px }
body.lc .marca-nosotros a{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
@media (max-width:900px){ body.lc .marcas-nosotros{ grid-template-columns:1fr } }

/* ============================================= 19b. COMPONENTES COMUNES ==
   Las piezas que arma `componentes.js`. El marcado sale de un solo lugar y el
   estilo, de acá: si el sistema cambia el tratamiento de una etiqueta, se
   cambia una vez.

   Botones, fichas de producto y precios ya tenían su estilo más arriba —son
   las clases que el componente reutiliza—. Lo que sigue es lo que no existía. */

/* La etiqueta chica: una promoción, «el favorito», una aclaración. Mismo
   tratamiento que la insignia del plan y el chip de promoción, que son sus dos
   casos aplicados y solo agregan dónde se clavan. */
body.lc .etiqueta{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 8px; border:0;
  background:var(--acido); color:var(--tinta);
}
/* Sobre el color pleno de una marca, el ácido pelearía: ahí la etiqueta va en
   crudo sobre tinta. */
body.lc .etiqueta-marca{ background:var(--tinta); color:var(--crema) }

/* El precio anterior, tachado. Va en mono como todo dato técnico del sistema,
   y más chico que el precio vigente para que no compitan. */
body.lc .producto .antes,
body.lc .antes{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--on-surface-variant); text-decoration-thickness:1px;
}

/* Estrellas: una fila de cinco y un relleno proporcional encima, así media
   estrella es media de verdad. El ancho lo pone `componentes.js` en línea
   porque es un dato, no una decisión de diseño. Se dibujan con una máscara
   para que el relleno siga al color del texto en los dos temas. */
body.lc .estrellas{
  --estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l3.09 6.26L20 7.27l-5 4.87 1.18 6.88L10 15.77l-6.18 3.25L5 12.14 0 7.27l6.91-1.01z'/%3E%3C/svg%3E");
  position:relative; display:inline-block; vertical-align:-2px;
  width:86px; height:16px;
  background:var(--outline-variant);
  -webkit-mask:var(--estrella) repeat-x left center/17px 16px;
          mask:var(--estrella) repeat-x left center/17px 16px;
}
body.lc .estrellas-llenas{
  position:absolute; inset:0 auto 0 0;
  background:var(--ferragosto-oro);
}
body.lc .opiniones{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--on-surface-variant); margin-left:6px;
}

/* ================================================ 20. TIENDA: BÚSQUEDA Y ORDEN ==
   Mejoras de UX para el catálogo: buscador en vivo, ordenamiento, contador
   de resultados, contadores en los filtros, badge de promoción y toast. */
body.lc .barra-tienda{
  display:flex; gap:16px; align-items:stretch; flex-wrap:wrap;
  margin-bottom:20px;
}
body.lc .busqueda{
  position:relative; flex:1; min-width:240px;
  display:flex; align-items:center;
}
body.lc .busqueda svg{
  position:absolute; left:16px; width:18px; height:18px;
  color:var(--on-surface-variant); pointer-events:none;
}
body.lc .busqueda input{
  width:100%; padding:14px 16px 14px 46px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--sc-lowest); color:var(--on-surface);
  border:2px solid var(--on-surface); border-radius:0;
}
body.lc .busqueda input::placeholder{ color:var(--on-surface-variant); opacity:.7 }
body.lc .busqueda input:focus{ outline:2px solid var(--acido); outline-offset:1px; border-color:var(--marca-navegante) }
body.lc .busqueda input::-webkit-search-cancel-button{ -webkit-appearance:none }

body.lc .orden select{
  height:100%; padding:14px 40px 14px 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--sc-lowest); color:var(--on-surface);
  border:2px solid var(--on-surface); border-radius:0; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B1A18' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
body.lc .orden select:focus{ outline:2px solid var(--acido); outline-offset:1px; border-color:var(--marca-navegante) }
/* La flecha va dibujada en un SVG embebido, así que su color no puede salir de
   una variable: de noche, la de tinta desaparecía sobre el fondo oscuro. */
:root[data-tema="oscuro"] body.lc .orden select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F3F0' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) body.lc .orden select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F3F0' stroke-width='1.5'/%3E%3C/svg%3E");
  }
}

/* Contador de resultados */
body.lc .resultados{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:0 0 20px; min-height:1.4em;
}

/* Contador dentro de cada filtro */
body.lc .filtros button{ display:inline-flex; align-items:center; gap:8px }
body.lc .filtros .cuenta-filtro{
  font-size:9px; letter-spacing:.08em; padding:2px 6px;
  background:var(--sc-high); color:var(--on-surface-variant);
}
body.lc .filtros button[aria-pressed="true"] .cuenta-filtro{
  background:var(--acido); color:#1B1A18;
}

/* Cabecera de producto: marca + badge de promoción en la misma línea */
body.lc .producto .cabecera-producto{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
body.lc .producto .cabecera-producto .marca{ margin:0 }
/* Igual que la etiqueta del plan: va clavada en la esquina de la ficha, sobre
   la imagen. En el flujo, un producto con promoción quedaba más alto que el de
   al lado, y una etiqueta larga se llevaba un renglón entero. */
body.lc .producto{ position:relative }
body.lc .producto .promo-chip{
  position:absolute; top:0; right:0; z-index:1;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--acido); color:#1B1A18; padding:3px 7px; border:0;
}

/* Sin resultados */
body.lc .sin-resultados{
  grid-column:1/-1; text-align:center; padding:48px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); border:1px solid var(--outline-variant);
}

/* Toast de confirmación */
body.lc #toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%);
  z-index:160; max-width:min(420px,calc(100vw - 32px));
  background:#1B1A18; color:#F4F3F0;
  border:2px solid var(--acido);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 22px; text-align:center; line-height:1.5;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
body.lc #toast.visible{ transform:translate(-50%,0) }
@media (prefers-reduced-motion:reduce){ body.lc #toast{ transition:none } }
@media (max-width:560px){
  body.lc .barra-tienda{ flex-direction:column }
  body.lc .orden select{ width:100% }
}

/* ========================================== 21. LAS PÁGINAS DE MARCA ==
   Una plantilla, tres páginas: /marcas/navegante.html, ferragosto.html y
   riku.html. El acento de cada una entra por `--color-marca`, escrito en el
   `<body>` al generar la página: así sale con el color de su casa sin esperar
   a que cargue el JavaScript.

   Las secciones reusan lo que ya existe —`.catalogo`, `.planes`, `.combos`,
   `.testimonios`— y acá va solo lo que es propio de estas páginas. */

body.lc .pagina-marca main > .miga{ margin:18px auto 0 }

/* --- La portada de la marca ---
   Con foto, la foto a sangre con un velo encima; sin foto, el color de la
   casa. El mismo criterio que las tarjetas de la portada: nunca texto crudo
   apoyado directo en una imagen que no controlamos. */
body.lc .marca-portada{
  position:relative; overflow:hidden;
  background:var(--color-marca, var(--tinta)); color:var(--crema);
  padding:48px 0 44px; margin-top:18px;
}
body.lc .marca-portada .fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
body.lc .marca-portada.con-foto::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(16,13,11,.88) 0%, rgba(16,13,11,.55) 60%, rgba(16,13,11,.3) 100%);
}
body.lc .marca-portada .wrap{ position:relative; z-index:2 }
body.lc .marca-portada .logo{
  height:64px; width:auto; max-width:min(100%, 320px);
  object-fit:contain; display:block; margin-bottom:18px;
}
body.lc .marca-portada h1:not(.sr-only){
  font-family:var(--serif); font-size:40px; line-height:1.05; margin:0 0 14px;
}
body.lc .marca-portada .promesa{
  font-size:19px; line-height:1.45; max-width:30ch; margin:0 0 24px;
}
body.lc .marca-portada .acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:0 }
/* Sobre el color pleno de la casa, el botón sólido de tinta se pierde: acá va
   en crema con texto oscuro, que es el contrario de lo que hace en el resto
   del sitio y el único que se lee contra los tres acentos. */
body.lc .marca-portada .btn-lleno{
  background:var(--crema); border-color:var(--crema); color:#1B1A18;
}
body.lc .marca-portada .btn-lleno:hover{
  background:var(--acido); border-color:var(--acido); color:#1B1A18;
}
body.lc .marca-portada .btn-contorno{ color:var(--crema); border-color:var(--crema) }
body.lc .marca-portada .btn-contorno:hover{
  background:var(--crema); border-color:var(--crema); color:#1B1A18;
}
body.lc .marca-portada .pendiente{ color:var(--crema) }

/* --- Las secciones --- */
body.lc .pagina-marca main > section:not(.marca-portada){ padding:52px 0 }
body.lc .pagina-marca main > section h2{
  font-family:var(--serif); font-size:28px; line-height:1.1; margin:0 0 24px;
}
/* Una línea del color de la casa debajo de cada título: es lo que hace que las
   tres páginas se distingan de un vistazo siendo la misma plantilla. */
body.lc .pagina-marca main > section:not(.marca-portada) h2::after{
  content:""; display:block; width:48px; height:3px; margin-top:12px;
  background:var(--color-marca, var(--tinta));
}
body.lc .pagina-marca .ver-todo{ margin:24px 0 0; font-size:14px }

/* --- La historia ---
   Texto y fotos al costado. Las fotos en columna: una al lado de la otra a
   360px serían dos estampillas. */
body.lc .marca-historia{ background:var(--surface-dim) }
body.lc .marca-historia .historia-cuerpo{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:start;
}
body.lc .marca-historia .texto p{ margin:0 0 16px; max-width:62ch; line-height:1.65 }
body.lc .marca-historia .fotos{ display:grid; gap:14px }
body.lc .marca-historia .fotos img{
  width:100%; height:auto; display:block; border:1px solid var(--outline-variant);
}

/* --- Cómo se toma ---
   Un trago por tarjeta: el nombre, con qué comer y, si lleva algo de otra
   casa, dicho. */
body.lc .marca-recetas .recetas{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
body.lc .marca-recetas .receta{
  border:1px solid var(--outline-variant); border-top:3px solid var(--color-marca, var(--tinta));
  padding:22px 20px; background:var(--surface);
}
body.lc .marca-recetas .receta h3{ font-family:var(--serif); font-size:19px; margin:0 0 10px }
body.lc .marca-recetas .maridaje{ margin:0 0 6px; font-size:14px }
body.lc .marca-recetas .lleva{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:0 0 12px;
}
body.lc .marca-recetas .receta p:last-child{ margin:0; font-size:14px }

/* --- Con las otras casas ---
   Una línea por casa: su producto más barato en stock, el precio y el botón.
   Se agrega sin salir de la página. */
body.lc .marca-combos .otras-casas{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px }
body.lc .marca-combos .otra-casa{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--outline-variant); border-left:4px solid var(--color-marca, var(--tinta));
  padding:16px 18px; background:var(--surface);
}
/* El borde izquierdo de cada línea lleva el color de LA OTRA casa, no el de
   esta página: es el que dice de quién es el producto. */
body.lc .marca-combos .otra-casa.navegante{ border-left-color:var(--marca-navegante) }
body.lc .marca-combos .otra-casa.ferragosto{ border-left-color:var(--marca-ferragosto) }
body.lc .marca-combos .otra-casa.riku{ border-left-color:var(--marca-riku) }
body.lc .marca-combos .otra-casa .datos{ display:flex; flex-direction:column; flex:1; min-width:150px }
/* `de-casa`, no `casa`: `.casa` ya era el panel grande de marca de la
   portada —fondo del color de la marca, flex, 80 px de alto—, y esta
   etiquetita lo heredaba entero: un bloque marrón de 870 px con el nombre
   suelto debajo. */
body.lc .marca-combos .otra-casa .de-casa{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .marca-combos .otra-casa .nombre{ font-size:15px }
body.lc .marca-combos .otra-casa .precio{ font-family:var(--serif); font-size:18px }

body.lc .marca-club{ background:var(--surface-dim) }
body.lc .marca-club .bajada{ margin:-10px 0 24px; max-width:60ch; font-size:14.5px }
body.lc .marca-club .planes{ display:grid }

/* --- Pantallas chicas ---
   A 360px todo va en una columna. Sin escalón intermedio de tres a una: dos
   tarjetas de 160px no se leen. */
@media (max-width:900px){
  body.lc .marca-portada{ padding:36px 0 32px }
  body.lc .marca-portada .logo{ height:48px }
  body.lc .marca-portada h1:not(.sr-only){ font-size:30px }
  body.lc .marca-portada .promesa{ font-size:17px }
  /* Los dos botones a lo ancho, uno arriba del otro: en el pulgar, media
     pantalla cada uno es un blanco chico. */
  body.lc .marca-portada .acciones{ flex-direction:column; align-items:stretch }
  body.lc .marca-portada .acciones .btn{ width:100%; text-align:center }

  body.lc .pagina-marca main > section:not(.marca-portada){ padding:36px 0 }
  body.lc .pagina-marca main > section h2{ font-size:23px; margin-bottom:18px }
  body.lc .marca-historia .historia-cuerpo{ grid-template-columns:1fr; gap:22px }
  body.lc .marca-recetas .recetas{ grid-template-columns:1fr }
  body.lc .marca-combos .otra-casa{ padding:14px }
  body.lc .marca-combos .otra-casa .btn{ width:100% }
}

/* ========================================= 22. EL CLUB: CONFIGURADOR ==
   Tres pasos, la tabla de precios y el adicional que necesita frío.

   Todo el bloque usa radios de verdad —no divs con `click`—: el teclado, el
   lector de pantalla y el envío sin JavaScript funcionan gratis, y el estado
   elegido sale de `:checked` en vez de una clase que hay que acordarse de
   sacar. El `<input>` queda tapado por el borde de la tarjeta, pero presente:
   por eso el foco se dibuja con `:focus-visible + .cuerpo`. */

/* --- Los íconos de las tarjetas ---
   En el color del texto, no en el ácido: el ácido es #D8DE3C y sobre el crudo
   contrasta 1,31:1, o sea que el ícono no se ve. Está bien para un botón
   sólido, donde lleva tinta encima, no para un trazo sobre el fondo. Con
   `currentColor` además acompaña el tema sin una regla aparte. */
body.lc .tarjeta .icono{
  width:28px; height:28px; display:block; margin-bottom:14px;
  color:currentColor; opacity:.85;
}

/* --- Los pasos --- */
body.lc .configurador{ margin-top:40px; display:grid; gap:28px }
body.lc .paso-cfg{ border:0; padding:0; margin:0; min-width:0 }
body.lc .paso-cfg legend{
  font-family:var(--serif); font-size:20px; padding:0; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
body.lc .paso-cfg legend .n{
  font-family:var(--mono); font-size:12px; width:26px; height:26px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--on-surface); color:var(--surface);
}

/* --- Las opciones: tarjeta del plan y de la frecuencia --- */
body.lc .opciones-cfg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
body.lc .opciones-cfg.frecuencias{ grid-template-columns:repeat(3,minmax(0,1fr)) }
body.lc .opcion-cfg{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--outline-variant); background:var(--surface);
  padding:18px 16px;
}
/* El input tapado pero no quitado: `display:none` lo saca del orden de
   tabulación y del lector de pantalla, y ahí se pierde todo lo de arriba. */
body.lc .opcion-cfg input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
body.lc .opcion-cfg .cuerpo{ display:flex; flex-direction:column; gap:4px }
body.lc .opcion-cfg .marca{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .opcion-cfg .nombre{ font-family:var(--serif); font-size:17px; line-height:1.15 }
body.lc .opcion-cfg .items{ font-size:12.5px; color:var(--on-surface-variant); line-height:1.45 }
body.lc .opcion-cfg .desde{ font-size:12.5px; margin-top:6px }
body.lc .opcion-cfg .precio{ font-family:var(--serif); font-size:21px; margin-top:2px }
body.lc .opcion-cfg .precio small{ font-family:var(--sans); font-size:11.5px; font-weight:400 }
body.lc .opcion-cfg .ahorro{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
/* Elegida: borde grueso y una barra del color de la marca arriba. El borde
   solo no alcanzaba —a 360px se lee como un rectángulo más— y el color solo
   tampoco: hay gente que no lo distingue. Van los dos. */
body.lc .opcion-cfg:hover{ border-color:var(--on-surface) }
body.lc .opcion-cfg:has(input:checked){
  border-color:var(--on-surface); box-shadow:inset 0 0 0 1px var(--on-surface);
}
body.lc .opcion-cfg:has(input:checked)::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--color-marca, var(--acido));
}
body.lc .opcion-cfg.riku:has(input:checked)::before{ background:var(--marca-riku) }
body.lc .opcion-cfg.navegante:has(input:checked)::before{ background:var(--marca-navegante) }
body.lc .opcion-cfg.ferragosto:has(input:checked)::before{ background:var(--marca-ferragosto) }
body.lc .opcion-cfg.frec:has(input:checked)::before{ background:var(--acido) }
body.lc .opcion-cfg input:focus-visible + .cuerpo{
  outline:2px solid var(--on-surface); outline-offset:6px;
}
/* La señal de «esta elegí» va ESCRITA, no solo en el borde y el color.
   Sale del hermano directo del input, así que no depende de `:has()`: en un
   navegador sin soporte, las reglas de arriba no aplican y la tarjeta elegida
   quedaba exactamente igual que las otras tres. Y una palabra la lee
   cualquiera, también quien no distingue el color. */
body.lc .opcion-cfg input:checked + .cuerpo::after{
  content:"Elegido";
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--on-surface); color:var(--surface);
  align-self:flex-start; padding:3px 8px; margin-top:8px;
}

/* --- Paso 3: los chips --- */
body.lc .detalle-cfg + .detalle-cfg{ margin-top:22px }
body.lc .detalle-cfg .rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:0 0 10px;
}
body.lc .detalle-cfg .chips{ display:flex; flex-wrap:wrap; gap:10px }
body.lc .chip-cfg{ position:relative; cursor:pointer }
body.lc .chip-cfg input{ position:absolute; opacity:0; width:1px; height:1px; margin:0 }
body.lc .chip-cfg span{
  display:block; border:1px solid var(--outline-variant); background:var(--surface);
  padding:9px 16px; font-size:14px;
}
body.lc .chip-cfg:hover span{ border-color:var(--on-surface) }
body.lc .chip-cfg input:checked + span{
  background:var(--on-surface); color:var(--surface); border-color:var(--on-surface);
}
body.lc .chip-cfg input:focus-visible + span{ outline:2px solid var(--on-surface); outline-offset:3px }
body.lc .pista-cfg{ font-size:13px; color:var(--on-surface-variant); margin:10px 0 0; max-width:56ch }

/* --- El resumen y el alta --- */
body.lc .resumen-cfg{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:32px;
  border:2px solid var(--on-surface); padding:26px 24px; align-items:center;
}
body.lc .resumen-cfg .lineas{ display:grid; gap:8px; min-width:0 }
body.lc .resumen-cfg .lineas p{
  display:flex; justify-content:space-between; gap:16px; margin:0;
  border-bottom:1px solid var(--outline-variant); padding-bottom:8px;
}
body.lc .resumen-cfg .lineas p:last-child{ border-bottom:0; padding-bottom:0 }
body.lc .resumen-cfg .lineas span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant); padding-top:3px;
}
body.lc .resumen-cfg .lineas b{ font-size:15px; text-align:right }
/* Los dos números que importan, más grandes que el resto de las filas. */
body.lc .resumen-cfg .lineas p:nth-child(3) b,
body.lc .resumen-cfg .lineas p:nth-child(4) b{ font-family:var(--serif); font-size:20px }
body.lc .resumen-cfg .alta .btn{ width:100%; text-align:center }
body.lc .resumen-cfg .aclara-cfg{
  font-size:12.5px; color:var(--on-surface-variant); margin:12px 0 0; line-height:1.5;
}

/* --- Suelto vs. Club --- */
body.lc .tabla-comparativa{ margin-top:36px }
body.lc .tabla-comparativa table{ width:100%; border-collapse:collapse; font-size:15px }
body.lc .tabla-comparativa th, body.lc .tabla-comparativa td{
  text-align:left; padding:14px 12px; border-bottom:1px solid var(--outline-variant);
}
body.lc .tabla-comparativa thead th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant); font-weight:400; border-bottom:2px solid var(--on-surface);
}
body.lc .tabla-comparativa tbody th{ font-weight:500 }
body.lc .tabla-comparativa tbody th small{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-surface-variant); font-weight:400; margin-top:3px;
}
body.lc .tabla-comparativa .club b{ font-family:var(--serif); font-size:18px }
body.lc .tabla-comparativa .dif b{ font-family:var(--serif); font-size:16px }
body.lc .tabla-comparativa .dif small{
  font-family:var(--mono); font-size:11px; color:var(--on-surface-variant);
}
body.lc .modulo-comparativa .nota{
  font-size:12.5px; color:var(--on-surface-variant); margin-top:18px; max-width:72ch;
}

/* --- El adicional --- */
body.lc .adicionales{ display:grid; gap:16px; margin-top:36px }
body.lc .adicional-item{
  display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:20px; align-items:center;
  border:1px solid var(--outline-variant); background:var(--surface); padding:18px;
}
body.lc .adicional-item img{ width:100%; height:auto; display:block }
body.lc .adicional-item .marca{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .adicional-item h3{ font-family:var(--serif); font-size:19px; margin:4px 0 6px }
body.lc .adicional-item .desc{ font-size:14px; margin:0 0 8px; max-width:56ch }
body.lc .adicional-item .compra{ display:grid; gap:10px; justify-items:end }
body.lc .adicional-item .precio{ font-family:var(--serif); font-size:21px }

/* --- Pantallas chicas ---
   Todo en una columna. La tabla deja de ser tabla: cada fila es una ficha con
   el rótulo de la columna al lado del número, que es la única forma de que
   cuatro columnas de plata entren en 360px sin desplazamiento horizontal. */
@media (max-width:900px){
  body.lc .opciones-cfg,
  body.lc .opciones-cfg.frecuencias{ grid-template-columns:1fr; gap:10px }
  body.lc .paso-cfg legend{ font-size:18px }
  body.lc .resumen-cfg{ grid-template-columns:1fr; gap:22px; padding:20px 16px }

  body.lc .tabla-comparativa thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  body.lc .tabla-comparativa table,
  body.lc .tabla-comparativa tbody,
  body.lc .tabla-comparativa tr,
  body.lc .tabla-comparativa th,
  body.lc .tabla-comparativa td{ display:block; width:auto }
  body.lc .tabla-comparativa tr{
    border:1px solid var(--outline-variant); padding:14px 16px; margin-bottom:12px;
  }
  body.lc .tabla-comparativa tbody th{
    border:0; padding:0 0 10px; font-family:var(--serif); font-size:18px;
  }
  body.lc .tabla-comparativa td{
    border:0; padding:5px 0; display:flex; justify-content:space-between; gap:16px;
  }
  body.lc .tabla-comparativa td::before{
    content:attr(data-rotulo);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--on-surface-variant); padding-top:4px;
  }

  body.lc .adicional-item{ grid-template-columns:1fr; gap:14px }
  body.lc .adicional-item img{ max-width:140px }
  body.lc .adicional-item .compra{
    justify-items:stretch; grid-template-columns:auto 1fr; align-items:center; gap:16px;
  }
}

/* ============================================= 23. EL PATIO ==
   El listado de notas y la plantilla de cada nota. Antes era `paginas.html`,
   y el listado lo dibujaba un script: era la única página del sitio cuyo
   contenido no existía sin JavaScript. Ahora viene escrito.

   El patio es revista: columna angosta para leer, foto grande arriba, y la
   tipografía de texto con más aire que en el resto del sitio. */

body.lc .portada-patio .eyebrow{ letter-spacing:.2em }

/* --- El filtro por categoría ---
   Son enlaces de verdad, así que funcionan sin JavaScript y la dirección se
   puede compartir. El número al lado dice cuántas notas hay: un filtro que
   lleva a una grilla vacía es una puerta que no va a ningún lado. */
body.lc .filtros-patio{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px }
body.lc .chip-patio{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1px solid var(--outline-variant); background:var(--surface);
  padding:9px 15px; font-size:14px;
}
body.lc .chip-patio .cuantas{
  font-family:var(--mono); font-size:10px; color:var(--on-surface-variant);
}
body.lc .chip-patio:hover{ border-color:var(--on-surface) }
body.lc .chip-patio.activo{
  background:var(--on-surface); color:var(--surface); border-color:var(--on-surface);
}
body.lc .chip-patio.activo .cuantas{ color:var(--surface); opacity:.7 }
/* Una categoría sin notas no se esconde —si no, nadie sabría que existe— pero
   se muestra apagada, para no prometer nada. */
body.lc .chip-patio.vacio{ opacity:.5 }

/* --- Las tarjetas --- */
body.lc .patio-grilla{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
}
body.lc .nota-patio{ display:flex; flex-direction:column; min-width:0 }
body.lc .nota-patio .foto{
  display:block; aspect-ratio:3/2; overflow:hidden; background:var(--sc-low);
  margin-bottom:16px;
}
body.lc .nota-patio .foto img{ width:100%; height:100%; object-fit:cover; display:block }
body.lc .nota-patio .sin-foto{
  width:100%; height:100%; display:grid; place-items:center; padding:16px; text-align:center;
}
body.lc .nota-patio .meta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin:0 0 8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
body.lc .nota-patio .categoria{ color:var(--on-surface) }
body.lc .nota-patio .lectura{ color:var(--on-surface-variant) }
body.lc .nota-patio h3{ font-family:var(--serif); font-size:20px; line-height:1.15; margin:0 0 8px }
body.lc .nota-patio h3 a, body.lc .nota-patio h2 a{ text-decoration:none }
body.lc .nota-patio h3 a:hover, body.lc .nota-patio h2 a:hover{ text-decoration:underline }
body.lc .nota-patio .bajada{ margin:0; font-size:14.5px; line-height:1.55; color:var(--on-surface-variant) }
body.lc .nota-patio .pie-nota{
  margin:12px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-surface-variant);
}

/* La destacada: a dos columnas, foto a la izquierda y texto al lado. */
body.lc .patio-destacada{ margin-bottom:48px; padding-bottom:40px; border-bottom:2px solid var(--on-surface) }
body.lc .nota-patio.destacada{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:36px; align-items:center;
}
body.lc .nota-patio.destacada .foto{ margin:0; aspect-ratio:16/10 }
body.lc .nota-patio.destacada h2{ font-family:var(--serif); font-size:34px; line-height:1.05; margin:0 0 12px }
body.lc .nota-patio.destacada .bajada{ font-size:17px }

/* --- La nota --- */
/* --- El ancho de una nota ---
   `wrap-angosto` son 900 px, pensados para los textos legales. Para leer
   seguido conviene una columna más corta, y la foto de portada a todo lo
   ancho: lo contrario es lo que pasaba —el artículo entero encerrado en una
   tira angosta con la foto adentro—. */
body.lc .nota-entera .wrap-angosto{ max-width:760px }
body.lc .nota-entera > .nota-foto{
  max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen);
}

body.lc .nota-cabeza{ padding:44px 0 32px }
body.lc .nota-cabeza h1{ font-family:var(--serif); font-size:42px; line-height:1.05; margin:0 0 16px }
body.lc .nota-cabeza .lead{ font-size:19px; line-height:1.5; margin:0 0 20px; max-width:50ch }
body.lc .nota-cabeza .firma{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-surface-variant);
}

body.lc .nota-foto{ margin:0 0 44px }
body.lc .nota-foto img{ width:100%; height:auto; display:block; background:var(--sc-low) }

/* --- La forma de la portada ---
   Se elige por nota. Las cuatro primeras recortan a una proporción fija, que
   es lo que conviene cuando la foto es un fondo; `completa` la muestra entera,
   que es lo que conviene cuando la foto ES la nota.

   Antes era siempre 16:9 recortada, sin alternativa: una foto vertical o
   cuadrada perdía los bordes y quedaba convertida en una tira apaisada. */
body.lc .nota-foto.portada-panoramica img{ aspect-ratio:16/9; object-fit:cover }
body.lc .nota-foto.portada-apaisada img{ aspect-ratio:3/2; object-fit:cover }
body.lc .nota-foto.portada-cuadrada img{ aspect-ratio:1/1; object-fit:cover }
body.lc .nota-foto.portada-alta img{ aspect-ratio:4/5; object-fit:cover }

/* Entera: manda la proporción de la foto. Se limita el alto para que una
   vertical no ocupe dos pantallas antes del primer párrafo, y se centra. */
body.lc .nota-foto.portada-completa img{
  width:auto; max-width:100%; max-height:80vh; margin-inline:auto;
}
/* Las tres que no son panorámicas no necesitan todo el ancho de la pantalla:
   una cuadrada a 1440 px es una pared. Se quedan en la medida de lectura. */
body.lc .nota-foto.portada-cuadrada,
body.lc .nota-foto.portada-alta{ max-width:820px; margin-inline:auto }
/* Sin foto, el hueco NO ocupa el 16/9 de la foto que falta: a todo el ancho
   eso son más de 800 px de nada antes de poder leer. Queda una franja del
   ancho de la columna de texto, con el marcador bien visible. */
body.lc .nota-foto.sin-foto{
  aspect-ratio:auto; background:var(--sc-low); display:grid; place-items:center;
  padding:28px 24px; text-align:center;
  max-width:760px; margin-inline:auto;
}

/* El cuerpo: medida de lectura y más aire que el resto del sitio. Una nota se
   lee seguido, no se escanea. */
body.lc .cuerpo-nota{ font-size:17.5px; line-height:1.75 }
body.lc .cuerpo-nota > *{ max-width:68ch }
body.lc .cuerpo-nota p{ margin:0 0 24px }
body.lc .cuerpo-nota h2{ font-family:var(--serif); font-size:26px; line-height:1.15; margin:44px 0 16px }
body.lc .cuerpo-nota h3{ font-family:var(--serif); font-size:20px; margin:32px 0 12px }
body.lc .cuerpo-nota h4{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:28px 0 10px;
}
body.lc .cuerpo-nota blockquote{
  margin:32px 0; padding:4px 0 4px 24px; border-left:3px solid var(--on-surface);
}
body.lc .cuerpo-nota blockquote p{ margin:0; font-size:20px; line-height:1.5 }

/* --- Las listas de una receta ---
   Los ingredientes con un guión largo al costado, los pasos con el número en
   mono y a la vista: en una receta, saber en qué paso vas importa, y una lista
   con números chicos y grises no se sigue con las manos ocupadas. */
body.lc .cuerpo-nota ul,
body.lc .cuerpo-nota ol{ margin:0 0 28px; padding:0; list-style:none }
body.lc .cuerpo-nota ul li{ position:relative; padding-left:22px; margin-bottom:10px }
body.lc .cuerpo-nota ul li::before{
  content:"—"; position:absolute; left:0; color:var(--on-surface-variant);
}
body.lc .cuerpo-nota ol{ counter-reset:paso }
body.lc .cuerpo-nota ol li{
  counter-increment:paso; position:relative; padding-left:48px; margin-bottom:18px;
}
body.lc .cuerpo-nota ol li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--outline-variant); color:var(--on-surface-variant);
}
/* En una receta, los ingredientes van sobre fondo propio: es la parte que se
   consulta mientras se prepara, y conviene que se encuentre de un vistazo. */
body.lc .nota-entera.es-receta .cuerpo-nota ul{
  background:var(--sc-low); padding:24px 24px 24px 28px; margin-bottom:32px;
}
body.lc .nota-entera.es-receta .cuerpo-nota ul li:last-child{ margin-bottom:0 }

/* --- Lo que usamos ---
   El motivo por el que una nota de receta existe en una tienda: que lo que
   acabás de leer se pueda comprar sin ir a buscarlo. */
body.lc .lo-que-usamos{ margin:56px 0 0; padding:32px 0 0; border-top:2px solid var(--on-surface) }
body.lc .lo-que-usamos h2{ font-family:var(--serif); font-size:24px; margin:0 0 24px }
body.lc .usados{ display:grid; gap:14px }
body.lc .usado{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:18px; align-items:center;
  border:1px solid var(--outline-variant); background:var(--surface); padding:14px 16px;
}
/* Sin foto hay dos hijos, no tres: con la grilla de tres columnas los datos
   caían en la de 72 px —el nombre se partía letra por letra— y el botón se
   estiraba por todo el resto. */
body.lc .usado.sin-foto{ grid-template-columns:minmax(0,1fr) auto }
body.lc .usado img{ width:100%; height:auto; display:block }
body.lc .usado .marca{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .usado h3{ font-family:var(--serif); font-size:17px; margin:3px 0 4px }
body.lc .usado h3 a{ text-decoration:none }
body.lc .usado .precio{ font-family:var(--mono); font-size:13px }

/* --- Compartir --- */
body.lc .compartir{ margin:44px 0 0 }
body.lc .compartir h2{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:0 0 14px;
}
body.lc .compartir .acciones{ display:flex; flex-wrap:wrap; gap:10px }
/* Cuando el portapapeles no está disponible, el botón muestra la dirección
   para copiarla a mano: ahí deja de ser un botón corto y se parte donde haga
   falta, en vez de desbordar la pantalla. */
body.lc .compartir .mostrando-enlace{
  font-family:var(--mono); font-size:11px; text-transform:none; letter-spacing:0;
  word-break:break-all; text-align:left; max-width:100%;
}

/* --- El newsletter de la nota y las relacionadas --- */
body.lc .nota-news{ margin-top:64px; padding:48px 0; background:var(--surface-dim) }
body.lc .nota-news h2{ font-family:var(--serif); font-size:26px; margin:0 0 10px }
body.lc .nota-news p{ margin:0 0 20px; max-width:52ch }
body.lc .nota-relacionadas{ padding:56px 0 }
body.lc .nota-relacionadas h2{ font-family:var(--serif); font-size:26px; margin:0 0 28px }

/* --- Pantallas chicas --- */
@media (max-width:900px){
  body.lc .patio-grilla{ grid-template-columns:1fr; gap:34px }
  body.lc .nota-patio.destacada{ grid-template-columns:1fr; gap:18px }
  body.lc .nota-patio.destacada .foto{ aspect-ratio:3/2 }
  body.lc .nota-patio.destacada h2{ font-size:26px }
  body.lc .nota-patio.destacada .bajada{ font-size:16px }
  body.lc .patio-destacada{ margin-bottom:34px; padding-bottom:28px }

  body.lc .nota-cabeza{ padding:28px 0 22px }
  body.lc .nota-cabeza h1{ font-size:29px }
  body.lc .nota-cabeza .lead{ font-size:17px }
  body.lc .nota-foto{ margin-bottom:30px }
  body.lc .cuerpo-nota{ font-size:16.5px; line-height:1.7 }
  body.lc .cuerpo-nota h2{ font-size:22px; margin-top:34px }
  body.lc .cuerpo-nota blockquote p{ font-size:18px }
  body.lc .cuerpo-nota ol li{ padding-left:40px }
  body.lc .cuerpo-nota ol li::before{ width:28px; height:28px; font-size:11px }
  body.lc .nota-entera.es-receta .cuerpo-nota ul{ padding:18px 18px 18px 22px }

  /* La foto del producto a 72px en una fila de tres columnas deja el nombre en
     dos letras por línea: el botón pasa abajo, a lo ancho. */
  body.lc .usado{ grid-template-columns:60px minmax(0,1fr); gap:14px }
  body.lc .usado .btn{ grid-column:1 / -1; width:100% }
  body.lc .compartir .acciones .btn{ width:100% }
  body.lc .nota-news{ margin-top:44px; padding:34px 0 }
  body.lc .nota-relacionadas{ padding:40px 0 }
}

/* Un marcador dentro de una tarjeta de producto hereda la caja del dato que
   reemplaza —el precio es serif y grande, la marca es mono y chica—, así que
   acá se le devuelve la caja del marcador sin que pierda su lugar en la
   tarjeta. La altura la sostiene la grilla, no el texto: por eso el hueco no
   mueve nada alrededor. */
body.lc .producto .precio.pendiente,
body.lc .producto .marca.pendiente,
body.lc .producto .desc.pendiente,
body.lc .ficha-datos .precio.pendiente{
  font-family:var(--mono); font-size:12px; font-weight:400; line-height:1.45;
  color:var(--falta); letter-spacing:0; text-transform:none;
}
body.lc .ficha-datos .precio.pendiente{ font-size:13px }

/* --- Medios dentro de una nota ---
   Imagen, video y embebidos se salen de la columna de texto: una foto a 680 px
   en una pantalla de 1440 se ve como una estampilla, y lo que se muestra en
   una nota suele ser el motivo por el que la nota existe. */
body.lc .cuerpo-nota .medio-nota{
  margin:36px 0; max-width:min(1040px, 100vw - var(--margen) * 2);
  width:100vw; margin-inline:calc(50% - min(520px, 50vw - var(--margen)));
  /* En columna, para que el pie quede debajo de la imagen y no volado contra
     el borde izquierdo del bloque: la imagen se centra sola, y el pie se
     centra con ella en vez de quedarse donde empieza la figura. */
  display:flex; flex-direction:column; align-items:center;
}
body.lc .cuerpo-nota .medio-nota img,
body.lc .cuerpo-nota .medio-nota video{
  /* Cada imagen sale con SU proporción. Antes acá había `aspect-ratio:16/10`
     con `object-fit:cover` para reservar el alto, y eso recortaba todo lo que
     no fuera apaisado: una foto vertical de 800x1200 quedaba en una tira del
     medio. El alto lo reserva ahora el `width`/`height` que escribe el panel.

     `max-height` es para el otro extremo: una vertical a 1040 px de ancho
     mide 1560 de alto y tapa la pantalla entera. Se limita a lo que entra de
     una mirada y se centra. */
  max-width:100%; width:auto; height:auto; display:block;
  max-height:78vh; margin-inline:auto; background:var(--sc-low);
}
/* Con `recorte` sí se recorta, pero porque se pidió: sirve para una banda. */
body.lc .cuerpo-nota .medio-nota.recortada img{
  width:100%; aspect-ratio:16/9; object-fit:cover; max-height:none;
}
/* Y con `columna` la imagen se queda del ancho del texto. */
body.lc .cuerpo-nota .medio-nota.en-columna{
  width:auto; max-width:100%; margin-inline:0;
}
body.lc .cuerpo-nota .medio-nota figcaption{
  font-family:var(--mono); font-size:12px; line-height:1.5;
  color:var(--on-surface-variant); margin-top:10px; max-width:68ch;
  /* Centrado debajo de la imagen. Alinearlo al borde izquierdo exacto
     requeriría que la figura se encogiera al ancho de la imagen, y la figura
     tiene que ser ancha para poder salirse de la columna de texto. Un pie es
     corto, así que centrado queda igual de legible y siempre pegado a lo que
     describe, en vez de volado contra el borde del bloque. */
  text-align:center; align-self:center;
}
/* En columna la figura ya mide lo mismo que la imagen: ahí el pie va al ras. */
body.lc .cuerpo-nota .medio-nota.en-columna{ align-items:stretch }
body.lc .cuerpo-nota .medio-nota.en-columna figcaption{ text-align:left }
body.lc .cuerpo-nota .medio-nota.incrustado{ aspect-ratio:16/9; display:block }
body.lc .cuerpo-nota .medio-nota.incrustado iframe{
  width:100%; height:100%; border:0; display:block; background:var(--sc-low);
}

/* --- Tablas dentro de una nota --- */
body.lc .tabla-nota{ margin:32px 0; max-width:none }
body.lc .tabla-nota table{
  width:100%; border-collapse:collapse; font-size:15px;
  /* `fixed` respeta los anchos del <colgroup>, que salen de la cantidad de
     guiones del renglón separador. Con `auto` —lo que hace el navegador por
     su cuenta— el ancho lo decide el contenido: una celda con un párrafo
     largo se lleva media tabla y basta cambiar un texto para que todas las
     columnas se reacomoden. */
  table-layout:fixed;
}
/* Una palabra muy larga —una dirección, un código— ya no puede ensanchar su
   columna por encima de lo pedido: se parte. */
body.lc .tabla-nota td,
body.lc .tabla-nota th{ overflow-wrap:anywhere }

/* Una imagen dentro de una celda se acomoda a la columna. Y en cualquier otro
   lado —una viñeta, el medio de un párrafo— se comporta como una palabra más,
   sin pasarse del ancho disponible. */
body.lc .cuerpo-nota .img-linea{
  max-width:100%; height:auto; display:block; margin:6px 0;
  background:var(--sc-low);
}
body.lc .tabla-nota .img-linea{ margin:0 }
body.lc .cuerpo-nota p > .img-linea{ display:inline-block; vertical-align:middle; margin:0 4px }
body.lc .tabla-nota th,
body.lc .tabla-nota td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--outline-variant);
}
body.lc .tabla-nota thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant); font-weight:400; border-bottom:2px solid var(--on-surface);
}

/* --- Qué líneas lleva la tabla ---
   Por omisión solo las horizontales, que es lo que menos ruido mete y basta
   para leer de a filas. Las otras tres se piden al final del renglón
   separador: `grilla`, `columnas`, `sin-lineas`. */
body.lc .tabla-nota.con-grilla th,
body.lc .tabla-nota.con-grilla td{ border-right:1px solid var(--outline-variant) }
body.lc .tabla-nota.con-grilla tr > *:last-child{ border-right:0 }

body.lc .tabla-nota.solo-columnas th,
body.lc .tabla-nota.solo-columnas td{
  border-bottom:0; border-right:1px solid var(--outline-variant);
}
body.lc .tabla-nota.solo-columnas tr > *:last-child{ border-right:0 }
body.lc .tabla-nota.solo-columnas thead th{ border-bottom:2px solid var(--on-surface) }

body.lc .tabla-nota.sin-lineas th,
body.lc .tabla-nota.sin-lineas td{ border:0 }
/* El encabezado conserva su línea aun «sin líneas»: sin ella no se distingue
   de la primera fila de datos y la tabla deja de leerse como tabla. */
body.lc .tabla-nota.sin-lineas thead th{ border-bottom:1px solid var(--outline-variant) }

/* Una tabla sin encabezado —la primera fila ya son datos—: la primera celda
   no lleva la línea de arriba que marcaría dónde termina un encabezado que no
   existe. */
body.lc .tabla-nota.sin-cabecera tbody tr:first-child > *{ border-top:0 }

@media (max-width:900px){
  /* En pantalla chica el medio ocupa el ancho de la columna y nada más: el
     truco de salirse del texto no tiene a dónde salirse. */
  body.lc .cuerpo-nota .medio-nota{
    width:auto; max-width:none; margin-inline:0; margin-block:26px;
  }
  /* La tabla deja de ser tabla: cada fila es una ficha con el rótulo de la
     columna al lado del dato, que es lo único que entra en 360 px. */
  body.lc .tabla-nota thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  body.lc .tabla-nota table,
  body.lc .tabla-nota tbody,
  body.lc .tabla-nota tr,
  body.lc .tabla-nota td{ display:block; width:auto }
  body.lc .tabla-nota tr{
    border:1px solid var(--outline-variant); padding:12px 14px; margin-bottom:10px;
  }
  /* Apiladas, las líneas verticales no separan nada: cada fila ya es su
     propia ficha. Se van, sea cual sea lo que se haya pedido —por eso la
     regla nombra las tres variantes: si no, la de `grilla` le gana. */
  body.lc .tabla-nota td,
  body.lc .tabla-nota.con-grilla td,
  body.lc .tabla-nota.solo-columnas td,
  body.lc .tabla-nota.sin-lineas td{ border-right:0 }
  body.lc .tabla-nota td{
    border:0; padding:5px 0; display:flex; justify-content:space-between; gap:16px;
    text-align:left !important;
  }
  body.lc .tabla-nota td::before{
    content:attr(data-rotulo);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--on-surface-variant); flex:none;
  }
  /* Sin encabezado no hay rótulo que poner: el pseudo-elemento vacío dejaba
     un hueco con su separación al costado de cada dato. */
  body.lc .tabla-nota.sin-cabecera td::before{ content:none }
  body.lc .tabla-nota.sin-cabecera td{ display:block }
  /* En la celda apilada la imagen es hija de un flex, y ahí manda su tamaño
     intrínseco: con `max-width:100%` sola no se achicaba y se pasaba de la
     pantalla. `min-width:0` le da permiso para encoger. */
  body.lc .tabla-nota td .img-linea{ min-width:0; flex:0 1 auto; max-width:70% }
  /* En apilado el <colgroup> ya no pinta: las celdas van una abajo de la
     otra y el ancho lo da la pantalla. */
  body.lc .tabla-nota colgroup{ display:none }
}

/* ========================================= 24. LA MEMBRESÍA DEL CLUB ==
   La portada de la oferta, las dos tarjetas comparativas y la red de bares.
   Reemplaza al configurador: la membresía tiene un solo precio y un solo
   ciclo, así que no hay nada que configurar —hay que elegir entre dos. */

body.lc .portada-club{ max-width:62ch; margin-bottom:48px }
body.lc .portada-club h1{ font-family:var(--serif); font-size:42px; line-height:1.05; margin:0 0 16px }
body.lc .portada-club .lead{ font-size:19px; line-height:1.5; margin:0 0 28px }

/* Las tres insignias. Van con los íconos del sistema y no con emojis: un
   emoji lo dibuja cada sistema a su manera y un lector de pantalla lo lee en
   voz alta como el nombre del dibujo, en inglés. */
body.lc .insignias-club{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;
}
body.lc .insignias-club li{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--outline-variant); padding:9px 15px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
body.lc .insignias-club .icono{ width:17px; height:17px; flex:none; opacity:.8 }

/* --- Las dos tarjetas --- */
body.lc .planes-club{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
body.lc .plan-club{
  display:flex; flex-direction:column;
  border:1px solid var(--outline-variant); background:var(--surface); padding:28px 26px 26px;
}
/* El recomendado se marca con el borde y con la palabra, no solo con el
   color: hay gente que no lo distingue. */
body.lc .plan-club.destacado{ border:2px solid var(--on-surface) }
body.lc .plan-club .insignia{
  align-self:flex-start; margin:0 0 14px;
  background:var(--on-surface); color:var(--surface);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px;
}
/* El nombre del plan es un h2, no un h3: viene justo después del h1 de la
   página y saltarse un nivel rompe el recorrido de un lector de pantalla,
   que navega por encabezados. El tamaño lo decide el CSS, no la etiqueta. */
body.lc .plan-club h2{ font-family:var(--serif); font-size:24px; line-height:1.1; margin:0 0 6px }
body.lc .plan-club .bajada{ font-size:14px; color:var(--on-surface-variant); margin:0 0 20px }
body.lc .plan-club .precio-club{ margin:0 0 4px; display:flex; align-items:baseline; gap:8px }
body.lc .plan-club .precio-club .numero{ font-family:var(--serif); font-size:38px; line-height:1 }
body.lc .plan-club .precio-club .por{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .plan-club .envio{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--on-surface-variant); margin:0 0 22px;
}
body.lc .plan-club .incluye{ list-style:none; margin:0 0 24px; padding:0; flex:1 }
body.lc .plan-club .incluye li{
  position:relative; padding-left:26px; margin-bottom:14px; font-size:14.5px; line-height:1.55;
}
/* La marca de verificación va dibujada, no con un carácter: un ✓ de texto
   cambia de forma según la fuente que tenga cada quien instalada. */
body.lc .plan-club .incluye li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2px solid var(--on-surface); border-bottom:2px solid var(--on-surface);
  transform:rotate(-45deg);
}
body.lc .plan-club .incluye li:last-child{ margin-bottom:0 }
body.lc .plan-club .acciones .btn{ width:100%; text-align:center }
body.lc .aviso-cobro{ margin-top:22px }

/* --- La red de bares --- */
body.lc .red-bares{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
body.lc .red-bares .bar{
  display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--outline-variant); border-left:3px solid var(--on-surface);
  background:var(--surface); padding:16px 18px;
}
body.lc .red-bares .nombre{ font-family:var(--serif); font-size:17px }
body.lc .red-bares .donde,
body.lc .red-bares .cuando{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--on-surface-variant);
}
body.lc .aclara-bares{
  margin-top:24px; font-size:13px; font-style:italic; color:var(--on-surface-variant);
}

/* --- Los pasos con ícono --- */
body.lc .paso.con-icono .icono{ width:26px; height:26px; margin-bottom:12px; opacity:.85 }

@media (max-width:900px){
  body.lc .portada-club h1{ font-size:30px }
  body.lc .portada-club .lead{ font-size:17px }
  body.lc .portada-club{ margin-bottom:32px }
  body.lc .insignias-club li{ font-size:10.5px; padding:8px 12px }
  body.lc .planes-club{ grid-template-columns:1fr; gap:16px }
  body.lc .plan-club{ padding:22px 18px }
  body.lc .plan-club .precio-club .numero{ font-size:32px }
  body.lc .red-bares{ grid-template-columns:1fr }
}

/* --- El paso del código postal ---
   Cuál de los dos planes corresponde lo decide dónde vive quien mira, así que
   se pregunta antes de las tarjetas y no en el pago. */
body.lc .paso-cp{
  margin-top:30px; border:1px solid var(--outline-variant);
  background:var(--surface); padding:20px 22px; max-width:520px;
}
body.lc .paso-cp label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-surface-variant); margin-bottom:10px;
}
body.lc .paso-cp .fila{ display:flex; gap:10px; flex-wrap:wrap }
body.lc .paso-cp input{
  flex:1 1 150px; min-width:0; font-family:var(--mono); font-size:15px;
  border:2px solid var(--on-surface); background:transparent; color:var(--on-surface);
  padding:11px 14px;
}
body.lc .paso-cp .btn{ flex:0 0 auto }
/* Cuando el campo y el botón no entran en una línea, el botón se va solo a la
   siguiente y queda flotando a la izquierda. Apilados a lo ancho se tocan
   mejor con el pulgar. */
@media (max-width:460px){
  body.lc .paso-cp .fila{ flex-direction:column }
  body.lc .paso-cp .btn{ width:100% }
}
body.lc .paso-cp .pista{ margin:12px 0 0; font-size:12.5px; line-height:1.5 }
body.lc .resultado-cp{
  margin:14px 0 0; font-size:14px; line-height:1.55;
  border-left:3px solid var(--on-surface); padding-left:14px;
}
/* Cuando el plan cambia respecto del que la persona iba a elegir, el aviso se
   marca: es la diferencia entre confirmar algo y enterarse de otra cosa. */
body.lc .resultado-cp.cambiado{ border-left-color:var(--acido) }

/* La tarjeta que corresponde se marca con un sello escrito, además del
   borde: el borde solo no lo ve quien no distingue bien los contrastes. */
body.lc .plan-club .sello-plan{
  align-self:flex-start; margin:0 0 14px; order:-1;
  background:var(--acido); color:#1B1A18;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px;
}
body.lc .plan-club.tu-plan{ border:2px solid var(--on-surface) }
body.lc .plan-club.otro-plan{ opacity:.72 }
body.lc .plan-club.otro-plan:hover,
body.lc .plan-club.otro-plan:focus-within{ opacity:1 }

/* El alta, cuando el cobro automático está configurado. Reemplaza al botón
   dentro de la misma tarjeta: abrir otra pantalla para pedir un correo es
   perder a la mitad en el camino. */
body.lc .alta-club{ display:grid; gap:8px }
body.lc .alta-club label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
body.lc .alta-club input{
  font-family:var(--mono); font-size:14px; padding:11px 13px;
  border:2px solid var(--on-surface); background:transparent; color:var(--on-surface);
}
body.lc .alta-club .btn{ margin-top:6px }
body.lc .alta-club .aviso{ margin:0; font-size:12.5px; color:var(--falta); line-height:1.5 }

/* ============================ 25. LA CUENTA DEL SOCIO Y LA PANTALLA DEL BAR ==
   Dos pantallas que no se indexan: una es de quien está suscripto y la otra
   del personal del bar. */

body.lc .cuenta{ padding:48px 0 72px }
body.lc .cuenta h1{ font-family:var(--serif); font-size:34px; line-height:1.1; margin:0 0 12px }
body.lc .cuenta .lead{ font-size:17px; margin:0 0 28px; max-width:52ch }

body.lc .form-socio{ display:grid; gap:8px; max-width:380px; margin-bottom:18px }
body.lc .form-socio label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant); margin-top:8px;
}
body.lc .form-socio input{
  font-family:var(--mono); font-size:16px; letter-spacing:.08em; padding:13px 14px;
  border:2px solid var(--on-surface); background:transparent; color:var(--on-surface);
}
body.lc .form-socio .btn{ margin-top:14px }
body.lc .form-socio .aviso,
body.lc .pase-socio .aviso{ margin:4px 0 0; font-size:13.5px; color:var(--falta); line-height:1.5 }

/* El estado de la suscripción. El color acompaña, pero lo que lo dice es la
   palabra: un badge que solo cambia de color no lo lee quien no distingue
   bien los colores, ni un lector de pantalla. */
body.lc .estado-socio{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--outline-variant); padding:18px 20px; margin-bottom:34px;
}
body.lc .badge{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 13px; border:2px solid var(--on-surface);
}
body.lc .badge.activa{ background:var(--on-surface); color:var(--surface) }
body.lc .badge.pausada{ background:var(--acido); color:#1B1A18; border-color:var(--acido) }
body.lc .badge.baja{ color:var(--on-surface-variant); border-color:var(--outline-variant) }
body.lc .datos-socio{
  margin:0; display:flex; flex-direction:column; gap:3px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--on-surface-variant);
}

body.lc .pase-socio,
body.lc .entrega-socio{ margin-bottom:38px }
body.lc .pase-socio h2,
body.lc .entrega-socio h2{ font-family:var(--serif); font-size:22px; margin:0 0 10px }
body.lc .pase-socio p{ margin:0 0 16px; max-width:52ch }

/* --- Elegir dónde y qué --- */
/* `hidden` tiene que ganarle a cualquier `display` de clase. El atributo
   vale 0-1-0 y acá casi todas las reglas empiezan con `body.lc`, que vale
   0-2-0: `elegir.hidden = true` dejaba de ocultar nada y el formulario de
   activar la copa seguía a la vista cuando no había bares, cuando la
   suscripción estaba en pausa o cuando la copa ya estaba usada.

   Es el caso para el que el `!important` existe: ocultar algo no es una
   preferencia de estilo, es una condición. */
body.lc [hidden]{ display:none !important }

body.lc .elegir-copa{ display:grid; gap:8px; max-width:420px }
body.lc .elegir-copa label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-surface-variant); margin-top:8px;
}
body.lc .elegir-copa select{
  font-family:var(--sans); font-size:16px; padding:13px 14px;
  border:2px solid var(--on-surface); background:transparent; color:var(--on-surface);
}


body.lc .elegir-copa select:disabled{ opacity:.5 }
body.lc .aclara-confirmar{
  font-size:13px; line-height:1.55; color:var(--on-surface-variant);
  margin:14px 0 4px !important; max-width:none;
}

/* --- La pantalla que mira el bar ---
   Tiene que leerse de un vistazo desde el otro lado de una barra, con poca
   luz. Y tiene que notarse que está viva: la barra que se vacía y el
   segundero son lo que distingue esto de una captura de pantalla. */
body.lc .pantalla-copa{
  border:2px solid var(--on-surface); background:var(--on-surface); color:var(--surface);
  padding:26px 24px 20px; max-width:420px; text-align:center;
}
body.lc .pantalla-copa .sello-club{
  display:flex; flex-direction:column; gap:3px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid rgba(244,243,240,.25);
}
body.lc .pantalla-copa .marca-club{
  font-family:var(--serif); font-size:17px; letter-spacing:.04em;
}
body.lc .pantalla-copa .quees{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.75;
}
body.lc .pantalla-copa .estado-copa{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--acido); color:#1B1A18; display:inline-block;
  padding:5px 13px; margin:0 0 16px !important;
}
body.lc .pantalla-copa .coctel-copa{
  font-family:var(--serif); font-size:30px; line-height:1.1; margin:0 0 6px !important;
}
body.lc .pantalla-copa .bar-copa{ font-size:16px; margin:0 0 14px !important; opacity:.9 }
body.lc .pantalla-copa .socio-copa,
body.lc .pantalla-copa .cuando-copa{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  margin:0 0 4px !important; opacity:.8;
}
/* La barra que se vacía: el indicador de que esto está corriendo ahora y no
   es una foto. Se alimenta del vencimiento que mandó el servidor. */
body.lc .pantalla-copa .vigencia{
  height:4px; background:rgba(244,243,240,.2); margin:18px 0 10px; overflow:hidden;
}
body.lc .pantalla-copa .vigencia .barra{
  display:block; height:100%; width:100%; background:var(--acido);
  transition:width 1s linear;
}
body.lc .pantalla-copa .cuenta-atras{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  margin:0 !important; opacity:.8;
}
body.lc .pantalla-copa.vencida{
  background:transparent; color:var(--on-surface); border-color:var(--outline-variant);
}
body.lc .pantalla-copa.vencida .estado-copa{
  background:transparent; color:var(--on-surface-variant);
  border:1px solid var(--outline-variant);
}
body.lc .pantalla-copa.vencida .vigencia .barra{ background:var(--outline-variant) }

@media (prefers-reduced-motion:reduce){
  body.lc .pantalla-copa .vigencia .barra{ transition:none }
}

body.lc .entrega-socio .direccion{ font-size:16px; margin-bottom:6px }
body.lc .entrega-socio .seguimiento{
  font-family:var(--mono); font-size:12.5px; color:var(--on-surface-variant);
}
body.lc .salir-socio{ margin-top:44px; padding-top:22px; border-top:1px solid var(--outline-variant) }

/* --- La pantalla del bar ---
   La respuesta ocupa la pantalla y dice qué pasó en una palabra: quien la
   mira tiene las manos ocupadas y gente esperando. */
body.lc .resultado-bar{
  margin-top:26px; border:2px solid var(--on-surface); padding:24px 22px; max-width:380px;
}
body.lc .resultado-bar .titulo{
  font-family:var(--serif); font-size:26px; margin:0 0 6px; line-height:1.1;
}
body.lc .resultado-bar p{ margin:0; font-size:15px }
body.lc .resultado-bar.bien{ background:var(--on-surface); color:var(--surface); border-color:var(--on-surface) }
body.lc .resultado-bar.aviso{ background:var(--acido); color:#1B1A18; border-color:var(--acido) }
body.lc .resultado-bar.mal{ border-color:var(--falta); color:var(--falta) }

@media (max-width:900px){
  body.lc .cuenta{ padding:32px 0 56px }
  body.lc .cuenta h1{ font-size:27px }
  body.lc .form-socio{ max-width:none }
  body.lc .pase-abierto,
  body.lc .resultado-bar{ max-width:none }
  body.lc .codigo-pase{ font-size:40px }
}

/* El mes del bar: lo que presenta cuando repone stock. Sale del mismo
   registro con el que liquida la casa, así que no pueden diferir. */
body.lc .mes-bar{ margin-top:48px; padding-top:28px; border-top:1px solid var(--outline-variant) }
body.lc .mes-bar h2{ font-family:var(--serif); font-size:22px; margin:0 0 8px }
body.lc .mes-bar .pista{ margin:0 0 16px; max-width:52ch }
body.lc .lista-mes{ margin-top:20px }
body.lc .lista-mes .total{
  font-family:var(--serif); font-size:26px; margin:0 0 14px;
}
body.lc .lista-mes ul{ list-style:none; margin:0; padding:0; max-width:420px }
body.lc .lista-mes li{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--outline-variant); padding:9px 0;
  font-family:var(--mono); font-size:12px;
}
body.lc .lista-mes .cuando{ color:var(--on-surface-variant); flex:none }
body.lc .resultado-bar .lleva{
  margin-top:8px; font-family:var(--mono); font-size:12px; opacity:.85;
}