/* --- Estilos Base para Detalles con Imagen --- */

/* 1. Resetear el bloque detalles */
details.btn-img-desplegable {
    /* Ancho completo menos el margen deseado (ej. 20px a cada lado = 40px total) */
    width: calc(100% - 40px); 
    
    /* Centrar el botón y dar espacio abajo */
    margin: 0 auto 20px auto; 
    
    border: none;
}

/* 2. Estilo del "Botón" (Summary) */
details.btn-img-desplegable > summary {
    list-style: none; /* Quitar flecha estándar */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* Dimensiones del botón */
    width: 100%;
    height: 200px; /* Ajusta la altura a tu gusto */
    
    /* Tipografía */
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7); /* Sombra para leer mejor */
    
    /* Fondo y Bordes */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    
    filter: grayscale(70%) brightness(0.9);
    
    
    transition: filter 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

/* Quitar flecha en Chrome/Safari */
details.btn-img-desplegable > summary::-webkit-details-marker {
    display: none;
}

/* 3. Efecto Hover (Al pasar el mouse) */
details.btn-img-desplegable > summary:hover {
    /* Recupera todo el color y el brillo original */
    filter: grayscale(0%) brightness(1.1); 
    
    /* Efecto de movimiento */
    transform: scale(1.02); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    z-index: 1; /* Asegura que se superponga si es necesario */
}

/* 4. Estilo del contenido cuando se despliega */
details.btn-img-desplegable[open] > summary {
    /* Mantiene el color vivo mientras esté abierto */
    filter: grayscale(0%) brightness(1);
    
    /* Ajustes de borde para conectar con el contenido */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

details.btn-img-desplegable[open] > div {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    
    /* Pequeña animación de entrada */
    animation: slideDown 0.4s ease-out;
}

/* --- Aquí pones TUS imágenes --- */

/* Botón 1 */
.btn-fondo-1 > summary {
    /* PEGA AQUÍ LA URL DE TU PRIMERA IMAGEN */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://ambientesuringenieria.com.ar/wp-content/uploads/reencuadre.jpg');
}

/* Botón 2 */
.btn-fondo-2 > summary {
    /* PEGA AQUÍ LA URL DE TU SEGUNDA IMAGEN */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('http://ambientesuringenieria.com.ar/wp-content/uploads/camion y new holland trabajando.jpeg');
}

/* Animación simple */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); };
    to { opacity: 1; transform: translateY(0); };
}
.contenedor-formulario-contacto *,
.wpcf7-form-control-wrap,
.wpcf7 input,
.wpcf7 textarea {
    box-sizing: border-box !important; /* El padding no suma al ancho total */
    max-width: 100% !important;        /* Nunca ser más ancho que el padre */
}
.wpcf7 {
    display: flex;
    justify-content: center;
    width: 100%;
}
.wpcf7-form {
    width: 100%; 
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center;    /* Centra los elementos horizontalmente */
    text-align: center;
    background-color: #4c4b4b78;
}
/* Estilo para los inputs del formulario */
.wpcf7-form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Botón de enviar */
.wpcf7-submit {
    background-color: #000000; /* Tu color principal */
    color: #fff;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    align-items: center;
    justify-content: center;
}

.wpcf7-submit:hover {
    background-color: #333;
}
/* Forzar ancho completo real eliminando paddings del tema */
.seccion-full-width {
    width: 100vw; /* 100% del ancho de la ventana (Viewport Width) */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
}

/* Asegurar que el iframe del mapa llene el espacio */
.seccion-full-width iframe {
    display: block; /* Quita el margen inferior fantasma de los iframes */
    width: 100%;
}


/* Asegurar que el slider tenga altura */
/* =========================================
   ESTILOS CARRUSEL PRO (Estable y Limpio)
   ========================================= */

/* 1. Contenedor Principal (Sin fondo de color) */
.mi-carrusel-pro {
    position: relative;
    background-color: transparent !important; /* Quitamos el fondo gris oscuro */
    padding: 10px 5px 40px 5px; /* Un poco de aire alrededor, espacio abajo para puntos */
    overflow: hidden; /* Mantiene todo contenido */
}

/* 2. El Envoltorio (La clave de la estabilidad vertical) */
/* =========================================
   FIX DEFINITIVO: TARJETAS ELÁSTICAS CON TEXTO VISIBLE
   ========================================= */

/* 1. Wrapper: Alineación superior para evitar saltos */
.swiper-wrapper {
    display: flex;
    align-items: flex-start !important;
}

/* 2. La Tarjeta (Slide) */
.mi-carrusel-pro .swiper-slide {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    
    /* ALTURA: Auto para que entre todo el texto */
    height: auto !important;
    min-height: 400px !important; /* Mínimo para que se vean uniformes */
    
    display: flex;
    flex-direction: column;
}

/* 3. El Bloque Fondo (Contenedor interno) */
/* CORRECCIÓN: Quitamos la altura fija de aquí para que el texto quepa */
.mi-carrusel-pro .swiper-slide .wp-block-cover {
    height: auto !important; 
    min-height: 100% !important;
    padding: 0 !important; /* Quitamos padding del bloque para que la imagen toque bordes */
    display: flex !important;
    flex-direction: column !important; /* Apilar Imagen y Texto */
    background: transparent !important;
}

/* 4. LA IMAGEN (Solo la foto mide 300px) */
.mi-carrusel-pro .swiper-slide .wp-block-cover__image-background,
.mi-carrusel-pro .swiper-slide img {
    position: relative !important; /* Importante para que ocupe espacio físico */
    height: 300px !important;      /* Altura fija de la foto */
    width: 100% !important;
    object-fit: cover !important;
    order: -1;                     /* Mandar la foto arriba del todo */
    margin: 0 !important;
}

/* 5. El Contenedor de Texto (El área blanca abajo) */
.mi-carrusel-pro .swiper-slide .wp-block-cover__inner-container,
.mi-carrusel-pro .swiper-slide .wp-block-group {
    /* Reducimos el padding general de 20px a 15px */
    padding: 15px !important; 
    
    /* CRUCIAL: Reducimos drásticamente el espacio superior para acercarlo a la foto */
    padding-top: 10px !important; 
    
    color: #333333 !important;
    background-color: transparent !important;
    flex-grow: 1;
    z-index: 10;
}

/* 6. Forzar visibilidad de los textos (H2, P, etc) */
.mi-carrusel-pro .swiper-slide h2,
.mi-carrusel-pro .swiper-slide h3,
.mi-carrusel-pro .swiper-slide strong {
    color: #000000 !important;
    display: block !important;
    
    /* Quitamos el margen de arriba para que se pegue a la foto */
    margin-top: 0 !important; 
    
    /* Reducimos el margen de abajo para acercarlo al párrafo */
    margin-bottom: 5px !important; 
    
    /* Ajustamos la altura de línea para que no ocupe tanto alto */
    line-height: 1.2 !important; 
}

.mi-carrusel-pro .swiper-slide p {
    color: #555555 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.95rem;
    
    /* Quitamos márgenes extraños */
    margin-top: 0 !important;
    margin-bottom: 0 !important; 
    line-height: 1.4;
}

/* 7. Flechas centradas en la imagen */
.mi-carrusel-pro .swiper-button-next,
.mi-carrusel-pro .swiper-button-prev {
    top: 150px !important; /* Mitad de la imagen (300px / 2) */
    transform: translateY(-50%);
}

/* Paginación (Puntos abajo) */
.mi-carrusel-pro .swiper-pagination {
    bottom: 0px !important;
}

.mi-carrusel-pro .swiper-pagination-bullet {
    background: #ccc; /* Punto inactivo gris claro */
    opacity: 1;
    width: 10px;
    height: 10px;
}

.mi-carrusel-pro .swiper-pagination-bullet-active {
    background: #333; /* Punto activo oscuro */
}
/* --- ESTILOS FORMULARIO DE CONTACTO (Fix ej3.png) --- */

/* 1. El Contenedor (para centrar y limitar el ancho) */
.contenedor-formulario-contacto {
    width: 100%;
    max-width: 600px !important; /* Ancho máximo ideal para formularios */
    margin: 0 auto !important;   /* Centrar el bloque en la pantalla */
}

/* 2. Estilo de los Campos (Inputs y Textarea) */
.contenedor-formulario-contacto input[type="text"],
.contenedor-formulario-contacto input[type="email"],
.contenedor-formulario-contacto textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Borde gris muy suave */
    border-radius: 12px;       /* Bordes redondeados como tus tarjetas */
    padding: 15px 20px;        /* Espacio interno cómodo */
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;       /* Separación entre campos */
    outline: none;             /* Quitar borde azul feo al hacer clic */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); /* Sombra muy sutil */
}

/* Efecto al hacer clic en un campo (Focus) */
.contenedor-formulario-contacto input:focus,
.contenedor-formulario-contacto textarea:focus {
    border-color: #000000; /* El borde se pone negro al escribir */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 3. Ajuste específico para el Área de Texto (Mensaje) */
.contenedor-formulario-contacto textarea {
    min-height: 150px; /* Altura mínima */
    max-height: 300px; /* Altura máxima */
    resize: vertical;  /* Permitir al usuario estirarlo solo hacia abajo */
}

/* 4. El Botón de Enviar */
.contenedor-formulario-contacto input[type="submit"] {
    width: 100%;             /* Botón ancho completo (o pon 'auto' si lo quieres chico) */
    background-color: #000;  /* Negro */
    color: #fff;             /* Texto blanco */
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;     /* Botón tipo "Pastilla" */
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
    margin-top: 10px;
}

/* Efecto Hover del botón */
.contenedor-formulario-contacto input[type="submit"]:hover {
    background-color: #333; /* Un poco más claro */
    transform: translateY(-2px); /* Se levanta un poquito */
}

/* --- BOTÓN FLOTANTE WHATSAPP --- */
.btn-whatsapp {
    position: fixed; /* Se queda fijo al hacer scroll */
    bottom: 30px;    /* Distancia desde abajo */
    right: 30px;     /* Distancia desde la derecha */
    width: 60px;     /* Tamaño del círculo */
    height: 60px;
    background-color: #25d366; /* Verde WhatsApp Oficial */
    color: #fff;
    border-radius: 50%; /* Lo hace redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra para que destaque */
    z-index: 9999; /* ¡CRUCIAL! Asegura que esté por encima de todo (mapas, footers) */
    transition: all 0.3s ease; /* Suavidad al pasar el mouse */
}

/* Forzar limpieza del botón WhatsApp */
.btn-whatsapp:before,
.btn-whatsapp:after {
    content: none !important; /* Elimina iconos automáticos del tema */
    display: none !important;
}

/* Asegurar que nuestra imagen se vea bien */
.btn-whatsapp img {
    width: 35px !important;
    height: 35px !important;
    pointer-events: none; /* Para que el clic pase a través de la imagen */
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajuste para móviles (un poco más pequeño para no molestar) */
@media (max-width: 768px) {
    .btn-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    /* Ajustar el tamaño del icono SVG dentro */
    .btn-whatsapp svg {
        width: 28px;
        height: 28px;
    }
}