/*
  ============================================
  STYLE.CSS
  --------------------------------------------
  Tabla de Contenidos:
  1.  Variables CSS
  2.  Estilos Globales y Reseteo
  3.  Clases de Utilidad
  4.  Barra de Navegación (Header)
  5.  Sección Hero
  6.  Títulos de Sección
  7.  Botones y Formularios
  8.  Estilos de Tarjetas (Cards)
        - Tarjeta de Características (Feature Card)
        - Tarjeta de Servicios (Service Card)
        - Tarjeta de Portfolio (Portfolio Card)
        - Tarjeta de Historias (Story Card)
  9.  Sección de Sostenibilidad (Sustainability)
  10. Sección de Socios (Partners)
  11. Sección de Carreras (Careers)
  12. Sección de Recursos Externos
  13. Sección de FAQ (Acordeón)
  14. Pie de Página (Footer)
  15. Páginas Estáticas (Privacy, Terms)
  16. Página de Éxito (Success)
  17. Media Queries (Responsividad)
  ============================================
*/

/* 1. Variables CSS */
:root {
    /* Paleta de Colores - Complementaria (Azul Futurista y Naranja Energético) */
    --primary-color: #0A192F; /* Azul Naval Oscuro */
    --secondary-color: #1a4a8d; /* Azul YPF más claro */
    --accent-color: #FF8C42;  /* Naranja Vívido */
    --accent-color-darker: #E07B3A;
    --highlight-color: #64FFDA; /* Cian neón para toques futuristas */

    /* Colores de Texto */
    --text-light: #CCD6F6;    /* Texto claro casi blanco */
    --text-medium: #8892B0;   /* Texto grisáceo claro */
    --text-dark: #333333;     /* Texto oscuro principal */
    --text-headings: #222222; /* Texto para títulos oscuros */
    --text-white: #FFFFFF;

    /* Fondos */
    --bg-dark: var(--primary-color);
    --bg-light: #F8F9FA;
    --bg-light-texture: #f0f2f5;
    
    /* Fuentes */
    --font-headings: 'Archivo Black', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Otros */
    --border-radius-bio: 15px; /* Bordes redondeados para el estilo biomórfico */
    --box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    --transition-speed: 0.3s ease-in-out;
}

/* 2. Estilos Globales y Reseteo */
body {
    font-family: var(--font-body);
    background-color: var(--text-white);
    color: var(--text-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition-speed);
}

a:hover {
    color: var(--accent-color-darker);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--text-headings);
    font-weight: 700;
}

/* 3. Clases de Utilidad */
.bg-light-texture {
    background-color: var(--bg-light-texture);
}

.rounded-bio {
    border-radius: var(--border-radius-bio);
}

/* 4. Barra de Navegación (Header) */
.header {
    background: transparent;
    transition: background-color var(--transition-speed);
}

.header.scrolled {
    background-color: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.navbar-brand {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    color: var(--text-white) !important;
}

.nav-link {
    color: var(--text-light) !important;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: var(--transition-speed);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition-speed);
}

.nav-link:hover, .nav-link.active {
    color: var(--text-white) !important;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 60%;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* 5. Sección Hero */
.hero-section {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-white);
    position: relative;
}

.hero-title {
    font-family: var(--font-headings);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--text-white);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-light);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

/* 6. Títulos de Sección */
.section-title {
    font-family: var(--font-headings);
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--text-headings);
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem !important;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
    border-radius: 2px;
}

.section-title-light {
    color: var(--text-white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 7. Botones y Formularios */
.btn {
    font-family: var(--font-headings);
    padding: 12px 30px;
    border-radius: 50px;
    border-width: 2px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-speed);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-white);
}

.btn-primary:hover {
    background-color: var(--accent-color-darker);
    border-color: var(--accent-color-darker);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 140, 66, 0.4);
}

.btn-outline-light {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-outline-light:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-white);
    transform: translateY(-3px);
}

.form-control {
    background-color: #eef2f7;
    border: 2px solid transparent;
    border-radius: var(--border-radius-bio);
    padding: 15px;
    transition: var(--transition-speed);
}

.form-control:focus {
    background-color: var(--text-white);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(255, 140, 66, 0.25);
}

.form-label {
    font-weight: 700;
    color: var(--text-medium);
}

/* 8. Estilos de Tarjetas (Cards) */
.card {
    border: none;
    border-radius: var(--border-radius-bio);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow);
}

.card .card-image {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-body, .card-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tarjeta de Características (Feature Card) */
.feature-card .card-image {
    height: 250px;
}
.feature-card .card-title {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

/* Tarjeta de Servicios (Service Card) */
.service-card {
    background: var(--text-white);
}
.service-icon svg {
    color: var(--accent-color);
    transition: transform var(--transition-speed);
}
.service-card:hover .service-icon svg {
    transform: scale(1.1) rotate(5deg);
}

/* Tarjeta de Portfolio (Portfolio Card) */
.portfolio-card {
    position: relative;
    color: var(--text-white);
    text-align: left;
}
.portfolio-card .card-image {
    height: 267px;
}
.portfolio-card .card-img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: var(--transition-speed);
}
.portfolio-card:hover .card-img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}
.portfolio-card .card-title {
    color: var(--text-white);
    transform: translateY(20px);
    transition: var(--transition-speed);
}
.portfolio-card .card-text {
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition-speed);
}
.portfolio-card:hover .card-title,
.portfolio-card:hover .card-text {
    transform: translateY(0);
    opacity: 1;
}

/* Tarjeta de Historias (Story Card) */
.story-card {
    background-color: var(--bg-light-texture);
    text-align: left;
    position: relative;
    padding-top: 1.5rem;
}
.story-card::before {
    content: '“';
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: 'Times New Roman', serif;
    font-size: 5rem;
    color: var(--accent-color);
    opacity: 0.2;
}
.story-card .blockquote-footer {
    color: var(--accent-color);
}
.story-card .story-type {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-medium);
}

/* 9. Sección de Sostenibilidad (Sustainability) */
.stat-widget .stat-number {
    font-size: 2.5rem;
    color: var(--accent-color);
    line-height: 1;
}
.stat-widget .stat-label {
    font-size: 0.9rem;
    color: var(--text-medium);
}

/* 10. Sección de Socios (Partners) */
.partner-logo img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition-speed);
}
.partner-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* 11. Sección de Carreras (Careers) */
.careers-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Parallax effect */
}

/* 12. Sección de Recursos Externos */
.list-group-item {
    border-radius: var(--border-radius-bio) !important;
    margin-bottom: 0.5rem;
    border-width: 2px;
    font-weight: 700;
}
.list-group-item-action:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-white);
}
.list-group-item-action:hover .badge {
    background-color: var(--text-white) !important;
    color: var(--accent-color) !important;
}

/* 13. Sección de FAQ (Acordeón) */
.accordion-item {
    background-color: var(--text-white);
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-bio) !important;
    margin-bottom: 1rem;
    overflow: hidden;
}
.accordion-button {
    font-weight: 700;
    color: var(--text-headings);
}
.accordion-button:not(.collapsed) {
    color: var(--accent-color);
    background-color: #fff8f2;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:focus {
    box-shadow: none;
    border-color: var(--accent-color);
}

/* 14. Pie de Página (Footer) */
.footer-section {
    background-color: var(--bg-dark);
    color: var(--text-medium);
}
.footer-title {
    font-family: var(--font-headings);
    color: var(--text-white);
    margin-bottom: 1.5rem;
}
.footer-links li {
    margin-bottom: 0.8rem;
}
.footer-links a {
    color: var(--text-medium);
    transition: var(--transition-speed);
}
.footer-links a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}
.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}
.copyright-text {
    font-size: 0.9rem;
    color: var(--text-medium);
}
.social-links a {
    font-weight: bold;
}

/* 15. Páginas Estáticas (Privacy, Terms, About) */
.static-page-content, .contact-page-content {
    padding-top: 120px;
    padding-bottom: 60px;
}
.static-page-content h1, .static-page-content h2 {
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}
.static-page-content p {
    margin-bottom: 1.5rem;
}

/* 16. Página de Éxito (Success) */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-white);
}

.success-icon {
    width: 100px;
    height: 100px;
    background-color: var(--highlight-color);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 2rem;
    animation: pop-in 0.5s ease-out;
}

@keyframes pop-in {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 17. Media Queries (Responsividad) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(10, 25, 47, 0.98);
        border-radius: var(--border-radius-bio);
        padding: 1rem;
        margin-top: 1rem;
    }
    .nav-link {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .footer-section {
        text-align: center;
    }
}