:root {
    /* Tu paleta brutalista/elegante */
    --color-fondo: #1d2cd8; 
    --color-texto: #ffffff; 
    --color-acento: #030303; 

    /* Tipografías */
    --fuente-titulos: 'Unbounded', sans-serif;
    --fuente-textos: 'Source Serif 4', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-textos);
    font-size: 1.1rem;
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================================
   NAVEGACIÓN REDISEÑADA (ESTILO BOLD)
   ========================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    
    /* Efecto "Glassmorphism" premium: fondo azul traslúcido con blur */
    background-color: rgba(29, 44, 216, 0.75); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Una línea inferior finita negra, muy sutil y de diseño */
    border-bottom: 1px solid rgba(3, 3, 3, 0.15); 
    
    /* Aseguramos que el padding no rompa el ancho total */
    box-sizing: border-box; 
}

/* El Logo Brutalista */
.logo {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-texto);
    letter-spacing: -1px;
}

/* Enlaces del medio alineados al centro */
.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--color-texto);
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Animación de subrayado elegante al pasar el mouse */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--color-acento); /* Subrayado negro */
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-links a:hover {
    opacity: 1;
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* El Botón de Acción Principal (Negro Intenso) */
.btn-contacto {
    color: var(--color-texto); /* Texto Blanco */
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--color-acento); /* Botón Negro #030303 */
    padding: 12px 28px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(3, 3, 3, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Micro-interacción al hover del botón */
.btn-contacto:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 3, 3, 0.35);
    background-color: #111111; /* Un negro un pelito más suave al apoyar el cursor */
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 4rem;
}

.hero-content h1 {
    font-family: var(--fuente-titulos);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    max-width: 80%;
}

.hero-content p {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* =========================================
   LA MAGIA HORIZONTAL (NUEVO)
   ========================================= */
.servicios {
    /* Ocultamos lo que sobra hacia los costados */
    overflow: hidden; 
}

.servicios-wrapper {
    height: 100vh; /* Ocupa toda la pantalla al anclarse */
    display: flex;
    align-items: center;
}

.servicios-contenedor {
    display: flex;
    /* 3 tarjetas = 300% del ancho de la pantalla */
    width: 300vw; 
}

.servicio-card {
    width: 100vw; /* Cada tarjeta ocupa exactamente una pantalla */
    padding: 0 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.servicio-info {
    flex: 1;
}

.servicio-info h3 {
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* El contenedor de la imagen */
.servicio-img {
    flex: 1;
    height: 60vh;
    border-radius: 10px;
    overflow: hidden; /* Esto es clave: corta cualquier parte de la imagen que se salga de los bordes redondeados */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); /* Le damos una sombra sutil para despegarla del fondo azul */
}

/* La imagen propiamente dicha */
.servicio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Funciona como un background-size: cover. Recorta la imagen para que llene el alto y ancho sin deformarse */
    display: block;
    transition: transform 0.5s ease; /* Preparamos un efectito hover */
}

/* Un toque interactivo premium: zoom sutil al pasar el mouse */
.servicio-img:hover img {
    transform: scale(1.05);
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-acento); /* Footer negro */
    color: var(--color-texto);
    text-align: center;
}

.footer h2 {
    font-family: var(--fuente-titulos);
    font-size: 5rem;
    margin-bottom: 2rem;
}

.mail-link {
    color: var(--color-fondo); /* Mail en color azul */
    font-size: 2rem;
    font-family: var(--fuente-titulos);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mail-link:hover {
    opacity: 0.7;
}

/* --- SECCIÓN PROYECTOS --- */
.proyectos {
    padding: 120px 8% 80px 8%;
    background-color: #F9F9F9; /* Fondo tiza claro para contrastar si venías de fondos oscuros */
}

.section-title-wrapper {
    margin-bottom: 60px;
}

.section-subtitle {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    color: #666;
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.proyectos h2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 2.5rem;
    color: #1A1A1A;
}

/* Grilla de 2 columnas */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 40px; /* Separación entre tarjetas */
}

.proyecto-card-v2 {
    display: flex;
    flex-direction: column;
}

/* Contenedor de la foto del proyecto */
.proyecto-img-wrapper {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 4px; /* Un redondeado casi imperceptible, muy elegante */
    margin-bottom: 20px;
    background-color: #eee;
}

.proyecto-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover premium: la imagen se desplaza suavemente */
.proyecto-card-v2:hover .proyecto-img-wrapper img {
    transform: scale(1.03);
}

/* Metadata del proyecto */
.proyecto-meta h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.4rem;
    color: #1A1A1A;
    margin: 10px 0;
}

.proyecto-meta p {
    font-family: 'Source Serif 4', serif;
    font-size: 1rem;
    color: #4A4A4A;
    line-height: 1.6;
}

/* Sistema de Tags combinados */
.proyecto-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #888;
    border: 1px solid #ddd;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: #fff;
}

/* =========================================
   RESPONSIVE ABSOLUTO PARA MÓVILES
   ========================================= */
@media (max-width: 768px) {
    /* Forzamos que nada desborde la pantalla */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    .navbar {
        padding: 1.2rem 5%;
    }
    
    .nav-links {
        display: none; 
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .btn-contacto {
        padding: 10px 20px;
        font-size: 0.75rem;
    }

    /* ➔ REPARACIÓN DEL HERO EN MÓVIL */
    .hero {
        padding: 0 6%; /* Usamos el mismo margen lateral que en Servicios y Proyectos */
        text-align: left; /* Aseguramos que quede bien alineado */
    }

    .hero-content h1 {
        font-size: 2.8rem; /* Achicamos el texto para que la palabra "Diseñamos" no desborde */
        max-width: 100%; /* Le damos permiso para usar todo el ancho de la pantalla */
        word-wrap: break-word; /* Seguro anti-roturas: si una pantalla es muuuuuy finita, corta la palabra en vez de romper la web */
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1.2rem; /* Ajustamos el subtítulo para que quede armónico */
        margin-top: 10px;
    }

    /* ➔ REPARACIÓN DE SERVICIOS EN MÓVIL */
    .servicios-wrapper {
        height: auto; /* Desactivamos el alto fijo de pantalla */
        display: block;
        padding: 60px 0;
    }

    .servicios-contenedor {
        display: flex;
        flex-direction: column; /* Apilamos verticalmente */
        width: 100% !important;  /* Rompemos el 300vw anterior */
        gap: 50px;
    }

    .servicio-card {
        width: 100% !important;
        flex-direction: column; /* Texto arriba, mockup abajo */
        padding: 0 6%;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .servicio-info h3 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .servicio-img {
        width: 100%;
        height: 35vh; /* Le damos un alto elegante y visible en celular */
        flex: none;   /* CLAVE: Evita que el navegador la colapse a 0px */
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    /* ➔ REPARACIÓN DE PROYECTOS EN MÓVIL (Ajuste de márgenes) */
    .proyectos {
        padding: 80px 6% 60px 6%; /* Seteamos un margen lateral limpio y controlado */
        background-color: #F9F9F9;
    }

    .proyectos h2 {
        font-size: 1.8rem;
    }

    .proyectos-grid {
        grid-template-columns: 1fr; /* Una sola columna perfecta */
        gap: 35px;
        width: 100%;
    }

    .proyecto-card-v2.destacado {
        grid-column: 1; /* El destacado se amolda a una sola columna */
    }

    .proyecto-img-wrapper {
        height: 280px; /* Reducimos la altura para pantallas verticales */
        margin-bottom: 15px;
    }

    .proyecto-meta h3 {
        font-size: 1.2rem;
    }
    /* ➔ REPARACIÓN DEL FOOTER EN MÓVIL */
    .footer {
        height: auto; /* Sacamos el 100vh para evitar el conflicto con la barra del navegador */
        min-height: 60vh; /* Le damos una altura mínima para que siga teniendo presencia */
        padding: 80px 5%; /* Añadimos padding para que nada toque los bordes */
    }

    .footer h2 {
        font-size: 2.5rem; /* Achicamos la tipografía gigante para que entre perfecto */
        margin-bottom: 1.5rem;
        word-wrap: break-word; /* Por si alguna palabra es muy larga, la corta en vez de desbordar */
    }

    .mail-link {
        font-size: 1.2rem; /* Ajustamos el tamaño del mail */
    }
}

/* --- EL TOQUE EDITORIAL: PROYECTOS DESTACADOS --- */
/* Esta clase hace que el proyecto ocupe las 2 columnas de la grilla */
.proyecto-card-v2.destacado {
    grid-column: 1 / -1; 
}

/* Hacemos que la foto del proyecto destacado sea más panorámica/alta */
.proyecto-card-v2.destacado .proyecto-img-wrapper {
    height: 600px; 
}

/* En celulares, todo vuelve a ser de 1 columna automáticamente, pero ajustamos la altura */
@media (max-width: 768px) {
    .proyecto-card-v2.destacado {
        grid-column: 1; /* Vuelve a ocupar 1 sola columna */
    }
    .proyecto-card-v2.destacado .proyecto-img-wrapper {
        height: 350px;
    }
}

/* =========================================
   AJUSTES PARA TARJETAS CLICKEABLES
   ========================================= */
a.proyecto-card-v2 {
    text-decoration: none; /* Evita que el texto de la tarjeta salga subrayado */
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* =========================================
   MENÚ DESPLEGABLE "HABLEMOS"
   ========================================= */
.dropdown-container {
    position: relative;
}

/* Transformamos el estilo del viejo enlace a un botón real */
button.btn-contacto {
    border: none;
    cursor: pointer;
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--color-acento);
    padding: 12px 28px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(3, 3, 3, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

button.btn-contacto:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 3, 3, 0.35);
    background-color: #111111;
}

/* La caja del menú oculto */
.dropdown-menu {
    position: absolute;
    top: 130%; /* Lo ubicamos justo debajo del botón */
    right: 0;
    background-color: var(--color-acento); /* Fondo negro para mantener la elegancia */
    border-radius: 12px;
    padding: 10px 0;
    min-width: 160px;
    box-shadow: 0 10px 30px rgba(3, 3, 3, 0.4);
    
    /* Configuración para que aparezca suavemente */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
    display: flex;
    flex-direction: column;
}

/* Esta clase la agregaremos con JavaScript cuando el usuario haga click */
.dropdown-menu.activo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    color: var(--color-texto);
    text-decoration: none;
    font-family: var(--fuente-textos);
    font-size: 1rem;
    padding: 12px 25px;
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

/* Microinteracción: la flechita imaginaria avanza al pasar el mouse */
.dropdown-menu a:hover {
    background-color: #1a1a1a;
    padding-left: 32px; 
}