/* 1. VARIABLES GLOBALES DE DISEÑO */
:root {
    --color-fondo: #f8fafc;
    --color-cabecera: #0f172a;    /* Azul marino muy oscuro */
    --color-principal: #1e3a8a;   /* Azul eléctrico corporativo */
    --color-texto: #334155;
    --color-tarjeta: #ffffff;
    --color-borde: #e2e8f0;
}

/* 2. RESETS BÁSICOS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
     font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Fuente ultra moderna */
    scroll-behavior: smooth;
}
/* Modifica la regla de tus Tarjetas de Proyectos */
.tarjeta {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 16px; /* Bordes más redondeados y modernos */
    padding: 2.2rem;
    width: 340px;
    text-align: left;
    /* Sombra muy sutil, difuminada y elegante */
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 10px 15px -3px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Transición suave para que los efectos no sean bruscos */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background-color 0.3s, border-color 0.3s;
}

/* EFECTO HOVER: Al pasar el mouse, la tarjeta "flota" hacia arriba y proyecta sombra */
.tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    border-color: #3b82f6; /* El borde se ilumina sutilmente con tu azul eléctrico */
}

/* Estilo para los botones principales y enlaces secundarios */
.btn-principal, .btn-secundario, .btn-whatsapp {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-principal:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* 3. NAVEGACIÓN Y CABECERA */
header {
    background-color: var(--color-cabecera);
    padding: 0.7rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Control del tamaño de tu logo */
.logo img {
    height: 200px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

nav ul {
    display: flex;
    align-items: center;
    list-style: none;
}

nav ul li a {
    color: #f1f5f9;
    text-decoration: none;
    margin-left: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #60a5fa;
}

/* Botón de Modo Oscuro */
.btn-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 1.5rem;
    transition: transform 0.2s ease;
}
.btn-toggle:hover { transform: scale(1.2); }

/* 4. SECCIÓN HERO (INICIO) */
.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: white;
    text-align: center;
    padding: 6rem 1rem;
}

.hero-contenido { max-width: 700px; margin: 0 auto; }
.hero h1 { font-size: 2.8rem; margin-bottom: 0.5rem; letter-spacing: -1px; }
.hero h2 { color: #93c5fd; font-weight: 400; margin-bottom: 1.5rem; }
.hero p { color: #cbd5e1; font-size: 1.15rem; margin-bottom: 2rem; }

.btn-principal {
    background-color: #3b82f6;
    color: white;
    padding: 0.8rem 1.8rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s;
}
.btn-principal:hover { background-color: #2563eb; }

/* 5. SECCIÓN PROYECTOS (FLEXBOX) */
.proyectos {
    padding: 5rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.proyectos h2 { font-size: 2.2rem; margin-bottom: 0.5rem; color: #0f172a; }
.subtitulo { color: #64748b; margin-bottom: 3rem; }

.contenedor-tarjetas {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tarjeta {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 2rem;
    width: 340px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s, border-color 0.3s;
}
/* ESTILO EXCLUSIVO PARA EL LOGO DEL CLIENTE DENTRO DE LA TARJETA */
.tarjeta-logo-cliente {
    height: 50px;          /* Altura idéntica al espacio que ocupaba el emoji */
    display: flex;
    align-items: center;
    margin-bottom: 1rem;   /* Mismo espacio de separación inferior */
}

.tarjeta-logo-cliente img {
    height: 150%;          /* Se adapta a los 50px del contenedor */
    width: auto;           /* Mantiene las proporciones perfectas para que no se deforme */
    object-fit: contain;   /* Asegura que la imagen se encuadre de forma limpia */
    display: block;
}

.tarjeta-icono { font-size: 2rem; margin-bottom: 1rem; }
.tarjeta h3 { margin-bottom: 0.5rem; color: #0f172a; font-size: 1.3rem; }
.tarjeta p { font-size: 0.95rem; color: #475569; margin-bottom: 1.5rem; }

.tecnologias { margin-bottom: 1.5rem; }
.tech {
    background-color: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 0.4rem;
    transition: background-color 0.3s, color 0.3s;
}

.btn-secundario {
    color: #3b82f6;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    align-self: flex-start;
}
.btn-secundario:hover { color: #1d4ed8; }

/* DISEÑO DE LA SECCIÓN DE CONTACTO OPTIMIZADA */
.contenedor-contacto-canales {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Se pone vertical automáticamente en celulares */
    margin-top: 2rem;
}

.canal-link, .canal-info {
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-contacto-wa {
    background-color: #25d366;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

.btn-contacto-wa:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(37, 211, 102, 0.3);
}

.btn-contacto-email {
    background-color: #1e3a8a; /* Azul de tu paleta GI+ */
    color: white;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.btn-contacto-email:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(30, 58, 138, 0.3);
}

.canal-info {
    background-color: #e2e8f0;
    color: #334155;
    cursor: default;
}

/* 6. CONTACTO Y FOOTER */
.contacto { text-align: center; padding: 5rem 1rem; background-color: #f1f5f9; transition: background-color 0.3s; }
.contacto h2 { margin-bottom: 1rem; color: #0f172a; }
.contacto p { max-width: 600px; margin: 0 auto 2rem auto; color: #475569; }

.btn-whatsapp {
    background-color: #25d366;
    color: white;
    padding: 0.8rem 1.8rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    display: inline-block;
}
/* ESTILO PARA TU LOGO EN EL FOOTER DE INDEX */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* BUSCA ESTA REGLA AL FINAL DE TU ESTILOS.CSS Y DÉJALA ASÍ: */
.footer-logo img {
    height: 45px; /* Mantiene el tamaño compacto */
    width: auto;
    display: block;
    opacity: 0.95; /* Le da un toque nítido y profesional */
    /* ELIMINAMOS EL FILTER PARA QUE SE VEA CON SUS COLORES ORIGINALES */
}

/* DISEÑO DE LA SECCIÓN SOBRE MÍ */
.sobre-mi {
    padding: 6rem 1rem;
    background-color: #ffffff; /* Fondo blanco para contrastar con el hero oscuro */
    transition: background-color 0.3s;
}

.contenedor-sobre-mi {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.bloque-texto-sobre h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--color-cabecera);
    letter-spacing: -0.5px;
}

.bloque-texto-sobre p {
    font-size: 1.1rem;
    color: var(--color-texto);
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.7;
}

.enfoque-pilares {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.pilar {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-principal); /* Azul eléctrico corporativo */
    background-color: #eff6ff; /* Fondo celeste sutil */
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
}

/* COMPATIBILIDAD CON MODO OSCURO */
body.dark-mode .sobre-mi {
    background-color: #0f172a; /* Fondo idéntico al modo oscuro general */
}
body.dark-mode .bloque-texto-sobre h2 {
    color: #ffffff;
}
body.dark-mode .bloque-texto-sobre p {
    color: #94a3b8;
}
body.dark-mode .pilar {
    background-color: #1e293b;
    color: #93c5fd;
}

/* DISEÑO DE LA SECCIÓN TRANSPARENCIA COMERCIAL */
.transparencia-comercial {
    padding: 5rem 1rem;
    background-color: #f1f5f9; /* Fondo gris sutil para diferenciar secciones */
    transition: background-color 0.3s;
}

.contenedor-transparencia {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.transparencia-comercial h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-cabecera);
}

.intro-transparencia {
    color: var(--color-texto);
    max-width: 750px;
    margin: 0 auto 3rem auto;
    font-size: 1.05rem;
}

/* Grilla comparativa */
.tabla-comparativa-web {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.columna-comparativa {
    background-color: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    width: 420px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    transition: background-color 0.3s, border-color 0.3s;
}

/* Resaltar tu propuesta */
.columna-comparativa.destacada-gi {
    border: 2px solid var(--color-principal);
    position: relative;
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.05);
}

.badge-propiedad {
    position: absolute;
    top: -12px;
    left: 24px;
    background-color: var(--color-principal);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.columna-comparativa h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: var(--color-cabecera);
}

.columna-comparativa ul {
    list-style: none;
}

.columna-comparativa ul li {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--color-texto);
}

.nota-final-transparencia {
    font-size: 1.05rem;
    color: var(--color-principal);
    margin-top: 2rem;
}
/* ESTILO DEL BOTÓN FLOTANTE DE WHATSAPP */
/* AJUSTE PREMIUM PARA TU NUEVO LOGO 3D DE WHATSAPP */
.whatsapp-flotante {
    position: fixed;
    bottom: 30px;        
    right: 30px;         
    width: 65px;         
    height: 65px;
    background-color: transparent; 
    border-radius: 50%;  
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;      
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-flotante img {
    width: 100%;         
    height: 100%;
    object-fit: contain;
}

.whatsapp-flotante:hover {
    transform: scale(1.1) translateY(-4px);
}


/* Efecto al pasar el mouse por encima: flota un poquito y brilla más */
.whatsapp-flotante:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 15px rgba(37, 211, 102, 0.4);
}

/* Efecto de hundimiento al hacer clic físico */
.whatsapp-flotante:active {
    transform: scale(1) translateY(0);
}

/* Opcional: Ocultamos el botón flotante en pantallas ultra chicas si molesta, aunque hoy en día todos lo usan */
@media (max-width: 480px) {
    .whatsapp-flotante {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    .whatsapp-flotante img { width: 30px; height: 30px; }
}

/* COMPATIBILIDAD CON MODO OSCURO */
body.dark-mode .transparencia-comercial { background-color: #1e293b; }
body.dark-mode .transparencia-comercial h2, body.dark-mode .nota-final-transparencia { color: #ffffff; }
body.dark-mode .intro-transparencia { color: #94a3b8; }
body.dark-mode .columna-comparativa { background-color: #0f172a; border-color: #334155; }
body.dark-mode .columna-comparativa h3 { color: white; }
body.dark-mode .columna-comparativa ul li { color: #cbd5e1; }
body.dark-mode .columna-comparativa.destacada-gi { border-color: #3b82f6; }
body.dark-mode .badge-propiedad { background-color: #3b82f6; }


/* 7. REGLAS PARA EL MODO OSCURO (ACTIVADAS CON JAVASCRIPT) */
body.dark-mode {
    --color-fondo: #0f172a;
    --color-texto: #cbd5e1;
    --color-tarjeta: #1e293b;
    --color-borde: #334155;
}
body.dark-mode .tarjeta h3, body.dark-mode .proyectos h2 { color: white; }
body.dark-mode .subtitulo, body.dark-mode .tarjeta p { color: #94a3b8; }
body.dark-mode .tech { background-color: #334155; color: #cbd5e1; }
body.dark-mode .contacto { background-color: #1e293b; }
body.dark-mode .contacto h2 { color: white; }
body.dark-mode .contacto p { color: #94a3b8; }