/* ======== DEFINICIÓN DE FUENTE PERSONAL ======== */
@font-face {
  font-family: 'FrutigerBold';
  src: url('Frutiger 65 Bold.otf') format('truetype');
}

/* ======== ESTILOS GLOBALES ======== */
/* (Aquí comienza el resto de tu CSS: * { ... ) */
/* ======== ESTILOS GLOBALES ======== */

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

body {
    font-family: 'FrutigerBold';
    /* Colores base como pediste */
    background-color: #000000;
    color: #f0f0f0; /* Un blanco no tan puro es más fácil de leer */
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}

h1, h2, h3 {
    margin-bottom: 1rem;
    color: #ffffff;
    margin : 0;
}



p {
    margin-bottom: 1rem;
}

a {
    color: #00ff9d; /* Un color azul "tech" para enlaces */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ======== CABECERA Y MENÚ ======== */
.header {
    /* 1. Cambia el color sólido por uno transparente */
    /* #111 es rgb(17, 17, 17). Le añadimos 0.7 de opacidad (70%) */
    background-color: rgba(17, 17, 17, 0.7); 

    /* 2. Aplica el blur (desenfoque) a lo que esté detrás */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */

    /* 3. (Opcional) Haz el borde también transparente */
    border-bottom: 2px solid rgba(51, 51, 51, 0.5); /* #333 con 50% de opacidad */

    /* --- El resto de tus reglas --- */
    background-color: rgba(17, 17, 17, 0.7); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(51, 51, 51, 0.5);
    padding: 2rem 0;
    /* ¡Ahora es 'static' por defecto (para móvil)! */
}



/* 1. Esto alinea el logo y el texto en horizontal */
.logo-container {
    display: flex;         /* Pone los elementos en fila (uno al lado del otro) */
    align-items: center;   /* Los centra verticalmente */
    gap: 15px;             /* Añade un espacio entre la imagen y el texto */
}

/* 2. Esto "minimiza" el logo (¡Esta es la clave!) */
.logo-img {
    height: 50px; /* <-- AJUSTA ESTE NÚMERO */
    width: auto;  /* Mantiene la proporción para que no se deforme */
}
.logo {
    font-size: 1.8rem;
    color: #ffffff;
    margin: 0;
}



/* ======== CABECERA Y MENÚ (CORREGIDO) ======== */

/* --- Estilos para Móvil (por defecto) --- */
.header .container {
    display: flex;
    flex-direction: column; /* APILA el logo y el menú en móvil */
    align-items: center;
    gap: 1rem; /* Espacio entre logo y menú */
}

.main-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column; /* APILA los enlaces del menú */
    text-align: center;
    padding: 0;
}

.main-nav li {
    margin-left: 0; /* Quita el margen lateral */
    margin-bottom: 0.5rem; /* Añade espacio vertical entre enlaces */
}

/* --- Estilos para PC (con Media Query) --- */
@media (min-width: 768px) {
    .header .container {
        flex-direction: row; /* Vuelve a ponerlos EN FILA en PC */
        justify-content: space-between;
    }

    .main-nav ul {
        flex-direction: row; /* Vuelve a ponerlos EN FILA en PC */
    }

    .main-nav li {
        margin-left: 1.5rem; /* Restaura el margen lateral */
        margin-bottom: 0;
    }
}

.main-nav a {
    color: #f0f0f0;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #00ff9d;
    text-decoration: none;
}

/* ======== SECCIÓN DE VIDEO (HERO) ======== */
/* 1. La sección "ancla" el video y el texto */
.hero-section {
    position: relative; /* Clave para superponer */
    padding: 0;         /* 🟢 Elimina el espacio con el header */
    background-color: #0a0a0a; 
    overflow: hidden;   /* 🟢 Evita el scroll horizontal */
}

.hero-section h2 {
    font-size: 2.5rem;
}

.video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta el video sin deformarlo */
  
}

/* ======== SECCIONES DE INFORMACIÓN ======== */
/* ======== ESTILOS DE BARRAS VERTICALES (NOSOTROS) ======== */

/* ======== SECCIÓN QUIÉNES SOMOS (2 COLUMNAS) ======== */

/* El contenedor principal de la sección */
.dos-columnas-layout {
    display: flex;
    flex-direction: column; /* Apilado en móvil */
    gap: 2rem;
    align-items: center;
}

/* Estilo de la imagen */
.columna-imagen img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Lista de puntos clave */
.lista-puntos-clave {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.lista-puntos-clave li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.icono-check {
    color: #00ff9d; /* Tu color azul de acento */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* El botón "Call to Action" */
.contacto-form button {
    border: none;
}
.btn-primario {
    outline: none;
    display: inline-block;
    background-color: #00b670b8;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    margin-top: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-primario:hover {
    background-color: #003c3a;
    transform: translateY(-2px);
}

/* --- Responsive: 2 columnas en pantallas grandes --- */
@media (min-width: 768px) {
    .dos-columnas-layout {
        flex-direction: row; /* En fila en PC */
    }

    /* Cada columna ocupa la mitad */
    .columna-texto,
    .columna-imagen {
        flex: 1; /* Ambas ocupan 50% */
    }
}

/* 1. El Contenedor de las 4 barras */
/* 1. El Contenedor de las 4 barras (CORREGIDO) */
.barras-container {
    display: flex;
    flex-direction: column; /* <-- AÑADE ESTO para apilarlas en móvil */
    gap: 1.5rem;
    margin-top: 2.5rem;
}

/* --- Y añade esta Media Query al final de tu sección de barras --- */
@media (min-width: 900px) {
    .barras-container {
        flex-direction: row; /* Las pone en fila en pantallas grandes */
    }
}

/* 2. CADA Barra Vertical */
.barra-vertical {
    position: relative;    /* Clave para poner texto encima */
    flex: 1;               /* Hace que las 4 barras ocupen el mismo espacio */
    height: 400px;         /* Dales una altura fija */
    border-radius: 12px;   /* Bordes redondeados */
    overflow: hidden;      /* Para que el contenido no se salga */
    
    /* Configuración de la imagen de fondo (que pusimos en el HTML) */
    background-size: cover;
    background-position: center;

    /* Para centrar el texto (hijo) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Un efecto de zoom sutil al pasar el ratón */
    transition: transform 0.3s ease-out;
}

.barra-vertical:hover {
    transform: scale(1.03); /* Ligeramente más grande */
}

/* 3. La Capa Oscura (para que el texto se lea) */
/* Usa un "pseudo-elemento" para no añadir más HTML */
.barra-vertical::before {
    content: ''; /* Requerido para que se muestre */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo degradado: más oscuro abajo (para el texto) */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.1) 60%);
    
    z-index: 1; /* Se pone entre el fondo y el texto */
    transition: background 0.3s ease;
}

.barra-vertical:hover::before {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 50%);
}

/* 4. El Contenido (el texto) */
.barra-contenido {
    position: relative; /* Para ponerlo encima de la capa oscura */
    z-index: 2;         
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    
    /* Empuja el texto hacia la parte de abajo de la barra */
    align-self: flex-end; 
}

.barra-contenido h4 {
    font-size: 1.8rem;
    margin: 0;
    color: #fff;
}

.info-section {
    padding: 3rem 0;
}

/* ======== GRID DE COMENTARIOS (PROYECTOS) ======== */

/* 1. El Contenedor Grid (el que los organiza) */
.comentarios-grid {
    display: grid;
    gap: 1.5rem;           /* Espacio entre los cuadrados */
    margin-top: 2.5rem;    /* Espacio desde el párrafo de arriba */

    /* Por defecto: 1 columna (para móviles) */
    grid-template-columns: 1fr;
}

/* 2. Cada "Cuadrado" de comentario */
.comentario-card {
    background-color: #111; /* Fondo oscuro (como el footer) */
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #333;
    
    /* Un sutil efecto para "levantarlo" del fondo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    
    /* Efecto al pasar el ratón */
    transition: transform 0.3s ease;
}

.comentario-card:hover {
    transform: translateY(-5px); /* Se levanta un poquito */
}

/* 3. El texto del comentario */
.comentario-texto {
    font-style: italic;     /* Estilo de cita */
    margin-bottom: 1.5rem; /* Espacio antes del autor */
    margin-top: 0;
    color: #f0f0f0;
}

/* 4. El autor del comentario */
.comentario-autor {
    font-weight: bold;
    color: #00ff9d; /* Color de acento azul */
    text-align: right;
    margin: 0;
}


/* --- RESPONSIVE (Así se ve bien en PC, Tablet y Móvil) --- */

/* Pantallas medianas (tablets, 768px y más) */
/* --- Estilos para PC (con Media Query) --- */
@media (min-width: 768px) {
    .header .container {
        flex-direction: row; 
        justify-content: space-between;
    }

    .main-nav ul {
        flex-direction: row; 
    }

    .main-nav li {
        margin-left: 1.5rem; 
        margin-bottom: 0;
    }

    /* === AÑADE ESTO === */
    /* Aquí le decimos que SÓLO en PC sea pegajoso */
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    /* === FIN DE LO AÑADIDO === */
}

/* Pantallas grandes (PC, 1024px y más) */
@media (min-width: 1024px) {
    .comentarios-grid {
        /* Cambia a 3 columnas (tu petición) */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fondo alterno para dar dinamismo */
.info-section.alt-bg {
    background-color: #111;
}

.info-section h3 {
    font-size: 2rem;
    border-bottom: 2px solid #00ff9d;
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* ======== SECCIÓN DE CONTACTO ======== */

.contacto-layout {
    display: flex;
    flex-direction: column; /* Apilado en móvil */
    gap: 2.5rem;
    margin-top: 2.5rem;
}

/* Columna 1: Info */
.lista-contacto {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.lista-contacto li {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.textofinal{
    font-size: 40px;
}
.icono-contacto {
    font-size: 1.3rem;
    margin-right: 1rem;
}

/* Columna 2: Formulario */
.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #f0f0f0;
}

/* Estilo para los campos de texto y el área de texto */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: inherit; /* Usa la fuente de la página */
    font-size: 1rem;
    
    background-color: #0a0a0a; /* Un negro más suave */
    color: #f0f0f0;
    
    border: 1px solid #333;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00ff9d; /* Resalta con el color rosa */
    box-shadow: 0 0 10px rgba(0, 68, 255, 0.3);
}

/* --- Responsive: 2 columnas en pantallas grandes --- */
@media (min-width: 768px) {
    .contacto-layout {
        flex-direction: row; /* En fila en PC */
    }

    .contacto-info,
    .contacto-form {
        flex: 1; /* Ambas ocupan 50% */
    }
}

/* ======== PIE DE PÁGINA ======== */
.footer {
    background-color: #111;
    color: #aaa;
    padding: 2rem 0;
    text-align: center;
    border-top: 2px solid #333;
    margin-top: 0rem;
}

.footer-links ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-links a {
    color: #aaa;
}

.footer-links a:hover {
    color: #fff;
}
.hero-section .container {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 8rem 0; /* <-- REDUCE ESTO (antes 18rem) */
}

/* --- Y añade esta Media Query al final de tu sección HERO --- */
@media (min-width: 768px) {
    .hero-section .container {
        padding: 18rem 0; /* Restaura el padding grande en PC */
    }
}