/* =============================================================================
   LIJ DESIGN SYSTEM — Fase 3 del rediseño
   Tema hijo smb2b · Grupo SM
   -----------------------------------------------------------------------------
   Qué es: el vocabulario visual del nuevo diseño LIJ (tokens, temas por sección,
   escala tipográfica y las primitivas que Elementor Pro no puede reproducir).

   Documentación: docs/redesign/ANALISIS-NUEVA-WEB-LIJ.md (§2, §3, §10, §11)
                  docs/redesign/MAPA-REACT-ELEMENTOR.md (§2)

   REGLA DE DISEÑO DE ESTE ARCHIVO — es deliberadamente INERTE.
   No contiene ni un solo selector de elemento (body, h1, a, .btn...) ni ninguna
   regla que altere el sitio actual. Solo declara variables y clases con prefijo
   `.lij-`. Cargarlo no cambia ni un píxel hasta que una plantilla consuma sus
   clases o sus variables. Esto es intencional: la Fase 3 define el idioma, las
   Fases 4 a 11 lo hablan. Así el rediseño avanza plantilla por plantilla sin
   arrastrar el carrito, el checkout ni "Mi cuenta" por delante.

   PREFIJOS — todo lleva `--lij-` o `.lij-` para no colisionar con Bootstrap
   (que el tema carga), con estilos.css ni con las variables de Elementor.

   CÓMO SE APLICA UN TEMA DE SECCIÓN:
     <body class="lij-theme--barco">        (vía body_class, Fase 7)
     <div data-lij-theme="barco">           (vía clase/atributo de contenedor)
   Ambos selectores están soportados. Las variables heredan, así que basta con
   ponerlo en un ancestro. Header y footer NO llevan tema: son rojos siempre.
   ============================================================================= */


/* =============================================================================
   1. FUENTES
   ============================================================================= */

/* Lilita One — SIL Open Font License. Auto-hospedada a propósito y no servida
   desde el CDN de Google Fonts: ese CDN transfiere la IP del visitante a un
   tercero fuera de la UE, lo que es un problema conocido de RGPD. El tema ya
   auto-hospeda sus 12 familias con este mismo patrón (estilos.css:1-144). */
@font-face {
    font-family: 'Lilita One';
    src: url('../fonts/LilitaOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* -----------------------------------------------------------------------------
   Avenir LT Std — ACTIVADA 2026-09-12 SOLO EN ESTE ENTORNO LOCAL.

   Avenir LT Std es de licencia COMERCIAL. Servirla desde el WordPress
   PÚBLICO (producción) requiere una licencia de uso web (webfont) a nombre
   de Grupo SM — esa validación (NEXT_ACTIONS.md, "Validaciones que solo
   Francisco puede resolver" #0) SIGUE PENDIENTE, no se resolvió al activar
   esto aquí. Este Docker local no es público (solo localhost), así que no
   hay distribución a terceros — pero antes de que este cambio viaje a
   producción, la licencia web debe confirmarse primero.
   Ver docs/redesign/ANALISIS-NUEVA-WEB-LIJ.md §3.1.

   Archivos copiados a mano desde nueva-web-lij-main/src/assets/fonts/ a
   themes/smb2b/fonts/ (solo .otf — no existe versión .woff2 generada; para
   producción convendría convertir a .woff2, ~40% menos peso).

   Pesos: el maestro visual declara 550 (Medium), 650 (Heavy) y 750 (Black),
   pero solo usa 550 y 750 en sus reglas (verificado: 16 usos de 550, 15 de
   750, 1 sola aparición de 650 y es su propia declaración). Aquí se normalizan
   a los pesos estándar 500 / 700 / 900 porque el selector de peso de Elementor
   trabaja en centenas y no ofrece 550 ni 750. El resultado visual es idéntico:
   cada corte sigue siendo el mismo archivo.
   ----------------------------------------------------------------------------- */

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Heavy.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/AvenirLTStd-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* =============================================================================
   2. TOKENS BASE
   Valores mapeados 1:1 desde src/styles/tokens.css del maestro visual.
   ============================================================================= */

:root {
    /* --- Identidad de marca: FIJA en las 6 secciones ---------------------- */
    --lij-red: #ED1B2F;              /* Rojo SM. Header, footer, botones, paneles */
    --lij-red-hover: #BD0F20;        /* Hover de todo lo rojo */
    --lij-cream: #FFF9F5;            /* Crema. Blobs, círculos, chips activos */
    --lij-on-red: #FFFFFF;           /* Texto sobre rojo */
    --lij-on-cream: #ED1B2F;         /* Texto sobre crema */
    --lij-text: #262626;             /* Texto de cuerpo. NO es negro puro */

    /* --- Tokens temáticos: los ÚNICOS 3 que cambian por sección ----------
       Estos valores son el modo "home" (sin tema). Los 6 bloques de la
       sección 3 los redefinen. Todo lo demás se mantiene idéntico. */
    --lij-page-light: #FFF9F5;       /* Fondo de sección, tono claro */
    --lij-page-dark: #FFF3EB;        /* Fondo de sección, tono oscuro */
    --lij-accent: #ED1B2F;           /* Titulares, enlaces, iconos teñidos */

    /* --- Espaciado: escala de 8 pasos ------------------------------------ */
    --lij-space-xxxs: 4px;
    --lij-space-xxs: 8px;
    --lij-space-xs: 12px;
    --lij-space-s: 16px;
    --lij-space-m: 24px;
    --lij-space-l: 32px;
    --lij-space-xl: 40px;
    --lij-space-xxl: 48px;

    /* --- Medidas estructurales (literales del maestro, fuera de escala) -- */
    --lij-gutter: 40px;              /* Margen lateral de carruseles y rejillas */
    --lij-section-y: 64px;           /* Padding vertical de sección */
    --lij-circle: 156px;             /* Diámetro del círculo de colección/categoría */
    --lij-card-w: 188px;             /* Ancho de tarjeta de carrusel */
    --lij-card-h: 320px;             /* Alto de tarjeta */
    --lij-wave-h: 42px;              /* Alto de la onda decorativa */

    /* --- Radios ---------------------------------------------------------- */
    --lij-radius-xs: 4px;            /* Miniatura de galería */
    --lij-radius-s: 8px;             /* Botones, inputs, chips */
    --lij-radius-m: 16px;            /* Panel desplegable */
    --lij-radius-pill: 1000px;       /* Píldoras y círculos */

    /* --- Tipografía ------------------------------------------------------ */
    --lij-font-headline: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
    --lij-font-title: 'Avenir LT Std', 'Avenir Next', 'Avenir', 'Nunito Sans',
                      Arial, Helvetica, sans-serif;
    --lij-weight-body: 500;          /* Avenir Medium (550 en el maestro) */
    --lij-weight-strong: 900;        /* Avenir Black (750 en el maestro) */

    /* --- Sombra del panel desplegable ------------------------------------ */
    --lij-shadow-panel: 0 0 8px 0 rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   3. TEMAS POR SECCIÓN
   Cada bloque redefine SOLO 3 tokens. Header y footer quedan fuera: son rojos
   en los 6 modos, así que no deben heredar estos valores.
   Ver ANALISIS §2.2 para la tabla completa y las 2 validaciones pendientes
   (el acento de 0-2 casi duplica el rojo de marca; El Barco de Vapor tiene un
   solo azul frente a sus 4 sub-colecciones reales).
   ============================================================================= */

[data-lij-theme='0-2'],
.lij-theme--0-2 {
    --lij-page-light: #FFE8EB;
    --lij-page-dark: #FFD6DB;
    --lij-accent: #ED2429;
}

[data-lij-theme='3-5'],
.lij-theme--3-5 {
    --lij-page-light: #FEF3D4;
    --lij-page-dark: #FAEFB7;
    --lij-accent: #CC9A00;
}

[data-lij-theme='6-9'],
.lij-theme--6-9 {
    --lij-page-light: #FFEBD7;
    --lij-page-dark: #FFE0C2;
    --lij-accent: #D95C07;
}

[data-lij-theme='10-12'],
.lij-theme--10-12 {
    --lij-page-light: #D2F3EF;
    --lij-page-dark: #C5ECE8;
    --lij-accent: #006665;
}

[data-lij-theme='barco'],
.lij-theme--barco {
    --lij-page-light: #E4F3FC;
    --lij-page-dark: #D4E7F7;
    --lij-accent: #0061B8;
}

[data-lij-theme='juvenil'],
.lij-theme--juvenil {
    --lij-page-light: #EAE3FC;
    --lij-page-dark: #DDD4F7;
    --lij-accent: #6A3795;
}


/* =============================================================================
   4. ESCALA TIPOGRÁFICA
   Las 8 clases del maestro visual (global.css), prefijadas.
   Se usan como "clase CSS" en el panel Avanzado de cualquier widget Elementor
   cuando el control nativo de tipografía no baste.
   ============================================================================= */

.lij-headline-m {
    font-family: var(--lij-font-headline);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.2;
}

.lij-title-xl,
.lij-title-l,
.lij-title-m,
.lij-title-s {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong);
}

.lij-title-xl { font-size: 32px; line-height: 1.2; }
.lij-title-l  { font-size: 24px; line-height: 1.2; }
.lij-title-m  { font-size: 20px; line-height: 1.2; }
.lij-title-s  { font-size: 16px; line-height: 1.4; }

.lij-body-l,
.lij-body-m,
.lij-body-s {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body);
}

.lij-body-l { font-size: 24px; line-height: 1.2; }
.lij-body-m { font-size: 20px; line-height: 1.4; }
.lij-body-s { font-size: 16px; line-height: 1.4; }


/* =============================================================================
   5. PRIMITIVAS QUE ELEMENTOR PRO NO PUEDE REPRODUCIR
   Cada una está justificada en ANALISIS §10. Nada de lo que Elementor sí sabe
   hacer (contenedores, flex, grid, colores, espaciados, botones, radios,
   carruseles, rejillas, pestañas) se implementa aquí.
   ============================================================================= */

/* --- 5.1 Píldora orgánica de navegación (ANALISIS §10.1) -------------------
   No es un border-radius: es un SVG de forma irregular que SOBRESALE de la
   caja del botón por izquierda y derecha (inset negativo). Elementor no tiene
   control de fondo con desbordamiento negativo por estado.

   Uso: dar la clase .lij-pill al enlace del menú. El blob se dibuja con
   ::before, así que no hace falta añadir marcado dentro del enlace, que es
   justo lo que el walker de menús de WordPress no permitiría. */
.lij-pill {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--lij-space-xxs);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong);
    font-size: 20px;
    line-height: 1.2;
    color: var(--lij-on-red);
    white-space: nowrap;
    text-decoration: none;
}

.lij-pill::before {
    content: '';
    position: absolute;
    z-index: -1;
    /* Valores exactos del maestro visual: el blob se sale de la caja. */
    inset: 6.67% -0.31% 3.33% -2.59%;
    background-image: url('/wp-content/uploads/2026/09/header/lij-header-playful-blob-cream.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 120ms ease;
}

/* Hover y activo son el mismo estado visual en el maestro visual.
   Se incluyen las clases que WordPress pone en el <li>/<a> del menú activo
   para que el estado funcione con el menú real y no solo con marcado propio. */
.lij-pill:hover,
.lij-pill:focus-visible,
.lij-pill.lij-pill--active,
.current-menu-item > .lij-pill,
.current-menu-ancestor > .lij-pill,
.current_page_item > .lij-pill {
    color: var(--lij-on-cream);
}

.lij-pill:hover::before,
.lij-pill:focus-visible::before,
.lij-pill.lij-pill--active::before,
.current-menu-item > .lij-pill::before,
.current-menu-ancestor > .lij-pill::before,
.current_page_item > .lij-pill::before {
    opacity: 1;
}

/* La fila de píldoras necesita 4px de holgura a la izquierda o el blob del
   primer elemento se recorta al llegar el scroll al inicio. */
.lij-pill-row {
    display: flex;
    align-items: center;
    gap: var(--lij-space-xxs);
    min-width: 1px;
    padding-left: var(--lij-space-xxxs);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.lij-pill-row::-webkit-scrollbar { display: none; }

/* Alineado a la derecha mientras las píldoras caben; el margen automático
   colapsa cuando no, de modo que la fila ancla al inicio y se puede recorrer.
   Con justify-content: flex-end las primeras quedarían fuera y sin alcance. */
.lij-pill-row > :first-child { margin-left: auto; }


/* --- 5.2 Iconos teñidos con el color del tema (ANALISIS §10.3) -------------
   Un mismo SVG toma el color de la sección usándolo como máscara en lugar de
   como imagen. Elementor colorea iconos SVG por widget, pero no puede hacer
   que hereden una variable de tema.

   Uso: <span class="lij-icon" style="--lij-icon: url(...)"></span>
   o bien una de las clases de conveniencia de más abajo. */
.lij-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: var(--lij-accent);
    mask-image: var(--lij-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--lij-icon);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.lij-icon--chevron-left  { --lij-icon: url('../images/lij/chevron-left.svg'); }
.lij-icon--chevron-right { --lij-icon: url('../images/lij/chevron-right.svg'); }

/* Los 6 iconos de categoría. 108px dentro del círculo de 156px.
   PENDIENTE (MAPA §9): falta el mapeo de estas 6 clases a términos reales de
   product_cat. Las clases existen; a qué categoría corresponde cada una es
   una decisión de contenido. */
.lij-icon--cat-libros-bano           { --lij-icon: url('../images/lij/cat-libros-bano.svg'); }
.lij-icon--cat-libros-interactivos   { --lij-icon: url('../images/lij/cat-libros-interactivos.svg'); }
.lij-icon--cat-libros-tela           { --lij-icon: url('../images/lij/cat-libros-tela.svg'); }
.lij-icon--cat-packs                 { --lij-icon: url('../images/lij/cat-packs.svg'); }
.lij-icon--cat-primeros-aprendizajes { --lij-icon: url('../images/lij/cat-primeros-aprendizajes.svg'); }
.lij-icon--cat-primeros-habitos      { --lij-icon: url('../images/lij/cat-primeros-habitos.svg'); }

/* Sobre rojo (header, chips) el icono debe ser blanco, no del color del tema:
   el acento sobre rojo sería rojo sobre rojo. */
.lij-icon--on-red { background-color: var(--lij-on-red); }


/* --- 5.3 Ondas decorativas (ANALISIS §10.4) --------------------------------
   Franja de 42px con el SVG de onda. La del footer va invertida y 1px más
   alta que su hueco, para que el borde plano quede debajo del bloque rojo:
   si acaba justo a ras, los dos bordes se suavizan entre sí y aparece una
   línea clara. Ese 1px no es un descuido del maestro visual, es el arreglo. */
.lij-wave {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--lij-wave-h);
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Onda del header: cuelga por debajo del bloque rojo. */
.lij-wave--header {
    bottom: calc(var(--lij-wave-h) * -1);
    background-image: url('/wp-content/uploads/2026/09/header/lij-header-header-wave.svg');
}

/* Onda del footer: arriba, invertida, con el solape de 1px. */
.lij-wave--footer {
    top: 0;
    height: calc(var(--lij-wave-h) + 1px);
    transform: scaleY(-1);
    background-image: url('../images/lij/footer-wave.svg');
}


/* --- 5.4 Fondos de sección por tono ---------------------------------------
   El patrón estructural único del diseño: las páginas apilan secciones que
   alternan tono claro y oscuro. El color lo resuelve el tema de la sección.
   Se aplican como clase en el contenedor de Elementor. */
.lij-section--light { background-color: var(--lij-page-light); }
.lij-section--dark  { background-color: var(--lij-page-dark); }

/* La banda de la onda del footer es parcialmente transparente, así que tiene
   que continuar el tono de la última sección de la página o aparece una franja
   de color distinto entre ambas (ANALISIS §10.2). El maestro visual lo resuelve
   con :has(); aquí se ofrecen las dos vías, porque en Elementor puede ser más
   robusto fijar el tono con una clase en el propio footer. */
.lij-footer-band--light { background-color: var(--lij-page-light); }
.lij-footer-band--dark  { background-color: var(--lij-page-dark); }

main:has(> .lij-section--dark:last-child) + .lij-footer-band {
    background-color: var(--lij-page-dark);
}

main:has(> .lij-section--light:last-child) + .lij-footer-band {
    background-color: var(--lij-page-light);
}


/* --- 5.5 Placeholder que cede al enfocar (ANALISIS §10.7) ------------------
   En reposo el placeholder hace de etiqueta; al enfocar es una pista donde el
   usuario ya está escribiendo, así que retrocede para que mande el cursor.
   Elementor no expone ::placeholder por estado. */
.lij-field::placeholder {
    color: currentColor;
    opacity: 1;
}

.lij-field:focus::placeholder { opacity: 0.55; }

/* Sobre rojo el placeholder blanco necesita quedarse algo más alto para
   seguir siendo legible. */
.lij-field--on-red:focus::placeholder { opacity: 0.65; }


/* --- 5.6 Quitar el botón nativo de "borrar" de los campos de búsqueda -----
   Encontrado 2026-09-12: cualquier <input type="search"> (el buscador del
   header y el buscador grande del hero, ambos vía [buscador_wc]) muestra al
   escribir una "X" nativa del navegador para vaciar el campo — en Chrome/
   Edge se dibuja en su azul de sistema por defecto, no en los colores de
   marca, porque es una primitiva del navegador que Elementor no controla.
   El maestro visual (SearchLarge.tsx) no tiene ningún botón de borrar: es un
   <input> de texto simple. Se replica ese comportamiento quitando el control
   nativo por completo en vez de intentar recolorearlo. */
.lij-field::-webkit-search-cancel-button,
.lij-field::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}


/* --- 5.7 Recorte tipográfico del pie (ANALISIS §10.6) ---------------------
   Recorta la caja de texto a la altura de mayúsculas, que es lo que permite
   que los divisores de 32px fijen la altura de la fila. Degradación aceptada:
   sin soporte, la fila queda 6px más alta. */
.lij-trim-cap {
    text-box: trim-both cap alphabetic;
}