/* ============================================================
   MARCA - overrides de identidad visual para las paginas de
   CATALOGO/MARCA de la tienda (Home, categoria, producto individual y
   combos, paginas propias oscuras como Nosotros/Contacto/Guia de
   Tallas). Se carga siempre (ver inc/enqueue.php), al final de toda la
   cadena global (base/layout/components/pages/responsive/product/
   account/checkout).

   CORREGIDO el 2026-08-06: esto llego a incluir por error Carrito/
   Checkout/Cuenta (via "body.woocommerce-cart/checkout/account") en una
   entrega anterior ("aplica esto a toda la tienda"). El cliente aclaro
   el alcance real: esas 3 paginas, junto con Personalizador y las 3
   pantallas de Envio, son la capa TRANSACCIONAL - siempre clara/blanca
   (ver checkout.css/account.css, que traen su PROPIO juego de variables
   para eso) - nunca deben tomar la paleta oscura de aqui. Solo
   Home/categoria/producto/paginas propias siguen oscuras.
   ============================================================ */

body.home,
body.tax-product_cat,
body.post-type-archive-product,
body.single-product,
body.search-results,
body.tf-dark-page{
  /* Negro puro (tipo Porsche Design) en vez del negro con matiz marron
     de --bg (#0d0b08, el original de base.css) - el cliente reporto
     tener que subir el brillo del celular para leer bien. */
  --bg:#0a0a0a;
  --bg-raised:#141414;
  --bg-raised-2:#1e1e1e;
  --ink:#ffffff;
  /* --ink-muted era un gris calido/dorado apagado (#a99b82) - bajo
     contraste sobre fondo oscuro. Gris claro neutro en su lugar. */
  --ink-muted:#c2c2c2;
  /* --radius ya existia en base.css pero ningun componente lo consumia -
     cada tarjeta traia su propio valor fijo (la mayoria en 0). */
  --radius:10px;
  /* --line era un dorado tenue (rgba(201,151,63,.25)) - correcto para
     acentos, pero el cliente lo señalo como demasiado protagonista en
     lineas/separadores (bajo el logo, entre bloques, bordes de
     tarjetas). Gris plomo discreto en su lugar - el dorado real (precios,
     iconos, pre-titulos, botones) usa --gold/--gold-dim, no esta
     variable, no se toca. */
  --line:#3d3d3d;
}

/* Cajas Misteriosas Premium (ficha de producto individual, las 3:
   1.1/2.1/3.1) - pedido explicito del cliente el 2026-08-07: esta ficha
   debe verse clara. La clase "tf-cajas-misteriosas" la agrega
   tf_child_cajas_misteriosas_body_class() en inc/woocommerce.php (no
   existe ningun body-class de categoria nativo en una ficha de producto
   individual, a diferencia de un archivo/categoria).
   CORREGIDO el 2026-08-07: el primer intento uso los mismos tokens
   "crema" de checkout.css/account.css (--bg:#f7f3ea) - confirmado en
   vivo que SI se aplicaba correctamente (no era un bug de especificidad),
   pero el cliente lo did "tipo mostaza" comparado con lo que esperaba -
   quiere blanco real aqui, no el crema calido del resto del flujo de
   compra. El header/menu hamburgues NO se tocan - siguen siempre-oscuros
   sin importar la pagina (regla ya establecida, ver Header mas abajo). */
body.single-product.tf-cajas-misteriosas{
  --bg:#ffffff;
  --bg-raised:#f7f7f5;
  --bg-raised-2:#eeeeec;
  --ink:#17140d;
  --ink-muted:#5f5b52;
  --line:rgba(23,20,13,0.14);
}

/* Header - mismo tono nuevo, sin el matiz marron original (queda escrito
   directo en rgba() en components.css/responsive.css, no via variable,
   por eso se repite el valor aqui en vez de heredarlo solo). NO incluye
   Carrito/Checkout/Cuenta - esas paginas usan el header claro original. */
  body.home header,
  body.tax-product_cat header,
  body.post-type-archive-product header,
  body.single-product header,
  body.search-results header,
  body.tf-dark-page header{background:rgba(10,10,10,.92);}
  @media (max-width:900px){
    body.home header,
    body.tax-product_cat header,
    body.post-type-archive-product header,
    body.single-product header,
    body.search-results header,
    body.tf-dark-page header{background:rgba(10,10,10,.98);}
  }

/* Barra inferior movil de Woodmart (Tienda/Carro/Mi cuenta, ".wd-toolbar")
   - venia con fondo blanco de fabrica, rompiendo con el negro premium de
   las paginas de catalogo (pedido del cliente el 2026-08-06). El icono es
   una fuente de iconos (font-icon, no SVG) que hereda "color" del mismo
   elemento que el texto - un solo color cubre icono + texto juntos. En
   Carrito/Checkout/Cuenta (paginas claras) se deja la barra tal como
   viene de fabrica - blanca, a tono con esas paginas. */
  body.home .wd-toolbar,
  body.tax-product_cat .wd-toolbar,
  body.post-type-archive-product .wd-toolbar,
  body.single-product .wd-toolbar,
  body.search-results .wd-toolbar,
  body.tf-dark-page .wd-toolbar{
    background:var(--bg-raised) !important;
    border-top:1px solid var(--line);
  }
  body.home .wd-toolbar-item a,
  body.tax-product_cat .wd-toolbar-item a,
  body.post-type-archive-product .wd-toolbar-item a,
  body.single-product .wd-toolbar-item a,
  body.search-results .wd-toolbar-item a,
  body.tf-dark-page .wd-toolbar-item a{
    color:var(--ink) !important;
  }
  /* "Tienda" ya quedaba blanco con la regla de arriba, pero "Carro" y
     "Mi cuenta" seguian grises (pedido del cliente el 2026-08-06) - esos
     2 traen su propio marcado extra (contador del carrito, badge de
     cuenta) con clases mas especificas que no bajaban por herencia desde
     el "<a>". Se apunta directo a la etiqueta y al icono (y su "::before",
     donde vive el glifo real de la fuente de iconos) para que los 3
     queden parejos, sin importar cual traiga marcado extra. */
  body.home .wd-toolbar-label,
  body.tax-product_cat .wd-toolbar-label,
  body.post-type-archive-product .wd-toolbar-label,
  body.single-product .wd-toolbar-label,
  body.search-results .wd-toolbar-label,
  body.tf-dark-page .wd-toolbar-label,
  body.home .wd-tools-icon,
  body.tax-product_cat .wd-tools-icon,
  body.post-type-archive-product .wd-tools-icon,
  body.single-product .wd-tools-icon,
  body.search-results .wd-tools-icon,
  body.tf-dark-page .wd-tools-icon{
    color:var(--ink) !important;
    opacity:1 !important;
  }
  body.home .wd-tools-icon::before,
  body.tax-product_cat .wd-tools-icon::before,
  body.post-type-archive-product .wd-tools-icon::before,
  body.single-product .wd-tools-icon::before,
  body.search-results .wd-tools-icon::before,
  body.tf-dark-page .wd-tools-icon::before{
    color:var(--ink) !important;
  }

/* Logo e iconos del header - SIEMPRE blancos, en TODAS las paginas, sin
   condicion por body-class. El propio <header> ya trae un fondo oscuro
   fijo de fabrica (".header{background:rgba(13,11,8,.92)}" en
   components.css, sin variable, sin depender de la pagina) desde mucho
   antes de este cambio de paleta - es un elemento de "chrome" fijo,
   igual que el menu hamburguesa. El error real (confirmado en vivo el
   2026-08-06): al hacer que Carrito/Checkout/Cuenta volvieran a su tema
   CLARO, "--ink" paso a ser oscuro ahi tambien - y el logo/iconos del
   header (que SI dependian de "--ink") se volvieron practicamente
   invisibles sobre el fondo oscuro del header, que nunca cambio. Fijar
   estos colores sin depender de "--ink" evita que un cambio de tema en
   el CUERPO de la pagina vuelva a romper el header, sin importar que
   paleta tenga esa pagina en el futuro. */
  .logo{color:#ffffff;}
  /* ".logo small" (tagline "CALIDAD QUE IMPACTA") y el borde de
     ".nav-toggle" (icono hamburguesa) se habian quedado fuera del primer
     arreglo - confirmado en vivo el 2026-08-06 en Checkout: ambos seguian
     usando "--ink-muted"/"--line", que en esa pagina (tema claro) resultan
     en un gris oscuro y un borde dorado casi transparente, invisibles
     sobre el fondo siempre-oscuro del header. Mismo motivo, mismo arreglo
     que el logo/iconos de arriba - valores fijos, no variables. */
  .logo small{color:rgba(255,255,255,.6) !important;}
  .nav-toggle{border-color:rgba(255,255,255,.35) !important;}
  .nav-icons svg,
  .nav-search-toggle svg,
  .nav-toggle svg{stroke:#ffffff !important;}
  /* Los propios links del menu de escritorio ("Inicio", "Combos
     Chocolateros", "Productos", "F27", "Cajas Misteriosas", "Nosotros",
     "Contacto") se quedaron fuera de los 2 arreglos anteriores - mismo
     motivo exacto, confirmado en vivo el 2026-08-09 en Checkout y en
     Cajas Misteriosas: "nav.primary a" (componente compartido con el
     menu hamburgues movil, components.css) depende de "--ink-muted",
     que en tema claro es un marron oscuro casi invisible sobre el fondo
     siempre-oscuro del header. Pedido explicito del cliente: que quede
     arreglado de raiz para TODAS las paginas de una sola vez, no una
     por una - por eso va aqui junto a los otros 3 elementos de "chrome"
     del header, no como una excepcion aparte por pagina.
     "#ffffff" solido (no una version traslucida) a proposito: es EL
     MISMO valor que ya usa el menu hamburgues movil para este mismo
     selector "nav.primary a" (responsive.css, cargado ANTES que este
     archivo) - usar el mismo valor exacto evita que este arreglo
     termine aclarando/oscureciendo sin querer el menu movil, que ya
     estaba bien. El dorado de "focus/hover/activo" no se toca: "--gold"
     nunca cambia entre temas (confirmado - un solo valor en todo el
     tema, en base.css), asi que ya funcionaba bien tal cual. */
  nav.primary a{color:#ffffff !important;}
  nav.primary a:hover,
  nav.primary a.active,
  nav.primary a.current-menu-item{color:var(--gold) !important;}

/* Fondos con el tono viejo escritos directo (no via variable) dentro de
   componentes del Home (Why Choose / Testimonios) - solo existen ahi. */
  body.home .why-card::after{
    background:linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.94) 100%);
  }
  body.home .testi-vcard{background:linear-gradient(160deg,#242424,#0a0a0a);}
  body.home .testi-vcard .play{background:rgba(10,10,10,.55);}
  body.home .testi-vcard .grad{background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.92) 70%);}
  body.home .testi-vcard-tag{background:rgba(10,10,10,.6);}

/* Bordes redondeados - tarjetas, botones y recuadros. Cada selector ya
   trae su propio "overflow:hidden" donde hace falta (ver components.css/
   pages.css/product.css), asi que el radio de aqui recorta bien la
   imagen/fondo interno, no solo el borde. Esto SI se mantiene en
   Carrito/Checkout/Cuenta - el pedido del cliente fue sobre color/
   contraste en esas 3, no sobre las esquinas de los botones. */
  body.home .combo-card,
  body.home .combo-card .ph,
  body.home .why-card,
  body.home .f27-card .ph,
  body.home .step-media,
  body.home .combo-cta,
  body.home .pay-inner,
  body.home .chip,
  body.tax-product_cat .f27-card .ph,
  body.post-type-archive-product .f27-card .ph,
  body.home .btn,
  body.tax-product_cat .btn,
  body.post-type-archive-product .btn,
  body.single-product .btn,
  body.woocommerce-account .btn,
  body.woocommerce-cart .btn,
  body.woocommerce-checkout .btn,
  body.search-results .btn,
  body.tf-dark-page .btn{
    border-radius:var(--radius);
  }

/* Titulo "COMBOS CHOCOLATEROS" (Home) - "CHOCOLATEROS" salia dorado por
   ".sec-head h2 .accent" (layout.css), la misma regla que usan TODOS los
   titulos de seccion (F27, Productos, Cajas Misteriosas) - escopado aqui
   solo a "#combos" para que este pedido puntual no cambie los demas
   titulos, que siguen con su acento dorado normal. */
  body.home #combos .sec-head h2 .accent{color:var(--ink);}

/* "Tu confianza, nuestro mayor logro" (Home) - version con iconos/
   insignias de ".stat-row-m" (front-page.php), SOLO celular y tablet.
   ".stat-row" (numero en dorado, sin iconos) sigue siendo la version de
   escritorio, intacta - cada una se oculta a la otra segun el ancho de
   pantalla, nunca las dos a la vez. */
  body.home .stat-row-m{display:none;}
  @media (max-width:900px){
    body.home .stat-row{display:none;}
    body.home .stat-row-m{
      display:block;text-align:center;padding:40px 20px 8px;
      border-top:1px solid var(--line);margin-top:40px;
    }
    body.home .stat-row-m > .eyebrow{display:block;margin-bottom:28px;}
    body.home .stat-row-m-grid{display:grid;grid-template-columns:repeat(3,1fr);}
    body.home .stat-m{padding:0 8px;}
    body.home .stat-m + .stat-m{border-left:1px solid var(--line);}
    body.home .stat-m-icon{
      width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
      background:var(--bg-raised);border:1px solid var(--gold-dim);
      display:flex;align-items:center;justify-content:center;
    }
    body.home .stat-m-icon svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3;}
    body.home .stat-m-n{font-family:'Anton';font-size:clamp(20px,6vw,28px);color:var(--ink);margin-bottom:4px;}
    body.home .stat-m-l{font-family:'Oswald';font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);line-height:1.35;}
  }

/* "¿Por qué comprar en Todo Fútbol?" (Home), celular y tablet - tarjetas
   propias (fondo, borde, esquinas redondeadas, icono chico arriba del
   texto) en vez de lineas divisorias, con columnas realmente parejas
   ("minmax(0,1fr)", no solo "1fr"). */
  @media (max-width:900px){
    body.home .trust-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
    body.home .trust-item{
      flex-direction:column;align-items:flex-start;gap:10px;
      padding:20px 18px !important;
      border:1px solid var(--line) !important;
      border-radius:var(--radius);
      background:var(--bg-raised);
    }
    body.home .trust-item svg{width:28px;height:28px;}
    body.home .trust-item .txt{max-width:none;}
  }