/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --navy: #0B1E38;
    /* Azul Oscuro Profundo */
    --gold: #FFC107;
    /* Dorado (Solo acentos) */
    --white: #ffffff;
    --light-gray: #F8F9FA;
    /* Fondo suave */
    --text-gray: #555555;
    /* Texto cuerpo elegante */
    --border-color: #eaeaea;

    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--navy);
    background: var(--white);
}

a {
    text-decoration: none;
    transition: 0.3s;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

/* --- AJUSTE: Contenedor más ancho y con más aire --- */
.container {
    max-width: 1280px;
    /* Un poco más ancho */
    margin: 0 auto;
    padding: 0 50px;
    /* Aumentamos de 20px a 50px para elegancia */
}

.section-padding {
    padding: 100px 0;
}

/* Fondos Utilitarios */
.bg-white {
    background-color: var(--white);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-navy {
    background-color: var(--navy);
}

.text-navy {
    color: var(--navy);
}

.text-gold {
    color: var(--gold);
}

.text-white {
    color: var(--white);
}

.text-gray {
    color: var(--text-gray);
}

.relative-z {
    position: relative;
    z-index: 2;
}

/* Tipografía */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
}

.section-heading {
    font-size: 42px;
    margin-bottom: 20px;
}

.sub-heading {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}

.body-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-gray);
}

/* Botones */
.btn {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.btn-gold {
    background: var(--gold);
    color: var(--navy);
}

.btn-gold:hover {
    background: #e0a800;
    transform: translateY(-2px);
}

.btn-gold-outline {
    border: 1px solid var(--gold);
    color: var(--gold);
}

.btn-gold-outline:hover {
    background: var(--gold);
    color: var(--navy);
}

.btn-white-outline {
    border: 1px solid var(--white);
    color: var(--white);
}

.btn-white-outline:hover {
    background: var(--white);
    color: var(--navy);
}


/* =========================================
   2. HEADER (Navegación)
   ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 25px 0;
    transition: 0.4s;
}

.site-header.scrolled {
    background: rgba(11, 30, 56, 0.98);
    /* Azul sólido al bajar */
    backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- AJUSTE: LOGO MÁS GRANDE --- */
.site-logo.icon-large {
    height: 100px;
    /* Tamaño grande inicial */
    width: auto;
    transition: 0.3s;
}

.site-header.scrolled .site-logo.icon-large {
    height: 75px;
    /* Se reduce elegantemente al hacer scroll */
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links a:hover {
    color: var(--gold);
}

.hamburger-btn {
    display: none;
    color: var(--white);
    font-size: 28px;
    cursor: pointer;
}


/* =========================================
   3. HERO SECTION (Fondo de Imagen)
   ========================================= */
.hero-section {
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    overflow: hidden;

    /* 1. ESTO DESPEGA EL TEXTO DEL MENÚ */
    padding-top: 150px;
    /* Aumentado para que el título no toque el logo */
}

/* IMAGEN DE FONDO */
.bg-image-hero {
    /* Asegúrate de que esta ruta coincida con tu carpeta */
    background-image: url('../assets/img/nestor-hero.png');
    background-size: cover;
    background-position: center right;
    /* Enfoca a Néstor a la derecha */
    background-repeat: no-repeat;
}

.overlay-dark-blue {
    position: absolute;
    inset: 0;
    /* Degradado para que el texto se lea bien a la izquierda */
    background: linear-gradient(to right, rgba(11, 30, 56, 0.95) 20%, rgba(11, 30, 56, 0.3) 100%);
    z-index: 1;
}

/* --- AJUSTE: TEXTO MÁS ANCHO (Ocupa menos líneas) --- */
.hero-content {
    /* 1. Obligamos a que ocupe todo el ancho del contenedor */
    width: 100%;

    /* 2. Quitamos el límite fijo de píxeles anterior */
    max-width: none;

    /* 3. Dejamos espacio dinámico a la derecha para la foto */
    /* En pantallas grandes, el texto ocupará el 60-65% de la pantalla */
    padding-right: 35%;

    margin-left: 0;
    position: relative;
    z-index: 5;
}

.pill-badge {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--gold);
    border-radius: 50px;
    color: var(--gold);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 600;
    background: rgba(11, 30, 56, 0.3);
}

.hero-text-block h1 {
    font-size: 45px;
    /* Tamaño generoso */
    color: var(--white);
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    /* Un poco más compacto y moderno */
}

.hero-big-text {
    font-size: 90px;
    /* GIGANTE */
    font-weight: 900;
    line-height: 0.9;
    /* Pegadito para que se vea bloque */
    color: var(--white);
    margin-bottom: 35px;
}

.outline-text {
    color: transparent;
    -webkit-text-stroke: 2px var(--gold);
}

.hero-desc {
    color: #e0e0e0;
    font-size: 20px;
    margin-bottom: 45px;

    /* Aumentamos el ancho de la descripción también */
    max-width: 600px;
    line-height: 1.6;
}

/* =========================================
   SCROLL INDICATOR (ANIMADO PREMIUM)
   ========================================= */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    text-align: center;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.scroll-indicator:hover {
    opacity: 1;
}

/* Texto "DESLIZA" */
.scroll-indicator span {
    display: block;
    font-family: var(--font-title);
    /* Montserrat */
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Espaciado elegante */
    color: var(--white);
    margin-bottom: 12px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Sombra para leerse sobre cualquier foto */
}

/* La línea vertical */
.scroll-indicator .line {
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    /* Fondo sutil */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* Clave para la animación */
    border-radius: 4px;
}

/* La "gota" de luz que cae */
.scroll-indicator .line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* La gota ocupa la mitad */
    background: linear-gradient(to bottom, transparent, var(--gold));
    /* Efecto dorado */
    animation: dropDown 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* Definición de la animación */
@keyframes dropDown {
    0% {
        top: -100%;
    }

    100% {
        top: 100%;
    }
}


/* =========================================
   4. NAVEGACIÓN (ACORDEÓN DE LUJO)
   ========================================= */
.accordion-nav-section {
    padding: 80px 0;
    background-color: var(--white);
    /* Sombra sutil abajo para separar del contenido */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 10;
}

.accordion-wrapper {
    display: flex;
    width: 100%;
    height: 450px;
    /* Altura del acordeón en escritorio */
    gap: 15px;
    /* Espacio entre fotos */
}

/* ESTILO DEL PANEL */
.acc-panel {
    position: relative;
    flex: 1;
    /* Todos empiezan con ancho igual */
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Animación suave */
    display: flex;
    align-items: flex-end;
    /* Texto abajo */
    text-decoration: none;
    background-color: var(--navy);
    /* Color de carga si no hay foto */
}

/* EFECTO HOVER (EXPANSIÓN) */
.acc-panel:hover {
    flex: 3;
    /* El panel crece 3 veces su tamaño */
}

/* Overlay Oscuro (Gradiente para leer texto) */
.acc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 30, 56, 0.95) 0%, rgba(11, 30, 56, 0.2) 50%, rgba(11, 30, 56, 0) 100%);
    transition: 0.4s;
    opacity: 0.8;
}

.acc-panel:hover .acc-overlay {
    opacity: 0.6;
    /* Se aclara un poco al pasar el mouse para ver mejor la foto */
    background: linear-gradient(to top, rgba(11, 30, 56, 1) 0%, rgba(11, 30, 56, 0) 70%);
}

/* CONTENIDO (TEXTO E ICONOS) */
.acc-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    width: 100%;
    transform: translateY(0);
    transition: 0.4s;
}

.acc-icon {
    font-size: 28px;
    color: var(--white);
    margin-bottom: 10px;
    display: block;
    opacity: 0.7;
    transition: 0.3s;
}

.acc-panel:hover .acc-icon {
    color: var(--gold);
    /* Icono se pone dorado al hover */
    opacity: 1;
    transform: scale(1.2);
    /* Crece un poco */
}

.acc-content h3 {
    font-family: var(--font-title);
    color: var(--white);
    font-size: 22px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
    /* Evita que el texto se rompa feo al encogerse */
}

.acc-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0;
    opacity: 0;
    /* Oculto inicialmente para limpieza visual */
    transform: translateY(20px);
    transition: 0.4s ease;
    height: 0;
}

/* Mostrar descripción al expandir */
.acc-panel:hover .acc-content p {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    color: var(--white);
}

/* CLASES UTILITARIAS */
.text-gold {
    color: var(--gold) !important;
}


/* RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .accordion-wrapper {
        flex-direction: column;
        /* Apilar verticalmente */
        height: auto;
        gap: 15px;
    }

    .acc-panel {
        width: 100%;
        height: 120px;
        /* Altura colapsada en móvil */
        flex: none;
        /* Desactivar flex dinámico */
    }

    /* En móvil, al tocar, se expande hacia abajo */
    .acc-panel:hover,
    .acc-panel:focus {
        height: 200px;
    }

    .acc-content p {
        opacity: 1;
        /* En móvil siempre mostramos un poco de info si quieres */
        transform: translateY(0);
        height: auto;
        display: block;
    }

    .acc-icon {
        display: none;
    }

    /* Ocultamos icono en móvil para ahorrar espacio */
}

/* =========================================
   5. SECCIONES GENERALES (About, Services, Blog)
   ========================================= */
/* About */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.about-image-clean img {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stats-row {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.stat-num {
    font-size: 38px;
    font-weight: 800;
    display: block;
    color: var(--navy);
}

.stat-label {
    font-size: 13px;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Live / En Vivo */
.live-section {
    background: url('../img/bg-studio.jpg') center/cover;
    position: relative;
    color: var(--white);
}

.overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 56, 0.93);
}

.live-tag {
    background: var(--gold);
    color: var(--navy);
    padding: 6px 18px;
    font-weight: 700;
    font-size: 12px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.countdown-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 50px 0;
}

.time-block span {
    font-size: 60px;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.time-block label {
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 2px;
}

.divider {
    font-size: 50px;
    opacity: 0.3;
    padding-bottom: 20px;
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* Servicios */
.separator-gold {
    width: 70px;
    height: 3px;
    background: var(--gold);
    margin: 20px auto 0;
}

.services-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.service-item {
    background: var(--white);
    padding: 50px 40px;
    border-radius: 12px;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.service-item h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--navy);
}

.text-link {
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Blog */
.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 50px;
}

.btn-simple {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
    font-weight: 600;
    color: var(--navy);
}

.blog-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.blog-post img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 25px;
    transition: 0.3s;
}

.blog-post:hover img {
    transform: scale(1.02);
}

.category {
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-post h4 {
    font-size: 20px;
    margin: 12px 0 15px;
    color: var(--navy);
    line-height: 1.4;
}

.read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    position: relative;
}

.read-more::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: 0.3s;
}

.blog-post:hover .read-more::after {
    width: 100%;
}


/* =========================================
   6. FOOTER
   ========================================= */
.main-footer {
    padding: 80px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    width: 180px;
    margin-bottom: 25px;
}

.social-icons a {
    margin-right: 20px;
    color: var(--white);
    font-size: 20px;
    transition: 0.3s;
}

.social-icons a:hover {
    color: var(--gold);
    transform: translateY(-3px);
    display: inline-block;
}

.footer-nav h5,
.footer-contact h5 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 16px;
    letter-spacing: 1px;
}

.footer-nav ul li {
    margin-bottom: 15px;
}

.footer-nav a {
    color: #ccc;
    font-size: 15px;
}

.footer-nav a:hover {
    color: var(--gold);
    padding-left: 5px;
}

.footer-contact p {
    color: #ccc;
    font-size: 15px;
    margin-bottom: 20px;
}

.copyright {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #888;
}

/* =========================================
   SECCIÓN 3: QUIÉN SOY (CORREGIDO)
   ========================================= */
.about-interactive-section {
    background-color: var(--white);
    overflow: visible;
}

/* 1. AJUSTE DE COLUMNAS (50% - 50%) para imagen cuadrada */
.split-layout-square {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Espacio igual */
    gap: 60px;
    /* Buen espacio en el medio */
    align-items: center;
}

.about-intro {
    padding-right: 0;
}

.mt-30 {
    margin-top: 35px;
    display: block;
}

/* Etiquetas */
.pill-tag {
    display: inline-block;
    background: var(--light-gray);
    color: var(--navy);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid #eaeaea;
}

/* 2. BOTÓN NAVY (Estilo corregido) */
.btn-navy {
    background-color: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-navy:hover {
    background-color: var(--navy);
    color: var(--white);
    transform: translateY(-3px);
}

/* --- CONTENEDOR FOTO --- */
.hotspot-wrapper {
    position: relative;
    border-radius: 20px;
    /* Bordes más suaves */
    box-shadow: 0 20px 60px rgba(11, 30, 56, 0.1);
    overflow: visible;
    /* IMPORTANTE: Para que las tarjetas puedan salir de la foto */
}

.hotspot-main-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    aspect-ratio: 1 / 1;
    /* Fuerza a que se vea cuadrada si la foto no lo es */
    object-fit: cover;
}

/* --- 3. PUNTOS MÁS PEQUEÑOS --- */
.hotspot-point {
    position: absolute;
    width: 30px;
    height: 30px;
    /* Reducido de 40px a 30px */
    z-index: 10;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.hotspot-dot {
    width: 100%;
    height: 100%;
    background-color: var(--gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--navy);
    font-size: 10px;
    /* Icono más pequeño */
    position: relative;
    z-index: 2;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.5);
}

.hotspot-point:hover .hotspot-dot,
.hotspot-point.active .hotspot-dot {
    background-color: var(--navy);
    color: var(--gold);
    transform: scale(1.1);
}

/* Animación ajustada al nuevo tamaño */
.hotspot-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: pulseRing 2s infinite;
    z-index: 1;
}

/* --- TARJETA FLOTANTE (FIXED) --- */
.hotspot-card {
    position: absolute;
    bottom: 45px;
    /* Sube un poco más */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 240px;
    background: var(--navy);
    /* Fondo azul sólido para legibilidad */
    color: var(--white);
    padding: 15px;
    border-radius: 8px;
    border-bottom: 3px solid var(--gold);

    /* ESTADO OCULTO */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    z-index: 20;
}

/* Flechita */
.hotspot-card::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--navy) transparent transparent transparent;
}

/* ESTADO VISIBLE (Cuando tiene la clase .active) */
.hotspot-point.active .hotspot-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header h4 {
    font-size: 14px;
    margin: 0;
    color: var(--gold);
    font-weight: 700;
}

.hotspot-card p {
    font-size: 12px;
    line-height: 1.4;
    color: #ddd;
    margin: 0;
}


/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 900px) {
    .split-layout-square {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hotspot-wrapper {
        box-shadow: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .hotspot-main-img {
        margin-bottom: 20px;
        aspect-ratio: auto;
    }

    /* Ocultar elementos de PC */
    .hotspot-dot,
    .hotspot-pulse,
    .hotspot-card::after {
        display: none;
    }

    /* Los puntos se convierten en lista */
    .hotspot-point {
        position: static !important;
        transform: none;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        cursor: default;
    }

    /* Las tarjetas siempre visibles en móvil */
    .hotspot-card {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        width: 100%;
        background: var(--white);
        /* Fondo blanco */
        border: 1px solid #eee;
        border-left: 4px solid var(--gold);
        border-bottom: none;
        color: var(--navy);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .hotspot-card::after {
        display: none;
    }

    .card-header {
        border-bottom: 1px solid #eee;
    }

    .hotspot-card p {
        color: var(--text-gray);
    }
}

/* =========================================
   SECCIÓN 4: ESTUDIO EN VIVO (ACTUALIZADO)
   ========================================= */
.live-studio-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centrado vertical y horizontal */
    padding: 100px 0;
    overflow: hidden;
    background-color: var(--navy);
    text-align: center;
}

.live-studio-section .sub-heading {
    margin-top: 25px;
    /* Espacio extra arriba */
    margin-bottom: 10px;
    display: block;
}

/* --- SLIDER DE FONDO (CROSSFADE) --- */
.bg-slider-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Animación de Zoom y Opacidad */
    animation: slideFade 12s infinite;
    opacity: 0;
}

/* La segunda imagen tiene un retraso para alternarse */
.delay-slide {
    animation-delay: 6s;
}

@keyframes slideFade {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
    }
}

.live-overlay-dark {
    position: absolute;
    inset: 0;
    /* HEMOS BAJADO LA OPACIDAD:
       - Centro: 0.5 (Antes 0.8) -> Más transparente en el centro
       - Bordes: 0.9 (Antes 0.98) -> Oscuro en los bordes para leer */
    background: radial-gradient(circle at center, rgba(11, 30, 56, 0.5) 0%, rgba(11, 30, 56, 0.9) 100%);
    z-index: 1;
}

/* --- TEXTO RECICLADO --- */
.live-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.live-description strong {
    color: var(--gold);
}

.live-description i {
    font-style: italic;
    font-family: serif;
    letter-spacing: 1px;
}

/* --- INDICADOR ROJO PULSANTE (Ripple) --- */
.live-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 25px;
    border-radius: 50px;
    color: var(--white);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.recording-dot {
    width: 12px;
    height: 12px;
    background-color: #ff4444;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px #ff4444;
}

/* El efecto de onda expansiva */
.recording-dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #ff4444;
    animation: ripple 1.5s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

@keyframes ripple {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* --- CONTADOR CENTRADO --- */
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.time-number {
    font-family: var(--font-title);
    font-size: 70px;
    /* Tamaño grande */
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* Los segundos destacados */
.time-number.text-gold {
    color: var(--gold);
}

.time-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

.time-separator {
    font-size: 50px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
    margin-top: 5px;
}

/* Utilidades */
.text-white {
    color: var(--white);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.85);
}

.glow-effect {
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.4);
}

.glow-effect:hover {
    box-shadow: 0 0 50px rgba(255, 193, 7, 0.7);
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .time-number {
        font-size: 40px;
    }

    .time-separator {
        font-size: 28px;
        margin-top: 5px;
    }

    .time-box {
        min-width: 50px;
    }

    .countdown-container {
        gap: 10px;
    }

    .live-description {
        font-size: 16px;
    }
}

/* =========================================
   SECCIÓN 5: SESIÓN PRIVADA (Editorial Split)
   ========================================= */
.private-session-section {
    background-color: var(--light-gray);
    /* Fondo gris suave para contraste */
    overflow: hidden;
}

/* Utilidad para centrar verticalmente en el grid */
.align-center {
    align-items: center;
}

/* --- COLUMNA IMAGEN --- */
.session-image-wrapper {
    position: relative;
    padding: 20px;
    /* Espacio para que se vea el marco decorativo detrás */
}

/* La imagen cuadrada */
.session-img {
    width: 100%;
    max-width: 550px;
    /* Evita que se haga excesivamente grande en pantallas 4K */
    height: auto;
    aspect-ratio: 1/1;
    /* Forza la proporción cuadrada */
    object-fit: cover;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    /* Por encima del marco */
}

/* Sombra de lujo profunda (Deep Shadow) */
.shadow-lg {
    box-shadow: 0 30px 80px rgba(11, 30, 56, 0.25);
}

/* Marco dorado decorativo detrás de la foto */
.gold-frame-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 193, 7, 0.4);
    /* Dorado semitransparente */
    border-radius: 12px;
    transform: translate(-25px, -25px);
    /* Desplazamiento para el efecto */
    z-index: 1;
}

/* --- COLUMNA CONTENIDO --- */
.session-contentWrapper {
    padding-left: 40px;
    /* Separación de la imagen */
}

/* Márgenes específicos */
.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

/* Negritas dentro del texto en azul navy */
.body-text strong {
    color: var(--navy);
    font-weight: 700;
}

/* Lista con checks dorados */
.gold-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gold-check-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 17px;
    color: var(--navy);
    font-weight: 600;
}

.gold-check-list li i {
    font-size: 22px;
    /* Icono ligeramente más grande que el texto */
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {

    /* En móvil, el contenido se centra */
    .session-contentWrapper {
        padding-left: 0;
        text-align: center;
    }

    /* Simplificamos la imagen en móvil quitando el marco desplazado */
    .gold-frame-deco {
        display: none;
    }

    .session-image-wrapper {
        padding: 0;
        margin-bottom: 40px;
    }

    /* La lista se alinea a la izquierda pero el bloque se centra */
    .gold-check-list {
        display: inline-block;
        text-align: left;
        margin-top: 20px;
    }
}

/* =========================================
   SECCIÓN 6: NEWSROOM (Artículos + Multimedia)
   ========================================= */
.newsroom-section {
    background-color: var(--light-gray);
}

.newsroom-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    /* Izquierda ancha, derecha compacta */
    gap: 50px;
    align-items: start;
}

/* --- COLUMNA PRINCIPAL --- */
.featured-post {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    margin-bottom: 30px;
}

.featured-post:hover {
    transform: translateY(-5px);
}

.post-image {
    position: relative;
    height: 350px;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--gold);
    color: var(--navy);
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
}

.post-body {
    padding: 35px;
}

.meta-data {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-title {
    font-size: 28px;
    margin-bottom: 15px;
    color: var(--navy);
    line-height: 1.3;
}

.post-excerpt {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.7;
}

.btn-text {
    color: var(--navy);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text:hover {
    color: var(--gold);
    gap: 12px;
}

/* Sub-artículos (Lista rápida) */
.sub-posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sub-post {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--gold);
}

.sub-title a {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
}

.sub-date {
    font-size: 12px;
    color: #999;
}


/* --- SIDEBAR MULTIMEDIA --- */
.media-sidebar {
    position: sticky;
    top: 100px;
    /* Se queda fijo al bajar */
}

.sidebar-widget {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

.widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.text-red {
    color: #ff0000;
}

.text-pink {
    color: #E1306C;
}

/* Widget YouTube */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-caption h5 {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--navy);
}

.subscribe-link {
    font-size: 12px;
    color: #cc0000;
    font-weight: 600;
    text-transform: uppercase;
}

/* Widget Shorts */
.shorts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.short-item {
    aspect-ratio: 9/16;
    /* Formato vertical */
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.short-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.short-item:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

.play-icon {
    position: relative;
    z-index: 2;
    color: var(--white);
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .newsroom-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .post-image {
        height: 250px;
    }

    .media-sidebar {
        position: static;
    }

    /* Quitar sticky en móvil */
    .shorts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sub-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   BARRA DE BOTONES (SECCIÓN 6)
   ========================================= */

.newsroom-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 60px;
    /* Separación superior para que no choque con los artículos */
}

/* Estilo Botón Píldora */
.btn-pill {
    background-color: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 30px;
    border-radius: 50px;
    /* Forma de píldora */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Sombra suave */
    border: 1px solid transparent;
    /* Para el hover */
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* Iconos de color específico */
.text-red {
    color: #ff0000;
}

.text-pink {
    color: #E1306C;
}

/* Efecto Hover */
.btn-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--gold);
    /* Borde dorado al pasar el mouse */
    color: var(--navy);
    /* Asegura que el texto siga siendo navy */
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .newsroom-nav {
        gap: 10px;
    }

    .btn-pill {
        padding: 10px 20px;
        font-size: 12px;
        flex: 1 1 auto;
        /* Se distribuyen */
        justify-content: center;
    }
}

/* =========================================
   SECCIÓN 7: PROYECTOS DESTACADOS (Dark)
   ========================================= */
.featured-projects-section {
    background-color: var(--navy);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* ESTILO BASE DE TARJETA */
.project-card {
    background: rgba(255, 255, 255, 0.03);
    /* Casi transparente */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 50px 40px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: rgba(255, 193, 7, 0.3);
    /* Borde dorado al hover */
}

/* ICONOS */
.project-icon {
    font-size: 32px;
    color: var(--gold);
    background: rgba(255, 193, 7, 0.1);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Para que no se aplaste */
}

/* TEXTOS */
.project-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.project-title {
    font-size: 28px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.project-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* BOTONES DE ENLACE */
.btn-link-gold {
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 5px;
}

.btn-link-gold:hover {
    color: var(--white);
    border-color: var(--white);
}

.btn-link-white {
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
}

.btn-link-white:hover {
    color: var(--gold);
    border-color: var(--gold);
}


/* --- ESTILO ESPECIAL PARA Z DIGITAL --- */
.z-digital-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 193, 7, 0.2);
    /* Borde dorado sutil siempre visible */
}

/* Elemento decorativo de fondo (ondas de radio abstractas) */
.card-deco-bg {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.project-content {
    position: relative;
    z-index: 1;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px;
    }

    .project-icon {
        margin-bottom: 20px;
    }
}

/* =========================================
   SECCIÓN 8: CONTACTO DE IMPACTO
   ========================================= */
.contact-impact-section {
    background-color: #F4F6F8;
    /* Gris azulado muy suave */
    position: relative;
    overflow: hidden;
}

/* Patrón de Mapa de Fondo */
.map-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos una imagen de mapa mundial sutil y transparente */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 0.05;
    /* Muy sutil, solo textura */
    pointer-events: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* --- LADO IZQUIERDO --- */
.contact-details {
    margin-top: 40px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.icon-circle-small {
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.detail-item h5 {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.detail-item p {
    font-size: 18px;
    color: var(--navy);
    font-weight: 700;
    margin: 0;
    font-family: var(--font-title);
}


/* --- LADO DERECHO: FORMULARIO LEGAL --- */
.contact-form-wrapper {
    background: var(--white);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(11, 30, 56, 0.1);
    /* Sombra profunda para que "flote" */
    position: relative;
    z-index: 2;
    border-top: 5px solid var(--navy);
    /* Detalle de marca arriba */
}

/* Estilo de Inputs "Solo Línea" (Legal Style) */
.legal-form .form-group {
    margin-bottom: 25px;
}

.legal-form label {
    display: block;
    font-size: 12px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.legal-form input,
.legal-form select,
.legal-form textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 2px solid #eee;
    /* Solo línea abajo */
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--navy);
    transition: 0.3s;
    border-radius: 0;
    /* Cuadrado */
}

.legal-form textarea {
    resize: none;
}

/* Efecto al escribir */
.legal-form input:focus,
.legal-form select:focus,
.legal-form textarea:focus {
    outline: none;
    border-bottom-color: var(--navy);
    /* Se pone azul al escribir */
}

/* Botón Bloque */
.btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

.ml-10 {
    margin-left: 10px;
}

.mt-20 {
    margin-top: 20px;
}

/* Nota de privacidad */
.privacy-note {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 20px;
    display: block;
}

.privacy-note i {
    color: var(--gold);
    margin-right: 5px;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

    .map-pattern {
        background-position: center;
        opacity: 0.03;
    }
}

/* =========================================
   9. FOOTER (Final)
   ========================================= */
.site-footer {
    position: relative;
    padding-top: 80px;
    padding-bottom: 30px;
    background-color: #050e1a;
    /* Un tono más oscuro que el navy normal para profundidad */
}

/* Línea dorada de separación */
.footer-border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    opacity: 0.7;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    /* Columna de marca más ancha */
    gap: 40px;
    margin-bottom: 60px;
}

/* Marca */
.footer-logo {
    width: 160px;
    display: block;
}

.footer-bio {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 300px;
}

/* Redes Sociales */
.social-links {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-btn:hover {
    background: var(--gold);
    color: var(--navy);
    transform: translateY(-3px);
    border-color: var(--gold);
}

/* Encabezados de Columna */
.footer-heading {
    font-size: 16px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    font-weight: 700;
}

/* Enlaces */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--gold);
    padding-left: 5px;
}

/* Enlace Admin Discreto */
.admin-link {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 12px !important;
}

.admin-link:hover {
    color: var(--gold) !important;
}

/* Lista de Contacto */
.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.contact-list i {
    margin-top: 3px;
}

/* Copyright */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* RESPONSIVE FOOTER */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 20px;
    }

    .footer-bio {
        margin: 0 auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .contact-list li {
        justify-content: center;
    }
}