/* ==============================================================
   ESTILOS GENERALES GESTA - REPARADO FINAL
   ============================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=archivo@900,700,500,400&display=swap');

:root {
    --fuente-principal: 'Archivo', sans-serif;
    --negro-gesta: #000000;
}

/* 1. RESET Y BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--fuente-principal);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* 2. TÍTULOS GENERALES (Cuerpo del sitio) */
h1, h2, h3, h4 {
    font-family: var(--fuente-principal) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase;
    line-height: 1.1;
}

/* 3. LOGO (Blindado para no afectar iconos de redes) */
.logo-gesta, header a img[src*="logoGesta"] {
    height: 3.2rem !important; 
    width: auto !important;
    image-rendering: -webkit-optimize-contrast;
}

/* 4. SECCIÓN HERO (El diseño del Index para todas las internas) */
/* Usamos esta clase para que el CSS mande sobre la tipografía del Hero */

.hero-section-gesta {
    position: relative;
    width: 100%;
    /* Altura controlada para internas */
    height: 400px; 
}

@media (min-width: 768px) {
    .hero-section-gesta { height: 480px; }
}

.hero-section-gesta h1 {
    font-size: clamp(2.8rem, 8vw, 6rem) !important;
    line-height: 0.8 !important; /* Look apretado del Index */
    letter-spacing: -0.05em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin-bottom: 1.5rem;
}

/* El span ahora SOLO cambia el color a grisáceo, no deforma la letra */
.hero-section-gesta h1 span {
    color: rgba(255,255,255,0.6) !important;
}

.hero-section-gesta .hero-line {
    width: 4rem;
    height: 0.5rem;
    background-color: #ffffff;
    margin-bottom: 2rem;
}

.hero-section-gesta p {
    font-size: clamp(1.1rem, 3vw, 1.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

.hero-section-gesta .hero-subcopy {
    text-transform: none !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.hero-section-gesta .hero-subcopy span {
    font-weight: 700 !important;
}

/* 5. HEROBOX (NOSOTROS) - INTACTA COMO PEDISTE */
.herobox { container-type: inline-size; }
.herobox-text {
  font-size: clamp(1.55rem, 11cqw, 4rem); 
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 900;
  text-transform: uppercase;
}
.hb-line { display: block; white-space: nowrap; }
.hb-long { font-size: 0.92em; letter-spacing: -0.06em; }

/* 6. COMPONENTES Y FORMULARIOS */
.btn-gesta {
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 900;
}

/* Icono de flecha animada */
.hero-arrow {
    width: 2.5rem;
    height: 2.5rem;
    filter: brightness(0) invert(1);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* Anti-Spam */
.hp-field {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}