@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Reseteo básico y tipografía base */

/* ==================================
   Barra Superior de Contacto (Top Bar)
   ================================== */
.top-bar {
    background-color: #061226; /* Un tono más oscuro/opaco que el #0a1118 del menú */
    color: #b0b0b0; /* Un gris claro para el texto */
    padding: 8px 60px; /* Delgada arriba y abajo, alineada a los lados con el menú */
    display: flex;
    justify-content: center; /* Empuja el texto hacia la derecha */
    font-size: 13px; /* Letra pequeña y elegante */
    font-family: Arial, Helvetica, sans-serif;
}

.contact-info {
    display: flex;
    gap: 25px; /* Espacio entre el teléfono y el correo */
}

.contact-info span {
    display: flex;
    align-items: center;
    gap: 6px; /* Espacio entre el icono (emoji) y el texto */
    transition: color 0.3s ease;
    cursor: pointer;
}

.contact-info span:hover {
    color: #ffffff; /* Se ilumina a blanco cuando pasas el cursor */
}

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

body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    color: white; /* Aseguramos que el texto base sea blanco */
}

/* ==================================
   Barra de Navegación (Sin cambios)
   ================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #101c2a;
    padding: 20px 60px;
    color: white;
}

.logo h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    font-weight: bold;
}

.logo p {
    font-size: 11px;
    color: #b0b0b0;
    margin-top: 3px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

nav a {
    color: #9fb0d4;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #ffffff;
}

/* ==================================
   Sección Hero (Base y Texto)
   ================================== */
.hero {
    position: relative;
    height: 85vh;
    /* Fondo con overlay oscuro y una imagen de oficina difuminada */
    background: linear-gradient(rgba(20, 30, 45, 0.7), rgba(20, 30, 45, 0.7)), 
                url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* Todo el texto base es blanco */
    overflow: hidden;
}

.hero-content {
    z-index: 2;
    margin-bottom: 50px;
}

.main-title {
    font-family: "Times New Roman", Times, serif;
    font-size: 90px;
    font-weight: normal;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.subtitle {
    font-family: "Times New Roman", Times, serif;
    font-size: 50px;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 50px;
}

/* ==================================
   NUEVA SECCIÓN: Animación secuencial letra por letra
   ================================== */

/* Contenedor relativo para posicionar el puntero y el sombreado */
.animation-wrapper {
    position: relative;
    display: inline-block; /* Importante para medir el ancho */
    vertical-align: middle;
}

/* El texto que será subrayado secuencialmente */
.highlight {
    position: relative; /* Para poner el pseudo-elemento debajo */
    padding: 2px 8px; /* Un poco de padding para que el sombreado se vea bien */
    z-index: 2; /* 1. Mantiene el texto por encima del sombreado */
}

/* 2. NUEVA REGLA: Color de base para CADA letra (blanco) */
.highlight span {
    color: #ffffff;
    display: inline-block; /* Importante para que la animación funcione en spans */
}

/* Pseudo-elemento para el sombreado (bloque de color) */
.highlight::before {
  content: '';
  position: absolute;
  top: 0px; 
  left: 0;
  width: 0; /* Empieza con ancho 0 */
  height: 100%; /* Cubre toda la altura del texto */
  background-color: #b8b7b7; /* 3. Apartado gris de fondo (gris sólido) */
  z-index: -1; /* 4. IMPORTANTE: Esto lo envía detrás del texto para no taparlo */
  
  /* Solo una animación: Primero se dibuja y se queda quieto en su estado final. */
  animation: drawHighlight 1.5s 0.5s forwards ease-in-out;
}

/* El Nuevo Puntero Gráfico (cursor, no parpadea) */
.cursor {
    position: absolute;
    top: 100%; /* Empieza justo debajo de la línea inferior del texto */
    left: 0;
    width: 24px; /* Tamaño del puntero */
    height: 24px;
    
    /* Incrusta un gráfico de cursor clásico directamente */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' stroke='white' stroke-width='0.5' d='M0,0 L8,8 L4,8 L0,12 Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    
    opacity: 0; /* Empieza invisible */
    z-index: 3; /* Puntero por encima de todo */
    
    /* 6. Animación de movimiento sincronizada con el sombreado */
    animation: movePointer 1.5s 0.5s forwards ease-in-out;
}

/* SEGUNDO ESTILO DE FORMS

/* El texto que será subrayado secuencialmente */
.highlight1 {
    position: relative; /* Para poner el pseudo-elemento debajo */
    padding: 2px 8px; /* Un poco de padding para que el sombreado se vea bien */
    z-index: 2; /* 1. Mantiene el texto por encima del sombreado */
}

/* 2. NUEVA REGLA: Color de base para CADA letra (blanco) */
.highlight1 span {
    color: #000000;
    display: inline-block; /* Importante para que la animación funcione en spans */
}

/* Pseudo-elemento para el sombreado (bloque de color) */
.highlight1::before {
  content: '';
  position: absolute;
  top: 0px; 
  left: 0;
  width: 0; /* Empieza con ancho 0 */
  height: 100%; /* Cubre toda la altura del texto */
  background-color: #9b9b9b; /* 3. Apartado gris de fondo (gris sólido) */
  z-index: -1; /* 4. IMPORTANTE: Esto lo envía detrás del texto para no taparlo */
  
  /* Solo una animación: Primero se dibuja y se queda quieto en su estado final. */
  animation: drawHighlight1 1.5s 0.5s forwards ease-in-out;
}

/* El Nuevo Puntero Gráfico (cursor, no parpadea) */
.cursor1 {
    position: absolute;
    top: 100%; /* Empieza justo debajo de la línea inferior del texto */
    left: 0;
    width: 24px; /* Tamaño del puntero */
    height: 24px;
    
    /* Incrusta un gráfico de cursor clásico directamente */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' stroke='black' stroke-width='0.5' d='M0,0 L8,8 L4,8 L0,12 Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    
    opacity: 0; /* Empieza invisible */
    z-index: 3; /* Puntero por encima de todo */
    
    /* 6. Animación de movimiento sincronizada con el sombreado */
    animation: movePointer 1.5s 0.5s forwards ease-in-out;
}

#animated-contact-project {
    font-family: 'Montserrat', sans-serif; /* La tipografía que elegiste */
    font-weight: 700; /* Un peso grueso para que resalte más */
    position: relative;
    font-size: 30px;
}

/* Estilos específicos para la animación en el título del contacto */
#animated-contact-project span {
    font-family: 'Montserrat', sans-serif; /* La tipografía que elegiste */
    font-weight: 700;
    font-size: 30px;
    color: rgb(0, 0, 0); /* Color inicial */
    display: inline-block;}

/* Delays para las 8 letras de P-R-O-Y-E-C-T-O */
/* He puesto 1.5s de inicio para que no compita con la animación del Hero al cargar */
#animated-contact-project span:nth-child(1) { animation-delay: 1.50s; }
#animated-contact-project span:nth-child(2) { animation-delay: 1.60s; }
#animated-contact-project span:nth-child(3) { animation-delay: 1.70s; }
#animated-contact-project span:nth-child(4) { animation-delay: 1.80s; }
#animated-contact-project span:nth-child(5) { animation-delay: 1.90s; }
#animated-contact-project span:nth-child(6) { animation-delay: 2.00s; }
#animated-contact-project span:nth-child(7) { animation-delay: 2.10s; }
#animated-contact-project span:nth-child(8) { animation-delay: 2.20s; }

/* El subrayado gris (la caja que se dibuja) */
#animated-contact-project.highlight1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #d8d8d8; /* El gris de tu diseño */
    z-index: -1;
    animation: drawHighlight1 1.5s 0.5s forwards ease-in-out;
}

/* El cursor que se mueve */
.contact-info-col .cursor1 {
    animation: movePointer 1.5s 0.5s forwards ease-in-out;
}
/* 7. NUEVA REGLA: Aplica la animación secuencial de color a cada letra.
    Duración: 1.5s (tiempo total que el cursor pasa sobre la frase) / 10 caracteres ≈ 0.15s por letra.
   Usamos un delay incremental para cada span. */

.highlight span {
    color: #ffffff;
    display: inline-block;
    white-space: pre; /* ¡NUEVO! Fuerza al navegador a respetar el espacio en blanco */
    animation: changeTextColorLetter 0.15s forwards ease-in-out;
}

/* Delays incrementales para cada span (ahora son 10 letras, sin espacio) */
.highlight span:nth-child(1)  { animation-delay: 0.75s; }  /* p */
.highlight span:nth-child(2)  { animation-delay: 0.85s; } /* a */
.highlight span:nth-child(3)  { animation-delay: 0.9s; }  /* g */
.highlight span:nth-child(4)  { animation-delay: 1.0s; } /* i */
.highlight span:nth-child(5)  { animation-delay: 1.15s; }  /* n */
.highlight span:nth-child(6)  { animation-delay: 1.25s; } /* a */
.highlight span:nth-child(7)  { animation-delay: 1.30s; }  /* s */
.highlight span:nth-child(8)  { animation-delay: 1.35s; }  /*   */
.highlight span:nth-child(9)  { animation-delay: 1.40s; } /* w */
.highlight span:nth-child(10)  { animation-delay: 1.45s; }  /* e */
.highlight span:nth-child(11) { animation-delay: 1.50s; } /* b */

/* ==================================
    KEYFRAMES: Animaciones
   ================================== */

/* KEYFRAMES: Animación del Puntero (solo movimiento, no parpadeo) */
@keyframes movePointer {
    0% {
        opacity: 1; /* Aparece */
        left: 0;
    }
    100% {
        opacity: 1;
        left: 100%; /* Se mueve hasta el final de la frase y se detiene */
    }
}

/* KEYFRAMES: Animación del Sombreado - Crecimiento */
@keyframes drawHighlight {
    0% {
        width: 0;
    }
    100% {
        width: 100%; /* Sombreado total del texto */
    }
}

/* KEYFRAMES: Animación del Sombreado - Parpadeo (ritmo suave) */
@keyframes blinkHighlight {
    0%, 100% {
        background-color: #000000; /* Gris sólido */
    }
    50% {
        background-color: transparent; /* Se vuelve invisible suavemente */
    }
}

/* KEYFRAMES: NUEVO - Cambio de Color de Texto LETRA POR LETRA */
@keyframes changeTextColorLetter {
    0% {
        color: white; /* Comienza en blanco */
    }
    100% {
        color: black; /* Termina en negro absoluto */
    }
}


/* KEYFRAMES: Animación del Sombreado - Crecimiento */
@keyframes drawHighlight1 {
    0% {
        width: 0;
    }
    100% {
        width: 100%; /* Sombreado total del texto */
    }
}


/* ==================================
   Enlaces (Sin cambios)
   ================================== */
.cta-container {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.cta-link {
    color: white;
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
}

.cta-link:hover {
    opacity: 0.8;
}

/* ==================================
   Curva Inferior (Sin cambios)
   ================================== */
.curve-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: white;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
}

/* ==================================
   Botón Hamburguesa (Oculto en PC)
   ================================== */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

/* ==================================
   NUEVO: Línea parpadeante de texto (Caret)
   ================================== */
.highlight::after {
    content: '';
    position: absolute;
    right: 4px; /* La posiciona exactamente al final, dentro del recuadro gris */
    top: 10%; /* La centra un poco verticalmente */
    height: 80%; /* Altura proporcional a las letras */
    width: 2px; /* Grosor de la línea */
    background-color: black; /* Color negro para que coincida con las letras */
    
    opacity: 0; /* Empieza invisible para no mostrarse antes de tiempo */
    
    /* Animación: Espera 2s (lo que tarda el ratón en pasar) y luego parpadea al infinito */
    animation: blinkTextCursor 1s 2s infinite step-end;
}

/* KEYFRAMES: Parpadeo de la línea */
@keyframes blinkTextCursor {
    0%, 100% {
        opacity: 1; /* Visible */
    }
    50% {
        opacity: 0; /* Invisible */
    }
}

/* ==================================
   SECCIÓN DE CONTACTO
   ================================== */
.contact-section {
    background-color: #ffffff;
    padding: 100px 50px;
    display: flex;
    justify-content: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    width: 100%;
    gap: 80px; /* Separación amplia como en la imagen */
}

/* --- Columna Izquierda (Textos) --- */
.contact-info-col {
    flex: 1;
    max-width: 450px;
}

.contact-title {
    color: #000000;
    font-family: 'Montserrat', Times, serif; /* O la fuente serif que estés usando */
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    display: flex; /* Usamos flex para que se alineen perfectamente */
    gap: 2px;
}

.contact-subtitle {
    color: #000000;
    font-size: 20px;
    padding-top: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}

.contact-desc {
    color: #000000;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 35px; /* Espacio antes de la lista */
}

.contact-details {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgb(0, 0, 0);
    font-size: 15px;
}

/* --- Columna Derecha (Formulario) --- */
.contact-form-col {
    flex: 1;
    width: 100%;
    /* AQUÍ ESTÁ LA CLAVE: Esto lo hace más angosto de los lados. 
       Si lo quieres aún más estrecho, bájalo a 380px o 350px */
    max-width: 420px; 
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-row {
    display: flex;
    gap: 15px;
}

.input-row input {
    flex: 1;
}

/* Estilo de las cajas sólidas */
.contact-form input,
.contact-form textarea {
    width: 100%;
    background-color: #ffffff; /* Fondo de los inputs según la imagen */
    border: 1px solid black;
    border-radius: 4px;
    color: rgb(0, 0, 0);
    padding: 16px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #e2d2c4; /* Borde color crema al seleccionar */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #888;
}

/* --- Botón --- */
.submit-btn {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 16px 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Texto izquierda, flecha derecha */
    align-items: center;
    width: 100%;
    margin-top: 5px;
    transition: background-color 0.3s;
}

.submit-btn span {
    font-size: 20px;
}

.submit-btn:hover {
    background-color: #e2d2c4;
}

/* ==================================
   FOOTER (Pie de página)
   ================================== */
.footer {
    background-color: #061226; /* Mismo color extra oscuro que usamos en la Top Bar */
    color: white;
    padding: 80px 60px 20px; /* Mucho padding arriba, igual a los lados que la navbar */
    font-family: Arial, Helvetica, sans-serif;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap; /* Permite que las columnas bajen en pantallas más pequeñas */
    margin-bottom: 60px; /* Espacio antes de la línea legal */
}

.footer-col {
    flex: 1; /* Hace que las columnas se repartan el espacio equitativamente */
    min-width: 150px;
}

.brand-col {
    flex: 1.5; /* Le damos un poco más de espacio a la columna del logo porque tiene más texto */
    min-width: 280px;
}

/* Títulos de las columnas */
.footer-col h3 {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

/* Listas de enlaces */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 18px;
}

.footer-col a, 
.footer-col p {
    color: #b0b0b0; /* Gris claro que concuerda con la imagen */
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8;
    transition: color 0.3s ease;
}

.footer-col ul a:hover {
    color: #ffffff;
}

/* Logo en el footer */
.footer-logo h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 2px;
    color: white;
}

.footer-logo p {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase; /* Vuelve "Web design & e-commerce" todo en mayúsculas como en la imagen */
    margin-bottom: 20px;
}

.footer-desc {
    font-family: "Times New Roman", Times, serif; /* Según la imagen, esta descripción tiene fuente serif */
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 90%;
}

/* Redes Sociales */
.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: #b0b0b0;
    color: #05080c; /* Icono oscuro para que contraste con el círculo */
    border-radius: 50%; /* Hace el círculo perfecto */
    transition: background-color 0.3s ease;
}

.social-links a:hover {
    background-color: white; /* Se ilumina al pasar el mouse */
}

/* Barra inferior (Copyright) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: #b0b0b0;
    font-size: 13px;
}

.legal-links {
    display: flex;
    list-style: none;
    gap: 25px;
    padding: 0;
}

.legal-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: white;
}

/* ==================================
   BOTÓN FLOTANTE DE WHATSAPP
   ================================== */
.whatsapp-btn {
    position: fixed;
    bottom: 30px; /* Distancia del borde inferior */
    right: 30px;  /* Distancia del borde derecho */
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Color oficial de WhatsApp */
    color: white;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000; /* Siempre por encima de todo */
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-btn:hover {
    background-color: #128c7e; /* Un verde más oscuro al pasar el mouse */
    transform: scale(1.1); /* Se agranda un poquito */
}

/* Efecto de pulso para llamar la atención */
.whatsapp-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
/* ==================================
   DISEÑO RESPONSIVE (Móviles y Tablets)
   ================================== */

/* Para pantallas de tamaño tablet (hasta 768px de ancho) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: row; 
        justify-content: space-between; /* IMPORTANTE: Esto empuja la hamburguesa a la extrema derecha */
        align-items: center;
        position: relative; 
        padding: 20px 30px; /* Ajusta el 30px si la quieres aún más pegada al borde */
    }

    .menu-toggle {
        display: flex; 
        margin-left: auto; /* ¡ESTA ES LA MAGIA! Empuja la hamburguesa a la derecha del todo */
    }

    .nav-links {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: #0a1118; 
        padding: 0; 
        text-align: center; /* ¡CAMBIO AQUÍ: Volvemos a centrar las palabras! */
        z-index: 10;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        font-weight: bold; 
    }

    .nav-links.active {
        display: flex; 
    }

    /* Hacemos que cada elemento de la lista ocupe todo el ancho */
    .nav-links li {
        width: 100%;
    }

    /* Estilos individuales para los enlaces del menú móvil */
    nav .nav-links a {
        display: block; 
        padding: 20px 0; /* Lo devolvemos a 0 a los lados para un centrado perfecto */
        transition: all 0.3s ease;
        font-weight: bold;
    }

    /* ¡NUEVO HOVER!: Fondo más claro y visible al pasar el cursor */
    nav .nav-links a:hover {
        background-color: rgba(255, 255, 255, 0.2); /* Aumentamos a 0.2 para que sea un gris/blanco mucho más claro */
        color: #ffffff; /* Mantenemos el texto en un blanco brillante para que resalte */
    }

    /* Animación de la hamburguesa a X */
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Ajustes de los textos gigantes del Hero */
    .main-title {
        font-size: 60px; 
        letter-spacing: 2px;
    }

    .subtitle {
        font-size: 35px; 
    }

    .cta-container {
        gap: 20px;
    }

    .cta-link {
        font-size: 20px;
    }

    /* Ajustes para la Top Bar en móviles */
    .top-bar {
        justify-content: center; /* Centramos el texto en celular */
        padding: 8px 20px;
    }
    
    .contact-info {
        gap: 15px; /* Reducimos el espacio un poco */
    }

    /* Ajustes del Footer para móviles */
    .footer {
        padding: 50px 30px 20px;
    }
    
    .footer-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .brand-col {
        margin-bottom: 10px;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    
    .legal-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .contact-container {
        flex-direction: column;
        gap: 50px;
    }
    
    .contact-info-col {
        max-width: 100%;
    }
    
    .input-row {
        flex-direction: column;
    }

    .contact-title {
        font-size: 28px; /* Reducimos de 38px a 28px */
        justify-content: center; /* Centramos el texto en móviles */
        text-align: center;
        flex-wrap: wrap; /* Permite que "PROYECTO" baje si no cabe, pero con estilo */
        gap: 8px; 
    }

    /* Aseguramos que la caja de animación no sea más ancha que la pantalla */
    .animation-wrapper {
        display: inline-flex;
        max-width: 100%;
    }

    #animated-contact-project {
        font-size: 28px; /* Debe coincidir con el tamaño del título */
    }

    /* Ajustamos el cursor para que no sea más alto que la letra pequeña */
    .cursor1 {
        height: 100%;
    }

    .whatsapp-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-btn svg {
        width: 25px;
        height: 25px;
    }
}


/* Para pantallas de teléfonos móviles pequeños (hasta 480px de ancho) */
@media (max-width: 480px) {
    .main-title {
        font-size: 45px; 
    }

    .subtitle {
        font-size: 26px;
    }

    /* Ajuste para mantener los botones uno al lado del otro */
    .cta-container {
        flex-direction: row; /* Los mantiene en la misma línea */
        justify-content: center;
        gap: 15px; /* Reducimos el espacio entre ellos */
        flex-wrap: wrap; /* Por seguridad, si la pantalla es extremadamente diminuta */
    }

    .cta-link {
        font-size: 15px; /* Reducimos la letra para que ambas frases quepan bien */
        text-align: center;
    }

    .cursor {
        width: 18px;
        height: 18px;
    }

    .contact-title {
        font-size: 24px;
    }

    #animated-contact-project {
        font-size: 24px;
    }
}