/* 7.52 · Un color por necesidad, sobre fondo blanco.
   Foco = ocre (Melena) · Calma y descanso = petróleo (Reishi, Ashwagandha)
   Energía = naranja (Cordyceps) · Defensas = salvia (Cola de Pavo, Chaga…)
   Piel y mujer = lila (Tremella, Shatavari…). El azul de marca sigue siendo
   el de textos, botones de compra y pago. Solo CSS: se engancha de atributos
   que ya existen (data-hero-obj, data-objetivo, aria-label «Ver …»). */
:root{
  --c-foco:#D9A62E;--c-foco-suave:#F6E7B8;--c-foco-texto:#7A5A0F;
  --c-calma:#3E7F8C;--c-calma-suave:#D8E9EC;--c-calma-texto:#2B5D67;
  --c-energia:#E0612F;--c-energia-suave:#F9D9CB;--c-energia-texto:#A63E17;
  --c-defensas:#7F965A;--c-defensas-suave:#E3EAD3;--c-defensas-texto:#4E6234;
  --c-piel:#9B6FB0;--c-piel-suave:#EBDDF0;--c-piel-texto:#6E4685;
}

/* ¿Qué estás buscando? (botones de necesidad del inicio) */
.pt-beneficios button[data-hero-obj]{border-color:transparent!important;font-weight:700}
.pt-beneficios button[data-hero-obj="foco"]{background:var(--c-foco-suave)!important;color:var(--c-foco-texto)!important}
.pt-beneficios button[data-hero-obj="descanso"]{background:var(--c-calma-suave)!important;color:var(--c-calma-texto)!important}
.pt-beneficios button[data-hero-obj="energia"]{background:var(--c-energia-suave)!important;color:var(--c-energia-texto)!important}
.pt-beneficios button[data-hero-obj="defensas"],
.pt-beneficios button[data-hero-obj="digestion"]{background:var(--c-defensas-suave)!important;color:var(--c-defensas-texto)!important}
.pt-beneficios button[data-hero-obj="piel"],
.pt-beneficios button[data-hero-obj="femenino"]{background:var(--c-piel-suave)!important;color:var(--c-piel-texto)!important}

/* Empezá con un frasco */
.pt-frasco[data-objetivo]{border-color:transparent!important}
.pt-frasco[data-objetivo="foco"]{background:var(--c-foco-suave)!important}
.pt-frasco[data-objetivo="descanso"],.pt-frasco[data-objetivo="estres"]{background:var(--c-calma-suave)!important}
.pt-frasco[data-objetivo="energia"]{background:var(--c-energia-suave)!important}
.pt-frasco[data-objetivo] .pt-frasco-foto{background:transparent!important}
.pt-frasco[data-objetivo] .pt-frasco-obj{background:#fff;border-radius:999px;padding:4px 10px;font-weight:800}
.pt-frasco[data-objetivo="foco"] .pt-frasco-obj{color:var(--c-foco-texto)}
.pt-frasco[data-objetivo="descanso"] .pt-frasco-obj,.pt-frasco[data-objetivo="estres"] .pt-frasco-obj{color:var(--c-calma-texto)}
.pt-frasco[data-objetivo="energia"] .pt-frasco-obj{color:var(--c-energia-texto)}

/* Fondo de la foto de cada producto, según su hongo o planta */
.producto-imagen[aria-label^="Ver Melena"]{background:var(--c-foco-suave)!important}
.producto-imagen[aria-label^="Ver Reishi"],
.producto-imagen[aria-label^="Ver Ashwagandha"],
.producto-imagen[aria-label^="Ver Sueños"]{background:var(--c-calma-suave)!important}
.producto-imagen[aria-label^="Ver Cordyceps"],
.producto-imagen[aria-label^="Ver Rhodiola"],
.producto-imagen[aria-label^="Ver Schizandra"],
.producto-imagen[aria-label^="Ver Elixir"]{background:var(--c-energia-suave)!important}
.producto-imagen[aria-label^="Ver Cola de Pavo"],
.producto-imagen[aria-label^="Ver Chaga"],
.producto-imagen[aria-label^="Ver Shiitake"],
.producto-imagen[aria-label^="Ver Maitake"],
.producto-imagen[aria-label^="Ver Champiñón"],
.producto-imagen[aria-label^="Ver Mesima"],
.producto-imagen[aria-label^="Ver Gírgolas"],
.producto-imagen[aria-label^="Ver Auricularia"],
.producto-imagen[aria-label^="Ver Beta"]{background:var(--c-defensas-suave)!important}
.producto-imagen[aria-label^="Ver Tremella"],
.producto-imagen[aria-label^="Ver Shatavari"],
.producto-imagen[aria-label^="Ver Vitex"],
.producto-imagen[aria-label^="Ver Dong Quai"]{background:var(--c-piel-suave)!important}

/* 7.52b · Fondo blanco puro en todo el sitio (tienda, panel y barras). */
html,body,body.modo-panel,body:has(main.tienda-fondo){background:#fff!important}
#barra{background:rgba(255,255,255,.94)!important}
body.modo-panel .barra-movil{background:rgba(255,255,255,.96)!important}
.vt-app .tabs{background:#fff!important}

/* 7.54 · Carrito y ficha pensados para el celular. */
.como-pagas button.cp-op{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
.como-pagas button.cp-op:not(.on):hover{border-color:var(--oro)}
.como-pagas>b::after{content:" · tocá para elegir";font-weight:400;font-size:12px;color:var(--suave)}
.ficha-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ficha-acciones [data-ir-carrito]{flex:1 1 180px}
@media(max-width:600px){
  .modal-caja>header h2{font-size:24px}
  .modal-caja #modal-cuerpo{padding-top:12px}
  .carrito-linea.con-ico{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"i n t" "i c t";gap:4px 10px;padding:9px 0;align-items:center}
  .carrito-linea.con-ico>.carrito-ico{grid-area:i;align-self:start;margin-top:2px}
  .carrito-linea.con-ico .carrito-ico,.carrito-linea.con-ico .carrito-ico .ico{width:30px;height:30px}
  .carrito-linea.con-ico>div:not(.cantidad){grid-area:n;min-width:0}
  .carrito-linea.con-ico>div:not(.cantidad)>b{font-size:14.5px;line-height:1.25;display:block}
  .carrito-linea.con-ico small{font-size:12px}
  .carrito-linea.con-ico>.cantidad{grid-area:c;justify-self:start}
  .carrito-linea.con-ico>.cantidad button{width:30px;height:30px}
  .carrito-linea.con-ico>b{grid-area:t;font-size:15px;white-space:nowrap}
  .ficha-acciones .boton{padding:12px 16px}
  .ficha-acciones [data-cerrar-ficha]{flex:0 0 auto}
}

/* 7.56 · La tienda con el mismo lenguaje que /4x3: blanco, azul de marca,
   celeste neón para lo que se toca y botones de compra en azul. */
body:not(.modo-panel) .boton.oro{background:#06354d!important;color:#fff!important;border-color:#06354d!important}
body:not(.modo-panel) .boton.oro:hover{background:#0b4f72!important}
.modal-caja{background:#fff;color:#06354d}
.modal-caja>header{background:#49efed;border-bottom:0;align-items:center}
.modal-caja>header h2{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:850;letter-spacing:-.5px;color:#06354d}
.modal-caja>header small{color:#06354d;opacity:.8}
.modal-caja>header button{color:#06354d}
.carrito-total b{font-size:26px;font-weight:850}
.envio-barra-riel span{background:#06354d}
.carrito-4x3{background:var(--c-energia-suave);color:var(--c-energia-texto);border-radius:12px;padding:10px 12px;font-weight:700;display:grid;gap:8px}
.carrito-4x3 .carrito-4x3-sumar{justify-self:start;background:#06354d;color:#fff;border:0;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}
.cp-op.on,.checkout-pago-op.on{border-color:#06354d!important}

/* 7.61 · El panel del equipo vuelve a tener su menú lateral oscuro
   (el blanco era solo para la tienda). */
body.modo-panel #barra{background:linear-gradient(180deg,var(--banda-2),var(--banda))!important}

/* 7.62 · Botones de compra azules en la tienda también para el equipo
   (la regla anterior excluía a quien tiene la sesión del panel abierta). */
.tienda-fondo .boton.oro,.modal-caja .boton.oro{background:#06354d!important;color:#fff!important;border-color:#06354d!important}
.tienda-fondo .boton.oro:hover,.modal-caja .boton.oro:hover{background:#0b4f72!important}