/*
 * Estilos propios de CONSTRUVIAL.
 *
 * Va aparte y se carga de ultimo, encima del CSS de la plantilla. La razon:
 * style.css de nelson esta minificado a mano (no hay build ni watcher), asi que
 * cada vez que se tocara habria que reminificarlo. Aca no hace falta.
 */

:root {
    --construvial-azul: #1e2255;
    --construvial-rojo: #a81c3b;
}

/* El menu de la plantilla traia etiquetas de una palabra ("Shop", "Blog"), asi
   que "Preguntas frecuentes" se partia en dos lineas y descuadraba la barra. */
.main-menu > ul > li > a {
    white-space: nowrap;
}

/* --- Bloque de WhatsApp del encabezado ---
   Ocupa el lugar donde la plantilla tenia el carrito. El texto del carrito era
   corto ("$300.00(2)") y el numero de telefono no cabia: se partia en dos lineas
   y se montaba encima de la lupa. */
.header-search-cart-area > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-search-cart-area > ul > li {
    float: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.header-search-cart-area .fa-whatsapp {
    font-size: 22px;
    vertical-align: middle;
    margin-right: 6px;
}

.header-search-cart-area .mini-cart-total {
    font-size: 15px;
    font-weight: 600;
    vertical-align: middle;
}

/* --- Boton de cotizar sobre la tarjeta de producto ---
   Reemplaza al de agregar al carrito, asi que hereda su sitio pero con el verde
   de WhatsApp para que se lea como lo que es. */
.product-action .fa-whatsapp {
    font-size: 16px;
}

/* --- Boton grande de cotizar en la ficha de producto --- */
.add-to-link .btn .fa-whatsapp {
    margin-right: 8px;
    font-size: 18px;
}

/* --- Redes en el pie ---
   Antes habia una imagen con los logos de las tarjetas de pago. */
.payment-getway a {
    display: inline-block;
    margin-left: 12px;
    font-size: 20px;
}

/* --- Formulario de contacto ---
   La plantilla no traia estilos para <label>, asi que la etiqueta quedaba
   pegada al lado del campo en vez de encima. */
.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.contact-form .input-text,
.contact-form textarea.input-text {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.contact-form .nice-select {
    width: 100%;
    float: none;
}

/* --- Datos de contacto ---
   Lista de telefono, correo, direccion y horario. */
.contact-info .header-contact-info-list li {
    display: block;
    line-height: 1.7;
}

.contact-info .header-contact-info-list i {
    width: 22px;
}

/* --- Colores de marca ---
   La plantilla venia en blanco y negro. Estos son los del logo, leidos de la
   imagen que paso Mario: si el manual de marca dice otra cosa, se corrigen las
   dos variables de arriba y cambia todo el sitio de una vez. */
.btn,
.error-button a,
button.btn {
    background-color: var(--construvial-azul);
    border-color: var(--construvial-azul);
    color: #fff;
}

.btn:hover,
.error-button a:hover,
button.btn:hover {
    background-color: var(--construvial-rojo);
    border-color: var(--construvial-rojo);
    color: #fff;
}

.section-title h2::after,
.sidebar-title::after {
    background-color: var(--construvial-rojo);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a,
.sidebar-list a.active,
.blog .title a:hover,
.product-content .title a:hover {
    color: var(--construvial-rojo);
}

/* El icono de WhatsApp si va en su verde: es el color con el que la gente lo
   reconoce, y hacerlo azul solo lograria que se note menos. */
.header-search-cart-area .fa-whatsapp,
.product-action .fa-whatsapp {
    color: #25d366;
}

.btn .fa-whatsapp {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Buscador del catalogo (buscar.php)
   Vive aca y no en style.css porque ese esta minificado a mano: tocarlo obliga
   a reminificar. Los colores salen de las variables de marca de arriba.
--------------------------------------------------------------------------- */

/* La seccion usaba "section-padding", una clase que NO existe en el CSS del
   tema (grep en style.css: 0 coincidencias), asi que el formulario quedaba
   pegado al banner. */
.seccion-buscador {
    padding-top: 60px;
    padding-bottom: 70px;
}

/* Campo y boton como una sola pieza, con la lupa adentro. */
.buscador__campos {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.buscador__campos:focus-within {
    border-color: var(--construvial-azul);
    box-shadow: 0 0 0 3px rgba(30, 34, 85, .12);
}

.buscador__lupa {
    flex: 0 0 auto;
    padding: 0 6px 0 18px;
    color: #9a9a9a;
    font-size: 17px;
    line-height: 1;
}

.buscador__campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 58px;
    padding: 0 14px;
    border: 0;
    font-size: 17px;
    color: #222;
    background: transparent;
}

.buscador__campo:focus {
    outline: none;
}

/* Quita la X que ponen Chrome y Safari en los input[type=search]: se encima
   con el boton y descuadra la barra. */
.buscador__campo::-webkit-search-decoration,
.buscador__campo::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.buscador__boton {
    flex: 0 0 auto;
    height: 58px;
    padding: 0 32px;
    border: 0;
    background: var(--construvial-azul);
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .15s ease;
}

.buscador__boton:hover,
.buscador__boton:focus {
    background: var(--construvial-rojo);
    color: #fff;
}

.buscador__ayuda {
    margin: 12px 2px 0;
    font-size: 14px;
    color: #6d6d6d;
}

.buscador__ayuda a {
    color: var(--construvial-azul);
    border-bottom: 1px dotted currentColor;
}

/* Resultados: solo aparecen despues de escribir. */
.buscador__resultados {
    margin-top: 40px;
}

.buscador__resultados:empty {
    margin-top: 0;
}

.buscador__conteo {
    margin-bottom: 24px;
    font-weight: 600;
}

.buscador__vacio {
    padding: 10px 0 30px;
}

.buscador__categorias {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #ececec;
}

.buscador__titulo-categorias {
    margin-bottom: 24px;
}

/* Atajo de categoria: la tarjeta entera es el enlace, no solo el titulo. */
.categoria-atajo {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 22px 24px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.categoria-atajo:hover {
    border-color: var(--construvial-azul);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
    color: inherit;
}

.categoria-atajo__nombre {
    font-size: 18px;
    font-weight: 600;
    color: var(--construvial-azul);
    margin-bottom: 8px;
}

.categoria-atajo__resumen {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.6;
    color: #5f5f5f;
    margin-bottom: 14px;
}

.categoria-atajo__conteo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--construvial-rojo);
}

@media (max-width: 575px) {
    .seccion-buscador {
        padding-top: 40px;
        padding-bottom: 45px;
    }

    /* En movil la barra se parte en dos filas: un boton al lado de un campo de
       90px no se puede escribir. */
    .buscador__campos {
        flex-wrap: wrap;
    }

    .buscador__campo {
        height: 52px;
        font-size: 16px;      /* menos de 16 hace que iOS acerque el zoom */
        width: calc(100% - 46px);
    }

    .buscador__boton {
        width: 100%;
        height: 50px;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
}

/* El tema capitaliza palabra por palabra el titular del slider, y en espanol
   eso deja "Paredes Y Puertas De Vidrio": en ingles se escribe asi, aca no. */
.hero-content-2 h1,
.hero-content h1 {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Titular del slider en blanco.
   El tema lo trae en casi negro: se leia sobre la foto clara del primer slide
   y desaparecia sobre la casa oscura del segundo. En blanco pasaria lo
   contrario, asi que el color solo no alcanza: hace falta un velo oscuro sobre
   la foto para que el MISMO blanco funcione en los dos.
--------------------------------------------------------------------------- */
.hero-item {
    position: relative;
}

.hero-item::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Mas oscuro abajo, donde cae el texto, y casi limpio arriba para no
       apagar la foto entera. */
    /* Tema CLARO: el velo es blanco y el texto va oscuro. Los valores no son a
       ojo — se miden tapando el texto, porque su propia sombra falsea la
       lectura. Objetivo: 4.5:1 minimo en el punto mas claro de la foto. */
    background: linear-gradient(105deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .82) 38%, rgba(255, 255, 255, .35) 78%, rgba(255, 255, 255, .12) 100%);
    pointer-events: none;
}

.hero-item .container {
    position: relative;   /* por encima del velo */
    z-index: 1;
}

.hero-content-2 h1,
.hero-content h1 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}


/* Aviso de "estoy buscando".
   La espera entre tecleos es larga a proposito (2 s), asi que esto aparece en
   cuanto se teclea y no cuando sale la peticion: dos segundos sin ninguna senal
   se sienten como que el buscador no funciona. */
.buscador__cargando {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    color: #6d6d6d;
    font-size: 15px;
}

.buscador__spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #e2e2e2;
    border-top-color: var(--construvial-azul);
    border-radius: 50%;
    animation: buscador-gira .7s linear infinite;
}

@keyframes buscador-gira {
    to { transform: rotate(360deg); }
}

/* Quien pidio menos movimiento no ve el giro, pero si el aviso. */
@media (prefers-reduced-motion: reduce) {
    .buscador__spinner {
        animation: none;
        border-top-color: var(--construvial-azul);
        opacity: .6;
    }
}

/* ---------------------------------------------------------------------------
   Formulario de contacto y mapa
--------------------------------------------------------------------------- */
.aviso {
    padding: 16px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.aviso--bien {
    background: #eef7ee;
    border: 1px solid #cfe6cf;
    color: #24632a;
}

.aviso--mal {
    background: #fdefef;
    border: 1px solid #f2cdcd;
    color: #8c2020;
}

.aviso p {
    margin: 0 0 6px;
}

.aviso p:last-child {
    margin-bottom: 0;
}

/* Trampa para robots: fuera de la vista pero SIN display:none, que algunos
   bots detectan y saltan. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.acciones-formulario {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn--whatsapp {
    background: #25d366;
    border-color: #25d366;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus {
    background: #1da851;
    border-color: #1da851;
}

/* Mapa a ancho completo, pegado al pie.
   ⚠️ `clear: both` NO es decoracion: las secciones de esta plantilla llevan
   `float: left`, y sin limpiarlo el mapa se colocaba junto al contenido flotado
   en vez de debajo. Se subia hasta arriba de la pagina y tapaba el boton de
   enviar del formulario de contacto, que quedaba sin poder pulsarse. */
.mapa-ubicacion {
    clear: both;
    position: relative;
    line-height: 0;
}

.mapa-ubicacion iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    filter: grayscale(.15);
}

.mapa-ubicacion__enlace {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    background: #fff;
    color: var(--construvial-azul);
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 18px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.mapa-ubicacion__enlace:hover {
    color: var(--construvial-rojo);
}

/* De dos por fila en movil, alineados y de una palabra. */
@media (max-width: 575px) {
    .acciones-formulario .btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    .mapa-ubicacion iframe {
        height: 320px;
    }

    .mapa-ubicacion__enlace {
        left: 12px;
        bottom: 12px;
        font-size: 14px;
        padding: 10px 14px;
    }
}

/* Paginas de texto legal: ancho de lectura comodo y aire entre secciones. */
.texto-legal h2 {
    font-size: 22px;
    margin: 34px 0 12px;
}

.texto-legal p,
.texto-legal li {
    line-height: 1.8;
}

.nota-privacidad {
    font-size: 14px;
    color: #6d6d6d;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Logotipo
   La plantilla traia un PNG de 117x25 y lo mostraba a tamano natural. El de
   CONSTRUVIAL es mas alto (isotipo redondo + nombre), asi que se fija por ALTO
   y el ancho sale solo: si algun dia se cambia el archivo por otro de distinta
   proporcion, no hay que tocar nada aca.
--------------------------------------------------------------------------- */
.logo-area img,
.header-logo img {
    height: 40px;
    width: auto;
    max-width: none;
}

/* El logotipo es mas ancho que el de la plantilla y quedaba pegado a "Inicio". */
.logo-area {
    padding-right: 26px;
}

@media (max-width: 991px) {
    .logo-area img,
    .header-logo img {
        height: 38px;
    }
}

/* ---------------------------------------------------------------------------
   Tarjetas de producto en el telefono
   Pasan a dos columnas (col-6), asi que el texto tiene que achicarse o los
   nombres largos parten en cuatro lineas y descuadran la fila.
--------------------------------------------------------------------------- */
@media (max-width: 575px) {
    /* ⚠️ El selector lleva .product-content a proposito: el del tema es
       `.single-grid-product .product-content .title` (tres clases) y le gana a
       uno de dos. Sin eso, esta regla se ignora y el titulo se queda en 18 px. */
    .single-grid-product .product-content .title,
    .single-grid-product .product-content .title a {
        font-size: 15px;
        line-height: 1.35;
    }

    .single-grid-product .product-content .title a {
        display: block;
    }

    .single-grid-product .product-content .product-price,
    .single-grid-product .product-content .product-price a {
        font-size: 13px;
    }

    .single-grid-product {
        margin-bottom: 24px !important;
    }

    /* Menos aire entre columnas: con dos por fila, 30 px de canal se comen el
       ancho util de la foto. */
    .product-grid-view > .row,
    #buscador-resultados > .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .product-grid-view > .row > [class*="col-"],
    #buscador-resultados > .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ---------------------------------------------------------------------------
   Barra fija de la ficha de producto
   El boton de cotizar del cuerpo queda muy abajo en un telefono; esta acompana
   toda la pagina. En escritorio no hace falta: ahi el boton se ve sin bajar.
--------------------------------------------------------------------------- */
.barra-producto {
    display: none;
}

@media (max-width: 991px) {
    .barra-producto {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }

    .barra-producto__nombre {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--construvial-azul);
        line-height: 1.25;
        /* Un nombre largo no puede empujar al boton fuera de la pantalla. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .barra-producto__boton {
        flex: 0 0 auto;
        background: #25d366;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .barra-producto__boton:hover,
    .barra-producto__boton:focus {
        background: #1da851;
        color: #fff;
    }

    /* Que la barra no tape el final de la pagina ni el pie. */
    body:has(.barra-producto) .footer-section {
        padding-bottom: 70px;
    }
}

/* ---------------------------------------------------------------------------
   Cuadricula pareja
   Las fotos de producto no tienen todas la misma proporcion (las del banco son
   540x580 y las del proveedor 600x600), asi que cada tarjeta media distinto y
   la cuadricula quedaba escalonada. Se fija la proporcion de la plantilla
   (270x290) y se recorta lo que sobra, en vez de deformar la foto.
--------------------------------------------------------------------------- */
.single-grid-product .product-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 27 / 29;
    object-fit: cover;
}

/* Dos lineas de titulo reservadas: con nombres de largo distinto, el "Cotizar"
   de cada tarjeta quedaba a distinta altura. */
.single-grid-product .product-content .title {
    min-height: 2.7em;
}

@media (max-width: 575px) {
    .single-grid-product .product-content .title {
        min-height: 4em;   /* a 15 px caben 3 lineas en una columna angosta */
    }
}