/* Perfil de marca: SANENDI — paleta, tipografías y logo.
   Se carga después de style.css (ver senseben_marcas_perfiles en
   functions.php) y redefine las variables del :root. Valores calcados 1:1 del
   :root del prototipo (c:\xampp\htdocs\sanendi\assets\css\style.css). */
:root {
    /* Paleta OFICIAL de marca Sanendi (ficha del cliente). */
    --color-marca:        #d3d7da;   /* Marca */
    --color-primary:      #4e5371;   /* Botones / T. Resaltado */
    --color-primary-dark: color-mix(in srgb, #4e5371 80%, black);
    /* El texto de la franja de beneficios es blanco y la Marca de Sanendi es
       casi blanca: el resaltado y esa franja parten del color de Botones. */
    --color-resaltado:       var(--color-primary);
    --color-resaltado-claro: color-mix(in srgb, var(--color-resaltado) 75%, white);
    --color-rose:         #e8e6df;   /* Contenedor */
    --color-rose-soft:    color-mix(in srgb, #e8e6df 40%, white);
    --color-nude:         color-mix(in srgb, #e8e6df 10%, #F1F1F1);
    --color-plum:         #2b2d42;   /* T. Principal */

    --bg:                 #F1F1F1;   /* Fondo G. */
    --bg-muted:           color-mix(in srgb, #e8e6df 20%, #F1F1F1);
    --fg:                 #2b2d42;   /* T. Principal */
    --fg-muted:           #8d8d8d;   /* T. Secundario */
    --border:             color-mix(in srgb, #e8e6df 60%, white);

    /* Fuente: Títulos = Source Sans 3, Subtítulos/cuerpo = Open Sans */
    --font-display: 'Source Sans 3', sans-serif;
    --font-sans: 'Open Sans', sans-serif;

    --shadow-hover: 0 10px 30px color-mix(in srgb, var(--color-primary) 16%, transparent);

    /* El logo (--logo-mascara) lo define functions.php con URL absoluta desde el perfil de marca. */
}

/* Títulos de sección (p. ej. "Compra por categoría"): #6E767D en lugar del color "Marca" (#D3D7DA), que casi no se leía
   sobre el fondo #F1F1F1 (contraste 1.28:1). Con #6E767D el contraste es de ~4:1. Pedido del cliente. */
.section-head h2 { color: #6e767d; }
/* Hero: título ("PDRN: innovación aplicada") y su segunda línea resaltada en #6E767D; antes usaban el color "Marca"
   (#D3D7DA), casi blanco sobre el fondo claro. La jerarquía se mantiene con el peso (300 / 400). Pedido del cliente. */
.hero-banner .hero__title, .hero-banner .hero__title-highlight { color: #6e767d; }
/* "Compra por categoría": el botón de categoría ACTIVO usaba el color "Marca" (#D3D7DA, casi blanco) con texto blanco y
   no se leía. Ahora fondo azul pizarra oficial de botones (#4E5371) con texto blanco (contraste ~7.6:1). Pedido del cliente. */
.cat-parent-nav .cat-parent-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
/* Hover de las tarjetas de "Compra por categoría": con el hover la tarjeta pasa a un fondo casi blanco, pero el widget
   dejaba el título, el ícono y "Explorar" en el color "Marca" (#D3D7DA) y la descripción en #8D8D8D: casi invisibles.
   Ahora: título, ícono y "Explorar" en el azul pizarra oficial (#4E5371) y la descripción en #6E767D. Pedido del cliente. */
body .cat-card:hover { --card-fg: var(--color-primary); --muted-foreground: #6e767d; --card-icon-bg: color-mix(in srgb, var(--color-primary) 10%, white); --card-icon-fg: var(--color-primary); }
body .cat-card:hover .cat-card__explore--strong { color: var(--color-primary); }
body .cat-card--featured:hover { --card-fg: var(--color-primary); --muted-foreground: #6e767d; --card-icon-fg: var(--color-primary); --card-icon-bg: transparent; }
body .cat-card--featured:hover .cat-card__explore--strong { color: var(--color-primary); }
/* Logo más pequeño SOLO en escritorio y laptops (>= 1025px): 100px -> 72px en reposo y 70px -> 54px al bajar el scroll.
   Tablet y móvil conservan su tamaño. Pedido del cliente. */
@media (min-width: 1025px) {
    .logo img { height: 72px; }
    .site-header.scrolled .logo img { height: 54px; }
}