:root{
--fondo:#fff; --tinta:#1c3a13; --tinta-2:#5b6657; --linea:#ececE6;
--suave:#f4f5f0; --lima:#d3fa99; --negro:#0f140d;
--r-tarjeta:22px; --r-boton:999px; --gutter:16px;
--barra:64px; --seguro:env(safe-area-inset-bottom,0px);
--f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
/* curvas fuertes: las de CSS se sienten flojas; nunca ease-in (arranca lento) */
--ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0}
/* clip y no hidden: con hidden muere position:sticky (leccion 2026-09-21) */
html,body{background:var(--fondo);color:var(--tinta);font:1rem/1.4 var(--f);overflow-x:clip;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{padding-bottom:calc(var(--barra) + var(--seguro))}
.barra{position:fixed;inset:auto 0 0;height:calc(var(--barra) + var(--seguro));
padding-bottom:var(--seguro);display:grid;grid-template-columns:repeat(4,1fr);
background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-top:1px solid var(--linea);z-index:20}
.barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:44px;color:#9aa295;font-size:0.6875rem;font-weight:600;text-decoration:none;position:relative}
.barra a[aria-current=page]{color:var(--tinta)}
.globo{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;
border-radius:9px;background:var(--tinta);color:#fff;font-size:0.6875rem;line-height:1.125rem;text-align:center}
#vista{padding:var(--gutter);outline:none}
.h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.sin-red{padding:48px 8px;text-align:center;color:var(--tinta-2);display:grid;gap:16px;justify-items:center}
.btn{min-height:44px;padding:0 22px;border:0;border-radius:var(--r-boton);background:var(--negro);color:#fff;
font:600 0.9375rem var(--f);cursor:pointer}
/* hoja que sube (el carrito), debajo de la barra para que Cart siga activa */
.hoja{position:fixed;inset:auto 0 0;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;z-index:15;background:var(--fondo);
border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0;box-shadow:0 -10px 40px rgba(15,20,13,.18);
padding:var(--gutter) var(--gutter) calc(var(--barra) + var(--seguro) + var(--gutter));
transform:translateY(100%);transition:transform 280ms var(--ease-out)}
.hoja[hidden]{display:none}
.hoja.abierta{transform:none}
.velo{position:fixed;inset:0;z-index:14;background:rgba(15,20,13,.42);opacity:0;transition:opacity 280ms var(--ease-out)}
.velo.ver{opacity:1}
html:has(.hoja.abierta){overflow:hidden} /* lo de abajo no se mueve mientras la hoja esta arriba */
@media (prefers-reduced-motion:reduce){.hoja,.velo{transition:none}}
/* la cabecera es el asa: touch-action none para que el arrastre no se vuelva scroll */
.hoja-cab{position:relative;display:flex;align-items:center;justify-content:space-between;padding-top:8px;margin:-4px -10px 6px 0;touch-action:none;cursor:grab}
.hoja-cab .h1{font-size:1.5rem}
.asa{position:absolute;top:-8px;left:calc(50% - 13px);width:36px;height:5px;border-radius:3px;background:var(--linea)}
.hoja-lista{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
.cf{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.cf-f{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--suave);overflow:hidden}
.cf-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-i{display:grid;align-content:start;gap:2px;min-width:0}
.cf-i b{font-size:0.9375rem;line-height:1.25}.cf-i span{font-size:0.8125rem;color:var(--tinta-2)}
.cf .cant{justify-self:start;margin-top:8px}
.cf-p{display:grid;align-content:start;justify-items:end;gap:3px;text-align:right}
.cf-p b{font-size:0.9375rem}.cf-p s{font-size:0.8125rem;color:var(--tinta-2)}
/* lima de fondo con tinta oscura: la lima como texto sobre blanco no se lee */
.rebaja{padding:2px 8px;border-radius:var(--r-boton);background:var(--lima);color:var(--tinta);font-size:0.75rem;font-weight:700}
.hoja-vacia{padding:28px 0 8px;display:grid;gap:16px;justify-items:center;text-align:center;color:var(--tinta-2)}
.deshacer:empty{display:none}
.deshacer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:0 4px 0 16px;
border-radius:14px;background:var(--tinta);color:#fff;font-size:0.875rem;font-weight:600}
.deshacer button{min-height:44px;padding:0 12px;border:0;background:none;color:var(--lima);font:700 0.875rem var(--f);cursor:pointer}
.hoja-pie[hidden]{display:none}
.hoja-pie{padding-top:16px;border-top:1px solid var(--linea);display:grid;gap:16px}
.hoja-pie dl{display:grid;gap:4px}
.hoja-pie dl div{display:flex;justify-content:space-between;font-size:0.9375rem;color:var(--tinta-2)}
.hoja-pie dd{font-variant-numeric:tabular-nums}
.hoja-pie .tot{color:var(--tinta);font-size:1.1875rem;font-weight:700;margin-top:4px}
.btn-pagar{width:100%;min-height:52px;font-size:1rem}
/* Home */
.cab{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 12px}
.logo{font-size:1.375rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta)}
.lupa{width:44px;height:44px;margin-right:-10px;border:0;background:none;color:var(--tinta);display:grid;place-items:center;cursor:pointer}
/* la foto no manda el alto: el texto lo marca y la foto se ajusta dentro */
.tj-f{position:relative;display:grid;place-items:center}
.tj-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 18px;padding:0 var(--gutter)}
.chip{flex:none;min-height:44px;padding:0 18px;border:1px solid var(--linea);border-radius:var(--r-boton);
background:#fff;color:var(--tinta);font:600 0.875rem var(--f);cursor:pointer}
.chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
/* Tarjeta de producto (Shop) */
.tj{position:relative;min-width:0;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--linea);border-radius:12px;padding:9px}
.tj-a{display:grid;gap:2px;color:inherit;text-decoration:none}
.tj-f{aspect-ratio:1;border-radius:8px;background:var(--suave);margin-bottom:8px;overflow:hidden}
.tj-f img{padding:0}
/* silueta de vial: se ve solo si no hay foto (tarea 9 trae las reales) */
.vial:not(:has(img))::after{content:"";width:26%;aspect-ratio:1/2;border-radius:6px 6px 8px 8px;
background:linear-gradient(var(--tinta) 0 16%,transparent 16% 22%,rgba(28,58,19,.12) 22%)}
.tj-n{font-size:0.9375rem;line-height:1.25;padding-right:4px}
.tj-d{font-size:0.8125rem;color:var(--tinta-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tj-p{font-size:0.9375rem;font-weight:700;margin-top:2px}
/* El boton de agregar va en su renglon, ancho completo, como en la portada: el
circulo flotante se montaba encima del texto de la tarjeta (Kelvin 2026-09-30). */
.mas{margin-top:auto;width:100%;min-height:38px;border:0;border-radius:8px;cursor:pointer;
background:var(--lima);color:#1c3a13;font:500 0.875rem var(--f);text-decoration:none;
display:grid;place-items:center;padding:0 10px}
.tj-p{margin-bottom:8px}
/* Shop */
.busca{display:flex;align-items:center;gap:8px;min-height:44px;margin:12px 0 12px;padding:0 14px;border-radius:var(--r-boton);background:var(--suave);color:var(--tinta-2)}
.busca input{flex:1;min-width:0;height:44px;border:0;background:none;font:1rem var(--f);color:var(--tinta);outline:none}
.grilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vacio{grid-column:1/-1;padding:32px 0;text-align:center;color:var(--tinta-2)}
.aviso{position:fixed;left:50%;bottom:calc(var(--barra) + var(--seguro) + 12px);transform:translate(-50%,20px);opacity:0;
padding:10px 18px;border-radius:var(--r-boton);background:var(--tinta);color:#fff;font-size:0.875rem;font-weight:600;
transition:opacity .2s,transform .2s;pointer-events:none;z-index:30}
.aviso.ver{opacity:1;transform:translate(-50%,0)}
/* Ficha */
.fi-cab{display:flex;justify-content:space-between;margin:-8px -10px 6px}
.ico{position:relative;width:44px;height:44px;border:0;background:none;color:var(--tinta);display:grid;place-items:center;cursor:pointer}
.ico .globo{top:4px;left:26px}
.fi-f{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-tarjeta);background:var(--suave);overflow:hidden}
.fi-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fi-n{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:18px}
.fi-s{color:var(--tinta-2);font-size:0.875rem;margin-top:4px}
.fi-p{font-size:1.375rem;font-weight:700;margin-top:10px}
.fi-p s{font-size:1rem;font-weight:500;color:var(--tinta-2);margin-left:6px}
.fi-dosis{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fi-nudge{display:inline-block;margin-top:14px;padding:6px 12px;border-radius:var(--r-boton);background:var(--suave);font-size:0.8125rem;font-weight:600}
.fi-nudge:empty{display:none}
.fi-plegable{margin-top:18px;border-top:1px solid var(--linea)}
.fi-plegable details{border-bottom:1px solid var(--linea)}
.fi-plegable summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;font-weight:600;cursor:pointer;list-style:none}
.fi-plegable summary::-webkit-details-marker{display:none}
.fi-plegable summary::after{content:"+";font-size:1.375rem;font-weight:400;color:var(--tinta-2)}
.fi-plegable details[open] summary::after{content:"−"}
.fi-c{padding:0 0 16px;font-size:0.875rem;color:var(--tinta-2);display:grid;gap:10px;overflow-wrap:anywhere}
.fi-c ul{padding-left:18px;display:grid;gap:10px}
.fi-c b,.fi-c h3{color:var(--tinta)}.fi-c h3{font-size:0.875rem;margin-top:6px}
.fi-c a{color:var(--tinta);font-weight:600}
.fi-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--tinta);text-decoration:underline;cursor:pointer}
.fi-incluye{margin-top:18px;border-top:1px solid var(--linea)}
.fi-incluye ul{list-style:none;padding:0;margin:0}
.fi-incluye h2{font-size:0.9375rem;font-weight:600;padding:16px 0 4px}
.fi-incluye li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--linea);font-size:0.875rem}
.fi-incluye li b{font-weight:600}
.fi-coa{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--linea);border-radius:var(--r-boton);background:#fff;font:600 0.8125rem/1 var(--f);color:#0f8a4b;cursor:pointer}
.fi-pureza{flex:none;font-size:0.78125rem;font-weight:600;color:var(--tinta-2)}
.fi-invest{margin:16px 0 8px;font-size:0.75rem;color:#8a9185}
/* barra de compra fija encima de las pestanas; el hueco de abajo evita que tape la linea gris */
#vista:has(.fi-compra){padding-bottom:calc(var(--gutter) + 76px)}
.fi-compra{position:fixed;left:0;right:0;bottom:calc(var(--barra) + var(--seguro));z-index:10;display:flex;gap:10px;
padding:10px var(--gutter);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid var(--linea)}
.cant{display:flex;align-items:center;border:1px solid var(--linea);border-radius:var(--r-boton)}
.cant button{width:44px;height:44px;border:0;background:none;color:var(--tinta);font:500 1.375rem var(--f);cursor:pointer}
.cant button:disabled{color:#c3c8bf;cursor:default}
.cant output{min-width:20px;text-align:center;font-weight:700}
.btn-lima{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;margin-top:8px;border-radius:var(--r-boton);
background:var(--lima);color:var(--tinta);font-weight:700;font-size:0.9375rem;text-decoration:none}
.fi-add{flex:1;justify-content:center;margin:0;border:0;font-family:var(--f);cursor:pointer;white-space:nowrap}
/* Lo que se toca se hunde un poco al presionar: confirma el toque en el telefono */
.btn,.btn-lima,.btn-borde,.cu-pedido,.chip,.mas,.lupa,.barra a,.tj-a,.ico,.cant button,.deshacer button,.pg-btn,.pg-pago{transition:transform 160ms var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn:active,.btn-lima:active,.btn-borde:active,.cu-pedido:active,button.dl-fila:active,.chip:active,.mas:active,.lupa:active,.barra a:active,.tj-a:active,.ico:active,.cant button:active,.deshacer button:active,.pg-btn:active,.pg-pago:active{transform:scale(.97)}
/* Pago */
.pg-a{display:inline-flex;align-items:center;text-decoration:none}
.pg-res{margin:14px 0 6px;border-radius:18px;background:var(--suave)}
.pg-res summary{min-height:52px;padding:0 16px;display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;list-style:none}
.pg-res summary::-webkit-details-marker{display:none}
.pg-res summary span{flex:1}
.pg-res summary::after{content:"+";font-size:1.375rem;font-weight:400;color:var(--tinta-2)}
.pg-res[open] summary::after{content:"−"}
.pg-res ul{list-style:none;padding:0 16px 14px;display:grid;gap:8px;font-size:0.875rem;color:var(--tinta-2)}
.pg-res li{display:flex;justify-content:space-between;gap:12px}.pg-res li b{color:var(--tinta)}
.pg{display:grid;gap:12px;padding-bottom:8px}
.pg h2,.pg legend{font-size:1.1875rem;font-weight:700;letter-spacing:-.01em;margin-top:14px;padding:0}
.pg-campo{display:grid;gap:6px;font-size:0.875rem;font-weight:600}
.pg-campo i{font-style:normal;font-weight:400;color:var(--tinta-2)}
/* 16 px de letra: con menos, iOS hace zoom al enfocar */
.pg-campo input,.pg-campo select{min-height:50px;padding:0 14px;border:1px solid var(--linea);border-radius:14px;
background:#fff;color:var(--tinta);font:1rem var(--f);width:100%;appearance:none}
.pg-campo select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6657' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
.pg-campo input:focus,.pg-campo select:focus{outline:2px solid var(--tinta);outline-offset:-1px}
.pg-grupo{display:grid;gap:12px}
.pg-nota{margin-top:-4px;font-size:0.8125rem;color:var(--tinta-2)}
.pg-pagos{border:0;padding:0;display:grid;gap:10px}
/* filas grandes con radio (patron Wise): toda la fila es el toque */
.pg-pago{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid var(--linea);border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-pago:has(:checked){border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.pg-pago input,.pg-casilla input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--tinta)}
.pg-pago span{display:grid;gap:2px}.pg-quesigue{margin:2px 0 0;font-size:0.8125rem;color:var(--tinta-2)}
.pg .fi-invest{margin:6px 0 0}
.pg-casilla{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-size:0.875rem;cursor:pointer}
.pg-casilla input{margin-top:1px}
.pg-error:empty{display:none}
.pg-error{padding:12px 16px;border-radius:14px;background:#fdeceb;color:#8f1d14;font-size:0.875rem;font-weight:600}
.pg-btn{width:100%;min-height:56px;border:0;border-radius:var(--r-boton);background:var(--lima);color:var(--tinta);
font:700 1rem var(--f);cursor:pointer}
.pg-btn[aria-disabled=true],.pg-btn:disabled{opacity:.45}
.pg-btn[aria-disabled=true]:active{transform:none}
#vista:has(.pg-listo){display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--barra) - var(--seguro))}
.pg-listo{padding:16px 8px;display:grid;gap:10px;justify-items:center;text-align:center}
.pg-listo>p{color:var(--tinta-2);max-width:32ch}
.pg-listo h1{outline:none}
.pg-check{position:relative;width:88px;height:88px;border-radius:50%;background:var(--lima);color:var(--tinta);display:grid;place-items:center;margin-bottom:8px}
/* Sello (muestras/confirmacion.html opcion 2): el circulo crece con una onda, la palomita se dibuja,
el numero sale letra por letra y luego tarjeta, texto y boton. Fill "both": sin animacion queda la pantalla final */
.pg-check::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #a8c686;opacity:0;pointer-events:none;animation:pg-onda 1400ms var(--ease-out) 600ms both}
/* dura ~4 s en total: Kelvin pidio al menos 3 s (2026-09-26) */
.pg-check{animation:pg-crece 800ms var(--ease-out) both}
.pg-check path{stroke-dasharray:1;animation:pg-dibuja 700ms cubic-bezier(.65,0,.35,1) 550ms both}
.pg-listo h1{animation:pg-sube 700ms var(--ease-out) 1100ms both}
.pg-listo>p:not(.pg-num,.pg-sigue){animation:pg-funde 700ms var(--ease-out) 1300ms both}
.pg-num span{display:inline-block}
.pg-num span[style]{animation:pg-letra 450ms var(--ease-out) both;animation-delay:calc(1500ms + var(--i) * 70ms)}
.pg-listo dl{animation:pg-tarjeta 800ms var(--ease-out) 2700ms both}
.pg-listo .pg-sigue{animation:pg-sube 700ms var(--ease-out) 3100ms both}
.pg-listo .pg-a{animation:pg-sube 700ms var(--ease-out) 3300ms both}
@keyframes pg-crece{0%{transform:scale(0)}60%{transform:scale(1.08)}100%{transform:none}}
@keyframes pg-onda{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2)}}
/* opacidad en el 1er cuadro: con punta redonda, el trazo en 1 igual deja un punto */
@keyframes pg-dibuja{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0}}
@keyframes pg-sube{from{opacity:0;transform:translateY(12px)}}
@keyframes pg-funde{from{opacity:0}}
@keyframes pg-letra{from{opacity:0;transform:translateY(6px)}}
@keyframes pg-tarjeta{from{opacity:0;transform:translateY(28px)}}
.pg-listo .pg-num{font-size:1.375rem;font-weight:700;color:var(--tinta);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pg-listo dl{width:100%;display:grid;gap:6px;margin:8px 0;padding:14px 16px;border-radius:18px;background:var(--suave)}
.pg-listo dl div{display:flex;justify-content:space-between;font-size:0.9375rem}.pg-listo dt{color:var(--tinta-2)}.pg-listo dd{font-weight:700}
.pg-listo .pg-sigue{color:var(--tinta);font-weight:600;margin-bottom:10px}
/* con "reducir movimiento" (comun en iPhone) igual se anima, pero solo aparece sin moverse */
@media (prefers-reduced-motion:reduce){.pg-listo *,.pg-listo .pg-check,.pg-listo .pg-check::after{animation-name:pg-funde!important}.pg-listo .pg-check::after{animation:none!important}.pg-btn,.pg-pago{transition:none}}
/* Cuenta */
.cu-s{margin-top:6px;color:var(--tinta-2);font-size:0.9375rem}
.cu-entrar,#cu-paso{display:grid;gap:12px}.cu-entrar{margin-top:20px}
.btn-borde{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
border:1px solid var(--linea);border-radius:var(--r-boton);background:#fff;color:var(--tinta);font:600 0.9375rem var(--f);cursor:pointer}
.cu-btn{width:100%;min-height:52px}
.cu-btn:disabled{opacity:.6}
.cu-sec{margin-top:28px;padding-top:20px;border-top:1px solid var(--linea)}
.cu-sec h2,.cu-revisa h2{font-size:1.1875rem;font-weight:700;letter-spacing:-.01em}
.cu-sec .pg{margin-top:4px}
.cu-idiomas{display:flex;gap:8px;margin-top:12px}
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.cu-revisa{display:grid;gap:8px;justify-items:center;text-align:center;padding:20px 16px;border-radius:var(--r-tarjeta);background:var(--suave);outline:none}
.cu-revisa p{color:var(--tinta-2);overflow-wrap:anywhere}.cu-revisa b{color:var(--tinta)}
.cu-revisa .btn-borde{margin-top:6px}
.cu-sobre{width:60px;height:60px;border-radius:50%;background:var(--lima);display:grid;place-items:center;margin-bottom:4px}
.cu-nada{padding:12px 0;color:var(--tinta-2);font-size:0.875rem}
.cu-yo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:var(--tinta-2);font-size:0.9375rem}
.cu-yo span{min-width:0;overflow-wrap:anywhere}
#cu-lista{display:grid;gap:10px;margin-top:12px}
.cu-mes{margin:14px 0 0;font-size:0.8125rem;font-weight:500;color:var(--tinta-2);letter-spacing:.02em}
.cu-mes:first-child{margin-top:0}
.cu-viejos{margin-top:10px;color:var(--tinta-2);font-size:0.875rem;text-align:center}
.cu-pedido{border:1px solid var(--linea);border-radius:18px;background:#fff;color:inherit;text-decoration:none}
.cu-pedido,.cu-uno{display:grid;gap:4px;padding:14px 16px;min-height:44px;cursor:pointer}
.cu-uno{cursor:default}
.cu-fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cu-fila b{font-variant-numeric:tabular-nums}
.cu-dato{font-size:0.875rem;color:var(--tinta-2)}.cu-dato b{color:var(--tinta);font-size:0.9375rem}
/* estado en pastilla: lima solo para lo bueno (pagado); lo cerrado en tinta */
.cu-estado{flex:none;padding:3px 10px;border-radius:var(--r-boton);background:var(--suave);color:var(--tinta);font-size:0.75rem;font-weight:700}
.cu-estado[data-estado=pagado]{background:var(--lima)}
.cu-estado[data-estado=enviado],.cu-estado[data-estado=entregado]{background:var(--tinta);color:#fff}
.cu-estado[data-estado=cancelado]{background:#fdeceb;color:#8f1d14}
/* ---------- Portada: landing 6 (Kelvin 2026-09-25). Todo bajo .l6 para no chocar con Shop ---------- */
.l6{--gris:#5f646d;--filete:#e8e8e6;--verde:#0f8a4b;--palido:#eef6f0;--salvia-p:#e8ebdf;--salvia-d:#6d7a58;--serif:'Instrument Serif',Georgia,serif;
margin:calc(-1 * var(--gutter));color:#16181a;font-size:0.9375rem;line-height:1.5}
.l6 .wrap{display:block;padding-left:20px;padding-right:20px}
.l6 .cab{margin:0;padding:2px 20px 0}
.l6 img{display:block;max-width:100%;height:auto}
.l6 a{color:inherit;text-decoration:none}
.l6 h1,.l6 h2,.l6 h3{font-weight:600}
.l6 section h2{font-size:1.75rem;line-height:1.1;letter-spacing:-.025em;margin:8px 0 18px}
.eyebrow{font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#5f646d}
.lnk{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.l6 .coa{display:inline-flex;align-items:center;gap:5px;border:0;font:600 0.78125rem/1 var(--f);color:#0f8a4b}
.l6 .coa::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.l6 .add{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:0;border-radius:999px;
background:#16181a;color:#fff;font:600 0.90625rem var(--f);white-space:nowrap;cursor:pointer;transition:background .2s,transform 160ms var(--ease-out)}
.l6 .add:active{transform:scale(.97)}
.l6 .add.ok{background:var(--tinta)}
.l6 .precio{font-size:1.3125rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.l6 .kprecio{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:8px 0}
.l6 .kprecio s{color:var(--gris);font-size:0.875rem}
.l6 .pct{font-size:0.75rem;font-weight:700;color:var(--tinta)}
.l6 .save{position:absolute;left:6px;top:6px;padding:4px 8px;border-radius:999px;background:var(--tinta);color:#fff;font-size:0.6875rem;font-weight:700}
/* chips de dosis */
.dzs{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.dz{min-height:36px;padding:0 10px;border:1px solid color-mix(in srgb,var(--a,#46552a) 22%,#fff);border-radius:999px;background:#fff;
color:var(--a,#46552a);font:600 0.78125rem var(--f);white-space:nowrap;cursor:pointer}
.dz[aria-pressed=true]{border-color:var(--a,#46552a);background:var(--a,#46552a);color:#fff}
/* hero */
.h6k{padding-top:0;padding-bottom:26px}
.h6k h1{font-family:var(--serif);font-weight:400;font-size:2.0625rem;line-height:1;letter-spacing:-.02em;margin:2px 0 4px}
.h6k h1 em{color:var(--salvia-d)}
.h6k .zing{font-size:0.875rem;line-height:1.3;color:var(--gris);margin-bottom:3px}
.h6k .zing b{color:#16181a}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#f1f2ef;margin-bottom:4px}
.seg button{min-height:36px;border:0;border-radius:999px;background:none;font:600 0.875rem var(--f);color:var(--gris);cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:#16181a;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.hk{--a:#46552a;border-radius:24px;background:var(--salvia-p);overflow:hidden}
.hk figure{position:relative;aspect-ratio:1;margin:0;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#fff,var(--salvia-p))}
.hk figure img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.hk .kb{padding:4px 18px 4px}
.l6 .cab .lupa{height:38px}
.l6 .cab .logo{font-size:1.25rem}
.h6k .eyebrow{font-size:0.6875rem}
.hk h3{font-size:1.25rem;letter-spacing:-.02em}
.hk .sub{display:block;border:0;background:none;padding:0;text-align:left;font:0.78125rem/1.4 var(--f);color:var(--salvia-d);cursor:pointer}
.hk p.sub{color:var(--gris);cursor:default}
.hk .dzs{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));margin-top:6px}
.hk .dz{padding:0 4px;min-height:40px}
.hk .kprecio{margin:4px 0}
.hk .precio{font-size:1.75rem}
.hk s{font-size:1.0625rem}
.hk .add{width:100%;min-height:48px;font-size:1rem}
/* franja de confianza */
.franja6{background:var(--palido);padding:22px 0}
.franja6 ul{list-style:none;display:grid;gap:14px;margin:0}
.franja6 li{display:flex;gap:12px;align-items:flex-start}
.franja6 i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--tinta)}
.franja6 svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.franja6 div{display:grid;gap:1px}
.franja6 b{font-size:0.9375rem;line-height:1.3}
.franja6 span{font-size:0.8125rem;color:var(--gris)}
/* pasos, kits, tabla por mg */
.pasos,.kits,.faq{padding-top:48px;padding-bottom:8px}
.pasos ol{list-style:none;display:grid;gap:10px;padding:0}
.pasos li{display:flex;gap:14px;padding:18px;border:1px solid var(--filete);border-radius:16px}
.pasos li>span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--salvia-p);color:var(--salvia-d);font-weight:700}
.pasos b{font-size:1rem}
.pasos p{font-size:0.875rem;color:var(--gris)}
.klist{display:grid;gap:12px}
.kit{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:12px;border-radius:18px;background:var(--salvia-p)}
.kit figure{position:relative;margin:0;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.kit figure img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.kbody{display:flex;flex-direction:column;min-width:0}
.kbody .eyebrow{font-size:0.65625rem;color:var(--salvia-d)}
.kbody h3{font-size:1.1875rem;letter-spacing:-.02em}
.kbody p{font-size:0.78125rem;color:var(--gris);line-height:1.35}
.kbody .regalo{font-size:0.8125rem;font-weight:700;color:var(--tinta);margin-top:4px}
.kbody .add{margin-top:auto;min-height:42px}
.pormg{margin-top:14px;padding:18px;border:1px solid var(--filete);border-radius:18px}
.pormg h3{font-size:1.0625rem}
.pormg p{font-size:0.84375rem;color:var(--gris);margin-bottom:8px}
.pormg table{width:100%;border-collapse:collapse;font-size:0.8125rem;color:inherit}
.pormg th{text-align:left;font-weight:600;padding:10px 0}
.pormg td{padding:10px 4px;color:var(--gris);line-height:1.3}
.pormg td b{color:#16181a}
.pormg tr+tr{border-top:1px solid var(--filete)}
.pormg .m{color:var(--tinta);font-weight:700;text-align:right}
/* catalogo por familias */
.cat{padding-top:44px;padding-bottom:16px}
.cat>h2{margin-bottom:4px}
.famnav{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:12px 20px;background:#fff}
.famnav::-webkit-scrollbar{display:none}
.famnav button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--filete);border-radius:999px;
background:#fff;font:600 0.84375rem var(--f);color:var(--gris);cursor:pointer}
.famnav button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.fam{padding:20px 0 16px;scroll-margin-top:64px}
/* Familias en blanco con punto de color, opcion A (Kelvin 2026-10-01: "1 la A") */
.fhead{padding:8px 0 4px;margin-bottom:10px}
.fhead .eyebrow::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:1px}
.fhead .eyebrow{color:var(--a)}
.l6 .fhead h2{font-size:1.6875rem;margin:6px 0}
.fhead p{font-size:0.96875rem;opacity:.8}
.fam .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:12px 12px 14px;border-radius:16px;background:#fff;border:1px solid #e4e6e3}
.card>a{display:block;width:100%}
.card .vial img{width:100%;margin:0;border-radius:12px;object-fit:cover}
.card .vial{display:grid;place-items:center;aspect-ratio:1;margin:4px 0 6px}
.card h3{font-size:0.9375rem;letter-spacing:-.01em;line-height:1.2}
.card .dosis{font-size:0.78125rem;color:var(--gris);margin-top:2px}
.pblock{display:flex;flex-direction:column;line-height:1.2;margin-top:auto;padding-top:10px}
.permg{font-size:0.75rem;color:var(--gris);white-space:nowrap}
.card .ahorro{font-size:0.75rem;font-weight:600;color:var(--a);margin-top:4px;line-height:1.3}
.card .add{width:100%;margin-top:12px}
/* preguntas, cierre, pie */
.faq details{border-top:1px solid var(--filete)}
.faq details:last-child{border-bottom:1px solid var(--filete)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;font-size:1rem;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.375rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:0.90625rem;color:var(--gris)}
.cierre{margin-top:40px;padding:56px 0;background:var(--salvia-p);text-align:center}
.l6 .cierre h2{max-width:14em;margin:10px auto}
.cierre p{font-size:0.96875rem;color:var(--gris);margin:0 auto 22px;max-width:30em}
.pie{display:grid;gap:8px;padding-top:32px;padding-bottom:28px}
.pie p{font-size:0.8125rem;color:var(--gris)}
.pie .legal{font-weight:600;color:#16181a}
/* informe de laboratorio (modal) */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;background:rgba(0,0,0,.45)}
.modal[hidden]{display:none}
.mcaja{width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:22px 22px 0 0;overflow:hidden}
.mcab{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;border-bottom:1px solid var(--linea)}
.mcab h2{font-size:1.0625rem}
.mtabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 0}
.mtabs:empty{display:none}
.mtabs button{min-height:38px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;background:#fff;font:600 0.8125rem var(--f);cursor:pointer}
.mtabs button[aria-pressed=true]{background:#16181a;border-color:#16181a;color:#fff}
.mimg{flex:1;overflow-y:auto;padding:12px 20px}
.mimg img{display:block;width:100%;height:auto;border:1px solid var(--linea);border-radius:10px}
.mnota{padding:0 20px calc(18px + var(--seguro));font-size:0.78125rem;color:#5f646d}
/* celular: la nota del visor quedaba a 18 px del borde de abajo, pegada; en
computadora el visor se queda como estaba (Kelvin 2026-10-01) */
@media (max-width:1023px){.mnota{padding:6px 20px calc(28px + var(--seguro))}}
/* barreras de entrada (edad, no es para ti, cuenta) sobre la tienda borrosa; sin salida */
html.trabado{overflow:hidden}
.campo{min-height:50px;padding:0 14px;border:1px solid #d9dcd4;border-radius:14px;font:1rem var(--f);width:100%;background:#fff;color:var(--tinta)}
.campo:focus{outline:2px solid var(--tinta);outline-offset:1px;border-color:transparent}
.rerr{font-size:0.8125rem;color:#b0412b}
.rerr:empty{display:none}
.pared{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:20px 16px;overflow-y:auto;
background:rgba(28,34,24,.42);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);animation:r-velo .3s ease}
.pared.sale{animation:r-velo .34s ease reverse forwards}
.pcaja{width:min(440px,100%);display:grid;gap:12px;background:#fff;border-radius:26px;padding:26px 22px 20px;
box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 70px -20px rgba(15,20,13,.45);animation:p-entra .45s var(--ease-out)}
.plogo{font-size:1.3125rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta);margin-bottom:6px}
.pcaja h2{font-weight:600;font-size:2.125rem;line-height:1.05;letter-spacing:-.035em;outline:none}
.pcaja h2 em{font-style:italic;color:var(--salvia-d,#6d7a58)}
.pcaja .btn{min-height:52px;font-size:0.96875rem;margin-top:4px}
/* la de edad: verde oscuro de marca, titular con lima */
.poscura{background:radial-gradient(130% 80% at 0% 0%,#2f5823 0%,#1c3a13 48%,#10240a 100%);color:#dfe6d6;padding:30px 24px 20px}
.poscura .plogo,.poscura h2{color:#fff}
.poscura h2 em{display:block;color:var(--lima)}
.poscura h2+p{font-size:0.96875rem;line-height:1.55;color:rgba(223,230,214,.84)}
.poscura b{color:#fff;font-weight:600}
.poscura .btn{background:var(--lima);color:var(--negro);margin-top:12px}
.poscura .lnk{justify-self:center;min-height:44px;color:rgba(223,230,214,.9);font-size:0.90625rem;text-decoration-color:rgba(211,250,153,.55)}
.ppie{margin-top:8px;padding-top:14px;border-top:1px solid rgba(28,58,19,.1);font:500 0.59375rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.12em;text-transform:uppercase;color:#9aa295;text-align:center;text-wrap:balance}
.poscura .ppie{border-top-color:rgba(255,255,255,.1);color:rgba(223,230,214,.45)}
.ptabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--suave);margin-bottom:6px}
.ptabs button{min-height:44px;border:0;border-radius:11px;background:none;font:600 0.9375rem var(--f);color:var(--tinta-2);cursor:pointer}
.ptabs button[aria-pressed=true]{background:#fff;color:var(--tinta);box-shadow:0 1px 4px rgba(15,20,13,.1)}
.psub{font-size:0.9375rem;color:var(--tinta-2)}
.psub b{color:var(--tinta);background:var(--lima);padding:0 4px;border-radius:5px}
.plab{font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;color:var(--tinta)}
.pcaja .pnota{font-size:0.78125rem;color:var(--tinta-2);text-align:center}
.pcam{font-size:0.875rem;color:var(--tinta-2);text-align:center}
.pcam .lnk{min-height:44px;color:var(--tinta);font-weight:600}
.cu-revisa .pg-campo,.cu-revisa .btn{width:100%;text-align:left}.cu-revisa .btn{text-align:center}
.cu-cod input{font-size:1.375rem;letter-spacing:.3em;text-align:center}
/* respaldo del codigo (carril 37): discreto, chico y gris; 44 px de toque igual */
.cu-resp{width:100%;margin-top:4px}
.cu-resp summary{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:0.8125rem;color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;list-style:none}
.cu-resp summary::-webkit-details-marker{display:none}
.cu-resp form{display:grid;gap:8px;margin-top:4px}
.cu-sobre{width:56px;height:56px;border-radius:50%;background:var(--lima);color:var(--tinta);display:grid;place-items:center}
@keyframes p-entra{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes r-velo{from{opacity:0}}
/* bienvenida "Vidrio" al volver del link: letras de borroso a nitido, luego el vidrio se apaga.
Se anima la opacidad del vidrio, no el blur (barato en el celular). */
.bienv{position:fixed;inset:0;z-index:70;pointer-events:none}
.bv-vidrio{position:absolute;inset:0;background:rgba(244,245,240,.55);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.bv-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding-bottom:8vh}
.bv-hola{font:600 3.625rem/1 var(--f);letter-spacing:-.04em;color:var(--tinta)}
.bv-hola span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(14px)}
.bv-hola .bv-oculto,.pg-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bv-nombre{font:500 2.5rem/1.1 var(--f);letter-spacing:-.03em;color:#16352a;margin-top:6px;opacity:0;filter:blur(6px)}
.bv-linea{display:block;height:1px;width:120px;margin:24px auto 16px;background:linear-gradient(90deg,transparent,#6d7a58,transparent);transform:scaleX(0)}
.bv-marca{font:600 0.9375rem/1 var(--f);letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;color:var(--tinta);opacity:0}
.bv-lema{display:block;margin-top:12px;font:500 0.6875rem/1.4 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#6d7a58;opacity:0}
.bienv.corre .bv-hola span{animation:bv-letra 700ms var(--ease-out) forwards;animation-delay:calc(150ms + var(--i) * 55ms)}
.bienv.corre .bv-nombre{animation:bv-letra 800ms var(--ease-out) 800ms forwards}
.bienv.corre .bv-linea{animation:bv-linea 800ms var(--ease-out) 1250ms forwards}
.bienv.corre .bv-marca{animation:bv-ent 700ms var(--ease-out) 1450ms forwards}
.bienv.corre .bv-lema{animation:bv-ent 700ms var(--ease-out) 1850ms forwards}
.bienv.corre .bv-centro{animation:bv-sale 450ms cubic-bezier(.4,0,.2,1) 3850ms forwards}
.bienv.corre .bv-vidrio{animation:bv-sale 650ms cubic-bezier(.4,0,.2,1) 3950ms forwards}
#vista.enfoca{animation:bv-enfoca 800ms var(--ease-out) 3950ms both;transform-origin:50% 40%}
@keyframes bv-letra{to{opacity:1;filter:none;transform:none}}
@keyframes bv-linea{to{transform:none}}
@keyframes bv-ent{to{opacity:1}}
@keyframes bv-sale{to{opacity:0;visibility:hidden}}
@keyframes bv-enfoca{from{transform:scale(1.035)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
.pared,.pcaja,#vista.enfoca,.bienv.corre *{animation:none!important}
.bienv.corre .bv-hola span,.bienv.corre .bv-nombre,.bienv.corre .bv-marca,.bienv.corre .bv-lema{opacity:1;filter:none;transform:none}
.bienv.corre .bv-linea{transform:none}
.bienv.corre{animation:bv-sale 400ms linear 1100ms forwards}
}
/* carrito y pago: agua de regalo, regalo de $25, tarjeta todavia no */
.cf-regalo,.pg-regalo{color:#16352a!important;font-weight:500}
.cf-i .cf-regalo{font-size:0.75rem}
.pg-pago[aria-disabled=true]{opacity:.5;cursor:not-allowed}
/* Ficha de producto suelto: fila de informe, pestanas, tablas, aviso y relacionados */
.fi-informe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:56px;margin-top:18px;
border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:0.875rem;font-weight:600}
.fi-informe p{font-weight:400;color:var(--tinta-2);padding-bottom:10px}
.fi-tabs{display:flex;gap:4px;margin:18px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linea)}
.fi-tabs button{flex:none;min-height:48px;padding:0 10px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;
font:600 0.875rem var(--f);color:var(--tinta-2);cursor:pointer}
.fi-tabs button[aria-selected=true]{color:var(--tinta);border-bottom-color:var(--tinta)}
.fi-pan{padding-top:16px;outline:none}
.fi-etq{list-style:none;padding:0!important;display:flex!important;flex-wrap:wrap;gap:8px!important}
.fi-etq li{padding:6px 12px;border-radius:var(--r-boton);background:var(--suave);color:var(--tinta);font-size:0.8125rem;font-weight:600}
.fi-tabla{width:100%;border-collapse:collapse;font-size:0.875rem;color:inherit}
.fi-tabla th,.fi-tabla td{padding:11px 0;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.fi-tabla th{width:36%;padding-right:12px;font-weight:500;color:var(--tinta-2)}
.fi-tabla td{color:var(--tinta);min-width:0}
.fi-guarda{margin-top:6px;padding:16px;border-radius:18px;background:var(--suave)}
.fi-guarda h3{margin:0 0 6px!important;font-size:0.9375rem}
.fi-guarda dl div{padding:10px 0;border-top:1px solid rgba(28,58,19,.1)}
.fi-guarda dl div:first-child{border-top:0}
.fi-guarda dt{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2)}
.fi-guarda dd{margin:2px 0 0;color:var(--tinta)}
.fi-rel{margin-top:28px}
.fi-rel h2{font-size:1.1875rem;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.fi-aviso{margin:28px 0 8px;padding:4px 0 4px 14px;border-left:3px solid var(--tinta);font-size:0.8125rem;color:var(--tinta-2)}
.fi-aviso b{display:block;margin-bottom:4px;font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.fi-pan[hidden]{display:none}
.pg-listo .pg-linea{gap:12px;font-size:0.875rem}.pg-listo .pg-linea dt{color:var(--tinta);text-align:left}.pg-listo .pg-linea dd{font-weight:500;white-space:nowrap}
.pg-listo .pg-linea+.pg-tot{margin-top:4px;padding-top:8px;border-top:1px solid var(--linea)}
/* Sigue tu pedido (#/track): linea de tiempo Recibido -> Pagado -> Enviado -> Entregado */
.cab-ico{display:flex;align-items:center;gap:2px}.cab-ico .lupa{margin-right:0}.cab-ico .lupa:last-child{margin-right:-10px}
.pg-listo .pg-a{width:100%;justify-content:center;min-height:50px}
.tr-form{margin-top:18px}
#tr-res{margin-top:20px}
.tr-res{display:grid;gap:4px;padding:16px;border:1px solid var(--linea);border-radius:18px;animation:pg-sube 500ms var(--ease-out) both}
.tr-cancel{margin-top:10px;padding:12px 14px;border-radius:14px;background:#fdeceb;color:#8f1d14;font-size:0.875rem}
.tr-pasos{list-style:none;padding:0;margin-top:14px;display:grid}
.tr-pasos li{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:56px;color:#9aa295}
/* una sola entrada para toda la linea y sin 'both': si la animacion no corre (pestana de fondo,
captura, volver de otra vista) los pasos igual se ven; con delay por paso quedaban en blanco */
.tr-pasos{animation:pg-funde 300ms var(--ease-out)}
.tr-pasos li:last-child{min-height:0}
/* la raya que une un paso con el siguiente; en verde oscuro si ese paso ya paso */
.tr-pasos li:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;border-radius:2px;background:var(--linea)}
.tr-pasos li.hecho::before{background:var(--tinta)}
.tr-pasos i{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid #d9dcd4;background:#fff;display:grid;place-items:center}
.tr-pasos .hecho i{border-color:var(--tinta);background:var(--tinta);color:#fff}
.tr-pasos .ahora i{border-color:var(--tinta);background:var(--lima);box-shadow:0 0 0 5px rgba(211,250,153,.45)}
.tr-pasos span{display:grid;gap:1px;padding-top:3px}
.tr-pasos b{font-size:0.9375rem;font-weight:600}
.tr-pasos .hecho,.tr-pasos .ahora{color:var(--tinta)}
.tr-pasos .ahora b{font-weight:700}
.tr-pasos small{font-size:0.78125rem;color:var(--tinta-2)}
@media (prefers-reduced-motion:reduce){.tr-res{animation-name:pg-funde}}
/* ─────────── Paleta del sitio (escogida por Kelvin 2026-09-27: blanco,
grafito y verde oscuro, letra del sistema, esquinas rectas). Va despues
de :root a proposito: pisa los colores viejos sin tocar cada regla. ── */
:root{
--fondo:#fff; --tinta:#14171a; --tinta-2:#6b7280; --linea:#e4e6e9;
--suave:#f3f4f6; --negro:#14171a; --lima:#dfe4e0;
--f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
--serif:var(--f);
--r-tarjeta:10px; --r-boton:8px;
}
:root .l6{
--gris:#6b7280; --filete:#e4e6e9; --verde:#16352a; --palido:#eef1ef;
--salvia-p:#f1f3f4; --salvia-d:#16352a; --serif:var(--f);
}
:root .hk{--a:#16352a;border-radius:12px}
:root .l6 .coa{color:#16352a}
:root .l6 .add,
:root .mtabs button[aria-pressed=true]{background:#14171a;border-color:#14171a}
:root .seg{background:#f1f3f4;border-radius:8px;padding:2px}
:root .seg button{border-radius:6px}
:root .seg button[aria-pressed=true],
:root .h6k .zing b,
:root .pormg td b,
:root .pie .legal{color:#14171a}
:root .barra a{color:#9ca3af}
:root .campo{border-radius:8px;border-color:#d7dade}
:root .tr-pasos i{border-color:#9aa3ad} /* pendiente: 3:1 sobre blanco */
:root .card{border-radius:10px}
:root .hk figure{background:linear-gradient(180deg,#fff,#f1f3f4)}
:root .l6 .add,
:root .l6 .coa,
:root .dz,
:root .btn{border-radius:8px}
:root .l6 .save,
:root .rebaja{border-radius:4px}
/* suizo: nada de cursivas ni serif, titulo apretado y en mayuscula de peso */
:root .h6k h1{font-weight:600;letter-spacing:-.035em;font-size:2.125rem}
:root .h6k h1 em{font-style:normal;color:#16352a}
:root .hk h3,
:root .l6 section h2,
:root .h1,
:root .fi-n{letter-spacing:-.03em;font-weight:600}
/* barreras y confirmacion con las mismas esquinas rectas de la paleta nueva */
:root .pcaja{border-radius:14px}
:root .pcaja h2 em{font-style:normal;color:#cdd8cd}
/* "Notificame": dosis que todavia no hay. Misma forma del boton de agregar pero sin
relleno, para que no se lea como comprar (Kelvin 2026-09-27). */
:root .l6 .add.av{background:none;border:1px solid var(--tinta);color:var(--tinta);text-decoration:none}
.btn-lima.av{justify-content:center;background:none;border:1px solid var(--tinta);color:var(--tinta)}
/* Garantia de 30 dias: banda propia justo antes de las preguntas, porque ahi es
donde el cliente esta buscando el motivo para no comprar (Kelvin 2026-09-27). */
.gar{padding:30px 18px;margin-top:40px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.gar-t{margin:0 0 6px;font-size:1.3125rem;line-height:1.25;letter-spacing:-.02em;font-weight:600}
.gar-s{margin:0;color:var(--gris)}
/* El regalo de $25 vence: las horas que faltan van donde se decide, no en un aviso aparte. */
.cf-vence,.pvence{color:var(--gris);font-size:0.8125rem}
.cf-vence{margin:8px 0 0;text-align:right}
/* Resenas de clientes (Kelvin 2026-09-27): van despues del catalogo y antes de la
garantia, cuando ya vio precios y esta decidiendo. Tira horizontal: seis tarjetas
apiladas empujarian la garantia y las preguntas fuera de la pantalla. */
.res{padding-top:34px}
.res h2{margin-bottom:12px}
.res-l{list-style:none;display:flex;gap:12px;margin:0 -20px;padding:2px 20px 6px;overflow-x:auto;
scroll-snap-type:x mandatory;scrollbar-width:none}
.res-l::-webkit-scrollbar{display:none}
.res-l li{flex:0 0 80%;scroll-snap-align:start;border:1px solid var(--linea);border-radius:10px;padding:16px}
.res-l p{margin:0 0 10px;font-size:0.90625rem;line-height:1.45}
.res-l cite{font-style:normal;font-weight:600;font-size:0.8125rem;color:var(--gris)}
/* La pestana donde esta el cliente tiene que verse: el gris de la paleta pisaba
el aria-current de arriba, asi que se repite aqui, al final. */
:root .barra a[aria-current=page]{color:var(--tinta)}
/* Blanco de dedo de 44px. Donde la pastilla tiene que quedarse chica (el sello de
COA sobre la foto, el enlace del informe) el area crece invisible con ::after. */
:root .dz,:root .seg button{min-height:44px}
:root .card .coa::after,:root .l6 .coa::after{content:"";position:absolute;inset:-9px}
:root .l6 .coa{position:relative}
:root .l6 .coa::after{inset:-16px}
/* El boton Comprar del hero cabe completo arriba de la barra (Kelvin 2026-09-27),
tambien en pantallas bajas y con la Retatrutida, que lleva una fila mas de dosis.
La foto no se recorta: se achica y queda centrada. --fuera es todo lo que va
arriba y abajo de la foto; en pantalla baja se quita el remate y sobra mas. */
:root .hk{--fuera:calc(280px + 16rem)}
:root .hk figure{width:min(100%,max(6rem,calc(100svh - var(--fuera))));margin-inline:auto}
/* La altura se mide en em, no en px: asi el mismo recorte que salva a un telefono
bajito entra tambien cuando el usuario sube el tamano de letra (con letra de 20px
la pantalla mide 42em, no 52em). Es lo que deja que el boton Comprar siga cabiendo
arriba de la barra sin achicar la foto en un telefono normal. */
@media (max-height:47.5em){
:root .hk{--fuera:calc(210px + 18.5rem)}
:root .h6k .zing{display:none}
:root .h6k{padding-bottom:12px}
}
/* En pantalla angosta Y baja (320x568) la linea de arriba ocupa dos renglones y
el boton Comprar se metia debajo de la barra. La foto ya esta en su minimo, asi
que lo que se aprieta es el aire de esa linea, no la foto. */
@media (max-height:47.5em) and (max-width:22.5em){
:root .h6k .eyebrow{display:block;line-height:1.15}
:root .h6k{padding-bottom:8px}
:root .h6k .seg{margin-bottom:2px}
}
/* Sello de COA al lado del nombre, nunca encima de la foto (Kelvin 2026-09-27). */
:root .card .coa,:root .kb .coa,:root .tj-d .coa{position:relative;display:inline-flex;align-items:center;gap:4px;
min-height:28px;padding:0;border:0;border-radius:0;background:none;font:700 0.6875rem/1 var(--f);letter-spacing:.04em;
color:#16352a;white-space:nowrap}
:root .card .coa::before,:root .kb .coa::before,:root .tj-d .coa::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
:root .kb .coa::after{content:"";position:absolute;inset:-12px}
:root .card h3,:root .kb h3{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
:root .card h3 a{color:inherit;text-decoration:none}
:root .tj-d .coa{min-height:0;vertical-align:baseline}
/* Escoger tamano desde el + de la tienda: cada fila dice mg y precio. */
.dl{overflow-y:auto;padding:4px 12px calc(14px + var(--seguro))}
.dl-f{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 8px;border:0;
border-bottom:1px solid var(--linea);background:none;color:inherit;text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.dl-f:last-child{border-bottom:0}
.dl-d{flex:0 0 4.375rem;font-size:1rem;font-weight:700}
.dl-p{flex:1;font-size:0.9375rem;font-weight:600}
.dl-p small{display:block;font-size:0.75rem;font-weight:400;color:var(--gris,#5f646d)}
.dl-b{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:8px;
background:var(--tinta);color:#fff;font-size:0.8125rem;font-weight:600}
/* Al agregar: se ve la foto de lo que entro y el total (Kelvin 2026-09-27). */
.agrego{position:fixed;left:12px;right:12px;bottom:calc(var(--barra) + var(--seguro) + 12px);z-index:30;
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--tinta);color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.22);opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
transition:opacity .22s var(--ease-out),transform .28s var(--ease-out)}
.agrego.ver{opacity:1;transform:none}
.ag-f{flex:0 0 42px;height:42px;border-radius:8px;overflow:hidden;background:#fff;display:block}
.ag-f img{width:100%;height:100%;object-fit:cover;display:block}
.ag-n{flex:1;min-width:0}
.ag-n b{display:block;font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-n small{font-size:0.75rem;opacity:.75}
.ag-t{flex:none;text-align:right}
.ag-t small{display:block;font-size:0.6875rem;opacity:.75}
.ag-t b{font-size:1rem}
.globo.salta{animation:salta .5s var(--ease-out)}
@keyframes salta{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.agrego{transition:opacity .01s}
.agrego.ver{transform:none}
.globo.salta{animation:none}
}
/* Por que nosotros: estandares, examenes y los laboratorios (Kelvin 2026-09-27). */
.pq{padding-top:48px}
.pq ul{list-style:none;display:grid;gap:10px;margin:14px 0 0;padding:0}
.pq li{padding:16px 18px;border:1px solid var(--filete,#e6e8e4);border-radius:16px}
.pq b{display:block;font-size:1rem;margin-bottom:4px}
.pq p{margin:0;font-size:0.875rem;line-height:1.5;color:var(--gris,#5f646d)}
.gar-x{margin:8px 0 0;font-size:0.84375rem;color:var(--gris,#5f646d)}
/* COA pendiente: chico y apagado, solo dentro de la ficha (Kelvin 2026-09-27). */
.fi-informe p{font-size:0.8125rem}
/* ─────────── Craft de gesto y material (apple-design, 2026-09-27) ──────────
Tres cosas: la hoja del carrito cae a la velocidad del dedo, lo que se toca se
hunde en el instante del toque (no al soltar), y las capas translucidas se
vuelven solidas cuando el telefono lo pide. Nada de esto cambia color, letra ni
esquinas: la paleta escogida sigue igual. */
:root .hoja{transition:transform var(--hoja-ms,280ms) var(--ease-out)}
:root .hoja-lista{touch-action:pan-y} /* la lista solo hace scroll vertical: no roba el arrastre */
body{-webkit-tap-highlight-color:transparent}
/* Lo que faltaba de la lista de hundirse al toque: pastillas, filas y preguntas. */
:root .dz,:root .coa,:root .dl-f,:root .faq summary,:root .famnav button,
:root .seg button,:root .fi-coa,:root .fi-link,:root .card h3 a,:root .hk .sub{
transition:transform 120ms var(--ease-out)}
:root .dz:active,:root .coa:active,:root .famnav button:active,
:root .seg button:active,:root .fi-coa:active,:root .card h3 a:active{transform:scale(.96)}
/* las filas anchas se hunden menos: a lo ancho, un .96 se ve como un brinco */
:root .dl-f:active,:root .faq summary:active,:root .fi-link:active,:root .hk .sub:active{transform:scale(.985)}
/* La tira de familias flota sobre el catalogo en vez de taparlo con un bloque blanco. */
:root .famnav{background:rgba(255,255,255,.78);
backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
@media (prefers-reduced-transparency:reduce){
:root .barra,:root .famnav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.pared{background:rgba(20,23,26,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
.bv-vidrio{background:var(--suave);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
:root{--tinta-2:#4b5158;--linea:#b9bec4}
:root .l6{--gris:#4b5158;--filete:#b9bec4}
:root .barra,:root .famnav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
:root .barra a{color:#4b5158}
:root .card{background:#fff;border:1px solid #b9bec4}
}
/* ─────────── Botones principales y texto que sigue al telefono (Kelvin
2026-09-27: "si a las tres") ──────────────────────────────────────────── */
/* Donde se compra, el boton va en tinta con letra blanca, igual que los demas:
el verde palido se leia como un boton secundario justo en el paso que importa.
"Notificame" (.av) se queda con borde y sin relleno: no es comprar. */
:root .btn-lima:not(.av),:root .pg-btn{background:var(--tinta);color:#fff}
/* Apagado no se pinta gris encima de negro (se lee como roto): queda en blanco
con borde, que es lo que dice "todavia falta algo" sin desaparecer. */
:root .pg-btn[aria-disabled=true],:root .pg-btn:disabled{
opacity:1;background:#fff;border:1px solid var(--linea);color:var(--tinta-2)}
/* --- Ficha nueva (formato americanpeptides, 2026-09-27) --- */
.fi-coal{margin-top:6px;font-size:0.8125rem;font-weight:600;color:var(--tinta)}
.fi-desc{margin-top:8px;font-size:0.9375rem;line-height:1.5;color:var(--tinta-2)}
.fi-p small{font-size:0.8125rem;font-weight:500;color:var(--tinta-2)}
.fi-sellos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;list-style:none;padding:0}
.fi-sellos li{padding:10px;border:1px solid var(--linea);border-radius:var(--r-tarjeta);
font-size:0.75rem;font-weight:600;text-align:center;color:var(--tinta)}
.fi-vol{margin-top:18px}
.fi-vol h2,.fi-gar h2,.fi-junto h2,.fi-faq h2{font-size:1rem;font-weight:700;margin-bottom:8px}
.fi-vol td:last-child{text-align:right;color:var(--tinta);font-weight:600}
.fi-sku{margin-top:12px;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.fi-gar{margin-top:18px;padding:14px;border:1px solid var(--linea);border-radius:var(--r-tarjeta);background:var(--suave)}
.fi-gar p{font-size:0.875rem;line-height:1.5}
.fi-gar ul{margin-top:10px;padding-left:18px;font-size:0.8125rem;line-height:1.7;color:var(--tinta-2)}
.fi-junto{margin-top:22px}
.fi-js{font-size:0.8125rem;color:var(--tinta-2);margin-bottom:10px}
.fi-junto ul{list-style:none;padding:0;display:grid;gap:8px}
.fi-junto label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px;
border:1px solid var(--linea);border-radius:var(--r-tarjeta);cursor:pointer}
.fi-junto input{width:20px;height:20px;flex:0 0 auto;accent-color:#16352a}
.fi-jf{width:44px;height:44px;flex:0 0 auto;display:block;overflow:hidden;border-radius:6px;background:var(--suave)}
.fi-jf img{width:100%;height:100%;object-fit:cover;display:block}
.fi-jt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fi-jt b{font-size:0.8125rem}
.fi-jt i{font-style:normal;font-size:0.75rem;color:var(--tinta-2)}
.fi-jt em{align-self:flex-start;font-style:normal;font-size:0.625rem;font-weight:700;letter-spacing:.06em;
padding:2px 8px;border-radius:999px;background:#eef2ef;color:#16352a}
.fi-jp{font-size:0.8125rem;font-weight:700;white-space:nowrap}
.fi-jtot{margin:10px 0;font-size:0.875rem;font-weight:700}
.fi-junto .btn-lima{width:100%}
.fi-faq{margin-top:22px}
.fi-faq details{border-top:1px solid var(--linea);padding:12px 0}
.fi-faq summary{min-height:24px;font-size:0.875rem;font-weight:600;cursor:pointer;list-style:none}
.fi-faq summary::-webkit-details-marker{display:none}
.fi-faq summary::after{content:'+';float:right;font-weight:400;color:var(--tinta-2)}
.fi-faq details[open] summary::after{content:'−'}
.fi-faq p{margin-top:8px;font-size:0.8125rem;line-height:1.6;color:var(--tinta-2)}
.fi-pie4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;list-style:none;padding:0}
.fi-pie4 li{padding:10px;border:1px solid var(--linea);border-radius:var(--r-tarjeta);display:flex;flex-direction:column;gap:2px}
.fi-pie4 b{font-size:0.75rem}
.fi-pie4 span{font-size:0.6875rem;color:var(--tinta-2)}
.fi-junto .btn-lima:disabled{opacity:1;background:#fff;border:1px solid var(--linea);color:var(--tinta-2)}
/* Se compra junto en verde, sin borde raro en el boton (Kelvin 2026-10-01: "si") */
.fi-junto .btn-lima:not(:disabled){border:0;font-weight:400}
.hoja-cab h2{outline:none}
/* ── Botones de comprar (Kelvin 2026-09-27: "la B") ───────────────────────────
El negro con blanco se leia agresivo. Todo lo que dice Agregar / Comprar /
Pagar vuelve al verde claro con letra verde oscura, en pastilla redonda.
Reemplaza la decision del mismo dia de ponerlos en tinta con letra blanca. */
:root .l6 .add:not(.av),
:root .btn-lima:not(.av),
:root .pg-btn,
:root .btn-pagar{background:#d3fa99;border-color:#d3fa99;color:#1c3a13;border-radius:999px}
/* Al agregar, el boton se pinta en tinta un momento: confirma sin gritar. */
:root .l6 .add.ok{background:var(--tinta);color:#fff;animation:pop-ok 420ms var(--ease-out)}
@keyframes pop-ok{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){:root .l6 .add.ok{animation:none}}
/* Kits: por que van juntos; carrito: el descuento del siguiente frasco; ficha y
pago: WhatsApp de servicio (nunca de compra) */
.kbody .kpq{margin-top:4px;font-size:0.75rem;color:var(--tinta-2)}
.fi-kpq{color:var(--tinta-2)}
.cf-i .cf-nudge{margin-top:2px;font-size:0.75rem;font-weight:600;color:var(--tinta)}
.fi-wa,.pg-wa{margin-top:12px;font-size:0.8125rem;color:var(--tinta-2)}
.pg-wa{text-align:center}
/* frase que calma debajo del boton de pagar (Kelvin 2026-09-27) */
.pg-calma{margin:8px 0 0;text-align:center;font-size:0.8125rem;color:var(--tinta-2)}
/* Rotulo de cada compuesto cuando el frasco lleva dos (Wolverine, 2026-09-27) */
.fi-pan .fi-comp{margin:18px 0 8px;font-size:0.9375rem;font-weight:650}
.fi-pan .fi-comp:first-child{margin-top:0}
/* Verifica tu frasco: el codigo impreso de cada tanda (2026-09-27) */
.vf-ok{margin-top:14px;padding:14px;border:1px solid var(--linea);border-radius:10px}
.vf-ok p{margin:0 0 6px}
.vf-q{color:var(--tinta-2)}
.vf-ok .btn{margin-top:10px}
/* ─────────── Escala de letra estilo Apple (Kelvin 2026-09-29: "aplica la
letra"). La letra ya era la del sistema; lo que se veia de caricatura era
el grosor: casi todo iba en negrita fuerte y chico. Apple usa semi-negrita,
letras mas juntas y texto normal a 17px. Va al final a proposito: pisa el
grosor de cada regla sin reescribirlas una por una. ─────────────────── */
html,body{letter-spacing:-.022em}
body{font-size:1.0625rem;line-height:1.47059}
.h1,.fi-n,.l6 section h2,.pg h2,.pg legend,.cu-sec h2,.cu-revisa h2{font-weight:600;letter-spacing:-.028em}
.h1,.fi-n,.l6 section h2{line-height:1.08}
.logo{font-weight:600;letter-spacing:-.024em}
.tj-p,.fi-p,.rebaja,.tot,.cu-estado,.pg-listo dd,.pg-listo .pg-num,
.l6 .precio,.cant output,.cf-p b{font-weight:600}
.tj-n{font-size:1rem;font-weight:500;line-height:1.3}
.tj-d,.cf-i span,.cf-p s{letter-spacing:-.016em}
.barra a{font-weight:500;letter-spacing:-.01em}
.add,.btn,.btn-pagar,.pg-btn{font-weight:600;letter-spacing:-.018em}
/* ─────────── Un solo sistema de botones (Kelvin 2026-09-29: "dale a los
botones"). Habia tres colores donde la decision del 2026-09-27 pedia uno:
verde claro en Comprar y Pagar, verde gris apagado en el + de la tienda, y
negro en la cuenta y en los secundarios. Ahora manda el trabajo, no la
pantalla: si agrega o paga va en verde claro; si no, va en blanco con
borde. Negro no queda en ningun boton. Las pestanas marcadas siguen en
tinta: ahi el negro no es un boton, es la marca de donde estas. ──────── */
:root .mas{background:#d3fa99;color:#1c3a13}
:root .btn-pagar,
:root .cu-btn:not(.btn-borde),
:root .pg-a:not(.btn-borde),
:root .pcaja:not(.poscura) .btn:not(.btn-borde){background:#d3fa99;border:0;color:#1c3a13;border-radius:999px}
:root .btn,:root .btn-borde{background:#fff;border:1px solid #d7dade;color:var(--tinta);border-radius:999px}
:root .btn-lima,:root .pg-btn{border-radius:999px}
/* el "Notificame" y la barrera de edad ya tienen su propio look: no se pisan */
:root .btn-lima.av{background:none;border:1px solid var(--tinta);color:var(--tinta)}
:root .poscura .btn{background:var(--lima);border:0;color:var(--negro)}
/* ─────────── Que todo se lea y se pueda tocar (revision 2026-09-29). Habia
texto gris tan claro que no pasa la norma de lectura (las pestanas de
abajo, el aviso legal de la ficha, los grises sobre caja gris), un verde
fuera de paleta, bordes de campo casi invisibles en el checkout, y enlaces
de 15 px de alto imposibles de atinar con el dedo. ──────────────────── */
:root .barra a{color:var(--tinta-2)}
:root .fi-invest{color:var(--tinta-2);font-size:0.8125rem}
:root .cf-regalo,:root .pg-regalo,:root .fi-coa,:root .l6 .coa{color:#16352a}
:root .l6{--verde:#16352a}
:root .fi-gar li,:root .pg-res li,:root .h6k .sub,:root .kpq,
:root .card .dosis,:root .card .permg{color:#5b6270}
:root .pg-campo input,:root .pg-campo select,:root .pg-pagos label{border-color:var(--tinta-2)}
:root .cant button:disabled{color:#9ca3af;opacity:1}
:root .lnk{display:inline-flex;align-items:center;min-height:44px}
:root .card h3 a{display:block;padding:12px 0;margin:-12px 0}
:root .fi-faq summary,:root .fi-coa,:root .kbody .add{min-height:44px}
/* la lupa no puede crecer o empuja el hero debajo de la barra: el area de
toque crece invisible, como ya se hizo con el sello del COA */
:root .l6 .cab .lupa{position:relative}
:root .l6 .cab .lupa::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* Letra "Hims callado" (2026-09-30): casi todo iba en semi-negrita y se veia
de caricatura. Texto normal en 400, titulares en 500 y mas aire entre
lineas; la letra y los colores no cambian. */
body{font:400 1.0625rem/1.5 var(--f);letter-spacing:-.012em}
h1,.h1,.h6k h1,.pcaja h2{font-weight:500;line-height:1.08;letter-spacing:-.03em}
.fi-n,.hk h3,.l6 section h2,.pg h2,.cu-sec h2{font-weight:500;line-height:1.15;letter-spacing:-.02em}
.tj-p,.fi-p,.precio,.hoja-pie .tot,.pg-listo dd{font-weight:500}
button,.btn,.add,summary,.seg button,.mtabs button,.ptabs button,.fi-link,.fi-coa{font-weight:500}
.card h3,.tj-n{line-height:1.3;font-weight:400}
.eyebrow,.plab,.fi-guarda dt{font-weight:500;letter-spacing:.06em}
b,strong,.rebaja,.cu-estado a{font-weight:500}
/* ─────────── Los botones que venden van en VERDE OSCURO, el mismo de la
pantalla de bienvenida (Kelvin 2026-09-30: "todos los call to action
buttons verdes oscuros como los de las paginas de bienvenida"). Reemplaza
el verde claro del 2026-09-29. Lo demas no cambia: secundario en blanco con
borde, y sobre fondo verde oscuro (.poscura) el boton se queda claro porque
verde sobre verde no se ve. ──────── */
:root .mas,
:root .l6 .add:not(.av),
:root .btn-lima:not(.av),
:root .pg-btn,
:root .btn-pagar,
:root .cu-btn:not(.btn-borde),
:root .pg-a:not(.btn-borde),
:root .pcaja:not(.poscura) .btn:not(.btn-borde){background:#16352a;border-color:#16352a;color:#fff}
/* al agregar, el destello va en verde claro: en tinta no se notaba contra el verde */
:root .l6 .add.ok{background:var(--lima);color:#1c3a13}
/* Catalogo con la cara de la portada (Kelvin 2026-09-30): misma cabecera, titular
mas liviano con subtitulo y buscador blanco con borde fino, como los campos. */
.shop-cab{margin:-4px -20px 6px}
:root .h1.shop-t{font-size:1.5rem;font-weight:500}
.shop-s{margin-top:2px;font-size:0.875rem;color:var(--tinta-2)}
.busca{background:#fff;border:1px solid #d6d9d3}
/* la linea de arriba de la portada cabe en un renglon en iPhone normal (antes "HOY" caia solo abajo) */
:root .h6k .eyebrow{letter-spacing:.02em;text-wrap:balance;display:block}
/* ── Pagar: hoja que sube, estilo Apple Pay (Kelvin 2026-09-30, propuesta C de
docs/superpowers/refs/checkout-refero/propuestas.html). La foto del producto
oscurecida detras; Entrega y Forma de pago suben encima. La barra y la cabecera
se esconden (visibility: tampoco se tabulan) mientras la hoja esta arriba. ── */
html:has(.ck){overflow:hidden}
body:has(.ck) .barra,body:has(.ck) #top{visibility:hidden}
.ck{position:fixed;inset:0;z-index:30}
.ck-fondo{position:absolute;inset:0;background:#f4f5f0 center top/100% auto no-repeat}
.ck-fondo::after{content:"";position:absolute;inset:0;background:rgba(20,23,26,.42)}
.ck-main,.ck-sub{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;
padding:8px 18px calc(30px + var(--seguro));overflow:auto;overscroll-behavior:contain}
.ck-main{max-height:calc(100% - 58px);animation:ck-sube 420ms var(--ease-out) both}
.ck-sub{top:58px;z-index:2;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 300ms var(--ease-out)}
.ck-sub.abierta{transform:none}
.ck-sub[hidden],.ck-velo[hidden]{display:none}
.ck-velo{position:absolute;inset:0;z-index:1;background:rgba(20,23,26,.42);opacity:0;transition:opacity 300ms var(--ease-out)}
.ck-velo.ver{opacity:1}
@keyframes ck-sube{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.ck-main{animation:none}.ck-sub,.ck-velo{transition:none}}
.ck .asa{position:static;display:block;margin:0 auto 6px;background:#d4d6d2}
.ck-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:44px;margin-bottom:2px}
:root .ck-nav h1,:root .ck-nav h2{font-size:1.0625rem;font-weight:500;line-height:1.3;letter-spacing:-.015em;text-align:center}
.ck-x{position:relative;width:44px;height:44px;padding:0;border:0;background:none;color:var(--tinta);display:grid;place-items:center;cursor:pointer}
.ck-x.gris::before{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:#f6f7f5}
.ck-x svg{position:relative}
.ck-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ck-x.gris .ck-i{width:15px;height:15px}
.ck-seguro{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.78125rem;color:var(--tinta-2);margin-bottom:12px}
.ck-seguro .ck-i{width:13px;height:13px}
.ck-pedido{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.ck-pedido li{display:flex;align-items:center;gap:12px}
.ck-f{flex:none;width:56px;height:56px;border-radius:10px;background:#f4f5f0;overflow:hidden}
.ck-f img{display:block;width:100%;height:100%;object-fit:cover}
.ck-n{flex:1;min-width:0;font-size:1rem;line-height:1.3}
.ck-n small{display:block;font-size:.8125rem;color:var(--tinta-2)}
.ck-n small .pg-regalo{font-weight:400}
.ck-p{font-size:1rem;font-variant-numeric:tabular-nums}
.ck-pedido.varios{gap:8px}
.ck-pedido.varios .ck-f{width:40px;height:40px;border-radius:8px}
.ck-pedido.varios .ck-n,.ck-pedido.varios .ck-p{font-size:.9375rem}
.ck-pedido .ck-r25{justify-content:space-between;font-size:.875rem;font-weight:400}
.ck-fila{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0;border:0;border-top:1px solid var(--linea);
background:none;font:400 1rem var(--f);color:var(--tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ck-fila.ck-tot{border-bottom:1px solid var(--linea);cursor:default}
.ck-fila .k{flex:none;width:74px;font-size:.875rem;color:var(--tinta-2)}
.ck-fila .v{flex:1;min-width:0;font-size:.9375rem;line-height:1.35}
.ck-fila .v small{display:block;font-size:.8125rem;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* total a la derecha con su linea gris chica debajo, como el patron de oro */
.ck-tot .v{text-align:right}.ck-tot b{font-size:1.0625rem;font-weight:500;font-variant-numeric:tabular-nums}.ck-tot .v small{white-space:normal}
.ck-falta{color:var(--tinta-2)}
.ck-chev{color:#a3a8ae}
.ck-pv{display:flex;align-items:center;gap:8px}
.ck-fila:focus-visible,.ck-op:has(:focus-visible){outline:2px solid var(--tinta);outline-offset:-2px}
.ck-gar{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.8125rem;color:#16352a}
.ck-gar .ck-i{width:15px;height:15px}
.ck .pg-casilla{gap:10px;margin:2px 0 6px;line-height:1.4;color:var(--tinta)}
.ck input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;
border:1.5px solid var(--tinta);border-radius:5px;background:#fff;display:grid;place-items:center;cursor:pointer}
.ck input[type=checkbox]:checked{background:#16352a;border-color:#16352a}
.ck input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.ck input[type=checkbox]:focus-visible,.ck input[type=radio]:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.ck .pg-error{margin-bottom:10px}
:root .ck .pg-btn{min-height:52px;font-size:1.0625rem;font-weight:500;letter-spacing:-.015em}
.ck .pg-wa{margin-top:4px}
.ck .pg-wa .lnk{display:inline-flex;align-items:center;min-height:44px}
/* hoja Entrega */
/* campo gris claro redondeado (patron de oro); el borde fino se queda porque los campos
tienen que verse (decision 2026-09-30) */
.ck-campo{display:block;margin-bottom:8px;padding:7px 14px 8px;border:1px solid #d3d6d9;border-radius:14px;background:#f3f4f2;cursor:text}
.ck-campo small{display:block;font-size:.71875rem;line-height:1.3;color:var(--tinta-2)}
/* 1rem y no menos: con letra de 15px el iPhone hace zoom al tocar el campo */
.ck-campo input,.ck-campo select{display:block;width:100%;margin:0;padding:0;border:0;background:none;outline:none;
font:400 1rem/1.35 var(--f);color:var(--tinta);-webkit-appearance:none;appearance:none}
.ck-campo select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;padding-right:18px}
.ck-campo:focus-within{background:#fff;border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.ck-campo:has([aria-invalid=true]){border-color:#b3261e;box-shadow:inset 0 0 0 1px #b3261e}
.ck-campo:has([aria-invalid=true]) small{color:#b3261e}
.ck-dos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-dos .ck-campo{margin-bottom:0}
.ck-sub .ck-nav+.ck-campo{margin-top:8px}
.ck-sub .pg-casilla{margin-top:8px}
.ck .ck-nr{margin:-2px 0 10px}
.ck-guardado{margin:0}
.ck-guardado .lnk{min-height:44px}
.ck-pie{margin-top:auto;padding-top:16px}
/* hoja Forma de pago: la marcada se abre con su "que sigue" */
/* filas con divisor fino, sin caja: la marcada solo se nota por su radio */
.ck-grupo{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ck-op{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ck-abre+.ck-op{border-top:1px solid var(--linea)}
.ck-op .nom{flex:1;font-size:.96875rem}
.ck input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:50%;border:1.5px solid #b9bdc3;background:#fff;cursor:pointer}
.ck input[type=radio]:checked{border:6px solid #16352a}
.ck-abre{display:none;padding:0 2px 14px 34px;font-size:.8125rem;line-height:1.45;color:var(--tinta-2)}
.ck-op:has(:checked)+.ck-abre{display:block}
.ck-abre .ck-logos{justify-content:flex-start;margin-bottom:8px}
/* logos: todos del mismo alto, en cajita blanca con borde fino */
.ck-logos{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.ck-lg{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 6px;border:1px solid #e1e3df;border-radius:6px;background:#fff;
font:700 .6875rem/1 var(--f);letter-spacing:-.02em;white-space:nowrap;color:var(--c)}
.ck-lg em{font-style:normal;font-weight:500;opacity:.85}
.ck-li{width:13px;height:13px;background:var(--c);-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.ck-logos.solo .ck-lg{width:30px;justify-content:center;gap:0;font-size:0}
.ck-logos.solo .ck-li{width:15px;height:15px}
.ck-op .ck-logos,.ck-pv .ck-logos{flex:none;flex-wrap:nowrap}
/* logos oficiales a color: cajitas del mismo alto, el logo centrado y del mismo peso (--h lo pone pago.js) */
.ck-im{--s:20px;height:26px;justify-content:center;min-width:40px;padding:0 6px}
.ck-im img{display:block;height:calc(var(--h)*var(--s));width:auto;max-width:58px;object-fit:contain}
.ck-abre .ck-logos{gap:6px}
.ck-abre .ck-im{--s:28px;height:36px;width:68px;padding:0}
.ck-apagada{cursor:default;opacity:.45;filter:grayscale(1)}
.ck-op .nom small{display:block;font-size:.78125rem;line-height:1.3;color:var(--tinta-2)}
/* ══════════ Patron oro (Kelvin 2026-09-30: "Me encanto toda la propuesta").
docs/superpowers/refs/patron-oro/propuesta.html. Escala de letra del patron
(texto 15, grises 11-12, nombre de tarjeta 14.5, titulo de ficha 23, precio 18):
la de 17 se veia grande en el iPhone Air. Todo en rem y la base en el BODY,
asi el tamano de letra del telefono sigue mandando. ══════════ */
body{font-size:.9375rem;line-height:1.45}
table{color:inherit;font-size:inherit}
:root{--gris2:#9aa09a;--verde-o:#16352a}
.chev{width:1rem;height:1rem;flex:none;color:var(--gris2);transition:transform .2s var(--ease-out)}
/* pestanas mas livianas: la marcada con rayita, el globo en verde */
:root .barra a{color:#7d837d;font-size:.6875rem;font-weight:400}
:root .barra a[aria-current=page]{color:var(--tinta)}
.barra a[aria-current=page]::after{content:"";position:absolute;bottom:7px;width:16px;height:2px;border-radius:2px;background:currentColor}
.barra svg{width:23px;height:23px;stroke-width:1.6}
:root .globo{background:var(--verde-o);font-size:.65625rem}
/* cabecera: botones redondos finos (camion y lupa) */
:root .l6 .cab{padding:14px 20px 4px}
:root .l6 .cab .logo{font-size:1.3125rem;font-weight:500;letter-spacing:-.02em}
:root .cab-ico{gap:8px}
:root .cab .lupa,:root .cab-ico .lupa:last-child{width:2.625rem;height:2.625rem;margin:0;border:1px solid var(--linea);border-radius:50%;color:var(--tinta)}
:root .l6 .cab .lupa::after{inset:-1px;height:auto;transform:none}
/* portada */
.p-intro{padding:10px 20px 0}
:root .p-intro .eyebrow{display:block;font-size:.65625rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root .l6 .p-intro h1{font-size:1.5rem;font-weight:500;letter-spacing:-.025em;line-height:1.15;margin-top:4px}
.p-intro p{color:var(--gris);font-size:.875rem;margin-top:3px}
.carr,.fila,.galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carr::-webkit-scrollbar,.fila::-webkit-scrollbar,.galeria::-webkit-scrollbar{display:none}
.carr{gap:10px;padding:16px 20px 4px;scroll-padding:0 20px}
.hc{flex:0 0 min(36rem,90vw);/* tarjeta verde al 90 % del ancho en el celular (Kelvin 2026-10-01: "que ocupen un 90% del espacio"); la computadora la pisa en escritorio.css */height:15rem;scroll-snap-align:start;border-radius:22px;position:relative;overflow:hidden;padding:18px}
:root .hc.osc{background:var(--verde-o);color:#fff}
:root .hc.cla{background:var(--verde-o);color:#fff} /* todas las tarjetas del hero en verde, tambien en el celular (Kelvin 2026-10-01: "Si, en el celular tambien. Solo esa parte") */
.hc-e{display:block;font-size:.75rem;opacity:.75}
:root .l6 .hc h2{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:4px 0 0;max-width:55%}
.hc p{font-size:.8125rem;line-height:1.35;opacity:.8;margin-top:8px;max-width:50%}
:root .l6 .hc img{position:absolute;right:14px;bottom:14px;width:46%;height:auto;aspect-ratio:1;border-radius:16px;object-fit:cover}
.hc .pill{position:absolute;left:18px;bottom:18px;font-size:.8125rem;border-radius:999px;padding:6px 12px;display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.hc.osc .pill{background:#fff;color:var(--verde-o)}
.hc.cla .pill{background:#fff;color:var(--verde-o)}
.pill s{opacity:.6;font-size:.75rem}
.puntos{display:flex;gap:5px;justify-content:center;margin-top:10px}
.puntos i{width:5px;height:5px;border-radius:3px;background:#d3d6d0;transition:width .25s var(--ease-out),background .25s}
.puntos i.on{width:16px;background:var(--tinta)}
.tit{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 0}
:root .l6 .tit h2{font-size:1rem;font-weight:500;letter-spacing:-.01em;margin:0}
.tit a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;color:var(--gris)}
:root .l6 .chips{margin:0;padding:4px 20px 2px}
:root .l6 .chip{min-height:2.25rem;padding:0 16px;border:1px solid #dfe1dc;font-size:.875rem;font-weight:400;position:relative;color:var(--tinta);background:#fff}
:root .l6 .chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.l6 .chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.fila{gap:12px;padding:8px 20px 4px;scroll-padding:0 20px}
.pc{flex:0 0 9.875rem;min-width:0;/* sin esto un nombre largo (Wolverine) estira la tarjeta y toda la fila */scroll-snap-align:start;border:1px solid var(--linea);border-radius:18px;padding:8px 8px 10px;display:flex;flex-direction:column;background:#fff}
.pc-a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.pc-f{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--suave);overflow:hidden}
:root .pc-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc .pc-fam{font-size:.75rem;color:var(--gris);margin-top:9px}
.pc .nom{font-size:.90625rem;font-weight:500;line-height:1.25;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .lg{font-size:.75rem;color:var(--gris);margin-top:3px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pc-pie{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
:root .pc .precio{background:var(--suave);border-radius:999px;padding:5px 10px;font-size:.8125rem;font-weight:400;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .precio s{color:var(--gris2);margin-left:3px;font-size:.75rem}
:root .pc .mas{position:relative;flex:none;width:34px;height:34px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:var(--verde-o);color:#fff;display:grid;place-items:center}
:root .pc .mas.av{background:#fff;border:1px solid #cfd2cc;color:var(--tinta)}
.pc .mas svg{width:16px;height:16px}
/* el + se ve de 34 pero se toca de 44 */
.pc .mas::after{content:"";position:absolute;inset:-5px}
/* sello COA de linea gris: punto verde chico, sin borde */
:root .pc .coa{font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--verde-o)}
:root .pc .coa::before{width:5px;height:5px}
.confianza{list-style:none;padding:0 20px;margin:22px 0 0}
.confianza li{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--linea)}
.confianza li:last-child{border-bottom:1px solid var(--linea)}
.confianza svg{width:20px;height:20px;color:var(--verde-o);flex:none}
.confianza div{display:grid;gap:1px}
.confianza b{font-weight:500;font-size:.9375rem;line-height:1.3}
.confianza span{font-size:.8125rem;color:var(--gris)}
.l6 .sec{display:flex;align-items:center;justify-content:center;margin:22px 20px 0;min-height:48px;border:1px solid #d9dcd6;border-radius:999px;text-align:center;font-size:.9375rem;padding:0 16px}
/* pantallas bajas o letra grande: la tarjeta se achica para que la pastilla quede arriba de la barra */
@media (max-height:40em){.p-intro p{display:none}.hc{height:13rem}.carr{padding-top:12px}}
/* ficha */
#vista:has(.fo){padding-top:0}
.fo{margin:0 calc(-1 * var(--gutter))}
.fo-cab{position:absolute;left:0;right:0;z-index:4;display:flex;justify-content:space-between;padding:12px 16px;pointer-events:none}
.redondo{position:relative;width:2.625rem;height:2.625rem;padding:0;border-radius:50%;border:1px solid var(--linea);background:rgba(255,255,255,.92);color:var(--tinta);display:grid;place-items:center;cursor:pointer;pointer-events:auto}
.redondo::after{content:"";position:absolute;inset:-2px}
.redondo .globo{top:-4px;left:auto;right:-6px}
.galeria>*{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/.92;overflow:hidden}
:root .galeria .fi-f{border-radius:0;aspect-ratio:1/.92}
.lamina{background:var(--suave);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;gap:8px}
.lamina .big{font-size:2.5rem;font-weight:300;letter-spacing:-.03em;color:var(--verde-o)}
.lamina b{font-weight:500;font-size:1.0625rem}
.lamina span{color:var(--gris,#5f646d);font-size:.875rem;max-width:20rem}
.lamina>svg{width:28px;height:28px;color:var(--verde-o)}
.lamina .labs{display:flex;gap:22px;align-items:center;margin-top:8px}
.lamina .labs img{height:34px;width:auto;mix-blend-mode:multiply}
.fo-c{padding:4px 20px 0;color:#16181a}
.f-marca{font-size:.8125rem;color:var(--tinta-2);margin-top:8px}
.f-nom{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:2px}
:root .f-nom .fi-n{font-size:1.4375rem;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0}
:root .f-nom .fi-p{font-size:1.125rem;font-weight:400;letter-spacing:-.01em;margin:0;white-space:nowrap}
:root .f-nom .fi-p s{font-size:.875rem;font-weight:400}
.f-coa{font-size:.8125rem;color:var(--tinta-2);margin-top:4px;display:flex;align-items:center;gap:6px}
:root .f-coa .coa{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--verde-o);border:1px solid #cfd8d3;border-radius:999px;padding:1px 6px}
.tams{display:flex;gap:7px;margin-top:18px}
.tam{position:relative;flex:1;min-width:0;height:2.5rem;padding:0 4px;white-space:nowrap;border-radius:999px;border:1px solid #dfe1dc;background:#fff;font:400 .875rem var(--f);color:var(--tinta);cursor:pointer}
.tam::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.tam[aria-pressed=true]{border-color:var(--tinta);box-shadow:inset 0 0 0 .5px var(--tinta)}
.tam.no{color:#9ca3a0;border-color:#eceee9}
.tam.no[aria-pressed=true]{color:var(--tinta-2);border-color:var(--gris2);box-shadow:none}
.permg{font-size:.78125rem;color:var(--tinta-2);margin-top:8px}
/* descripcion corta: dos lineas; el texto completo esta en "Que es" */
:root .fo-c .fi-desc{font-size:.90625rem;line-height:1.5;color:#4a4f4a;margin-top:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root .fo-c .fi-desc+.fi-desc{display:none}
:root .fo-c .fi-sellos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
:root .fo-c .fi-sellos li{padding:4px 10px;border:0;border-radius:999px;background:var(--suave);font-size:.75rem;font-weight:400;color:var(--tinta)}
.filas{margin-top:18px;border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.filas>*+*{border-top:1px solid var(--linea)}
:root .filas summary,.filas .fl{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:0 14px;font-size:.9375rem;font-weight:400;cursor:pointer}
:root .filas summary::after{content:none}
.filas summary::-webkit-details-marker{display:none}
.filas details[open]>summary .chev{transform:rotate(90deg)}
:root .filas .in{padding:2px 14px 16px;margin:0;font-size:.875rem;line-height:1.5;color:#4a4f4a}
.filas .in p+p{margin-top:8px}
.filas .in ul{padding-left:18px}
.filas .in li{margin:5px 0}
.filas .in h3,.filas .in h4{font-size:.8125rem;font-weight:500;margin:12px 0 4px;color:var(--tinta)}
:root .filas .fi-etq{margin:0 0 10px;gap:6px!important}
:root .filas .fi-etq li{margin:0;padding:4px 10px;font-size:.78125rem;font-weight:400}
:root .filas .fi-tabla{font-size:.84375rem}
:root .filas .fi-tabla th{font-weight:400}
:root .filas .fi-tabla th,:root .filas .fi-tabla td{padding:8px 0;border-bottom:0;border-top:1px solid var(--linea)}
:root .filas .fi-tabla tr:first-child>*{border-top:0}
:root .filas .fi-tabla th{padding-right:10px}
:root .filas .fi-guarda{margin:0;padding:0;background:none}
:root .filas .fi-guarda dt{font-size:.6875rem}
.fl{cursor:default}
.fl .der{font-size:.8125rem;color:var(--tinta-2);text-align:right}
:root .fl .fi-link{min-height:44px;padding:0;border:0;background:none;font:400 .8125rem var(--f);color:var(--verde-o);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:root .fl .fi-pureza{font-weight:400}
.fi-gar ul{padding-left:18px;margin-top:8px}
:root .fo-c .fi-junto{margin-top:22px}
:root .fo-c .fi-junto h2,:root .fo-c .fi-faq h2,:root .fo-c .fi-rel h2,:root .fo-c .fi-incluye h2{font-size:1rem;font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
:root .fo-c .fi-faq{margin-top:24px}
:root .fo-c .fi-faq .filas{margin-top:0}
:root .fo-c .fi-faq details{border-top:0;padding:0}
:root .fo-c .fi-faq .filas>*+*{border-top:1px solid var(--linea)}
:root .fo-c .fi-faq summary{font-weight:400;font-size:.875rem;line-height:1.35;padding:10px 14px}
:root .fo-c .fi-faq .in p{margin:0;font-size:.84375rem}
:root .fo-c .fi-rel{margin:24px -20px 0}
:root .fo-c .fi-rel h2{padding:0 20px}
:root .fo-c .fi-wa{margin-top:18px}
:root .fo-c .fi-aviso{margin-top:18px;font-size:.78125rem}
:root .fo-c .fi-invest{font-size:.75rem;margin:12px 0 8px;color:var(--tinta-2)}
:root .fo-c .fi-incluye li{font-size:.875rem}
:root .fo-c .fi-incluye li b{font-weight:500}
/* barra fija: el empujon en dolares arriba, cantidad en pastilla gris y Agregar grande */
#vista:has(.fo){padding-bottom:calc(var(--gutter) + 6.5rem)}
:root .fi-compra{flex-direction:column;gap:0;padding:0 16px 12px;background:#fff}
:root .fi-compra .fi-nudge{display:block;margin:0;padding:7px 0 0;background:none;border-radius:0;text-align:center;font-size:.78125rem;font-weight:400;color:var(--verde-o)}
:root .fi-compra .fi-nudge:empty{display:none}
.fi-bar{display:flex;gap:10px;padding-top:10px}
:root .fi-compra .cant{flex:none;height:3.25rem;border:0;border-radius:999px;background:var(--suave)}
:root .fi-compra .cant button{width:44px;height:3.25rem;font-weight:400;font-size:1.25rem}
:root .fi-compra .cant output{font-weight:400;font-size:1rem}
:root .fi-compra .fi-add{min-height:3.25rem;font-size:1rem;font-weight:400;border-radius:999px}
/* el sello de la tarjeta mide 11px de alto: el area invisible lo lleva a 44 */
:root .pc .coa::after{inset:-17px -6px}
/* Ronda 2 patron oro: las secciones viejas de la portada (kits, como funciona, catalogo,
por que, garantia, preguntas, cierre) a la misma escala que "Mas vendidos": titulo 16px
en 500 y eyebrow chico. Antes eran titulares de 28px en 600 y pesaban mas que el hero. */
:root .l6 section>.eyebrow,:root .l6 section>.wrap>.eyebrow,:root .l6 .fam .fhead .eyebrow{font-size:.65625rem;font-weight:400;letter-spacing:.05em}
:root .l6 section>h2,:root .l6 section>.wrap>h2,:root .l6 .fam .fhead h2,:root .l6 .gar-t{font-size:1rem;font-weight:500;letter-spacing:-.01em;line-height:1.5;margin:4px 0 14px}
:root .l6 .gar-t{margin:0 0 4px}
:root .l6 .klist h3{font-size:1rem;font-weight:500}
:root .l6 .pie .logo{font-weight:500}
/* y nada en esas secciones pasa de 500 (regla del patron oro); precios al tamano de la ficha */
:root .l6 :is(#kits,.pasos,.pq,.gar,.faq,.cierre,.cat,.pie) :is(.regalo,.precio,.pct,.add,h3,th,td,b,strong,span,button,.coa,.dz){font-weight:500}
:root .l6 :is(#kits,.cat) .precio{font-size:1.125rem}
/* Critico 2026-09-30, aprobado por Kelvin ("aplicalos todos") */
:root .dl-b{background:#16352a;color:#fff;border-radius:999px;font-weight:500}
:root .fam .eyebrow{color:#16352a}
:root .fam .dz{color:#16352a;border-color:#d7dade}
:root .fam .dz[aria-pressed=true]{background:#16352a;border-color:#16352a;color:#fff}
:root .famnav button{color:#16352a}
:root .tj-d{min-height:2.9em}
:root .fam .grid>:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:42% 1fr;column-gap:14px;align-content:start}
:root .fam .grid>:last-child:nth-child(odd)>:first-child{grid-row:1/span 9}
:root .cf-i .cf-nudge{font-weight:400;color:#16352a}
:root .fi-aviso,:root .fo-c .fi-aviso{border-left:0;padding-left:0;font-size:.75rem;margin:16px 0 0}
/* Tu cuenta en verde, no en negro (Kelvin 2026-09-30: "cambia los botones de negro a verde") */
:root .cu-btn{text-decoration:none}
:root :has(>.cu-yo)>.h1,:root .cu-sec h2{color:#16352a}
:root .cu-sec .btn-borde.cu-btn{background:#16352a;border-color:#16352a;color:#fff;border-radius:999px}
:root .cu-yo .chip,:root .cu-idiomas .chip{border-radius:999px;border-color:color-mix(in srgb,#16352a 35%,#fff);color:#16352a}
:root .cu-idiomas .chip[aria-pressed=true]{background:#16352a;border-color:#16352a;color:#fff}
:root .cu-estado[data-estado=enviado],:root .cu-estado[data-estado=entregado]{background:#16352a}
/* Critica 10 (Kelvin 2026-10-01: "Aplicalos todos"); el texto cortado de la ficha no va ("3 no") */
/* 1 barra de familias: solida, sin texto fantasma */
:root .famnav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #e4e6e3}
/* 2 cierre: titulo centrado de verdad y boton sin anillo */
:root .l6 .cierre>.wrap>h2{margin-left:auto;margin-right:auto}
:root .cierre .btn-lima{border:0;box-shadow:none}
/* 3 pie: legal en peso normal, link de WhatsApp que parezca link */
:root .pie .legal{font-weight:400}
:root .pie .lnk{color:#16352a;text-decoration:underline;text-underline-offset:3px}
/* 5 carrito: mismo stepper en pastilla gris que la ficha */
:root .cf .cant{border:0;border-radius:999px;background:#f3f4f2;height:44px;margin-top:6px}
:root .cf .cant button{width:44px;height:44px;font-weight:400;font-size:1.125rem}
:root .cf .cant output{font-weight:400;font-size:.9375rem}
/* ===== Critica 11 (2026-10-01). Todo con prefijo :root y al FINAL de app.css ===== */
/* FIX 1: Catalogo: el Agregar de las tarjetas no era pastilla (8px) y media 38px.
Regla fija: todo boton que vende es pastilla verde y todo lo tocable >= 44px.
Tambien "Ver analisis" de la ficha de kit (8px) pasa a pastilla como el resto. */
:root .tj .mas{border-radius:999px;min-height:44px}
:root .fi-coa{border-radius:999px}
/* FIX 3: "Como funciona" y "Por que nosotros": de 7 cajas con borde a renglones
finos, como la lista de confianza de arriba y el patron de oro. */
:root .pasos ol,:root .pq ul{gap:0;margin-top:4px}
:root .pasos li,:root .pq li{padding:14px 0;border:0;border-top:1px solid var(--linea);border-radius:0}
:root .pasos li:last-child,:root .pq li:last-child{border-bottom:1px solid var(--linea)}
:root .pasos li>span{width:30px;height:30px;background:var(--suave);color:var(--tinta)}
/* FIX 4: Kits de la portada: fuera la losa gris; tarjeta blanca con borde fino
como las familias (opcion A) y la foto sobre gris claro, igual que las demas. */
:root .kit{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:10px 12px 10px 10px}
:root .kit figure{background:var(--suave);border-radius:12px}
/* FIX 5: Campos de "Sigue tu pedido" y "Tu cuenta" iguales a los del checkout
(gris claro redondeado, rotulo chico adentro). Antes: caja blanca con rotulo
en negrita arriba, otra familia de formulario. */
:root .pg-campo{gap:0;padding:7px 14px 8px;border:1px solid #d3d6d9;border-radius:14px;background:#f3f4f2;
font-size:.71875rem;font-weight:400;line-height:1.3;color:var(--tinta-2);cursor:text}
:root .pg-campo input,:root .pg-campo select{min-height:0;padding:0;border:0;border-radius:0;background:none;line-height:1.35;outline:none}
:root .pg-campo input:focus,:root .pg-campo select:focus{outline:none}
:root .pg-campo:focus-within{background:#fff;border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
:root .pg-campo.cu-cod input{padding-top:2px}
/* FIX 6: "Se compra junto" (ficha): la casilla es la misma que en el checkout
(cuadrada redondeada, verde al marcar), no la del sistema.
En ingles la provincia dice 'Select one' porque 'Choose your province' salia cortado. */
:root .fi-junto input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin:0;
border:1.5px solid var(--tinta);border-radius:5px;background:#fff;display:grid;place-items:center;cursor:pointer}
:root .fi-junto input[type=checkbox]:checked{background:#16352a;border-color:#16352a}
:root .fi-junto input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
:root .fi-junto input[type=checkbox]:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
/* EXTRA cosmetico (no cuenta en el top 6): tabla "Mas mg, menos por mg" con
columnas fijas y la ultima celda en un renglon. */
:root .pormg table{table-layout:fixed}
:root .pormg th{width:28%}
:root .pormg .m{white-space:nowrap;font-variant-numeric:tabular-nums}
:root .pormg td{vertical-align:top}
/* ===== Critica 12 (2026-10-01). Todo con prefijo :root, pegar al FINAL de app.css ===== */
/* FIX 1: Forma de pago: al abrir la hoja, la fila de SINPE sale con un cuadro negro
grueso alrededor. Es el anillo de foco: pago.js enfoca el radio marcado por codigo
y el iPhone lo pinta (mismo origen que el cuadro naranja de la X del carrito que
Kelvin pidio quitar). El punto verde del radio ya dice cual esta marcada; el anillo
de fila sobra. El anillo del radio se queda para quien navega con teclado.
JS (pago.js, abrirSub, linea 186): no enfocar el radio al abrir "forma"; enfocar el
titulo de la hoja, como se hizo con la X del carrito:
(s.querySelector('[aria-invalid=true]')||(id==='forma'?s.querySelector('h2'):s.querySelector('input'))).focus({preventScroll:true});
y en el markup de #ck-forma (pago.js linea 97-98) el h2#ck-forma-t lleva tabindex="-1". */
:root .ck-op:has(:focus-visible){outline:0}
:root .ck input[type=radio]:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* el titulo recibe el foco sin pintarse (mismo trato que .hoja-cab h2 en la linea 787) */
:root .ck-sub h2{outline:none}
/* FIX 2: "Pedido recibido": el circulo del check sale GRIS (usa --lima, que la paleta
final pinto gris-verde) y se lee como apagado, no como exito. En Cuenta la pastilla
"Pagado" tiene el mismo gris. Exito = verde de la marca: circulo verde oscuro con
palomita blanca y "Pagado" en verde suave con letra verde oscuro. */
:root .pg-check{background:#16352a;color:#fff}
:root .pg-check::after{border-color:#16352a}
:root .cu-estado[data-estado=pagado]{background:#e6efe9;color:#16352a}
/* FIX 3: Pestanas de abajo: el gris #7d837d del bloque "patron oro" (linea 1041) pisa
el arreglo de contraste del 2026-09-29 y queda en 3.88:1 con letra de 11 px (minimo
AA 4.5:1). Vuelve al gris de la paleta: 4.83:1. La marcada sigue en tinta. */
:root .barra a{color:#6b7280}
:root .barra a[aria-current=page]{color:var(--tinta)}
/* FIX 4: "Tu cuenta", "Sigue tu pedido" y "Pedido recibido" van a 28 px (.h1 de la
primera epoca) mientras la portada y el Catalogo bajaron a 24 px con el patron oro.
Misma escala en toda la app; el "Carrito" de la hoja ya estaba en 24. */
:root .h1{font-size:1.5rem;font-weight:500;letter-spacing:-.025em}
/* FIX 5: Carrito, aviso "Producto quitado": el boton Deshacer sale con el cuadro
naranja del foco (pintarDeshacer lo enfoca por codigo, igual que pasaba con la X).
JS (vistas.js linea 777): quitar `$('#deshacer-b').focus({preventScroll:true})`;
el aviso ya tiene role="status", el lector lo anuncia solo.
CSS: Deshacer como pastilla clara sobre la banda oscura, para que se vea tocable
sin depender del foco, y sin anillo cuando el foco llega por codigo. */
:root .deshacer button{border-radius:999px;background:#fff;color:var(--tinta);min-height:44px;padding:0 16px;margin:0;font-weight:500}
:root .deshacer button:focus:not(:focus-visible){outline:0}
:root .deshacer button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* FIX 6: Cuenta, tarjeta del pedido: lleva a su detalle (carril 19). Flecha fina a la
derecha, como los renglones de la ficha, para que no parezca una tarjeta muerta. */
:root .cu-pedido{position:relative;padding-right:40px}
:root .cu-pedido::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;
border:solid #9aa09a;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
/* ===== Critica 13 (2026-10-01). Todo con prefijo :root, pegar al FINAL de app.css ===== */
/* FIX 1: Entrega: al tocar "Listo" con datos vacios, los seis campos se ponen rojos y
NADA dice que paso. El unico texto de error (#pg-error) vive en la hoja principal,
que queda tapada e inerte debajo. reportValidity() no pinta burbuja en el iPhone.
Resultado: el cliente ve rojo y no sabe que hacer. Va una linea de error DENTRO de
la hoja Entrega, arriba del primer campo, con el mismo estilo de #pg-error.
JS (pago.js linea 87, justo despues de ${nav('ck-entrega-t',...)}):
JS (pago.js linea 128), reemplazar por:
if(b.closest('#ck-entrega')){if(!entregaLista(true)){$('#ck-e-err').textContent=t(malDato(f)||'falta_campo');return}$('#ck-e-err').textContent='';avisoError('')}
(f = $('#pg'), ya existe en ese alcance; malDato y falta_campo/mal_correo/mal_telefono ya existen). */
:root #ck-e-err{margin:0 0 10px;font-weight:500}
:root #ck-e-err:empty{display:none}
/* FIX 2: Lista de tamanos (+ de la portada) y hoja del informe: la X sale con el cuadro
naranja del foco al abrir, el mismo que Kelvin pidio quitar en el carrito. Causa:
vistas.js enfoca el boton [data-x] por codigo (lineas 136 y 405). Mismo arreglo que
la hoja del carrito: el foco va al titulo, que no se pinta.
JS (vistas.js linea 136 y linea 405), reemplazar
m.querySelector('[data-x]').focus({preventScroll:true});
por
{const h=m.querySelector('h2');h.tabIndex=-1;h.focus({preventScroll:true})}
La X sigue mostrando su anillo solo con teclado (focus-visible). */
:root .mcab h2{outline:none}
:root .mcab .ico:focus:not(:focus-visible){outline:0}
/* FIX 3: La ficha se contradice sola. En Retatrutida 10 mg (y en toda dosis sin informe
propio: Reta 15/30/48/60, Tirza 5/10/15/20...) la linea bajo el nombre dice
"Analizado en laboratorio · COA disponible", pero dos dedos mas abajo la fila
"Informe de laboratorio" solo muestra "+99.5 % de pureza" y no abre nada. Quien busque
el COA que le prometieron no lo encuentra, y eso le pega justo a la confianza que
vende la app. Causa: vistas.js linea 638 decide con `rs` (el producto tiene algun
informe, de cualquier dosis) mientras la fila del informe decide con
`coaDosis(p.name,p.dose)` (esta dosis). Kelvin ya decidio (2026-09-26) que sin analisis
de SU dosis se dice "+99.5 %", no se presta el informe de otra dosis.
No es CSS: es un cambio de JS + una clave de texto.
i18n.js linea 13, despues de fi_coa_ok, agregar:
fi_coa_dosis:'Analizado en laboratorio · +99.5 % de pureza',
i18n.js linea 162 (rama en), despues de fi_coa_ok, agregar:
fi_coa_dosis:'Lab tested · +99.5 % purity',
vistas.js linea 638, reemplazar
:`${rs?`${selloCoa(p.name)} ${esc(t('fi_coa_ok'))}`:esc(t('informe_solicitud'))}
`}
por
:`${coaDosis(p.name,p.dose)?`${selloCoa(p.name)} ${esc(t('fi_coa_ok'))}`:rs?`${selloCoa(p.name)} ${esc(t('fi_coa_dosis'))}`:esc(t('informe_solicitud'))}
`}
Asi la linea de arriba y la fila de abajo dicen lo mismo. El sello COA se queda
(marca de confianza, decision 2026-09-27). La regla CSS de abajo solo evita que la
linea mas larga parta el sello del texto en pantallas de 390. */
:root .f-coa{flex-wrap:wrap;row-gap:2px}
/* FIX 4: Ficha: entre "Como guardarlo" e "Informe de laboratorio" queda un hueco blanco
de 18 px dentro de la misma tarjeta, sin raya, como si faltara un renglon. Es el
margin-top:18px de .fi-informe (linea 490), de cuando esa fila vivia suelta; ahora
esta dentro de .filas, que ya separa con rayas. Ni la flecha ni el texto cambian. */
:root .filas .fi-informe{margin-top:0;border-top:0;border-bottom:0}
/* FIX 5: Entrega: el campo Nombre abre con un marco negro grueso (borde tinta + sombra
interior de 1 px = 2 px negros) sobre la caja gris. Misma familia del cuadro negro de
SINPE y el naranja de la X. El patron oro usa campos gris claro y suaves: el campo
activo pasa a fondo blanco con borde fino del verde de la marca y su rotulo en verde;
se sigue viendo cual esta activo sin golpear. El rojo de error no cambia. */
:root .ck-campo:focus-within{box-shadow:none;border-color:#16352a}
:root .ck-campo:focus-within small{color:#16352a}
:root .ck-campo:has([aria-invalid=true]):focus-within{border-color:#b3261e;box-shadow:inset 0 0 0 1px #b3261e}
:root .ck-campo:has([aria-invalid=true]):focus-within small{color:#b3261e}
/* FIX 6: Carrito vacio: el boton dice "Ir a la tienda", pero la pestana se llama
"Catalogo" (Kelvin 2026-09-30) y "tienda" ya no existe en ningun lado. El cliente
busca una "tienda" que no esta. Solo texto, en i18n.js:
linea 123: ir_tienda:'Ver el catálogo',
linea 272: ir_tienda:'See the catalog',
CSS: el boton se ve igual; solo se asegura que no quede pegado al texto. */
:root .hoja-vacia{gap:18px}
/* ===== Critica 14 (2026-10-01). Todo con prefijo :root, pegar al FINAL de app.css =====
Veredicto: lo que queda es chico. Un solo punto falla una regla ya decidida (toque de 44 px);
el resto es cosmetico. Nada confunde al cliente ni contradice una decision de Kelvin. */
/* FIX 1 (ROMPE la regla de 44 px, 2026-09-27 y 2026-09-30): en la ficha, dentro de
"Datos del compuesto" y "Estudios", los enlaces "(cita 1)" miden 7x17 px y el de
"PubChem · CID ..." 16 px de alto. Son lo unico que queda en toda la app por debajo
de 44 px: con el dedo se atina una de cada tres veces y el enlace al estudio es
justo la prueba que vende la app. Igual que el resto de enlaces chicos, el area
crece por dentro (padding + margen negativo), sin mover el texto ni cambiar la letra. */
:root .filas .in a,:root .fi-tabla a{display:inline-block;padding:14px 8px;margin:-14px -8px;position:relative;z-index:1}
/* FIX 2 (COSMETICO): ficha y tarjetas del kit. La descripcion dice
"Tirzepatida 30 mg + Cagrilintida 10 mg + Tesamorelina 10 / mg": el "mg" cae solo al
renglon de abajo (se ve en 420, 390 y 320, en es y en en). Y en "Que incluye" la fila de
Cagrilintida muestra "+99.5 % de pureza" en texto suelto donde las otras dos llevan la
pastilla "Ver analisis": se lee como fila a medias.
JS (datos.js linea 93), reemplazar
:p.category==='kit'?p.partes.map(x=>nombre(x)+' '+x.dose).join(' + ')
por
:p.category==='kit'?p.partes.map(x=>nombre(x)+' '+x.dose.replace(' ',' ')).join(' + ')
(espacio duro entre numero y unidad: "10 mg" nunca se parte). La pastilla gris de abajo
solo alinea la fila sin informe con las otras; no es boton, no promete nada. */
:root .fi-incluye .fi-pureza{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:var(--suave);font:500 .8125rem/1 var(--f);color:var(--tinta-2)}
/* FIX 3 (COSMETICO, solo Android): Entrega, al tocar "Listo" con campos vacios, salen DOS
avisos a la vez: la linea roja de la critica 13 ("Completa tus datos de entrega.") y
encima el globo del navegador ("Completa este campo") tapando el campo Telefono. En
iPhone el globo no sale; en Android si. Un solo aviso basta: se quita reportValidity()
y se deja el foco en el primer campo malo (ya se pinta rojo). No lleva CSS.
JS (pago.js linea 179), reemplazar
if(malos[0]){malos[0].focus({preventScroll:false});malos[0].reportValidity()}
por
if(malos[0])malos[0].focus({preventScroll:false}) */
/* FIX 4 (COSMETICO, accesibilidad): los rotulos de los campos (Nombre, Telefono, Correo...
en Entrega y en Sigue tu pedido) van en gris #6b7280 a 11.5 px sobre la caja gris
#f3f4f2: contraste 4.38, justo debajo del minimo AA (4.5). Un gris apenas mas oscuro
(#5f6672, contraste 5.2) y nadie nota el cambio salvo quien no lo leia. El verde del
campo activo y el rojo de error no cambian. No es color de marca: es el gris de apoyo. */
:root .ck-campo small{color:#5f6672}
/* FIX 5 (COSMETICO, solo pantallas de 320 px): en Entrega, la provincia dice "Elige tu
prov" porque "Elige tu provincia" no cabe en media fila; el rotulo de arriba ya dice
"Provincia", asi que la frase repite. En ingles ya dice "Select one" (Kelvin 2026-10-01).
Solo texto, en i18n.js linea 137:
elige_provincia:'Elige una',
Sin CSS. */
/* ===== Critica 15 (2026-10-01, cierre). Todo con prefijo :root, pegar al FINAL de app.css =====
Veredicto: 3 arreglos. Uno rompe la regla de contraste AA, uno confunde al cliente en el
paso de pagar, uno es cosmetico de 320 px. Nada contradice una decision de Kelvin. */
/* FIX 1 (ROMPE REGLA: contraste AA, decision 2026-09-30 "que todo se lea"): el gris de apoyo
--tinta-2 / --gris (#6b7280) cae bajo 4.5 cada vez que va sobre superficie gris clara:
- portada y carrito: remate del hero "Cada frasco con su analisis. Si no cumple..."
sobre #f1f3f4 = 4.34 (15.5 px, es la frase de la garantia, la que vende)
- ficha de kit: pastilla "+99.5 % de pureza" sobre --suave = 4.39 (13 px)
- Sigue tu pedido: rotulos "Numero de pedido" / "Correo" sobre #f3f4f2 = 4.38 (11.5 px;
la critica 14 solo cubrio .ck-campo small, estos campos usan .pg-campo)
Mismo gris que ya se aprobo en la critica 14 (#5f6672): sobre blanco pasa de 4.8 a 5.7 y
sobre las cajas grises a 5.2. Un solo cambio en la raiz cubre los tres y cualquier otro
que aparezca. Captura: c420/01-home.png, c420/07-kit.png, c420/12-track.png, contraste.log */
:root{--tinta-2:#5f6672}:root .l6{--gris:#5f6672}
/* FIX 2 (CONFUNDE): Pago, casilla marcada, Entrega vacia, tocar "Confirmar pedido": se abre
la hoja Entrega con los seis campos en rojo y NINGUN texto. El aviso se escribe en
#pg-error, que vive en la hoja de abajo, tapada. La linea de error de la hoja Entrega
(#ck-e-err, critica 13) solo se llena cuando se toca "Listo"; por este camino queda vacia.
El cliente ve rojo y no sabe que paso (misma falla que la critica 13 arreglo por el otro
camino). Captura: c420/09j-confirmar-sin-entrega.png
JS (pago.js linea 144), reemplazar
if(!entregaLista(false)){avisoError(t(malDato(f)||'falta_campo'));abrirSub('entrega');return entregaLista(true)} // abre Entrega y marca el campo
por
if(!entregaLista(false)){const m=t(malDato(f)||'falta_campo');avisoError(m);abrirSub('entrega');$('#ck-e-err').textContent=m;return entregaLista(true)} // abre Entrega, marca el campo y dice que falta
Sin CSS. */
/* FIX 3 (COSMETICO, solo 320 px): la linea de arriba de la portada se corta en
"PEPTIDOS DE INVESTIGACION · COSTA RICA · T..." (nowrap + ellipsis). Se pierde justo
"TE LLEGA HOY". En 390 y 420 cabe. En 320 el hero tiene aire de sobra (el boton
"Desde $110" queda a 200 px de la barra), asi que dejarla partir en dos renglones no
empuja nada. Captura: c320/01-home.png (antes) y c320/01-home-fix.png (despues). */
@media (max-width:340px){:root .p-intro .eyebrow{white-space:normal;overflow:visible}}
/* 2026-10-01 Kelvin: "Todo ese texto deberia estar centrado" (banda Compra aqui y pie) */
:root .l6 .cierre h2{text-align:center}
:root .pie{text-align:center;justify-items:center}
/* ===== Carril 19: detalle del pedido (#/account/pedido/N). Renglones finos como la ficha
(patron de oro): nada de cajas, el total a la derecha, botones en pastilla abajo. ===== */
.cu-det-cab{margin:4px 0 14px}
.cu-ojo{font-size:0.8125rem;color:var(--tinta-2)}
.cu-det-t{margin-top:2px}.cu-det-t .h1{font-size:1.5rem;font-variant-numeric:tabular-nums;color:#16352a}
.cu-lineas{list-style:none;padding:0;margin-top:22px;border-top:1px solid var(--linea)}
.cu-lineas li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea);font-size:0.9375rem}
.cu-lineas li{align-items:center}.cu-lineas li>span{display:grid;gap:3px;min-width:0;flex:1}
.cu-lineas li>.cu-mini{display:block;position:relative;flex:none;width:56px;height:56px;border-radius:10px;background:#f4f5f0;border:1px solid var(--linea)}
:root .cu-mini img{display:block;width:56px;height:56px;max-width:none;object-fit:cover;border-radius:10px}
.cu-mini i{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#5f6672;color:#fff;font:500 0.6875rem/20px system-ui;font-style:normal;text-align:center}
.cu-lineas small{font-size:0.8125rem;color:var(--tinta-2)}
.cu-lineas li>b,.cu-datos dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.cu-datos>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:0.875rem;color:var(--tinta-2)}
.cu-datos dd{color:var(--tinta);text-align:right}
.cu-datos .cu-tot{padding:16px 0;font-size:1rem;color:var(--tinta)}.cu-tot dd{font-weight:500}
.cu-acc{display:grid;gap:10px;margin-top:24px}
:root .cu-acc .cu-btn{border-radius:999px}
:root .cu-acc .cu-repite{background:#16352a;border-color:#16352a;color:#fff}
:root .cu-acc .cu-reembolso{background:#fff;border:1px solid #d7dade;color:var(--tinta)}
/* ===== Carril 19: Rastrear (muestra cuenta-c19/rastrear). La linea de estado pasa de grafito
a verde de la marca: lo hecho relleno, lo actual con aro suave. Mismo trato en Sigue tu pedido
y en el detalle. La frase del paso actual en #5f6672 para pasar AA. ===== */
:root .tr-pasos li.hecho::before{background:#16352a}
:root .tr-pasos .hecho i{border-color:#16352a;background:#16352a}
:root .tr-pasos .ahora i{border-color:#16352a;background:#fff;box-shadow:0 0 0 5px #e6efe9}
:root .tr-pasos .hecho b,:root .tr-pasos .ahora b{font-weight:500}
:root .tr-pasos li:not(.hecho,.ahora){color:#5f6672}
:root .tr-pasos small{color:#5f6672;font-size:0.8125rem;line-height:1.35}
.cu-donde .tr-pasos{margin-top:12px}
.tr-paq{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:12px;background:#f4f5f0}
.tr-paq>div{display:grid;gap:2px;min-width:0}
.tr-paq small{font-size:0.75rem;color:#5f6672}
.tr-paq b{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;overflow-wrap:anywhere}
.tr-copiar{flex:none;min-height:44px;min-width:84px;padding:0 16px;border:1px solid #d7dade;border-radius:999px;background:#fff;color:var(--tinta);font:inherit;font-size:0.875rem;cursor:pointer}
:root .tr-correos{display:flex;align-items:center;justify-content:center;margin-top:10px;min-height:48px;background:#16352a;border-color:#16352a;color:#fff;border-radius:999px;text-decoration:none}
/* selector Correo | Telefono: la pastilla de .seg, ya a 44 px */
:root .tr-seg{border-radius:999px;margin:2px 0 0}
:root .tr-seg button{border-radius:999px;font-weight:400}
:root .tr-seg button[aria-pressed=true]{color:#16352a}
:root .tr-pasos li.ahora:not(:last-child){padding-bottom:14px} /* la frase del mensajero ocupa dos renglones */
/* ===== Carril 19: Resumen de Cuenta (#/account con sesion). Dos cifras en cuadros grises como las
estadisticas de Shopify (rotulo chico arriba, cifra grande); lo demas en renglones finos como Artsy.
Una sola distancia (32 px) entre bloques. ===== */
#cu-res[aria-busy]{min-height:365px} /* lo que mide pintado: sin salto al llegar los pedidos */
.cu-cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.cu-cifras>div{display:grid;align-content:space-between;gap:10px;min-height:88px;padding:14px 16px;border-radius:10px;background:#f4f5f0}
.cu-cifras dt{font-size:0.8125rem;line-height:1.3;color:#5f6672}
.cu-cifras dd{font-size:1.375rem;line-height:1.1;letter-spacing:-.02em;color:#14171a;font-variant-numeric:tabular-nums}
.cu-filas{margin-top:10px}
.cu-filas>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid #e6e8e4;font-size:0.9375rem}
.cu-filas dt{color:#5f6672}
.cu-filas dd{color:#14171a;font-variant-numeric:tabular-nums}
/* Afiliado: el codigo en la caja de Rastrear, pegado a las cifras */
#af .af-cod{margin-top:10px}
#af .cu-filas+.cu-renglones{border-top:0}
:root .cu-ult{margin-top:32px;padding-top:0;border-top:0}
.cu-ult .cu-pedido{margin-top:12px}
:root .cu-pedido{border-radius:10px}
:root .cu-pedido::after{border-color:#8a929c}
/* linea de estado mini: 5 puntos unidos, lo hecho en verde lleno, lo actual con aro */
.cu-puntos{list-style:none;display:flex;margin:10px 0 2px;padding:0}
.cu-puntos li{position:relative;flex:1;height:10px}
.cu-puntos li:last-child{flex:none;width:10px}
.cu-puntos li::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1.5px solid #8a929c;background:#fff}
.cu-puntos li:not(:last-child)::after{content:"";position:absolute;left:14px;right:4px;top:4.25px;height:1.5px;background:#e6e8e4}
.cu-puntos .hecho::before{border-color:#16352a;background:#16352a}
.cu-puntos .hecho::after{background:#16352a!important}
.cu-puntos .ahora::before{border-color:#16352a;box-shadow:0 0 0 3px #cfe0d6}
.cu-memb{display:grid;gap:4px;margin-top:32px;padding:20px 18px;border:1px solid #e6e8e4;border-radius:10px}
.cu-memb-t{font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;color:#14171a}
#cu-memb-s{font-size:0.875rem;line-height:1.35;color:#5f6672}
#cu-memb-s:empty{min-height:2.7em} /* reserva dos renglones solo mientras cargan los pedidos */
:root .cu-ult .hoja-vacia{padding-bottom:0}
.cu-renglones{display:grid;margin-top:32px;border-top:1px solid #e6e8e4}
.cu-renglones a{position:relative;display:flex;align-items:center;min-height:56px;padding-right:28px;border-bottom:1px solid #e6e8e4;color:#14171a;text-decoration:none;font-size:1rem}
.cu-renglones a::after,button.dl-fila::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-5px;border:solid #8a929c;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
.cu-renglones a:focus:not(:focus-visible){outline:0}
.cu-renglones a.cu-r1{color:#16352a;font-weight:600}
.cu-buscar-s{margin-top:8px;text-align:center;font-size:.8125rem}
.cu-renglones+.cu-sec{border-top:0;margin-top:20px}
/* ===== Carril 19: Direcciones (#/account/direcciones). Refero: lista de Hims (renglones finos con
flecha), pastilla "Primary" de PayPal para la predeterminada, formulario de Hims en pagina entera
con los campos del pago. Misma tinta, verde y grises que el Resumen. ===== */
#dr-lista[aria-busy],#dr-form[aria-busy]{min-height:300px}
.dr-lista{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid #e6e8e4}
.dr-fila{position:relative;display:grid;gap:3px;min-height:56px;padding:14px 32px 14px 0;border-bottom:1px solid #e6e8e4;color:#14171a;text-decoration:none;font-size:0.9375rem}
.dr-fila::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-5px;border:solid #8a929c;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
.dr-fila:focus:not(:focus-visible){outline:0}
.dr-cab{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.dr-cab b{font-weight:500;font-size:1rem}
.dr-pre{padding:2px 9px;border-radius:999px;background:#e6efe9;color:#16352a;font-size:0.75rem;line-height:1.4}
.dr-gris{color:#5f6672;font-size:0.875rem}
.dr-senas{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
:root .dr-nueva{display:flex;align-items:center;justify-content:center;margin-top:32px;border-radius:999px;text-decoration:none}
:root .dr-nueva:not(.btn-borde),:root .dr-guardar{background:#16352a;border-color:#16352a;color:#fff}
:root .dr-nueva.btn-borde{background:#fff;border:1px solid #d7dade;color:var(--tinta)}
:root .hoja-vacia .dr-nueva{margin-top:0;width:auto;padding:0 28px}
/* Descargas: lista de archivos estilo Dropbox (miniatura, nombre, gris debajo, flecha) */
.dl-lista{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid #e6e8e4}
.dl-fila{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:0 32px 0 0;border:0;border-bottom:1px solid #e6e8e4;background:none;color:#14171a;font:inherit;text-align:left;cursor:pointer}
.dl-fila:focus:not(:focus-visible){outline:0}
.dl-fila>span:last-child{display:grid;gap:3px;min-width:0}
.dl-fila b{font-weight:500;font-size:1rem}
.dl-fila small{color:#5f6672;font-size:0.8125rem} /* a 14 px la linea de sin informe parte en dos y la fila crece */
.dl-mini{flex:none;width:56px;height:56px;border-radius:12px;background:#f4f5f0;overflow:hidden}
:root .dl-mini img{display:block;width:56px;height:56px;max-width:none;object-fit:cover}
.dl-off{cursor:default}
.dl-off .dl-mini{opacity:.8}
.dl-esq .dl-mini{background:#eceeea}
.dl-esq .dl-fila>span:last-child{gap:8px}
.dl-esq i{display:block;width:150px;height:14px;border-radius:7px;background:#eceeea}
.dl-esq i+i{width:210px;height:12px}
.dr-form{margin-top:22px}
.dr-et{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dr-et label{position:relative}
.dr-et input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dr-et span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #d7dade;border-radius:999px;background:#fff;color:#14171a;font-size:0.9375rem}
.dr-et input:checked+span{background:#16352a;border-color:#16352a;color:#fff}
.dr-et input:focus-visible+span{outline:2px solid #16352a;outline-offset:2px}
.dr-form .pg-error:empty{display:none}
.dr-form .pg-error{margin-bottom:10px}
.dr-form .ck-dos{margin-bottom:8px}
.ck-campo textarea{display:block;width:100%;margin:0;padding:0;border:0;background:none;outline:none;resize:none;font:400 1rem/1.35 var(--f);color:var(--tinta)}
.ck-campo textarea::placeholder{color:#8a929c}
.ck-campo select:disabled{opacity:.5}
.ck-campo:has(select:disabled){cursor:default}
.dr-form .pg-casilla{margin-top:4px}
.dr-form .pg-casilla input{accent-color:#16352a}
.dr-form .cu-acc{margin-top:20px}
:root .dr-form .cu-acc .btn-borde{background:#fff;border:1px solid #d7dade;color:var(--tinta)}
.dr-borrar{display:grid;justify-items:center;margin-top:6px;text-align:center}
.dr-borrar .lnk{color:#b3261e;font-size:0.9375rem}
.dr-borrar p{margin:6px 0 12px;font-size:0.9375rem}
.dr-borrar .dr-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
:root .dr-borrar .dr-si{color:#b3261e;border-color:#e3b4b0}
.ck-dir{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0}
.ck-dir .lnk{min-height:44px}
#ck-dir [hidden]{display:none}
#ck-dir-t:not(:empty)::after{content:" \00b7"}
/* Mis datos (#/account/datos): "Personal info" de Airbnb. Rotulo arriba, valor gris abajo,
Editar subrayado a la derecha; el renglon abierto lleva el mismo campo gris del pago. */
.dt-lista{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid #e6e8e4}
.dt-fila{padding:8px 0 16px;border-bottom:1px solid #e6e8e4;font-size:0.9375rem}
.dt-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:#14171a}
.dt-cab .lnk{font-size:0.875rem}
.dt-ed:disabled{color:#c2c6cb;cursor:default}
.dt-val{color:#5f6672;font-size:0.875rem;overflow-wrap:anywhere}
.dt-nota{margin-top:4px;color:#5f6672;font-size:0.875rem;line-height:1.45}
.dt-form .ck-campo{margin:6px 0 12px}
.dt-form .pg-error{margin-bottom:12px}
:root .dt-guardar{min-height:48px;padding:0 28px;border:0;border-radius:999px;background:#16352a;color:#fff;font-size:0.9375rem}
.dt-guardar:disabled{opacity:.6}
.dt-avisos{margin-top:36px}
.dt-avisos h2{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;color:#14171a}
.dt-sws{margin-top:12px;border-top:1px solid #e6e8e4}
.dt-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid #e6e8e4;color:#14171a;font-size:0.9375rem;cursor:pointer}
.dt-sw input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:999px;background:#d3d6d9;cursor:pointer;transition:background .2s}
.dt-sw input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.dt-sw input:checked{background:#16352a}
.dt-sw input:checked::after{transform:translateX(18px)}
.dt-sw input:focus-visible{outline:2px solid #16352a;outline-offset:2px}
.dt-avisos .pg-error{margin-top:12px}
@media (prefers-reduced-motion:reduce){.dt-sw input,.dt-sw input::after{transition:none}}
/* Error de Sigue tu pedido en rojo con su "!" (Kelvin 2026-10-01 "Si a las dos", via carril 18):
el gris se confundia con texto normal y el cliente no sabia que fallo */
#tr-res .cu-nada{display:flex;gap:10px;align-items:flex-start;color:#b3261e;padding:12px 14px;margin-top:12px;background:#fdf3f2;border-radius:12px;font-size:.875rem}
#tr-res .cu-nada:before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#b3261e;color:#fff;font:600 12px/18px system-ui;text-align:center;margin-top:1px}
/* ===== Carril 19: Reembolso (#/account/reembolso/). Pagina entera como Direcciones:
pedido en caja gris (como la guia de Rastrear), motivos en pastillas de 2 columnas (radios de verdad,
ocultos), notas en campo gris sin rotulo, foto con X redonda y boton verde que arranca apagado
(blanco con borde, como Pagar) hasta que hay motivo. Critica Fable 2026-10-01. ===== */
#rb[aria-busy]{min-height:300px}
#vista:has(#cu-det),#vista:has(#rb){padding-bottom:24px} /* + la barra que ya pone el body: nada pegado a las pestanas */
.rb-ped{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:12px;background:#f4f5f0}
.rb-ped>div{display:grid;gap:2px;min-width:0}
.rb-ped small{font-size:0.75rem;color:#5f6672}
.rb-ped b{font-weight:500;font-variant-numeric:tabular-nums}
.rb-s{margin-top:14px;color:#5f6672;font-size:0.9375rem;line-height:1.45}
.rb-form{margin-top:22px}
.rb-motivos{margin:0 0 16px;padding:0;border:0;min-width:0}
.rb-motivos legend{padding:0;margin-bottom:10px;font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;color:#14171a}
.rb-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rb-op{position:relative;display:block}
.rb-op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rb-op span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid #e5e7e4;border-radius:999px;background:#fff;color:#14171a;font-size:0.9375rem;text-align:center;line-height:1.2;transition:background .15s,color .15s}
.rb-op input:checked+span{background:#16352a;border-color:#16352a;color:#fff}
.rb-op input:focus-visible+span{outline:2px solid #16352a;outline-offset:2px}
.rb-motivos[aria-invalid=true] .rb-op span{border-color:#b3261e}
.rb-notas{display:block;width:100%;min-height:88px;margin:0 0 12px;padding:12px 14px;border:0;border-radius:12px;background:#f3f4f2;
font:400 0.9375rem/1.4 var(--f);color:#14171a;resize:none;outline:none}
.rb-notas::placeholder{color:#5f6672;opacity:1}
.rb-notas:focus{box-shadow:inset 0 0 0 1px #16352a}
.rb-notas[aria-invalid=true]{box-shadow:inset 0 0 0 1px #b3261e}
.rb-foto{margin-bottom:16px}
:root .rb-subir{position:relative;gap:8px;background:#fff;border:1px solid #d7dade;color:var(--tinta);cursor:pointer}
.rb-subir input,.rb-cambiar input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rb-subir:focus-within,.rb-cambiar:focus-within{outline:2px solid #16352a;outline-offset:2px}
.rb-vista{display:flex;align-items:center;gap:16px}
.rb-mini{position:relative;flex:none;width:64px;height:64px}
.rb-mini img{display:block;width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid #e6e8e4}
.rb-x{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #d7dade;border-radius:50%;background:#fff;color:#14171a;box-shadow:0 1px 3px rgba(0,0,0,.12);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rb-x::after{content:"";position:absolute;inset:-10px} /* toque de 44 px sin agrandar el circulo */
.rb-x:focus-visible{outline:2px solid #16352a;outline-offset:2px}
.rb-cambiar{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #d7dade;border-radius:999px;background:#fff;color:#14171a;font-size:0.9375rem;cursor:pointer}
.rb-form .pg-error{margin-bottom:12px;font-weight:500}
:root #rb .rb-enviar[aria-disabled=true]{background:#fff;border:1px solid var(--linea);color:var(--tinta-2)}
.rb-nota{margin-top:12px;text-align:center;color:#5f6672;font-size:0.875rem}
.rb-estado{padding:14px 0;border-top:1px solid #e6e8e4;border-bottom:1px solid #e6e8e4;font-size:0.9375rem}
#rb .rb-estado{margin-top:22px}
.cu-estado[data-rb]{font-weight:500}
:root .cu-estado[data-rb=pagado]{background:#16352a;color:#fff} /* solo el final va en verde; lo demas en el gris de siempre */
.rb-listo{display:grid;justify-items:center;gap:6px;margin-top:32px;text-align:center;outline:none}
.rb-check{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:#e6efe9;color:#16352a}
.rb-check svg{width:24px;height:24px}
.rb-listo h2{font-size:1.1875rem;font-weight:500;letter-spacing:-.02em;color:#16352a}
.rb-listo p{color:#5f6672;font-size:0.9375rem;line-height:1.45}
.rb-listo .rb-pasos{justify-self:stretch;margin-top:20px;text-align:left}
.rb-listo .cu-btn{margin-top:18px}
.rb-sec .tr-pasos{margin-top:12px}
.cu-acc>.rb-estado{margin-top:-24px;border-top:0} /* sigue a la raya de Forma de pago, sin doble linea */
/* ── Membresia (#/account/membresia), opcion B de cuenta-c19/opciones.html: una meta que se llena
hasta el precio (GrowPal) y un pago para siempre (Subo). Verde oscuro solo en lo que vende. ── */
.mb-tit{margin-top:8px;font-size:1.0625rem;color:#14171a}
.mb-tit b{color:#16352a;font-weight:600}
.mb-mod{margin-top:22px;padding:20px 18px;border:1px solid #e6e8e4;border-radius:10px}
.mb-lbl{color:#5f6672;font-size:0.875rem}
.mb-big{margin:4px 0 20px;font-size:2.5rem;font-weight:600;letter-spacing:-.045em;line-height:1.05;color:#16352a;font-variant-numeric:tabular-nums}
.mb-riel{position:relative;height:12px;border-radius:999px;background:#eceeea}
.mb-riel i{position:absolute;top:0;bottom:0}
.mb-lleno{left:0;width:var(--w);border-radius:999px;background:#16352a;animation:mb-llena 1.4s cubic-bezier(.2,.7,.2,1)}
.mb-extra{left:var(--l);right:0;border-radius:0 999px 999px 0;background:repeating-linear-gradient(-45deg,#9fb3a9 0 5px,#e3ebe6 5px 9px)}
.mb-meta{left:var(--l);top:-6px!important;bottom:-6px!important;width:2px;border-radius:2px;background:#14171a}
@keyframes mb-llena{from{width:0}}
.mb-esc{position:relative;height:38px;margin-top:8px;font-size:0.8125rem;color:#5f6672;font-variant-numeric:tabular-nums}
.mb-esc>span{position:absolute;top:0;left:0;white-space:nowrap;line-height:1.3}
.mb-esc>.d{left:auto;right:0;text-align:right}
.mb-esc>.c{left:var(--l);transform:translateX(-50%);text-align:center}
.mb-esc strong{display:block;color:#14171a;font-weight:500}
.mb-seg{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.mb-seg i{height:28px;border-radius:6px;background:#16352a}
.mb-seg i.p{background:#14171a}
.mb-brk{display:grid;gap:4px;margin-top:8px;font-size:0.8125rem;color:#5f6672}
.mb-brk>div{border-top:1px solid currentColor;padding-top:6px;text-align:center;line-height:1.3}
.mb-brk strong{display:block;font-weight:500;color:#14171a}
.mb-brk .x{color:#16352a}.mb-brk .x strong{color:#16352a;font-weight:600}
.mb-nota{margin-top:16px;color:#5f6672;font-size:0.9375rem;line-height:1.45}
:root .mb-btn{margin-top:20px;background:#16352a;border:0;color:#fff;border-radius:999px}
.mb-ben ul{display:grid;gap:12px;margin-top:14px;padding:0;list-style:none}
.mb-ben li{display:flex;gap:10px;align-items:flex-start;font-size:0.9375rem;line-height:1.4}
.mb-ben li svg{flex:none;margin-top:2px;color:#16352a}
.mb-pend p b{color:#14171a;font-weight:500}
.mb-esq i{display:block;height:14px;width:40%;border-radius:7px;background:#eceeea}
.mb-esq i:nth-child(2){height:36px;width:55%;margin:10px 0 20px}
.mb-esq i:nth-child(3){height:12px;width:100%}
#mb[aria-busy]{min-height:300px}
@media (prefers-reduced-motion:reduce){.mb-lleno{animation:none}}
/* el aviso del Resumen lleva a la membresia: renglon tocable con flecha */
a.cu-memb{position:relative;padding-right:40px;color:inherit;text-decoration:none}
a.cu-memb::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border:solid #5f6672;border-width:1.5px 1.5px 0 0;transform:translateY(-50%) rotate(45deg)}
/* la membresia en carrito y pago: sin foto de frasco, un "50%" en su lugar */
.memb-m{display:grid;place-items:center;width:100%;height:100%;color:#16352a;font-weight:600;font-size:0.9375rem;letter-spacing:-.02em}
.vial:has(.memb-m)::after{content:none}
.ck-p s{margin-right:6px;color:#5f6672;font-weight:400}
/* pago de la membresia: los campos de entrega apagados no se ven (.ck-campo y .ck-dos traen su display) */
#pg [hidden]{display:none!important}
.mb-rec{margin-top:4px;font-size:0.875rem;color:#14171a;font-weight:500}
/* critica de la membresia: meses que pagan en gris, libres en verde; caja del miembro sin hueco;
la hoja de pago de la membresia (sin foto de frasco) va completa y "Tus datos" a la medida */
.mb-seg i.p{background:#d9ddd6}
.mb-esc.corta{height:20px}
.mb-rec{margin-top:10px}
.mb-suf{font-size:1rem;font-weight:500;letter-spacing:-.01em;color:#5f6672}
.ck-memb .ck-main{top:0;max-height:none;border-radius:0}
.ck-memb #ck-entrega{top:auto}
.ck-memb #ck-entrega .ck-pie{margin-top:24px}
#ck-mp{color:#5f6672}
/* Logos de laboratorio en recuadros iguales y en gris, para que el horizontal y el apilado
pesen lo mismo a la vista (Kelvin 2026-10-01: "se ven como atravesados") */
.labs-fila{display:flex;gap:12px;margin-top:10px}
.labs-fila span{flex:0 0 auto;width:132px;height:56px;display:grid;place-items:center;border:1px solid var(--linea,#e6e8e4);border-radius:12px;background:#fff}
.labs-fila img{filter:grayscale(1) contrast(1.1);opacity:.78;mix-blend-mode:multiply;width:auto}
.labs-fila .j{height:22px}.labs-fila .f{height:38px}
.confianza .labs-fila{margin-top:8px}.confianza .labs-fila span{width:112px;height:44px}
.confianza .labs-fila .j{height:18px}.confianza .labs-fila .f{height:30px}
/* enlaces legales (carril 20): pie con los cuatro y el pago con terminos y devoluciones; el area de toque crece por dentro a 44 px */
.pie .pie-leg{display:flex;flex-wrap:wrap;column-gap:18px}
.pie .pie-leg a{display:inline-flex;align-items:center;min-height:44px;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.pg-legal{font-size:.8125rem;color:var(--gris);line-height:1.5;margin:0 0 6px}
.pg-legal a{color:var(--gris);text-decoration:underline;text-underline-offset:3px;position:relative}
.pg-legal a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
/* Carril 24: analisis por compuesto (#/analisis) y su puerta de entrada */
:root .an-ir,:root .l6 .an-ir{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:#16352a;font-weight:500;font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
:root .filas>.an-ir{border-top:0;margin:-10px 0 4px;padding:0 14px}
.an{padding-bottom:24px}
.an>.eyebrow{display:block;margin-top:10px;color:var(--verde,#16352a)}
.an .h1{margin-top:4px;font-weight:600;line-height:1.15}
.an .labs-fila{margin:16px 0 8px}
.an-g{border-top:1px solid var(--linea);padding-top:16px;margin-top:16px}
.an-cab{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.an-f{flex:none;width:52px;height:52px;border-radius:10px;background:#f4f5f0;overflow:hidden;display:grid;place-items:center}
.an-f img{width:100%;height:100%;object-fit:cover}
.an-cab h2{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:0}
.an-cab small{display:block;color:var(--gris,#5f6672);font-size:.8125rem}
.an-g ul{list-style:none;margin:0;padding:0}
.an-g li+li{border-top:1px solid var(--linea)}
.an-r{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 0;border:0;background:none;font:inherit;color:var(--tinta);text-align:left;cursor:pointer}
.an-p{flex:none;width:8px;height:8px;border-radius:50%;background:var(--verde,#16352a)}
.an-r span{flex:1;min-width:0}
.an-r b{display:block;font-weight:500;font-size:.9375rem}
.an-r small{display:block;color:var(--gris,#5f6672);font-size:.8125rem}
.an-r em{font-style:normal;color:var(--gris,#5f6672);font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-r svg{flex:none;color:#9aa0a8}
.an-nota{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);color:var(--gris,#5f6672);font-size:.8125rem}
/* ===== Carril 23: link de afiliado. Boton de compartir blanco (verde solo vende) y nota chica de 30 dias. */
:root #af .af-wa{margin-top:10px}
#af .af-nota{margin-top:12px;font-size:0.8125rem;color:#5f6672}
/* Idioma a la vista (carril 25): ES | EN en la cabecera; el actual subrayado como el menu */
.idi{display:flex;align-items:center;gap:6px;margin:0 4px 0 0;font-size:.8125rem;letter-spacing:.02em}
.idi b,.idi a{display:grid;place-items:center;min-width:28px;height:44px;font-weight:500;color:var(--tinta)}
.idi b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.idi a{font-weight:400;color:#5f6672;text-decoration:none}
.idi i{width:1px;height:12px;background:var(--linea)}
/* carril 28 (SEO): la barrera sale solo al comprar, asi que lleva X para seguir viendo la tienda */
.pcerrar{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border:0;border-radius:50%;
background:rgba(255,255,255,.9);color:var(--tinta);font:400 1.6rem/1 var(--f);display:grid;place-items:center;cursor:pointer}
.pcerrar:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
/* enlace al blog en el pie, antes de lo legal */
.pie .pie-blog a{display:inline-flex;align-items:center;min-height:44px}
/* texto escrito para robots en /, /en/, /p/, /catalogo/ (carril 28): la app lo reemplaza al pintar.
Oculto los primeros 3 s para que no parpadee antes de la app; si el JS no corre, aparece solo */
.seo{padding:24px 20px 120px;line-height:1.5;animation:seo-ve 0s 3s both}
.seo a{color:inherit}
@keyframes seo-ve{from{visibility:hidden}}
/* Carril 27: entrada a #/analisis arriba del Catalogo (sin quinta pestana abajo) */
:root .shop-an{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:8px 0 0;padding:10px 14px;border:1px solid #d6d9d3;border-radius:var(--r-boton);color:var(--tinta);text-decoration:none}
:root .shop-an b{display:block;font-weight:500;font-size:.9375rem;color:#16352a}
:root .shop-an small{display:block;font-size:.8125rem;color:#5f6672}
:root .shop-an>span:last-child{font-size:1.25rem;color:#16352a}
/* Contrasena en la pared (carril 44, muestra contrasena-c44): Ver dentro del campo, error con circulo rojo */
.pclave{position:relative}
.pclave .campo{padding-right:76px}
.pclave .pver{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 10px;font-size:0.8125rem;color:var(--tinta-2);text-decoration:none}
.pcaja .pmin{font-size:0.78125rem;color:var(--tinta-2);margin-top:-6px}
.pcaja .polv{justify-self:end;font-size:0.84375rem;color:#16352a;margin-top:-6px}
.pcaja .plink{justify-self:center;font-size:0.875rem;color:#16352a}
.pcaja .campo.mal{border-color:#b3261e}
.pcaja .rerr{display:flex;gap:8px;align-items:flex-start;color:#b3261e;font-size:0.84375rem}
.pcaja .rerr::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#b3261e;color:#fff;font:700 0.6875rem/1 var(--f);margin-top:1px}
.pcaja .rerr:empty{display:none}
.pcaja [hidden]{display:none!important}
/* aviso de $25 de la portada (carril 41): hoja chica arriba de la barra, un solo campo */
.a25{position:fixed;left:0;right:0;bottom:calc(var(--barra) + var(--seguro));z-index:40;background:#fff;border-radius:20px 20px 0 0;
box-shadow:0 -10px 30px rgba(15,20,13,.14);padding:20px var(--gutter) 18px;transform:translateY(110%);transition:transform 340ms var(--ease-out)}
.a25.ver{transform:none}
.a25 h2{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;margin:0 44px 4px 0}
.a25 p{color:var(--tinta-2);margin:0 0 12px;font-size:.9375rem}
.a25 .rerr{margin:6px 0 0}.a25 .rerr:empty{display:none}
.a25 .btn{width:100%;min-height:52px;margin-top:10px}
.a25x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;font-size:1.5rem;line-height:1;color:var(--tinta-2);cursor:pointer}
.a25ok{text-align:center}.a25ok h2{margin:6px 0 4px}
.a25v{display:grid;place-items:center;width:44px;height:44px;margin:0 auto;border-radius:50%;background:var(--verde,#16352a);color:#fff;font-size:1.25rem}
@media (prefers-reduced-motion:reduce){.a25{transition:none}}
@media (min-width:1024px){.a25{left:auto;right:24px;bottom:24px;width:380px;border-radius:20px;box-shadow:0 12px 40px rgba(15,20,13,.18)}}
/* Carril 47 (Kelvin 2026-10-04, opcion A): el logo de los correos, mas poderoso. Didact Gothic
solo con las letras del logo (1 KB, servida desde aqui); la A sin palito es una lambda. */
@font-face{font-family:'Didact Logo';src:url(didact-logo.woff2) format('woff2');font-display:swap}
:root .logo,:root .l6 .cab .logo,:root .l6 .pie .logo,:root .plogo{font-family:'Didact Logo',-apple-system,sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.42em;text-transform:uppercase}
/* en 320-374 px no cabe con la lupa al lado: baja un poco y se aprieta */
@media (max-width:374px){:root .l6 .cab .logo{font-size:.82rem;letter-spacing:.26em}}
/* .confianza div los ponia en grid (uno encima del otro); los laboratorios van lado a lado */
.confianza .labs-fila{display:flex}