/* ===========================================================================
   MORASHOP - TEMA NOCHE (solo la home)  --  POLARIDAD INVERTIDA
   ---------------------------------------------------------------------------
   .css PLANO a proposito: Tiendanube lo sirve tal cual, sin compilar
   (mismo patron que cavutia-cris-grosz.css). Todo scopeado a
   body.template-home: ninguna otra plantilla se toca.

   SOLO VISUAL. No toca JS, ni markup, ni el contrato del carrito
   (js-addtocart / js-product-form / js-product-slide-img). Se saca borrando
   el bloque del layout que la enlaza.

   -------------------------------------------------------------------------
   LA REGLA DE ORO DE ESTE ARCHIVO: LA CARD SIEMPRE CONTRASTA CON SU FONDO
   -------------------------------------------------------------------------
       fondo NAVY  (#04122E)  ->  card CREMA  (#FBF8F0)   17.49:1
       fondo CREMA (#FBF5EC)  ->  card NAVY   (#0A1E45)   15.08:1

   La version anterior ponia card #0A1E45 sobre lienzo #04122E = 1.14:1, o sea
   la card no se distinguia del fondo y solo la salvaba un filo. Invertir la
   polaridad es lo que hace que la card FLOTE.

   -------------------------------------------------------------------------
   POR QUE CASI TODO LLEVA !important Y CADENAS LARGAS
   -------------------------------------------------------------------------
   Esta hoja carga en el <head>. Los snipplets de la home inyectan su <style>
   en el <body>, o sea DESPUES. A igual especificidad ellos ganan siempre.
   El ultimo en pintar es cavutia-home-fx.tpl, que hace:

       body{ background:var(--ms-ghost) !important }    (#F6F7F9)

   Por eso cada regla usa el prefijo body.template-home y repite la cadena del
   selector original o la supera. Si alguien "limpia" los !important o acorta
   los selectores, la home vuelve a blanco.

   LO QUE NO SE TOCA A PROPOSITO:
   - El buscador: ya esta resuelto en morashop-rediseno.scss (~6700).
   - El FONDO de las bandas de marca: sigue crema, lo pinta su snipplet.
     Lo que cambia es la CARD que va adentro.
   - prefers-reduced-motion: home-fx fuerza las animaciones ON a pedido del
     dueno (su Windows tiene reduced-motion activo). No se contradice aca.

   TODOS LOS RATIOS DE ESTE ARCHIVO ESTAN CALCULADOS CON CODIGO (WCAG 2.1),
   no estimados a ojo.
   =========================================================================== */

body.template-home{
  /* --- superficies --- */
  --cv-canvas:       #04122E;   /* lienzo */
  --cv-card:         #FBF8F0;   /* LA CARD sobre el lienzo: crema. 17.49:1 */
  --cv-card-oscura:  #0A1E45;   /* la card dentro de las bandas crema. 15.08:1 */
  --cv-tile:         #FFFFFF;   /* la foto siempre se apoya en blanco */

  /* --- tinta sobre card CREMA --- */
  --cv-tinta:        #000E35;   /* nombre y precio. 17.76:1 */
  --cv-tachado:      #5A6478;   /* 5.61:1. El #8FA0C0 viejo daba 2.49 = ilegible */
  --cv-cuotas:       #0F7A3D;   /* 5.11:1. El #3DDC84 sobre crema daba 1.52 */

  /* --- tinta sobre card OSCURA (bandas de marca) --- */
  --cv-tinta-clara:  #E6EBF5;   /* 13.68:1 */
  --cv-precio-claro: #FFFFFF;   /* 16.35:1 */
  --cv-tachado-osc:  #8FA0C0;   /* 6.19:1 */
  --cv-cuotas-claro: #3DDC84;   /* 9.16:1 */

  /* --- editorial (titulos sobre el lienzo navy) --- */
  --cv-editorial:    #F4ECDD;   /* 15.81:1 */
  --cv-beige:        #EAD8BB;

  /* --- rojo --- */
  --cv-cta:          #D92D14;   /* contra card crema 4.56:1; texto blanco 4.84:1 */
  --cv-rojo-txt:     #FF5A3D;   /* rojo cuando es TEXTO sobre navy.
                                   #E8341A como texto sobre navy da 4.36 = reprueba */

  /* --- datos --- */
  --cv-envio:        #0F7A3D;
  --cv-ambar:        #FF8A1F;
  --cv-chip-filo:    #0B1A3A;

  /* --- filos: NO hay uno solo que sirva en las dos polaridades ---
     #0B1A3A contra tile blanco 17.17 pero contra card oscura 1.05 (invisible).
     #A89778 contra card oscura 5.73 pero contra tile blanco 2.85.
     Por eso el filo del tile se declara distinto en cada clave. */
  --cv-filo-tile-claro:  rgba(11,26,58,.14);   /* tile sobre card crema */
  --cv-filo-tile-osc:    rgba(168,151,120,.45);/* tile sobre card oscura */
  --cv-filo-card:        rgba(11,26,58,.10);
  --cv-filo-canvas:      rgba(234,216,187,.10);

  --cv-sombra:       0 14px 34px -16px rgba(0,0,0,.55);
  --cv-sombra-hover: 0 22px 48px -18px rgba(0,0,0,.68);
  --cv-glow:         0 14px 34px -14px rgba(232,52,26,.45);
}

/* ====================== LIENZO ======================
   El !important es obligatorio: home-fx pinta body{background:#F6F7F9 !important}. */
body.template-home{ background:var(--cv-canvas) !important; }

/* ====================== HEADER ======================
   #1A2744 lo pone el panel (--header-background). Queda mas CLARO que el
   lienzo: el header flota sobre la pagina, no al reves. Solo los links. */
body.template-home header.js-head-main .nav-list-link{ color:#C7D2E6 !important; }
body.template-home header.js-head-main .nav-list-link:hover{ color:#fff !important; }

/* ====================== CINTA DE SERVICIOS ======================
   OJO: las mascaras laterales del marquee son gradientes hacia #fff. Sobre
   navy se ven como dos manchas blancas en los bordes. Hay que repintarlas
   al color de la banda o el desvanecido se invierte. */
body.template-home .cavutia-marquee{
  background:#001C4B !important;
  border-top:1px solid var(--cv-filo-canvas) !important;
  border-bottom:1px solid var(--cv-filo-canvas) !important;
}
body.template-home .cavutia-marquee::before{
  background:linear-gradient(90deg,#001C4B,rgba(0,28,75,0)) !important;
}
body.template-home .cavutia-marquee::after{
  background:linear-gradient(270deg,#001C4B,rgba(0,28,75,0)) !important;
}
body.template-home .cavutia-marq-item{ border-right-color:var(--cv-filo-canvas) !important; }
body.template-home .cavutia-marq-ico{ background:rgba(234,216,187,.10) !important; }
/* fill NO es redundante con stroke/color: los cuatro iconos de la cinta
   (truck, credit-card, returns, cash) son <path> de RELLENO puro, sin fill ni
   stroke propio, y heredan un fill #1A2744 del theme. Sobre la banda #001C4B
   eso da ~1.1:1 y los discos se ven vacios: medido en morashop.ar. */
body.template-home .cavutia-marq-ico svg,
body.template-home .cavutia-marq-ico svg path{
  fill:var(--cv-beige) !important;
}
body.template-home .cavutia-marq-ico svg{
  stroke:var(--cv-beige) !important;
  color:var(--cv-beige) !important;
}
body.template-home .cavutia-marq-tit{ color:var(--cv-beige) !important; }
body.template-home .cavutia-marq-desc{ color:#8FA0C0 !important; }

/* ====================== BANDA DEL QUIZ ======================
   Se queda OSCURA a proposito. No es una card de producto sino una banda-CTA:
   si pasara a crema competiria con las cards y la home perderia el respiro
   oscuro entre la cinta y la primera grilla. */
body.template-home .cq{
  background:#0A1E45 !important;
  border:1px solid rgba(234,216,187,.14) !important;
  box-shadow:var(--cv-sombra) !important;
}
body.template-home .cq .cq__title{ color:var(--cv-editorial) !important; }
body.template-home .cq .cq__sub{ color:#A8B6D1 !important; }
body.template-home .cq .cq__disc{ color:#8FA0C0 !important; }
body.template-home .cq .cq__disc strong{ color:#C7D2E6 !important; }
body.template-home .cq .cq__icon{
  background:rgba(232,52,26,.16) !important;
  color:var(--cv-rojo-txt) !important;
}

/* ====================== SECCIONES ======================
   Los :not() NO son decorativos. El fondo de las bandas de marca se declara
   con .section-marca-mrs-taste a secas (0,1,0), no con la cadena larga (0,3,0)
   que usan para sus cards. Sin estos :not(), esta regla (0,2,1) les gana y las
   dos bandas crema se pintan de navy: medido en morashop.ar, daban #04122E. */
body.template-home .section-featured-home:not(.section-marca-mrs-taste):not(.section-marca-natulabs),
body.template-home .section-featured-home + .section-featured-home:not(.section-marca-mrs-taste):not(.section-marca-natulabs){
  background:var(--cv-canvas) !important;
}
body.template-home .section-featured-home:not(.section-marca-mrs-taste):not(.section-marca-natulabs)::after{
  background:linear-gradient(90deg,transparent,var(--cv-filo-canvas) 20%,var(--cv-filo-canvas) 80%,transparent) !important;
}

/* Titulos: van sobre el LIENZO navy, no sobre la card, asi que siguen claros.
   La cadena tiene que igualar a la de home-redesign (0,2,0). */
body.template-home .cavutia-grid-titulo,
body.template-home .section-featured-home .section-title,
body.template-home .section-featured-home .carrusel-titulo,
body.template-home .cavutia-lastseen-title,
body.template-home .mm-title{
  color:var(--cv-editorial) !important;
}

/* ===========================================================================
   CARD CREMA  (la regla general: todo lo que esta sobre el lienzo navy)
   =========================================================================== */
body.template-home .producto-card{
  background:var(--cv-card) !important;
  border:1px solid var(--cv-filo-card) !important;
  box-shadow:var(--cv-sombra) !important;
}
/* El hover NO puede comunicarse por color: entre los cremas candidatos el
   contraste es 1.06-1.17:1, o sea imperceptible. En clave clara el hover se
   comunica por ELEVACION y sombra. */
@media (hover:hover) and (pointer:fine){
  body.template-home .producto-card:hover{
    background:#FFFFFF !important;
    border-color:rgba(11,26,58,.18) !important;
    box-shadow:var(--cv-sombra-hover) !important;
  }
}

/* EL TILE: la foto siempre se apoya sobre blanco, porque las ~2000 fotos del
   catalogo tienen fondo blanco solido (mix-blend-mode ya se descarto con
   mediciones). Sobre card crema el tile da 1.06:1 y DESAPARECE: por eso lleva
   hairline propio. Sin ese filo, la foto flota sin contorno. */
body.template-home .producto-card .producto-imagen-wrapper{
  background:var(--cv-tile) !important;
  margin:10px 10px 0 !important;
  width:auto !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--cv-filo-tile-claro) !important;
}

/* textos sobre card crema */
body.template-home .producto-card .producto-nombre{ color:var(--cv-tinta) !important; }
body.template-home .producto-card .producto-cuotas{ color:var(--cv-cuotas) !important; }

/* El precio, el tachado y el chip de %OFF traen hex INLINE desde el Twig.
   Se pisan por selector de atributo: precedente vivo en cavutia-marca-natulabs
   (que ya usa .producto-precio[style*="001c4b"]). No se toca ni un .tpl. */
body.template-home .producto-card .producto-precio[style*="001c4b"]{
  color:var(--cv-tinta) !important;           /* 17.76:1 */
}
body.template-home .producto-card .producto-anterior[style*="gray"]{
  color:var(--cv-tachado) !important;         /* 5.61:1 */
  text-decoration-color:#B9430F !important;
}
body.template-home .producto-card span[style*="background:#d40000"]{
  background:#C72D17 !important;              /* con blanco: 5.50:1 */
  box-shadow:inset 0 0 0 1px var(--cv-chip-filo) !important;
}
/* .producto-promo usa #d40000 como TEXTO. Sobre crema ese rojo si funciona,
   pero se unifica con el rojo profundo del CTA para que no convivan dos rojos. */
body.template-home .producto-card .producto-promo[style*="d40000"]{
  color:#C72D17 !important;
}
/* Las cards de "Lo ultimo que viste" las arma el JS con color:red inline
   en las cuotas, distinto del resto de la home. */
body.template-home .producto-card .producto-cuotas[style*="red"]{
  color:var(--cv-cuotas) !important;
}

/* ====================== BADGES ======================
   Caen sobre el tile BLANCO, asi que su polaridad no cambia con la inversion.
   El ambar contra blanco da 2.36:1 y sin hairline no tiene forma. */
body.template-home .producto-card .badge-envio-gratis{
  background:var(--cv-envio) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px var(--cv-chip-filo) !important;
}
body.template-home .producto-card .badge-flash{
  background:var(--cv-ambar) !important;
  color:#04122E !important;                   /* nunca blanco sobre ambar */
  box-shadow:inset 0 0 0 1px var(--cv-chip-filo) !important;
}
body.template-home .producto-card .badge-sin-stock{
  background:#12294F !important;
  color:#E6EBF5 !important;
  box-shadow:inset 0 0 0 1px var(--cv-chip-filo) !important;
}

/* Agotado: NUNCA grayscale, se lee como imagen rota. El tile sigue blanco y
   solo baja la foto. Cadena (0,4,1) para ganarle al SCSS (0,4,0). */
body.template-home .producto-card.agotado .producto-imagen-wrapper img{
  filter:none !important;
  opacity:.62 !important;
}

/* ====================== BOTON COMPRAR ======================
   home-fx le pone un linear-gradient rojo con !important.
   Sobre card crema el relleno da 4.56:1 y el texto blanco 4.84:1: ya no hace
   falta el filo claro que necesitaba la version oscura (ahi el relleno solo
   daba 3.38:1 contra la card y el filo era el limite visible). */
body.template-home .producto-boton,
body.template-home a.producto-boton,
body.template-home button.producto-boton,
body.template-home input.producto-boton,
body.template-home .producto-boton.js-addtocart{
  background:var(--cv-cta) !important;
  background-image:none !important;
  border:0 !important;
  color:#fff !important;
}
body.template-home .producto-boton:hover,
body.template-home .producto-boton.js-addtocart:hover{
  background:#C0260F !important;
  background-image:none !important;
  box-shadow:var(--cv-glow) !important;
}
body.template-home .producto-boton.disabled,
body.template-home .producto-boton[disabled]{
  background:#D8D2C6 !important;
  background-image:none !important;
  color:#5A6478 !important;
  border:0 !important;
}

/* ====================== VER TODOS ======================
   Va sobre el LIENZO navy, no sobre la card: sigue en clave clara. */
body.template-home .kg-ver-todos{
  background:transparent !important;
  border:1.5px solid rgba(234,216,187,.22) !important;
  color:var(--cv-beige) !important;
}
body.template-home .kg-ver-todos:hover,
body.template-home .kg-ver-todos:focus{
  background:var(--cv-beige) !important;
  color:var(--cv-canvas) !important;
}

/* ====================== LO ULTIMO QUE VISTE ======================
   Su fondo es navy, asi que sus cards quedan crema por la regla general. */
body.template-home .cavutia-lastseen{ background:var(--cv-canvas) !important; }
body.template-home .cavutia-lastseen-clear{ color:#8FA0C0 !important; }
body.template-home .cavutia-lastseen-clear:hover{ color:var(--cv-rojo-txt) !important; }
body.template-home .cavutia-lastseen-grid::-webkit-scrollbar-thumb{
  background:rgba(234,216,187,.22) !important;
}

/* ====================== MARCAS ======================
   Las .mm-card quedan BLANCAS: son logos con fondo blanco, misma razon que el
   tile. No son cards de producto, no entran en la inversion. */
body.template-home .mm-card{ border-color:rgba(234,216,187,.18) !important; }
body.template-home .mm-card--dark{
  background:#0F1D38 !important;
  border-color:rgba(234,216,187,.28) !important;   /* #22304f sobre navy desaparece */
}
body.template-home .mm-all{ color:var(--cv-rojo-txt) !important; }

/* ====================== PIE ====================== */
body.template-home footer.js-footer{ border-top:1px solid var(--cv-filo-canvas) !important; }

/* ===========================================================================
   CARD OSCURA DENTRO DE LAS BANDAS CREMA  (Mrs. Taste + NatuLabs)
   ---------------------------------------------------------------------------
   Aca se invierte al reves: la banda sigue crema (la pinta su snipplet) y la
   card pasa a NAVY. Sus snipplets pintan la card clara con (0,3,0), asi que
   todo este bloque usa (0,3,1) o mas para ganarles.
   =========================================================================== */
body.template-home .section-marca-mrs-taste .producto-card,
body.template-home .section-marca-natulabs .producto-card{
  background:var(--cv-card-oscura) !important;    /* 15.08:1 contra la banda */
  border:1px solid rgba(11,26,58,.20) !important;
  box-shadow:0 14px 34px -16px rgba(58,42,18,.45) !important;
}
@media (hover:hover) and (pointer:fine){
  body.template-home .section-marca-mrs-taste .producto-card:hover,
  body.template-home .section-marca-natulabs .producto-card:hover{
    background:#12294F !important;
    box-shadow:0 22px 48px -18px rgba(58,42,18,.55) !important;
  }
}
/* El tile sobre card OSCURA necesita el filo calido: el #0B1A3A de la clave
   clara da 1.05:1 contra esta card, o sea seria invisible. */
body.template-home .section-marca-mrs-taste .producto-card .producto-imagen-wrapper,
body.template-home .section-marca-natulabs .producto-card .producto-imagen-wrapper{
  background:var(--cv-tile) !important;
  margin:10px 10px 0 !important;
  width:auto !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--cv-filo-tile-osc) !important;
}
/* textos en clave clara */
body.template-home .section-marca-mrs-taste .producto-card .producto-nombre,
body.template-home .section-marca-natulabs .producto-card .producto-nombre{
  color:var(--cv-tinta-clara) !important;         /* 13.68:1 */
}
body.template-home .section-marca-mrs-taste .producto-card .producto-precio[style*="001c4b"],
body.template-home .section-marca-natulabs .producto-card .producto-precio[style*="001c4b"]{
  color:var(--cv-precio-claro) !important;        /* 16.35:1 */
}
body.template-home .section-marca-mrs-taste .producto-card .producto-anterior[style*="gray"],
body.template-home .section-marca-natulabs .producto-card .producto-anterior[style*="gray"]{
  color:var(--cv-tachado-osc) !important;         /* 6.19:1 */
  text-decoration-color:var(--cv-rojo-txt) !important;
}
body.template-home .section-marca-mrs-taste .producto-card .producto-cuotas,
body.template-home .section-marca-natulabs .producto-card .producto-cuotas{
  color:var(--cv-cuotas-claro) !important;        /* 9.16:1 */
}
/* Los titulos de estas bandas van sobre el CREMA, no sobre la card: oscuros. */
body.template-home .section-marca-mrs-taste .cavutia-grid-titulo,
body.template-home .section-marca-natulabs .cavutia-grid-titulo{
  color:#001C4B !important;
}

/* ---------------------------------------------------------------------------
   BOTONES DE MARCA: cada relleno pide SU color de texto. No hay uno solo.
       rojo     #D92D14 -> blanco 4.84  / navy 3.83   => blanco
       caramelo #C6871B -> blanco 3.05  / navy 6.08   => NAVY
       verde    #3E7D55 -> blanco 4.92  / navy 3.77   => blanco
   El caramelo con texto blanco REPRUEBA, y ya reprobaba antes de esta
   inversion: es un arreglo, no una regresion.
   El verde original #2F5D3F daba 2.15:1 contra la card oscura (invisible);
   #3E7D55 es la unica ventana que cumple card >=3 y texto blanco >=4.5.
   Cadena (0,5,1) con .js-addtocart para ganarle a la rama global (0,3,1).
   --------------------------------------------------------------------------- */
body.template-home .section-marca-mrs-taste .producto-card .producto-boton,
body.template-home .section-marca-mrs-taste .producto-card .producto-boton.js-addtocart{
  background:#C6871B !important;
  background-image:none !important;
  border:0 !important;
  color:#04122E !important;                       /* 6.08:1 */
}
body.template-home .section-marca-mrs-taste .producto-card .producto-boton:hover,
body.template-home .section-marca-mrs-taste .producto-card .producto-boton.js-addtocart:hover{
  background:#D49A2E !important;
  background-image:none !important;
  color:#04122E !important;
  box-shadow:none !important;
}
body.template-home .section-marca-natulabs .producto-card .producto-boton,
body.template-home .section-marca-natulabs .producto-card .producto-boton.js-addtocart{
  background:#3E7D55 !important;
  background-image:none !important;
  border:0 !important;
  color:#FFFFFF !important;                       /* 4.92:1 */
}
body.template-home .section-marca-natulabs .producto-card .producto-boton:hover,
body.template-home .section-marca-natulabs .producto-card .producto-boton.js-addtocart:hover{
  background:#346947 !important;
  background-image:none !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}

/* ====================== FOCO ======================
   Sobre superficies oscuras el anillo va beige. */
body.template-home a:focus-visible,
body.template-home button:focus-visible,
body.template-home input:focus-visible{
  outline:2px solid var(--cv-beige);
  outline-offset:2px;
}