/* ==========================================================================
   1. ESTILOS GENERALES Y CONFIGURACIÓN DE BASE
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    color: #1a1a1a;
}

.container {
    max-width: 1400px;
    margin: auto;
}

.color-acento {
    color: rgb(255, 169, 77);
}

/* Tipografías base */
h1 { font-size: 3.5em; }
h2 { font-size: 2.7em; }
h3 { font-size: 2em; }
p { font-size: 1.25em; }
ul { list-style: none; padding: 0; margin: 0; }
li { font-size: 1.25em; }

/* Botón general por defecto */
button {
    font-size: 1.25em;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 5px;
    border: 2px solid rgba(0,0,0,0.3);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    color: white;
    background-color: rgb(255, 169, 77);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: rgb(59, 59, 59);
}

/* ==========================================================================
   2. BARRA DE NAVEGACIÓN FLOTANTE PREMIUM
   ========================================================================== */
.menu-premium-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: rgba(51, 51, 51, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    padding: 12px 0 !important;
    transition: all 0.3s ease !important;
}

.menu-premium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.menu-premium-logo-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.menu-premium-iconologo {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
}

.menu-premium-logo-text {
    color: #f1f1f1 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.menu-premium-nav {
    display: flex !important;
    gap: 25px !important;
}

.menu-premium-nav a {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    padding: 8px 4px !important;
    position: relative !important;
    display: inline-block !important;
    transition: color 0.3s ease !important;
}

.menu-premium-nav a::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 3px !important;
    bottom: 0 !important;
    left: 50% !important;
    background-color: #fb8500 !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
}

.menu-premium-nav a:hover {
    color: #fb8500 !important;
}

.menu-premium-nav a:hover::after {
    width: 100% !important;
}

/* ==========================================================================
   3. SECCIÓN HERO (PORTADA PRINCIPAL)
   ========================================================================== */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 90vh;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("img/obra3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#hero h1 {
    color: white;
}

#hero button {
    font-size: 1.7em;
}

/* Botones de acción llamativos */
.btn-anzuelo {
    display: inline-block;
    margin-top: 25px;
    padding: 15px 35px;
    background-color: #ffb703;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0px 5px 15px rgba(255, 183, 3, 0.4);
    transition: all 0.3s ease;
}

.btn-anzuelo:hover {
    background-color: #fb8500;
    transform: translateY(-3px);
    box-shadow: 0px 8px 20px rgba(251, 133, 0, 0.6);
}

/* ==========================================================================
   4. TÍTULOS DE SECCIÓN REUTILIZABLES (CON BARRA NARANJA)
   ========================================================================== */
#somos-proya h2, 
#caracteristicaemp-seccion h2,
#contacto h2, 
#obras h2,
#servicios-principal h2 {
    text-align: center !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;         
    text-transform: uppercase !important; 
    margin-bottom: 60px !important;
    position: relative !important;
    padding-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}

#somos-proya h2::after, 
#caracteristicaemp-seccion h2::after,
#contacto h2::after,
#obras h2::after,
#servicios-principal h2::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;              
    transform: translateX(-50%) !important; 
    bottom: 0 !important;
    width: 80px !important;            
    height: 5px !important;
    background-color: #fb8500 !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   5. SECCIÓN QUIENES SOMOS (ESTRUCTURA DE DOS COLUMNAS RECUPERADA)
   ========================================================================== */
#somos-proya {
    background-color: #ffffff;
    padding: 80px 0;
}

#somos-proya .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;
    text-align: left !important;
}

#somos-proya .img-container {
    flex: 1 !important;
    min-width: 300px;
    height: 400px !important;
    background-image: url("img/somos.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1) !important;
}

#somos-proya .texto {
    flex: 1 !important;
}

#somos-proya .texto h2 {
    text-align: left !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

#somos-proya .texto h2::after {
    left: 0 !important;
    transform: none !important;
}

#somos-proya .texto p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin-bottom: 25px !important;
}

#somos-proya ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#somos-proya ul li {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    background-color: #f9f9f9 !important;
    padding: 15px 20px !important;
    border-left: 5px solid #fb8500 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

#somos-proya ul li:hover {
    background-color: #f1f1f1 !important;
    transform: translateX(5px) !important;
}

/* ==========================================================================
   6. SECCIÓN SERVICIOS EN ZIG-ZAG (PROPORCIONES REPARADAS)
   ========================================================================== */
#servicios-principal {
    background-color: #ebeced;
    padding: 80px 0;
}

.container-zigzag {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fila-zigzag {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
    margin-bottom: 80px !important;
}

.fila-zigzag:nth-child(even) {
    flex-direction: row-reverse !important;
}

.col-texto {
    flex: 1 !important;
}

.col-texto h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fb8500 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

.col-texto p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin-bottom: 25px !important;
}

.btn-saber-mas {
    display: inline-block !important;
    padding: 10px 22px !important;
    border: 2px solid #fb8500 !important;
    color: #fb8500 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

.btn-saber-mas:hover {
    background-color: #fb8500 !important;
    color: #fff !important;
}

.col-imagen {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.col-imagen img {
    width: 100% !important;
    max-width: 500px !important;
    height: 320px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1) !important;
}


/* FORZADO DE CENTRADO TOTAL PARA EL BOTÓN DE GALERÍA */
.bloque-galeria-enlace {
    display: flex !important;
    justify-content: center !important; /* Centra horizontalmente */
    align-items: center !important;     /* Centra verticalmente */
    width: 100% !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.btn-galeria-final {
    display: inline-block !important;
    margin: 0 auto !important; /* Respaldo para el centrado */
    text-align: center !important;
    /* Aseguramos que no tenga márgenes laterales que lo empujen */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   7. SECCIÓN CARACTERÍSTICAS DE LA EMPRESA
   ========================================================================== */
#caracteristicaemp-seccion {
    padding: 60px 0 80px 0 !important;
    background-color: #ffffff !important;
    text-align: center;
}

.bloques-caracteristicaemp {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.item-caracteristicaemp {
    flex: 1;
    min-width: 280px;
    background: #fdfdfd;
    padding: 30px 20px;
    border-radius: 10px;
    border-top: 4px solid #fb8500;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.item-caracteristicaemp:hover {
    transform: translateY(-5px);
}

.icono-caracemp {
    font-size: 40px;
    margin-bottom: 15px;
}

.item-caracteristicaemp h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.item-caracteristicaemp p {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

/* ==========================================================================
   8. SECCIÓN formulario de contactos
   ========================================================================= */
.seccion-formulario {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.seccion-formulario input, 
.seccion-formulario select, 
.seccion-formulario textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0 20px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Importante para que no se salga del margen */
}

.seccion-formulario button {
    background-color: #fb8500;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 5px;
    width: 100%;
    font-weight: bold;
    cursor: pointer;
}

.seccion-formulario button:hover {
    background-color: #d67200;
}





/* ==========================================================================
   8. SECCIÓN REDES SOCIALES PREMIUM (RÉPLICA EXACTA DE LA IMAGEN 10)
   ========================================================================= */
.redescocialesgaleria {
    position: relative !important;
    background-color: #ffffff !important;
    padding: 120px 20px 140px 20px !important; /* Más espacio para lucir el fondo */
    text-align: center !important;
    width: 100% !important;
    border-top: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
}

/* 🎯 LA MARCA DE AGUA VECTORIAL (SVG) - RÉPLICA PRECISA */
.redescocialesgaleria::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 550px !important; /* Tamaño del dibujo */
    height: 450px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
    opacity: 0.02 !important; /* ¡SUPER IMPORTANTE! Transparencia muy alta */
    
    /* Imagen vectorial codificada (Líneas de casa precise + Compás precise + Herramientas precise) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cg fill='none' stroke='%23222' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Estructura Casa Precise --%3E%3Cpath d='M400 80 L120 300 L120 520 L680 520 L680 300 Z'/%3E%3Cpath d='M120 300 L680 300'/%3E%3Cpath d='M400 80 V300'/%3E%3Cpath d='M230 300 L400 130 L570 300'/%3E%3C!-- Compás Precise --%3E%3Ccircle cx='400' cy='360' r='10'/%3E%3Cpath d='M400 370 L340 520 M400 370 L460 520 M360 430 A60 60 0 0 1 440 430'/%3E%3C!-- Herramientas Precise --%3E%3Crect x='350' y='460' width='100' height='40' rx='5'/%3E%3Ccircle cx='375' cy='480' r='6'/%3E%3Ccircle cx='425' cy='480' r='6'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* El contenido (texto e iconos) debe ir por encima de la marca de agua */
.titulo-redes-galeria,
.redes-iconos-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Título estilizado y limpio */
.titulo-redes-galeria {
    font-size: 2.3rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    margin-bottom: 50px !important;
    letter-spacing: 0.6px !important;
}

/* Contenedor de los iconos */
.redes-iconos-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important; /* Espacio exacto */
}

/* 🎯 ICONOS BASE (Réplica de imagen 10) - Limpios, Sin Círculo, Con Trazo Naranja */
.redes-iconos-container a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important; /* El tamaño lo da el icono */
    height: auto !important;
    background-color: transparent !important; /* SÚPER IMPORTANTE: Fondo transparente */
    color: #222222 !important; /* Icono base oscuro */
    border-radius: 0 !important; /* Sin esquinas redondeadas en el contenedor */
    font-size: 28px !important; /* Tamaño de icono base */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: none !important; /* Sin sombra en el contenedor */
    border: none !important;
    position: relative !important;
}

/* El truco del trazo naranja sutil alrededor de cada icono (réplica de imagen 10) */
.redes-iconos-container a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    color: #222222 !important;
    border-radius: 0 !important;
    /* 🎯 AQUÍ AUMENTAMOS EL TAMAÑO (de 28px a 40px) */
    font-size: 40px !important; 
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    margin: 0 15px !important; /* Espaciado lateral extra */
}

/* EFECTO HOVER PREMIUM - Réplica de imagen 10 */
.redes-iconos-container a:hover {
    color: #fb8500 !important; /* El icono se ilumina en naranja corporativo */
    transform: translateY(-8px) !important; /* Animación de salto */
}

/* ==========================================================================
   8. SECCIÓN TESTIMONIOS
   ========================================================================*/

.seccion-testimonios { padding: 60px 20px; background: #efefef; }
.seccion-testimonios h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }

.carrusel-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.carrusel-contenedor {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 30px;
    padding: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.testimonio-card {
    min-width: 320px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    scroll-snap-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Estilo del Avatar Circular */
.avatar-container {
    width: 80px; height: 80px; margin: 0 auto 15px;
    border-radius: 50%; overflow: hidden; border: 3px solid #fb8500;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; }

.estrellas { color: #fb8500; margin: 15px 0; font-size: 1.2rem; }

/* Botones Navegación */
.nav-btn {
    background: #fb8500; /* Fondo naranja, como tu marca */
    color: #ffffff;      /* Icono/flecha blanca */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra suave para que destaque */
    font-size: 1.2rem;
    z-index: 10;
    margin: 0 15px;
    display: flex;       /* Alineación perfecta de la flecha */
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease; /* Pequeña animación al pasar el ratón */
}

/* Efecto al pasar el mouse por encima */
.nav-btn:hover {
    background: #e67700; /* Un naranja un poco más oscuro al pasar el ratón */
}

@media (max-width: 768px) {
    .nav-btn { display: none; } /* Ocultar flechas en móvil */
}




/* ==========================================================================
   8. FIN SECCIÓN TESTIMONIOS
   ========================================================================*/




/* Adaptación responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .redescocialesgaleria {
        padding: 60px 15px 80px 15px !important;
    }
    .redescocialesgaleria::before {
        width: 300px !important; /* Marca de agua más pequeña en móvil */
        height: 250px !important;
    }
    .titulo-redes-galeria {
        font-size: 1.7rem !important;
    }
    .redes-iconos-container {
        gap: 20px !important;
    }
    .redes-iconos-container a {
        font-size: 22px !important;
    }
}

/* Adaptación responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .redescocialesgaleria {
        padding: 60px 15px 80px 15px !important;
    }
    .redescocialesgaleria::before {
        width: 300px !important; /* Marca de agua más pequeña en móvil */
        height: 250px !important;
    }
    .titulo-redes-galeria {
        font-size: 1.7rem !important;
    }
    .redes-iconos-container {
        gap: 20px !important;
    }
    .redes-iconos-container a {
        font-size: 22px !important;
    }
}





/* ==========================================================================
   10. BOTÓN FLOTANTE DE CONTACTO (WHATSAPP + AVATAR)
   ========================================================================== */
.contenedor-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manitas-avatar {
    width: 65px;
    height: auto;
    margin-bottom: -10px;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
    animation: flotarManitas 3s ease-in-out infinite;
}

.btn-whatsapp {
    position: relative;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #20ba5a;
    transform: scale(1.1);
}

.tooltip-texto {
    visibility: hidden;
    position: absolute;
    right: 75px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.btn-whatsapp:hover .tooltip-texto {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   11. SECCIÓN DE CIERRE Y CONTACTO PREMIUM (RECONSTRUIDA INTEGRALMENTE)
   ========================================================================== */
#final-contacto-premium {
    background-image: linear-gradient(rgba(43, 43, 43, 0.85), rgba(43, 43, 43, 0.9)), url('img/work2.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    padding: 80px 20px !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    margin-top: 40px !important;
}

#final-contacto-premium h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    max-width: 800px;
    margin: 0 auto 20px auto !important;
    line-height: 1.3;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

#final-contacto-premium h2::after {
    display: none !important;
}

.subtexto-final {
    font-size: 18px !important;
    color: #cccccc !important;
    margin-bottom: 40px !important;
}

.grid-contacto-rapido {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    margin: 0 auto 40px auto !important;
    max-width: 1100px !important;
}

.item-contacto-directo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    min-width: 280px !important;
    justify-content: center !important;
}

.item-contacto-directo span {
    font-size: 24px !important;
}

.item-contacto-directo p {
    margin: 0 !important;
    font-size: 16px !important;
    color: #f1f1f1 !important;
}

.bloque-boton-final {
    margin-top: 30px !important;
}

.btn-contacto-pro {
    display: inline-block !important;
    padding: 16px 40px !important;
    background-color: #fb8500 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    box-shadow: 0px 5px 15px rgba(251, 133, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-contacto-pro:hover {
    background-color: #ffb703 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0px 8px 25px rgba(255, 183, 3, 0.5) !important;
}

/* ==========================================================================
   12. FOOTER (PIE DE PÁGINA) PREMIUM
   ========================================================================== */
.footer-premium {
    background-color: #ededed !important;
    padding: 25px 20px !important;
    border-top: 1px solid #dbdbdb !important;
    width: 100% !important;
    display: block !important;
}

.footer-premium-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px;
}

.footer-copyright {
    color: #666666 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.footer-copyright strong {
    color: #1a1a1a !important;
}

.footer-legales {
    display: flex !important;
    gap: 20px !important;
}

.footer-legales a {
    color: #777777 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.footer-legales a:hover {
    color: #fb8500 !important;
}



/* ==========================================================================
   CORRECCIÓN FINAL: BOTÓN Y REDES SOCIALES
   ========================================================================== */

/* 1. Botón Galería Centrado */
.bloque-galeria-enlace {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 50px 0 !important;
}

.btn-galeria-final {
    display: inline-block !important;
    padding: 15px 40px !important;
    background-color: #fb8500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    text-align: center !important;
}

/* 2. Redes Sociales (Limpias y sin círculos) */
.redes-final-v2 {
    background-color: #ffffff !important;
    padding: 80px 20px !important;
    text-align: center !important;
    width: 100% !important;
}

.titulo-redes-v2 {
    font-size: 2.3rem !important;
    color: #1a1a1a !important;
    margin-bottom: 40px !important;
    text-transform: uppercase !important;
}

.container-iconos-v2 {
    display: flex !important;
    justify-content: center !important;
    gap: 45px !important;
}

.link-icono-v2 {
    font-size: 40px !important;
    color: #000000 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.link-icono-v2:hover {
    color: #fb8500 !important;
    transform: translateY(-8px) !important;
}

/* 3. Responsive (Móvil) */
@media (max-width: 600px) {
    .titulo-redes-v2 { font-size: 1.5rem !important; }
    .container-iconos-v2 { gap: 25px !important; }
    .link-icono-v2 { font-size: 30px !important; }
}








/*=======================================

/* ==========================================================================
   ANIMACIÓN DEL AVATAR FLOTANTE
   ========================================================================== */


/* 1. Definición del movimiento de flotación */
@keyframes efectoFlotar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px); /* Sube 15 píxeles suavemente */
    }
}

/* 2. Aplicamos la animación al contenedor */
.contenedor-flotante {
    /* Mantenemos tus propiedades actuales */
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    
    /* ESTA ES LA CLAVE DEL MOVIMIENTO */
    animation: efectoFlotar 3s ease-in-out infinite !important;
}

/* Contenedor que agrupa al obrero y al botón */
.contenedor-flotante {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* Eliminamos cualquier gap o espacio entre elementos hijos */
    gap: 0 !important; 
    animation: flotar 3s ease-in-out infinite !important;
}

/* El obrero: ajustamos el margen inferior para que se solape ligeramente con el botón si es necesario */
.manitas-avatar {
    width: 80px !important;
    height: auto !important;
    display: block !important;
    /* Si aún queda espacio, este valor negativo lo "pegará" hacia abajo */
    margin-bottom: -5px !important; 
}

/* El botón de WhatsApp */
.btn-whatsapp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #25D366 !important;
    color: white !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    margin: 0 !important; /* Aseguramos que no tenga márgenes externos */
}

/* Definimos la animación de "saludo" o flotación */
@keyframes flotarAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Aplicamos la animación al contenedor principal del obrero y WhatsApp */
.contenedor-flotante {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    
    /* Forzamos la animación */
    animation: flotarAnim 3s ease-in-out infinite !important;
    
    /* Aseguramos la estructura para que no se separen */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Ajuste fino para el obrero */
.manitas-avatar {
    width: 80px !important;
    margin-bottom: -5px !important; /* Mantiene la unión con el botón */
}







/* ==========================================================================
   13. ADAPTACIÓN EXCLUSIVA PARA MÓVILES Y TABLETS (RESPONSIVE)
   ========================================================================== */
@media (max-width: 992px) {
    /* Ajustes para tipografías en pantallas medianas/pequeñas */
    h1 { font-size: 2.5em !important; }
    h2 { font-size: 2.2em !important; }
    h3 { font-size: 1.6em !important; }
    p { font-size: 1.1em !important; }
    
    #hero { height: 80vh !important; }
}

@media (max-width: 768px) {
    /* 1. Reset de Containers */
    .container {
        padding: 0 20px !important;
    }

    .bloque-galeria-enlace {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .btn-galeria-final {
        margin: 0 auto !important;
    }

    /* 2. Menú de Navegación Móvil */
    .menu-premium-container {
        flex-direction: column !important; /* El logo arriba, el menú abajo */
        gap: 10px !important;
    }
    .menu-premium-nav {
        gap: 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .menu-premium-nav a {
        font-size: 14px !important;
    }

    /* 4. Títulos de las Secciones */
    #somos-proya h2, #caracteristicaemp-seccion h2, #contacto h2, #obras h2, #servicios-principal h2 {
        font-size: 28px !important;
        margin-bottom: 40px !important;
    }

    /* 5. Sección Quiénes Somos */
    #somos-proya .container {
        flex-direction: column !important; /* Pone la imagen arriba y el texto abajo */
        gap: 30px !important;
        text-align: center !important;
    }
    #somos-proya .img-container {
        width: 100% !important;
        height: 280px !important; /* Altura más cómoda para móviles */
    }
    #somos-proya .texto h2 {
        text-align: center !important;
    }
    #somos-proya .texto h2::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 6. Sección Servicios en Zig-Zag (Botón Centrado) */
    .fila-zigzag, .fila-zigzag:nth-child(even) {
        flex-direction: column !important; 
        gap: 25px !important;
        margin-bottom: 50px !important;
    }
    .col-texto {
        text-align: center !important; /* Centra el título y el párrafo */
    }
    .btn-saber-mas {
        display: inline-block !important;
        margin: 10px auto 0 auto !important; /* Centra el botón horizontalmente */
        text-align: center !important;
    }
    .col-imagen img {
        height: 240px !important; 
        max-width: 100% !important;
    }

    /* 7. Sección Características Empresariales */
    .bloques-caracteristicaemp {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .item-caracteristicaemp {
        width: 100% !important;
    }

    /* 8. Sección Tarjetas / Galería (Botón Centrado) */
    #cartas .carta1, #cartas .carta2, #cartas .carta3,
    #cartas .carta4, #cartas .carta5, #cartas .carta6,
    #cartas .carta7, #cartas .carta8, #cartas .carta9 {
        margin: 20px 0 !important; 
        padding: 40px 15px !important;
    }
    .bloque-galeria-enlace {
        display: flex !important;
        justify-content: center !important; /* Asegura el centrado total del bloque del botón */
        width: 100% !important;
    }
    .btn-galeria-final {
        margin: 0 auto !important; /* Centra el botón de trabajos realizados */
    }

    /* 9. Sección Redes Sociales */
    .redes-sociales {
        gap: 20px !important; /* Junta un pelín más los iconos */
    }

    /* 11. Sección Contacto Rápido Premium */
    .grid-contacto-rapido {
        flex-direction: column !important; /* Las tres cajitas de dirección/teléfono en vertical */
        gap: 15px !important;
    }
    .item-contacto-directo {
        width: 100% !important;
    }
    #final-contacto-premium h2 {
        font-size: 26px !important;
    }

    /* 12. Footer Premium */
    .footer-premium-content {
        flex-direction: column !important; /* Centra el copyright y los legales uno sobre otro */
        text-align: center !important;
        gap: 10px !important;
    }
}

/* Ajustes para móviles */
@media (max-width: 600px) {
    body {
        overflow-x: hidden; /* Evita que la pantalla se mueva de lado a lado */
    }
    
    .contenedor-flotante {
        bottom: 20px !important; /* Un poco más arriba en móviles */
        right: 15px !important;
    }
    
    h1 { font-size: 1.8rem !important; }
    
    /* Asegurar que las imágenes no se salgan de la pantalla */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}