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

body {
    /*padding-top: 40px;  Separación para el header fijo */
    color: #ffffff;
    background-color: #000000;
    /*font-family: 'Archivo Black', sans-serif;*/
    font-family: "Host Grotesk", sans-serif;
}

/* --- Header --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 15px 50px;
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1.7;
    color: white;
    font-size: 27px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0px 20px;
}

.logo img {
    width: 175px; /* Cambia este valor por el tamaño que desees */
    height: auto; /* Mantiene la proporción original de la imagen */
}

.heatwear {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.6em;
    font-size: 15px;
    margin-top: -12px;
}

.nav {
    display: flex;
    gap: 25px;
}

.nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Último enlace */
.nav a:last-child {
    color: #ff3b3b;
    text-decoration: underline;
    text-underline-offset: 10px; /* Ajusta la distancia */
}

/* Mantiene el estilo también al pasar el mouse */
.nav a:last-child:hover {
    color: #ff3b3b;
}

.nav a:hover {
    color: #ff3b3b;
}

/* --- Secciones de Texto --- */
.seccion {
    padding: 170px 60px 60px;
    background-image: url(imagenes/fondo.jpeg);
    /*background-image: radial-gradient(circle at 0% 100%, #3a0202 0%, #110101 40%, #000000 80%);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    border: 1px solid #ff3b3b;
    color: #ff3b3b;
    height: 68px;
    padding: 0 42px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 50px;
    transition: all 0.3s ease; 
    cursor: pointer;
    }

.boton span {
    font-size: 34px;
    line-height: 1;
    display: inline-block; /* Requerido para que el movimiento funcione */
    transition: transform 0.3s ease;
}

.boton:hover {
    /*background-color: #ff3b3b;  El fondo transparente se rellena con tu color */
    color: #ffffff; /* El texto cambia a negro para que se lea bien (puedes usar #ffffff para blanco) */
}

.boton:hover span {
    transform: translateX(8px); /* Empuja la flecha 8 píxeles a la derecha */
}

.separador_neon {
    border: none; /* Quitamos el borde por defecto */
    height: 2px;  /* Grosor de la línea */
    width: 100%;  /* Ocupa todo el ancho disponible */
    margin: 50px 0; /* Espaciado arriba y abajo (ajusta a tu gusto) */
    
    /* El degradado: transparente a los lados, #ff3b3b en el centro */
    background: linear-gradient(
        to right, 
        transparent 0%, 
        #ff3b3b 50%, 
        transparent 100%
    );
    box-shadow: 0 0 15px rgba(255, 59, 59, 0.8);
}

.ppal {
    background-color: #000000;
    width: 100%;
    padding: 50px;
}

.comentario_inicio {
    color: #ff3b1f;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-bottom: 120px;
    display: block;
}

.titulo_grande {
    font-size: clamp(2.5rem, 15vw, 15rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 30px;
    margin-top: 2.5rem;
}

.primera_frase {
    font-size: clamp(2.5rem, 5vw, 4.5rem); 
    font-weight: 400;
    margin: 0 0 45px 0;
    line-height: 1;
    letter-spacing: -0.02em;
    position: relative; 
    font-family: "Host Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800; /* Aquí definimos el Extra Bold */
    font-style: normal;
}

.primera_frase::after {
    /* 1. Definimos contenido vacío (no texto) */
    content: ""; 

    /* 2. Lo hacemos un bloque en línea para darle dimensiones */
    display: inline-block; 

    /* 3. Definimos un tamaño proporcional al texto (em) 
       para que se escale si cambias el tamaño de fuente */
    width: 0.25em;  /* Ancho del círculo */
    height: 0.25em; /* Alto del círculo */

    /* 4. Lo hacemos un círculo perfecto */
    border-radius: 50%; 

    /* 5. Aplicamos el color */
    background-color: #ff3b1f; 

    /* 6. Integración y posicionamiento */
    margin-left: 0.05em; /* Espacio horizontal después del texto */
    vertical-align: baseline; /* Alinea la parte inferior del círculo 
                                 con la base del texto */
    
    /* Pequeño ajuste fino para que parezca un punto final real 
       (subirlo ligeramente) */
    position: relative;
    top: 0.005em; /* Ajusta este valor si es necesario */
}

p {
    font-size: clamp(0.9rem, 3vw, 2.2rem);
    color: #a3a3a3;
    line-height: 1.5;
    margin: 0 0 45px 0;
    font-weight: 600;
    max-width: 1200px;
    padding-bottom: 50px;
}

/* --- Tablero de Ajedrez (Foto/Texto) --- */
.fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 50px;
}



.manual_uso {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    
    color: #ff3b3b;
    height: 68px;
    padding: 0 42px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: underline;
    margin-bottom: 50px;
    transition: all 0.3s ease; 
    cursor: pointer;

}

.manual_uso span {
    font-size: 34px;
    line-height: 1;
    display: inline-block; /* Requerido para que el movimiento funcione */
    transition: transform 0.3s ease;
}

.manual_uso:hover {
    /*background-color: #ff3b3b;  El fondo transparente se rellena con tu color */
    color: #ffffff; /* El texto cambia a negro para que se lea bien (puedes usar #ffffff para blanco) */
}

.manual_uso:hover span {
    transform: translateX(8px); /* Empuja la flecha 8 píxeles a la derecha */
}


/* Efecto tablero: invierte filas pares */
.fila:nth-child(even) .foto {
    order: 2;
}

.fila:nth-child(even) .texto {
    order: 1;
}

.seccion_ajedrez,
.contenedor-cuadrados {
    background-color: #000000;
    width: 100%;
    display: block;
    overflow: hidden; 
}

.seccion_ajedrez .fila:nth-child(even) .foto {
    order: 2;
}

.seccion_ajedrez .fila:nth-child(even) .texto {
    order: 1;
}

.seccion_ajedrez .fila:nth-child(even) .foto {
    order: 2;
}

.seccion_ajedrez .fila:nth-child(even) .texto {
    order: 1;
}

.seccion_ajedrez h1 {
    font-size: 4rem;              /* Tamaño del título */
    color: #ffffff;                 /* Color blanco */
    font-family: 'Archivo Black', sans-serif; /* Tipografía */
    margin-bottom: 10px;            /* Espacio inferior para separarlo del párrafo */
    text-transform: uppercase;      /* Convierte el texto a mayúsculas */
    letter-spacing: 0.05em;         /* Un toque de espacio entre letras */
}

.contenedor-cuadrados {
    display: grid;
    /* Crea 4 columnas iguales */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* Espacio entre cuadrados */
    padding: 50px;
}

.cuadrado {
    background-color: #000000; /* Fondo negro */
    aspect-ratio: 1 / 1;      /* MAGIA: Fuerza al contenedor a ser un cuadrado perfecto */
    
    /* Centrado de texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    color: white;
}

.cuadrado p {
    text-align: center;     /* Centra el texto dentro del párrafo */
    max-width: 600px;       /* Limita el ancho para que no se vea muy estirado */
    margin-top: 20px;       /* Espacio superior para separarlo de los cuadrados */
    padding: 0 20px;
}

.cuadrado h3 {
    font-size: 40px;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Alinea al inicio (izquierda) */
    gap: 8px; /* Espacio vertical entre la "salchicha" y el texto */
}

.cuadrado h3::before {
    content: "";
    display: inline-block;
    width: 220px;            /* Ancho de la "salchicha" */
    height: 10px;           /* Altura */
    /*background-color: blue;*/
    border-radius: 999px;   /* Forma redondeada completa */
    /* Ya no necesitamos margin-right aquí */
}

/* 2. Asignamos colores distintos a cada cuadrado (usando nth-child) */
.cuadrado:nth-child(1) h3::before { background-color: #ffff00; } /* Amarillo */
.cuadrado:nth-child(2) h3::before { background-color: #ffaa00; } /* Naranja */
.cuadrado:nth-child(3) h3::before { background-color: #ff4100; } /* Naranja oscuro */
.cuadrado:nth-child(4) h3::before { background-color: #ff0000; } /* Rojo */

.cuadrado p {
    font-size: 32px; /* Puedes ajustar este valor según necesites */
    line-height: 1.5; /* Recomendado: mejora la legibilidad al leer párrafos */
    color: #ffffff;      /* Opcional: define un color para el texto */
}

.claim {
    width: 100%;             /* Ocupa todo el ancho */
    display: flex;           /* Usamos Flexbox para centrar */
    justify-content: center; /* Centrado horizontal */
    padding: 40px 20px;      /* Espacio arriba/abajo y márgenes laterales */
}

.claim p {
    max-width: 1200px;        /* Limita el ancho máximo para legibilidad */
    text-align: center;      /* Asegura que el texto dentro esté centrado */
    color: #a3a3a3;          /* Igual al color de tus otros párrafos */
    font-size: 1.2rem;       /* Ajusta el tamaño según tu diseño */
    line-height: 1.6;
}

.caracteristicas {
      margin: 24px auto 0 auto; /* MODIFICADO: Agrega 'auto' a los lados para centrar */
      width: 100%;
      max-width: 11200px; /* MODIFICADO: Se mantiene en 1200px para igualar la lista */
      display: grid; /* MODIFICADO: Cambia de flex a grid para respetar las columnas */
      padding: 0 0 0 30px; 
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      justify-content: center;
      align-items: start;
}

    .caracteristicas-ind { display: flex; flex-direction: column; gap: 12px; justify-content: center}
    .icono { width: 48px; height: 48px; color: #E8450A; }
    .icono svg { width: 100%; height: 100%; }
    .titulo { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: #FFFFFF; line-height: 1.3; }
    .descripcion { font-size: 16px; color: #9A9A9A; line-height: 1.5; }

   .lista-niveles {
        list-style: none;
        padding: 0;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Contenedor principal que activa la cuadrícula */
.galeria_entornos {
    display: grid;
    /* Crea 3 columnas del mismo tamaño (1fr cada una) */
    grid-template-columns: repeat(3, 1fr); 
    /* Espaciado: 40px entre filas (arriba/abajo) y 20px entre columnas (lados) */
    gap: 10px 20px; 
    max-width: 1200px; /* Ancho máximo de la galería */
    margin: 0 auto;    /* Centra toda la galería en la pantalla */
    padding: 20px;
}

/* Caja individual para cada foto y su texto */
.tarjeta-foto {
    display: block;
    text-align: center; /* Centra el texto de forma horizontal respecto a la foto */
}

/* Control y comportamiento de las imágenes */
.tarjeta-foto img {
    width: 100%;         /* La foto se adapta al ancho de su columna */
    height: auto;        /* Mantiene la proporción original */
    aspect-ratio: 4 / 3; /* FUERZA a que todas tengan la misma proporción (ej: 4:3 o 16:9) */
    object-fit: cover;   /* Si la foto no es perfectamente 4:3, la recorta sin deformarla */
    border-radius: 8px;  /* (Opcional) Esquinas redondeadas como vimos antes */
}

/* Estilo del texto inferior */
.texto-foto {
    margin-top: 15px;    /* El espacio separado del borde inferior de la foto */
    /*font-family: sans-serif;*/
    font-size: 36px;
    color: #ffffff;      /* Cambia a #ffffff si tu fondo es oscuro */
}


    .nivel-item {
        display: flex;
        justify-content: space-between; /* Separa los elementos: uno a la izquierda, otro a la derecha */
        align-items: center;
        padding: 20px 30px; /* Espacio vertical */
        border-top: 1px solid #333; /* La línea sobre el texto */
    }

    /* Opcional: Eliminar la línea del primer elemento si no la quieres arriba de todo */
    .nivel-item:first-child {
        border-top: none;
    }

    .texto-nivel { 
        font-weight: 700;
        color: #a3a3a3;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5em;
    }

    /* Esta es la clase para el texto de la derecha */
    .valor-extremo {
        font-family:  'Inter', sans-serif;
        color: #ffffff; /* Un color distinto para resaltarlo (opcional) */
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .nota {
        max-width: 900px;
        margin: 20px auto;
        color: #888;
        font-size: 17px;
    }

    .foto {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .foto img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 30px;
    }

    .ppal .foto img {
    width: 120%;
}

/* Imagen de la batería */

.bateria .foto img {
    width: 70%;
}

/* Productos (sección ajedrez) */

.seccion_ajedrez .foto img {
    width: 100%;
}


.servicios {
        display: flex;
        flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no hay espacio */
        gap: 30px;
        border-top: none;
        padding-top: 0;
    }

    .servicio-item {
        display: flex;
        flex-direction: column;
        gap: 15px;
        
        /* Comportamiento Flex para cada item (reemplaza el minmax del grid) */
        flex: 1 1 200px; /* Crece, se encoge, y toma un ancho base de 200px */
        
        /* La línea naranja ahora nace desde el borde superior de cada item */
        border-top: 2px solid #ff3b1f; 
        padding-top: 20px; /* Separación entre la línea y el icono */
    }

    .servicio-icono {
        width: 24px;
        height: 24px;
        color: #ff3b1f;
    }

    .servicio-etiqueta {
        font-size: 1.3rem;
        font-weight: 700;
    }

    .contacto_flex {
      display: flex;
      flex-wrap: wrap; /* Permite que los elementos bajen si no hay espacio */
      gap: 30px;
      width: 100%;
      justify-content: space-between; /* Distribuye el espacio entre las columnas */
    }

    .contacto_item { 
      display: flex; 
      align-items: center; 
      padding: 25px 0; 
      border-bottom: 1px solid #333;
      flex: 1 1 300px; /* Toma 300px de base y crece para llenar el espacio */
      max-width: 100%; 
    }

    .contacto_icono {
      width: 24px;   
      height: 24px;  
      color: #ff3b1f; 
      stroke-width: 2; 
      display: block;
      flex-shrink: 0; 
      margin-right: 20px; /* Separación directa desde el ícono */
    }
        

/* --- Responsive --- */
@media (max-width: 768px) {
    .fila {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .fila:nth-child(even) .foto {
        order: 0; /* Regresa la imagen arriba en el móvil */
    }

@media (max-width: 900px) {
        .contenedor-cuadrados {
            grid-template-columns: repeat(2, 1fr); /* En tablets: 2 columnas */
        }
    }
    
@media (max-width: 600px) {
        .contenedor-cuadrados {
            grid-template-columns: 1fr; /* En móviles: 1 columna */
        }
    }

/* --- RESPONSIVE DESING (Opcional pero recomendado) --- */
/* Si la pantalla mide menos de 768px (tablets), pasa a tener 2 columnas */
@media (max-width: 768px) {
    .contenedor-galeria {
        grid-template-columns: repeat(2, 1fr);
        }
    }

/* Si la pantalla mide menos de 480px (móviles), las fotos se ponen una debajo de otra */
@media (max-width: 480px) {
    .contenedor-galeria {
        grid-template-columns: 1fr;
        }
    }
}