/* GENERADO por scripts/generar-tema-css.py desde
   diseno/maqueta/index.html — NO EDITAR A MANO.
   Se pierde al regenerar. Los cambios de diseño van en la maqueta. */

/* ─── Puente maqueta → tema (generado, ver scripts/generar-tema-css.py) ─── */
/* En la maqueta la navegación son <button>; aquí son <a href> de verdad, para
   que funcionen el botón atrás y el compartir enlace. Sin esto se quedan con
   el estilo del navegador: subrayados y en azul.

   Estas reglas van ANTES del CSS de la maqueta a propósito: cualquier color o
   display que ella declare debe ganar. Aquí solo se cubre lo que no declara. */
.day, .acc, .dtab, .bn-item, .hdr-btn, .btn, .btn-full, .v-nav-btn, .cp-item,
.dia-pill, .cu-link {
  text-decoration: none;
  color: inherit;
}
.day:hover, .acc:hover, .dtab:hover, .bn-item:hover, .hdr-btn:hover,
.btn:hover, .v-nav-btn:hover, .dia-pill:hover, .cu-link:hover {
  text-decoration: none;
}

/* Los <a> son inline por defecto; los <button> de la maqueta eran bloques. */
.day, .acc { display: flex; }
.dtab, .bn-item, .hdr-btn { display: inline-flex; align-items: center;
  justify-content: center; }
.btn { display: inline-block; }
.btn-full { display: block; }
/* `.cu-link` sí necesita `color` propio (rosa, no heredado): va DESPUÉS del
   puente, en el CSS de la maqueta, así que gana por orden — ver el porqué
   arriba, «gana la regla que va después». */

/* ─── fin del puente ─── */
:root{--ground:#FFFFFF; --surface:#E6F4FA; --ink:#34495E; --mut:#6E8291;
        --line:#D7E7F0; --accent:#E878CF; --accent-ink:#B8479F;
        --accent-soft:#FBE9F6; --hdr:#34495E; --hdr-ink:#FFFFFF;
        --hdr-mut:#C3D3DE; --hdr-em:#E878CF;
        --marca:#F5B3E4; --marca-alt:#B8479F;
  --mut:#5F707D; --accent-ink:#AF4397;
  --verde:#2D7A55; --ambar:#986212;
  --btn-ink:#1F2B36;
  --sem-verde:#C8ECD2; --sem-ambar:#FBE7AE; --sem-rojo:#F8CFC8;
  --sem-tinta:#11181F;
  --sem-verde-f:#2D7A55; --sem-ambar-f:#B7860F; --sem-rojo-f:#C0473A;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --disp:'Plus Jakarta Sans',system-ui,sans-serif;
  --hero:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
:root{
  --btn:var(--accent);
  --verde:#2E7D57; --verde-bg:#E6F2EA; --ambar:#B57516; --ambar-bg:#FBF0DE;
  --rojo:#A83A2B; --rojo-bg:#F8E7E3;
  --r-lg:22px; --r:16px; --r-sm:11px; --pad:20px; --gap:16px;
  --sombra:0 4px 14px rgba(30,30,30,.06);
  --body:'Lato',system-ui,sans-serif; --disp:'Poppins',sans-serif;
  background:var(--ground); color:var(--ink);
  font-family:var(--body); line-height:1.6; min-height:100%;
}
:root :where(h1,h2,h3,h4){font-family:var(--disp); margin:0; line-height:1.25}
:root ul,:root ol{margin:0; padding:0; list-style:none}
.scr{display:flex; flex-direction:column; min-height:100%; padding-bottom:57px}
.scr-landing,.scr-form,.scr-login{padding-bottom:0}
.pad{padding:var(--pad); display:flex; flex-direction:column; gap:var(--gap);
  flex:1}
.mini{margin:0; font-size:11.5px; color:var(--mut); line-height:1.4}
.mini-c{text-align:center}
.mini u{text-decoration-color:var(--accent); text-underline-offset:2px}

/* el logotipo de su web, como fondo para que el base64 aparezca una vez */
.logo{
  display:block; width:104px; height:43px; margin:0 auto 2px;
  background:var(--logo) center/contain no-repeat;
}
.hdr-home .logo{width:80px; height:33px}

/* cabeceras — siempre en tono claro, para que el logo se apoye solo */
.hdr{background:var(--hdr); padding:12px var(--pad); border-bottom:1px solid var(--line)}
.hdr-row{display:flex; align-items:center; gap:8px}
.hdr-btn{font-size:12px; color:var(--accent-ink); font-weight:700; flex:0 0 62px}
.hdr-btn-r{text-align:right}
.hdr-title{flex:1; text-align:center; font-family:var(--disp); font-weight:600;
  font-size:15px}
.hdr-home{display:flex; flex-direction:column; gap:2px; text-align:center;
  padding:16px var(--pad) 14px}
.hdr-h1{font-family:var(--disp); font-weight:700; font-size:22px; color:var(--ink)}
.hdr-h1 em{font-style:normal; color:var(--accent-ink)}
.hdr-mes{font-size:12px; color:var(--mut); letter-spacing:.04em}

/* barra inferior */
.bnav{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr); background:#fff;
  border-top:1px solid var(--line); padding:7px 0 9px;
}
.bn-item{display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; color:var(--mut); font-family:var(--disp); font-weight:500}
/* 🔑 27 ago 2026: `.bn-ico` pasó de emoji a SVG de Phosphor. Un emoji se
   dimensiona con `font-size`; un SVG NO — necesita `width`/`height`, o el
   navegador le da su tamaño intrínseco (256 px) y revienta la barra.
   `fill:currentColor` viene ya en el SVG, así que el icono hereda el color de
   `.bn-item` y de `.bn-item.is-on` sin una sola regla más. */
.bn-ico{width:22px; height:22px; display:block; flex:none}
.bn-item.is-on{color:var(--accent-ink); font-weight:700}

/* botones */
.btn{
  display:block; text-align:center; background:var(--btn); color:#fff;
  font-family:var(--disp); font-weight:600; font-size:14px; padding:12px 18px;
  border-radius:999px;
}
.btn-fant{background:transparent; color:var(--accent-ink);
  border:1.5px solid var(--accent)}
.btn-full{width:100%}

/* ── landing ── */
.lp-hero{padding:26px var(--pad) 22px; background:var(--hdr); text-align:center}
.lp-h1{font-size:29px; font-weight:700; margin:8px 0 6px; text-wrap:balance}
.lp-h1 em{font-style:normal; color:var(--accent-ink)}
.lp-sub{margin:0; font-size:13.5px; color:var(--mut)}
.lp-body{padding:var(--pad); display:flex; flex-direction:column; gap:20px}
.lp-h2{font-size:16px; font-weight:600}
.lp-p{margin:4px 0 10px; font-size:12.5px; color:var(--mut)}
.incl{display:flex; flex-direction:column; gap:12px}
.incl li{display:flex; gap:11px; align-items:flex-start}
.incl-ico{font-size:19px; line-height:1.2}
.incl div{display:flex; flex-direction:column}
.incl b{font-family:var(--disp); font-size:13.5px; font-weight:600}
.incl span:last-child{font-size:12px; color:var(--mut); line-height:1.4}
.lp-sem{background:var(--surface); border-radius:var(--r-lg); padding:16px}
.planes{display:flex; flex-direction:column; gap:12px}
.plan{
  background:var(--surface); border-radius:var(--r-lg); padding:16px;
  border:1px solid var(--line); display:flex; flex-direction:column; gap:7px;
  position:relative;
}
.plan-on{border-color:var(--accent); box-shadow:var(--sombra)}
.plan-flag{
  position:absolute; top:-10px; left:16px; background:var(--btn); color:#fff;
  font-family:var(--disp); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
}
.plan-nom{font-family:var(--disp); font-weight:600; font-size:14px}
.plan-precio{font-family:var(--disp); font-weight:700; font-size:30px;
  color:var(--accent-ink); line-height:1}
.plan-precio span{font-size:12px; font-weight:400; color:var(--mut)}
.plan-p{margin:0; font-size:12px; color:var(--mut)}
.lp-nota{margin:0; font-size:11.5px; color:var(--mut); text-align:center}

/* ── formularios ── */
.scr-form .pad{gap:12px}
.resumen{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px;
}
.resumen b{font-family:var(--disp); font-size:13.5px; display:block}
.resumen span{font-size:11.5px; color:var(--mut)}
.resumen-precio{font-family:var(--disp); font-weight:700; font-size:22px;
  color:var(--accent-ink)}
.campo{display:flex; flex-direction:column; gap:5px}
.campo>span:first-child{font-family:var(--disp); font-size:11px; font-weight:600;
  color:var(--mut); letter-spacing:.04em}
.input{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; font-size:13.5px; color:var(--mut);
}
.pago{display:flex; flex-direction:column; gap:7px; padding:14px;
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.pago-cab{display:flex; justify-content:space-between; align-items:center;
  font-family:var(--disp); font-size:12px; font-weight:600}
.pago-seg{font-family:var(--body); font-weight:400; font-size:11px;
  color:var(--mut)}
.pago-fila{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.scr-login{justify-content:center}
.login-wrap{padding:30px var(--pad); display:flex; flex-direction:column;
  gap:12px; text-align:center}
.login-wrap .campo{text-align:left}
.login-h1{font-size:26px; font-weight:700; margin:6px 0 0}
.login-h1 em{font-style:normal; color:var(--accent-ink)}
.login-sub{margin:0 0 8px; font-size:13px; color:var(--mut)}

/* ── semana ── */
.days{display:flex; flex-direction:column; gap:9px}
.day{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:row; align-items:center; gap:13px;
}
.day-emo{
  flex:0 0 40px; height:40px; border-radius:50%; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.day-nom{flex:1; font-family:var(--disp); font-weight:600; font-size:14px}
.day-sub{font-size:11px; color:var(--mut); display:flex; align-items:center;
  gap:10px}
.day-sub em{font-style:normal; color:var(--accent)}
.accesos{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
.acc{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:2px}
.acc-emo{font-size:21px}
.acc b{font-family:var(--disp); font-size:13px; font-weight:600}
.acc span:last-child{font-size:11px; color:var(--mut)}

/* ── día y receta ── */
.dtabs{display:grid; grid-template-columns:repeat(7,1fr); background:#fff;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2}
.dtab{text-align:center; padding:9px 0; font-family:var(--disp); font-size:11.5px;
  font-weight:500; color:var(--mut); border-bottom:2.5px solid transparent}
.dtab.is-on{color:var(--accent-ink); border-bottom-color:var(--accent);
  font-weight:700}
.meal{display:flex; flex-direction:column; gap:9px}
.meal-tag{font-family:var(--disp); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.meal-photo{
  margin:0 calc(var(--pad)*-1); height:150px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:46px;
  overflow:hidden;
}
/* 🔴 6 sep 2026: en el TEMA la foto de la receta se salia de su banda y caia
   encima del nombre y los macros. `.meal-photo` es la UNICA <img> cruda del
   proyecto en una caja de altura fija y era la unica sin `object-fit` ni
   `overflow`: el navegador la pintaba a resolucion nativa (2048 px). El resto
   (.rc-img, .v-bio-foto img) ya llevan este trio; esta se lo salto porque en
   la galeria y en la maqueta `.meal-photo` solo contiene un emoji y el <img>
   real solo existe en el tema (`partes/receta.php`).
   `cover` y no `contain` (Antonio, 7 sep 2026): llena el marco con foto nitida,
   misma altura para todas, igual que las tarjetas del indice. Recorta arriba y
   abajo — se acepta. Banda 150 px, mas baja que los 162 de antes. */
.meal-photo img{width:100%; height:100%; object-fit:cover; display:block}
.meal-name{font-size:19px; font-weight:700}
.macros{display:flex; gap:7px}
.mac{
  flex:1; background:var(--surface); border-radius:var(--r-sm); padding:9px 4px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.mac b{font-family:var(--disp); font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums}
.mac span{font-size:9.5px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em}
.sec{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); margin-top:4px}
.ingr,.pasos,.equiv{background:var(--surface); border-radius:var(--r);
  padding:12px 14px}
.ingr li{display:flex; gap:9px; padding:5px 0; border-bottom:1px solid var(--line);
  font-size:13px}
.ingr li:last-child{border-bottom:0}
.ing-cant{font-family:var(--disp); font-weight:600; min-width:62px;
  color:var(--accent-ink); font-variant-numeric:tabular-nums}
.pasos{display:flex; flex-direction:column; gap:8px}
.pasos li{display:flex; gap:9px; font-size:13px; align-items:flex-start}
.paso-n{
  flex:0 0 21px; height:21px; border-radius:50%; background:#fff;
  border:1px solid var(--line); color:var(--accent-ink); font-family:var(--disp);
  font-size:11px; font-weight:700; display:flex; align-items:center;
  justify-content:center;
}
.semaforo{display:flex; flex-direction:column; gap:6px}
.sem{display:flex; gap:9px; padding:9px 11px; border-radius:var(--r-sm);
  align-items:baseline}
.sem-lbl{font-family:var(--disp); font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; flex:0 0 66px}
.sem-txt{font-size:12.5px; line-height:1.4}
.sem-verde{background:var(--verde-bg); border-left:4px solid var(--verde)}
.sem-verde .sem-lbl{color:var(--verde)}
.sem-ambar{background:var(--ambar-bg); border-left:4px solid var(--ambar)}
.sem-ambar .sem-lbl{color:var(--ambar)}
.sem-rojo{background:var(--rojo-bg); border-left:4px solid var(--rojo)}
.sem-rojo .sem-lbl{color:var(--rojo)}
.equiv li{font-size:12.5px; padding:3px 0; color:var(--mut)}
.eq-fl{color:var(--accent)}
.meal-sep{height:1px; background:var(--line); margin:6px 0}

/* ── compra ── */
.prog{padding:12px var(--pad); background:#fff; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px}
.prog-top{display:flex; justify-content:space-between; font-size:11.5px;
  color:var(--mut)}
.prog-top b{font-family:var(--disp); color:var(--accent-ink);
  font-variant-numeric:tabular-nums}
.prog-track{height:6px; border-radius:999px; background:var(--accent-soft);
  overflow:hidden}
.prog-track span{display:block; height:100%; background:var(--accent);
  border-radius:999px; transition:width .25s}
.cat{display:flex; flex-direction:column; gap:4px}
.cat-h{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--mut)}
.cat-h span{font-size:15px}
.cat-l{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.ci{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:13.5px;
  border-bottom:1px solid var(--line); cursor:pointer}
.ci:last-child{border-bottom:0}
.cbox{flex:0 0 26px; height:26px; border-radius:8px; border:1.5px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center}
.cbox::after{content:"✓"; font-size:16px; color:#fff; opacity:0}
.ci-nom{flex:1}
.ci-cant{font-family:var(--disp); font-size:12px; color:var(--mut);
  font-variant-numeric:tabular-nums}
.ci.is-done .cbox{background:var(--accent); border-color:var(--accent)}
.ci.is-done .cbox::after{opacity:1}
.ci.is-done .ci-nom{text-decoration:line-through; color:var(--mut)}

/* ── cocinado ── */
.aviso{background:var(--surface); border-left:4px solid var(--accent);
  border-radius:var(--r); padding:13px; font-size:12.5px; line-height:1.45}
.aviso b{display:block; font-family:var(--disp); font-size:13px; margin-bottom:3px}
.bc{display:flex; flex-direction:column; gap:8px}
.bc-h{display:flex; justify-content:space-between; align-items:baseline;
  font-size:15px; font-weight:600}
.bc-tot{font-family:var(--body); font-size:11px; color:var(--mut); font-weight:400}
.bc-l{display:flex; flex-direction:column; gap:8px; background:var(--surface);
  border-radius:var(--r); padding:13px}
.bc-l li{display:flex; gap:10px; align-items:flex-start}
.bc-l div{display:flex; flex-direction:column; gap:2px}
.bc-desc{font-size:12.5px; line-height:1.4}
.bc-min{font-family:var(--disp); font-size:10.5px; font-weight:600;
  color:var(--accent-ink)}

/* ── leyenda ── */
.ley{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.ley li{display:flex; gap:12px; padding:10px 13px; border-bottom:1px solid var(--line);
  font-size:13px; align-items:baseline}
.ley li:last-child{border-bottom:0}
.sig{font-family:var(--disp); font-weight:700; color:var(--accent-ink); flex:0 0 58px}


/* ── la app ── */
:root{
  --body:'DM Sans',system-ui,sans-serif;
  --disp:'DM Sans',system-ui,sans-serif;
  --hero:'Playfair Display',Georgia,serif;
  --panel:#FFFFFF;
  --hdr-ink:var(--ink); --hdr-mut:var(--mut); --hdr-em:var(--accent-ink);
  /* La palabra resaltada sobre fondo claro. Va aparte de --hdr-em porque en
     "Entrar" el titular no está sobre la cabecera sino sobre el fondo, y
     aparte de --accent porque el rosa neón sobre blanco da 2,2:1 y no se lee. */
  --em:var(--accent-ink);
}
.login-h1 em{color:var(--em)}
/* Superficies que el CSS base clavaba en blanco. Con la paleta oscura tienen
   que seguir al fondo o quedan como cuatro parches blancos. */
.bnav,.dtabs,.prog,.input,.paso-n,.cbox{background:var(--panel)}

/* Titulares en serif: es lo que rompe con la web y engancha con Instagram.
   El resto de la interfaz —botones, pestañas, macros— sigue en grotesca; en
   sus carruseles el serif es siempre la frase, nunca la etiqueta. */
.lp-h1,.login-h1,.hdr-h1,.hdr-title,.lp-h2,.meal-name,.plan-precio,
.plan-nom,.resumen-precio,.bc-h,.cat-h,.login-h1{font-family:var(--hero)}
.lp-h1,.login-h1,.hdr-h1,.meal-name{letter-spacing:-.015em}
.cat-h{text-transform:none; letter-spacing:0; font-size:14px;
  color:var(--ink)}
.sec{font-family:var(--body)}

/* ── la marca, donde estaba el logotipo ── */
/* El trazo rosa corto es la firma de sus posts: abre todos los carruseles. */
/* El handle va en color de marca, no en el color del texto de la cabecera:
   así se lee como firma y no como un rótulo más. Cada paleta fija su tono en
   --marca (sobre la cabecera) y --marca-alt (sobre el fondo, en "Entrar"),
   porque el mismo rosa no vale para las dos: el neón puro sobre el azul da
   3,55:1 y a 14 px en negrita hace falta 4,5:1. Lo comprueba contraste(). */
.handle{
  display:block; text-align:center; font-family:var(--body); font-weight:700;
  font-size:14px; letter-spacing:.01em; color:var(--marca); margin:0 auto 4px;
}
.handle::before{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--hdr-em); margin:0 auto 12px;
}
.hdr-home .handle{font-size:13px}
/* En "Entrar" el handle no está sobre la cabecera sino sobre el fondo, así
   que ahí toma los colores del cuerpo. */
.login-wrap .handle{color:var(--marca-alt)}
.login-wrap .handle::before{background:var(--marca-alt)}

/* ── cabeceras oscuras ── */
/* Sin logotipo encima, la cabecera ya puede ir en color saturado. Todo lo que
   escribe sobre ella pasa a los tokens --hdr-*. */
.hdr-title,.hdr-h1,.hdr-btn,.lp-h1{color:var(--hdr-ink)}
.hdr-mes,.lp-sub{color:var(--hdr-mut)}
.hdr-h1 em,.lp-h1 em{color:var(--hdr-em)}
.hdr{border-bottom-color:rgba(0,0,0,.06)}
.lp-hero{padding-top:30px}

:root{--ground:#FFFFFF; --surface:#E6F4FA; --ink:#34495E; --mut:#6E8291;
        --line:#D7E7F0; --accent:#E878CF; --accent-ink:#B8479F;
        --accent-soft:#FBE9F6; --hdr:#34495E; --hdr-ink:#FFFFFF;
        --hdr-mut:#C3D3DE; --hdr-em:#E878CF;
        --marca:#F5B3E4; --marca-alt:#B8479F;
  --mut:#5F707D; --accent-ink:#AF4397;
  --verde:#2D7A55; --ambar:#986212;
  --btn-ink:#1F2B36;
  --sem-verde:#C8ECD2; --sem-ambar:#FBE7AE; --sem-rojo:#F8CFC8;
  --sem-tinta:#11181F;
  --sem-verde-f:#2D7A55; --sem-ambar-f:#B7860F; --sem-rojo-f:#C0473A;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --disp:'Plus Jakarta Sans',system-ui,sans-serif;
  --hero:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ═══════════════ chasis de la maqueta ═══════════════
   Lo que aquí abajo no existía en la galería: la galería pintaba marcos de
   móvil sobre una página; esto es la app ocupando la pantalla. */

*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light}
html,body{margin:0; padding:0}
body{
  background:var(--fuera); min-height:100vh;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  text-align:inherit}

/* Dos modos de ancho. La app es una PWA y se queda en ancho de móvil aunque
   sobre pantalla; la web de venta es una web y la ocupa. */
body{--fuera:#E9EFF3}
body[data-modo="web"]{--fuera:var(--ground)}

.scr{background:var(--ground); min-height:100vh; position:relative}
body[data-modo="app"] .scr{
  max-width:430px; margin:0 auto; box-shadow:0 0 0 1px rgba(52,73,94,.08);
}@media(min-width:481px){
  body[data-modo="app"] .scr{
    min-height:calc(100vh - 48px); margin:24px auto; border-radius:26px;
    overflow:clip; box-shadow:0 18px 50px rgba(52,73,94,.18);
  }
}
body[data-modo="app"] .scr{overflow-x:clip}
.scr{min-height:100vh}@media(min-width:481px){
  body[data-modo="app"] .scr{min-height:calc(100vh - 48px)}
}

/* ── la barra inferior ──
   Va `fixed`, no `sticky`. Con sticky dentro de un `.scr` de `min-height:100vh`
   su sitio natural cae justo por debajo del borde de la pantalla y **no se ve
   nunca**: el HTML la tiene, el navegador la coloca, y en el móvil no está.
   Se le limita el ancho al del lienzo para que en un ordenador no cruce la
   pantalla entera, y se sube los 24 px del margen para que quede dentro del
   móvil centrado en vez de pegada al viewport. */
.bnav{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:430px;
  z-index:5;
}@media(min-width:481px){
  body[data-modo="app"] .bnav{bottom:24px; border-radius:0 0 26px 26px}
  body[data-modo="app"]::after{
    content:""; position:fixed; left:0; right:0; bottom:0; height:50px;
    background:var(--fuera); z-index:4; pointer-events:none;
  }
}

/* cinco pestañas, no cuatro */
.bnav{grid-template-columns:repeat(5,1fr)}
.accesos{grid-template-columns:1fr}
/* 🔑 Un SVG NO se dimensiona con `font-size` como un emoji: sin
   `width`/`height` sale a su tamaño intrínseco (256 px) y revienta la caja.
   `fill:currentColor` ya viene en el SVG, así que el color lo hereda solo. */
.ico-lupa{width:16px; height:16px; display:block}
.ico-drop{width:30px; height:30px; display:block; margin:0 auto}
.ico-acc{width:21px; height:21px; display:block}
.ico-if{width:14px; height:14px; display:inline-block; vertical-align:-2px}

/* ── lo que va encima del rosa ──
   Sobre #E878CF el blanco da 2,62:1 y no se lee al sol. Su rosa no se toca; lo
   que cambia es la tinta de encima. Ver el bloque AJUSTES del generador. */
.btn,.paso-num,.vplan-flag,.dtab.is-on,.prog-track > *{color:var(--btn-ink)}
/* La flecha de los días iba en --accent, que como texto sobre celeste da
   2,33:1. Pasa al rosa oscuro, que es el que existe para leerse. */
.day-sub em{color:var(--accent-ink)}
/* Y su gemela, la flecha de las equivalencias: mismo --accent, mismo fondo
   celeste, mismos 2,33:1. Se quedó sin corregir el 11 ago porque el
   verificador de la maqueta no llega a mirar dentro de `.equiv`. La cazó el
   verificador del tema el 12 ago, en la misma pantalla del día. */
.eq-fl{color:var(--accent-ink)}

/* Los que antes eran <span> ahora son <button>: se pulsan. */
.day,.acc,.dtab,.bn-item{cursor:pointer; width:100%}
.hdr-btn{cursor:pointer}

/* El botón de volver traía 62 px fijos, que daban para «← Menú» pero no para
   «← Semana»: partía en dos líneas y dejaba la flecha sola arriba. Se ensancha
   a los dos lados a la vez, porque son los que mantienen centrado el título. */
.hdr-row .hdr-btn{flex:0 0 78px; white-space:nowrap}
.day:focus-visible,.acc:focus-visible,.dtab:focus-visible,
.bn-item:focus-visible,.btn:focus-visible,.hdr-btn:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
.dia-panel{display:none}
.dia-panel.is-on{display:block}

/* ── info ──
   `.aviso` ya viene del CSS base, del recuadro de Cocinado. Aquí solo hacen
   falta las tablas de dos columnas, y con clases propias: las de Leyenda
   (`.ley` / `.sig`) llevan la columna estrecha para siglas de tres letras. */
.if-tabla{display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r); overflow:hidden}
.if-fila{display:flex; gap:12px; padding:11px 14px; font-size:12.5px;
  border-bottom:1px solid var(--line); align-items:baseline; line-height:1.45}
.if-fila:last-child{border-bottom:none}
.if-fila span{color:var(--mut)}
.if-k{flex:0 0 104px; color:var(--ink); font-weight:700; font-size:12.5px}

/* 🔴 El hueco de la barra inferior SOLO donde hay barra inferior.
   `.scr` (el `.scr` de la maqueta) reserva 57 px abajo para que la última
   tarjeta no quede debajo de la barra de cinco pestañas. La web de venta no
   tiene esa barra: allí son 57 px de fondo vacío al final de la página, y en
   el tema —donde el body va en el gris de fuera— se veían como una franja
   clara justo debajo del pie. Lo vio Antonio el 25 ago 2026. */
body[data-modo="web"] .scr{padding-bottom:0}

/* ── el acceso a «todas las recetas» ──
   Misma forma que un día para que se lea como parte de la lista, pero en rosa
   suave para que se distinga: no es un día más, es la puerta al mes entero. */
.day-rec{
  background:var(--accent-soft); border-color:var(--accent);
  margin-top:2px;
  /* La ficha vive dentro de `.scr-venta`, y esto es la app: se repite aquí
     en vez de sacarla a `:root`, que obligaría a tocar el bloque de paleta
     que se le enseñó a Mónica. */
  --rosa-sobre-rosa:#A63C90;
}
.day-rec .day-emo{background:#FFFFFF}
/* 🔴 `--rosa-sobre-rosa` y no `--accent-ink`: sobre el rosa claro del fondo,
   el rosa normal da **4,44:1** y este proyecto se exige 4,5. Falla por seis
   centésimas, que es exactamente el tipo de fallo que no se ve mirando y sí
   mide el verificador. Esa ficha existe desde el 24 ago justo para el único
   caso de rosa sobre rosa que había en la venta; aquí aparece el segundo. */
.day-rec .day-nom{color:var(--rosa-sobre-rosa)}
/* 🔴 El dato de la derecha y su flecha también bajan de 4,5 sobre el rosa
   claro: `--mut` da 4,41 y `--accent` 4,44. Los dos fallan por centésimas y
   ninguno se nota mirando — los midió el verificador. */
.day-rec .day-sub{color:#55636E}
.day-rec .day-sub em{color:var(--rosa-sobre-rosa)}

.hdr-lema{display:block; font-family:var(--body); font-size:13px;
  color:var(--hdr-ink); margin:0 0 4px}
.hdr-home{position:relative}
.hdr-redes{position:absolute; top:10px; left:12px; display:flex; gap:8px}
.hdr-cuenta{position:absolute; top:10px; right:12px; display:flex; gap:8px}
.hdr-red{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  color:var(--hdr-ink); background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28); text-decoration:none;
}
a.hdr-red:hover{background:rgba(255,255,255,.22)}
.hdr-red.is-pendiente{cursor:default}
.hdr-red:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.hdr-red-ico{width:20px; height:20px; fill:currentColor}
.semana-menu,.guia{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px; display:flex; flex-direction:column}
.semana-menu{gap:12px}
.semana-cab,.guia-cab{display:flex; justify-content:space-between;
  align-items:center; gap:8px}
.semana-lbl,.guia-lbl{font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.semana-cuenta{font-size:12px; color:var(--ink)}
.semana-menu .days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px}
.semana-menu .day{justify-content:center; align-items:center; padding:11px 0;
  min-height:44px; border-radius:12px; background:#FFFFFF;
  border:1px solid var(--line); position:relative; gap:0}
.semana-menu .day-nom{flex:none; font-size:13px; text-align:center}
.semana-menu .day.is-hoy{background:var(--accent); border-color:var(--accent)}
.semana-menu .day.is-hoy .day-nom,
.semana-menu .day.is-hoy .day-sub{color:var(--btn-ink)}
.semana-menu .day-sub.sr,.sr{position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0}
.guia{--rosa-sobre-rosa:#A63C90}
.guia-cerrar{font-family:var(--body); font-size:12px; font-weight:700;
  color:var(--accent-ink); background:none; border:0; padding:6px 2px;
  cursor:pointer}
/* 🔄 15 sep 2026 (Antonio): «Ocultar» escondía la guía PARA SIEMPRE, sin
   forma de volver a verla. Pasa a plegable: el cuerpo se colapsa con
   `max-height`, la cabecera y el botón se quedan siempre visibles, y el
   mismo botón alterna Ocultar/Mostrar. `prefers-reduced-motion` la corta
   sin animación, igual que la hoja de receta. */
.guia-cuerpo{display:flex; flex-direction:column; gap:12px; margin-top:12px;
  max-height:600px; opacity:1; overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease}
.guia.is-cerrada .guia-cuerpo{max-height:0; opacity:0; margin-top:0}@media(prefers-reduced-motion:reduce){.guia-cuerpo{transition:none}}
.guia-intro{margin:0; font-size:13.5px; line-height:1.45; color:var(--ink)}
.guia-pasos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
.guia-paso{background:#FFFFFF; border-radius:var(--r); padding:10px 8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center}
.guia-tit{align-self:stretch; display:flex; align-items:center; gap:6px;
  font-family:var(--body); font-weight:700; font-size:12.5px; line-height:1.2;
  color:var(--ink); text-align:left; min-height:calc(1.2em * 3)}
.guia-num{flex:0 0 20px; height:20px; border-radius:50%;
  background:var(--accent-soft); color:var(--rosa-sobre-rosa);
  font-family:var(--mono); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.guia-ico{width:46px; height:46px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-ink)}
.ico-guia{width:24px; height:24px; display:block}
.guia-txt{margin:0; font-size:11.5px; line-height:1.4; color:var(--mut)}
.guia-mas{font-family:var(--body); font-size:11px; font-style:italic;
  color:var(--accent-ink); text-decoration:underline; background:none; border:0;
  padding:0; cursor:pointer}

/* ── el rótulo de cada comida, dentro del día ──
   🔴 Era una versalita gris de 10,5 px y se perdía: al bajar por la pantalla
      del día no se veía dónde acababa el desayuno y empezaba el almuerzo, que
      es justo lo que hay que distinguir de un vistazo. Lo señaló Antonio el
      25 ago 2026.

   ⚠️ La primera versión fue una pastilla rosa con filo, en versalitas. No le
      gustó, y con razón: seguía siendo letra pequeña, solo que dentro de una
      caja. Lo que hace de separador es el **tamaño**, no el fondo.

   Ahora es lo que de verdad es: un encabezado. 16 px en negrita con el icono
   grande al lado. Se queda en Jakarta y no en Fraunces para no competir con
   el nombre de la receta, que va justo debajo a 19 px en serif — así hay dos
   niveles claros: la comida manda sobre el bloque, el plato es su título. */
.meal-tag{
  display:flex; align-items:center; gap:9px;
  font-family:var(--disp); font-size:16px; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin:0 0 2px;
}
/* El icono, un punto por encima del texto: es lo que se ve primero al pasar
   el pulgar por la pantalla. */
.meal-tag{line-height:1.2}
/* 🔴 27 ago 2026: aquí había `.meal .meal-tag::first-letter{font-size:20px}`.
   Existía para agrandar el EMOJI (☀️ 🍲 🌙), que era literalmente la primera
   letra del texto. Al pasar a SVG esa regla o no aplica —un elemento
   reemplazado delante la anula— o, peor, agrandaría la «D» de «Desayuno».
   Se sustituye por dimensionar el icono, que es lo que se quería de verdad. */
.meal-ico{width:19px; height:19px; flex:none; color:var(--mut)}
.meal .meal-name{font-family:var(--disp); font-size:16px; font-weight:700;
  letter-spacing:0; line-height:1.2; color:var(--ink)}

.dia-fijo{position:sticky; top:0; z-index:6}
.dia-fijo .dtabs{position:static}

.dia-panel > .pad{gap:0; padding:14px var(--pad) 12px}
.comida{margin:0}
.comida + .comida{margin-top:14px}
.cm-card{position:relative; display:block; width:100%; padding:0;
  background:var(--hdr); border:0; border-radius:22px; overflow:hidden;
  text-align:left; font:inherit; color:var(--hdr-ink); text-decoration:none;
  cursor:pointer; box-shadow:0 8px 24px rgba(31,43,54,.14)}
.cm-foto{height:230px; background:var(--accent-soft); display:flex;
  align-items:center; justify-content:center; font-size:52px; overflow:hidden}
.cm-foto img{width:100%; height:100%; object-fit:cover; display:block}
.cm-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(31,43,54,.8) 0,
    rgba(31,43,54,.72) 84px, rgba(31,43,54,0) 170px)}
.cm-card .meal-tag{position:absolute; top:12px; left:12px; z-index:1; margin:0;
  padding:6px 12px 6px 9px; border-radius:999px; background:rgba(255,255,255,.92);
  border:1px solid rgba(31,43,54,.18); box-shadow:0 1px 4px rgba(31,43,54,.18);
  color:var(--ink); font-size:13px; display:inline-flex; align-items:center; gap:6px}
.cm-card .meal-ico{color:var(--ink)}
.cm-nom{position:absolute; left:16px; right:16px; bottom:14px; z-index:1;
  font-family:var(--disp); font-size:20px; font-weight:700; line-height:1.25;
  letter-spacing:0; color:#FFFFFF;
  text-shadow:0 0 1px #1F2B36, 0 0 1px #1F2B36, 0 1px 2px rgba(31,43,54,.55);
  display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cm-card:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}

html.hoja-abierta{overflow:hidden}
.hoja{position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end;
  justify-content:center; background:rgba(31,43,54,.45);
  transition:background-color .75s ease}
.hoja[hidden]{display:none}
.hoja-panel{position:relative; width:100%; max-width:430px;
  height:calc(100% - 14px); background:var(--ground);
  border-radius:18px 18px 0 0; overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(0); transition:transform .75s cubic-bezier(.45,.05,.25,1)}
.hoja.is-entrando{background:rgba(31,43,54,0); transition-duration:.5s}
.hoja.is-entrando .hoja-panel{transform:translateY(100%);
  transition:transform .5s cubic-bezier(.45,0,.35,1)}
.hoja-barra{position:sticky; top:0; z-index:2; height:36px; display:flex;
  align-items:center; justify-content:center; background:var(--ground);
  border-radius:18px 18px 0 0; touch-action:none; cursor:grab;
  -webkit-user-select:none; user-select:none}
.hoja-asa{width:42px; height:5px; border-radius:3px; background:#C3CDD6}
.hoja-cerrar{position:absolute; right:12px; top:4px; width:30px; height:30px;
  border-radius:50%; border:0; padding:0; background:var(--surface);
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer}
.ico-cerrar{width:16px; height:16px; display:block; flex:none}
.hoja-cerrar:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.hoja-cuerpo{padding-top:0}
.hoja .meal{padding-top:6px}@media(prefers-reduced-motion:reduce){
  .hoja,.hoja-panel{transition:none}
}

/* ── cada comida, en su propia banda ──
   🔑 Idea de Antonio el 25 ago 2026, y es mejor que remarcar el rótulo: lo
      que separa desayuno, almuerzo y cena no es el titular, es el BLOQUE. Con
      bandas alternas se ve de un vistazo dónde acaba una comida y empieza la
      siguiente, incluso desplazándose deprisa con el pulgar y sin leer nada.

   🔴 Alternan solo DOS tonos —blanco y un celeste muy tenue—, no tres. Un
      color por comida obligaría a inventar un tercero que no está en la
      paleta de Mónica, y además el color aquí no significa nada: no es el
      semáforo, es solo ritmo. Con dos, desayuno y cena comparten y el
      almuerzo se recorta entre ellos, que es justo lo que pidió.

   🔴 El tono par es #F2F8FC, MÁS CLARO que `--surface` (#E6F4FA). Si fuera el
      mismo, las tarjetas de ingredientes y pasos —que van en `--surface`— se
      fundirían con el fondo de su propia sección y desaparecerían.

   Los márgenes negativos sacan la banda a los bordes de la pantalla, por
   encima del `padding` de `.pad`. La foto ya trae los suyos, así que sigue
   sangrando igual. */
.meal{
  margin:0 calc(var(--pad)*-1);
  padding:18px var(--pad) 22px;
}
.meal:nth-of-type(even){background:#F2F8FC}
/* La foto abre la banda: sin esto quedaba un dedo de fondo por encima. */
.meal .meal-photo{margin-top:2px}
/* El separador sobra: la banda ya dice dónde acaba cada comida. */
.meal-sep{display:none}

/* ═══════ el índice de recetas ═══════
   Añadido el 25 ago 2026. La app solo se navegaba por calendario y para
   llegar a una receta había que acordarse de qué día caía. */

/* La cabecera de Recetas lleva dos filas: el título y, debajo, el selector
   de mes. `.hdr-row` es flex en fila, así que se le permite envolver y se le
   da ancho completo al selector para que caiga entero a la segunda. */
.hdr-recetas{flex-wrap:wrap}
.hdr-recetas .mespick{flex:1 0 100%; margin-top:8px}

.rc-buscar{position:relative; margin-bottom:12px}
.rc-lupa{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:.75; pointer-events:none;
}
.rc-input{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:11px 14px 11px 38px;
}
.rc-input::placeholder{color:var(--mut)}
.rc-input:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* Los filtros en una tira que se desplaza a lo ancho: con las etiquetas de
   Mónica pueden ser diez o doce, y partirlos en tres líneas se comería la
   pantalla antes de enseñar una sola receta. */
.rc-chips{
  display:flex; gap:7px; overflow-x:auto; padding-bottom:4px;
  margin-bottom:12px; scrollbar-width:none;
}
.rc-chips::-webkit-scrollbar{display:none}
.rc-chip{
  flex:0 0 auto; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; cursor:pointer; white-space:nowrap;
}
.rc-chip.is-on{
  background:var(--accent); border-color:var(--accent); color:var(--btn-ink);
}
.rc-chip:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

.rc-cuenta{margin:0 0 10px; font-size:12px; color:var(--mut)}
.rc-cuenta b{font-family:var(--mono); color:var(--accent-ink)}

/* 🔴 `auto-fill` con `minmax`, no un número fijo de columnas: la misma regla
   da dos columnas en un móvil y cuatro en un escritorio sin una sola media
   query, y no se rompe en las anchuras intermedias. */
.rc-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
/* 🔑 LA TARJETA ES LA FOTO. Pedido por Antonio el 27 ago 2026: la foto de
   la receta cubre la tarjeta entera y el nombre va centrado encima, sin icono.
   El fondo azul es lo que se ve mientras Mónica no haya subido la foto — y
   ese estado va a existir de verdad, porque el importador deja subir el Excel
   antes que las imágenes. */
.rc-item{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  display:block; padding:0; border:0; border-radius:var(--r);
  background:var(--hdr); cursor:pointer; text-align:center;
}
.rc-item[hidden]{display:none}
.rc-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 🔴 EL VELO NO ES DECORACIÓN: es lo único que hace legible el nombre.
   Las fotos las sube Mónica y no las controlamos — texto blanco sobre una
   foto de avena clara puede quedar en 1,5:1, y eso **no lo caza ningún
   medidor de contraste**, porque los medidores miran colores declarados, no
   los píxeles de una fotografía.
   El 72 % está calculado, no elegido a ojo: es la opacidad a la que el PEOR
   caso posible —una foto blanca pura— sigue dando **5,81:1** con el nombre en
   blanco y **5,08:1** con la meta al 90 %. Por debajo del 65 % se baja de
   4,5:1 y deja de cumplirse lo que este proyecto se exige.
   ⚠️ Si alguien lo aclara para «que se vea mejor la foto», hay que rehacer la
   cuenta. `comprobar_tarjetas_de_receta()` la rehace sola y revienta. */
.rc-velo{position:absolute; inset:0; background:rgba(31,43,54,.72)}

.rc-txt{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; padding:12px;
}
.rc-nom{
  font-family:var(--disp); font-weight:600; font-size:15px;
  color:#fff; line-height:1.25; text-wrap:balance;
}
/* El papel de mono: la ETIQUETA y el DATO. Es el «TAGLINE SPACE» de la
   referencia que trajo Antonio. */
.rc-meta{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
}
.rc-item:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.rc-vacio{margin:18px 0 0; font-size:13px; color:var(--mut)}
.rc-vacio[hidden]{display:none}

/* ═══════ el padding perdido de las listas ═══════

   🔴 BUG DE ORIGEN, encontrado el 25 ago 2026 por Antonio: en la pantalla de
      una receta, las cantidades («4 cdas», «1 vaso») salían **pegadas al
      borde** de su tarjeta, sin un pixel de aire.

   La causa es una colisión de especificidad de las que no se ven leyendo:

       :root ul, :root ol { padding: 0 }      ← (0,1,1)  el reset de la 1ª tanda
       .ingr, .pasos, .equiv { padding: 12px 14px }   ← (0,1,0)  el componente

   El reset lleva un elemento además de la clase, así que **gana**, y las
   listas se quedan a cero. Afecta a las SEIS listas con fondo de tarjeta de
   la app: `.ingr`, `.pasos`, `.equiv`, `.bc-l`, y en menor medida `.cat-l` y
   `.ley` —estas dos ponen el aire en sus `li`, así que se salvaron—.

   🔑 No se arregla tocando el reset: vive en `generar-propuestas-diseno.py`,
      que es el registro de lo que Mónica vio y no se toca. Se arregla aquí,
      dándole a cada componente un `:root` delante para que suba a (0,2,0) y
      gane. Al pasar al tema, `:root` se renombra a `:root` y la relación se
      mantiene igual.

   ⚠️ Llevaba así desde la primera maqueta. No lo introdujo nadie hoy: nunca
      había funcionado, y en una captura pequeña «se veía apretado» sin más. */
:root .ingr,:root .pasos,:root .equiv{padding:12px 14px}
:root .bc-l{padding:13px}

/* ── y las líneas base ──
   🔴 En `.ingr li` el nombre del ingrediente es un **nodo de texto suelto**,
      no un elemento: `<li><span class="ing-cant">4 cdas</span> Copos</li>`.
      En un contenedor flex ese texto se convierte en un ítem anónimo, y con
      `align-items` por defecto se alinea por el ALTO de la caja, no por la
      línea base. Como la cantidad va en monoespaciada de 12 px y el nombre en
      Jakarta de 13, quedaban desnivelados 2 px: el nombre parecía hundido.
      Lo vio Antonio, y es de esos detalles que se notan sin saber qué miras.
   `baseline` los asienta sobre la misma raya, que es lo que hace que una
   lista de cantidades se lea como una tabla y no como texto suelto. */
.ingr li,.equiv li{align-items:baseline}
/* En los pasos NO: el número va en un círculo y ahí `baseline` lo descolgaría
   del texto cuando el paso ocupa dos líneas. */

/* ═══════ afinado de la app para que hable el idioma de la landing ═══════

   Añadido el 25 ago 2026, a petición de Antonio, después de comprobar que la
   app y la landing compartían **paleta y tipografías pero no lenguaje
   visual**: los 11 usos de JetBrains Mono estaban todos dentro de `.scr-venta`
   y ni uno en la app.

   ── LA REGLA, QUE ES LO QUE FALTABA ──
   La landing ya tenía un sistema tipográfico de tres papeles, solo que sin
   escribir. Aquí se escribe y se aplica también a la app:

       Fraunces          el NOMBRE de algo    titulares, nombre de receta
       Plus Jakarta      la PROSA             descripciones, pasos, respuestas
       JetBrains Mono    la ETIQUETA y el DATO   rótulos de sección, unidades,
                                                 macros, siglas, cantidades

   El tercero es el que hace que se reconozca la marca: en la landing cada
   sección abre con una versalita mono (`EL MÉTODO`, `CADA MES RECIBES`,
   `PRECIOS`) y los porcentajes del plato van en mono. En la app existían los
   mismos elementos —`INGREDIENTES`, `PREPARACIÓN`, `KCAL`— pero en Jakarta
   espaciada: mismo papel, otra letra, y por eso las dos superficies no se
   leían como el mismo producto.

   🔴 Lo que NO se toca, y es deliberado: el aire y la densidad. La landing
      respira (padding de 20 px, secciones de 70) porque se lee una vez y
      tiene que convencer; la app aprieta (12-16 px) porque se abre a diario
      con una mano y lo que importa es cuánto cabe. Igualar eso haría la app
      peor, no más coherente. Lo que se unifica es el **idioma**, no la
      métrica.

   🔴 Mono es más ancho que Jakarta a igual tamaño, así que cada bloque de
      aquí baja el `font-size` un punto o dos respecto al que sustituye. Las
      etiquetas de macros y del semáforo viven en columnas estrechas dentro de
      430 px: sin esa compensación se parten en dos líneas. Lo cazan las
      comprobaciones de texto partido.  */

/* Los rótulos de sección. Es el cambio que más se nota: son el eco directo
   de `.v-eyebrow`, que es lo que abre cada sección de la landing. */
.sec{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em;
}
/* Las categorías de la lista de la compra hacen el mismo papel. */
.cat-h{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  font-weight:500}

/* ── los datos ──
   Las macros son el equivalente exacto de los porcentajes del plato de la
   landing (`.pl-num`), que ya iban en mono. `tabular-nums` para que las
   cuatro columnas no bailen al cambiar de receta. */
.mac b{font-family:var(--mono); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums}
.mac span{font-family:var(--mono); font-size:8.5px; font-weight:500;
  letter-spacing:.08em}
/* Cantidades de ingrediente: «4 cdas», «1 vaso». Son dato y unidad, el caso
   de libro para monoespaciada — y además se alinean solas en columna. */
.ing-cant{font-family:var(--mono); font-size:12px; font-weight:500}
/* El número de paso, que en la landing es el número dentro de la porción. */
.paso-n{font-family:var(--mono); font-size:10px; font-weight:500}
/* Las siglas de la leyenda son literalmente códigos: cda, cdta, kcal. */
.sig{font-family:var(--mono); font-size:12px; font-weight:500}
/* El mes de la cabecera, igual que el «Desde» de la barra de la landing. */
.hdr-mes{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em}
/* Los contadores: «3 comidas», «30 productos», «6 pasos». */
.day-sub,.acc span:last-child{font-family:var(--mono); font-size:10px}
/* Las etiquetas de la tabla de Info. */
.if-k{font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  font-weight:500}

/* El semáforo. Sus tres etiquetas son el mismo elemento que `.met-tag` de la
   landing, que ya iba en mono — eran el caso más flagrante de la misma cosa
   escrita de dos maneras.
   🔴 La columna sube de 66 a 74 px: «DESCANSO» en mono con `.1em` mide más
      que en Jakarta y se partía en dos líneas. */
.sem-lbl{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.08em; flex:0 0 74px;
}

/* ── la casilla de la compra, cuando es un <input> de verdad ──
   En la maqueta `.cbox` es un `<span>` pintado: allí no hay nada que marcar y
   basta con que se vea. En el tema es un `<input type="checkbox">`, porque lo
   tiene que poder usar alguien con teclado o con lector de pantalla.

   🔴 Un `<input>` trae su propio dibujo del sistema y NO acepta `::after`, así
      que las reglas de `.cbox` de la maqueta se le quedan a medias: sale un
      cuadradito gris nativo dentro de una caja redondeada. `appearance:none`
      lo deja en blanco para poder pintarlo, y la marca se hace con un fondo
      SVG en vez de con un pseudoelemento.

   Estas reglas no estorban en la maqueta: allí ningún `.cbox` es un input. */
input.cbox{
  appearance:none; -webkit-appearance:none; margin:0; cursor:pointer;
  background-repeat:no-repeat; background-position:center;
}
input.cbox:checked{
  background-color:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input.cbox:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
/* La etiqueta envuelve toda la fila para que el área pulsable sea la fila
   entera y no un cuadrado de 19 px — en el móvil eso es la diferencia entre
   marcar la compra con el pulgar o pelearse con ella. */
.ci-lbl{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
}
.ci:has(input.cbox:checked) .ci-nom{
  text-decoration:line-through; color:var(--mut);
}

/* ── el filo rosa ──
   En la landing cada sección clara abre con el trazo corto rosa que es la
   firma de sus carruseles (`.handle::before`). En la app solo lo llevaba la
   cabecera. Puesto también sobre los rótulos de sección, las dos superficies
   se abren igual.
   🔴 Va como pseudoelemento y no como borde: un `border-top` en `.sec`
      ocuparía todo el ancho y se leería como una línea separadora más, que es
      justo lo contrario de una firma. */
.sec{position:relative; padding-top:11px}
.sec::before{
  content:""; position:absolute; top:0; left:0;
  width:22px; height:2.5px; border-radius:2px; background:var(--accent);
}

/* ── el selector de meses ──
   Vive dentro de la cabecera azul, así que todo lo que escribe encima usa los
   tokens `--hdr-*`, igual que el título y el mes.

   🔴 El `<select>` se estiliza con `appearance:none` **y se le repone la
      flecha**. Quitando la apariencia nativa sin poner nada, en Chrome de
      escritorio queda una caja idéntica a una etiqueta de texto: nadie
      adivina que se puede pulsar. La flecha va como fondo SVG en el
      contenedor, no en el propio select, para que no se recorte al abrirse.

   🔴 `max-width` en el select, no ancho fijo. Los nombres los escribe Mónica
      en el Excel: «Octubre 2026» mide una cosa y «Diciembre 2026 — especial
      Navidad» mide otra. Con ancho fijo el segundo se sale de la cabecera. */
.mespick{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  justify-content:center;
}
.mespick-l{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hdr-mut);
}
.mespick-s{
  appearance:none; -webkit-appearance:none;
  font:inherit; font-size:13px; font-weight:600; color:var(--hdr-ink);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:7px 30px 7px 14px; max-width:190px;
  cursor:pointer; text-overflow:ellipsis;
  /* La flecha, dibujada aquí para no depender de ningún archivo. */
  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='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.mespick-s:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
/* Las opciones las pinta el sistema y heredan el fondo oscuro del select en
   algunos navegadores: se fijan claras para que se lean siempre. */
.mespick-s option{color:#1F2B36; background:#FFFFFF}
.mespick-b{
  font:inherit; font-size:12px; font-weight:700; color:var(--hdr-ink);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:7px 13px; cursor:pointer;
}
/* Con JS el desplegable navega solo y el botón sobra. La clase la pone el JS
   sobre el formulario, no al revés: si el JS no corre, el botón sigue ahí. */
.mespick.js-auto .mespick-b{display:none}

/* ── el desplegable propio (con JS) ──
   🔑 El `<select>` nativo abre una lista que pinta el SISTEMA OPERATIVO y no se
      puede tematizar entre navegadores (en iPhone es una rueda, en Windows una
      caja gris con tipo del sistema). Con JS se sustituye por un `role=listbox`
      de marca. Sin JS se queda el `<select>` + botón «Ver», que ya funciona.
   🔴 `.js-lb` la pone el JS: si este bloque no carga, el `<select>` sigue
      visible. Nunca se esconde el nativo con CSS a secas. */
.mespick.js-lb .mespick-s{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none; overflow:hidden;
}
.mespick-ui{position:relative; display:inline-flex}
.mespick-btn{
  font:inherit; font-size:13px; font-weight:600; color:var(--hdr-ink);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:7px 34px 7px 14px; max-width:190px;
  cursor:pointer; position:relative; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mespick-fl{
  position:absolute; right:14px; top:50%; width:9px; height:6px; margin-top:-2px;
  background:currentColor; pointer-events:none;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.mespick-btn:focus-visible,
.mespick-list:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.mespick-list{
  position:absolute; top:calc(100% + 6px); left:0; z-index:40;
  margin:0; padding:5px; list-style:none; text-align:left;
  min-width:calc(100% + 24px); width:max-content; max-width:240px;
  max-height:262px; overflow-y:auto;
  background:#FFFFFF; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 34px rgba(31,43,54,.24);
}
.mespick-list[hidden]{display:none}
.mespick-opt{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.3;
  color:var(--ink); padding:9px 12px; border-radius:9px; cursor:pointer;
}
.mespick-opt.is-foco{background:var(--accent-soft)}
.mespick-opt[aria-selected="true"]{color:var(--accent-ink); font-weight:700}
.mespick-opt[aria-selected="true"]::after{content:"✓"; float:right; margin-left:12px}

/* ── la cinta de «estás en un mes anterior» ──
   🔴 Ámbar, no rosa ni azul. No es una sección más de la app: es un aviso de
      que lo que se ve no es lo de este mes, y tiene que recortarse contra
      todo lo demás. El rosa es de marca y el azul es la cabecera; los dos se
      leerían como decoración. */
.cinta-mes{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; background:#FDF3DE; border-bottom:1px solid #F0DFB8;
  font-size:12.5px; color:#6B4E12; line-height:1.4;
}
.cinta-mes[hidden]{display:none}
.cinta-mes b{color:#5A400C}
/* 🔴 `text-decoration:none` aunque en la maqueta esto sea un `<button>`, que
   no se subraya: en el tema es un `<a>` —es navegación, y así se puede abrir
   en otra pestaña y funciona sin JS— y ahí sí heredaba el subrayado del
   navegador. Salía una píldora con el texto subrayado dentro. */
.cinta-mes-b{
  flex:0 0 auto; font:inherit; font-size:12px; font-weight:700;
  color:#5A400C; background:#F7E2B4; border:1px solid #E6CB8C;
  border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.cinta-mes-b:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* ═══════════════ la web de venta ═══════════════

   Rehecha el 24 ago 2026 (segunda pasada del día). La primera calcaba la
   landing de Mónica; Antonio la paró y pidió fusionar, no sustituir, y señaló
   dos fallos concretos: la cabecera blanda y la tarjeta blanca del plato
   rompiendo la sección. Los dos están arreglados abajo.

   ── EL RITMO DE COLOR, QUE ES LA REGLA QUE FALTABA ──
   El problema de la pasada anterior no era un color suelto: era que no había
   regla, así que cada sección decidía por su cuenta y salían parches. Ahora:

       nav          claro
       hero         AZUL      #34495E   ← ancla 1, y el plato vive aquí
       tira         celeste
       para ti      claro
       método       AZUL      #34495E   ← ancla 2, el semáforo brilla encima
       incluye      claro
       precios      AZUL OSCURO #2A3B4C ← ancla 3, y es el más oscuro
       sobre mí     celeste              porque es donde se pide el dinero
       dudas        claro
       cierre       AZUL      #34495E   ← ancla 4

   Cuatro anclas oscuras, claras entre medias, y el bloque del dinero es el
   único que baja al azul profundo.

   🔴 **El rosa nunca es fondo de bloque.** Lo paró Antonio el 13 ago —«el rosa
      es para títulos, no para background»— y sigue en pie. El rosa vive en
      texto, botones, filos y el plato. */

.scr-venta{
  display:block; min-height:0; padding-bottom:0;
  /* Rosa oscuro para el único caso de rosa sobre rosa claro (4,93:1). */
  --rosa-sobre-rosa:#A63C90;
  /* Rosa aclarado para texto pequeño sobre azul. Dos pasadas para acertar:
     el de marca #E878CF da 4,39:1 y #EE94DA se queda en **4,37:1** sobre el
     azul de las cabeceras — falla por trece centésimas. #F2A6E1 da 5,01:1
     sobre #34495E y 6,19:1 sobre el azul hondo. */
  --rosa-sobre-azul:#F2A6E1;
  --azul-hondo:#2A3B4C;
  --sobre-azul:#D7E2EA;
  /* Los tres grupos de comida del plato. NO son los del semáforo: aquellos
     son días de entreno, estos son alimentos.
     🔄 14 sep 2026 (Antonio): los tres son COLORES DE MARCA —rosa, celeste y
     azul marino— y el plato vive sobre blanco. Las cifras de contraste de
     abajo eran contra el azul y ya no aplican.
     🔴 Los tres pasan de 3:1 contra el azul (3,55 · 6,46 · 4,79), pero
        **entre ellas no se separan por luminancia**: con el rosa de marca
        fijo en medio siempre queda un par a ~1,2:1, y no hay combinación que
        lo evite sin tocar su rosa. Quien separa las porciones de verdad es el
        hueco de loza que queda entre ellas — por eso el hueco no es adorno y
        por eso se ensanchó a 1,8°. Para quien no distinga los tonos, la forma
        y la leyenda siguen diciendo qué es cada cosa. */
  --pl-carb:#E878CF;
  --pl-veg:#A9DCEC;
  --pl-prot:#34495E;
  /* La loza. Un blanco cálido, no el blanco puro: sobre el azul el blanco
     puro se lee como un hueco recortado y no como un plato. El surco es la
     línea interior que separa el ala de la comida — es lo que termina de
     convencer al ojo de que hay un plato debajo. */
  --pl-loza:#F4F1EC;
  --pl-filo:rgba(52,73,94,.16);
  --pl-surco:rgba(52,73,94,.13);
}

/* ── la marca, compuesta con letras ──
   🔴 Antes aquí iba `monica-banner.webp`: 1546 px con el rótulo «NUTRICIÓN
      MÓNICA» **dibujado dentro**. A ancho completo se estiraba y se ablandaba,
      y no hay tamaño que lo arregle — es un raster de texto. Encima era su
      marca vieja, serif negra sobre papel, justo de la que quiso romper al
      rechazar la primera tanda de paletas. Puesto en letras: nítido a
      cualquier tamaño, seleccionable, y en su paleta. */
/* ── LA COLUMNA ──
   Una columna de verdad, y no `align-items:center` + `max-width` en cada hijo.

   🔴 Por qué importa: con el reparto viejo, para que un titular cortara antes
      que el texto hacía falta `margin-right:auto` en el h2 — y eso **anula el
      centrado del contenedor**. El titular se iba al filo de la sección
      (x=40) y el texto se quedaba en la columna (x=170): dos filos izquierdos
      distintos en la misma sección, que es de esas cosas que se ven raras sin
      que sepas por qué. Con una columna real, un `max-width` corto nace del
      filo de la columna y no pelea con nada. */
.v-col{
  width:100%; max-width:1000px; margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
}

/* 🔄 14 sep 2026 (Antonio): header y barra fija de abajo, los dos en
   CELESTE — enmarcan la página arriba y abajo con el mismo color. */
.v-nav{
  position:sticky; top:0; z-index:30; padding:12px 20px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.v-nav .v-col{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px;
}
.v-marca{display:flex; flex-direction:column; gap:1px; text-decoration:none}
.v-marca-n{
  font-family:var(--hero); font-size:18px; font-weight:600;
  letter-spacing:-.015em; color:var(--ink); line-height:1.1;
}
.v-marca-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
}
.v-nav-links{display:none}
.v-nav-links a{
  font-size:14px; font-weight:600; color:var(--mut); text-decoration:none;
}
.v-nav-links a:hover{color:var(--ink)}
.v-nav-acc{display:flex; align-items:center; gap:10px}
/* 🔴 `text-decoration:none` aunque aquí sean `<button>`, que no se subrayan.
   En el tema son `<a>` —son navegación— y ahí heredan el subrayado del
   navegador: «Suscribirme» salía con raya debajo dentro de la píldora rosa.
   Es la tercera vez que muerde este mismo desajuste maqueta/tema, así que la
   regla se pone en el sitio donde vale para los dos. */
.v-nav-btn,.v-nav-cta{text-decoration:none; display:inline-block}
/* 🔄 15 sep 2026 (Antonio): con el header celeste, el contorno de «Entrar»
   se fundía con el fondo (`--line` es casi el mismo celeste que `--surface`).
   Pasa a píldora blanca con sombra apenas visible — se distingue del header
   sin competir con el rosa de «Suscribirme». */
.v-nav-btn{
  font-size:13px; font-weight:700; color:var(--accent-ink);
  background:var(--ground); border:0; border-radius:999px; padding:9px 16px;
  white-space:nowrap; box-shadow:0 1px 4px rgba(31,43,54,.14);
}
/* La acción principal de la barra. Mismo rosa y mismo texto oscuro que el
   resto de botones de la página: es el color de marca de Mónica y el
   `--btn-ink` que se fijó el 12 ago (5,50:1 — el blanco encima da 2,62 y no
   vale ni agrandando la letra). */
.v-nav-cta{
  font-size:13px; font-weight:700; color:var(--btn-ink);
  background:var(--accent); border:1.5px solid var(--accent);
  border-radius:999px; padding:9px 16px; white-space:nowrap;
}
.v-nav-acc{gap:6px}
.v-nav-btn,.v-nav-cta{font-size:12.5px; padding:8px 12px}
.v-nav-menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto; padding:0; border:0;
  border-radius:999px; background:var(--ground); color:var(--ink);
  box-shadow:0 1px 4px rgba(31,43,54,.14); cursor:pointer;
}
.v-nav-menu:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.v-nav-menu-ico{width:22px; height:22px; fill:currentColor}
.v-nav-panel{
  position:absolute; right:20px; top:calc(100% - 4px); display:flex;
  flex-direction:column; min-width:190px; padding:6px 18px;
  background:var(--ground); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 28px rgba(31,43,54,.18);
}
.v-nav-panel[hidden]{display:none}
.v-nav-panel a{
  padding:12px 0; font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line);
}
.v-nav-panel a:last-child{border-bottom:0}@media(max-width:374px){
  .v-marca-h{display:none}
  .v-nav{padding-left:12px; padding-right:12px}
  .v-nav .v-col{gap:6px}
  .v-nav-acc{gap:4px}
  .v-nav-btn,.v-nav-cta{font-size:11.5px; padding:7px 9px}
  .v-nav-menu{width:34px; height:34px}
  .v-nav-panel{right:12px}
}
.v-marca-n{font-size:16px; white-space:nowrap}@media(max-width:374px){.v-marca-n{font-size:13px}}

/* ── el hero ──
   🔄 13 sep 2026: pasó de ancla oscura a clara. Mónica mandó por correo el
   diseño nuevo con su foto a la derecha, fondo claro. Antes era `--hdr`
   (el azul oscuro) con texto blanco; ahora es `--ground` con `--ink`, como
   el resto de secciones claras de la página. */
.v-hero{
  position:relative; background:var(--ground); color:var(--ink);
  padding:28px 20px 0; overflow:hidden;
}
/* 🔴 Fila DESDE MÓVIL, no solo desde 760 px. Su referencia (una captura de
   su propio móvil) lleva el texto y la foto lado a lado desde el principio
   — no es un texto apilado que se pone en fila en escritorio. La media
   query de `.scr-venta` de más abajo solo AJUSTA huecos y tamaños; la fila
   ya viene puesta aquí. */
.v-hero .v-col{
  position:relative; z-index:1;
  flex-direction:row; align-items:flex-start; gap:14px;
}
/* 🔄 13 sep 2026, segunda referencia de Mónica (captura de móvil).
   🔑 En móvil TODO va en `vw`, medido en su captura (528 px de ancho): así
   la proporción texto ↔ foto es la suya en cualquier móvil, en vez de un
   texto de 16 px fijos que en 390 px empuja la foto fuera. Escritorio
   (≥760 px, más abajo) vuelve a px. La foto va ABSOLUTA detrás del texto:
   en su diseño el tupper se mete bajo la columna de texto. */
.v-hero{padding:8vw 4.5vw 3vw}
.v-hero .v-eyebrow{
  font-family:var(--body); font-size:2.75vw; letter-spacing:.16em;
  line-height:1.45; color:var(--ink); margin:0; max-width:42vw;
}
.v-hero .v-col{display:block}
.v-hero .v-hero-txt{width:57vw; gap:0; padding-bottom:0}
.v-hero .v-hero-txt .lp-h1{
  font-size:7.95vw; line-height:1.07; margin-top:3vw; color:var(--btn-ink);
}
.v-hero .v-hero-txt .lp-sub{
  font-size:3.3vw; line-height:1.52; color:var(--btn-ink); margin-top:3.4vw;
  font-weight:500;
  max-width:47vw;
}
.v-hero-p2{
  margin:3vw 0 0; font-size:2.6vw; line-height:1.72; color:var(--btn-ink);
  font-weight:500; max-width:45vw;
}
/* 🔴 16 sep 2026: era 48.5vw, igual que `.v-hero-txt`. La foto empieza en
   `left:42vw` (medido desde el borde de `.v-hero`, igual que el botón), así
   que con ese ancho el filo derecho del botón (4.5vw + 48.5vw) se metía
   11vw dentro de ella — el rosa pisaba el táper. A 36vw el botón para en
   40.5vw, antes de que la foto empiece. Antonio lo vio en su móvil. */
.v-hero .v-cta{margin-top:2vw; width:36vw; gap:2.6vw}
.v-hero .v-cta .btn{
  height:9.7vw; padding:0; font-size:3.2vw; font-weight:500;
  border-radius:999px; display:flex; align-items:center;
}
.v-hero .v-cta-alt{font-size:2.95vw; font-weight:500; padding-bottom:.4vw}
.v-hero-desde{margin:3vw 0 0; width:36vw; text-align:center; font-size:2.6vw;
  line-height:1.4; color:var(--btn-ink); font-weight:500}
.v-hero-desde b{font-weight:800}
.v-hero-punto{display:none}
.v-hero-cancela{display:block}
/* «adaptables» subrayado con una barra rosa que asoma por los dos lados y
   se mete bajo la línea base, como en su captura. `isolation` deja la barra
   detrás de las letras sin mandarla detrás del fondo de la sección. */
.v-subraya{position:relative; isolation:isolate; font-weight:700; color:#11181F}
.v-subraya::after{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; bottom:-.26em; height:.42em;
  background:var(--accent); border-radius:1px;
}
/* 🔴 Por defecto va el rosa OSCURO, porque la mayoría de las secciones son
   claras. El claro se activa solo dentro de las anclas oscuras — el hero
   ya no es una de ellas desde el 13 sep 2026. Puesto al revés —que es como
   salió a la primera— el «eyebrow» daba **2,12:1** sobre blanco: ilegible, y
   en pantalla parecía simplemente «rosa clarito». */
/* 🔴 13 px, no 11. Antonio los vio pequeños el 25 ago 2026 y tenía razón:
   son el rótulo que abre cada sección —lo primero que se lee de ella— y a
   11 px en versalitas monoespaciadas se leían como un pie de foto. Sube el
   cuerpo y baja un punto el espaciado entre letras, que a mayor tamaño ya no
   hace falta tanto para que respiren. */
.v-eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; color:var(--accent-ink);
  display:block; margin-bottom:4px;
}
.v-oscura .v-eyebrow,
.v-marino .v-eyebrow{color:var(--rosa-sobre-azul)}
.v-hero-txt{
  display:flex; flex-direction:column; gap:16px; flex:1 1 0; min-width:0;
  padding-bottom:28px;
}
.v-hero .lp-h1{
  font-family:var(--hero); font-size:28px; font-weight:600; line-height:1.06;
  letter-spacing:-.02em; color:var(--ink); margin:0; text-wrap:balance;
}
/* La itálica es de verdad, no sintetizada: Fraunces se pide con el eje
   `ital`. Un oblicuo falso sobre una serif display canta. */
.v-hero .lp-h1 em{font-style:italic; color:var(--accent-ink)}
.v-hero .lp-sub{
  margin:0; font-size:16px; line-height:1.55; color:var(--mut);
  max-width:46ch;
}
.v-cta{display:flex; flex-direction:column; gap:12px; align-items:stretch}
.v-cta .btn{width:100%; justify-content:center}
.v-cta-alt{
  align-self:center; font-size:14px; font-weight:600; color:var(--ink);
  text-decoration:none; border-bottom:1.5px solid var(--accent);
  padding-bottom:2px;
}
.v-nota{margin:0; font-size:13px; color:var(--mut)}
.v-nota b{color:var(--ink)}
.v-nota-c{text-align:center}
/* La sección de precios sigue siendo ancla oscura: su `.v-nota` necesita su
   propio blanco, que ya no hereda de la base desde que el hero se aclaró. */
.v-precios .v-nota b{color:var(--ink)}

/* ── la foto del hero, Y el óvalo dentro del MISMO contenedor ──
   🔴 13 sep 2026, corregido por indicación directa de Antonio: el óvalo NO
   va suelto — va como fondo (`::before`) de `.v-hero-foto`, el mismo div
   que ya lleva la foto y las líneas. Así los tres viajan pegados como una
   sola pieza en cualquier ancho: si `.v-hero-foto` se mueve (fila en móvil,
   fila con más hueco en escritorio), el óvalo se mueve con él porque es
   parte de él, no una posición calculada aparte que se puede desincronizar.
   Tamaño del óvalo fijo por `aspect-ratio` (301/412, medido en su captura
   marcada) para que nunca se deforme; `right:0` lo ancla al mismo borde por
   el que sangra la foto, y `top` lo alinea con el borde superior de las
   líneas — en su captura, los dos bordes coinciden. */
.v-hero-foto{
  position:relative; flex:0 0 auto; width:44%;
  margin:0 -20px 0 0; align-self:flex-start;
}
.v-hero-foto::before{
  content:""; position:absolute; z-index:0;
  /* 🔴 13 sep 2026: `right:0` dejaba TODO el sobrante (18 % de ancho) a la
     izquierda de ella y nada a la derecha — Antonio lo vio descentrado.
     `right:-9%` reparte ese sobrante a partes iguales a los dos lados. */
  right:-9%; top:20%; width:118%; aspect-ratio:301/412;
  /* 🔄 13 sep 2026 (Antonio): más pequeño —el borde de arriba a la altura
     de la NARIZ (~30 % del alto de la foto)— y terminando donde termina
     la foto (`bottom:0`), centrado bajo ella. Ancho por `aspect-ratio`
     a partir del alto, para que no se deforme. Esto anula lo de arriba. */
  top:30%; bottom:0; right:auto; left:50%; width:auto; height:auto;
  transform:translateX(-50%);
  /* Su parte de abajo se funde igual que las piernas: sin esto la sección
     lo cortaba en seco (`overflow:hidden`) y parecía un tajo. */
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image:linear-gradient(to bottom, #000 62%, transparent 97%);
  border-radius:50%;
  /* 🔴 13 sep 2026: NO es un círculo sólido — «el óvalo debe fusionarse
     con el blanco» (Antonio). El relleno se difumina hacia el borde en
     vez de cortar en seco; el `border-radius` sigue ahí para que la forma
     de base sea la elipse medida, pero el color ya no llega opaco hasta
     ese borde. */
  background:radial-gradient(
    ellipse at center,
    var(--surface) 0%, var(--surface) 55%, rgba(230,244,250,0) 100%
  );
}
/* 🔴 13 sep 2026: «Mónica no debe sufrir un corte, el bottom de la imagen
   debe ir fundiéndose con el blanco». La foto es un recorte sin fondo
   (alfa), así que no hay ningún borde rectangular que tapar — lo que pedía
   Antonio es que el propio final de sus piernas, donde termina la foto
   original, no se vea como un corte limpio. Una máscara CSS desvanece el
   último tramo de la imagen a transparente. */
.v-hero-foto img{
  position:relative; z-index:1; display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 88%, transparent 100%);
}
/* Trazos rosas AL NORESTE de ella, a la altura de la oreja — sin pisarla.
   🔴 13 sep 2026, corregido dos veces: `left:78%,top:22%` tocaba el pelo
   (muy a la izquierda); subirlo a `top:6%` lo separó pero quedó
   demasiado arriba, ya no a la altura de la oreja. El `top` bueno es el
   mismo que el del óvalo (20 %, coinciden en su captura de referencia) —
   lo que hacía falta mover era solo el `left`, más a la derecha. */
.v-hero-lineas{
  position:absolute; z-index:2; left:84%; top:19%; width:13%;
}
.v-hero-lineas svg{width:100%; height:auto; display:block}
.v-hero-lineas path{
  fill:none; stroke:var(--accent); stroke-width:2.6;
  stroke-linecap:round;
}
/* 🔄 13 sep 2026 — MÓVIL según su segunda captura: foto grande, absoluta,
   detrás del texto y sangrando por la derecha; SIN óvalo ni trazos (no
   aparecen en esa captura). En escritorio vuelven los dos. Posición medida
   casando ojos y tupper de la foto con su captura. */
.v-hero-foto{
  position:absolute; z-index:-1; margin:0;
  left:42vw; top:auto; bottom:-3vw; width:55vw;
}
/* 🔄 13 sep 2026: óvalo y trazos rosas también en móvil (pedido por Antonio).
   La foto sangra por la derecha, así que en `left:84%` los trazos tocaban el
   borde de la pantalla: en móvil van más hacia dentro. */
.v-hero-lineas{left:79%; top:12%; width:12%}

.v-hero-foto img{
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 97%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 97%);
}

/* ── EL PLATO ──
   🔴 Antes era un donut dentro de una tarjeta blanca sobre el azul: un widget
      caído encima de la sección, que es lo que Antonio señaló. Ahora vive
      **directamente sobre el fondo**, sin contenedor.

   Y deja de ser un anillo. Su método es literalmente el *plato del atleta* —
   proporciones de un plato—, así que el dibujo es un plato: círculo lleno con
   un filo de loza. El truco es `r=50` con `stroke-width=100`: el trazo se
   pinta 50 hacia dentro y 50 hacia fuera, o sea rellena de 0 a 100 de radio.
   Así el `stroke-dasharray` sigue funcionando igual y la circunferencia sigue
   siendo 314,16 — las comprobaciones del plato no se tocan. */
.plato{margin:0; display:flex; flex-direction:column; gap:20px}
/* El lienzo es 400×340 y ya no es cuadrado: los rótulos viven fuera del
   plato, a izquierda y derecha. Tampoco se gira el SVG — antes se rotaba
   -90° para que los arcos empezaran arriba; ahora eso lo hace la geometría,
   y girar el lienzo pondría los rótulos de lado. */
.pl-dial{width:100%; max-width:420px; align-self:center}
.pl-dial svg{width:100%; height:auto; display:block; overflow:visible}
/* `d` es animable en Chrome; donde no lo sea, el cambio es instantáneo y no
   pasa nada. No se anima la opacidad: parpadear las porciones al cambiar de
   día se lee como un error de carga. */
.pl-seg{transition:d .5s cubic-bezier(.65,0,.35,1)}
.pl-info{display:flex; flex-direction:column; gap:14px; margin:0}
.pl-hoy{
  margin:0; font-size:13px; color:var(--sobre-azul);
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.pl-hoy strong{color:#FFFFFF}
/* ── las piezas de la infografía ──
   🔴 Ya no hay leyenda aparte. Antonio la vio pequeña, y el problema de fondo
      era peor que el tamaño: una lista de colores debajo obliga a cruzarla con
      el dibujo. Ahora cada nombre **apunta a su porción** con una línea guía,
      y el porcentaje va dentro. Se lee sin traducir nada. */

/* La sombra del plato, difuminada por debajo. */
.pl-sombra{fill:rgba(12,20,28,.14); filter:blur(11px)}

/* El pictograma y el número van DENTRO de la porción, así que se pintan en
   tinta oscura: 5,50:1 sobre el rosa, 9,70 sobre el celeste y 7,29 sobre el
   salmón. En blanco, sobre el celeste no se leerían. */
/* Escalados a 1,7: a tamaño natural eran manchitas y no se reconocían. */
.pl-ico{fill:rgba(31,43,54,.62)}
/* Sobre el marino de la proteína la tinta oscura desaparece: va en claro. */
#bl-prot .pl-ico{fill:rgba(255,255,255,.78)}
.pl-ico > g{transform:scale(1.7)}
/* 20 y no 15: el porcentaje es el dato, y a 15 con el pictograma al lado se
   perdía. Va en versalitas monoespaciadas porque es cifra, no rótulo.

   🔴 Blanco con filo oscuro, y el filo va POR DEBAJO del relleno
      (`paint-order:stroke`). Sin eso el trazo se pinta encima y se come el
      interior de las letras: un «8» se cierra y un «%» queda hecho una mancha.
      El grosor es 1,5 — lo justo para despegar el blanco del fondo sin que se
      vea el contorno como tal.

   ⚠️ Y una advertencia para el que venga: **este texto ya no se puede validar
      con la comprobación de contraste automática.** Un blanco sobre el celeste
      da 1,6:1 y sobre el rosa 2,6:1 — los dos fallarían— pero quien sostiene
      la legibilidad aquí es el filo, y eso no lo sabe medir una fórmula que
      compara relleno contra fondo. Si alguna vez se le quita el filo, hay que
      devolver el relleno a #1F2B36. */
.pl-num{
  fill:#FFFFFF; font-family:var(--mono); font-size:20px; font-weight:500;
  text-anchor:middle; dominant-baseline:middle; letter-spacing:-.03em;
  stroke:#26333F; stroke-width:1.5; stroke-linejoin:round;
  paint-order:stroke;
}

/* La guía y el rótulo van FUERA, sobre el blanco. */
.pl-guia{fill:none; stroke:rgba(52,73,94,.45); stroke-width:1.3}
.pl-punto{fill:var(--accent)}
.pl-rot{
  fill:var(--ink); font-family:var(--body); font-size:16px; font-weight:600;
}

/* Lo que se mueve al cambiar de día es la porción, su guía y dónde caen el
   pictograma y el número. El rótulo NO se mueve: si siguiera al centro de su
   porción se pasearía por el lienzo y el conjunto daría tumbos. */
.pl-seg,.pl-guia{transition:d .45s cubic-bezier(.65,0,.35,1)}
/* El bloque «% + pictograma» se mueve entero, con una sola propiedad. El
   rótulo y su punto van aparte porque viven fuera del plato. */
.pl-bloque{transition:transform .45s cubic-bezier(.65,0,.35,1)}
/* 🔴 El nombre se mueve por el `transform` de su grupo, NO por `x`/`y`.
   En SVG los atributos `x` e `y` de un `<text>` no son propiedades CSS
   geométricas, así que declararles una transición no hace nada: el rótulo
   saltaba a su destino mientras todo lo demás viajaba. El punto sí usa
   `cx`/`cy`, que en un `<circle>` sí lo son. */
.pl-rotg{transition:transform .45s cubic-bezier(.65,0,.35,1)}
.pl-punto{
  transition:cx .45s cubic-bezier(.65,0,.35,1),
             cy .45s cubic-bezier(.65,0,.35,1);
}

/* Los dos resúmenes de plan del alta, apilados: solo se ve el elegido.
   Mismo truco que los pies del plato — así la pantalla no cambia de alto. */
.plan.is-oculto{display:none}
.plan-nota{margin:6px 0 0; font-size:12px; color:var(--mut)}

.mo-sw{
  display:flex; gap:4px; background:rgba(255,255,255,.10); padding:4px;
  border-radius:999px;
}
.mo-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:9px 4px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--sobre-azul);
  transition:background .22s ease, color .22s ease;
}
.mo-dot{
  width:8px; height:8px; border-radius:50%; background:currentColor;
  flex:0 0 auto;
}
.mo-btn.is-on{background:#FFFFFF; color:var(--ink)}
/* El punto ES el semáforo: aquí el marcador significa algo. Los tres son los
   de la app, ya corregidos por contraste (5,22 · 5,13 · 6,35 sobre blanco). */
.mo-btn[data-modo="descanso"].is-on{background:var(--sem-verde); color:var(--sem-tinta)}
.mo-btn[data-modo="fuerza"].is-on{background:var(--sem-ambar); color:var(--sem-tinta)}
.mo-btn[data-modo="cardio"].is-on{background:var(--sem-rojo); color:var(--sem-tinta)}
.sem-verde{background:var(--sem-verde); border-left:4px solid var(--sem-verde-f);
  color:var(--sem-tinta)}
.sem-ambar{background:var(--sem-ambar); border-left:4px solid var(--sem-ambar-f);
  color:var(--sem-tinta)}
.sem-rojo{background:var(--sem-rojo); border-left:4px solid var(--sem-rojo-f);
  color:var(--sem-tinta)}
.sem-verde .sem-lbl{color:var(--sem-tinta)}
.sem-ambar .sem-lbl{color:var(--sem-tinta)}
.sem-rojo .sem-lbl{color:var(--sem-tinta)}

/* ── el conmutador de plan del alta ──
   Reusa `.mo-sw`/`.mo-btn` del plato para que sea el mismo gesto en toda la
   web. Lo único que cambia es el fondo: allí vive sobre el azul del hero y
   aquí sobre blanco.

   🔴 Va DESPUÉS de las reglas de `.mo-sw`, no antes. Puesto delante —que es
      donde cayó a la primera— `.mo-sw{background:rgba(255,255,255,.10)}`
      ganaba por orden: sobre blanco eso es blanco, así que las dos pestañas
      salían como dos textos sueltos sin caja. Misma especificidad, gana la
      última. */
.plan-sw{background:var(--surface); margin-bottom:14px}
.plan-sw .mo-btn{color:var(--mut); font-weight:700}
.plan-sw .mo-btn.is-on{background:#FFFFFF; color:var(--accent-ink);
  box-shadow:0 1px 3px rgba(31,43,54,.14)}
/* 🔴 Los tres pies ocupan LA MISMA celda de la rejilla y solo se ve el
   activo. El contenedor mide siempre lo que el más largo, así que cambiar de
   día **no cambia el alto de la sección**.

   Antes había un solo párrafo que se reescribía: el texto de descanso mide el
   doble que el de cardio, así que al pulsar la sección crecía o encogía y
   empujaba el hero — el titular «Misma receta» daba un salto. Lo vio Antonio.
   Reservar una altura fija habría sido adivinar; apilarlos lo resuelve exacto. */
.pl-pies{display:grid}
.pl-txt{
  grid-area:1 / 1; margin:0; font-size:14.5px; line-height:1.6;
  color:var(--sobre-azul); border-left:2px solid var(--rosa-sobre-azul);
  padding-left:14px;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.pl-txt.is-on{opacity:1; visibility:visible}
.pl-txt b{color:#FFFFFF; font-weight:700}

/* ── la tira de credenciales ──
   Las tres de su banner, que antes venían dibujadas dentro de la imagen y
   ahora son texto. 🔴 Fondo celeste, NO rosa. */
/* Va justo debajo del header y encima del hero: es lo primero que se lee
   después de la marca, y ahí funciona como credencial. Debajo del hero
   quedaba como una nota a pie del plato. Lo pidió Antonio. */
/* ── las secciones y su ritmo ── */
.v-sec{padding:52px 20px; background:var(--ground)}
.v-clara{background:var(--surface)}
/* La segunda frase del titular del método, algo más ligera. El contraste de
   peso es lo que hace que «No es un plan de comidas» golpee: si las dos van
   igual de fuertes, el salto de línea solo parte el texto sin jerarquizarlo. */
/* 🔄 14 sep 2026: el método (único que la usa) pasó a fondo blanco. */
.lp-h2-b{font-weight:400; color:var(--mut)}

.v-sec .lp-h2{
  font-family:var(--hero); font-size:24px; font-weight:600; line-height:1.12;
  letter-spacing:-.015em; margin:0; text-wrap:balance;
}
.lp-p{
  margin:0; color:var(--mut); font-size:15px; line-height:1.65; max-width:58ch;
}
.lp-p b{color:var(--ink); font-weight:700}

/* La sección oscura: mismo esqueleto, tinta invertida. */
.v-oscura{background:var(--hdr); color:#FFFFFF}
.v-oscura .lp-h2{color:#FFFFFF}
.v-oscura .lp-p{color:var(--sobre-azul)}
.v-oscura .lp-p b{color:#FFFFFF}

/* ── el ritmo de fondos (14 sep 2026, Antonio) ──
   blanco (hero) · MARINO (es para ti) · blanco (método) · MARINO (cada mes
   recibes) · CELESTE (precios) · blanco (Mónica) · MARINO (preguntas) ·
   blanco (cierre). `.v-marino` es el ancla oscura: pinta el fondo y pasa a
   claro todo lo que dentro va en tinta. Los tokens son los «sobre azul» que
   ya vigila el medidor de contraste. */
.v-marino{background:var(--hdr); color:#FFFFFF}
.v-marino .lp-h2{color:#FFFFFF}
.v-marino .lp-p{color:var(--sobre-azul)}
.v-marino .filtro li{color:#FFFFFF; border-color:rgba(255,255,255,.16)}
/* 🔴 Sin relleno: el rosa translúcido aclaraba el fondo del ✓ y lo dejaba
   en 3,77:1 (lo cazó el verificador). Con solo el filo, el ✓ va sobre el
   marino puro: 5,01:1. */
.v-marino .tic{
  background:transparent; color:var(--rosa-sobre-azul);
  box-shadow:inset 0 0 0 1.5px rgba(242,166,225,.55);
}
.v-marino .incl li{border-color:rgba(255,255,255,.16)}
.v-marino .incl b{color:#FFFFFF}
.v-marino .incl-txt > span{color:var(--sobre-azul)}
.v-marino .incl-ico{background:rgba(242,166,225,.16); color:var(--rosa-sobre-azul)}
.v-marino .duda{border-color:rgba(255,255,255,.16)}
.v-marino .duda summary{color:#FFFFFF}
.v-marino .duda summary::after{color:var(--rosa-sobre-azul)}
.v-marino .duda p{color:var(--sobre-azul)}

/* ── para quién es ── */
.filtro{display:flex; flex-direction:column; gap:0}
.filtro li{
  display:flex; gap:13px; align-items:flex-start; font-size:15px;
  line-height:1.55; color:var(--ink); padding:15px 0;
  border-bottom:1px solid var(--line);
}
.filtro li:first-child{border-top:1px solid var(--line)}
.tic{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--accent-soft); color:var(--rosa-sobre-rosa); font-size:12px;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}

/* ── el método ──
   🔴 Los fondos NO son los de su HTML. Con texto blanco encima, los suyos dan
      3,50 · 2,94 · **4,41**:1 — el rojo falla por nueve centésimas, que es
      exactamente lo que no se ve mirando. Se usan los del semáforo de la app,
      ya corregidos: 5,22 · 5,13 · 6,35. Y así la venta y la app pintan el
      semáforo del mismo color, que es lo coherente. */
/* La entradilla del método va centrada sobre las tres tarjetas. Alineada a
   la izquierda dejaba un hueco grande arriba a la derecha y la sección
   parecía descuadrada — lo señaló Antonio. */
.v-intro{display:flex; flex-direction:column; gap:16px}
.metodos{display:flex; flex-direction:column; gap:12px}
.met{border-radius:var(--r); padding:20px; color:var(--sem-tinta)}
/* 🔄 14 sep 2026 (Antonio): el semáforo de la VENTA lleva sus colores,
   #65E37D · #FFFE87 · #F35252. Son claros, así que la letra va en tinta casi
   negra (#11181F): 10,9 · 17,4 · 5,2:1. Con el marino de siempre (#1F2B36)
   el rojo se quedaba en 4,2:1 y no llega.
   ⚠️ Solo la venta. La app sigue con `--verde/--ambar/--rojo`, que allí
   hacen de TEXTO sobre blanco y con estos tonos no se leerían. */
.met-verde{background:var(--sem-verde)}
.met-ambar{background:var(--sem-ambar)}
.met-rojo{background:var(--sem-rojo)}
.met-tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; padding:6px 12px; border-radius:999px; margin-bottom:14px;
  /* Oscurece en vez de aclarar: blanco al 26 % sobre estas tarjetas deja el
     texto en 3,16 · 3,13 · 3,76:1. Negro al 22 % lo sube a 7,52 · 7,42 ·
     8,87. Se ve igual de pastilla y se lee. */
  background:rgba(0,0,0,.22);
}
.met-dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.met h3{
  font-family:var(--hero); font-size:19px; font-weight:600; margin:0 0 8px;
  color:var(--sem-tinta); line-height:1.2;
}
.met p{margin:0; font-size:14.5px; line-height:1.6; color:var(--sem-tinta)}
.met-nota{margin-top:6px}

/* ── el plato + las tarjetas como selector (14 sep 2026) ──
   MÓVIL: plato arriba, las tres etiquetas en una fila de pastillas y debajo
   solo la tarjeta activa. Los tres paneles comparten celda (`grid-area`),
   así que la sección mide lo que el más largo y no salta al pulsar. */
.met-juego{display:flex; flex-direction:column; gap:14px; margin:6px 0 0}
.met-juego .plato{gap:0}
.met-juego .pl-dial{max-width:380px}
.metodos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.metodos .mo-btn{
  grid-row:1; min-height:44px; padding:6px 4px; border-radius:999px;
  background:var(--surface); color:var(--ink);
}
.metodos .met-tag{
  margin:0; padding:0; background:none; font-size:11px; letter-spacing:.08em;
}
/* El punto lleva el color del semáforo en claro, para leerse sobre el azul
   cuando el botón está apagado. Es marcador, no texto. */
/* El punto lleva su color con un filo oscuro: el amarillo sobre el celeste
   claro de la pastilla, sin filo, no se ve. Es marcador, no texto. */
.metodos .met-dot{box-shadow:0 0 0 1px rgba(17,24,31,.35)}
.metodos .met-verde .met-dot{background:var(--sem-verde-f)}
.metodos .met-ambar .met-dot{background:var(--sem-ambar-f)}
.metodos .met-rojo .met-dot{background:var(--sem-rojo-f)}
.metodos .mo-btn.is-on .met-dot{background:var(--sem-tinta); box-shadow:none}
.metodos .mo-btn.met-verde.is-on{background:var(--sem-verde); color:var(--sem-tinta)}
.metodos .mo-btn.met-ambar.is-on{background:var(--sem-ambar); color:var(--sem-tinta)}
.metodos .mo-btn.met-rojo.is-on{background:var(--sem-rojo); color:var(--sem-tinta)}
/* El resumen de qué lleva el plato ese día, entre el título y el porqué. */
.met .met-resumen{
  margin:0; font-size:15px; font-weight:500; color:var(--sem-tinta);
}
/* 🔴 Con el color explícito: `.pl-txt b{color:#FFFFFF}` (del plato sobre
   azul) ganaba y dejaba «Día intenso:» blanco sobre rojo a 3,42:1. Lo cazó
   el verificador de contraste. */
.met .met-resumen b{font-weight:700; color:var(--sem-tinta)}
.metodos .pl-txt{
  grid-area:2 / 1 / 3 / -1; border-left:0; margin-top:4px;
  padding:18px 20px; color:#FFFFFF;
}

/* ── qué incluye ──
   Sin iconos. Seis emojis en fila eran seis manchas de color que competían
   con el semáforo, que es lo único que debería llevar color aquí. */
.incl{display:flex; flex-direction:column; gap:0}
.incl li{
  display:flex; gap:14px; align-items:flex-start; padding:16px 0;
  border-bottom:1px solid var(--line);
}
.incl-txt{display:flex; flex-direction:column; gap:5px; min-width:0}
.incl-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-ink);
}
.incl-svg{width:22px; height:22px; fill:currentColor}
.incl li:first-child{border-top:1px solid var(--line)}
.incl b{
  font-family:var(--hero); font-size:17px; font-weight:600; color:var(--ink);
}
.incl-txt > span{font-size:14px; line-height:1.6; color:var(--mut)}

/* ── precios: el azul más oscuro de la página ── */
/* 🔄 14 sep 2026: de azul hondo a CELESTE. Las tarjetas siguen blancas y
   la trimestral conserva su filo rosa. */
.v-precios{background:var(--surface); color:var(--ink); padding:52px 20px}
.v-precios .lp-h2{
  font-family:var(--hero); font-size:24px; font-weight:600; color:var(--ink);
  margin:0; line-height:1.12; letter-spacing:-.015em; text-wrap:balance;
}
.v-precios .v-nota{color:var(--mut)}
.vplanes{display:flex; flex-direction:column; gap:16px}
.vplan{
  background:var(--ground); color:var(--ink); border-radius:var(--r-lg);
  padding:24px 20px; display:flex; flex-direction:column; gap:4px;
  position:relative; border:2px solid transparent;
}
.vplan.is-destacado{border-color:var(--accent)}
.vplan-flag{
  position:absolute; top:-11px; left:20px; background:var(--accent);
  color:var(--btn-ink); font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  padding:4px 11px; border-radius:999px;
}
.vplan-nom{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut);
}
/* En columna, no en línea: «45 € cada 3 meses» pegado al número se parte por
   la mitad y se lee «45 € cada 3 meses ·» / «15 € al mes». */
.vplan-precio{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.vplan-num{
  font-family:var(--hero); font-size:42px; font-weight:600; line-height:1;
  letter-spacing:-.02em;
}
.vplan-u{font-size:13.5px; font-weight:600; color:var(--mut)}
.vplan-equiv{
  margin:6px 0 0; font-family:var(--mono); font-size:11.5px;
  color:var(--accent-ink); letter-spacing:.04em;
}
.vplan-lista{display:flex; flex-direction:column; gap:9px; margin:18px 0 20px}
.vplan-lista li{
  display:flex; gap:10px; font-size:14px; color:var(--ink); line-height:1.45;
}
.vplan-lista li::before{
  content:"\2713"; color:var(--accent-ink); font-weight:800; flex:0 0 auto;
}

/* ── quién es Mónica ── */
.v-bio{display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center}
.v-bio-foto{
  width:132px; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  flex:0 0 auto; background:var(--ground);
  box-shadow:0 0 0 4px var(--ground), 0 0 0 6px var(--accent);
}
.v-bio-foto img{width:100%; height:100%; object-fit:cover; display:block}
.v-bio-txt{display:flex; flex-direction:column; gap:8px}
.v-bio .lp-h2{margin:0}
.v-rol{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
}
.v-bio .lp-p{margin-top:6px}
.v-bio .lp-p em{font-style:italic; color:var(--ink)}

/* ── dudas ── */
/* 🔴 Aire entre el titular y las tres listas que abren con un filo.
   `.v-col` ya separa sus hijos con 18 px, pero `.filtro`, `.incl` y `.dudas`
   empiezan con un `border-top`: a 18 px esa línea queda pegada al titular y se
   lee como si lo subrayara, no como el principio de la lista. Con las seis
   preguntas cerradas —decidido el 25 ago 2026— se notó en el FAQ, pero el
   problema era el mismo en las otras dos, así que se corrige en las tres para
   que las secciones no respiren distinto. */
.filtro,.incl,.dudas{margin-top:10px}

/* ── opiniones (14 sep 2026) ──
   🔄 Rehecho el mismo día (Antonio): la fila nativa con scroll cortaba la
   última tarjeta visible «de forma poco orgánica». Ahora es un CARRUSEL:
     · `.resenas-ventana` recorta (overflow:hidden) y `.resenas` es la pista
       que se mueve con `transform`, así que NUNCA hay media tarjeta.
     · `--res-vista` dice cuántas caben enteras: 1 en móvil, 3 en escritorio.
       El ancho de cada tarjeta sale de ahí, no de un porcentaje a ojo.
     · Infinito: el JS clona las 5 delante y detrás, y al terminar la
       animación salta sin transición a la copia equivalente. */
.v-celeste{background:var(--surface)}
.resenas-marco{
  --res-vista:1; --res-hueco:16px;
  position:relative; margin-top:10px; padding:0 34px;
}
.resenas-ventana{overflow:hidden; touch-action:pan-y}
.resenas{
  display:flex; gap:var(--res-hueco); margin:0; padding:4px 0 10px;
  list-style:none; will-change:transform;
}
.resenas.is-animando{transition:transform .5s cubic-bezier(.65,0,.35,1)}
.resena{
  flex:0 0 calc((100% - (var(--res-vista) - 1) * var(--res-hueco))
                / var(--res-vista));
  min-width:0; background:var(--ground);
  border-radius:var(--r-lg); padding:22px 20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 3px rgba(31,43,54,.08);
}
.resena-estrellas{color:var(--accent-ink); font-size:17px; letter-spacing:2px}
/* 🔴 Cortada a 7 líneas, como hace la propia ficha de Google. Sin esto la
   fila entera se estiraba al alto de la reseña más larga (la de Silvia,
   ~620 px en móvil) y las cortas quedaban medio vacías. El texto completo
   está a un clic en «Ver todas las reseñas en Google». */
.resena-txt{
  margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7;
  overflow:hidden;
}
.resena-quien{margin:0; font-size:13px; color:var(--mut)}
.resena-quien b{color:var(--ink)}
.resenas-todas{align-self:flex-start; margin-top:4px}
.resenas-flecha{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--ground); color:var(--ink); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(31,43,54,.16);
  transition:transform .2s ease;
}
.resenas-flecha:hover{transform:translateY(-50%) scale(1.06)}
.resenas-flecha:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.resenas-flecha-ico{width:20px; height:20px; fill:currentColor}
.resenas-ant{left:-8px}
.resenas-sig{right:-8px}

.dudas{display:flex; flex-direction:column; gap:0}
.duda{border-bottom:1px solid var(--line)}
.duda:first-child{border-top:1px solid var(--line)}
.duda summary{
  padding:16px 0; font-weight:700; font-size:15px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between;
  align-items:flex-start; gap:16px; color:var(--ink);
}
.duda summary::-webkit-details-marker{display:none}
.duda summary::after{
  content:"+"; color:var(--accent-ink); font-size:20px; line-height:1;
  flex:0 0 auto;
}
.duda[open] summary::after{content:"−"}
.duda p{margin:0 0 18px; font-size:14px; color:var(--mut); line-height:1.65}

/* ── el cierre ── */
/* 🔄 14 sep 2026: de azul a BLANCO, y con él el pie y la barra fija. */
.v-cierre{background:var(--ground); color:var(--ink); padding:44px 20px 38px}
.v-cierre-txt{display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center}
.v-cierre .v-col{align-items:center; gap:16px}
.v-cierre .lp-h2{
  font-family:var(--hero); font-size:24px; font-weight:600; color:var(--ink);
  margin:0; line-height:1.12; letter-spacing:-.015em;
}
.v-cierre .lp-sub{margin:0; font-size:15px; color:var(--mut)}
.v-cierre-btns{
  display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px;
  margin-top:6px;
}
/* Los CTA del cierre son <a>, y sin esto salían subrayados como enlaces
   sueltos dentro de la pastilla. */
.scr-venta .btn{text-decoration:none}
.btn-hueco{
  background:transparent; border:1.5px solid var(--line); color:var(--ink);
  box-shadow:none;
}
.v-cierre .btn-hueco{border-color:var(--line); color:var(--ink)}

/* 🔄 El pie vive DENTRO del cierre desde el 25 ago 2026, así que no tiene
   fondo propio: hereda el azul de la sección. Ya no es un bloque, es el
   último párrafo de uno.

   Historia, para no deshacerlo sin querer:
     · Antes del 24 ago era azul hondo, entre un cierre azul y una barra azul
       hondo. Tres oscuros **de tonos parecidos pero distintos** que al bajar
       se fundían en una mancha sucia.
     · El 24 se aclaró a celeste. Arregló la mancha, pero dejó una sección
       entera para tres líneas de letra pequeña.
     · El 25 se fusiona con el cierre, y la barra pasa al MISMO azul. Un solo
       color continuo no es lo mismo que tres casi iguales.

   🔴 Al pasar de celeste a azul, todos sus textos cambian de tinta: sobre el
      celeste valían `--ink`, `--mut` y `--accent-ink`, y sobre el azul dan
      2:1 o menos. Se usan los tokens de «sobre azul» que ya existen y que el
      medidor de contraste vigila. */
/* 🔴 En móvil el pie va en FILA y con salto: la marca y el handle comparten
   línea y los legales caen debajo. Apilados en tres líneas sueltas, esta
   sección medía 447 px en un teléfono para lo que es un pie de página.
   `flex:1 0 100%` en los legales es lo que fuerza el salto sin necesidad de
   otro contenedor. */
.v-pie{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 9px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--mut);
}
.v-pie-l{flex:1 0 100%}
.v-pie-m{font-family:var(--hero); font-size:16px; color:var(--ink)}
.v-pie-h{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
  text-decoration:none; width:fit-content;
}
.v-pie-l{font-size:12px; margin-top:8px; color:var(--mut)}

/* ── la barra de abajo ──
   🔴 `sticky`, no `fixed`. Un `fixed` se ancla a la ventana y en la maqueta se
      montaría encima de la devbar de revisión; `sticky` se queda pegado al
      fondo mientras la venta está a la vista, hace lo mismo en el sitio real y
      no depende de qué ancestro sea bloque contenedor. */
/* 🔑 El MISMO azul que el cierre, no el hondo. Es lo que hace que al llegar
   abajo la barra deje de leerse como algo pegado encima y pase a ser el borde
   inferior de la página. Mientras se hace scroll por las secciones claras
   sigue recortándose igual de bien: solo se funde al final, que es cuando se
   quiere. La sombra se suaviza por el mismo motivo — con el fondo idéntico
   detrás, una sombra marcada delataba la costura. */
.v-barra{
  position:sticky; bottom:0; z-index:20; padding:10px 16px;
  /* 🔄 14 sep 2026 (Antonio): CELESTE, el mismo que el header. Deja de ir
     al color del cierre (regla del 25 ago): ahora la pareja es header ↔
     barra, y lo vigila verificar-tema.py. */
  background:var(--surface);
  box-shadow:0 -10px 26px -12px rgba(20,30,40,.30);
  border-top:1px solid var(--line);
}
.v-barra .v-col{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px;
}
.v-barra-precio{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; color:var(--ink);
}
.v-barra-desde{
  width:100%; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
}
.v-barra-precio strong{font-family:var(--hero); font-size:20px}
.v-barra-u{font-size:12px; color:var(--mut)}
.v-barra .btn{padding:11px 20px; font-size:14px; white-space:nowrap}@media(min-width:760px){ .semaforo{grid-template-columns:repeat(3,1fr)} }@media(min-width:760px){
  .scr-venta .v-nav{padding:14px 40px}
  .scr-venta .v-nav-links{display:flex; gap:26px}
  .scr-venta .v-nav-acc{gap:10px}
  .scr-venta .v-nav-btn,.scr-venta .v-nav-cta{font-size:13px; padding:9px 16px}
  .scr-venta .v-nav-menu,.scr-venta .v-nav-panel{display:none}
  .scr-venta .v-marca-n{font-size:18px}

  .scr-venta .v-hero{padding:24px 40px 48px}
  .scr-venta .v-hero .v-col{
    display:flex; flex-direction:row; align-items:flex-start; gap:56px;
  }
  /* Deshace los `vw` de móvil: en escritorio mandan px. */
  .scr-venta .v-hero .v-eyebrow{font-size:14px; max-width:none}
  .scr-venta .v-hero .v-hero-txt{flex:1 1 0; max-width:540px; width:auto; gap:0; padding-top:16px}
  .scr-venta .v-hero .v-hero-txt .lp-h1{font-size:54px; margin-top:14px}
  .scr-venta .v-hero .v-hero-txt .lp-sub{font-size:19px; margin-top:20px; max-width:none}
  .scr-venta .v-hero-p2{font-size:16px; margin-top:14px; max-width:none}
  .scr-venta .v-hero .v-cta{
    flex-direction:row; align-items:center; gap:22px; width:auto; margin-top:26px;
  }
  .scr-venta .v-hero .v-cta .btn{width:auto; height:54px; padding:0 40px; font-size:17px}
  .scr-venta .v-hero .v-cta-alt{align-self:auto; font-size:15px; padding-bottom:2px}
  .scr-venta .v-hero-desde{width:auto; text-align:left; font-size:14px; margin-top:16px}
  .scr-venta .v-hero-punto, .scr-venta .v-hero-cancela{display:inline}
  .scr-venta .v-hero-foto{
    position:relative; z-index:auto; left:auto; top:auto; bottom:auto; width:auto;
    flex:0 1 360px; max-width:360px; margin:-70px -40px -48px 0;
  }
  .scr-venta .pl-dial{max-width:420px}
  .scr-venta .pl-txt{font-size:15px}
  /* La entradilla del método, centrada y con medida corta. */
  .scr-venta .v-intro{align-items:center; text-align:center}
  .scr-venta .v-intro .lp-h2{max-width:24ch}
  .scr-venta .v-intro .lp-p{max-width:70ch}


  /* Todo nace del mismo filo izquierdo: el de `.v-col`. El titular corta
     antes que el texto, pero desde el mismo sitio. */
  .scr-venta .v-sec,
  .scr-venta .v-precios,
  .scr-venta .v-cierre{padding:84px 40px}
  /* 🔄 13 sep 2026: la sección que sigue al hero no lleva sus 84 px de
     arriba — el hero ya cierra con su propio aire y sumados abrían un
     hueco que solo se veía en escritorio (en móvil son 52 px). */
  .scr-venta .v-hero + .v-sec{padding-top:24px}
  /* Escritorio: TRES tarjetas enteras. Las flechas salen al margen,
     fuera de la columna, para no pisar ninguna tarjeta. */
  .scr-venta .resenas-marco{--res-vista:3; --res-hueco:20px; padding:0}
  .scr-venta .resenas-ant{left:-58px}
  .scr-venta .resenas-sig{right:-58px}
  .scr-venta .v-hero-lineas{left:84%; top:19%; width:13%}
  .scr-venta .v-sec .lp-h2,
  .scr-venta .v-precios .lp-h2,
  .scr-venta .v-cierre .lp-h2{font-size:32px; max-width:22ch}
  .scr-venta .lp-p{font-size:16px}

  /* `.filtro` es un contenedor flex, así que `columns` no le hace nada — era
     una regla muerta. Y a una columna se lee mejor: son cuatro frases largas,
     no cuatro etiquetas. */
  /* ESCRITORIO: plato a la izquierda; a la derecha las tres intensidades
     apiladas y, debajo, la tarjeta de la activa.
     🔴 14 sep 2026: primero cada tarjeta se abría bajo su botón, pero al
     sumar el resumen la de «Suave» pasó a ser más alta que el plato y la
     sección SALTABA 47 px al cambiar de día. Ahora las tres tarjetas
     comparten celda, como en móvil: mide lo que la más larga y no se mueve. */
  .scr-venta .met-juego{
    display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:40px; align-items:center; margin-top:20px;
  }
  .scr-venta .met-juego .pl-dial{max-width:none}
  .scr-venta .metodos{grid-template-columns:1fr; gap:8px}
  .scr-venta .metodos .mo-btn{
    grid-row:auto; justify-content:flex-start; min-height:48px;
    padding:0 20px; border-radius:var(--r);
  }
  .scr-venta .metodos .mo-btn[data-modo="descanso"]{grid-row:1}
  .scr-venta .metodos .mo-btn[data-modo="fuerza"]{grid-row:2}
  .scr-venta .metodos .mo-btn[data-modo="cardio"]{grid-row:3}
  .scr-venta .metodos .met-tag{font-size:12px}
  .scr-venta .metodos .pl-txt{grid-area:4 / 1; margin-top:4px}

  /* 🔴 En precios, la entradilla centrada — igual que en el método, y por el
     mismo motivo. Las dos tarjetas van centradas dentro de la columna (551 px
     dentro de 1000), así que con el rótulo y el titular pegados a la
     izquierda la sección salía visiblemente descuadrada: un hueco grande a la
     izquierda de las tarjetas y nada que lo equilibrase. Lo mismo se corrigió
     en el método el 24 ago; aquí se pasó por alto. Encontrado el 25 ago 2026
     comparando la maqueta y el tema, que en esto coincidían píxel a píxel: no
     era un fallo del porte, era del diseño. */
  .scr-venta .v-precios .v-col{align-items:center; text-align:center}
  .scr-venta .v-precios .lp-h2{margin-left:auto; margin-right:auto}
  .scr-venta .incl{display:grid; grid-template-columns:1fr 1fr;
    column-gap:40px}
  .scr-venta .incl li:nth-child(2){border-top:1px solid var(--line)}

  /* Dos planes otra vez desde el 24 ago, así que vuelven a repartirse en
     fila. `stretch` para que midan igual aunque uno lleve el distintivo. */
  .scr-venta .vplanes{
    flex-direction:row; align-items:stretch; gap:20px; justify-content:center;
  }
  .scr-venta .vplan{flex:1 1 0; max-width:380px}
  .scr-venta .vplan-lista{flex:1 1 auto}

  .scr-venta .v-bio{flex-direction:row; align-items:center; gap:40px; text-align:left}
  .scr-venta .v-bio-foto{width:190px}
  .scr-venta .v-bio-txt{flex:1 1 0}

  .scr-venta .v-cierre-btns{flex-direction:row; max-width:none; width:auto}

  /* 🔑 El pie, al LADO del contacto y no debajo. Apilados, esta sección medía
     507 px de alto para cuatro líneas y dos botones — más que la de precios,
     que es donde se pide el dinero. En dos columnas baja a la mitad larga y
     la página termina sin ese vacío.
     🔴 Solo a partir de 760: en móvil no caben dos columnas y el pie vuelve
        debajo, que es lo natural en un teléfono. */
  .scr-venta .v-cierre{padding:56px 40px 44px}
  .scr-venta .v-cierre .v-col{
    flex-direction:row; align-items:flex-start; justify-content:space-between;
    gap:56px;
  }
  .scr-venta .v-cierre-txt{flex:1 1 0; max-width:560px; align-items:flex-start; text-align:left}
  .scr-venta .v-pie-l{flex:0 0 auto}
  /* Sin el filo de arriba: al lado ya no separa nada, y con la columna
     izquierda al lado se leería como una raya suelta. */
  .scr-venta .v-pie{
    flex:0 0 auto; margin-top:0; padding-top:0; border-top:0;
    flex-direction:column; flex-wrap:nowrap; gap:5px;
    align-items:flex-end; text-align:right;
  }
  .scr-venta .v-pie{margin-top:34px; padding-top:26px}
  .scr-venta .v-barra{padding:12px 40px}
  /* Los planes se reparten dentro de la columna, no del ancho entero. */
  .scr-venta .vplanes{max-width:820px; margin:0 auto}
}

/* Nadie debería perder el foco de vista al tabular. */
.scr-venta a:focus-visible,
.scr-venta button:focus-visible,
.scr-venta summary:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;
}@media(prefers-reduced-motion:reduce){
  /* Antes solo silenciaba `.pl-seg`, así que a quien pide menos movimiento le
     seguían viajando el porcentaje, el punto y el nombre. */
  .pl-seg,.pl-guia,.pl-bloque,.pl-rotg,.pl-punto{transition:none}
}

.scr-venta{--navy:#34495E;--tinta:#1F2B36;--rosa:#E878CF;--rosa-t:#AF4397;--rosa-claro:#F2A6E1;--celeste:#E6F4FA;--gris:#5F707D}

.scr-venta .lp-h2 em{font-style:italic;color:var(--rosa-t)}
.scr-venta .v-marino .lp-h2 em{color:var(--rosa-claro)}
.h2-ancho{max-width:680px!important}

.v-hero .lp-h1{color:var(--navy)}
.v-cta .v-cta-demo{font-weight:600}

.v-trust{background:var(--celeste);color:var(--navy);padding:16px 20px}
.v-trust .v-col{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 36px;font-size:15px;text-align:center}
.v-trust b{color:var(--rosa-t)}

.pt-grid{display:grid;gap:18px;margin-top:28px}
.pt-card{border-radius:22px;padding:22px 22px 10px;background:#fff}
.pt-card.pt-no{background:var(--celeste)}
.pt-card h3{font-family:Fraunces,Georgia,serif;font-weight:600;color:var(--navy);font-size:22px;margin:0 0 4px}
.scr-venta #para-ti .pt-card .filtro li{color:var(--navy);border-color:rgba(52,73,94,.12)}
.scr-venta #para-ti .pt-card .tic{color:var(--rosa-t);background:#FCEBF7;box-shadow:none}
#para-ti .pt-card .filtro li:first-child{border-top:0}@media(min-width:760px){.scr-venta .pt-grid{grid-template-columns:1.25fr .75fr}}

.v-demo{background:var(--celeste);padding:84px 40px;color:var(--navy)}
.dm-g{display:grid;gap:44px;align-items:center}@media(min-width:760px){.scr-venta .dm-g{grid-template-columns:.9fr 1.1fr}}@media(max-width:640px){.scr-venta .v-demo{padding:64px 20px}}
.dm-centro{text-align:center}
.dm-phone{width:290px;max-width:100%;margin:0 auto;background:var(--tinta);border-radius:44px;padding:12px;box-shadow:0 30px 60px rgba(31,43,54,.25)}
.dm-screen{background:#fff;border-radius:34px;aspect-ratio:424 / 862;overflow:hidden;position:relative}
.dm-cap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(20px);transition:.45s}
.dm-cap.on{opacity:1;transform:none}
.dm-ctrl{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.dm-ctrl button{border:0;background:#fff;border-radius:99px;padding:8px 14px;font:600 13px "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;color:var(--navy)}
.dm-ctrl button.on{background:var(--rosa);color:var(--tinta)}
.dm-lead{font-size:18px;color:var(--gris);margin:12px 0 0}
.dm-list{list-style:none;padding:0;margin:22px 0 26px}
.dm-list li{padding:11px 0 11px 34px;position:relative;border-top:1px solid #CFE3EC;font-size:16px}
.dm-list li:before{content:"✓";position:absolute;left:0;top:11px;width:24px;height:24px;border-radius:50%;background:#FCEBF7;color:var(--rosa-t);display:grid;place-items:center;font-size:13px;font-weight:700}
.v-demo .lp-h2{max-width:none;font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:600;line-height:1.12;letter-spacing:-.015em;color:var(--navy);margin:0}@media(min-width:760px){.scr-venta .v-demo .lp-h2{font-size:32px}}
.v-demo .btn,.v-final .btn{display:inline-block;padding:14px 34px;font-size:16px}
.vp-renew div{text-align:left}

.vp-sub{text-align:center;color:var(--gris);font-size:17px;margin:10px auto 0}
.vp-renew{display:grid;gap:12px;max-width:820px;margin:26px auto 0}@media(min-width:760px){.scr-venta .vp-renew{grid-template-columns:repeat(3,1fr)}}
.vp-renew div{background:#fff;border-radius:16px;padding:16px 18px;font-size:15px;color:var(--gris)}
.vp-renew b{display:block;color:var(--navy);margin-bottom:2px}
#precios .vplan .btn,#precios .vplan .btn-hueco{background:#fff!important;color:var(--tinta)!important;border:2px solid var(--rosa)!important;box-shadow:none}
#precios .vplan .btn:hover{background:#FCEBF7!important}
#precios .vplan.is-destacado .btn{background:var(--rosa)!important;border-color:var(--rosa)!important;color:var(--tinta)!important}
#precios .vplan.is-destacado .btn:hover{filter:brightness(.96)}
.vp-pago{text-align:center;font-size:15px;color:var(--gris);margin:22px auto 0;line-height:1.6}

.v-bio-txt .lp-p + .lp-p{margin-top:14px}
.v-cita{font-family:Fraunces,Georgia,serif;font-size:23px;line-height:1.35;color:var(--navy);margin:22px 0;padding-left:18px;border-left:4px solid var(--rosa)}
.v-cita em{color:var(--rosa-t)}

.op-gbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--tinta);border:2px solid var(--rosa);border-radius:999px;padding:10px 20px;font-weight:600;font-size:15px;text-decoration:none;margin:16px 0 8px}
.op-gbtn span{color:#E6A817;letter-spacing:1px}

.v-final{background:#fff;text-align:center;padding:84px 40px 24px}
.v-final .lp-h2{line-height:1.12;max-width:720px;margin:0 auto;font-size:clamp(30px,5vw,44px);color:var(--navy)}
.v-final p{max-width:560px;margin:14px auto 0;font-size:18px;color:var(--gris)}
.v-final .btn{margin-top:26px}
.v-final .v-final-micro{font-size:14px;margin-top:14px}@media(max-width:640px){.scr-venta .v-final{padding:64px 20px 16px}}

.scr-venta #contacto .v-col{flex-direction:column!important;align-items:center!important;justify-content:center;gap:0}
.scr-venta #contacto .v-cierre-txt{align-items:center!important;text-align:center!important;max-width:none;width:100%;flex:none}
.scr-venta #contacto .v-pie{flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%;flex:none}
#contacto .v-cierre-txt{text-align:center}
#contacto .lp-h2{max-width:none;text-align:center;margin:0 auto}
#contacto .lp-sub{text-align:center;color:var(--gris)}
#contacto .v-cierre-btns{justify-content:center;flex-wrap:wrap}
#contacto .v-cierre-btns .btn{background:#fff!important;color:var(--tinta)!important;border:2px solid var(--tinta)!important;font-weight:700}
#contacto .v-pie{border-top:1px solid #E5E5E5;margin-top:56px;padding-top:40px;text-align:center;display:block}
.v-pie-top{display:block;margin-bottom:16px}
.v-pie-top .v-pie-m{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:18px;color:var(--tinta)}
.v-pie-top .v-pie-h{color:var(--gris);text-decoration:none}
#contacto .v-pie-l{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
#contacto .v-pie-l a{color:var(--gris);text-decoration:underline}

.devbar{
  position:fixed; z-index:90; left:50%; transform:translateX(-50%); bottom:0;
  display:flex; gap:4px; flex-wrap:nowrap; justify-content:flex-start;
  overflow-x:auto; scrollbar-width:thin;
  background:#1E2A35; padding:6px 8px; border-radius:12px 12px 0 0;
  box-shadow:0 -3px 16px rgba(0,0,0,.22); max-width:96vw;
}
.devbar button{
  font-size:11px; font-weight:600; color:#C7D6E2; padding:4px 9px;
  border-radius:7px; white-space:nowrap;
}
.devbar button.is-on{background:#E878CF; color:#fff}
.devbar-t{font-size:10px; color:#7C93A6; align-self:center; padding:0 6px 0 2px;
  letter-spacing:.06em; text-transform:uppercase}
.devbar.oculta{transform:translateX(-50%) translateY(calc(100% - 20px))}
.devbar-tira{position:absolute; top:-17px; right:8px; background:#1E2A35;
  color:#C7D6E2; font-size:10px; padding:2px 9px; border-radius:7px 7px 0 0}@media print{.devbar{display:none}}


/* ═══════════════ el panel de Mónica (simulado) ═══════════════

   A propósito NO lleva el azul y rosa de la app: el panel de verdad vive
   dentro del escritorio de WordPress y usa sus estilos. Imitarlos aquí es lo
   honesto — si se lo enseñáramos con la marca de la app, ella esperaría una
   cosa y se encontraría otra el día que entre de verdad.

   Los colores son los de WordPress: #1d2327 la barra, #2271b1 el azul de los
   botones, #f0f0f1 el fondo. */

.scr-panel{
  padding:0; min-height:100vh; background:#f0f0f1; display:block;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#1d2327;
}
.wpbar{
  background:#1d2327; color:#f0f0f1; font-size:13px;
  padding:0 14px; height:32px; display:flex; align-items:center; gap:10px;
}
.wpbar-ico{font-size:15px}
.wpbar-yo{margin-left:auto; color:#c3c4c7}

.wpcols{display:flex; align-items:stretch; min-height:calc(100vh - 32px)}
.wpmenu{
  background:#1d2327; width:160px; flex:0 0 160px; padding:8px 0;
  display:flex; flex-direction:column;
}
.wpmenu-it{
  color:#c3c4c7; font-size:13px; padding:9px 14px; display:block;
}
.wpmenu-it.is-on{background:#2271b1; color:#fff; font-weight:600}

/* 70 px abajo, no 40: la barra de revisión es `fixed` y con solo 40 tapaba el
   botón «Publicar este mes» cuando el panel llegaba al final de la página.
   Esa barra no se porta al tema, pero mientras la maqueta sea lo que Mónica
   mira, no puede esconderle el botón principal. */
.wpmain{flex:1; padding:18px 22px 70px; min-width:0}

.pn-aviso{
  background:#fcf9e8; border-left:4px solid #dba617; color:#674f10;
  padding:9px 14px; font-size:13px; margin:0 0 16px; border-radius:2px;
}
.pn-h1{font-size:23px; font-weight:400; margin:0 0 6px}
.pn-actual{font-size:14px; color:#50575e; margin:0 0 18px}

.pn-caja-blanca{
  background:#fff; border:1px solid #c3c4c7; border-radius:4px;
  padding:16px 20px 20px; margin:0 0 18px; max-width:720px;
}
.pn-h2{font-size:17px; font-weight:600; margin:0 0 8px}
.pn-h3{font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:#50575e; margin:14px 0 6px}
.pn-p{font-size:14px; color:#3c434a; margin:0 0 14px; line-height:1.5}

.pn-drop{
  display:block; width:100%; border:2px dashed #8c8f94; border-radius:8px;
  padding:30px 20px; text-align:center; background:#f6f7f7;
  transition:border-color .15s, background .15s;
}
.pn-drop:hover,.pn-drop:focus-visible{border-color:#2271b1; background:#f0f6fc}
.pn-drop.is-sobre{border-color:#2271b1; background:#e5f0f8}
.pn-drop-ico{display:block; font-size:30px; line-height:1; margin-bottom:6px}
.pn-drop-txt{font-size:15px; color:#50575e}
.pn-drop-txt small{color:#787c82}

/* ⚠️ Las listas del panel llevan `.scr-panel` delante a propósito.
   El CSS de la app trae `:root ul,:root ol{margin:0;padding:0;list-style:none}`,
   y el panel vive dentro de `:root`. Esa regla tiene especificidad (0,1,1) y
   gana a un `.pn-lista` pelado (0,1,0) aunque vaya después: el margen se
   quedaba en 0 y la lista aparecía pegada al borde de la zona de arrastrar,
   con el primer archivo cortado por la mitad. Con el contenedor delante,
   (0,2,0), gana la del panel. */
.scr-panel .pn-lista{list-style:none; margin:14px 0 0; padding:0;
  max-height:210px; overflow-y:auto; border:1px solid #dcdcde;
  border-radius:4px; background:#fff}
.pn-fila{display:flex; justify-content:space-between; gap:12px;
  padding:5px 10px; font-size:13px; border-bottom:1px solid #f0f0f1}
.pn-fila:last-child{border-bottom:0}
.pn-fila span:first-child{overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.pn-fila-est{flex:0 0 auto; color:#787c82}
.pn-fila.is-bien .pn-fila-est{color:#00844a}

.pn-prog{margin-top:12px}
.pn-prog-track{height:8px; background:#dcdcde; border-radius:4px;
  overflow:hidden}
.pn-prog-track > span{display:block; height:100%; width:0; background:#2271b1;
  transition:width .18s}
.pn-prog-txt{font-size:13px; color:#50575e; margin:6px 0 0}

.pn-mes{font-size:15px; margin:0 0 12px}
.pn-cifras{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 4px}
.pn-cifra{background:#f0f6fc; border:1px solid #c5d9ed; border-radius:4px;
  padding:8px 14px; min-width:120px}
.pn-cifra b{display:block; font-size:20px; line-height:1.2}
.pn-cifra span{font-size:12px; color:#50575e}

/* Igual que arriba: `:root ul` quita viñetas y sangría a todas las listas, así
   que aquí hace falta el contenedor delante para devolvérselas. Sin esto los
   nombres de receta salían como texto suelto, sin puntos y sin sangrar. */
.scr-panel .pn-ul{margin:0; padding-left:20px; font-size:13.5px;
  line-height:1.6; list-style:disc}
.scr-panel .pn-ul li{margin:2px 0; list-style:disc}
.scr-panel .pn-mas{color:#787c82; list-style:none; margin-left:-20px}
.pn-bloque-aviso{border-left:4px solid #dba617; padding-left:12px;
  margin:16px 0 0}

.pn-btn{
  background:#2271b1; color:#fff; border-radius:3px; font-size:15px;
  font-weight:500; padding:11px 22px; margin-top:18px;
}
.pn-btn:hover{background:#135e96}
.pn-btn:disabled{background:#8c8f94}
.pn-link{color:#2271b1; text-decoration:underline; font-size:13.5px; padding:0}

.pn-ok{background:#f0f7ed; border-left:4px solid #00a32a; color:#1d3a24;
  padding:11px 14px; font-size:14px; border-radius:2px; margin:0 0 12px}
.pn-pie{font-size:12px; color:#787c82; max-width:720px}@media (max-width:640px){
  .wpmenu{display:none}
  .wpmain{padding:14px}
}
.v-pie-l a{color:var(--mut); text-decoration:underline; text-underline-offset:2px}
.v-pie-l a:hover{color:var(--ink)}
.legal-enlaces a{white-space:nowrap}
.legal-sep{color:var(--mut)}
.legal .v-col{max-width:720px; gap:14px}
.legal .legal-tit{font-size:30px; line-height:1.1}
.legal-txt{color:var(--ink); font-size:15px; line-height:1.7}
.legal-txt h2{font-family:var(--hero); font-size:20px; font-weight:600;
  line-height:1.2; margin:32px 0 8px; color:var(--ink)}
.legal-txt h3{font-size:15px; font-weight:700; margin:20px 0 6px}
.legal-txt p{margin:0 0 12px; color:var(--mut)}
.legal-txt ul,.legal-txt ol{margin:0 0 14px; padding-left:22px; color:var(--mut)}
.legal-txt ul{list-style:disc}
.legal-txt ol{list-style:decimal}
.legal-txt li{margin:0 0 6px; display:list-item}
.legal-txt li::marker{color:var(--accent-ink)}
.legal-txt strong,.legal-txt b{color:var(--ink)}
.legal-txt a{color:var(--accent-ink); text-underline-offset:2px}
.legal-txt table{width:100%; border-collapse:collapse; margin:0 0 16px;
  font-size:13.5px; display:block; overflow-x:auto}
.legal-txt th,.legal-txt td{text-align:left; vertical-align:top;
  padding:8px 10px; border-bottom:1px solid var(--line); color:var(--mut)}
.legal-txt th{color:var(--ink); font-weight:700}
.legal-fecha{font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); margin:12px 0 0}
.scr-venta .legal-pie{margin-top:28px; padding-top:22px;
  border-top:1px solid var(--line); flex-direction:row; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; text-align:left; gap:8px 16px}
.legal-pie .v-pie-m{text-decoration:none}
.scr-venta .legal-pie .v-pie-l{flex:0 1 auto; margin-top:0}

.pmpro.pmpro a{color:var(--accent-ink); text-decoration:underline}
.pmpro .pmpro_actions_nav{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  margin-top:16px; font-family:var(--body); font-size:13px;
}
.pmpro .pmpro_actions_nav a{
  display:inline-block; background:#5D6D7E; color:#fff; text-decoration:none;
  border-radius:999px; padding:10px 20px; font-family:var(--disp);
  font-weight:600; font-size:13px;
}
.pmpro .pmpro_heading-with-avatar{
  overflow-wrap:anywhere; word-break:break-word;
}
.pmpro .pmpro_form_fields{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; align-items:end;
}
.pmpro .pmpro_cols-2:not(.pmpro_form_fields){display:contents}
.pmpro .pmpro_form_field-baddress1,
.pmpro .pmpro_form_field-baddress2,
.pmpro .pmpro_form_field-bphone,
.pmpro .pmpro_payment-account-number,
.pmpro .pmpro_form_field-password_current,
.pmpro .pmpro_form_field-username,
.pmpro .pmpro_form_field-checkbox{grid-column:1/-1}
.pmpro .pmpro_form_field{
  display:flex; flex-direction:column; gap:6px; min-width:0; width:100%;
}
.pmpro .pmpro_form_field-checkbox{flex-direction:row; align-items:flex-start; gap:8px}
.pmpro .pmpro_form_field-bemail{order:1}
.pmpro .pmpro_form_field-bconfirmemail{order:2}
.pmpro .pmpro_form_field-password:has(input[name="password"]){order:3}
.pmpro .pmpro_form_field-password:has(input[name="password2"]){order:4}
#member-profile-edit .pmpro_form_fields{
  display:flex; flex-direction:column; gap:18px;
}
#member-profile-edit .pmpro_cols-2{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; align-items:start;
}
.pmpro .pmpro_form_field-invalida .pmpro_form_input{border-color:var(--rojo)}
.pmpro .pmpro_form_aviso{
  color:var(--rojo); font-family:var(--body); font-size:12px; margin:2px 0 0;
}
.pmpro .pmpro_form_label{
  font-family:var(--body); font-size:13px; font-weight:600; color:var(--mut);
}
.pmpro .pmpro_form_input,.pmpro select.pmpro_form_input{
  height:46px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:15px; color:var(--ink); background:var(--ground);
  width:100%; min-width:0; box-sizing:border-box; transition:border-color .15s;
}
.pmpro .pmpro_form_input:focus,.pmpro select.pmpro_form_input:focus{
  border-color:var(--accent-ink); outline:none;
}
.pmpro select.pmpro_form_input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%236E8291" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.pmpro .pmpro_form_fields-inline{display:flex; align-items:center; gap:8px; width:100%}
.pmpro .pmpro_form_fields-inline select{
  flex:1; min-width:0; background-image:none; padding:0 4px; text-align:center;
}
.pmpro .pmpro_form_fields-inline #ExpirationMonth{flex:0.8}
.pmpro .pmpro_form_fields-inline #ExpirationYear{flex:1.2}
.pmpro_form_field-password-toggle button{display:none !important}
.pmpro table.pmpro_table{
  width:100%; border-collapse:collapse; font-family:var(--body); font-size:13px;
}
.pmpro table.pmpro_table thead{display:none}
.pmpro table.pmpro_table tr{display:block; border-bottom:1px solid var(--line); padding:10px 0}
.pmpro table.pmpro_table td,.pmpro table.pmpro_table th{
  display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 4px;
}
.pmpro table.pmpro_table td::before{content:attr(data-title); font-weight:600; color:var(--mut)}
.entrar-caja{max-width:320px; margin:0 auto}
#loginform,.entrar-caja form{display:flex; flex-direction:column; gap:14px; margin-top:12px}
.entrar-caja form p{display:flex; flex-direction:column; gap:0; margin:0}
#loginform label,.entrar-caja form label{
  font-family:var(--body); font-size:13px; font-weight:600; color:var(--mut);
}
#loginform input[type="text"],#loginform input[type="password"],
.entrar-caja form input[type="text"],.entrar-caja form input[type="password"]{
  height:46px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:15px; color:var(--ink); background:var(--ground);
  width:100%; box-sizing:border-box; transition:border-color .15s; margin-top:4px;
}
#loginform input[type="text"]:focus,#loginform input[type="password"]:focus,
.entrar-caja form input[type="text"]:focus,.entrar-caja form input[type="password"]:focus{
  border-color:var(--accent-ink); outline:none;
}
#loginform .login-remember{
  display:flex; align-items:center; gap:8px; font-family:var(--body);
  font-size:13px; color:var(--mut);
}
#loginform .login-remember input,
.pmpro .pmpro_form_field-checkbox input[type="checkbox"]{
  width:26px; height:26px; margin:0; flex:0 0 26px;
  accent-color:var(--accent); cursor:pointer;
}
#loginform .login-submit{margin-top:4px}
#wp-submit,.btn-principal{
  display:block; width:100%; text-align:center; background:var(--btn);
  color:#fff; border:0; border-radius:999px; padding:13px 18px;
  font-family:var(--disp); font-weight:600; font-size:15px; cursor:pointer;
}
.btn-suave,.entrar-caja .btn-suave{background:#5D6D7E; color:#fff}
.entrar-olvido{
  text-align:center; margin:16px 0 0; font-family:var(--body); font-size:13px;
}
.entrar-aviso{
  background:var(--verde-bg); border-radius:var(--r); padding:12px 14px;
  font-family:var(--body); font-size:13px; color:var(--ink); margin:0 0 18px;
}
.entrar-alta{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  text-align:center;
}
.entrar-alta .mini{margin:0 0 14px}
.vplan.is-elegida{border-color:var(--accent)}
:where(body[data-modo="app"]) .vplan{border-color:var(--line)}
body[data-modo="app"] .vplan .btn{margin-top:16px}
.scr:has(.pie-susc){padding-bottom:49px}
.pie-susc{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:430px;
  background:var(--hdr); height:49px; z-index:5;
}

.inst{display:flex; align-items:center; gap:14px; margin:16px 0 4px;
  padding:14px 16px; background:var(--hdr); border-radius:var(--r);
  box-shadow:var(--sombra)}
.inst[hidden]{display:none}
.inst-txt{flex:1 1 auto; display:flex; flex-direction:column; gap:3px;
  min-width:0}
.inst-tit{font-family:var(--disp); font-weight:700; font-size:14px;
  color:var(--hdr-ink); line-height:1.25}
.inst-sub{font-family:var(--body); font-size:12.5px; line-height:1.35;
  color:var(--hdr-mut)}
.inst-si{flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; background:var(--btn); color:var(--btn-ink);
  border:0; border-radius:999px; padding:11px 18px; font-family:var(--disp);
  font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none;
  white-space:nowrap}

body[data-modo="app"]{display:flow-root}