/*
 * Lo de Diaglomerados encima de Carpento. Se carga después de style.css, así que pisa sus reglas sin tocar el
 * fichero de la plantilla: al actualizarla, basta con copiar el suyo nuevo.
 */

/* El rojo del logo en lugar del dorado de la plantilla. El oscuro (#24201F) se queda: con el rojo, funciona */
:root {
    --theme-color1: #83171c;
    /* La esquina del formulario de cotización: la plantilla la usa sin definirla */
    --theme-color1-dark: #5e1014;
    --link-color: #83171c;
    --link-hover-color: #5e1014;
    /*
     * El rojo del logo es oscuro: sobre el negro de la plantilla no se lee, como sí se leía su dorado. Encima de
     * un fondo oscuro va este, más claro, o directamente blanco.
     */
    --marca-sobre-oscuro: #f08a8e;
}

/* --- El rojo sobre fondos oscuros --- */

/* La barra de arriba: iconos y enlaces */
.header-style-one .header-top .inner-container .list-style-one i,
.header-style-one .header-top .inner-container .list-style-one li a:hover,
.header-style-one .header-top .inner-container .list-style-one.style-two li a:hover {
    color: var(--marca-sobre-oscuro);
}

/*
 * Los subtítulos de las secciones con foto oscura detrás (maquinaria, cotización), con su icono en el mismo rojo
 * claro. Los adornos dorados de la plantilla están pasados al rojo del logo en images/ (icons, pattern y
 * main-slider): no hay regla que los cambie, son los propios ficheros.
 */
.sec-title.light .sub-title {
    color: var(--marca-sobre-oscuro);
}
.sec-title.light .sub-title:before {
    background-image: url(../images/diaglomerados/titulo-claro.png);
}

/* La pregunta abierta: fondo negro, letra blanca */
.accordion-box .block .acc-btn.active,
.accordion-box .block .acc-btn.active .arrow {
    color: #fff;
}

/* Los enlaces del pie, sobre el negro */
.footer-bottom .copyright-text a {
    color: var(--marca-sobre-oscuro);
}

/* El botón oscuro de la franja de carpinteros: la plantilla le pone la letra del color de la marca */
.call-to-action .btn-box .theme-btn {
    color: #fff;
}

/* --- El menú: que quepa en una línea --- */

/* La plantilla separa cada opción 80 px, pensando en nombres cortos en inglés y en un logo más estrecho */
.main-menu .navigation > li {
    margin-right: 46px;
}
.main-menu .navigation > li:after {
    right: -25px;
}
@media (max-width: 1599.98px) {
    .main-menu .navigation > li {
        margin-right: 30px;
    }
    .main-menu .navigation > li:after {
        right: -17px;
    }
}

/* --- Misión y visión --- */

/* El taladro de adorno tapaba el final de cada línea del texto (y es una foto de la plantilla) */
.why-choose-us .icon-big-drill {
    display: none;
}
.why-choose-us .content-column .inner-column .sec-title {
    margin-right: 0;
}

/*
 * --- Escríbenos, llámanos, visítanos ---
 * La plantilla pone el título a la izquierda en dos palabras cortas («Write / Us»), que en español no hay. Aquí
 * cada bloque va en columna, con el título entero arriba, y los tres del mismo alto para que sus líneas de
 * separación midan lo mismo.
 */
.contact-info-section .contact-info-block .inner-box {
    flex-direction: column;
    height: 100%;
    padding: 0 40px;
}
.contact-info-section .contact-info-block:first-child .inner-box {
    padding-left: 0;
}
.contact-info-section .contact-info-block .inner-box .title {
    margin-right: 0;
    margin-bottom: 10px;
}
.contact-info-section .contact-info-block .inner-box .text p {
    margin-bottom: 0;
}
@media (max-width: 991.98px) {
    .contact-info-section .contact-info-block .inner-box {
        padding: 0;
        border: none;
    }
}

/*
 * --- La aplicación ---
 * Una sección propia, no de la plantilla, hecha con sus piezas (sec-title, list-style-two, theme-btn). Las
 * capturas del celular van dentro de un marco de teléfono, y la del panel, en una ventana de navegador.
 */
.seccion-aplicacion {
    position: relative;
    padding: 120px 0;
    background-color: #f7f4f1;
}
@media (max-width: 991.98px) {
    .seccion-aplicacion {
        padding: 90px 0;
    }
}
.seccion-aplicacion .sec-title .text {
    max-width: 640px;
    margin: 20px auto 0;
}
.fila-aplicacion {
    align-items: center;
    margin-bottom: 100px;
}
@media (max-width: 991.98px) {
    .fila-aplicacion {
        margin-bottom: 70px;
    }
    .fila-aplicacion .texto-aplicacion {
        margin-bottom: 40px;
    }
}
.etiqueta-aplicacion {
    display: inline-block;
    margin-bottom: 14px;
    padding: 2px 14px;
    border-radius: 20px;
    background-color: var(--theme-color1);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
}
.texto-aplicacion h3 {
    margin-bottom: 25px;
}
.texto-aplicacion .list-style-two {
    margin-bottom: 35px;
}
.texto-aplicacion .list-style-two li {
    margin-bottom: 8px;
}

/* Dos teléfonos, el segundo un poco más abajo: se ven como dos pantallas de la misma aplicación */
.telefonos {
    display: flex;
    justify-content: center;
    gap: 28px;
}
.telefono {
    width: 46%;
    max-width: 290px;
    margin: 0;
    border: 10px solid #24201f;
    border-radius: 36px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 25px 50px rgba(36, 32, 31, 0.22);
}
.telefono.desplazado {
    margin-top: 70px;
}
.telefono img,
.navegador img {
    display: block;
    width: 100%;
    height: auto;
}

/* El panel, dentro de una ventana: la barra con sus tres botones es solo de adorno */
.navegador {
    margin: 0;
    border: 1px solid #e1dbd4;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 25px 50px rgba(36, 32, 31, 0.16);
}
.navegador .barra {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    background-color: #ece7e1;
}
.navegador .barra span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #cfc6bc;
}

/* --- Cómo trabajamos: las cuatro tarjetas, del mismo alto --- */
#como-trabajamos .feature-block .inner-box {
    height: 100%;
}

/*
 * Mientras carga, el logo de Diaglomerados y no el de la plantilla. Su caja era de 140 × 140, para el logo cuadrado
 * de la plantilla: el nuestro es casi el doble de ancho que de alto (487 × 252) y se le cortaban la «D» y la «s».
 * Ahora la caja tiene su proporción, y el logo cabe entero.
 */
.preloader:after {
    width: 280px;
    height: 145px;
    margin-left: -140px;
    margin-top: -72px;
    background-image: url(../images/diaglomerados/logo.png);
    background-size: contain;
}
@media (max-width: 575.98px) {
    .preloader:after {
        width: 220px;
        height: 114px;
        margin-left: -110px;
        margin-top: -57px;
    }
}

/* El logo es más ancho que el de la plantilla (201 × 45): se limita por el alto */
.main-header .logo img {
    max-height: 46px;
    width: auto;
}
.sticky-header .logo img,
.mobile-menu .nav-logo img {
    max-height: 40px;
    width: auto;
}
.call-to-action .image-column .image img {
    max-height: 90px;
    width: auto;
}

/* El mapa, más alto que el de la plantilla: es por donde llega la gente */
.map-section .map {
    height: 450px;
    border: 0;
}

/* WhatsApp siempre a mano, abajo a la izquierda (a la derecha está el botón de subir) */
.boton-whatsapp {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 100;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}
.boton-whatsapp:hover {
    color: #fff;
    transform: scale(1.06);
}

/* Los colores de cada marca, como etiquetas */
.colores-de-marca {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.colores-de-marca li {
    padding: 2px 12px;
    border: 1px solid #e1dbd4;
    border-radius: 20px;
    font-size: 14px;
    line-height: 26px;
    color: #4a4540;
    background-color: #fff;
}
.catalogo-de-colores {
    margin-top: 50px;
}
.catalogo-de-colores .marca {
    height: 100%;
    padding: 30px;
    border-radius: 10px;
    background-color: #f7f4f1;
}
.catalogo-de-colores .marca h4 {
    margin-bottom: 0;
}
.catalogo-de-colores .marca .linea {
    font-size: 14px;
    line-height: 22px;
    color: #8a8178;
}
.catalogo-de-colores details summary {
    margin-top: 12px;
    cursor: pointer;
    font-weight: 600;
    color: var(--theme-color1);
}

/* El formulario de cotización, que no se envía a ningún servidor: abre WhatsApp con el mensaje escrito */
.contact-form .ayuda {
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* El horario del pie, en dos columnas */
.horario-del-pie li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 28px;
}
.horario-del-pie li strong {
    color: #fff;
    font-weight: 500;
}