/* Variables y reseteo básico */
:root {
    --bg-color: #031424;
    --text-color: #ffffff;
    --accent-color: #00a8ff;
}

/* =========================================
   RESETEO BÁSICO Y ESCALAMIENTO INTELIGENTE
   ========================================= */
/* Base para pantallas normales (Laptops y monitores 1080p) */
html {
    font-size: 100%; /* Equivale a 16px */
}

/* --- MONITORES GRANDES (2K y Ultrawide - Aprox 1440p) --- */
@media (min-width: 1600px) {
    html {
        font-size: 130%; /* Todo crece un 30% (textos, paddings, margins en rem) */
    }
    
    /* Agrandamos los contenedores principales para que no queden tan angostos */
    .servicios, .contenido-digital, .contenedor-contacto, .footer-contenido {
        max-width: 1500px !important; 
    }
    
    /* === LA SOLUCIÓN DEFINITIVA === */
    /* Le bajamos el ancho al 80% y lo empujamos a la derecha para que vuelva a ser vertical */
    #galeria-stack { 
        width: 100%;
        max-width: 600px; /* Tope fijo. El ancho es menor a la altura (750), forzando verticalidad */
        aspect-ratio: 3 / 4; /* LA MAGIA: Proporción vertical estricta (más alto que ancho) */
        margin-left: auto; /* Lo empujamos a la derecha */
        height: auto; /* Let aspect-ratio handle height */
    }
}

/* Y por si acaso, refuerza los títulos de tu imagen */
h1, h2, .produccion-audiovisual, .servicios-lista li {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700; /* Para que se vean gruesas como en tu diseño */
}

/* =========================================
   RESETEO BÁSICO Y FONDO LIMPIO
   ========================================= */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color); 
    color: var(--text-color); 
    overflow-x: hidden; 
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif !important; }

/* Header & Video */
/* 1. Al header le decimos que pegue todo arriba (flex-start) */
header { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    justify-content: space-between; 
    
    /* LA MAGIA: Esto obliga al logo y al menú a quedarse arriba */
    align-items: flex-start; 
    
    padding: 2rem 3rem; /* Un poco de margen para que no toque los bordes de la pantalla */
    overflow: hidden; 
}
#bg-video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    
    /* VOLVEMOS A COVER PARA MATAR LOS BORDES */
    object-fit: cover; 
    
    /* Opcional: Centramos el enfoque para que el recorte sea parejo */
    object-position: center center; 
    
    z-index: -1; 
    opacity: 1; 
    filter: brightness(1); 
}
.logo { font-size: 2rem; font-weight: bold; }
/* =========================================
   TEXTO PORTAFOLIO (GLITCH SUAVE INFINITO)
   ========================================= */
.texto-portafolio {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 10;
    margin-top: 15px; /* Alineado con el logo */
    cursor: default; /* Puntero normal, no manito */
    pointer-events: none; /* Blindaje total: no recibe clics ni hovers */
    opacity: 0.8; /* Un poco translúcido por defecto */
}

/* Base común para los clones de glitch */
.texto-portafolio::before,
.texto-portafolio::after {
    content: attr(data-text); /* Clona el texto exacto del HTML */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

/* Clon Cyan (se mueve a la izquierda) */
.texto-portafolio::before {
    color: #0ff;
    z-index: -1;
    animation: gentle-glitch-1 4s infinite cubic-bezier(.25,.46,.45,.94);
    mix-blend-mode: screen; /* Brillo técnico */
}

/* Clon Magenta (se mueve a la derecha) */
.texto-portafolio::after {
    color: #f0f;
    z-index: -2;
    animation: gentle-glitch-2 4s infinite cubic-bezier(.25,.46,.45,.94) reverse;
    mix-blend-mode: screen;
}

/* --- KEYFRAMES: LA MAGIA DEL INTERFERENCIA SUAVE --- */

/* Animación 1 (Cyan): Rebana y mueve a la izquierda */
@keyframes gentle-glitch-1 {
    0% { clip-path: inset(80% 0 10% 0); transform: translate(-1px, 1px); }
    5% { clip-path: inset(10% 0 85% 0); transform: translate(1px, -1px); opacity: 0.2; }
    10% { clip-path: inset(40% 0 43% 0); transform: translate(-1px, 0); opacity: 0.8; }
    15% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
    /* Pausa larga de estabilidad */
    70% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
    75% { clip-path: inset(60% 0 30% 0); transform: translate(-1px, 1px); opacity: 0.2; }
    80% { clip-path: inset(10% 0 80% 0); transform: translate(1px, -1px); opacity: 0.8; }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
}

/* Animación 2 (Magenta): Rebana y mueve a la derecha */
@keyframes gentle-glitch-2 {
    0% { clip-path: inset(10% 0 80% 0); transform: translate(1px, -1px); }
    5% { clip-path: inset(60% 0 30% 0); transform: translate(-1px, 1px); opacity: 0.2; }
    10% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
    /* Pausa larga */
    70% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
    75% { clip-path: inset(40% 0 43% 0); transform: translate(-1px, 0); opacity: 0.2; }
    80% { clip-path: inset(80% 0 10% 0); transform: translate(1px, 1px); opacity: 0.8; }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0.8; }
}

/* Texto Giratorio (Animación continua) */
.texto-giratorio { position: absolute; bottom: 50px; left: 50px; width: 150px; height: 150px; animation: girar 10s linear infinite; }
.texto-giratorio text { fill: white; font-size: 14px; letter-spacing: 2px; }
@keyframes girar { 100% { transform: rotate(360deg); } }

/* =========================================
   SECCIÓN SERVICIOS (Diseño Ajustado)
   ========================================= */
.servicios {
    display: flex;
    padding: 8rem 5rem; 
    max-width: 1300px; /* Ancho ideal */
    margin: 0 auto;
    gap: 6rem; /* Un poco más de separación entre el menú y la foto */
    align-items: center; 
}

.servicios-lista {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; 
}

/* Títulos Inactivos (Reducidos) */
.servicio-titulo {
    font-size: 1.8rem; /* Letra más pequeña y equilibrada */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35); /* Gris transparente */
    cursor: pointer;
    transition: all 0.4s ease;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.servicio-item:hover .servicio-titulo { color: rgba(255, 255, 255, 0.7); }

/* Título Activo (Reducido, blanco y con raya) */
.servicio-item.activo .servicio-titulo { 
    color: #ffffff; 
    font-size: 3rem; /* Tamaño intermedio perfecto */
    font-weight: 700; 
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Línea blanca sutil */
    margin-bottom: 1.2rem;
}

/* Lista de Subservicios */
.subservicios {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    padding-left: 0;
    border-left: none; 
    margin: 0;
    opacity: 0; 
    transition: max-height 0.5s ease, margin 0.5s ease, opacity 0.4s ease;
}

.servicio-item.activo .subservicios {
    max-height: 1200px; 
    margin-bottom: 2rem; 
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
    opacity: 1;        
}

.subservicios li {
    font-size: 1.1rem; /* Subservicios un poco más pequeños también */
    color: #8fa6ba; 
    margin: 0.8rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 300;
}

.subservicios li:hover, .subservicios li.activo {
    color: #ffffff;
    transform: translateX(10px);
}

/* --- Galería Horizontal y Marco Neón --- */
.servicios-galeria {
    flex: 1.3;
    position: relative;
    perspective: 1000px;
}

/* Registro de la propiedad para que la animación funcione */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.marco-neon {
  position: relative;
  padding: 60px; 
  border-radius: 50px 50px 50px 50px;
  background: transparent;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}




/* EL CONTORNO (Igual al anterior, ultra delgado) */
.marco-neon::after, 
.marco-neon::before {
    filter: blur(25px);
  content: '';
  position: absolute;
  inset: 0;
  background-image: conic-gradient(from var(--angle), #1da9b7, #ed0f8e, #1da9b7);
  z-index: -1;
  padding: 1.2px; 
  border-radius: inherit;
  animation: 4s spin linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* CONTENEDOR GUÍA PARA LA IMAGEN Y EL TEXTO */
.contenedor-interior {
  width: 100%;
  max-width: 800px; /* Asegúrate que sea el mismo ancho que tu stack */
  display: flex;
  flex-direction: column;
  position: relative;
}

#galeria-stack {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* --- 5. EL TEXTO DE LA ESQUINA INFERIOR DERECHA --- */
.foto-info {
    position: absolute;
    bottom: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-align: right;
    z-index: 5;
}

@keyframes spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}
/* Estilo de la imagen dentro para que encaje bien */
#galeria-stack {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Ajustes a la foto */
#galeria-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10; 
    height: auto; 
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); /* Sombra pesada a la foto */
}

#galeria-stack img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateY(20px) scale(1.02);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, filter 0.6s ease;
}

#galeria-stack img.tarjeta-activa {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 10;
}

#galeria-stack img.tarjeta-vieja {
    opacity: 1;
    transform: translateY(-10px) scale(0.98);
    z-index: 5;
    filter: brightness(0.3);
}

/* Texto de información posicionado exactamente abajo a la derecha */
.foto-info {
    position: absolute;
    bottom: 20px;
    right: 40px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.5px;
}
/* Contadores */
/* --- Sección Contadores --- */
.contadores { 
    display: flex; 
    justify-content: center; 
    
    /* Reducimos un poco la separación para asegurar que entren los 4 */
    gap: 5rem; 
    
    padding: 5rem 2rem; 
    text-align: center; 
    
    /* LA LÍNEA CLAVE: Prohíbe que se salten a la línea de abajo */
    flex-wrap: nowrap; 
    
    /* Aumentamos el espacio máximo permitido en la pantalla */
    max-width: 1300px; 
    margin: 0 auto; 
}

.contador-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Lo hacemos un poquitito más angosto para que quepan todos sin apretarse */
    width: 200px; 
}

/* Diseño y animación de la bola blanca */
.bola-icono {
    width: 65px; /* Reducido (antes 80px) */
    height: 65px; /* Reducido */
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    color: #1da9b7; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
    animation: flotar-bola 3s ease-in-out infinite;
}

.bola-icono svg {
    width: 28px;
    height: 28px;
}

/* (Opcional pero recomendado) Para que en celulares sí se pongan uno debajo del otro y no se aplasten */
@media (max-width: 900px) {
    .contadores {
        flex-wrap: wrap;
        gap: 4rem;
    }
}

/* Keyframes para que la bola suba y baje suavemente */
@keyframes flotar-bola {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Contenedor que agrupa el + y el número */
.numero-contenedor {
    font-size: 3.5rem; 
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    color: #1da9b7; 
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 2px;
    
    /* PRO-TIP: Esto hace que todos los números midan lo mismo de ancho, evitando temblores */
    font-variant-numeric: tabular-nums; 
}


/* El texto de abajo del contador (ajustado a 2 líneas) */
.contador-item p {
    color: #ffffff;
    font-size: 1.3rem; 
    margin-top: 1rem; 
    font-weight: 300;
    line-height: 1.2; 
    text-align: center; /* ESTA ES LA LÍNEA CLAVE: Obliga a que la línea de arriba y la de abajo se centren entre sí */
}

/* Bola Azul y Scroll interactivo */
.interactivo, .contacto { padding: 5rem 2rem; position: relative; text-align: center; }
.bola-azul { width: 150px; height: 150px; background-color: var(--accent-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.flecha { font-size: 3rem; color: white; }

/* Carrusel de Marcas */
/* --- Sección Marcas --- */
.contenedor-marcas {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.contenedor-marcas h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1da9b7;
    margin-bottom: 3rem;
    padding-left: 2rem;
}

/* La píldora blanca */
.fila-marcas {
    background-color: #ffffff;
    border-radius: 50px;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    overflow: hidden; /* Corta los logos que se salen del borde */
    white-space: nowrap;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* El carril que contiene los dos vagones */
/* El carril que contiene TODO (este es el que ahora se mueve) */
.track-marcas {
    display: flex;
    width: max-content; /* Crece lo suficiente para contener a ambos vagones en línea */
    animation: loop-infinito 20s linear infinite; /* Animación aplicada al carril principal */
}

/* Cada vagón individual (El original y la copia) */
.logos-slide {
    display: flex;
    align-items: center;
    gap: 5rem; /* Espacio entre los logos internos */
    padding-right: 2rem; /* ESTE ES EL TRUCO: Es el espacio exacto entre el final del Vagón 1 y el inicio del Vagón 2 */
}

.marca-logo {
    max-height: 35px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.marca-logo:hover {
    opacity: 1;
}

/* =========================================
   HOVER: ZOOM A LA IMAGEN DE SERVICIOS
   ========================================= */
#galeria-stack img.tarjeta-activa:hover {
    transform: translateY(0) scale(1.08); /* Ese 1.08 hace que crezca un 8% */
    cursor: pointer; /* Le ponemos la manito para que se sienta interactivo */
}

/* La animación ahora mueve el carril completo exactamente a la MITAD (-50%). 
Como los dos vagones son clones exactos, al llegar al 50% es matemáticamente 
indistinguible del 0%, creando el bucle perfecto sin huecos blancos. */
@keyframes loop-infinito {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
/* Equipo (Flip Cards 3D) */
.equipo { padding: 5rem 2rem; text-align: center; }
.grid-equipo { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; flex-wrap: wrap; }
.flip-card { background-color: transparent; width: 150px; height: 150px; perspective: 1000px; border-radius: 50%; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 50%; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.flip-card-front { background-size: cover; background-position: center; }
.flip-card-back { background-color: var(--accent-color); color: white; transform: rotateY(180deg); padding: 10px; }

/* Formulario */
.form-container { max-width: 500px; margin: 3rem auto; display: flex; flex-direction: column; gap: 1rem; }
input, textarea { width: 100%; padding: 1rem; background: transparent; border: none; border-bottom: 1px solid #555; color: white; outline: none; }
button { padding: 1rem 2rem; background-color: var(--accent-color); border: none; border-radius: 30px; color: white; cursor: pointer; font-weight: bold; margin-top: 1rem; }


/* --- Sección Marcas Actualizada con Movimiento Interno --- */
.marcas {
    padding: 6rem 2rem;
    background-color: transparent; 
}

.contenedor-marcas {
    max-width: 1200px; /* Evita tocar bordes */
    margin: 0 auto;    /* Centra el contenedor */
}

.contenedor-marcas h2 {
    color: #00b4d8; /* Cyan corporativo */
    font-size: 2.5rem;
    font-weight: 700; 
    margin-bottom: 2rem;
    text-align: left;
    padding-left: 1rem;
}

/* La píldora blanca estática (Contenedor de desbordamiento) */
.fila-marcas {
    background-color: #ffffff;
    border-radius: 60px;
    height: 100px; /* Altura fija para la píldora */
    margin-bottom: 1.5rem;
    overflow: hidden; /* IMPORTANTE: Oculta los logos que salen */
    position: relative;
    display: flex;
    align-items: center;
}

/* La pista interna que se mueve de verdad */
.track-marcas {
    display: flex;
    align-items: center;
    gap: 40px; /* Espacio uniforme entre logos */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0 40px; /* Padding interno inicial */
    
    /* Animación: nombre, duración (ajusta la velocidad), tipo de curva, iteración */
    animation: scroll-interno 20s linear infinite;
    will-change: transform; /* Ayuda al rendimiento de la animación */
}

.marca-logo {
    max-height: 45px; 
    max-width: 150px;
    object-fit: contain; 
}

/* Definición de la Animación de Scroll Infinito */
@keyframes scroll-interno {
    from {
        /* Comienza en el inicio */
        transform: translateX(0);
    }
    to {
        /* Se mueve exactamente la mitad del ancho del track (cuando termina el primer set de logos) */
        transform: translateX(-50%);
    }
}

/* Ajustes para celulares */
@media (max-width: 768px) {
    .fila-marcas {
        border-radius: 30px;
        height: 80px;
        margin-bottom: 1rem;
    }
    .marca-logo {
        max-height: 35px;
    }
    .track-marcas {
        gap: 20px;
        animation-duration: 15s; /* Un poco más rápido en pantallas chicas */
    }
}




/* Contenedor principal: controla el tamaño y la posición */
.circulo-texto-wrapper {
    width: 150px; 
    height: 180px;
    position: absolute; 
    /* Ajusta estos valores para moverlo exactamente a donde lo quieres */
    top: 90vh; /* Esto lo baja casi al final de la primera pantalla */
    left: 100px; /* Esto lo empuja hacia el borde izquierdo */
    
    /* ESTAS DOS LÍNEAS SON LA MAGIA */
    z-index: 9999; /* Lo pone por encima de cualquier otro elemento (video, imágenes, fondo) */
    pointer-events: none; /* Evita que el círculo bloquee los clics si pasa por encima de un botón o enlace */
}

/* El SVG que contiene la animación giratoria */
.circulo-svg {
    width: 100%;
    height: 100%;
    animation: rotacion-infinita 15s linear infinite; /* 15s es la velocidad */
}

/* Estilo general de las letras */
.circulo-svg text {
    font-size: 13.5px; /* Ajusta este tamaño para que el texto cierre el círculo perfectamente */
    font-weight: 400;
    fill: #ffffff; /* Color blanco para las letras */
    letter-spacing: 4px; /* Separación entre las letras */
    text-transform: none;
}

/* Estilo específico para los puntos rosas */
.punto-rosa {
    fill: #ed0f8e; /* El código de color exacto que pediste */
    font-size: 10px; /* Puedes hacer el punto más grande o pequeño de forma independiente */
}

/* La animación que hace que de vueltas */
@keyframes rotacion-infinita {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}




/* --- ESTILOS DEL SEGUNDO CÍRCULO --- */

/* Contenedor principal: controla el tamaño y la posición independiente */
.circulo-texto-wrapper-2 {
    width: 150px; 
    height: 180px;
    position: absolute; 
    
    /* AJUSTA ESTOS VALORES PARA MOVER ESTE CÍRCULO EN ESPECÍFICO */
    top: 270vh; /* Auméntalo para que baje más en la página (ej: 250vh, 300vh) */
    right: 100px; /* Lo mantiene a la izquierda. Si lo quisieras a la derecha, borra esta línea y pon: right: 40px; */
    
    z-index: 9999; 
    pointer-events: none; 
}

/* El SVG del segundo círculo (misma velocidad de animación) */
.circulo-svg-2 {
    width: 100%;
    height: 100%;
    /* Reutiliza la animación que ya creaste antes llamada "rotacion-infinita" */
    animation: rotacion-infinita 15s linear infinite; 
}

/* Estilo general de las letras del segundo círculo */
.circulo-svg-2 text {
    font-size: 13.5px; 
    font-weight: 400;
    fill: #ffffff; 
    letter-spacing: 4px; 
    text-transform: none;
}

/* Nota: No necesitas volver a copiar el CSS de .punto-rosa ni el @keyframes rotacion-infinita, 
   porque esos ya los tienes en tu CSS y este segundo círculo los reutilizará automáticamente. */


/* --- PRELOADER --- */
/* --- PRELOADER --- */
/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999; /* Asegura que tape toda la web mientras carga */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* === CAMBIO 1: BORRAMOS LA IMAGEN DE TEXTURA Y EL FONDO GRIS === */
    /* background-image removed */
    /* background-size removed */
    /* background-position removed */
    
    /* === CAMBIO 2: PONEMOS EL COLOR SÓLIDO EXACTO QUE PEDISTE === */
    background-color: #111f2e; /* Color: 18385f */
    
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

/* El logo centrado */
.logo-preloader {
    width: 250px; /* Ajusta este valor si tu logo se ve muy grande o pequeño */
    position: relative;
    z-index: 2;
    /* Le ponemos una sombrita oscura para que no se pierda en tu fondo de concreto claro */
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.4));
    
    /* Animación de latido suave */
    animation: latido 2s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* EL EFECTO DE RUIDO DE TV ANALÓGICA */
/* EL EFECTO DE RUIDO DE TV ANALÓGICA */
/* EL EFECTO DE RUIDO DE TV ANALÓGICA */
.ruido-tv {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200vh;
    z-index: 1;
    
    /* === CAMBIO 3: USAMOS EL MISMO GRANULADO SUTIL DEL CUERPO (Frecuencia 0.35 para grano fino) === */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
    
    /* === CAMBIO 4: AJUSTAMOS INTENSIDAD Y BLEND SUTIL GLOBAL === */
    opacity: 0.35; /* Opacidad sutil global */
    mix-blend-mode: soft-light; /* Blend sutil global */
    
    pointer-events: none;
    
    /* Reutilizamos la misma vibración suave */
    animation: vibracionGrano 0.2s infinite;
}
/* Animación que hace que la estática "tiemble" */
@keyframes ruido-animacion {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}

/* Clase de JavaScript para desaparecer el preloader */
.preloader-oculto {
    opacity: 0 !important;
    visibility: hidden !important;
}



/* =========================================
   DISEÑO RESPONSIVE (Móviles y Tablets)
   ========================================= */

/* 1. Para Tablets y pantallas medianas (hasta 992px) */
@media (max-width: 992px) {
    /* Servicios: Pasa de estar uno al lado del otro, a estar uno arriba (menú) y la foto abajo */
    .servicios {
        flex-direction: column;
        padding: 5rem 2rem;
        gap: 3rem;
    }
    .servicios-lista, .servicios-galeria {
        width: 100%;
        flex: none; /* Quitamos la proporción flex que tenían antes */
    }
    .servicios-galeria {
        margin-top: 1rem;
    }
    #galeria-stack {
        height: 450px; /* Reducimos un poco la altura de la foto */
    }

    /* Contadores: Les permitimos bajar de línea si ya no caben los 4 seguidos */
    .contadores {
        flex-wrap: wrap; /* Quitamos el nowrap que pusimos antes */
        gap: 4rem;
    }
}

/* 2. Para Teléfonos Móviles (hasta 768px) */
@media (max-width: 768px) {
    /* Preloader: Logo un poco más pequeño para que no invada toda la pantalla */
    .logo-preloader {
        width: 180px;
    }

    /* Círculos de Texto Giratorio: Más pequeños y pegados a los bordes */
    .circulo-texto-wrapper {
        width: 120px;
        height: 120px;
        left: -15px;
    }
    .circulo-texto-wrapper-2 {
        width: 120px;
        height: 120px;
        left: 10px;
    }

    /* Servicios: Títulos más pequeños y foto adaptada al celular */
    .servicio-titulo {
        font-size: 1.8rem;
    }
    .subservicios li {
        font-size: 1.1rem;
    }
    #galeria-stack {
        height: 280px; /* Foto horizontal adaptada a celulares */
    }

    /* Contadores: Armamos una cuadrícula de 2 arriba y 2 abajo (2x2) */
    .contadores {
        gap: 3rem 1rem; /* 3rem espacio vertical, 1rem horizontal */
        padding: 4rem 1rem;
    }
    .contador-item {
        width: 45%; /* Toman casi la mitad de la pantalla cada uno */
    }
    .bola-icono {
        width: 55px;
        height: 55px;
        margin-bottom: 1rem;
    }
    .bola-icono svg {
        width: 24px;
        height: 24px;
    }
    .numero-contenedor {
        font-size: 2.8rem; /* Números más pequeños */
    }
    .contador-item p {
        font-size: 1.1rem;
    }

    /* Marcas (Píldoras blancas) */
    .contenedor-marcas h2 {
        font-size: 2rem;
        text-align: center;
        padding-left: 0;
    }
    .fila-marcas {
        border-radius: 30px;
        height: 70px; /* Píldora más delgada */
    }
    .marca-logo {
        max-height: 25px; /* Logos más pequeñitos */
        max-width: 90px;
    }
    .track-marcas {
        gap: 25px; /* Menos espacio entre los logos para que no se vea vacío en móvil */
    }
}

/* 3. Para Teléfonos MUY pequeños (hasta 480px) */
@media (max-width: 480px) {
    /* Contadores: Si la pantalla es muy pequeña, mejor ponemos 1 por línea (los 4 hacia abajo) */
    .contador-item {
        width: 100%; 
    }
    
    #galeria-stack {
        height: 220px; /* Foto más chata para no ocupar todo el alto */
    }
}




/* --- Sección Contenido Digital --- */
.contenido-digital {
    padding: 8rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

.contenido-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.texto-contenido {
    /* ...mantén tus propiedades de flex/ancho si las tienes... */
    
    /* LA LÍNEA CLAVE: Aplicamos posicionamiento relativo y valor negativo en 'top' para subirlo 'un poco' de forma independiente */
    position: relative;
    top: -15rem; /* Ajusta '4rem' (e.g., -2rem, -30px) a tu gusto para la distancia exacta que quieras subir */
    
    z-index: 10; /* Asegura que siga por encima del círculo giratorio, por si acaso */
}

.texto-contenido h3 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: -.2rem; /* Pega el texto de arriba con el de abajo */
}

/* Opcional: Para que las líneas del título no queden muy separadas */
.texto-contenido h2 {
    font-size: 3.5rem;
    font-weight: 300; 
    line-height: 1.1; /* Mantiene CONTENIDO y DIGITAL bien agrupados */
}

.texto-cyan {
    color: #1da9b7; /* El cyan de tu marca */
    font-size: 3.5rem; /* Un poco más pequeño que el resto del título para que resalte sin ser gigante */
    font-weight: 700; /* CONTENIDO en negrita */
}

.imagen-contenido {
    flex: 1.2;
    position: relative;
    /* ESTA LÍNEA ES LA QUE BAJA LAS LAPTOPS */
    margin-top: 18rem; 
    right: 10rem;
}

.laptop-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.4)); /* Sombrita para que las laptops resalten del fondo */
    position: relative;
    margin-top:-50px ;
    z-index: 2;
}

/* --- ANIMACIÓN COMPLETA: GIRA, SE DIBUJA Y FLOTA --- */
.animacion-interactivo {
    position: absolute;
    bottom: 5%; 
    right: -30%; /* Sigue bien a la derecha */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Estado inicial: oculto, más pequeño y de cabeza para el giro */
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

/* 1. Entra dando la vuelta (El Giro) */
.animacion-interactivo.activar-giro {
    animation: entrarGirando 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes entrarGirando {
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* El texto mantiene su estilo y rotación base */
.texto-interactivo {
    font-family: 'Caveat', cursive; 
    font-size: 2.8rem;
    color: #ffffff;
    transform: rotate(-15deg); 
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* Configuramos el SVG */
.flecha-svg {
    width: 150px;
    height: 100px;
    margin-top: -10px;
}

/* 1. Ocultamos la línea para que se dibuje */
.trazo-flecha {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

/* 2. La punta de la flecha NO se dibuja, solo arranca invisible */
.punta-flecha {
    opacity: 0; 
}

/* Animaciones en bucle infinito */
.animacion-interactivo.activar-giro .trazo-flecha {
    animation: dibujarBucle 3s linear infinite;
}

.animacion-interactivo.activar-giro .punta-flecha {
    animation: aparecerPuntaBucle 3s linear infinite;
}

/* Keyframes corregidos */
@keyframes dibujarBucle {
    0% { stroke-dashoffset: 400; opacity: 0; }
    10% { opacity: 1; }
    50% { stroke-dashoffset: 0; opacity: 1; } /* Termina de dibujar */
    80% { stroke-dashoffset: 0; opacity: 1; } /* Pausa */
    100% { stroke-dashoffset: 400; opacity: 0; } /* Reset */
}

@keyframes aparecerPuntaBucle {
    0%, 45% { opacity: 0; } /* Escondida mientras la línea viaja */
    50%, 80% { opacity: 1; } /* Aparece justo cuando la línea llega a ella */
    100% { opacity: 0; } /* Se apaga junto con la línea */
}

/* =========================================
   NUEVA ANIMACIÓN DE AROS (GIRO Y LATIDO SUAVE)
   ========================================= */

.espirales-fondo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra los aros en la sección */
    width: 100%;
    height: 100%;
    z-index: 1; /* Se queda detrás de la laptop */
    pointer-events: none; /* Para que no estorben al hacer clic */
}

/* El aro base segmentado (dashed) */
.espiral {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    
    /* === AQUÍ ESTÁ EL ARREGLO DE CORTES Y LUZ === */
    /* Usamos 'dashed' para los segmentos y opacidad baja para iniciar */
    border: 2px dashed rgba(29, 169, 183, 0.1); 
    
    /* Centramos solo con transform (el latido usará 'scale') */
    transform: translate(-50%, -50%);
    will-change: transform, scale, border-color, filter; 
}

/* === ANIMACIÓN DE ROTACIÓN INFINITA === */
@keyframes girarAro {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* === ANIMACIÓN DE LATIDO (LUZ MÁS POTENTE PERO IGUAL DE SUAVE) === */
/* === ANIMACIÓN DE LATIDO (AHORA SÍ, LA MATEMÁTICA ESTÁ PERFECTA) === */
@keyframes latidoLuz {
    0% {
        border-color: rgba(29, 169, 183, 0.1); 
        scale: 1; 
        
        /* OJO AQUÍ: Las mismas 3 sombras que el 50%, pero apagadas en cero */
        box-shadow: 0 0 0px rgba(29, 169, 183, 0), 
                    0 0 0px rgba(29, 169, 183, 0),
                    inset 0 0 0px rgba(29, 169, 183, 0);
    }
    
    50% {
        border-color: rgba(29, 169, 183, 1); 
        scale: 1.03; 
        
        /* LUZ MÁXIMA ENCENDIDA (Las mismas 3 sombras) */
        box-shadow: 0 0 45px rgba(29, 169, 183, 0.8), 
                    0 0 15px rgba(29, 169, 183, 0.9),
                    inset 0 0 20px rgba(29, 169, 183, 0.6);
    }
    
    100% {
        border-color: rgba(29, 169, 183, 0.1);
        scale: 1;
        
        /* Volvemos a las 3 sombras en cero */
        box-shadow: 0 0 0px rgba(29, 169, 183, 0), 
                    0 0 0px rgba(29, 169, 183, 0),
                    inset 0 0 0px rgba(29, 169, 183, 0);
    }
}

/* === APLICAMOS LAS ANIMACIONES (AHORA DURAN 6 SEGUNDOS CON EASE) === */

/* Aro 1 (Centro): Gira lento y respira con calma */
.e-1 { 
    width: 350px; 
    height: 350px; 
    animation: 
        latidoLuz 6s ease-in-out infinite,   /* Respiración de 6s */
        girarAro 12s linear infinite;        /* Rotación constante */
}

/* Aro 2 (Medio): Gira a la izquierda (reversa) y respira con desfase de 1.5s */
.e-2 { 
    width: 550px; 
    height: 550px; 
    animation: 
        latidoLuz 6s ease-in-out infinite 1.5s, /* Desfase proporcional */
        girarAro 8s linear infinite reverse;  /* Gira más rápido y al revés */
}

/* Aro 3 (Exterior): Gira súper lento y respira con desfase de 3s */
.e-3 { 
    width: 750px; 
    height: 750px; 
    animation: 
        latidoLuz 6s ease-in-out infinite 3s, /* Desfase proporcional */
        girarAro 20s linear infinite;          /* Gira lentito dando profundidad */
}


.circulo-texto-wrapper-3 {
    width: 150px; 
    height: 180px;
    position: absolute; 
    /* Ajusta estos valores para moverlo exactamente a donde lo quieres */
    top: 370vh; /* Esto lo baja casi al final de la primera pantalla */
    left: 100px; /* Esto lo empuja hacia el borde izquierdo */
    
    /* ESTAS DOS LÍNEAS SON LA MAGIA */
    z-index: 9999; /* Lo pone por encima de cualquier otro elemento (video, imágenes, fondo) */
    pointer-events: none; /* Evita que el círculo bloquee los clics si pasa por encima de un botón o enlace */
}

/* El SVG que contiene la animación giratoria */
.circulo-svg-3 {
    width: 100%;
    height: 100%;
    animation: rotacion-infinita 15s linear infinite; /* 15s es la velocidad */
}

/* Estilo general de las letras */
.circulo-svg-3 text {
    font-size: 13.5px; /* Ajusta este tamaño para que el texto cierre el círculo perfectamente */
    font-weight: 400;
    fill: #ffffff; /* Color blanco para las letras */
    letter-spacing: 4px; /* Separación entre las letras */
    text-transform: none;
}

/* Estilo específico para los puntos rosas */
.punto-rosa {
    fill: #ed0f8e; /* El código de color exacto que pediste */
    font-size: 10px; /* Puedes hacer el punto más grande o pequeño de forma independiente */
}

/* La animación que hace que de vueltas */
@keyframes rotacion-infinita {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* =========================================
   SECCIÓN EQUIPO (Círculos Flotantes)
   ========================================= */
.equipo {
    /* Antes era 8rem 2rem. Ahora tiene 2rem arriba, 2rem a los lados y 8rem abajo */
    padding: 2rem 2rem 8rem 2rem; 
    
    /* LA CLAVE: Con esto lo jalamos hacia arriba. Hazlo más negativo (ej: -5rem) si lo quieres aún más pegado */
    margin-top: -3rem; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* --- TÍTULO ESCALONADO --- */
.equipo-titulo {
    text-align: center;
    color: #ffffff;
    margin-bottom: 5rem;
    position: relative;
    display: inline-block;
}

.equipo-titulo .linea-1 {
    display: block;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: left;
    margin-left: -5rem; /* Lo empuja a la izquierda */
    margin-bottom: -1rem;
}

.equipo-titulo h2 {
    font-size: 7rem;
    font-weight: 600; /* Negrita para "tu marca" */
    letter-spacing: -2px;
    line-height: 1;
}

.equipo-titulo .linea-3 {
    display: block;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: right;
    margin-right: -5rem; /* Lo empuja a la derecha */
    margin-top: -1rem;
}

/* --- CARRUSEL DE CARAS --- */
.equipo-carrusel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Cada bolita individual */
.miembro-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6); /* Oscurece a los inactivos */
    transition: all 0.4s ease;
    
    /* ANIMACIÓN: El flotado constante que pediste */
    animation: flotarAvatar 4s ease-in-out infinite;
}

/* Desfasamos las animaciones para que no suban y bajen todos al mismo tiempo */
.miembro-avatar:nth-child(odd) { animation-delay: 1s; }
.miembro-avatar:nth-child(3n) { animation-delay: 2s; }

/* La bola principal (Michelle) */
.miembro-avatar.activo {
    width: 150px;
    height: 150px;
    filter: brightness(1); /* Full color */
    box-shadow: 0 20px 40px rgba(0,0,0,0.6); /* Sombra pesada */
    border: 3px solid rgba(255,255,255,0.05); 
    z-index: 2;
}

@keyframes flotarAvatar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- INFO DEL ACTIVO --- */
/* Busca .equipo-info y asegúrate de que tenga esta transición */
.equipo-info {
    text-align: center;
    color: #ffffff;
    margin-bottom: 4rem;
    transition: opacity 0.3s ease; /* Efecto suave al cambiar textos */
}margin-bottom: 4rem;

.fade-out {
    opacity: 0;
}


.equipo-info h3 {
    font-size: 2.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.punto-cyan {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--accent-color); /* El cyan de tu marca */
    border-radius: 50%;
}

.equipo-info p {
    font-size: 1.2rem;
    font-weight: 300;
    color: #cccccc;
    margin-top: 0.2rem;
}

/* =========================================
   ESTILO DEL BOTÓN CONTÁCTANOS (GLITCH CYBERPUNK)
   ========================================= */
.btn-contacto {
    --primary: #1da9b7; 
    --fuchsia: #ed0f8e; 
    --shimmy-distance: 25; 
    --border-width: 2px;

    position: relative;
    display: inline-block;
    background-color: transparent;
    color: var(--primary);
    border: var(--border-width) solid var(--primary);
    padding: 1rem 3rem; 
    font-size: 2rem; /* Mantenemos la letra grande que tenía */
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 0; /* Adiós forma de píldora, hola Cyberpunk */
    text-decoration: none;
    text-transform: uppercase;
    outline: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 75%);
}

/* 1. Botón base se esconde y aparece sólido */
.btn-contacto:hover {
    animation: boton-contacto-aparece 0.6s forwards;
}

@keyframes boton-contacto-aparece {
    0%, 60% {
        color: transparent;
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        transform: translateY(0);
    }
    61%, 100% {
        color: #031424;
        background-color: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 0 20px rgba(29, 169, 183, 0.6);
        transform: translateY(0); /* Le quitamos el salto que tenía antes para no malograr el glitch */
    }
}

/* --- CAPA 1: EL GLITCH DEL TEXTO --- */
.btn-contacto::before {
    content: 'CONTÁCTANOS'; /* Exactamente lo que dice tu HTML */
    position: absolute;
    inset: 0; 
    background-color: var(--primary);
    color: #031424; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0; 
    pointer-events: none;
}

.btn-contacto:hover::before {
    opacity: 1;
    /* REUTILIZAMOS la animación que ya está en tu CSS */
    animation: shimmy-text 0.6s forwards; 
    text-shadow: 4px 0 var(--fuchsia), -4px 0 #ffffff;
}

/* --- CAPA 2: EL GLITCH DEL CONTORNO --- */
.btn-contacto::after {
    content: ''; 
    position: absolute;
    inset: calc(var(--border-width) * -1);
    background: transparent;
    border: var(--border-width) solid var(--primary);
    z-index: 9; 
    opacity: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 75%);
}

.btn-contacto:hover::after {
    opacity: 1;
    /* REUTILIZAMOS la animación que ya está en tu CSS */
    animation: shimmy-text 0.6s forwards;
    box-shadow: 0 0 15px var(--fuchsia);
}

/* --- RESPONSIVE PARA EL EQUIPO --- */
@media (max-width: 992px) {
    .equipo-titulo h2 { font-size: 5rem; }
    .equipo-titulo .linea-1 { margin-left: 0; }
    .equipo-titulo .linea-3 { margin-right: 0; }
    .miembro-avatar { width: 60px; height: 60px; }
    .miembro-avatar.activo { width: 110px; height: 110px; }
}

@media (max-width: 768px) {
    .equipo-titulo h2 { font-size: 3.5rem; }
    .equipo-titulo .linea-1, .equipo-titulo .linea-3 { font-size: 1.5rem; }
    .equipo-carrusel { flex-wrap: wrap; gap: 1rem; }
    /* Ocultamos los extremos en móviles para que quepa bien */
    .miembro-avatar:first-child, .miembro-avatar:last-child { display: none; }
}




/* Asegúrate de que tu miembro-avatar tenga position: relative */
.miembro-avatar {
    /* ... (tus reglas anteriores de tamaño, filtro, animación, etc.) ... */
    position: relative; 
}

/* --- EL TOOLTIP CON EL NOMBRE --- */
/* La cajita con el texto */
.miembro-avatar::after {
    content: attr(data-nombre); /* Extrae el nombre del HTML mágicamente */
    position: absolute;
    top: -45px; /* Lo pone arriba de la cabeza */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Un poco más abajo para la animación */
    background-color: var(--accent-color); /* El cyan de tu marca */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none; /* Evita que el mouse se buguee al tocar el texto */
    z-index: 10;
}

/* El triangulito de abajo del tooltip (para que parezca bocadillo de chat) */
.miembro-avatar::before {
    content: '';
    position: absolute;
    top: -15px; /* Justo debajo de la cajita */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 6px;
    border-style: solid;
    border-color: var(--accent-color) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 10;
}

/* Al pasar el mouse, hacemos que aparezcan y suban un poquito */
.miembro-avatar:hover::after,
.miembro-avatar:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Pequeño detalle: que las fotos oscuras se aclaren al pasarles el mouse */
.miembro-avatar:not(.activo):hover {
    filter: brightness(0.9);
    cursor: pointer;
}



/* =========================================
   SECCIÓN CONTACTO
   ========================================= */
.contacto {
    padding: 8rem 2rem;
    position: relative;
    overflow: hidden;
}

.contenedor-contacto {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

/* --- LADO IZQUIERDO: Animaciones --- */
.contacto-animacion {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.texto-dibujado {
    font-family: 'Caveat', cursive; /* Tu fuente escrita a mano */
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    transform: rotate(-10deg);
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea 'tu proyecto' un poco a la derecha */
}

/* =========================================
   EFECTO LETRA POR LETRA Y FLECHA
   ========================================= */

/* 1. OBLIGATORIO: Solo las líneas contenedoras son bloques para que haya salto de línea */
.texto-dibujado .linea-1,
.texto-dibujado .linea-2 {
    font-family: 'Caveat', cursive; 
    display: block; 
    
}

/* 2. Las letras individuales (creadas por JS) van pegaditas en horizontal */
.texto-dibujado span.letra {
    opacity: 0;
    display: inline-block; /* LA CLAVE PARA QUE NO CAIGAN EN VERTICAL */
    transform: translateY(5px) scale(0.8);
}

/* 3. La animación de aparición de cada letra */
.contacto.activar-animacion .letra {
    animation: aparecerLetra 0.1s ease-out forwards;
}

@keyframes aparecerLetra {
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

/* --- CONFIGURACIÓN Y ANIMACIÓN DE LA FLECHA --- */
.flecha-contacto {
    width: 200px;
    height: 150px;
    margin-top: 10px;
    margin-left: 80px; /* Desplaza la flecha un poco a la derecha */
}

/* Estado oculto inicial de la flecha */
.trazo-contacto, .punta-contacto {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

/* Cuando el scroll activa la sección, la flecha se dibuja sola */
.contacto.activar-animacion .trazo-contacto {
    animation: dibujarFlechaContacto 1s ease-out forwards;
    animation-delay: 1.5s; /* Espera a que las letras terminen de aparecer */
}

.contacto.activar-animacion .punta-contacto {
    animation: dibujarFlechaContacto 0.3s ease-out forwards;
    animation-delay: 2.3s; /* La punta aparece justito al final del trazo */
}

@keyframes dibujarFlechaContacto {
    to { stroke-dashoffset: 0; }
}
/* --- LADO DERECHO: Formulario Minimalista --- */
.contacto-formulario {
    width: 60%; /* ¡Le damos mucho más ancho! (antes era 45%) */
    max-width: 700px; /* Rompemos el límite anterior de 500px para que los inputs se estiren a sus anchas */
}

.input-grupo {
    margin-bottom: 2rem;
}

/* Estilos de los inputs (Solo línea abajo) */
.contacto-formulario input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1.2rem;
    font-family: inherit;
    padding: 0.5rem 0;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Estilo del textarea (Cuadro completo) */
.contacto-formulario textarea {
    width: 100%;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 1rem;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease;
}

/* Cambio de color al hacer clic en el input */
.contacto-formulario input:focus,
.contacto-formulario textarea:focus {
    border-color: var(--accent-color); /* Se pone Cyan al escribir */
}

/* Color de los placeholders */
.contacto-formulario input::placeholder,
.contacto-formulario textarea::placeholder {
    color: #cccccc;
    font-weight: 300;
}

/* --- BOTÓN WHATSAPP --- */
.btn-w {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: #6bb922; /* Verde de la imagen */
    color: #031424;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.btn-w:hover {
    transform: translateY(-50%) scale(1.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .contenedor-contacto { flex-direction: column; text-align: center; }
    .texto-dibujado { align-items: center; transform: rotate(0); }
    .flecha-contacto { margin-left: 0; transform: rotate(90deg); /* Flecha hacia abajo en celular */ }
    .btn-w { top: auto; bottom: 20px; right: 20px; transform: none; }
    .btn-w:hover { transform: scale(1.1); }
}



/* =========================================
   SECCIÓN CONTACTO
   ========================================= */
.contacto {
    position: relative;
    padding: 8rem 2rem;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* === AQUÍ ESTÁ LA SOLUCIÓN === */
    /* Cambiamos 'hidden' por 'visible' para que el aro de 800px pueda sobresalir hacia arriba y abajo libremente */
    overflow: visible; 
    
    z-index: 2;
}

/* =========================================
   AROS CENTRADOS DETRÁS DEL FORMULARIO
   ========================================= */
.background-ripple {
    position: absolute;
    /* Antes decía right: 0%; ahora lo empujamos hacia el centro del formulario */
    right: 15%; 
    top: 50%;
    transform: translateY(-50%);
    width: 800px;
    height: 800px;
    pointer-events: none;
    z-index: -1;
}

/* Y para que en tu monitor 4K no se queden chiquitos ni desfasados: */
@media (min-width: 2000px) {
    .background-ripple {
        right: 22%; /* Calcula el centro exacto de la columna derecha en 4K */
        transform: translateY(-50%) scale(1.5); /* Los hace 50% más grandes para que abarquen el form gigante */
    }
}

/* =========================================
   ESTILO DEL BOTÓN DE ENVIAR (GLITCH SOLO AL ENTRAR EL MOUSE)
   ========================================= */
.btn-enviar {
    --primary: #1da9b7; 
    --fuchsia: #ed0f8e; 
    --shimmy-distance: 25; 
    --border-width: 2px;

    position: relative;
    background-color: transparent;
    color: var(--primary);
    border: var(--border-width) solid var(--primary);
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 0; 
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    text-transform: uppercase;
    outline: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 75%);
}

/* 1. Al pasar el mouse, el botón real se esconde y luego aparece sólido */
.btn-enviar:hover {
    /* Ejecuta esta animación 1 sola vez y se queda en el frame final (forwards) */
    animation: boton-base-aparece 0.6s forwards;
}

@keyframes boton-base-aparece {
    0%, 60% {
        color: transparent;
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    /* En el frame 61% (cuando acaba el glitch) el botón se vuelve sólido */
    61%, 100% {
        color: #031424;
        background-color: var(--primary);
        border-color: var(--primary);
        box-shadow: 0 0 20px rgba(29, 169, 183, 0.6);
    }
}

/* --- CAPA 1: EL GLITCH DEL TEXTO --- */
.btn-enviar::before {
    content: 'ENVIAR MENSAJE'; 
    position: absolute;
    inset: 0; 
    background-color: var(--primary);
    color: #031424; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0; 
    pointer-events: none;
}

/* Se ejecuta 1 sola vez y se esconde solo */
.btn-enviar:hover::before {
    opacity: 1;
    animation: shimmy-text 0.6s forwards;
    text-shadow: 4px 0 var(--fuchsia), -4px 0 #ffffff;
}

/* --- CAPA 2: EL GLITCH DEL CONTORNO --- */
.btn-enviar::after {
    content: ''; 
    position: absolute;
    inset: calc(var(--border-width) * -1);
    background: transparent;
    border: var(--border-width) solid var(--primary);
    z-index: 9; 
    opacity: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 75%);
}

.btn-enviar:hover::after {
    opacity: 1;
    animation: shimmy-text 0.6s forwards;
    box-shadow: 0 0 15px var(--fuchsia);
}

/* --- KEYFRAMES ORIGINALES --- */
@keyframes shimmy-text {
    0% { clip-path: inset(2% 0 95% 0); }
    2%, 8% { clip-path: inset(78% 0 0 0); transform: translate(calc(var(--shimmy-distance) * -1px), 0); }
    6% { clip-path: inset(78% 0 0 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    9% { clip-path: inset(78% 0 0 0); transform: translate(0, 0); }
    10% { clip-path: inset(44% 0 46% 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    13% { clip-path: inset(44% 0 46% 0); transform: translate(0, 0); }
    14%, 21% { clip-path: inset(0 0 100% 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    15%, 20% { clip-path: inset(40% 0 60% 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    25% { clip-path: inset(40% 0 15% 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    30% { clip-path: inset(40% 0 15% 0); transform: translate(calc(var(--shimmy-distance) * -1px), 0); }
    35%, 45% { clip-path: inset(63% 0 20% 0); transform: translate(calc(var(--shimmy-distance) * -1px)); }
    40% { clip-path: inset(63% 0 20% 0); transform: translate(calc(var(--shimmy-distance) * 1px)); }
    50% { clip-path: inset(63% 0 20% 0); transform: translate(0, 0); }
    55% { clip-path: inset(0 0 90% 0); transform: translate(calc(var(--shimmy-distance) * 1px), 0); }
    60% { clip-path: inset(0 0 90% 0); transform: translate(0, 0); }
    /* Del frame 61% al 100% la capa se vuelve invisible (inset 100%), dándole paso al botón sólido */
    31%, 61%, 100% { clip-path: inset(0 0 100% 0); }
}
.ripple-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Borde base súper sutil con el cyan de tu marca */
    border: 1px solid rgba(29, 169, 183, 0.1); 
    border-radius: 50%;
    /* La magia: 4 segundos de respiración en bucle */
    animation: respiracionRadar 4s ease-in-out infinite;
    will-change: transform, border-color, filter;
}

/* Tamaños fijos que tú pusiste (¡Excelente decisión!) + Desfase de animación */
.ripple-circle:nth-child(1) { width: 200px; height: 200px; animation-delay: 0s; }
.ripple-circle:nth-child(2) { width: 400px; height: 400px; animation-delay: 1s; }
.ripple-circle:nth-child(3) { width: 600px; height: 600px; animation-delay: 2s; }
.ripple-circle:nth-child(4) { width: 800px; height: 800px; animation-delay: 3s; }

/* El Keyframe: Solo altera el brillo y un micro-escalado (sin romper la web) */
@keyframes respiracionRadar {
    0%, 100% {
        border-color: rgba(29, 169, 183, 0.05); /* Casi apagado */
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 0px rgba(29, 169, 183, 0));
    }
    50% {
        border-color: rgba(29, 169, 183, 0.5); /* Se enciende la línea */
        transform: translate(-50%, -50%) scale(1.02); /* Se infla apenas un pelín */
        filter: drop-shadow(0 0 10px rgba(29, 169, 183, 0.4)); /* Suelta el glow */
    }
}
/* --- CONTENEDOR PRINCIPAL --- */
.contenedor-contacto {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    gap: 2rem;
    transform: translateX(-80px);
}

/* --- LADO IZQUIERDO: TEXTO Y FLECHA --- */
.contacto-animacion {
    width: 35%; /* Le bajamos un poco (antes era 45%) para darle espacio al formulario */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.texto-dibujado {
    font-family: 'Caveat', cursive; /* LA MISMA FUENTE DE INTERACTIVO */
    font-size: 4.5rem;
    color: #ffffff;
    font-weight: 700;
    transform: rotate(-10deg);
    line-height: 1.1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Configuración para el JS Letra por Letra */
.texto-dibujado .linea-1,
.texto-dibujado .linea-2 {
    display: block; 
}
.texto-dibujado span.letra {
    font-family: 'Caveat', cursive !important;
    opacity: 0;
    display: inline-block;
    transform: translateY(5px) scale(0.8);
}
.contacto.activar-animacion .letra {
    animation: aparecerLetra 0.1s ease-out forwards;
}

@keyframes aparecerLetra {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- FLECHA MEJORADA Y FLUIDA --- */
.flecha-contacto {
    width: 250px;
    height: 200px;
    margin-top: -10px;
    margin-left: 50px;
}

/* Gracias al pathLength="100", el dasharray siempre es 100 exacto */
.trazo-contacto, .punta-contacto {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.punta-contacto {
    opacity: 0; /* La punta arranca invisible (Déjalo así para la animación) */
    
    /* --- AQUÍ ESTÁ LA MAGIA PARA MANIPULARLA --- */
    transform-box: fill-box; /* Obliga a que el centro de rotación sea la propia punta, no todo el lienzo */
    transform-origin: center; /* Rota desde su propio centro */
    
    /* MODIFICA ESTOS 3 VALORES A TU GUSTO: */
    transform: 
        translateY(8px)   /* Mueve hacia ABAJO (usa números negativos para subir, ej: -10px) */
        translateX(1px)   /* Mueve hacia la IZQUIERDA (números positivos para la derecha, ej: 10px) */
        rotate(-30deg);     /* INCLINA la punta (grados positivos giran hacia abajo/derecha, negativos hacia arriba) */
}

/* cubic-bezier hace que arranque rápido y frene suavecito, como una mano real */
.contacto.activar-animacion .trazo-contacto {
    animation: dibujarFlecha 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.5s; /* Espera a que termine de escribirse el texto */
}

/* La punta se dibuja en una fracción de segundo justo cuando llega la línea */
.contacto.activar-animacion .punta-contacto {
    animation: dibujarFlecha 0.2s ease-out forwards, aparecerPunta 0.1s forwards;
    animation-delay: 2.8s; /* Ajustado para calzar perfecto con el final del trazo */
}

@keyframes dibujarFlecha {
    to { stroke-dashoffset: 0; }
}

@keyframes aparecerPunta {
    to { opacity: 1; }
}

/* --- LADO DERECHO: FORMULARIO --- */
.contacto-formulario {
    width: 45%;
    max-width: 500px;
}

.input-grupo {
    margin-bottom: 1.8rem;
}

.input-grupo input, 
.input-grupo textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1.1rem;
    padding: 0.8rem 0;
    outline: none;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.input-grupo.textarea-grupo textarea {
    border: 1px solid #ffffff; /* Borde completo para el mensaje */
    border-radius: 4px;
    padding: 1rem;
    height: 120px;
    resize: none;
}

.input-grupo input:focus,
.input-grupo textarea:focus {
    border-color: #A4D141; /* Verde al hacer clic */
}

.input-grupo input::placeholder,
.input-grupo textarea::placeholder {
    color: #aaaaaa;
    font-weight: 300;
}

/* =========================================
   WIDGET WHATSAPP OFICIAL (BOTÓN FLOTANTE)
   ========================================= */
.widget-wssp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    display: flex;
    align-items: center; /* Ahora el texto y el botón van uno al lado del otro */
    gap: 15px; 
    text-decoration: none;
    cursor: pointer;
}

/* La cajita oscura del texto para que se lea perfecto */
.wssp-titulo {
    color: #ffffff;
    background-color: rgba(3, 20, 36, 0.85); 
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;

    /* ¡ESTA ES LA LÍNEA CLAVE! */
    text-align: center; 

    line-height: 1.2;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: flotarTitulo 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* El círculo verde oficial */
.wssp-icono {
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Verde oficial de WhatsApp */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ondas expansivas tipo radar detrás del botón */
.wssp-icono::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background-color: rgba(37, 211, 102, 0.5);
    z-index: -1;
    animation: latidoWssp 2s infinite;
}

/* Interacción al pasar el mouse */
.widget-wssp:hover .wssp-icono { 
    transform: scale(1.1); 
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.widget-wssp:hover .wssp-titulo {
    transform: translateX(-5px); /* El texto se aleja un pelín */
}

/* Animaciones */
@keyframes latidoWssp {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes flotarTitulo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Ajuste para Celulares */
@media (max-width: 768px) {
    .widget-wssp { 
        bottom: 20px; 
        right: 20px; 
        gap: 10px;
    }
    .wssp-icono {
        width: 50px;
        height: 50px;
    }
    .wssp-icono svg {
        width: 28px;
        height: 28px;
    }
    /* En celulares solemos ocultar el texto para que no estorbe la pantalla */
    .wssp-titulo {
        display: none; 
    }
}

/* =========================================
   MALLA SUPERPUESTA GLOBAL (TODA LA PÁGINA)
   ========================================= */

.malla-overlay {
    /* FIXED es la clave: La malla se queda quieta en tu pantalla mientras tú bajas por la página */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;  /* Abarca el 100% del ancho de la pantalla */
    height: 100vh; /* Abarca el 100% del alto de la pantalla */
    z-index: -1;   /* OBLIGATORIO: Lo tira al fondo del abismo, detrás de todas tus secciones */
    pointer-events: none; /* Nadie lo puede clickear por error */
    overflow: hidden;
}

.malla-ola {
    position: absolute;
    top: -10%; 
    left: -10%;
    width: 120%; 
    height: 120%;
    object-fit: cover; 
    
    /* Como el fondo ya es liso y oscuro, no necesitamos mix-blend-mode, 
       podemos borrar esa línea o dejarla en 'normal' */
    mix-blend-mode: normal; 
    
    /* ¡Súbele el brillo! Ponlo en 0.8 o 1 para que los puntos cyan destaquen a full */
    opacity: .1; 
    
    animation: oleajeMalla 25s ease-in-out infinite;
    will-change: transform; 
}

/* El movimiento suave de ola (No cambia) */
@keyframes oleajeMalla {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-2%, 3%) scale(1.02) rotate(0.5deg); }
    50% { transform: translate(-3.5%, 0) scale(1.04) rotate(0deg); }
    75% { transform: translate(-1.5%, -3%) scale(1.02) rotate(-0.5deg); }
}



/* =========================================
   CAPA DE GRANULADO TV (SÚPER SUTIL Y ANIMADA)
   ========================================= */


.grano-tv {
    position: absolute;
    /* EL TRUCO: La hacemos gigante y la centramos para que al vibrar no muestre los bordes */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    
    z-index: 1.5; 
    pointer-events: none; 
    
    /* Mantenemos la opacidad sutil para que sea elegante (0.10 a 0.15) */
    opacity: 0.12; 
    mix-blend-mode: soft-light; 

    /* EL AJUSTE CLAVE: Disminuimos baseFrequency para granos más grandes */
    /* EL AJUSTE CLAVE: baseFrequency en 0.35 para un tamaño intermedio perfecto */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
    
    /* LA MAGIA: Animación rapidísima (0.2s) que se repite infinito */
    animation: vibracionGrano 0.2s infinite;
    will-change: transform; /* Le dice a la tarjeta gráfica que procese esto para evitar lag */
}

/* Los saltos aleatorios que crean el efecto de estática real */
@keyframes vibracionGrano {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-2%, -2%); }
    20% { transform: translate(-4%, 2%); }
    30% { transform: translate(2%, -4%); }
    40% { transform: translate(-2%, 4%); }
    50% { transform: translate(-4%, 2%); }
    60% { transform: translate(4%, 0); }
    70% { transform: translate(0, 2%); }
    80% { transform: translate(-4%, 0); }
    90% { transform: translate(2%, 2%); }
    100% { transform: translate(2%, 0); }
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    position: relative;
    z-index: 10; /* Por encima de las mallas y aros de fondo */
    padding: 6rem 2rem 2rem 2rem;
    background: transparent; /* Deja ver el fondo azul oscuro global */
}

.footer-contenido {
    max-width: 1200px;
    margin: 0 auto;
    
    /* === LA NUEVA LÍNEA BLANCA SUTIL === */
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Mismo color que la de abajo */
    padding-top: 4rem; /* Le damos aire para que el logo y el menú no se peguen a la raya */
}

/* --- ARRIBA: Logo y Navegación --- */
.footer-arriba {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4rem;
    gap: 4rem; /* Aumenté el gap para que respiren más */
    flex-wrap: nowrap; /* Obligamos a que se queden en una sola línea en PC */
}

/* Solo permitimos que bajen en pantallas chicas */
@media (max-width: 1200px) {
    .footer-arriba {
        flex-wrap: wrap; 
    }
}

.footer-logo img {
    max-width: 250px; /* Tamaño del logo (ajústalo a tu gusto) */
    height: auto;
}

.footer-enlaces {
    display: flex;
    gap: 2.5rem; /* Separación entre cada columna de enlaces */
    flex-wrap: wrap;
}

.enlace-col {
    display: flex;
    flex-direction: column;
}

/* Títulos principales (Portafolio, Servicios, etc.) */
.enlace-principal {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.enlace-principal:hover {
    color: #1da9b7; /* Color Cyan al pasar el mouse */
}

/* Sub-enlaces (Audiovisuales, Diseño, etc.) */
.sub-enlaces {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Separación entre sub-items */
}

.sub-enlaces a {
    color: #dddddd; /* Un blanco un poco más apagado */
    font-size: 0.95rem;
    font-weight: 300;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sub-enlaces a:hover {
    color: #ffffff; /* Se iluminan al pasar el mouse */
}

/* --- ABAJO: Copyright --- */
.footer-abajo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* La línea finita de tu diseño */
    padding-top: 2rem;
}

.footer-abajo p {
    color: #bbbbbb; /* Gris clarito para no robar atención */
    font-size: 0.9rem;
    font-weight: 300;
    margin: 0;
}

/* =========================================
   RESPONSIVE DEL FOOTER (Móviles)
   ========================================= */
@media (max-width: 992px) {
    .footer-arriba {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3rem;
    }
    .footer-enlaces {
        justify-content: center;
        gap: 2rem;
    }
    .footer-abajo {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .footer-enlaces {
        flex-direction: column;
        gap: 1.5rem;
    }
    .sub-enlaces {
        align-items: center; /* Centra los sub-enlaces en celulares */
    }
}

/* =========================================
   LOGO DEL HEADER
   ========================================= */

/* 2. Limpiamos el contenedor del logo */
.logo { 
    z-index: 10; 
    /* Si ves que el logo queda un poquito más arriba o abajo que las rayitas del menú, 
       juega con este margin-top para cuadrarlo milimétricamente */
    margin-top: 5px; 
}

/* Le damos tamaño a tu imagen */
.logo-header {
    /* Ajusta este número (120px, 150px, etc.) hasta que lo veas del tamaño perfecto */
    max-width: 110px; 
    height: auto;
    
    /* PRO-TIP: Si tu logo original es negro y no se ve bien sobre el video, 
       descomenta la línea de abajo borrando los /* para que se vuelva blanco automáticamente */
    /* filter: brightness(0) invert(1); */
}




.btn-mute {
    /* --- NUEVA POSICIÓN: ABAJO Y AL CENTRO --- */
    position: fixed;
    bottom: 30px; /* Separación desde el borde inferior */
    left: 50%; /* Lo mueve al 50% de la pantalla */
    transform: translateX(-50%); /* Lo centra perfectamente sobre su propio eje */
    z-index: 100; /* Para que quede por encima del video y la malla */

    /* --- ESTILOS VISUALES Y FORMA CIRCULAR (se mantienen) --- */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    transition: background 0.3s ease, transform 0.2s ease; /* Transición extra para el hover */
    padding: 0;
    box-sizing: border-box;
}

/* Efecto hover sutil */
.btn-mute:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%) scale(1.1); /* Crece un poquito al pasar el mouse sin perder el centro */
}

.btn-mute img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
@media (max-width: 768px) {
    .btn-mute {
        bottom: 30px; /* Un poco más abajo en celulares */
        width: 50px;
        height: 50px;
    }
}


/* =========================================
   EFECTO GLITCH PARA CAMBIO DE SERVICIO
   ========================================= */
.glitch-activo {
    animation: golpeGlitch 0.3s cubic-bezier(.25, .46, .45, .94) both !important;
}

/* =========================================
   GLITCH VHS EXTREMO (CON DISTORSIÓN DE COLOR)
   ========================================= */
@keyframes golpeGlitch {
    0% { 
        transform: skew(0deg) scale(1) translateX(0); 
        filter: hue-rotate(0deg) saturate(100%) blur(0) brightness(1); 
    }
    15% { 
        /* Estirón fuerte a la izquierda y colores súper saturados y rotados */
        transform: skew(-25deg) scale(1.05) translateX(-10px); 
        filter: hue-rotate(90deg) saturate(400%) blur(2px) drop-shadow(-10px 0 0 #1da9b7); 
    }
    30% { 
        /* Estirón a la derecha, colores en negativo (invert) y sombra magenta */
        transform: skew(20deg) scale(1.05) translateX(10px); 
        filter: invert(0.8) hue-rotate(-90deg) drop-shadow(10px 0 0 #ed0f8e); 
    }
    50% { 
        /* Salto hacia arriba, colores reventados al 500% y desenfoque de estática */
        transform: skew(-15deg) scale(1.1) translateY(5px); 
        filter: hue-rotate(180deg) saturate(500%) contrast(200%) blur(4px); 
    }
    70% { 
        /* Flashazo de luz blanca con separación de colores 3D ruda */
        transform: skew(10deg) scale(1.05) translateY(-5px); 
        filter: brightness(2) drop-shadow(-20px 0 0 #1da9b7) drop-shadow(20px 0 0 #ed0f8e); 
    }
    85% { 
        /* Frenando el golpe, pero aún con contraste alto */
        transform: skew(-5deg) scale(1.02); 
        filter: hue-rotate(45deg) saturate(300%) contrast(150%); 
    }
    100% { 
        /* Vuelve a la normalidad intacta */
        transform: skew(0deg) scale(1) translateX(0); 
        filter: hue-rotate(0deg) saturate(100%) blur(0) brightness(1); 
    }
}


/* =========================================
   ESCUDO ANTI-HOVER ACCIDENTAL (SUBSERVICIOS)
   ========================================= */

/* Por defecto, los subservicios no pueden ser tocados por el mouse si el acordeón está cerrado */
.subservicios li {
    pointer-events: none; 
}

/* Cuando el acordeón se abre (clase activo), ejecutamos un temporizador */
.servicio-item.activo .subservicios li {
    /* Retrasamos la interación del mouse por 0.5 segundos */
    animation: activarRaton 1s forwards;
}

/* El temporizador: Mantiene el escudo arriba hasta el final */
@keyframes activarRaton {
    0%, 80% { 
        pointer-events: none; /* Escudo activado: Ignora el mouse */
    }
    100% { 
        pointer-events: auto; /* Escudo desactivado: Ya puedes hacer hover */
    }
}

.puntos-destello span {
    position: absolute;
    width: 30px;
    height: 3px;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.9) 30%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.2) 70%,
        rgba(255,255,255,0) 100%
    );

    offset-path: border-box;
    offset-rotate: auto;

    animation: caminar 16s linear infinite;

    will-change: offset-distance, transform;
    transform: translateZ(0);
}
/* Cyan */
.puntos-destello span:nth-child(1) {
    box-shadow: 
        0 0 6px rgba(29,169,183,0.6),
        0 0 12px rgba(29,169,183,0.4),
        0 0 20px rgba(29,169,183,0.2);
    filter: blur(2px);
}

/* Magenta */
.puntos-destello span:nth-child(2) {
    box-shadow: 
        0 0 6px rgba(237,15,142,0.6),
        0 0 12px rgba(237,15,142,0.4),
        0 0 20px rgba(237,15,142,0.2);
    filter: blur(2px);
    animation-delay: -200s;
}
@keyframes caminar {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

.puntos-destello span {
    mix-blend-mode: screen;
}

/* Ajuste fino al marco para que el blur no se corte */
.marco-neon {
    overflow: visible !important;
}

/* =========================================
   RESCATE FINAL DEL TEXTO DE LA GALERÍA
   ========================================= */
.foto-info {
    position: absolute !important;
    bottom: -35px !important; /* Lo saca de la foto y lo pone en el margen del neón */
    right: 10px !important; 
    z-index: 999 !important; /* Gana a cualquier foto (que tienen z-index 10) */
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8) !important; /* Sombrilla por si acaso */
}



/* =========================================
   GLITCH RGB PARA EL TEXTO DE LA GALERÍA
   ========================================= */

@keyframes reverse-position {
  0%   { left: 0; top: 0; } 
  50%  { left: -3px; top: -3px; }  
  100% { left: 0; top: 0; }
}

@keyframes forward-position {
  0%   { left: 0; top: 0; } 
  50%  { left: 3px; top: 3px; }  
  100% { left: 0; top: 0; }
}

/* Preparamos los clones ocultos detrás del texto original */
.foto-info::before,
.foto-info::after {
    content: attr(data-text); /* Toma el texto exacto del HTML para clonarlo */
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; /* Apagados por defecto */
    pointer-events: none;
}

/* Clon Cyan */
.foto-info::before {
    color: #00ffff;
    z-index: -1;
}

/* Clon Rojo/Magenta */
.foto-info::after {
    color: #ff0000;
    z-index: -2;
}

/* Cuando el JS le pone la clase, se hacen visibles y tiemblan */
.foto-info.glitch-texto-activo::before {
    opacity: 0.8;
    animation: reverse-position 0.1s infinite;
}

.foto-info.glitch-texto-activo::after {
    opacity: 0.8;
    animation: forward-position 0.1s infinite;
}



/* =========================================
   FORMULARIO GLITCH HOLOGRÁFICO (ADAPTADO)
   ========================================= */

.input-container {
  --bg-color: #031424; 
  --primary-color: #1da9b7; 
  --secondary-color: #ed0f8e; 
  --text-color: #ffffff;
  --glitch-anim-duration: 0.4s;

  position: relative;
  width: 100% !important; /* <--- Esto asegura que el glitch ocupe los nuevos 700px */
  margin-bottom: 2.5rem; 
}

/* --- Input --- */
.holo-input {
  width: 100%;
  height: 3.5rem;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  outline: none;
  padding: 0 1rem !important;
  color: var(--primary-color) !important;
  font-family: inherit;
  font-size: 1.1rem !important;
  caret-color: var(--primary-color);
  z-index: 10;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Fix especial para el Textarea para que no se aplaste */
.holo-textarea {
  height: 120px !important;
  padding-top: 1rem !important;
  resize: none !important;
}

/* --- Floating Label --- */
.input-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--text-color);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 11;
  font-size: 1rem;
}

/* Cuando escribes o haces click, el texto sube */
.holo-input:focus + .input-label,
.holo-input:not(:placeholder-shown) + .input-label {
  top: -1.2rem;
  left: 0;
  font-size: 0.85rem;
  opacity: 1;
  color: var(--primary-color);
}

/* El efecto glitch en el label al hacer focus */
.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color); /* Fondo oscuro para tapar la original */
}
.holo-input:focus + .input-label::before {
  color: var(--secondary-color);
  animation: glitch-label var(--glitch-anim-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.holo-input:focus + .input-label::after {
  color: var(--primary-color);
  animation: glitch-label var(--glitch-anim-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
}

/* --- Decorative Layers --- */
.input-border,
.input-scanline,
.input-glow,
.input-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.input-border {
  border: 1px solid rgba(29, 169, 183, 0.1);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  opacity: 0.5;
}
.corner-tl { top: -0.3rem; left: -0.3rem; border-right: none; border-bottom: none; }
.corner-tr { top: -0.3rem; right: -0.3rem; border-left: none; border-bottom: none; }
.corner-bl { bottom: -0.3rem; left: -0.3rem; border-right: none; border-top: none; }
.corner-br { bottom: -0.3rem; right: -0.3rem; border-left: none; border-top: none; }

.input-glow {
  background: radial-gradient(ellipse at center, rgba(29, 169, 183, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.input-scanline {
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(29, 169, 183, 0.1) 48%, rgba(29, 169, 183, 0.2) 50%, rgba(29, 169, 183, 0.1) 52%, transparent 100%);
  opacity: 0;
}

/* --- Data Visualization (Barritas inferiores) --- */
.input-data-stream {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 0.3rem;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}
.stream-bar {
  flex-grow: 1;
  background-color: var(--primary-color);
  transition: transform 0.2s, opacity 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}

/* --- ESTADOS FOCUS (Cuando haces clic) --- */
.holo-input:focus {
  border-color: transparent !important;
}
.holo-input:focus ~ .input-border {
  opacity: 1;
  border-color: rgba(29, 169, 183, 0.5);
}
.holo-input:focus ~ .input-corners .corner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 3px;
  opacity: 1;
}
.holo-input:focus ~ .input-glow { opacity: 1; }
.holo-input:focus ~ .input-scanline { animation: scan-vertical 4s linear infinite; }
.holo-input:focus ~ .input-data-stream { opacity: 1; }
.holo-input:focus ~ .input-data-stream .stream-bar {
  animation: data-pulse 2s infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

/* --- Keyframes del Formulario --- */
@keyframes glitch-label {
  0% { transform: translate(0); clip-path: inset(0 0 0 0); }
  20% { transform: translate(-0.2rem, 0.1rem); clip-path: inset(50% 0 20% 0); }
  40% { transform: translate(0.1rem, -0.1rem); clip-path: inset(20% 0 60% 0); }
  60% { transform: translate(-0.15rem, 0.1rem); clip-path: inset(80% 0 5% 0); }
  80% { transform: translate(0.15rem, -0.15rem); clip-path: inset(30% 0 45% 0); }
  100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}

@keyframes scan-vertical {
  0% { opacity: 0; transform: translateY(-100%); }
  25% { opacity: 0.5; }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(100%); }
}

@keyframes data-pulse {
  0%, 100% { transform: scaleY(0.2); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 0.8; }
}




/* =========================================
   FORZAR EL ANCHO DEL FORMULARIO GLITCH
   ========================================= */

/* 1. Achicamos el lado izquierdo (Texto y flecha) para hacer espacio */
.contenedor-contacto .contacto-animacion {
    width: 50% !important;
    flex: none !important;
}

/* 2. Atacamos directo a la etiqueta FORM para que se estire con furia */
.contenedor-contacto form {
    width: 50% !important; 
    max-width: 800px !important; /* Límite gigante para que respire */
    flex: none !important;
}

/* 3. Nos aseguramos que en celulares vuelva a ser de pantalla completa */
@media (max-width: 992px) {
    .contenedor-contacto .contacto-animacion,
    .contenedor-contacto form {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================
   AJUSTE DE HEADER Y VIDEO PARA CELULARES
   ========================================= */
@media (max-width: 768px) {
    /* 1. Arreglamos el salto de la barra de direcciones del celular */
    header {
        height: 100vh; /* Fallback para celulares antiguos */
        height: 100dvh; /* Medida dinámica para celulares modernos */
        padding: 1.5rem; /* Le bajamos el padding para que el logo y el texto tengan espacio */
    }

    #bg-video {
        height: 100vh;
        height: 100dvh;
        
        /* 2. EL TRUCO DEL ENFOQUE: 
           Si la parte más importante de tu video NO está en el centro exacto, 
           puedes mover el enfoque aquí. 
           - 'center center' es el centro (por defecto).
           - '30% center' lo mueve hacia la izquierda.
           - '70% center' lo mueve hacia la derecha.
           Juega con este valor si ves que se corta algo vital. */
        object-position: center center; 
    }
    
    /* ... el resto de tus estilos de (max-width: 768px) se quedan igual ... */
}