/* ================================================
   TEMA — Viajante
   Se carga sólo en /marca/viajante y en las fichas de sus productos.

   Personalidad: Viajante no es una revista, es un objeto que se carga:
   habla en mayúsculas de placa metálica, se cose con costura punteada,
   se refuerza en las esquinas y se ata con una cincha de color.

   Movimientos:
   1. Tipografía de equipo, no editorial — los títulos dejan la itálica
      Cormorant y pasan a Manrope pesada en caja alta con tracking cerrado y
      numerales tabulares: nombres de modelo y cifras de una ficha técnica,
      no de un editorial de moda.
   2. Etiqueta de equipaje — el tag de marca, el badge de stock y el hint de
      zoom se convierten en etiquetas colgantes: perforación (ojal), borde
      punteado de costura y caja alta muy espaciada.
   3. Costura y ruta — todo separador interno (meta de card, tabs, ficha
      técnica, beneficios, reseñas) pasa de línea llena a punteada: la costura
      de la lona y el trazo de itinerario del mapa.
   4. Refuerzo de esquina y cincha — cantoneras en L sobre la galería y una
      cincha de acento que ata section-head, el bloque de precio, el borde
      inferior del hero y la card al hover.
   5. Lona en vez de crema — los fondos de imagen y las secciones secundarias
      dejan el crema cálido de la casa por un gris de lona técnica, frío.
   6. Acento legible — el celeste es CLARO: sobre blanco no sirve para texto
      chico. Todo texto de marca usa una derivación propia (--vj-accent-deep)
      calculada desde el mismo acento; el celeste queda para rellenos, reglas
      y detalles. De paso se corrigen tres contrastes que la base fallaba en
      esta marca (CTA del footer, tab activo, breadcrumb actual).

   El color viene de la base (`marcas.color_hex`) como var(--bb-accent):
   NO se escribe su hex acá o el panel deja de servir.
   ================================================ */


/* ================================================
   0. TOKENS LOCALES
   Van en `body` y no en `:root` a propósito: `estiloDeMarca()` inyecta
   --bb-accent como style inline DEL BODY, así que en :root todavía valdría el
   acento por defecto de la tienda y las derivaciones saldrían negras.
   Este bloque no pinta nada — sólo declara variables --vj-* que ningún otro
   archivo lee, así que no puede alcanzar al chrome.
   ================================================ */
body {
    /* Acento oscurecido hasta pasar 4,5:1 sobre blanco: sigue saliendo del
       color del panel, sólo que mezclado con la tinta del sistema. */
    --vj-accent-deep: color-mix(in srgb, var(--bb-accent) 55%, #0f0f0f);
    /* Cincha "floja": el mismo acento lavado, para las reglas de fondo. */
    --vj-accent-webbing: color-mix(in srgb, var(--bb-accent) 22%, #ffffff);
    /* Costura: acento con alfa, para bordes punteados sobre claro. */
    --vj-seam: color-mix(in srgb, var(--bb-accent) 45%, transparent);

    /* Neutrales propios (no son el acento, pueden ser hex): lona técnica fría
       en lugar del crema cálido de la casa. */
    --vj-canvas: #ebeef0;
    --vj-canvas-soft: #f4f6f7;
    --vj-canvas-line: #d3d9dc;
}


/* ================================================
   1. TIPOGRAFÍA DE EQUIPO
   Cormorant es la voz editorial del holding. Viajante vende un objeto que se
   golpea y se carga: pasa a la sans en caja alta, como la serigrafía de una
   valija y la placa de un modelo.
   ================================================ */
.brand-hero .brand-hero-name {
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2.6rem, 8.5vw, 5.6rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
}
.brand-hero .brand-hero-name em {
    font-style: normal;              /* la itálica editorial no es de esta marca */
    color: #ffffff;                  /* el nombre manda en blanco; el acento va en las reglas */
}
.brand-hero .brand-hero-tagline {
    font-size: 1.02rem;
    max-width: 460px;
    /* Talón de tarjeta de embarque: el texto cuelga de una cincha de acento.
       Va sólida y no punteada a propósito: en vertical y con una o dos líneas
       de alto, el punteado se lee como un artefacto, no como costura. */
    padding-left: 1.1rem;
    border-left: 3px solid var(--bb-accent);
}

.section-head-text .section-title,
.brand-footer-cta h2 {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
}
/* El nombre propio dentro del título es la placa del modelo: caja alta,
   espaciada, en el acento profundo (el celeste puro no llega a 3:1 ni siquiera
   como texto grande sobre blanco). */
.section-head-text .section-title em {
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--vj-accent-deep);
}
/* En el CTA final el fondo es negro: ahí el celeste puro sí contrasta (9:1). */
.brand-footer-cta h2 em {
    font-style: normal;
    font-weight: 800;
    color: var(--bb-accent);
}

.product-page .product-title {
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: 0;
}
.product-card .product-info h3 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    line-height: 1.35;
}
/* En la ficha, `pages/product.css` subraya todo enlace dentro de .product-info;
   la clase se repite en la card de relacionados y el título salía subrayado.
   La card entera ya es clickeable: el subrayado sólo ensucia el rótulo.
   Se repite la cadena de :not() de la regla original porque ésa pesa (0,5,1) y
   sin igualarla no alcanza el orden de carga; es eso o un !important. */
.product-card .product-info h3 a:not(.btn-bb-primary):not(.btn-bb-ghost):not(.btn-add-cart):not(.btn-fav) {
    border-bottom: 0;
}

/* Cifras de ficha técnica: sans, tabulares, sin balanceo entre precios. */
.product-page .product-price-main,
.product-page .product-price-usd-line,
.product-card .product-price,
.product-card .product-price-usd,
.product-card .product-price-old,
.product-page .product-price-old {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.product-page .product-price-main {
    font-weight: 800;
    font-size: 1.95rem;
    letter-spacing: -0.02em;
}
.product-card .product-price {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}


/* ================================================
   2. ETIQUETA DE EQUIPAJE
   El objeto que mejor dice "esto viaja" es la etiqueta colgante del despacho:
   perforada, cosida y escrita en caja alta. Todo micro-rótulo de estas dos
   pantallas adopta esa forma.
   ================================================ */
.product-card .product-brand-tag {
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.42rem 0.7rem 0.42rem 1.55rem;   /* espacio para el ojal */
    /* Opaco, no translúcido: el tag se lee igual sobre cualquier foto. */
    background: #ffffff;
    backdrop-filter: none;
    color: var(--vj-accent-deep);
    border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
    letter-spacing: 0.2em;
}
/* El ojal por donde pasa el cordel. Vale también para el tag "Agotado", que
   viene con fondo tinta e inline styles: currentColor lo resuelve solo. */
.product-card .product-brand-tag::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0.65;
}

/* Badge de stock de la ficha: mismo lenguaje. El punto sólido que traía la
   base se vacía y pasa a ser la perforación. Los estados semánticos
   (is-warning / is-error) conservan su color: currentColor los respeta. */
.product-info .badge-bb {
    background: var(--vj-canvas-soft);
    border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
    letter-spacing: 0.2em;
    padding: 0.42rem 0.8rem;
}
/* El badge neutro pasa a lona, pero los estados semánticos conservan SU fondo:
   el aviso de "pocas unidades" o "sin stock" no puede perder su color. */
.product-info .badge-bb.is-success { background: var(--bb-success-soft); }
.product-info .badge-bb.is-warning { background: var(--bb-warning-soft); }
.product-info .badge-bb.is-error   { background: var(--bb-error-soft); }
.product-info .badge-bb.is-info    { background: var(--bb-info-soft); }
.product-info .badge-bb.is-accent  { background: var(--bb-accent-soft); }
.product-info .badge-bb::before {
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1.5px solid currentColor;
    opacity: 0.7;
}

/* Hint de zoom: etiqueta colgada de la esquina de la galería. */
.product-page .gallery-zoom-hint {
    background: #ffffff;
    color: var(--vj-accent-deep);
    border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
    padding: 0.45rem 0.7rem 0.45rem 1.5rem;
    letter-spacing: 0.2em;
}
.product-page .gallery-zoom-hint::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0.65;
}


/* ================================================
   3. COSTURA Y RUTA
   Regla del tema: punteado = separación y rótulo; sólido = control. Ningún
   botón ni input se vuelve punteado, para que nada parezca deshabilitado.
   ================================================ */
.section-head .eyebrow,
.manifesto-eyebrow .eyebrow {
    color: var(--vj-accent-deep);
    letter-spacing: 0.28em;
}
/* La rayita de la casa se vuelve una corrida de puntadas. */
.section-head .eyebrow::before,
.manifesto-eyebrow .eyebrow::before {
    width: 46px;
    height: 2px;
    background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px);
}
.brand-hero .brand-hero-eyebrow::before {
    width: 58px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--bb-accent) 0 7px, transparent 7px 13px);
}

.product-card .product-meta {
    border-top: 1px dashed var(--vj-canvas-line);
}
.product-tabs-section {
    border-top: 1px dashed var(--vj-canvas-line);
}
.product-tabs-section .product-tabs {
    border-bottom: 1px dashed var(--vj-canvas-line);
}
.tab-panel .spec-table th,
.tab-panel .spec-table td {
    border-bottom: 1px dashed var(--vj-canvas-line);
}
.tab-panel .reviews-summary {
    border-bottom: 1px dashed var(--vj-canvas-line);
}
.tab-panel .review-card {
    background: var(--vj-canvas-soft);
    border: 1px dashed var(--vj-canvas-line);
}

/* Los beneficios pasan a leerse como un checklist de despacho, un ítem por
   renglón cosido. */
.product-info .benefits {
    padding-top: 1.25rem;
    gap: 0;
}
.product-info .benefits li {
    padding: 0.8rem 0;
}
.product-info .benefits li + li {
    border-top: 1px dashed var(--vj-canvas-line);
}
.product-info .benefits li i {
    background: var(--vj-canvas);
    border: 1px solid var(--vj-canvas-line);
    color: var(--vj-accent-deep);
}


/* ================================================
   4. REFUERZO DE ESQUINA Y CINCHA
   Una valija rígida se reconoce por dos cosas: la cantonera que protege el
   golpe y la cincha que la ata. Son los dos únicos elementos decorativos que
   suma el tema, y siempre en el acento del panel.
   ================================================ */

/* Cantoneras en L sobre la foto principal. Van en diagonal (arriba-izquierda /
   abajo-derecha) para no chocar con la etiqueta de zoom. */
.product-page .gallery-main::before,
.product-page .gallery-main::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    z-index: 3;
    pointer-events: none;
    border: 2px solid var(--bb-accent);
    /* Contorno mínimo para que la cantonera no desaparezca sobre una foto clara. */
    filter: drop-shadow(0 0 1px rgba(15, 15, 15, 0.45));
}
.product-page .gallery-main::before {
    top: 12px;
    left: 12px;
    border-right: 0;
    border-bottom: 0;
}
.product-page .gallery-main::after {
    bottom: 12px;
    right: 12px;
    border-left: 0;
    border-top: 0;
}

/* Cincha bajo el section-head: tramo de acento + correa lavada. Va como
   background y no como pseudo-elemento porque .section-head es flex y un
   ::before se convertiría en un ítem más de la fila. */
.section-head {
    padding-top: 1.4rem;
    background-image: linear-gradient(90deg, var(--bb-accent) 0 88px, var(--vj-accent-webbing) 88px);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 3px;
}
/* El CTA secundario del head lleva la hebilla en el canto. */
.section-head .btn-bb-ghost {
    border-left: 4px solid var(--bb-accent);
}

/* El precio queda atado por la misma cincha. */
.product-info .product-price-block {
    position: relative;
    border-bottom: 3px solid var(--vj-accent-webbing);
}
.product-info .product-price-block::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 96px;
    height: 3px;
    background: var(--bb-accent);
}

/* Borde inferior del hero: la cincha cruza el ancho completo. */
.brand-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 3;
    background: linear-gradient(90deg, var(--bb-accent) 0 26%, rgba(255, 255, 255, 0.28) 26%);
}

/* La card se ata al hover (cincha arriba) y lleva cantonera fija abajo. */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bb-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--bb-ease-out);
    z-index: 3;
}
.product-card:hover::before { transform: scaleX(1); }
/* Cantonera abajo a la izquierda: el canto derecho lo ocupa el botón de
   detalle de la card, así que el refuerzo va del lado libre. */
.product-card::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 16px;
    height: 16px;
    border-left: 2px solid var(--vj-seam);
    border-bottom: 2px solid var(--vj-seam);
    pointer-events: none;
    z-index: 3;
}

/* El CTA principal lleva la hebilla del lado del tirador. */
.product-info .btn-add-cart {
    box-shadow: inset 5px 0 0 var(--vj-accent-deep), var(--bb-shadow-cta);
    letter-spacing: 0.2em;
}
.product-info .btn-add-cart:hover {
    box-shadow: inset 5px 0 0 #0f0f0f, var(--bb-shadow-cta-hover);
}


/* ================================================
   5. LONA EN VEZ DE CREMA
   El crema (--bb-bg-warm) es la piel del holding. El equipaje técnico es gris
   frío de lona: separa a Viajante de sus hermanas sin tocar el acento.
   ================================================ */
.product-page .gallery-main,
.product-card .product-image {
    background: var(--vj-canvas);
}
.product-page .gallery-thumbs .swiper-slide {
    background: var(--vj-canvas);
    border-color: var(--vj-canvas-line);
}
.process-section,
.related-section {
    background: var(--vj-canvas-soft);
}
.product-card {
    border-color: var(--vj-canvas-line);
}


/* ================================================
   6. ACENTO LEGIBLE
   El celeste de Viajante es un color claro: sobre blanco da 2,1:1 y no sirve
   para texto. Todo lo que sea TEXTO de marca usa --vj-accent-deep (6,0:1
   sobre blanco); el celeste puro se reserva para rellenos grandes, reglas y
   detalles decorativos, y para fondos oscuros donde sí rinde 9:1.
   Los tres primeros bloques son además correcciones de contraste heredadas.
   ================================================ */

/* (a) CTA del footer de marca: la base pinta #fff sobre el acento = 2,1:1.
   --bb-accent-text ya calcula el color legible por luminancia. */
.brand-footer-cta .btn-bb-primary {
    color: var(--bb-accent-text);
}

/* (b) Tab activo: era el acento puro sobre blanco en 12,5px. El subrayado
   tampoco puede quedar en celeste puro (2,4:1 contra el blanco): es el
   indicador de estado del tab y le corresponde 3:1 como objeto gráfico. */
.product-tabs-section .product-tab.is-active {
    color: var(--vj-accent-deep);
    border-bottom-width: 3px;
    border-bottom-color: var(--vj-accent-deep);
}

/* (c) Migaja actual: mismo problema, 11,5px en acento puro. El hover de los
   enlaces caía en el mismo pozo (2,1:1) y también se corrige. */
.breadcrumb-bb .current {
    color: var(--vj-accent-deep);
}
.breadcrumb-bb a:hover {
    color: var(--vj-accent-deep);
}

/* Rótulos y textos chicos de marca */
.product-page .product-eyebrow,
.product-page .product-eyebrow .brand {
    color: var(--vj-accent-deep);
}
.product-card .product-info .product-cat {
    color: var(--vj-accent-deep);
}
.tab-panel .shipping-grid .item h5,
.tab-panel .reviews-score {
    color: var(--vj-accent-deep);
}
.product-info a:not(.btn-bb-primary):not(.btn-bb-ghost):not(.btn-add-cart):not(.btn-fav),
.tab-prose a,
.review-card a {
    color: var(--vj-accent-deep);
}
/* La base mandaba el hover al acento puro: un enlace no puede perder contraste
   justo cuando el usuario lo apunta. */
.product-info a:hover,
.tab-prose a:hover,
.review-card a:hover {
    color: var(--bb-ink);
}

/* Estrellas: son información, no adorno — necesitan 3:1 como mínimo. */
.product-info .stars i.is-on,
.product-rating .stars i.is-on,
.reviews-meta .stars i.is-on,
.review-card .stars i.is-on {
    color: var(--vj-accent-deep);
}

/* Controles: el celeste puro se queda en los RELLENOS grandes (el CTA, donde
   --bb-accent-text resuelve el texto). El borde de hover, en cambio, es un
   indicador de estado y en celeste daba 2,4:1 contra el blanco del control. */
.product-info .variant-chip:hover,
.product-info .btn-fav:hover {
    border-color: var(--vj-accent-deep);
    color: var(--vj-accent-deep);
}
.product-info .btn-fav.is-active {
    color: var(--vj-accent-deep);
}
/* Indicadores de estado (miniatura elegida, aro del color elegido): son
   información, así que suben del acento puro —1,6:1 contra la lona— al
   acento profundo, que da 4,5:1. */
.product-page .gallery-thumbs .swiper-slide.is-active {
    border-color: var(--vj-accent-deep);
    border-width: 2px;
}
.product-info .swatch.is-active::after {
    border-color: var(--vj-accent-deep);
    border-width: 2px;
}


/* ================================================
   7. RESPONSIVE — al final, para que ganen por orden.
   ================================================ */

/* El texto del CTA principal entraba en tres renglones: con 1fr auto el botón
   se queda con el ancho sobrante y el corazón con sus 52px. */
@media (max-width: 540px) {
    .product-info .add-to-cart-row {
        grid-template-columns: 1fr auto;
    }
    .product-info .add-to-cart-row .qty-stepper {
        grid-column: span 2;
    }
    .product-info .btn-add-cart {
        letter-spacing: 0.12em;
        padding: 0.95rem 1rem;
    }
}

/* En col-6 la card queda muy angosta: se afloja la caja alta del título y se
   achica la cantonera para que no coma la foto. */
@media (max-width: 575.98px) {
    .product-card .product-info h3 {
        font-size: 0.85rem;
        letter-spacing: 0.03em;
    }
    /* El precio partía en dos renglones ("Gs." arriba, la cifra abajo): en dos
       columnas quedan ~100px útiles y la fila los reparte con una flecha que
       lleva al mismo lugar que la foto y que el título. Se recupera el ancho
       apretando el padding y retirando ESE tercer enlace duplicado. */
    .product-card .product-info {
        padding: 1.1rem 0.9rem;
    }
    .product-card .product-meta .quick-btn {
        display: none;
    }
    .product-card .product-price {
        font-size: 1.05rem;
    }
    .product-card .product-brand-tag {
        letter-spacing: 0.14em;
        padding: 0.35rem 0.55rem 0.35rem 1.35rem;
    }
    .product-card::after {
        width: 12px;
        height: 12px;
        left: 8px;
        bottom: 8px;
    }
    .section-head {
        background-size: 100% 3px;
        background-image: linear-gradient(90deg, var(--bb-accent) 0 56px, var(--vj-accent-webbing) 56px);
    }
    .product-page .gallery-main::before,
    .product-page .gallery-main::after {
        width: 24px;
        height: 24px;
    }
}