/* ===========================================================================
   CONSTRUVIAL — dirección visual
   ---------------------------------------------------------------------------
   De dónde sale todo esto, para que nadie lo cambie a ciegas:

   · El acento verde NO es una elección de moda: el vidrio flotado visto de
     canto es verde. Cualquiera del oficio lo sabe y el cliente lo reconoce.
     Es el color literal del producto que vende este negocio.
   · La estructura es de LÍNEAS, no de tarjetas con sombra. Un perfil de
     aluminio es una sección: líneas finas y ángulos rectos. La plantilla venía
     llena de cajas con sombra gris, que es el aspecto que tiene cualquier
     sitio; aquí se sustituyen por línea y espacio.
   · El único gesto llamativo de la página es la COTA del hero. Este negocio
     vive de medir, y la cota es el lenguaje gráfico del oficio. Va una sola:
     si se repite, deja de decir algo.

   Se carga DESPUÉS de construvial.css y pisa lo que haga falta del tema.
   =========================================================================== */

/* Una sola familia, variable: un archivo cubre todos los pesos y los dos
   anchos. El ancho expandido de los titulares evoca el vano horizontal de un
   ventanal; el normal es para leer. */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;   /* el texto se ve desde el primer instante */
}

:root {
    --canto:        #4E7A72;   /* el verde del canto del vidrio flotado */
    --canto-claro:  #E8EFED;
    --azul:         #1E2255;   /* del logo */
    --rojo:         #A81C3B;   /* del logo, con parsimonia */
    --aluminio:     #C3C8CC;   /* el gris del perfil anodizado */
    --tinta:        #14181D;
    --papel:        #FFFFFF;

    --linea: 1px solid var(--aluminio);

    /* Escala tipográfica en cuarta justa (1.333), redondeada. */
    --t-xs:   0.8125rem;
    --t-s:    0.9375rem;
    --t-base: 1.0625rem;
    --t-m:    1.375rem;
    --t-l:    1.875rem;
    --t-xl:   2.5rem;
    --t-xxl:  3.5rem;
}

/* --- Base ---------------------------------------------------------------- */

body,
.section p,
p, li, td, input, textarea, select, button {
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--tinta);
}

body {
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title, .page-banner h1 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-stretch: 118%;          /* el ancho es la personalidad del titular */
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: var(--azul);
    text-transform: none;
}

h1, .page-banner h1 { font-size: clamp(2rem, 4.2vw, var(--t-xxl)); }

/* ⚠️ El tema fija el tamano del titular del hero con mas especificidad y en
   movil lo dejaba en 22 px. Se iguala el selector para poder pisarlo. */
.hero-item .hero-content-2 h1,
.hero-item .hero-content-2 h2,
.hero-item .hero-content h1,
.vano__texto h1,
.vano__texto h2 {
    font-size: clamp(2.25rem, 5.2vw, 4rem);
}
h2 { font-size: clamp(1.6rem, 3vw, var(--t-xl)); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }

/* Menos de 80 caracteres por línea: es lo que se lee sin cansarse. */
.section p,
.texto-legal p,
.product-description p {
    max-width: 62ch;
}

/* ⚠️ Un `max-width` sin margen automático deja la caja pegada a la izquierda,
   aunque el texto de adentro esté centrado. Se veía como un párrafo torcido
   bajo un título bien centrado. Donde el contenedor centra, la caja se centra. */
.text-center p,
.section-title p,
.text-center h2,
.text-center h3 {
    margin-left: auto;
    margin-right: auto;
}

a { color: var(--azul); }
a:hover { color: var(--canto); }

/* --- Botones: sin sombra, con línea ---------------------------------------
   El tema los traía redondeados y con sombra. Un botón que parece una pastilla
   flotando es de cualquier sitio; este es un rectángulo con el canto apenas
   matado, como un vidrio pulido. */
.btn,
.buscador__boton,
.barra-producto__boton {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 2px;
    box-shadow: none;
    padding: 14px 26px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn {
    background: var(--azul);
    border: 1px solid var(--azul);
    color: var(--papel);
}

.btn:hover,
.btn:focus {
    background: var(--canto);
    border-color: var(--canto);
    color: var(--papel);
}

/* --- Tarjetas de producto: línea en vez de sombra ------------------------ */
.single-grid-product {
    background: var(--papel);
    border: var(--linea);
    border-radius: 2px;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .18s ease;
}

.single-grid-product:hover {
    border-color: var(--canto);
}

.single-grid-product .product-content {
    padding: 16px 18px 20px;
}

.single-grid-product .product-content .title {
    font-size: var(--t-s);
    font-stretch: 100%;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.single-grid-product .product-content .product-price {
    font-size: var(--t-xs);
    color: var(--canto);
    margin-bottom: 0;
}

/* --- Atajos de categoría --------------------------------------------------
   Se les quita la versalita con letter-spacing del contador: esa etiqueta en
   mayúsculas es de las marcas más reconocibles de página generada. */
.categoria-atajo {
    border: var(--linea);
    border-radius: 2px;
    box-shadow: none;
    transition: border-color .18s ease;
}

.categoria-atajo:hover {
    border-color: var(--canto);
    box-shadow: none;
    transform: none;
}

.categoria-atajo__nombre {
    font-stretch: 112%;
    font-weight: 650;
    font-size: var(--t-m);
}

.categoria-atajo__conteo {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-s);
    font-weight: 500;
    color: var(--canto);
}

/* --- Encabezado de página ------------------------------------------------ */
.page-banner-section {
    border-bottom: var(--linea);
}

.page-breadcrumb,
.page-breadcrumb li,
.page-breadcrumb a {
    font-size: var(--t-s);
    color: #5B646E;
}

/* =========================================================================
   EL HERO
   Una sola idea: el vano. El titular a la izquierda —el centrado es el ajuste
   por defecto de la plantilla y hace que todo se parezca—, y debajo una cota
   como la de un plano de ventana. Es el único adorno de la página.
   ========================================================================= */
.hero-content-2,
.hero-content,
.vano__texto {
    text-align: left;
    max-width: 40rem;
}

.hero-content-2 h1,
.hero-content h1,
.vano__texto h1,
.vano__texto h2 {
    font-stretch: 118%;
    font-weight: 680;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--papel);
    text-shadow: 0 1px 18px rgba(0, 0, 0, .38);
}

.hero-entrada {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    font-weight: 500;
    color: #fff;
    max-width: 34rem;
    margin: 20px 0 30px;
    /* Dos sombras: una cerrada que despega la letra del fondo y otra abierta
       que apaga la zona clara de la foto. Medido: el parrafo pasa de 2.6:1 a
       mas de 7:1 sobre el punto mas claro del ventanal. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 22px rgba(0, 0, 0, .6);
}

/* La cota: línea con topes y una medida encima, como en un plano. */
.cota {
    display: block;
    margin-top: 42px;
    max-width: 22rem;
    color: rgba(255, 255, 255, .92);
}

.cota__medida {
    display: block;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin-bottom: 6px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* ⚠️ display:block no es opcional: un <span> inline no toma ancho, y la cota
   se veia como un guion de 2 px en vez de una linea. */
.cota__linea {
    display: block;
    position: relative;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .9);
}

/* Los topes de la cota, uno en cada extremo. */
.cota__linea::before,
.cota__linea::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, .85);
}

.cota__linea::before { left: 0; }
.cota__linea::after  { right: 0; }

.hero-item .btn {
    background: var(--papel);
    border-color: var(--papel);
    color: var(--azul);
}

.hero-item .btn:hover,
.hero-item .btn:focus {
    background: var(--canto);
    border-color: var(--canto);
    color: var(--papel);
}

/* --- Secciones: aire y línea, sin fondos grises ------------------------- */
.section.bg-gray,
.newsletter-section {
    background: var(--canto-claro);
}

/* ⚠️ La linea de separacion necesita su propio aire: el tema baja el padding
   de estas secciones en pantallas chicas (50 px en escritorio, 20 en telefono)
   y el titulo quedaba pegado a la linea. El selector lleva dos clases para
   ganarle a las utilidades pt-* del tema, que tienen una. */
.section.product-section,
.section.blog-section {
    border-top: var(--linea);
    padding-top: 74px;
}

.section.product-section .section-title,
.section.blog-section .section-title {
    margin-bottom: 34px;
}

@media (max-width: 991px) {
    .section.product-section,
    .section.blog-section {
        padding-top: 56px;
    }
}

@media (max-width: 575px) {
    .section.product-section,
    .section.blog-section {
        padding-top: 44px;
    }
}

/* --- Buscador ------------------------------------------------------------ */
.buscador__campos {
    border-radius: 2px;
    border-color: var(--aluminio);
}

.buscador__campos:focus-within {
    border-color: var(--canto);
    box-shadow: 0 0 0 3px rgba(78, 122, 114, .16);
}

.buscador__boton {
    background: var(--azul);
}

.buscador__boton:hover,
.buscador__boton:focus {
    background: var(--canto);
}

/* --- Menú ---------------------------------------------------------------- */
.main-menu > ul > li > a {
    font-size: var(--t-s);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tinta);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a {
    color: var(--canto);
}

/* --- Movimiento: uno solo, al cargar el hero -----------------------------
   La skill de diseño lo dice y es cierto: una entrada orquestada vale más que
   efectos por todas partes. Nada aparece al hacer scroll. */
@media (prefers-reduced-motion: no-preference) {
    .hero-content-2 h1,
    .hero-content h1 {
        animation: entrada .7s cubic-bezier(.22, .61, .36, 1) both;
    }

    .hero-entrada { animation: entrada .7s cubic-bezier(.22, .61, .36, 1) .08s both; }
    .hero-item .btn { animation: entrada .7s cubic-bezier(.22, .61, .36, 1) .16s both; }
    .cota { animation: cota-crece .9s cubic-bezier(.22, .61, .36, 1) .3s both; }
}

/* Se mueve la opacidad y un desplazamiento pequeño: nada que empuje el
   layout, para no tocar el CLS. */
@keyframes entrada {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes cota-crece {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width: 767px) {
    body { font-size: 1rem; }

    .hero-content-2,
    .hero-content,
    .vano__texto { max-width: none; }

    .cota { margin-top: 28px; max-width: 15rem; }

    .btn { padding: 13px 20px; }
}

/* --- Barra lateral del catálogo ------------------------------------------
   El tema pone sus títulos en versalitas con letter-spacing. Una etiqueta en
   mayúsculas es de los recursos más gastados que hay: dice "aquí empieza una
   sección" gritando, cuando el tamaño y el espacio ya lo dicen. */
.sidebar-title {
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--t-m);
    font-stretch: 112%;
}

.sidebar-list a {
    font-size: var(--t-s);
    color: var(--tinta);
}

.sidebar-list a:hover,
.sidebar-list a.active {
    color: var(--canto);
}

/* El tema capitaliza palabra por palabra en varios sitios; en español deja
   "Todos Los Productos". */
.sidebar-list a,
.page-breadcrumb li,
.product-content .title,
.categoria-atajo__nombre {
    text-transform: none;
}

/* --- Paginación -----------------------------------------------------------
   Números en línea, sin cajas: cada página es un enlace, y el actual se
   distingue por peso y por la línea del canto, no por un botón relleno. */
.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 40px;
    padding-top: 24px;
    border-top: var(--linea);
}

.paginacion__cuenta {
    margin: 0;
    font-size: var(--t-s);
    color: #5B646E;
    font-variant-numeric: tabular-nums;
}

.paginacion__lista {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginacion__numero,
.paginacion__salto {
    display: block;
    min-width: 40px;
    padding: 9px 12px;
    text-align: center;
    font-size: var(--t-s);
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    border: 1px solid transparent;
    border-radius: 2px;
}

.paginacion__numero:hover,
.paginacion__salto:hover {
    color: var(--canto);
    border-color: var(--aluminio);
}

.paginacion__numero--actual {
    font-weight: 650;
    color: var(--canto);
    border-color: var(--canto);
}

.paginacion__salto { font-weight: 500; }

.paginacion__hueco {
    padding: 0 4px;
    color: #98A1A8;
}

@media (max-width: 575px) {
    .paginacion {
        justify-content: center;
        text-align: center;
    }

    .paginacion__cuenta { width: 100%; }
}

/* ===========================================================================
   HERO EN CLARO
   Referencia que pidió Mario: reycom.cr, pero en claro. De ahí se toma la
   ESTRUCTURA —píldora sobre el titular, titular grande, dos botones (uno
   relleno y uno de línea), una nota chica y una tarjeta de datos flotando— y
   no la piel: nada de fondo azul noche, cian ni cristal esmerilado. El color
   sigue saliendo del material (el verde del canto del vidrio).
   ⚠️ El texto del hero va OSCURO sobre un velo blanco. Si se cambia la foto
   del slider hay que volver a medir: es el punto del sitio donde el contraste
   depende de la imagen.
   =========================================================================== */
.hero-content-2 h1,
.hero-content h1,
.hero-item .hero-content-2 h1,
.hero-item .hero-content-2 h2,
.vano__texto h1,
.vano__texto h2 {
    color: var(--azul);
    text-shadow: none;
}

.hero-entrada {
    color: #33404D;
    font-weight: 450;
    text-shadow: none;
}

/* La píldora: dice de una lo que más se pregunta, que es hasta dónde llegan. */
.marca-hero {
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 15px;
    border: 1px solid var(--canto);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: var(--canto);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0;
}

.hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* El segundo botón es de línea, no relleno: dos botones rellenos compiten y
   ninguno gana. */
.btn--linea {
    background: transparent;
    border: 1px solid var(--azul);
    color: var(--azul);
}

.btn--linea:hover,
.btn--linea:focus {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--papel);
}

.hero-item .btn--linea,
.vano__texto .btn--linea {
    background: rgba(255, 255, 255, .6);
}

.hero-nota {
    font-size: var(--t-xs);
    color: #5B646E;
    margin: 0;
    max-width: 30rem;
}

.cota { color: var(--azul); }

.cota__medida { text-shadow: none; opacity: .75; }

.cota__linea { background: rgba(30, 34, 85, .5); }

.cota__linea::before,
.cota__linea::after { background: rgba(30, 34, 85, .5); }

/* ⚠️ El orden importa: `.hero-item .btn` y `.hero-item .btn--linea` tienen la
   misma especificidad, asi que gana la ultima escrita. Con la de relleno
   despues, los dos botones salian identicos y el secundario dejaba de serlo. */
.hero-item .btn,
.vano__texto .btn {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--papel);
}

.hero-item .btn:hover,
.hero-item .btn:focus,
.vano__texto .btn:hover,
.vano__texto .btn:focus {
    background: var(--canto);
    border-color: var(--canto);
    color: var(--papel);
}

.hero-item .btn.btn--linea,
.vano__texto .btn.btn--linea {
    background: rgba(255, 255, 255, .72);
    border-color: var(--azul);
    color: var(--azul);
}

.hero-item .btn.btn--linea:hover,
.hero-item .btn.btn--linea:focus,
.vano__texto .btn.btn--linea:hover,
.vano__texto .btn.btn--linea:focus {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--papel);
}

/* La tarjeta de datos. Va donde la foto está limpia, no encima del texto. */
.tarjeta-hero {
    position: absolute;
    right: 5vw;
    bottom: 8%;
    z-index: 2;
    max-width: 19rem;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .94);
    border: var(--linea);
    border-radius: 2px;
}

.tarjeta-hero__titulo {
    margin: 0 0 8px;
    font-weight: 650;
    font-stretch: 112%;
    color: var(--azul);
    font-size: var(--t-base);
}

.tarjeta-hero__dato {
    margin: 0 0 12px;
    font-size: var(--t-s);
    line-height: 1.5;
    color: #33404D;
}

.tarjeta-hero__enlace {
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--canto);
}

/* Los puntos del slider, que el tema deja casi invisibles. */
.hero-slider .slick-dots li button:before {
    color: var(--azul);
    opacity: .35;
    font-size: 10px;
}

.hero-slider .slick-dots li.slick-active button:before {
    color: var(--canto);
    opacity: 1;
}

@media (max-width: 1199px) {
    .tarjeta-hero { display: none; }   /* en pantallas chicas taparía la foto */
}

@media (max-width: 575px) {
    .hero-botones .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* --- Banners de la portada -----------------------------------------------
   ⚠️ Al pasar los titulares al azul de la marca, estos quedaron en azul oscuro
   sobre fotos oscuras y dejaron de leerse. Llevan su propio velo y texto claro:
   son los unicos bloques del sitio con foto a sangre detras del texto. */
.single-banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.single-banner-item .banner-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 24, 29, .72) 0%, rgba(20, 24, 29, .38) 55%, rgba(20, 24, 29, .12) 100%);
    pointer-events: none;
}

.banner-content.tr-right .banner-image::after,
.banner-content.tr-right + .banner-image::after {
    background: linear-gradient(270deg, rgba(20, 24, 29, .72) 0%, rgba(20, 24, 29, .38) 55%, rgba(20, 24, 29, .12) 100%);
}

.single-banner-item .banner-content .title,
.single-banner-item .banner-content h3 {
    color: var(--papel);
    text-transform: none;
    font-stretch: 115%;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

.single-banner-item .banner-content a {
    color: var(--papel);
    font-weight: 600;
    text-transform: none;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.single-banner-item .banner-content a:hover {
    border-bottom-color: var(--papel);
}

/* --- El hero en el teléfono ----------------------------------------------
   ⚠️ El tema le fija 800 px de alto. Con la pildora, el titular a tres lineas,
   el parrafo y dos botones, el contenido no cabia y el boton quedaba cortado
   por el borde de la seccion. Aca el alto lo pone el contenido. */
@media (max-width: 991px) {
    .hero-item,
    .hero-section,
    .hero-slider,
    .hero-slider .slick-slide > div {
        height: auto !important;
        min-height: 0;
    }

    .hero-item {
        padding: 96px 0 110px;
    }

    .hero-slider .slick-dots {
        bottom: 26px;
    }
}

/* --- Encabezado de página -------------------------------------------------
   ⚠️ Con el texto en azul sobre la foto de la casa, el titulo caia a 1,4:1 y
   las migas a 1,2:1 en las zonas oscuras (las puertas de madera). El velo que
   trae horneado la imagen no alcanza para texto oscuro: se le suma este, que
   ademas no depende de que la foto no cambie nunca. */
.page-banner-section {
    position: relative;
}

.page-banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .9) 38%,
        rgba(255, 255, 255, .55) 68%,
        rgba(255, 255, 255, .2) 100%);
    pointer-events: none;
}

.page-banner-section .container {
    position: relative;
    z-index: 1;
}

.page-breadcrumb li,
.page-breadcrumb a {
    color: #4A545F;   /* mas oscuro que el gris anterior, para que se lea */
}

.page-breadcrumb a:hover { color: var(--canto); }

/* El titular del encabezado no necesita 1170 px de caja: acotarlo lo deja
   dentro de la zona donde el velo es fuerte, y de paso se lee mejor. */
.page-banner h1 {
    max-width: 22ch;
}

.page-banner .page-breadcrumb {
    max-width: 40ch;
}