/* css/about.css */

.about-section {
    padding: 120px 0; /* Buen espacio arriba y abajo */
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

/* --- ENCABEZADO --- */
.about-header {
    text-align: center;
    margin-bottom: 80px;
}

.about-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: white;
}

/* Reutilizamos la clase .red-highlight del Hero, 
   pero nos aseguramos que aquí también funcione */
.about-header .red-highlight {
    color: var(--bright-red);
    display: inline-block;
    border-bottom: 4px solid var(--bright-red);
    padding-bottom: 5px;
}

/* --- GRILLA (GRID) --- */
.about-grid {
    display: grid;
    /* Esto crea 3 columnas automáticas que se adaptan a móviles */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Espacio entre tarjetas */
}

/* --- TARJETAS DE LUJO --- */
.luxury-card {
    background-color: #080808;
    border: 1px solid #222;    /* Borde gris base */
    padding: 50px 40px;
    position: relative;        /* Necesario para los hijos absolutos */
    
    /* La tarjeta física se mueve suavemente */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- LÍNEA 1: Esquina Superior-Izquierda (::before) --- */
.luxury-card::before {
    content: '';
    position: absolute;
    top: -1px;  /* -1px para tapar el borde gris */
    left: -1px;
    
    /* Empieza con tamaño 0 para que no se vea */
    width: 0;
    height: 0;
    
    /* Definimos qué bordes queremos pintar */
    border-top: 1px solid var(--gold-accent);
    border-left: 1px solid var(--gold-accent);
    
    /* La magia de la transición: */
    /* Al quitar el mouse, esta es la última en desaparecer (delay 0.2s) */
    transition: width 0.3s ease 0.2s, height 0.3s ease 0.2s;
    
    z-index: 2; /* Asegura que quede encima del borde gris */
    pointer-events: none; /* Para que no interfiera con el cursor */
}

/* --- LÍNEA 2: Esquina Inferior-Derecha (::after) --- */
.luxury-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    
    /* Empieza con tamaño 0 */
    width: 0;
    height: 0;
    
    /* Definimos los bordes opuestos */
    border-bottom: 1px solid var(--gold-accent);
    border-right: 1px solid var(--gold-accent);
    
    /* La magia de la transición: */
    /* Al quitar el mouse, esta desaparece primero (delay 0s) */
    transition: width 0.3s ease 0s, height 0.3s ease 0s;
    
    z-index: 2;
    pointer-events: none;
}

/* --- ESTADO HOVER (Cuando pasas el mouse) --- */

/* 1. La tarjeta flota */
.luxury-card:hover {
    transform: translateY(-7px);
}

/* 2. La LÍNEA 1 (Top-Left) crece primero */
.luxury-card:hover::before {
    width: calc(100% + 2px);  /* Crece al 100% + los bordes */
    height: calc(100% + 2px);
    /* Al entrar, esta empieza INMEDIATAMENTE (delay 0s) */
    transition-delay: 0s;
}

/* 3. La LÍNEA 2 (Bottom-Right) crece después */
.luxury-card:hover::after {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    /* Al entrar, esta espera un poquito para empezar (delay 0.2s) */
    /* ¡Este es el secreto del efecto secuencial! */
    transition-delay: 0.2s; 
}

/* El Número Grande Rojo */
.card-number {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--bright-red);
    margin-bottom: 20px;
    line-height: 1;
}

/* Título de la tarjeta */
.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* Descripción */
.card-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #888; /* Gris técnico */
    line-height: 1.6;
    max-width: 90%;
}