/* Ajuste general para el banner de cookies */
.wp-block-jetpack-cookie-consent {
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
    max-width: 350px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    margin: 10px !important;
}

/* ==========================================================================
   AJUSTES ESPECÍFICOS PARA CELULARES (MÓVIL)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* --- Bloque de Cookies y WhatsApp --- */
    .wp-block-jetpack-cookie-consent {
        font-size: 11px !important; /* Letra más chica en celu */
        margin: 5px auto 80px auto !important; /* Espacio abajo para que no tape el WhatsApp */
        width: 90% !important;
    }
    
    .wp-block-jetpack-cookie-consent button {
        padding: 5px 10px !important; /* Botón más discreto */
    }

    /* --- Carrusel Deslizable de Proyectos --- */
    /* Forzamos al contenedor de las 5 columnas a convertirse en una tira horizontal */
    .fila-deslizable-movil {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
        padding-bottom: 15px !important;
        -webkit-overflow-scrolling: touch !important; /* Suavidad total en iPhone */
    }

    /* Forzamos a cada columna individual a NO romperse hacia abajo y mantener su ancho */
    .fila-deslizable-movil > .wp-block-column {
        flex: 0 0 55% !important; /* Cada render va a ocupar poco más de la mitad de la pantalla */
        min-width: 55% !important;
        max-width: 55% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
	
    /* --- Arreglo para el Botón de Contacto Estratégico (Alineado a la izquierda) --- */
    .boton-contacto-movil {
        width: 100% !important; /* Obliga al contenedor a usar todo el ancho disponible */
        display: flex !important;
        justify-content: flex-start !important; /* Alínea el botón a la izquierda con tu texto */
        margin: 25px auto !important;
    }

    .boton-contacto-movil .wp-block-button__link {
        width: auto !important;
        min-width: 80% !important; /* Le da un ancho elegante y cómodo para el pulgar */
        text-align: center !important;
        white-space: nowrap !important; /* Evita que las palabras se rompan en vertical */
        font-size: 15px !important; /* Equilibra el tamaño del texto en el celular */
        padding: 12px 24px !important; /* Aspecto mullido y profesional */
    }
}

/* ==========================================================================
   VISOR DE IMÁGENES (LIGHTBOX - BAGUETTEBOX)
   ========================================================================== */
/* Fondo del lightbox blanco limpio */
#baguetteBox-overlay {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

/* Cambia el color de las flechas y la cruz a negro sin romper su función */
#baguetteBox-overlay button svg {
    color: #111111 !important;
    fill: #111111 !important;
}

/* Color del texto del pie de foto a negro */
#baguetteBox-overlay .full-image figcaption {
    color: #111111 !important;
}

/* Cambia el fondo negro de los tres botones (flechas y cruz) a tu tono marrón */
#baguetteBox-overlay button {
    background-color: #8a7258 !important;
}

/* Fuerza a que las flechas y la cruz interna sean blanco puro */
#baguetteBox-overlay button svg * {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* 1. TIPOGRAFÍA DEL FORMULARIO: Fuente Domine y color corporativo tostado */
div.wpforms-container .wpforms-form, 
div.wpforms-container .wpforms-form .wpforms-field-label,
div.wpforms-container .wpforms-form label {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important;
    font-weight: 500 !important;
}

/* 2. CAMPOS OBLIGATORIOS: Asterisco en el mismo tono tostado */
div.wpforms-container .wpforms-form .wpforms-required-label {
    color: #8A7258 !important;
}

/* 3. CAJAS DE TEXTO Y DESPLEGABLES: Borde fino tostado, líneas rectas y texto legible */
div.wpforms-container .wpforms-form input[type="text"], 
div.wpforms-container .wpforms-form input[type="email"], 
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
    font-family: 'Domine', serif !important;
    border: 1px solid #8A7258 !important; /* Tu color para el borde fino */
    border-radius: 0px !important; /* Líneas rectas, estilo premium */
    padding: 12px !important;
    background-color: #ffffff !important;
    color: #333333 !important; /* Texto que escribe el cliente en gris oscuro para que se lea perfecto */
}

/* Forzar que las opciones de los desplegables se lean correctamente */
div.wpforms-container .wpforms-form select option {
    font-family: 'Domine', serif !important;
    color: #333333 !important;
    background-color: #ffffff !important;
}

/* 4. BOTÓN: Fondo verde oliva, texto blanco, negrita, rectangular y SIN mayúsculas automáticas */
div.wpforms-container .wpforms-form button[type="submit"],
div.wpforms-container .wpforms-form .wpforms-submit {
    background-color: #7D8650 !important; /* Tu verde oliva especial */
    background: #7D8650 !important;
    color: #ffffff !important; /* Letra blanca */
    font-family: 'Domine', serif !important;
    font-weight: 700 !important; /* Negrita */
    text-transform: none !important; /* Bloquea las mayúsculas, respeta "Enviar mensaje" */
    letter-spacing: 0.5px !important;
    border-radius: 0px !important; /* Rectángulo perfecto, sin curvas */
    border: none !important; /* Elimina cualquier borde verde brillante raro */
    outline: none !important;
    box-shadow: none !important;
    padding: 15px 35px !important;
    transition: background-color 0.3s ease !important;
    cursor: pointer !important;
}

/* Efecto al pasar el mouse por encima del botón (se oscurece sutilmente el verde) */
div.wpforms-container .wpforms-form button[type="submit"]:hover,
div.wpforms-container .wpforms-form .wpforms-submit:hover {
    background-color: #656d3f !important;
    background: #656d3f !important;
    color: #ffffff !important;
    border: none !important;
}

/* 3. PUNTO 3: Forzar tipografía Domine y color tostado cuando el usuario escribe */
div.wpforms-container .wpforms-form input[type="text"], 
div.wpforms-container .wpforms-form input[type="email"], 
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important;
}

/* 3. PUNTO 3: Forzar que el texto que escribe el usuario sea Domine y color tostado */
div.wpforms-container .wpforms-form input[type="text"], 
div.wpforms-container .wpforms-form input[type="email"], 
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important; /* El texto escrito pasa a ser tostado */
}

/* 4. PUNTO 4: Cambiar el fondo gris de la opción seleccionada/desplegada por tu color tostado */
div.wpforms-container .wpforms-form select option:checked,
div.wpforms-container .wpforms-form select:focus option:checked {
    background-color: #8A7258 !important; /* Tu color tostado de fondo */
    color: #ffffff !important; /* Letra blanca para que contraste perfecto */
}

/* 1. Solución al recorte: Ajustar tamaño, altura y centrado de la leyenda interna */
div.wpforms-container .wpforms-form select {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important; /* Color tostado para la leyenda inicial */
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding-top: 8px !important;   /* Centra el texto verticalmente */
    padding-bottom: 8px !important;
    height: auto !important;        /* Evita que la caja se aplaste */
}

/* 2. Forzar estética en las alternativas cuando el menú se despliega */
div.wpforms-container .wpforms-form select option {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important; /* Tus opciones en el tono tostado */
    background-color: #ffffff !important; /* Fondo blanco limpio */
    padding: 10px !important;
}

/* Ajuste extra para navegadores modernos que usan componentes internos */
div.wpforms-container .wpforms-form select::placeholder {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important;
}

/* 3. PUNTO 3: Forzar tipografía Domine y color tostado cuando el usuario escribe */
div.wpforms-container .wpforms-form input[type="text"], 
div.wpforms-container .wpforms-form input[type="email"], 
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important;
}

/* 4. PUNTO 4 (A): Ocultar la leyenda inicial dentro de la lista desplegada */
div.wpforms-container .wpforms-form select option[value=""],
div.wpforms-container .wpforms-form select option[disabled],
div.wpforms-container .wpforms-form select option:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 4. PUNTO 4 (B): Romper el bloqueo del navegador para quitar el fondo gris */
div.wpforms-container .wpforms-form select option:hover,
div.wpforms-container .wpforms-form select option:focus,
div.wpforms-container .wpforms-form select option:active,
div.wpforms-container .wpforms-form select option:checked {
    background: #8A7258 !important;
    background-color: #8A7258 !important;
    color: #ffffff !important;
}

/* Extensión para navegadores basados en Chromium (Chrome, Edge) */
div.wpforms-container .wpforms-form select::-ms-value {
    background-color: transparent !important;
    color: #8A7258 !important;
}

/* Tunear el recuadro de agradecimiento de WPForms */
div.wpforms-confirmation-container-full {
    background-color: #ffffff !important; /* Fondo blanco limpio o transparente */
    border: 1px solid #8A7258 !important; /* Borde fino con tu color tostado corporativo */
    border-radius: 0px !important; /* Líneas perfectamente rectas */
    padding: 25px !important;
}

/* Forzar tipografía Domine y color tostado en el texto de agradecimiento */
div.wpforms-confirmation-container-full, 
div.wpforms-confirmation-container-full p {
    font-family: 'Domine', serif !important;
    color: #8A7258 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}