/* ==========================================================================
   Trana Profesional — overrides sobre el tema base (Rosaline)
   No se edita styles.css: aquí solo se ajusta paleta y se agregan
   componentes propios del showcase (sin ecommerce).
   ========================================================================== */

:root {
    /* Acento de marca (sustituye el rojo por defecto del tema) */
    --primary: #A9762E;

    /* El beige neutro (--bg) y el negro (--bg-15) del tema ya calzan
       con la identidad de Trana, se mantienen sin cambios. */
}

html, body {
    /* Salvaguarda: las secciones "infiniteSlide" (marquesina de galería)
       dependen de JS para recortar su ancho al cargar la página; hasta
       ese momento (o si el JS tarda) pueden ensanchar todo el documento
       y provocar scroll horizontal, sobre todo en móvil.
       Usamos "clip" y no "hidden": overflow-x:hidden convierte a html/body
       en contenedor de scroll (fuerza overflow-y:auto), lo que rompe
       position:sticky de secciones como la Rutina. "clip" no tiene ese
       efecto secundario y logra lo mismo. */
    max-width: 100vw;
    overflow-x: clip;
}

body {
    font-family: var(--font-main, "Poppins"), sans-serif;
}

/* El wordmark de Trana es un lockup ancho (~2.5:1): siempre se escala por
   ancho, dejando que la altura se ajuste sola para no deformarlo. */
.logo-site img {
    width: auto;
    height: 100%;
    max-height: 40px;
}

/* ---------- Header transparente (inicio, .header-abs): negro sobre las
   fotos claras/pastel de la marca — antes usaba blanco (style-white) todo
   el tiempo y quedaba casi ilegible sobre esas imágenes. Blanco solo
   cuando el header pasa a fondo sólido negro al subir el scroll
   (.header-sticky, ya la agrega main.js). ---------- */
.header-abs .box-navigation .item-link,
.header-abs .box-navigation .item-link .icon,
.header-abs .box-btn-open-menu .icon,
.header-abs .nav-icon-item {
    color: var(--black, #171717);
}
.header-abs .box-navigation .item-link::before {
    background: var(--black, #171717);
}

.header-abs.header-sticky .box-navigation .item-link,
.header-abs.header-sticky .box-navigation .item-link .icon,
.header-abs.header-sticky .box-btn-open-menu .icon,
.header-abs.header-sticky .nav-icon-item {
    color: var(--white);
}
.header-abs.header-sticky .box-navigation .item-link::before {
    background: var(--white);
}

/* Logo: dos <img> apilados (uno negro, uno blanco) — se alternan con
   opacity según el mismo estado .header-sticky, con el mismo fundido que
   ya usa el resto del header (transition: all .3s ease). */
.header-abs .logo-site {
    position: relative;
    display: inline-block;
}
.header-abs .logo-site img.logo-dark,
.header-abs .logo-site img.logo-white {
    transition: opacity 0.3s ease;
}
.header-abs .logo-site img.logo-white {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.header-abs.header-sticky .logo-site img.logo-dark {
    opacity: 0;
}
.header-abs.header-sticky .logo-site img.logo-white {
    opacity: 1;
}

/* El tema base no trae breakpoints para .tf-list (flex nowrap) ni para
   .tf-grid-layout.tf-col-* (grid fijo) — en pantallas angostas eso
   provoca overflow horizontal. Los hacemos responsivos aquí. */
.tf-list {
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .tf-grid-layout.tf-col-2,
    .tf-grid-layout.tf-col-3,
    .tf-grid-layout.tf-col-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .tf-grid-layout.tf-col-3,
    .tf-grid-layout.tf-col-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* El tema solo define `.sld-image { position:absolute; inset:0 }` para las
   variantes .slideshow-v02/.v03 — la variante base .slideshow-v01 (la que
   usa index.html) se queda sin ella, así que la imagen se dimensiona a su
   tamaño natural (ancho completo) y se desborda de la caja en vez de
   recortarse. Replicamos aquí la misma regla que el tema ya usa en v02/v03. */
.tf-slideshow .sld-image {
    position: absolute;
    inset: 0;
}
.tf-slideshow .sld-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrim para el slide del macro del logo ("Foto para Hero 2"): la propia
   foto es tipografía en primer plano (la palabra "Trana" en negro cruza
   casi todo el cuadro) y ningún recorte/object-position la saca de la
   esquina inferior izquierda, que es justo donde cae el texto del hero —
   se volvían ilegibles ambos. Un degradado oscuro ahí (sin taparle nada
   al resto de la foto) resuelve el contraste sin depender del contenido
   exacto de la imagen. */
.sld-image--scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}

/* Otra vez el mismo patrón: .tes-image del testimonio solo tiene
   max-height:350px en un par de breakpoints intermedios — a escritorio
   se queda sin acotar y la tarjeta entera se estira a la altura natural
   de la foto (nuestros packshots son bastante más altos que 490x572). */
.testimonial-v02 .tes-image {
    aspect-ratio: 4 / 5;
    max-height: 480px;
}

/* El tema limita la imagen del modal de newsletter a max-height:350px
   solo en algunos breakpoints intermedios; a escritorio se queda sin
   altura explícita y la imagen (nuestro recorte muy angosto, 736x1600)
   estira todo el modal a ~1000px de alto. Usamos la misma proporción
   4/5 que ya usamos en el resto del sitio (line-hero) para que el
   modal se sienta consistente con el resto del sitio. */
.modal-newsletter .image-left {
    aspect-ratio: 4 / 5;
    max-height: 640px;
}

/* ---------- Contador circular del hero: chip oscuro para que se lea
   también sobre fotos claras (pastel verde/azul de nuestras líneas) ---------- */
.sw-circle-prg {
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.35);
    backdrop-filter: blur(2px);
}

/* ---------- Rutina: usa el patrón real del template (tab de Bootstrap
   para la imagen + collapse/acordeón anidado para el texto, ver
   src/index.njk) — el layout y el alto de la sección quedan tal cual los
   define styles.css (.section-rountine-look / .section-split /
   .flat-animate-tab-2), sin overrides. Solo acotamos el alto mínimo de la
   foto en móvil (el tema no define uno para .banner-lookbook fuera de
   .tab-content, y sin alto explícito el stack se ve casi sin imagen). ---------- */
@media (max-width: 767px) {
    .section-rountine-look .banner-lookbook {
        min-height: 360px;
    }
}

/* ---------- Logo grande de fondo en el footer (.footer-v5 .logo-large) ----------
   El tema usa margin-bottom:-72px para que el logo "sangre" hacia la fila de
   copyright/redes de abajo (su logo-large.svg es ancho 1920x514, pensado para
   ese pull-up grande). Nuestro logo es más compacto (una sola palabra) — con
   -72px el contenedor .footer-bottom termina colapsando tanto que el logo
   queda fuera del alto real del documento: existe en el layout pero la
   página no se puede scrollear lo suficiente para revelarlo (nunca entra al
   viewport). Se reduce el pull-up a un valor que no colapsa el contenedor. */
.footer-v5 .logo-large {
    margin-bottom: -20px;
}

/* ---------- Scrim para las tarjetas de "Necesidades Capilares" (.collection-v05) ----------
   El tema no define ningún fondo/degradado detrás de .cls-content — el
   texto (blanco, .cls_name/.cls_desc) depende por completo de que la foto
   de fondo sea oscura. Tres de nuestras 4 tarjetas usan packshots de
   producto sobre fondo BLANCO (nano-keratina/leche-de-coco/alaciante), así
   que el texto blanco quedaba invisible sobre fondo blanco. Se agrega un
   degradado oscuro arriba (donde vive .cls-content) que no depende del
   contenido exacto de cada foto. */
.collection-v05::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.collection-v05 .cls-content {
    z-index: 2;
}

/* ---------- Badges de categoría (Hidrata / Reestructura / Repara / Finaliza) ---------- */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--bg-16, #F9F9F6);
    border: 1px solid var(--line-6, #E5E5E5);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text, #606060);
}

/* ---------- Tarjeta de línea de producto (grid de Tratamientos) ---------- */
.line-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    border-radius: 16px;
    background: var(--line-card-soft, var(--bg-16, #F9F9F6));
    border: 1px solid var(--line-6, #E5E5E5);
    transition: transform var(--duration-default, 200ms) ease, box-shadow var(--duration-default, 200ms) ease;
}

.line-card.has-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

/* Imagen opcional (líneas con render/foto disponible): sangra hasta el
   borde del card en vez de respetar el padding, como header de foto. Las
   líneas sin imagen (la mayoría de las 13 no-flagship) simplemente no
   incluyen este bloque y el card se ve igual que antes. */
.line-card .line-card_media {
    margin: -28px -28px 20px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.line-card .line-card_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.line-card .line-card_dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--line-accent, var(--primary));
    margin-bottom: 16px;
}

.line-card .line-card_name {
    font-family: var(--font-instrument_serif, "Instrument Serif"), serif;
    font-size: 26px;
    margin-bottom: 4px;
}

.line-card .line-card_subtitle {
    color: var(--line-accent, var(--primary));
    font-style: italic;
    margin-bottom: 12px;
}

.line-card .line-card_desc {
    color: var(--text, #606060);
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

.line-card .line-card_cta {
    margin-top: 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--black, #000);
}

/* ---------- Tarjeta de beneficio (páginas de línea) ---------- */
.benefit-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-16, #F9F9F6);
    height: 100%;
}

.benefit-card .benefit-card_title {
    font-family: var(--font-instrument_serif, "Instrument Serif"), serif;
    font-size: 22px;
    margin-bottom: 8px;
}

.benefit-card .benefit-card_text {
    color: var(--text, #606060);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Hero de línea de producto: overlay de texto sobre foto ---------- */
.line-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.line-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Sección "cómo usar" ---------- */
.step-number {
    font-family: var(--font-instrument_serif, "Instrument Serif"), serif;
    font-size: 40px;
    color: var(--line-accent, var(--primary));
    line-height: 1;
}