/* =========================================================================
   country.css — Capa visual de El Vaquero (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 (grises fríos,
   producto flotando, píldoras). El giro vaquero lo sustituye entero, 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.

   Se carga después de app.css, tienda.css y web.css (ver las dos cabeceras).
   El panel de administración NO la carga: nada de aquí toca al POS ni al
   panel.

   EL LENGUAJE: la mercancía. AZUL MEZCLILLA Y CREMA, como los jeans y las
   camisas que se venden: índigo para los fondos oscuros, mezclilla media
   para lo que se pulsa, crema para el papel. El pespunte miel es el único
   color cálido, igual que la costura de un pantalón de verdad.
   Tipografía de letrero de madera (Alfa Slab One) y detalles de
   talabartería — costuras punteadas, esquinas menos redondas, grano.
   ========================================================================= */

@font-face {
    font-family: "Alfa Slab One";
    src: url("../fonts/alfa-slab-one.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rye";
    src: url("../fonts/rye.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================================
   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 {
    --vq-mezclilla: #3E6CA0;
    --vq-mezclilla-clara: #9EC0E2;
    --vq-indigo: #1B2B42;
    --vq-indigo-hondo: #111D2E;
    --vq-crema: #F3E7D3;
    --vq-miel: #C9A34E;
    --vq-costura: rgba(27, 43, 66, .3);

    --fuente-display: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
    --fuente-letrero: "Rye", "Alfa Slab One", Georgia, serif;

    --lienzo: #FBF5E9;
    --superficie: #FFFDF7;
    --superficie-hundida: #F1E6D2;
    --superficie-alterna: #F7EFE1;
    --borde: #E4D7BE;
    --borde-fuerte: #CDBB9C;
    --tinta: #1B2B42;
    --tinta-suave: #4A5C73;
    --tinta-tenue: #6C7D93;

    /* El fondo de las fotos de producto es EXACTAMENTE este crema: la foto y
       su recuadro se funden y la pieza parece colocada, no pegada. */
    --dji-banda: #EDE1CB;
    --dji-tinta-producto: #F6EFE4;
    --dji-sombra: 0 1px 2px rgba(20, 35, 55, .09), 0 16px 34px -20px rgba(20, 35, 55, .38);
    --dji-sombra-fuerte: 0 34px 60px -30px rgba(20, 35, 55, .5);
    --dji-radio-tarjeta: 12px;

    /* Menos redondo que BiciTeq: la talabartería tiene esquinas, no píldoras. */
    --radio-sm: 7px;
    --radio: 10px;
    --radio-lg: 14px;
}

@media (prefers-color-scheme: dark) {
    :root:root:not([data-tema="claro"]) {
        --lienzo: #0F1825;
        --superficie: #16233A;
        --superficie-hundida: #1E2D46;
        --superficie-alterna: #131E2E;
        --borde: #2B3E58;
        --borde-fuerte: #3D5271;
        --tinta: #F3E7D3;
        --tinta-suave: #C6D3E4;
        --tinta-tenue: #94A6BD;
        --dji-banda: #131E2D;
        --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 36px -20px rgba(0, 0, 0, .75);
        --dji-sombra-fuerte: 0 34px 60px -30px rgba(0, 0, 0, .85);
        --vq-costura: rgba(243, 231, 211, .22);
    }
}

:root:root[data-tema="oscuro"] {
    --lienzo: #0F1825;
    --superficie: #16233A;
    --superficie-hundida: #1E2D46;
    --superficie-alterna: #131E2E;
    --borde: #2B3E58;
    --borde-fuerte: #3D5271;
    --tinta: #F3E7D3;
    --tinta-suave: #C6D3E4;
    --tinta-tenue: #94A6BD;
    --dji-banda: #131E2D;
    --dji-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 36px -20px rgba(0, 0, 0, .75);
    --dji-sombra-fuerte: 0 34px 60px -30px rgba(0, 0, 0, .85);
    --vq-costura: rgba(243, 231, 211, .22);
}

::selection {
    background: var(--vq-mezclilla);
    color: #fff;
}

/* Papel con grano: un ruido de 220 px en mosaico, casi invisible, que quita
   el "blanco de pantalla" y le da la textura de un catálogo impreso. */
body {
    background-color: var(--lienzo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .17 0 0 0 0 .27 .7 0 0 0 -.36'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* En oscuro el mismo grano se leía como arena encima del fondo: se usa uno
   de la mitad de intensidad. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) body {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
    }
}

:root[data-tema="oscuro"] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* =========================================================================
   2. TIPOGRAFÍA
   Alfa Slab One tiene UN solo peso. Con font-weight 620/680 el navegador
   inventaría una negrita encimada y borrosa: se fija 400 y se prohíbe la
   síntesis.
   ========================================================================= */
.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: 400;
    font-synthesis: none;
    letter-spacing: 0;
}

.titular {
    line-height: 1.02;
}

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

/* Los antetítulos van en letra de cartel del viejo oeste. Un punto más
   grande: Rye en 12 px pierde los remates y se vuelve una mancha. */
.etiqueta-seccion,
.bloque__antetitulo,
.escaparate__categoria,
.riel__numero {
    font-family: var(--fuente-letrero);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .08em;
}

.pie__titulo {
    font-family: var(--fuente-letrero);
    font-weight: 400;
    letter-spacing: .06em;
}

/* El nombre en la tarjeta se queda en letra de texto: dos renglones de slab
   gruesa en 15 px se leen como un sello, no como un nombre. */
.tarjeta-producto__nombre,
.vitrina__nombre {
    font-family: var(--fuente);
    font-weight: 650;
    letter-spacing: -.005em;
}

.precio,
.ficha__precio,
.vitrina__precio-valor,
.escaparate__precio-valor {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
}


/* =========================================================================
   3. BOTONES — de sello, no de píldora
   ========================================================================= */
.btn,
.btn-web,
.variante,
.contador,
.catalogo-barra__boton,
.btn-comprar {
    border-radius: 8px;
}

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

.btn--primario,
.btn-web--principal,
.btn-web--contorno,
.btn-web--tinta,
.btn-comprar {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
}

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

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

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


/* =========================================================================
   4. BARRA DE ANUNCIO Y CABECERAS
   ========================================================================= */
.barra-anuncio {
    background: var(--vq-mezclilla);
    color: var(--vq-indigo-hondo);
    font-weight: 650;
    letter-spacing: .01em;
}

.barra-anuncio::before {
    content: "★";
    margin-right: 8px;
}

.barra-anuncio a {
    color: var(--vq-indigo-hondo);
    font-weight: 700;
}

/* ---- Tienda: cabecera azul noche con el filo naranja del letrero ---- */
.cabecera {
    background: var(--vq-indigo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: inset 0 -4px 0 var(--vq-mezclilla);
    color: var(--vq-crema);
}

.cabecera .cabecera__logo,
.cabecera-web .cabecera__logo {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .02em;
}

.cabecera .cabecera__logo {
    color: var(--vq-crema);
}

.cabecera__marca {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--vq-mezclilla);
    box-shadow: 0 0 0 2px var(--vq-crema);
}

.cabecera .cabecera__enlace {
    color: rgba(244, 233, 216, .84);
}

.cabecera .cabecera__enlace:hover {
    color: #fff;
    background: rgba(244, 233, 216, .1);
}

.cabecera .btn--fantasma,
.cabecera .btn--secundario,
.cabecera .cabecera__menu {
    color: var(--vq-crema);
    background: transparent;
    border-color: rgba(244, 233, 216, .28);
    box-shadow: none;
}

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

.cabecera .busqueda-viva input {
    background: rgba(244, 233, 216, .1);
    border-color: rgba(244, 233, 216, .2);
    color: var(--vq-crema);
}

.cabecera .busqueda-viva input::placeholder {
    color: rgba(244, 233, 216, .62);
}

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

/* ---- Web: al volverse sólida, la misma cabecera noche de la tienda ---- */
.cabecera-web[data-solida="true"] {
    background: var(--vq-indigo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: inset 0 -4px 0 var(--vq-mezclilla);
}

.cabecera-web[data-solida="true"] .cabecera__logo {
    color: var(--vq-crema);
}

.cabecera-web[data-solida="true"] .cabecera__enlace {
    color: rgba(244, 233, 216, .84);
}

.cabecera-web[data-solida="true"] .cabecera__enlace:hover {
    color: #fff;
    background: rgba(244, 233, 216, .1);
}

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

.cabecera-web[data-solida="true"] .cabecera__tema {
    color: var(--vq-crema);
}


/* =========================================================================
   5. PORTADAS (hero de la web y de la tienda)
   Las ilustraciones ya traen su propio oscurecido del lado del texto; el
   velo genérico de BiciTeq (negro al 50 %) las apagaba de más.
   ========================================================================= */
.hero__fondo img {
    filter: brightness(.92);
}

.hero__contenido {
    text-align: left;
}

.hero .titular {
    margin-left: 0;
    max-width: 13ch;
    font-size: clamp(46px, 7.6vw, 108px);
    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(--vq-mezclilla-clara);
}

.bloque--hero .bloque__fondo::after {
    background: linear-gradient(90deg, rgba(20, 27, 36, .55) 0%, rgba(20, 27, 36, .15) 50%, rgba(20, 27, 36, 0) 100%);
}

/* La ilustración de la portada lleva la mercancía a la DERECHA; en pantallas
   más angostas que la imagen, el recorte centrado la empujaba debajo del
   texto. Se ancla a la derecha y el texto se pega a la orilla izquierda del
   contenedor (antes el bloque de 62ch quedaba centrado encima del sol). */
.bloque--hero .bloque__fondo img {
    object-position: right center;
}

/* Solo de 900 px para arriba: en el telefono la ilustracion queda DETRAS del
   texto y la envoltura ya trae su propio margen; sumarle otro empujaba el
   bloque 3 px fuera de la pantalla (lo cazo prueba_movil_tienda.js). */
@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(244, 233, 216, .08);
    color: #fff;
    border-color: rgba(244, 233, 216, .42);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
}

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

/* En el celular la mercancía queda DETRÁS del texto (no hay lado derecho
   libre) y el antetítulo naranja se perdía sobre el sol naranja: velo
   parejo en vez de degradado lateral. */
@media (max-width: 700px) {
    .bloque--hero .bloque__fondo::after {
        background: rgba(20, 27, 36, .66);
    }
}

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

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


/* =========================================================================
   6. COSTURAS — el detalle de talabartería
   Un pespunte punteado por dentro de las tarjetas. Va en ::after con
   pointer-events:none para que nunca se coma un clic.
   ========================================================================= */
.tarjeta-producto,
.vitrina__pieza,
.franja-garantias__item,
.riel__paso {
    position: relative;
}

.tarjeta-producto::after,
.vitrina__pieza::after,
.franja-garantias__item::after,
.riel__paso::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.5px dashed var(--vq-costura);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.franja-garantias__item--destacado {
    background: var(--vq-indigo);
}

.franja-garantias__item--destacado .franja-garantias__titulo {
    color: var(--vq-crema);
}

.franja-garantias__item--destacado .franja-garantias__nota {
    color: rgba(244, 233, 216, .8);
}

.franja-garantias__item--destacado .franja-garantias__icono {
    color: var(--vq-mezclilla);
}

.franja-garantias__item--destacado::after {
    border-color: rgba(244, 233, 216, .26);
}

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


/* =========================================================================
   7. PRODUCTO
   Las fotos son cuadradas y del mismo crema que el recuadro: se muestran
   cuadradas y sin recorte (el 4/3 de BiciTeq cortaba la caña de las botas).
   ========================================================================= */
.tarjeta-producto__imagen,
.vitrina__medio,
.escaparate__medio {
    aspect-ratio: 1 / 1;
}

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

.etiqueta-flotante {
    background: var(--vq-indigo);
    color: var(--vq-crema);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 6px;
    letter-spacing: .04em;
}

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

.galeria__principal {
    border-radius: 14px;
}

.galeria__miniatura {
    border-radius: 8px;
}

.variante {
    font-weight: 600;
}

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


/* =========================================================================
   8. SECCIONES DE LA WEB
   ========================================================================= */
.spotlight__medio {
    border-radius: 12px;
    box-shadow: 0 0 0 8px var(--superficie), 0 0 0 9px var(--borde), var(--dji-sombra);
}

.azulejo {
    border-radius: 14px;
}

.azulejo::after {
    background: linear-gradient(to top, rgba(20, 14, 10, .8) 0%, rgba(20, 14, 10, .25) 40%, rgba(20, 14, 10, 0) 62%);
}

.azulejo__nombre {
    font-size: clamp(22px, 2.4vw, 32px);
    color: var(--vq-crema);
}

.azulejo__conteo {
    color: var(--vq-mezclilla-clara);
    font-weight: 600;
}

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

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


/* =========================================================================
   9. PIE — tabla de madera oscura con el filo naranja
   ========================================================================= */
.pie {
    background: var(--vq-indigo);
    color: rgba(244, 233, 216, .8);
    border-top: 6px solid var(--vq-mezclilla);
}

.pie__titulo {
    color: var(--vq-mezclilla);
    font-size: 15px;
}

.pie__enlace {
    color: rgba(244, 233, 216, .78);
}

.pie__enlace:hover {
    color: #fff;
}

.pie__legal {
    color: rgba(244, 233, 216, .62);
    border-color: rgba(244, 233, 216, .14);
}

.pie h1,
.pie h2,
.pie h3,
.pie h4,
.pie strong,
.pie .cabecera__logo {
    color: var(--vq-crema);
}

.pie .suave,
.pie .tenue {
    color: rgba(244, 233, 216, .72);
}

/* ---- El horizonte: el pie sale del paisaje, no de una raya ---- */
.pie-horizonte {
    display: block;
    margin-top: 60px;
    line-height: 0;
}

/* margin-bottom -1px: sin él, el redondeo de la altura dejaba una rendija de
   un píxel por donde se veía el fondo claro entre el suelo y el pie. */
.pie-horizonte svg {
    display: block;
    width: 100%;
    height: clamp(72px, 9vw, 130px);
    margin-bottom: -1px;
}

/* Pegado al horizonte: sin el margen ni el filo naranja, que cortarían la
   silueta del suelo del pie. */
.pie-horizonte + .pie {
    margin-top: 0;
    border-top: 0;
    padding-top: 36px;
}

/* ---- La firma: el letrero (ya trae el lema dentro) ---- */
.pie__firma-logo {
    display: block;
    width: min(230px, 100%);
    height: auto;
    margin: -6px 0 14px -8px;
}