/* --- CONFIGURACIÓN GENERAL --- */
html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    min-height: 100%; /* Cambiar height: 100% por min-height */
    background-color: #fff; 
    font-family: 'Atkinson Hyperlegible', sans-serif;
    display: flex;
    flex-direction: column;
}

/* --- LOGO (Escritorio) --- */
.logo-container {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 300px; 
    opacity: 0;
    animation: fadeIn 4s ease-in-out forwards;
}

.logo-container img, 
.logo-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- TEXTOS (Escritorio) --- */
.welcome-text {
    position: absolute;
    top: 35%; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 4s ease-in-out 1s forwards;
}

#welcome-h2 {
	text-transform: uppercase;
	text-shadow: 2px 2px 3px rgba(80, 80, 80, 0.2);
}

h1 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 550;
    font-size: 2.5rem;
    color: #464646;
    margin-bottom: 0.5rem;
}

#human {
    font-family: 'DM Mono', monospace;
    font-weight: 500; 
    font-size: 1.2rem;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
	text-shadow: 2px 2px 3px rgba(80, 80, 80, 0.2);
}

h2 {
    font-family: 'DM Mono', monospace;
    font-weight: 400; 
    font-size: 1.2rem;
    font-style: italic;
    color: #666;
    letter-spacing: 1px;
    line-height: 1.5; /* Espaciado para que el <> respire */
}

/* --- SVG DE FONDO --- */
#svg-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 1;
}

/* Evita que se dispare la selección y la búsqueda de Android en el menú */
body {
    -webkit-user-select: none; /* Evita que Android seleccione texto */
    user-select: none;
    -webkit-touch-callout: none; /* Desactiva el menú contextual de enlaces en iOS/Android */
    -webkit-tap-highlight-color: transparent; /* Elimina el recuadro que sale al tocar */
}
/* Estilo para el botón de Home */
.btn-home {
    font-family: 'DM Mono', monospace;
    font-size: 0.9rem;
    text-decoration: none;
    color: #9900ef;
    border: 1px solid #9900ef;
    padding: 6px 14px;
    border-radius: 4px;
    transition: 0.3s;
    text-transform: uppercase;
}
.btn-home:hover {
    background-color: #9900ef;
    color: #fff;
}

/* --- COMPONENTES DE FONDO (PÁGINAS CON VELO) --- */

.velo_blanco {
    /* Mantenemos el velo pero bajamos el z-index del body indirectamente */
    background-color: rgba(255, 255, 255, 0.5) !important;
    min-height: 100vh;
    position: relative; 
}

.wrapper-limitado {
    position: relative;
    z-index: 10; /* El contenido siempre arriba */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.contenedor-fondo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* BAJAMOS ESTO A -2 para que el blanco del body no lo tape */
    pointer-events: none;
}

#svg-fondo {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- AJUSTE SOLO DEL MENÚ (IZQUIERDA) EN DESKTOP --- */
@media (min-width: 800px) {
    .nav-principal {
        /* Bajamos el menú 60px sin afectar a la columna de la derecha */
        margin-top: 60px; 
    }
}
 .contenido-contacto { flex: 1; display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin-top: 20px; }
.form-contacto { display: flex; flex-direction: column; gap: 15px; }
.campo-grupo { display: flex; flex-direction: column; gap: 5px; }
.campo-grupo label { font-family: 'DM Mono', monospace; font-size: 0.9rem; color: #666; text-transform: uppercase; }
.form-contacto input, .form-contacto textarea { padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 1rem; }
.oblig { color: #9900ef; font-size: 0.8rem; }
.btn-enviar { background-color: #9900ef; color: #fff; border: none; padding: 20px !important; font-family: 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; transition: 0.3s; border-radius: 4px; font-weight: bold; font-size: 1.2rem !important; letter-spacing: 2px; }
.btn-enviar:hover { background-color: #7a00c2; }
.hidden { display: none; }
.input-unificado { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; height: 42px; background-color: #fff; width: 100%; box-sizing: border-box; overflow: hidden; }
.select-pais { border: none; background: none; height: 100%; padding: 0 8px; font-size: 1.1rem; flex: 1.8; min-width: 120px; max-width: 220px; border-right: 1px solid #eee; }
.prefijo-input { border: none !important; background: #f9f9f9 !important; width: 55px !important; height: 100%; text-align: center; font-family: 'DM Mono', monospace; font-size: 0.95rem; color: #666; }
.tel-input { border: none !important; flex: 2; height: 100%; padding: 0 10px; font-size: 1.1rem; min-width: 0; }
.info-pie { margin-top: 30px; font-size: 0.9rem; color: #444; line-height: 1.6; }
.info-pie a { color: #9900ef; text-decoration: none; }

/* --- SOCIALES --- */
.iconos-sociales { display: flex; gap: 15px; margin-top: 10px; }
.iconos-sociales a { display: inline-block; width: 24px; height: 24px; }
.iconos-sociales svg { width: 100%; height: 100%; fill: #aaa; transition: 0.3s ease; }
.iconos-sociales a:hover svg { fill: #9900ef; }

/* --- COLUMNA DERECHA (IDIOMA + SOCIALES) --- */
.derecha-col { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.selector-idioma { display: flex; gap: 10px; }
.btn-idioma { font-family: 'DM Mono', monospace; font-size: 0.9rem; text-decoration: none; color: #777; border: 1px solid #ddd; padding: 6px 14px; border-radius: 4px; }
.btn-idioma.active { border-color: #9900ef; color: #9900ef; }

/* --- AJUSTES MÓVILES --- */
@media (max-width: 799px) { 
    .nav-principal a { font-size: 1.1rem; }
    .wrapper-limitado { padding: 30px 20px; }
    .fila-superior { flex-direction: column-reverse; gap: 40px; }

    /* Esto fuerza a que en celular se mantengan a la derecha */
    .derecha-col { align-items: flex-end; width: 100%; }

    .modal-content { width: 70%; max-width: 280px; padding: 20px; gap: 5px; }
    .modal-content a { font-size: 0.85rem; padding: 4px 0; }
}
.wrapper-limitado { max-width: 1200px; margin: 0 auto; width: 100%; height: 100%; position: relative; z-index: 10; padding: 60px 40px; box-sizing: border-box; display: flex; flex-direction: column; }

        .fila-superior { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
/* --- MENÚ PRINCIPAL --- */
        .nav-principal { display: flex; flex-direction: column; gap: 15px; }
        .nav-principal a { font-family: 'DM Mono', monospace; font-size: 1.3rem; color: #464646; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
        .nav-principal a:hover { color: #9900ef; }

/* Mantiene la base de tu menú */
.nav-principal { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

/* Solo para las páginas internas, los ponemos en fila */
.navegacion-interna {
    flex-direction: row !important; 
    gap: 30px;
    margin-bottom: 40px;
}

/* Estilo para que resalten como links de navegación */
.navegacion-interna a {
    font-size: 1.1rem;
    border-bottom: 1px solid transparent;
}

.navegacion-interna a:hover {
    border-bottom: 1px solid #9900ef;
}
 /* --- RECTÁNGULO DE SERVICIOS --- */
        .modal-servicios {
            display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(255,255,255,0.4); backdrop-filter: blur(3px);
        }

        .modal-content {
            position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #fff; padding: 30px; border-radius: 12px; border: 1.5px solid #9900ef;
            box-shadow: 10px 10px 0px rgba(153, 0, 239, 0.05);
            width: 80%; max-width: 450px; display: flex; flex-direction: column; gap: 20px; 
        }

        .modal-content a {
            font-family: 'DM Mono', monospace; font-size: 1rem; color: #464646;
            text-decoration: none; text-transform: uppercase; padding: 5px 0;
            border-bottom: 1px solid #f5f5f5; transition: 0.3s;
        }
        .modal-content a:hover { color: #9900ef; }

        .btn-cerrar {
            align-self: flex-end; font-family: 'DM Mono', monospace; font-size: 0.8rem;
            font-weight: bold; color: #9900ef; cursor: pointer; text-transform: uppercase;
        }


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- RESPONSIVE: MÓVILES (Vertical - Portrait) --- */
/* Aquí mantenemos los <br> activos para que se vea hacia abajo */
@media (max-width: 600px) and (orientation: portrait) {
    .logo-container {
        width: 50%; 
        top: 15%;
    }

    h1 { font-size: 1.8rem; }
    #human { font-size: 1.0rem; }
    h2 { font-size: 0.9rem; }

    .welcome-text {
        top: 28%;
    }
}

/* --- CONTROL DE SALTOS DE LÍNEA --- */

/* En pantallas grandes (Desktop/Tablet), el salto desaparece */
br.solo-mobile {
    display: none;
}

/* En pantallas pequeñas (Móviles), el salto se activa */
@media (max-width: 500px) {
    br.solo-mobile {
        display: block;
    }
}

/* --- RESPONSIVE: MODO HORIZONTAL (Landscape) --- */
/* ÚNICAMENTE AQUÍ quitamos los <br> para evitar que el texto se corte por falta de altura */
@media (orientation: landscape) and (max-height: 500px) {
    .logo-container {
        width: 120px; 
        top: 15%;
    }

    .welcome-text {
        top: 35%; 
    }

    h1 {
        font-size: 1.4rem;
        margin-bottom: 0.1rem;
    }

    #human {
        font-size: 0.9rem;
    }

    h2 {
        font-size: 0.8rem;
    }

    /* En horizontal, los idiomas se ponen en una línea para que entren en pantalla */
/*    h2 br {
        display: none;
    }*/
}
/* --- ESTILOS PARA PÁGINAS DE SERVICIO --- */
.servicio-texto {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.6;
    color: #333;
}

/* Ajuste de títulos y párrafos */
.servicio-texto h1 { margin-bottom: 20px; }
.servicio-texto p { margin-bottom: 15px; }

/* Estilo para las viñetas (bullets) */
.servicio-texto ul { 
    list-style: none; 
    padding: 0; 
    margin-bottom: 20px; 
}
.servicio-texto li::before {
    content: "•";
    color: #9900ef; /* Color de tus ondas */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: 0;
}

.muestra-trabajos {
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.4);
    padding: 15px;
    border-left: 3px solid #9900ef;
    margin: 25px 0;
}

.al-pie {
    font-size: 0.85rem;
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    opacity: 0.8;
}
/* Lista de servicios en dos columnas */
.lista-servicios-dos-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
    margin-bottom: 25px;
}

/* En móviles, que vuelva a una sola columna */
@media (max-width: 600px) {
    .lista-servicios-dos-col {
        grid-template-columns: 1fr;
    }
}

/* Estilo para los H2 dentro de servicios */
.servicio-texto h2 {
    font-size: 1.2rem;
    color: #666;
    margin-top: -15px;
    margin-bottom: 30px;
    font-weight: 400;
    font-style: italic;
}

/* Estructura de cada fila de trabajo */
.item-trabajo-mini {
    display: flex;
    align-items: center; /* Centra el texto verticalmente con la imagen */
    gap: 15px;           /* Espacio entre imagen y texto */
    margin-top: 15px;    /* Espacio entre cada trabajo */
}

/* Control estricto de la altura del afiche */
.img-70 {
    height: 70px !important;
    width: auto;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    flex-shrink: 0;      /* Evita que la imagen se achique si el texto es largo */
}

.item-trabajo-mini span {
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Contenedor principal de asociaciones */
.seccion-asociaciones {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.titulo-asociaciones {
    font-family: 'DM Mono', monospace;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Grilla de logos: Sigla arriba, imagen abajo */
.grilla-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.logo-item {
    display: flex;
    flex-direction: column; /* Apila sigla arriba, logo abajo */
    align-items: center;
    gap: 8px;
}

.logo-item span {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    color: #333;
}

.logo-item img {
    height: 50px; /* Altura máxima solicitada */
    width: auto;
    filter: grayscale(100%); /* Opcional: logos en gris */
    transition: filter 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%); /* Vuelven a color al pasar el mouse */
}

.img-logo-cliente {
    height: 40px !important; /* Altura un poco menor para logos corporativos */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.img-logo-cliente:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.lista-servicios-dos-col {
    list-style: none; /* Quitamos el punto original que no se puede controlar bien */
    padding-left: 0;
}

.lista-servicios-dos-col li {
    position: relative;
    padding-left: 1.5rem; /* Este es el margen fijo que separa el texto del borde */
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Creamos nuestra propia viñeta con posición absoluta */
.lista-servicios-dos-col li::before {
    content: "•"; /* El punto */
    color: #9900ef; /* Tu violeta */
    font-weight: bold;
    font-size: 1.2rem;
    
    position: absolute;
    left: 0;      /* Pegado al borde izquierdo */
    top: -2px;    /* Ajuste fino vertical para que centre con la primera letra */
    width: 1rem;  /* Ancho fijo para el área de la viñeta */
}

.grilla-logos a {
    display: contents; /* Hace que el link no afecte el layout de la grilla */
}

.logo-item {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.logo-item:hover {
    transform: scale(1.05); /* Un pequeño efecto visual al pasar el mouse */
}