/* =========================================================================
   italika.css — Capa visual de Italika (web corporativa y tienda)
   Sistema Integral de Gestión Comercial · Jabc SoftWorks

   POR QUÉ UNA HOJA APARTE Y NO OTRA SECCIÓN DE tienda.css / web.css:
   aquellas dos traen el lenguaje "DJI luminoso" de BiciTeq (blanco cálido,
   producto flotando, píldoras). Italika lo sustituye, y tenerlo en un solo
   archivo que se carga AL FINAL permite apagarlo o rehacerlo sin ir
   buscando reglas por tres hojas de 3 000 líneas. Es la misma receta que
   country.css en la copia de El Vaquero.

   Se carga después de app.css, tienda.css y web.css (ver las dos cabeceras).
   El panel de administración y la caja NO la cargan: allá la marca llega
   sola por los colores de cfg_empresa (azul Italika y carbón).

   EL LENGUAJE: el del propio logotipo. Carbón y azul Italika, blanco limpio
   y gris de taller; titulares pesados e INCLINADOS como las letras del
   logotipo, y diagonales de velocidad (las del escudo) en filos, botones y
   antetítulos. Esquinas firmes, no píldoras: es una refaccionaria, no una
   tienda de electrónica.

   La letra es Outfit (ya viene en assets/fonts, la usa el resto del
   sistema): en 800 e inclinada con `oblique` da el trazo del logotipo sin
   descargar otra fuente.
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   :root:root y no :root a secas: web.css y tienda.css redefinen los mismos
   tokens en :root y el orden de carga no bastaría en los bloques de tema
   oscuro, que llevan un selector más largo.
   ========================================================================= */
:root:root {
    /* EL AZUL DE ITALIKA (2026-10-13; antes la marca iba en rojo).
       #001959 es el azul de la marca, medido pixel por pixel del logo
       oficial que mandó el negocio. Sobre fondo claro se usa tal cual; sobre el
       carbón —cabecera, pie, portada— o en tema oscuro casi desaparece, así
       que ahí entra el MISMO tono encendido: vivo para rellenos y filos,
       claro para texto. */
    --it-azul: #001959;
    --it-azul-hondo: #00113F;
    --it-azul-vivo: #1850DC;
    --it-azul-claro: #5883EE;

    /* El azul de los textos de acento (antetítulos, precios, cifras): el
       marino en claro, el claro en oscuro (se redefine abajo). */
    --it-acento: var(--it-azul);
    --it-carbon: #15171A;
    --it-grafito: #24282D;
    --it-acero: #8C949C;
    --it-humo: #F1F2F4;
    --it-blanco: #F5F5F5;

    --fuente-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --it-inclinacion: oblique 9deg;

    --lienzo: #FFFFFF;
    --superficie: #FFFFFF;
    --superficie-hundida: #EEF0F2;
    --superficie-alterna: #F6F7F8;
    --borde: #E2E5E9;
    --borde-fuerte: #C8CDD3;
    --tinta: #15171A;
    --tinta-suave: #4A5058;
    --tinta-tenue: #6B727A;

    /* El fondo de las fotos de producto es EXACTAMENTE este humo
       (FONDO_PRODUCTO en scripts/arte/arte.js): la foto y su recuadro se
       funden y la pieza parece colocada, no pegada. Si se cambia uno, se
       cambia el otro. */
    --dji-banda: #F1F2F4;
    --dji-tinta-producto: #F1F2F4;
    --dji-sombra: 0 1px 2px rgba(21, 23, 26, .08), 0 16px 34px -20px rgba(21, 23, 26, .4);
    --dji-sombra-fuerte: 0 34px 60px -30px rgba(21, 23, 26, .55);
    --dji-radio-tarjeta: 10px;

    --radio-sm: 5px;
    --radio: 8px;
    --radio-lg: 12px;
}

@media (prefers-color-scheme: dark) {
    :root:root:not([data-tema="claro"]) {
        --lienzo: #0F1012;
        --superficie: #17191C;
        --superficie-hundida: #1F2226;
        --superficie-alterna: #131518;
        --borde: #2A2E33;
        --borde-fuerte: #3A3F45;
        --tinta: #F2F3F4;
        --tinta-suave: #C3C8CE;
        --tinta-tenue: #959CA4;
        --dji-banda: #131518;
        --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 36px -20px rgba(0, 0, 0, .8);
        --dji-sombra-fuerte: 0 34px 60px -30px rgba(0, 0, 0, .85);
        --it-acento: var(--it-azul-claro);
    }
}

:root:root[data-tema="oscuro"] {
    --lienzo: #0F1012;
    --superficie: #17191C;
    --superficie-hundida: #1F2226;
    --superficie-alterna: #131518;
    --borde: #2A2E33;
    --borde-fuerte: #3A3F45;
    --tinta: #F2F3F4;
    --tinta-suave: #C3C8CE;
    --tinta-tenue: #959CA4;
    --dji-banda: #131518;
    --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 36px -20px rgba(0, 0, 0, .8);
    --dji-sombra-fuerte: 0 34px 60px -30px rgba(0, 0, 0, .85);
    --it-acento: var(--it-azul-claro);
}

/* SOBRE EL CARBÓN, EL AZUL SE ENCIENDE. Los botones y enlaces de la
   cabecera, la portada, la escena, los bloques oscuros y el pie toman el
   azul vivo: un botón marino sobre el carbón casi no se distingue. Se hace
   redefiniendo --marca-acento en el contenedor, así todo lo que ya lee esa
   variable (botón, sombra, enlace) cambia sin tocar una regla de más. */
.cabecera,
.cabecera-web,
.hero,
.bloque--hero,
.escena,
.bloque--oscuro,
.bloque--marca,
.bloque-web--oscuro,
.bloque-web--marca,
.pie {
    --marca-acento: var(--it-azul-vivo);
    --marca-acento-encima: #FFFFFF;
}

::selection {
    background: var(--it-azul-vivo);
    color: #fff;
}

body {
    background-color: var(--lienzo);
}


/* =========================================================================
   2. TIPOGRAFÍA — pesada e inclinada, como las letras del logotipo
   ========================================================================= */
.titular,
.titular--medio,
.bloque__titulo,
.portada__titulo,
.seccion__titulo,
.ficha__titulo,
.escena__frase,
.azulejo__nombre,
.cifra-item__valor,
.riel__titulo,
.escaparate__nombre,
.franja-garantias__titulo,
.menu-tienda__titulo,
.pagina-texto h1,
.pagina-texto h2 {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-style: var(--it-inclinacion);
    letter-spacing: -.025em;
}

.titular {
    line-height: 1;
}

.titular--medio,
.bloque__titulo {
    line-height: 1.04;
}

/* Los antetítulos: mayúsculas en azul con el corte diagonal del escudo
   por delante. */
.etiqueta-seccion,
.bloque__antetitulo,
.escaparate__categoria,
.riel__numero {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-style: var(--it-inclinacion);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--it-acento);
}

.etiqueta-seccion::before,
.bloque__antetitulo::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 10px;
    margin-right: 10px;
    vertical-align: 1px;
    background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 45%, currentColor 45% 75%, transparent 75%);
    transform: skewX(-28deg);
}

.pie__titulo {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-style: var(--it-inclinacion);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.precio,
.ficha__precio,
.vitrina__precio-valor,
.escaparate__precio-valor {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-style: var(--it-inclinacion);
    letter-spacing: -.01em;
}


/* =========================================================================
   3. BOTONES — firmes, en mayúsculas, con el empuje del azul
   ========================================================================= */
.btn,
.btn-web,
.variante,
.contador,
.catalogo-barra__boton,
.btn-comprar {
    border-radius: 6px;
}

.btn--sm {
    border-radius: 5px;
}

.btn--primario,
.btn-web--principal,
.btn-web--contorno,
.btn-web--tinta,
.btn-comprar {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    font-style: var(--it-inclinacion);
}

.btn-web {
    font-size: 14px;
}

.btn--primario,
.btn-web--principal,
.btn-comprar {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 10px 22px -12px color-mix(in srgb, var(--marca-acento) 80%, transparent);
}

.btn--sm.btn--primario {
    letter-spacing: .05em;
}


/* =========================================================================
   4. BARRA DE ANUNCIO Y CABECERAS
   ========================================================================= */
.barra-anuncio {
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px),
        var(--it-azul);
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
}

.barra-anuncio a {
    color: #fff;
    font-weight: 800;
}

/* EL LOGOTIPO COMPLETO EN LA CABECERA.
   El marcado del sistema pinta un cuadrito (el icono de cfg_empresa) y el
   nombre en texto. El de Italika es el logotipo horizontal —escudo y letras
   inclinadas— y se ve mal partido en icono + "Italika" tecleado. Aquí se
   esconde el cuadrito, el nombre se vuelve invisible (font-size 0: el
   lector de pantalla lo sigue leyendo) y se pone el vectorial en blanco.
   Las dos cabeceras van siempre en carbón, así que el blanco sirve en los
   dos temas. */
.cabecera .cabecera__logo,
.cabecera-web .cabecera__logo {
    font-size: 0;
    gap: 0;
}

.cabecera .cabecera__marca,
.cabecera-web .cabecera__marca {
    display: none;
}

.cabecera .cabecera__logo::before,
.cabecera-web .cabecera__logo::before {
    content: "";
    display: block;
    width: 138px;
    height: 29px;
    background: url("../marca/italika-logo-blanco.svg") no-repeat left center / contain;
}

@media (max-width: 560px) {
    .cabecera .cabecera__logo::before,
    .cabecera-web .cabecera__logo::before {
        width: 112px;
        height: 24px;
    }
}

/* ---- Tienda: cabecera carbón con el filo azul ---- */
.cabecera {
    background: var(--it-carbon);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: inset 0 -3px 0 var(--it-azul-vivo);
    color: var(--it-blanco);
}

.cabecera .cabecera__enlace {
    color: rgba(245, 245, 245, .82);
}

.cabecera .cabecera__enlace:hover,
.cabecera .cabecera__enlace[aria-current="page"] {
    color: #fff;
    background: rgba(245, 245, 245, .1);
}

.cabecera .btn--fantasma,
.cabecera .btn--secundario,
.cabecera .cabecera__menu {
    color: var(--it-blanco);
    background: transparent;
    border-color: rgba(245, 245, 245, .26);
    box-shadow: none;
}

.cabecera .btn--fantasma:hover,
.cabecera .btn--secundario:hover,
.cabecera .cabecera__menu:hover {
    background: rgba(245, 245, 245, .12);
    color: #fff;
}

.cabecera .busqueda-viva input {
    background: rgba(245, 245, 245, .08);
    border-color: rgba(245, 245, 245, .2);
    color: var(--it-blanco);
}

.cabecera .busqueda-viva input::placeholder {
    color: rgba(245, 245, 245, .6);
}

/* Las sugerencias cuelgan de la cabecera y heredarían el blanco sobre su
   fondo claro: se les devuelve la tinta normal. */
.cabecera .sugerencias {
    color: var(--tinta);
}

/* ---- Web: al volverse sólida, la misma cabecera carbón de la tienda ---- */
.cabecera-web[data-solida="true"] {
    background: var(--it-carbon);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: inset 0 -3px 0 var(--it-azul-vivo);
}

.cabecera-web .cabecera__enlace {
    color: rgba(245, 245, 245, .86);
}

.cabecera-web .cabecera__enlace:hover {
    color: #fff;
    background: rgba(245, 245, 245, .1);
}

/* web.css pinta los enlaces de la cabecera SÓLIDA en tinta suave (pensado
   para su cabecera blanca); sobre el carbón quedaban grises casi invisibles
   al bajar por la portada y en las páginas legales. Mismo selector que
   allá, para ganarle por orden de carga. */
.cabecera-web[data-solida="true"] .cabecera__enlace {
    color: rgba(245, 245, 245, .86);
    text-shadow: none;
}

.cabecera-web[data-solida="true"] .cabecera__enlace:hover {
    color: #fff;
}

/* PÁGINAS SIN PORTADA (la agenda del taller). La cabecera de la web nace
   transparente para ir encima del hero y se vuelve sólida al bajar; en una
   página sin hero se quedaba transparente para siempre: logo y menú blancos
   sobre fondo blanco, y el contenido metido debajo del techo fijo. Pasa
   igual en BiciTeq (web/agenda.php no pide $cabeceraSolida). Aquí se
   resuelve sin tocar PHP: sin .hero en la página, cabecera carbón y el
   contenido empieza debajo del techo (anuncio + cabecera).
   DESDE EL ESPEJO DEL 2026-11-06 BiciTeq lo arregló de origen: agenda.php y
   pagina.php piden $cabeceraSolida y el techo va PEGADO (sticky), ocupando
   su alto real. Con eso el padding de abajo sobraba y dejaba un hueco de
   180 px sobre el título. Ahora solo empuja cuando la cabecera sigue
   transparente y fija, que es la página sin hero que no la pida sólida. */
body.web:not(:has(.hero)) .cabecera-web {
    background: var(--it-carbon);
    box-shadow: inset 0 -3px 0 var(--it-azul-vivo);
}

body.web:not(:has(.hero)):not(:has(.cabecera-web[data-solida="true"])) > main {
    padding-top: 108px;
}

@media (max-width: 640px) {
    body.web:not(:has(.hero)):not(:has(.cabecera-web[data-solida="true"])) > main {
        padding-top: 132px;
    }
}

/* El botón de tema pintaba la luna en tinta oscura encima de la portada
   y de la cabecera carbón: se perdía. Va siempre en claro. */
.cabecera-web .cabecera__tema,
.cabecera .cabecera__tema {
    color: #fff;
}


/* =========================================================================
   5. PORTADAS (hero de la web y de la tienda)
   Las ilustraciones ya traen su velo oscuro del lado del texto y la moto a
   la DERECHA: el texto se pega a la izquierda en vez de ir centrado encima.
   ========================================================================= */
.hero__fondo img {
    filter: brightness(.95);
}

.hero__contenido {
    text-align: left;
}

.hero .titular {
    margin-left: 0;
    max-width: 12ch;
    font-size: clamp(46px, 7.4vw, 104px);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

.hero .entradilla {
    margin-left: 0;
    max-width: 44ch;
}

.hero__acciones {
    justify-content: flex-start;
}

.hero .etiqueta-seccion,
.bloque--hero .bloque__antetitulo {
    color: var(--it-azul-claro);
}

.bloque--hero .bloque__fondo::after {
    background: linear-gradient(90deg, rgba(11, 12, 14, .82) 0%, rgba(11, 12, 14, .4) 42%, rgba(11, 12, 14, 0) 70%);
}

.bloque--hero .bloque__fondo img {
    object-position: right center;
}

.bloque--hero .bloque__contenido,
.bloque--hero .bloque__contenido--izquierda {
    text-align: left;
}

.bloque--hero .bloque__acciones {
    justify-content: flex-start;
}

/* Solo de 900 px para arriba: en el teléfono la ilustración queda DETRÁS
   del texto y la envoltura ya trae su propio margen (en El Vaquero, sumarle
   otro empujaba el bloque 3 px fuera de la pantalla). */
@media (min-width: 900px) {

    .bloque--hero .bloque__contenido--izquierda {
        margin-left: max(32px, calc(50% - 800px));
        margin-right: auto;
    }
}

.bloque--hero .btn--secundario {
    background: rgba(245, 245, 245, .08);
    color: #fff;
    border-color: rgba(245, 245, 245, .42);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    font-style: var(--it-inclinacion);
}

.bloque--hero .btn--secundario:hover {
    background: rgba(245, 245, 245, .16);
}

/* En el celular la moto queda DETRÁS del texto: velo parejo en vez de
   degradado lateral. */
@media (max-width: 700px) {
    .bloque--hero .bloque__fondo::after {
        background: rgba(11, 12, 14, .66);
    }
}

.bloque__titulo--grande {
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1;
}

.escena__frase {
    text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}


/* =========================================================================
   6. TARJETAS Y PRODUCTO
   Las fotos son cuadradas y del mismo humo que el recuadro: se muestran
   cuadradas y sin recorte.
   ========================================================================= */
.tarjeta-producto__imagen,
.vitrina__medio,
.escaparate__medio {
    aspect-ratio: 1 / 1;
}

.tarjeta-producto__imagen img,
.vitrina__medio img {
    object-fit: cover;
    padding: 0;
}

.tarjeta-producto {
    border-radius: 10px;
    border: 1px solid var(--borde);
}

.tarjeta-producto:hover {
    border-color: color-mix(in srgb, var(--it-acento) 55%, var(--borde));
}

.tarjeta-producto .precio,
.ficha__precio {
    color: var(--it-acento);
}

.etiqueta-flotante {
    background: var(--it-carbon);
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
    font-style: var(--it-inclinacion);
}

.etiqueta-flotante--agotado {
    background: var(--peligro);
    color: var(--peligro-texto);
}

.galeria__principal {
    border-radius: 12px;
}

.galeria__miniatura {
    border-radius: 6px;
}

.variante {
    font-weight: 700;
}

.cifra-item__valor {
    color: var(--it-acento);
}

.franja-garantias__item {
    border-radius: 10px;
    border-left: 4px solid var(--it-azul-vivo);
}

.franja-garantias__titulo {
    font-size: 17px;
}

.franja-garantias__icono {
    color: var(--it-acento);
}

.franja-garantias__item--destacado {
    background: var(--it-carbon);
}

.franja-garantias__item--destacado .franja-garantias__titulo {
    color: #fff;
}

.franja-garantias__item--destacado .franja-garantias__nota {
    color: rgba(245, 245, 245, .78);
}


/* =========================================================================
   7. SECCIONES DE LA WEB
   ========================================================================= */
.spotlight__medio {
    border-radius: 10px;
    box-shadow: 10px 10px 0 var(--it-acento), var(--dji-sombra);
}

.azulejo {
    border-radius: 10px;
}

.azulejo::after {
    background: linear-gradient(to top, rgba(11, 12, 14, .86) 0%, rgba(11, 12, 14, .3) 42%, rgba(11, 12, 14, 0) 64%);
}

.azulejo__nombre {
    font-size: clamp(20px, 2.2vw, 30px);
    color: #fff;
}

.azulejo__conteo {
    color: rgba(245, 245, 245, .8);
    font-weight: 600;
}

.cortina,
.bloque__banda,
.galeria-web__foto {
    border-radius: 12px;
}

.cortina__pie {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-style: var(--it-inclinacion);
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: -.01em;
}

/* La escena del taller es una foto OSCURA. El lenguaje de BiciTeq remapea
   las secciones "oscuro" a banda clara y la frase salía en tinta encima del
   carbón: ilegible. Aquí la escena siempre lleva letra blanca y su velo. */
.escena .escena__frase,
.escena.oscuro .escena__frase,
.escena.claro .escena__frase {
    color: #fff;
    font-weight: 800;
}

.escena .escena__pie {
    color: rgba(255, 255, 255, .88);
}

.escena::after {
    background: linear-gradient(to top, rgba(11, 12, 14, .9) 0%, rgba(11, 12, 14, .6) 40%, rgba(11, 12, 14, .3) 100%);
}


/* =========================================================================
   8. PIE — carbón con el filo azul y el logotipo en blanco
   ========================================================================= */
.pie {
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px),
        var(--it-carbon);
    color: rgba(245, 245, 245, .78);
    border-top: 4px solid var(--it-azul-vivo);
}

.pie__titulo {
    color: var(--it-azul-claro);
    font-size: 13px;
}

/* El primer título del pie es el nombre del negocio: se cambia por el
   logotipo, igual que en la cabecera. */
.pie__rejilla > div:first-child > .pie__titulo:first-child {
    font-size: 0;
    letter-spacing: 0;
    width: 150px;
    height: 32px;
    margin-bottom: 16px;
    background: url("../marca/italika-logo-blanco.svg") no-repeat left center / contain;
}

.pie__enlace {
    color: rgba(245, 245, 245, .76);
}

.pie__enlace:hover {
    color: #fff;
}

.pie__legal {
    color: rgba(245, 245, 245, .6);
    border-color: rgba(245, 245, 245, .12);
}

.pie h1,
.pie h2,
.pie h3,
.pie h4,
.pie strong {
    color: #fff;
}

.pie .suave,
.pie .tenue {
    color: rgba(245, 245, 245, .7);
}