/* Ajustes de CLS sobre cls-tokens.css (30-sep-2026). Lo que no es del paquete de Cowork vive aquí. */
/* Banner del home: las piezas de fondo son arte oscuro (pendiente de rediseño en blanco); el texto encima va claro. */
.bh-txt h2{color:#FFFFFF}
.bh-txt p{color:#E4E4E0}
.bh-nav{color:#FFFFFF;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.4)}
/* La página de asesoría usa <main class="wrap"> sin que .wrap esté definido en ninguna hoja (defecto previo): se centra aquí. */
main.wrap[style*="padding-top:clamp"]{max-width:1100px;margin:0 auto;padding-left:24px;padding-right:24px}
.quiz-q{color:#141414}

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA B (decisión de Obed, 15-oct-2026 noche · lote UX1 §0)
   Azul cono-s #2B4FD6 es el ÚNICO botón primario de Contact Lens Studio, con
   texto blanco. Ghost = borde cámara #141414 sin relleno. El ámbar #D4883A sale
   de botones, precios, franjas y chips: queda SOLO en el símbolo (los SVG del
   logo) y en ambar-texto #9A5A1C para eyebrow y enlaces chicos. El precio grande
   va en tinta cámara. Esquinas 4 px. Esta hoja carga al final del <head> de todas
   las páginas (aplicar_marca_tabo_cls.py), así que manda sobre los <style> de
   cada generador aunque alguno siga escribiendo var(--amber).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --cono-s:#2B4FD6; --cono-s-hover:#2340B5; --cono-s-velo:#EEF1FB;
  --accion:var(--cono-s); --accion-texto:#FFFFFF;
  /* Lo que los estilos viejos llaman "ámbar de botón" ahora es el azul; el ámbar
     real solo vive en los SVG del símbolo. ambar-texto se conserva para texto chico. */
  --amber:var(--cono-s); --amber-soft:#9A5A1C; --amber-light:#9A5A1C; --amber-dim:#BFBFB8;
  --amber-veil:#ECECE8; --ambar-velo:#ECECE8; --line-hi:#BFBFB8;
}
/* ── Primario: un solo color de acción ─────────────────────────────────── */
.btn-primary,.cta,.pc-add,.c-add,.c-btn,.hrx-ok,.qa-btn,.bh-cta,.fbtn.active,.rec-btn-pri,.btn-quiz-next,a.pri,
.cls-acc .cls-wa,.cls-buscar button,.hsearch button,nav .wa,.filter-btn.active,.mode.on,.quiz-dot.done,
.rx-pre-btns .cta,.fm-btns .cta,.cta.copy{
  background:var(--cono-s)!important;color:#FFFFFF!important;border:1px solid var(--cono-s)!important;border-radius:4px}
.btn-primary:hover,.cta:hover,.pc-add:hover,.c-add:hover,.c-btn:hover,.hrx-ok:hover,.qa-btn:hover,.bh-cta:hover,
.cls-acc .cls-wa:hover,.cls-buscar button:hover,.hsearch button:hover,nav .wa:hover,.cta.copy:hover{
  background:var(--cono-s-hover)!important;color:#FFFFFF!important;border-color:var(--cono-s-hover)!important}
.cta[disabled],.cta:disabled{opacity:.45}
/* "Agregado ✓" y "Copiado": estado de éxito en verde seguro, nunca ámbar */
.pc-add.ok,.c-add.ok,.copy.ok,.cta.copy.ok,.cp.done{background:#EAF3EC!important;color:#12673B!important;border-color:#12673B!important}
/* ── Ghost: borde cámara, sin relleno ──────────────────────────────────── */
.btn-ghost,.cta-alt,.cta-ghost,.ghost,.pc-add-wa,.hrx-no,.cart-link a,.rx-pre-btns .cta-alt,.fm-btns .cta-ghost,
.chip.todo,.qa-todas,.ya-te button,.acc-bar button,#cambiarPago,.rec-btn-sec{
  background:transparent!important;color:#141414!important;border:1px solid #141414!important;border-radius:4px}
.btn-ghost:hover,.cta-alt:hover,.cta-ghost:hover,.ghost:hover,.pc-add-wa:hover,.cart-link a:hover,.qa-todas:hover{
  background:#F6F6F4!important;color:#141414!important;border-color:#141414!important}
.ghost{font-size:15px;font-weight:700;padding:13px 16px}
.cart-link a:hover .cl-n{background:#141414;color:#fff}
.cart-link .cl-n{background:#141414;color:#fff}
/* ── Precio grande en tinta ────────────────────────────────────────────── */
.pc-price,.rel-precio,.ci-price,.price-main .val,.c-price,.line-price,.big-amt,.tot b,.price,.indice li b,.mod-p,.price-div .v{color:#141414!important}
/* ── Chips, franjas y avisos: papel/vítreo, nunca ámbar ni velo ámbar ───── */
.pc-tag,.tag-disp,.chip .fct,.fitem.on,.fitem.on .fct,.pc-disp,.eta,.rx-hint,.rxm-hint,.notice,.rx-req,.rx-fuera,.ms-todo,.pbtn-ic,.pbtn.pri{
  background:#ECECE8!important;color:#141414!important;border-color:#DDDDD8!important}
.pc-disp.ok,.tag-cert{background:#EAF3EC!important;color:#12673B!important}
.cls-aviso{background:#F6F6F4!important;color:#141414!important}
.cls-aviso a,.cls-aviso-x{color:#141414!important}
.cls-cart-n,.cart-count,.card.reco::before,.chip.sel .fct,.sum-o.on b{background:var(--cono-s)!important;color:#FFFFFF!important}
.sum-o.on b{background:transparent!important;color:#141414!important}
/* ── Encendido / seleccionado → cono-s ─────────────────────────────────── */
.sum-o.on,.chip.sel,.opt.sel,.sw.on,.csw.on,.thumb.on,.pbtn.pri,.fitem.on{border-color:var(--cono-s)!important}
.sum-o.on{background:var(--cono-s-velo)!important}
.csw.on{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cono-s)!important}
.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cono-s)!important}
.fm-pasos li.ok::before,.fm-pasos li.on::before,.fm-pasos li.ok::after,.dot.on,.dot.ok,.opt.sel .rad::after{background:var(--cono-s)!important;border-color:var(--cono-s)!important}
.fm-pasos li.on::before{box-shadow:0 0 0 3px var(--cono-s-velo)!important}
.rxs.on{background:var(--cono-s-velo)!important;color:#141414!important;border-color:var(--cono-s)!important}
/* Hover de tarjetas: gris, no ámbar */
.pcard:hover,.ms-item:hover,.sv-item:hover,.path:hover,.rel-item:hover,.sum-o:hover,.chip:hover,.pbtn:hover,.card:hover,.opt:hover{border-color:#BFBFB8!important}
/* Fondos con velo ámbar del home */
.hh{background:#FFFFFF!important}
/* ── Botón flotante de WhatsApp con contexto (lote UX1 §4) ───────────── */
.cls-wa-flot{position:fixed;right:16px;bottom:16px;z-index:95;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;
  background:var(--cono-s)!important;color:#FFFFFF!important;border-radius:4px;text-decoration:none;font:700 15px/1 'Hanken Grotesk',system-ui,sans-serif;box-shadow:0 6px 18px rgba(20,20,20,.18)}
.cls-wa-flot:hover{background:var(--cono-s-hover)!important}
.cls-wa-flot svg{width:22px;height:22px;flex:none}
@media(max-width:640px){.cls-wa-flot{width:52px;height:52px;padding:0;justify-content:center;border-radius:4px}.cls-wa-flot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* En la pantalla de pago el primario fijo ya lleva al 0414: el flotante se esconde para no taparlo. */
body.cls-pago .cls-wa-flot{display:none}
/* ── Cashea: SOLO su logo oficial, tal cual (nunca recolorear ni recortar) ─ */
.cashea-logo,.casea-logo,.pc-csh img,.chip-ic img,.cashea-sello img{filter:none!important}
.cashea-on,.casea-on{display:none!important}
.cashea-box{background:#F6F6F4!important;border:1px solid #DDDDD8!important}
.cashea-offer b,.casea-txt b{color:#141414!important}
/* ── Vida 1 (16-oct-2026): cajas en PNG sin fondo (R2 productos/v3) ──────
   Regla de Obed: la caja va sin fondo y se apoya con sombra-producto del DS. */
img[src*="/productos/v3/"]{filter:drop-shadow(0 8px 12px rgba(20,20,20,.12))}
/* ── Design System v14 · íconos (16-oct): trazo 1,5 px, currentColor, cuadrícula 24 ── */
.tvr-icono{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tvr-icono.s{width:16px;height:16px}.tvr-icono.l{width:32px;height:32px}
.spec-row .spec-ico,.fz-dato .tvr-icono{width:20px;height:20px;color:#141414}
/* ══ Vida 1 §3.4 y §4b (16-oct-2026): movimiento en todo lo tocable ════════════════
   Clases del Design System v14 (components/bundle.css) tal cual, y los mismos estados
   aplicados a los primarios y secundarios que el sitio ya agrupa arriba. 160 ms ease.
   Obed: "que tenga movimiento como Walmart". */
:root{--font-texto:var(--f-texto);--font-titulo:var(--f-titulo);--radio-0:4px;--radio-cls:4px;
  --sombra-1:0 1px 2px rgba(20,20,20,.06),0 6px 16px rgba(20,20,20,.08);--sombra-2:0 12px 32px rgba(20,20,20,.14)}
.tvr-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-texto);font-weight:700;font-size:15px;line-height:1.2;padding:14px 22px;border:1px solid var(--cono-s);background:var(--cono-s);color:var(--esclera);border-radius:var(--radio-0);cursor:pointer;text-decoration:none}
.tvr-btn:focus-visible{outline:3px solid var(--camara);outline-offset:2px}
.tvr-btn-2{background:var(--esclera);color:var(--camara);border-color:var(--camara)}
.tvr-sombra-1{box-shadow:var(--sombra-1)}.tvr-sombra-2{box-shadow:var(--sombra-2)}
.tvr-sombra-producto{filter:drop-shadow(0 8px 12px rgba(20,20,20,.12))}
.tvr-clicable{transition:transform .16s ease,box-shadow .16s ease}.tvr-clicable:hover,.tvr-clicable:focus-visible{transform:translateY(-2px);box-shadow:var(--sombra-1)}
.tvr-btn,.tvr-btn-2,.tvr-btn-cls{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
.tvr-btn:hover,.tvr-btn-cls:hover{background:#1E3AA6;border-color:#1E3AA6;transform:translateY(-1px);box-shadow:var(--sombra-1)}
.tvr-btn-2:hover{background:var(--camara);color:var(--esclera);border-color:var(--camara);transform:translateY(-1px)}
.tvr-btn:active,.tvr-btn-2:active,.tvr-btn-cls:active{transform:translateY(0) scale(.98);box-shadow:none}
.tvr-btn-2:focus-visible{outline:3px solid var(--camara);outline-offset:2px}
/* Primarios del sitio (cono-s) */
.btn-primary,.cta,.pc-add,.c-add,.c-btn,.hrx-ok,.qa-btn,.bh-cta,.rec-btn-pri,.btn-quiz-next,a.pri,.cls-acc .cls-wa,.cls-buscar button,.hsearch button,nav .wa,
.btn-ghost,.cta-alt,.cta-ghost,.ghost,.pc-add-wa,.hrx-no,.cart-link a,.qa-todas,.rec-btn-sec,.btn{
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
.btn-primary:hover,.cta:hover,.pc-add:hover,.c-add:hover,.c-btn:hover,.hrx-ok:hover,.qa-btn:hover,.bh-cta:hover,.rec-btn-pri:hover,.btn-quiz-next:hover,a.pri:hover,
.cls-acc .cls-wa:hover,.cls-buscar button:hover,.hsearch button:hover,nav .wa:hover{
  background:#1E3AA6!important;border-color:#1E3AA6!important;color:#FFFFFF!important;transform:translateY(-1px);box-shadow:var(--sombra-1)}
/* Secundarios del sitio (borde cámara): se rellenan de cámara */
.btn-ghost:hover,.cta-alt:hover,.cta-ghost:hover,.ghost:hover,.pc-add-wa:hover,.hrx-no:hover,.cart-link a:hover,.qa-todas:hover,.rec-btn-sec:hover{
  background:#141414!important;color:#FFFFFF!important;border-color:#141414!important;transform:translateY(-1px)}
.btn-primary:active,.cta:active,.pc-add:active,.c-add:active,.c-btn:active,.hrx-ok:active,.qa-btn:active,.bh-cta:active,.rec-btn-pri:active,.btn-quiz-next:active,a.pri:active,
.cls-acc .cls-wa:active,.cls-buscar button:active,nav .wa:active,.btn-ghost:active,.cta-alt:active,.cta-ghost:active,.ghost:active,.pc-add-wa:active,.hrx-no:active,.cart-link a:active,.qa-todas:active,.rec-btn-sec:active{
  transform:translateY(0) scale(.98);box-shadow:none}
.cta[disabled]:hover,.cta:disabled:hover,button:disabled:hover{transform:none;box-shadow:none}
/* "Agregado ✓": fondo blanco, borde y texto cono-s, 2 s (vida.js) */
.pc-add.ok,.c-add.ok,.pc-add.tvr-agregado,.c-add.tvr-agregado,.pc-add.tvr-agregado:hover,.c-add.tvr-agregado:hover{
  background:#FFFFFF!important;color:#2B4FD6!important;border:1px solid #2B4FD6!important;transform:none;box-shadow:none}
/* Pulso del contador del carrito */
@keyframes tvr-pulso{50%{transform:scale(1.35)}}
.tvr-pulso{animation:tvr-pulso .5s ease}
/* Botón flotante de WhatsApp */
.cls-wa-flot{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.cls-wa-flot:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)!important}
/* Chips de tipo y píldoras de marca */
.hh-chip,.fz-pill,.chip,.fitem,.filter-btn{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.hh-chip:hover,.fz-pill:hover,.chip:hover,.fitem:hover,.filter-btn:hover{border-color:#141414!important;background:#FFFFFF!important}
.chip.sel,.fitem.on,.filter-btn.active,.hh-chip[aria-current]{border-color:var(--cono-s)!important;box-shadow:inset 0 0 0 1px var(--cono-s)}
/* Tarjeta de producto: en reposo plana; hover sube 2 px con sombra-1 y la caja crece 1.03 */
.pcard,.card:has(.c-add),.rel-item{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;box-shadow:none}
.pcard:hover,.card:has(.c-add):hover,.rel-item:hover{transform:translateY(-2px);box-shadow:var(--sombra-1)}
.pcard .pc-media img,.card:has(.c-add) .c-img img,.rel-item img{transition:transform .16s ease}
.pcard:hover .pc-media img,.card:has(.c-add):hover .c-img img,.rel-item:hover img{transform:scale(1.03)}
/* Enlaces de texto: el subrayado aparece en hover */
.ft-col a,.sec-mas,.cls-acc a:not(.cls-wa),.indice li a,.migas a,.fz-dato,p a:not([class]){text-decoration:none}
.ft-col a:hover,.sec-mas:hover,.cls-acc a:not(.cls-wa):hover,.indice li a:hover,.migas a:hover,a.fz-dato:hover,p a:not([class]):hover{text-decoration:underline;text-underline-offset:3px}
/* Foco de teclado en todo lo tocable */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,.tvr-clicable:focus-visible{outline:3px solid #141414!important;outline-offset:2px}
/* Sin movimiento: quedan los cambios de color */
@media (prefers-reduced-motion:reduce){
  .tvr-btn:hover,.tvr-btn-2:hover,.tvr-btn-cls:hover,.tvr-btn:active,.tvr-btn-2:active,.tvr-btn-cls:active,.tvr-clicable:hover,.tvr-clicable:focus-visible,
  .btn-primary:hover,.cta:hover,.pc-add:hover,.c-add:hover,.c-btn:hover,.hrx-ok:hover,.qa-btn:hover,.bh-cta:hover,.rec-btn-pri:hover,.btn-quiz-next:hover,a.pri:hover,
  .cls-acc .cls-wa:hover,.cls-buscar button:hover,nav .wa:hover,.btn-ghost:hover,.cta-alt:hover,.cta-ghost:hover,.ghost:hover,.pc-add-wa:hover,.hrx-no:hover,.cart-link a:hover,.qa-todas:hover,.rec-btn-sec:hover,
  .btn-primary:active,.cta:active,.pc-add:active,.c-add:active,.btn-ghost:active,.ghost:active,.cls-wa-flot:hover,
  .pcard:hover,.card:has(.c-add):hover,.rel-item:hover,.pcard:hover .pc-media img,.card:has(.c-add):hover .c-img img,.rel-item:hover img{transform:none!important}
  .tvr-pulso{animation:none}
}
/* Aviso flotante "✓ Agregado" del home: con el tema claro var(--cream) es #141414 y el texto quedaba negro sobre negro. */
.htoast{background:#141414!important;color:#FFFFFF!important;box-shadow:var(--sombra-2)!important}
.htoast a{color:#FFFFFF!important}

/* ══════════════════════════════════════════════════════════════════════════
   AUDITORÍA COMPLETA DE LA TIENDA (20-oct-2026 · Obed aprobó H0-H12)
   ══════════════════════════════════════════════════════════════════════════ */
/* H0 · Siempre claro, también con el modo oscuro automático de Chrome (el <meta> va en cada página). */
:root{color-scheme:only light}
/* H6 · Los botones heredan la fuente de la página (salían en Arial). */
button,input,select,textarea{font-family:inherit}
/* H7 · Primario en cono-s con texto blanco (estos salían en ámbar): guías, examen y color. */
.lp-btn,.ex-btn,.moko-cta,.cta-cuenta{background:var(--cono-s)!important;border-color:var(--cono-s)!important;color:#FFFFFF!important}
.lp-btn:hover,.ex-btn:hover,.moko-cta:hover{background:var(--cono-s-hover)!important;border-color:var(--cono-s-hover)!important}
/* H5 · Títulos a la izquierda (sistema B) y 28-32 pt en el teléfono, en las páginas de contenido. */
header.hero,header.ex-hero,header.lp-hero{text-align:left}
header.hero p,header.ex-hero p,header.lp-hero p{margin-left:0;margin-right:0}
@media(max-width:640px){
  header.hero h1,header.ex-hero h1,header.lp-hero h1{font-size:clamp(28px,8vw,32px)!important;line-height:1.15;text-align:left}
}
/* H12 · 44 pt en lo tocable fuera de los párrafos: pie, migas, chips y enlaces sueltos de bloque.
   Relleno + margen negativo: el área crece y el diseño no se mueve. */
@media(max-width:900px){
  footer a,.footer a,.ft-col a,.migas a,.breadcrumb a,nav a,.chip,.rel-todo,.sec-mas,.cls-aviso a{display:inline-flex;align-items:center;min-height:44px}
  .cls-aviso-x{min-width:44px;min-height:44px}
  p a,li p a,td a{display:inline;min-height:0}
}
/* H12 · lo que la medición a 390×660 encontró todavía bajo 44 pt (home, categorías, color, recompra). */
@media(max-width:900px){
  .fz-pill,.pc-add,.pc-add-wa,.moko-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fz-dato,.link-alt,.otras a{display:inline-flex;align-items:center;min-height:44px}
  .ft-col a{min-width:44px}
}
@media(max-width:900px){.lp-opt{min-height:44px;display:flex;align-items:center}}