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

   Personalidad: un lookbook de lino — la prenda se mira de largo, sobre papel
   cálido, y el naranja no es una mancha sino el hilo que cose la página.

   Movimientos:
   1. Retrato de prenda: toda imagen pasa de cuadrado a 4:5 vertical (cards,
      galería y miniaturas) y la ficha se reparte en dos columnas iguales.
      Una prenda se muestra de largo, no recortada en un cuadrado.
   2. Papel y trama: el lienzo deja de ser blanco puro y pasa a un papel cálido
      derivado del propio color de marca, con una trama de lino apenas visible.
      La tienda se siente de tela antes de leer una sola palabra.
   3. Tipografía de lookbook: display más liviano y más aireado (Cormorant 300),
      antetítulos diminutos con tracking largo. La tipografía "cae" en vez de
      pesar.
   4. El hilván: un punteado de 1px en el color de marca como firma repetida —
      bajo el nombre del hero, alrededor de la foto principal, bajo el precio y
      en el pie de cada card. Es el único gesto decorativo propio.
   5. El naranja sale de los bloques grandes: el nombre del hero pasa a marfil y
      el acento saturado queda para filetes y para el CTA (la única mancha, y es
      la acción). Donde el naranja hace de TEXTO se usa la variante -dark, que sí
      llega a 4,5:1; donde hace de FONDO, el texto va oscuro (--bb-accent-text).
   6. Caída: los hover son lentos y cortos (la tela se acomoda, no rebota) y las
      áreas táctiles de talle/color suben a 44px.

   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. Todo lo cálido de este
   tema se deriva de esa variable con color-mix, así el panel sigue mandando.
   ================================================ */


/* ================================================
   VARIABLES LOCALES
   Se declaran en los contenedores del contenido —no en :root— para dejar por
   escrito hasta dónde llega este tema: barra superior, cabecera, buscador, pie
   y carrito quedan fuera y no leen ninguna de estas variables.
   ================================================ */
.brand-hero,
.manifesto,
.process-section,
.brand-products-section,
.brand-footer-cta,
.product-page,
.product-tabs-section,
.related-section,
.sticky-cta {
    /* Papel: el mismo naranja del panel, diluido hasta ser sólo temperatura. */
    --co-papel:        color-mix(in srgb, var(--bb-accent) 4%, #ffffff);
    --co-papel-hondo:  color-mix(in srgb, var(--bb-accent) 9%, #ffffff);
    --co-marfil:       #f7f1e8;

    /* Hilo: el acento a media saturación, para punteados que no griten. */
    --co-hilo:         color-mix(in srgb, var(--bb-accent) 45%, #ffffff);
    --co-hilo-tenue:   color-mix(in srgb, var(--bb-accent) 22%, #ffffff);

    /* Trama de lino: dos pasadas de 1px cruzadas, casi invisibles. Es textura,
       no color: no altera el contraste del texto que va encima. */
    --co-lino:
        repeating-linear-gradient(0deg,  rgba(15, 15, 15, 0.022) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        repeating-linear-gradient(90deg, rgba(15, 15, 15, 0.016) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}


/* ================================================
   MOVIMIENTO 2 — PAPEL Y TRAMA
   El blanco de laboratorio se va: las secciones de contenido pasan a papel
   cálido con trama de lino. Las cards siguen blancas, así la prenda queda
   apoyada sobre la tela en vez de fundirse con el fondo.
   ================================================ */
.brand-products-section,
.product-page,
.product-tabs-section,
.related-section {
    background-color: var(--co-papel);
    background-image: var(--co-lino);
}

/* Los relacionados quedan medio tono más hondos: es el cierre de la ficha y
   necesita separarse del bloque de solapas, que quedaba pegado. */
.related-section { background-color: var(--co-papel-hondo); }

/* La ficha arranca pegada al breadcrumb: se le da aire para que el papel se lea
   como superficie y no como un borde de color. */
.product-page { padding-top: 2.5rem; }

/* Una colección de dos prendas quedaba amontonada contra el margen izquierdo
   con tres cuartos de papel vacío al lado, y se leía como una grilla a la que
   le faltan cosas en vez de como una selección corta. Centrada, la cápsula se
   lee intencional; con la colección llena esto no cambia nada salvo la última
   fila incompleta. */
.brand-products-section .row,
.related-section .row {
    justify-content: center;
}

/* Las solapas traían el espaciado de una sección de home y con una descripción
   corta dejaban medio scroll de papel vacío. Se ajusta el ritmo al contenido. */
.product-tabs-section {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}

/* Fondo de las fotos: papel más hondo, que es lo que se ve mientras carga la
   imagen y alrededor de las prendas recortadas. */
.product-card .product-image,
.gallery-main,
.gallery-thumbs .swiper-slide {
    background-color: var(--co-papel-hondo);
    background-image: var(--co-lino);
}


/* ================================================
   MOVIMIENTO 1 — RETRATO DE PRENDA
   Una camisa o un vestido no entran en un cuadrado. Todo lo que muestra
   producto pasa a 4:5 vertical, el encuadre del catálogo de indumentaria.
   ================================================ */
.product-card .product-image { aspect-ratio: 4 / 5; }

/* La galería usa el hack de padding-bottom (height:0), así que el ratio se
   cambia ahí: 125% = 4:5. */
.gallery-main { padding-bottom: 125%; }

.gallery-thumbs .swiper-slide { aspect-ratio: 4 / 5; }

/* Con la foto vertical, la columna de la imagen ya no necesita ser la más
   ancha: dos columnas iguales equilibran la página y le dan al texto una
   medida de lectura cómoda.
   Va con `min-width` a propósito: `product.css` colapsa la ficha a una sola
   columna dentro de un `max-width: 991.98px`, y una regla suelta de este
   archivo —que carga después— se la comía y dejaba la ficha en dos columnas
   en móvil, con scroll horizontal. */
@media (min-width: 992px) {
    .product-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4.5rem;
    }
    .product-row .product-info { max-width: 34rem; }
}
.product-row .product-info { gap: 1.4rem; }


/* ================================================
   MOVIMIENTO 3 — TIPOGRAFÍA DE LOOKBOOK
   Display liviano y aireado (la letra cae, no pesa) y antetítulos diminutos
   con tracking largo, como los pies de foto de una editorial de moda.
   ================================================ */
.brand-hero-name {
    font-weight: 300;
    letter-spacing: -0.005em;
    line-height: 1.02;
}
.brand-products-section .section-title,
.related-section .section-title,
.process-section .section-title {
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.005em;
}
.product-title {
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.brand-footer-cta h2 { font-weight: 300; }

/* Nombre de la prenda en la card: mismo peso liviano y un poco más de aire
   entre líneas para que un nombre largo no se apelmace. */
.product-card .product-info h3 {
    font-weight: 400;
    line-height: 1.35;
    font-size: 1.3rem;
}

/* Antetítulos: más chicos, más separados. Es el detalle que más rápido cambia
   la temperatura de una página. */
.brand-products-section .eyebrow,
.related-section .eyebrow,
.process-section .eyebrow,
.manifesto-eyebrow .eyebrow,
.brand-hero-eyebrow {
    font-size: 0.63rem;
    letter-spacing: 0.42em;
    font-weight: 600;
}
.product-eyebrow {
    font-size: 0.63rem;
    letter-spacing: 0.34em;
    font-weight: 600;
}
.product-card .product-cat {
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    font-weight: 600;
}

/* El precio es dato, no titular: se lo baja de tamaño y se lo alinea con la
   calma del resto. La prenda manda. */
.product-price-main { font-weight: 500; }
.product-card .product-price { font-weight: 500; }


/* ================================================
   MOVIMIENTO 4 — EL HILVÁN
   La firma de la marca: un punteado de 1px en el color del panel. Aparece
   siempre en el mismo rol —cerrar un bloque— para que se lea como sistema y no
   como adorno suelto.
   ================================================ */

/* Bajo el nombre del hero: la puntada que abre la marca. */
.brand-hero-name::after {
    content: '';
    display: block;
    width: 96px;
    margin-top: 1.4rem;
    border-top: 1px dashed var(--bb-accent);
}

/* La raya del antetítulo del hero también se vuelve hilo. */
.brand-hero-eyebrow::before {
    height: 0;
    border-top: 1px dashed var(--bb-accent);
    background: none;
}

/* Marco de hilván alrededor de la foto principal: la referencia directa es el
   patrón de costura. Va con `outline` (no `border`) para que no empuje el
   layout ni sume ancho a la grilla. */
.gallery-main {
    border-color: var(--co-hilo-tenue);
    outline: 1px dashed var(--co-hilo);
    outline-offset: 10px;
}

/* Cierre del precio y pie de la card: mismo punteado, mismo rol. */
.product-price-block {
    border-bottom: 1px dashed var(--bb-accent);
    padding-bottom: 1.1rem;
}
.product-card .product-meta {
    border-top: 1px dashed var(--co-hilo-tenue);
}
.product-card:hover .product-meta {
    border-top-color: var(--co-hilo);
}

/* Cierre del bloque de encabezado de sección. */
.brand-products-section .section-head,
.related-section .section-head {
    padding-bottom: 1.75rem;
    margin-bottom: 2.75rem;
    border-bottom: 1px dashed var(--co-hilo-tenue);
}

/* La rayita del antetítulo era dorada y sólida —el dorado del sistema— y era lo
   único de la página que no seguía el hilo. Pasa a punteado en el color de la
   marca, igual que el resto. */
.brand-products-section .eyebrow::before,
.related-section .eyebrow::before,
.process-section .eyebrow::before,
.manifesto-eyebrow .eyebrow::before {
    height: 0;
    width: 40px;
    border-top: 1px dashed var(--bb-accent);
    background: none;
}
.brand-products-section .eyebrow,
.related-section .eyebrow,
.process-section .eyebrow {
    color: var(--bb-accent-dark);
}

/* Etiqueta de marca sobre la foto: se la trata como etiqueta cosida —marfil,
   punteado y tipografía minúscula— en vez de chip flotante. */
.product-card .product-brand-tag {
    background: var(--co-marfil);
    backdrop-filter: none;
    border: 1px dashed var(--co-hilo);
    color: var(--bb-accent-dark);
    letter-spacing: 0.26em;
    padding: 0.3rem 0.65rem;
}

/* Badge de stock: misma lógica de etiqueta de cuidado de prenda. */
.product-row .badge-bb {
    background: var(--co-papel-hondo);
    border-style: dashed;
    border-color: var(--co-hilo);
    letter-spacing: 0.26em;
}

/* Miniatura elegida: la puntada marca cuál se está mirando. */
.gallery-thumbs .swiper-slide.is-active {
    border-style: dashed;
    border-color: var(--bb-accent);
}


/* ================================================
   MOVIMIENTO 5 — EL NARANJA SALE DE LOS BLOQUES GRANDES
   El acento es cálido y saturado: en superficie grande satura la pantalla y
   pelea con la foto de la prenda. Se lo retira de las masas y se lo deja donde
   rinde: filetes, antetítulos y el botón de compra.
   ================================================ */

/* El nombre de la marca ocupaba el hero entero en naranja. Pasa a marfil: la
   foto de campaña queda al frente y la marca la acompaña. */
.brand-hero-name em {
    color: var(--co-marfil);
    font-style: italic;
}

/* El velo del hero se entibia con el color de marca en vez de sumar otra masa
   naranja: la campaña se ve cálida, el texto blanco encima no pierde contraste
   (el fondo queda más oscuro que el original, no más claro). */
.brand-hero::before {
    background: linear-gradient(
        180deg,
        rgba(15, 15, 15, 0) 0%,
        rgba(15, 15, 15, 0.18) 38%,
        color-mix(in srgb, var(--bb-accent) 14%, rgba(15, 15, 15, 0.9)) 100%
    );
}

/* Naranja como TEXTO: siempre la variante -dark, que sobre papel mide 5,1:1.
   El acento puro sobre blanco da 3,4:1 y no alcanza para texto normal. */
.brand-products-section .section-title em,
.related-section .section-title em,
.process-section .section-title em {
    color: var(--bb-accent-dark);
    font-weight: 400;
}
.product-card .product-cat { color: var(--bb-accent-dark); }

/* Naranja como FONDO: el texto encima va oscuro. El CTA del pie de marca venía
   con `color:#fff` fijo desde components.css — blanco sobre este naranja da
   3,4:1 y no pasa AA. `--bb-accent-text` lo calcula por luminancia (acá,
   oscuro: 5,7:1). Se corrige también el estado hover del barrido blanco. */
.brand-footer-cta .btn-bb-primary { color: var(--bb-accent-text); }
.brand-footer-cta .btn-bb-primary:hover { color: var(--bb-ink); }

/* Botones fantasma de las cabeceras: el relleno del hover pasa del negro del
   sistema al color de la marca, con texto oscuro encima. */
.brand-products-section .btn-bb-ghost,
.related-section .btn-bb-ghost {
    border-color: var(--bb-ink);
    font-weight: 600;
    letter-spacing: 0.26em;
}
.brand-products-section .btn-bb-ghost:hover,
.related-section .btn-bb-ghost:hover {
    background: var(--bb-accent);
    border-color: var(--bb-accent);
    color: var(--bb-accent-text);
}

/* Acciones rápidas sobre la foto: mismo criterio de relleno de marca. */
.product-card .quick-btn:hover {
    background: var(--bb-accent);
    color: var(--bb-accent-text);
}

/* La barra fija de compra en móvil pintaba el precio con el acento puro sobre
   blanco: 3,4:1, por debajo de AA para 17,6px. Misma familia de color, variante
   oscura, 5,2:1. */
.sticky-cta-price { color: var(--bb-accent-dark); }

/* Solapas: el activo se subraya con hilo grueso; el naranja como texto usa la
   variante oscura para llegar a contraste. */
.product-tabs-section .product-tab.is-active {
    color: var(--bb-accent-dark);
    border-bottom-color: var(--bb-accent);
}

/* `product.css` subraya todo enlace dentro de `.product-info` para marcar los
   links de prosa, pero las cards de relacionados reusan esa misma clase y el
   nombre de la prenda salía subrayado como si fuera un link de texto. Misma
   especificidad que la regla base (0,5,1) y este archivo carga después. */
.related-section .product-card .product-info a:not(.btn-add-cart):not(.btn-fav) {
    border-bottom: none;
}


/* ================================================
   MOVIMIENTO 6 — CAÍDA
   Nada rebota: los movimientos son largos y cortos de recorrido, como una tela
   que se acomoda. Y lo que se toca para elegir talle o color crece a 44px.
   ================================================ */
.product-card {
    transition: border-color var(--dur-slow) var(--bb-ease-out),
                transform var(--dur-slow) var(--bb-ease-out),
                box-shadow var(--dur-slow) var(--bb-ease-out);
}
.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--co-hilo);
    box-shadow: 0 26px 44px -28px color-mix(in srgb, var(--bb-accent) 40%, rgba(15, 15, 15, 0.4));
}
.product-card .product-image img {
    transition: transform 0.9s var(--bb-ease-out);
}
.product-card:hover .product-image img { transform: scale(1.035); }

/* Talles y colores: en indumentaria son la decisión principal de la ficha, así
   que dejan de ser controles menores. 44px de lado = área táctil recomendada
   (el swatch base medía 38px). */
.product-row .variant-chip {
    min-width: 52px;
    min-height: 44px;
    text-align: center;
    letter-spacing: 0.12em;
    border-color: var(--bb-line-strong);
}
.product-row .variant-chip.is-active {
    border-color: var(--bb-accent);
}
.product-row .swatch {
    width: 44px;
    height: 44px;
}

/* El botón de compra conserva el relleno de marca (única mancha naranja, y es
   la acción); sólo se le quita el rebote. */
.product-row .btn-add-cart:hover,
.sticky-cta .btn-add-cart:hover {
    transform: translateY(-1px);
}


/* ================================================
   RESPONSIVE — al final, para que ninguna regla de escritorio de este mismo
   archivo las pise por orden.
   ================================================ */

/* De tablet para abajo la ficha ya es de una sola columna: el hilván se acerca
   a la foto para no rozar el borde de la pantalla. */
@media (max-width: 991.98px) {
    .gallery-main { outline-offset: 6px; }
    .brand-hero-name::after { margin-top: 1rem; }
}

@media (max-width: 767.98px) {
    /* En pantalla angosta la trama de lino se vuelve ruido: se apaga y queda
       sólo el papel. */
    .brand-products-section,
    .product-page,
    .product-tabs-section,
    .related-section {
        background-image: none;
    }

    /* Card a media pantalla: el retrato se suaviza y los antetítulos aflojan el
       tracking, que a 6rem de ancho partía las palabras. */
    .product-card .product-image { aspect-ratio: 5 / 6; }
    .product-card .product-info h3 { font-size: 1.15rem; }
    .product-card .product-cat { letter-spacing: 0.22em; }
    .product-card .product-brand-tag { letter-spacing: 0.18em; }

    .brand-products-section .section-head,
    .related-section .section-head {
        padding-bottom: 1.25rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 540px) {
    /* La fila de compra se partía en dos mitades iguales y el corazón —que mide
       52px fijos— se quedaba con media pantalla, dejando "Agregar al carrito"
       en tres renglones. El favorito toma sólo su ancho y el CTA se lleva el
       resto. */
    .add-to-cart-row { grid-template-columns: 1fr auto; }

    /* Con ese ancho recuperado, aflojar tracking y padding alcanza para que
       "Agregar al carrito" entre en un solo renglón. */
    .product-row .btn-add-cart {
        letter-spacing: 0.14em;
        padding: 0 1rem;
    }

    .gallery-main { padding-bottom: 118%; }
}