@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');

/* ============================================================
   NAVBAR ABOUT - ESTILOS ESPECÍFICOS
   Replicación exacta del diseño de referencia
   ============================================================ */

/* Reset de estilos del navbar global para evitar conflicto visual en About */
.site-header.is-scrolled .site-header_wrap {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: initial !important;
    /* Respetar padding del container si es necesario, o resetear */
    border-radius: 0 !important;
    max-width: none !important;
}

/* 4. POSICIÓN VERTICAL DEL CONJUNTO */
.site-header {
    padding-top: 10px;
    /* (2025-01-16) Ajuste previo: 10px */
    padding-bottom: 10px;
    height: 80px;
    /* Forzar altura para tener referencia de centro clara */
    display: flex;
    align-items: center;
}

/* Container relativo para que el navbar absoluto se centre respecto a esto */
.site-header .site-header_inner {
    position: relative;
    display: flex;
    align-items: center;
    /* 3. Alineación vertical perfecta de items flex (logo, cta) */
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

/* Ajuste fino para el logo específicamente si visualmente se ve mal */
.site-header_inner-logo {
    display: flex;
    align-items: center;
    transform: translateY(12px);
    /* (2025-01-16) Bajado SOLO el logo independientemente */
}

/* NAVBAR CENTRAL (Contenedor .main-nav--wrap) */
.navbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;

    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* 1. PILDORA DEL NAVBAR (Dimensiones optimizadas) */
    padding: 6px 28px;
    /* Menos altura, menos ancho */
    border-radius: 100px;
    /* Más píldora */

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(245, 177, 106, 0.15),
        0 0 35px rgba(0, 140, 255, 0.15),
        0 0 45px rgba(180, 0, 255, 0.15);

    z-index: 10;

    /* 3. ALINEACIÓN VERTICAL (Centrado absoluto) */
    top: 50%;
    transform: translate(-50%, -50%);

    transition:
        padding 0.35s ease,
        transform 0.35s ease,
        top 0.35s ease;

    /* Asegurar que no se superponga raro si el padre tiene estilos */
    /* Asegurar que no se superponga raro si el padre tiene estilos */
    margin-top: 0;
    /* (2025-01-16) Re-alineado: Eliminado margen negativo */
}

/* Corrección de la posición vertical superior (Muy importante) */
.site-header {
    top: 10px !important;
    /* (2025-01-16) Subido el logo y todo el conjunto */
    padding: 0 !important;
    /* Eliminar padding extra */
}


/* NAVBAR MÁS COMPACTO EN SCROLL */
.site-header.is-scrolled .navbar {
    padding: 4px 24px;
    /* Aún más compacto en scroll */
    transform: translate(-50%, -50%) scale(0.95);
}


/* LISTA (ul .main-nav) */
.navbar-list {

    display: flex;
    display: flex;
    gap: 2px;
    /* (2025-01-16) Espaciado entre palabras mínimo */
    /* 2. TEXTO Y NAVEGACIÓN (Más unidos) */
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-list a {
    font-family: "Inter", sans-serif !important;
    /* Override global Anton */

    color: #ff6600;
    text-decoration: none;

    font-weight: 800;
    /* 🔥 más presencia */
    font-size: 1.1rem;
    /* 🔥 más grande */
    letter-spacing: -0.5px;
    /* (2025-01-16) Letras mucho más pegadas */
    /* 🔥 más compacto */

    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;

    position: relative;
    padding-bottom: 5px;
}


.navbar-list a:hover,
.navbar-list a.is-active {
    color: #f5b16a !important;
    text-shadow: 0 0 12px rgba(245, 177, 106, 0.7);
}

.navbar-list a:hover {
    color: #f5b16a;
}

.navbar-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #f5b16a;
    transition: width 0.3s ease;
}

.navbar-list a:hover::after,
.navbar-list a.is-active::after {
    width: 100%;
}

/* HALOS DECORATIVOS */
.navbar::before,
.navbar::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
}

.navbar::before {
    width: 80px;
    height: 80px;
    background: rgba(245, 177, 106, 0.15);
    top: -20px;
    left: -30px;
}

.navbar::after {
    width: 80px;
    height: 80px;
    background: rgba(150, 100, 255, 0.15);
    top: -20px;
    right: -30px;
}

/* Botón 'Escúchanos' con misma tipografía que el navbar */
.button--header-cta {
    font-family: "Inter", sans-serif !important;
    font-weight: 800;
    /* Matching navbar */
    letter-spacing: -0.5px;
    /* Matching navbar */
}

/* ============================================================
   COLOR OVERRIDES (User Request: Pastel Orange)
   HEX: #f5b16a
   ============================================================ */

.button--green,
.accessibility__btn--green,
.button--header-cta--green,
.button--talk_cta {
    background-color: #f5b16a !important;
    border-color: #f5b16a !important;
    color: #000000 !important;
    /* Black text for better contrast on pastel orange */
    transition: all 0.3s ease !important;
}

.button--green:hover,
.accessibility__btn--green:hover,
.button--header-cta--green:hover,
.button--talk_cta:hover {
    background-color: #dca36b !important;
    /* Slightly darker for hover */
    border-color: #dca36b !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 178, 107, 0.4);
}

/* Update text links to orange */
p a {
    color: #f5b16a !important;
    text-decoration-color: #f5b16a !important;
}

/* Override green buttons to orange #f5b16a (User Request) */
.button--green-hollow,
.button--green-hollow:visited {
    color: #ffffff !important;
    border-color: #f5b16a !important;
}

.button--green-hollow:hover,
.button--green-hollow:active {
    color: #ffffff !important;
    border-color: #f5b16a !important;
}

.button--green-hollow .button__outline {
    border-color: #f5b16a !important;
}

.button--green-hollow:hover .button__outline {
    border-color: #f5b16a !important;
}

/* ============================================================
   BUTTON OUTLINE ANIMATION OVERRIDES (All Button Types)
   Change animation color from green (#caf291) to orange (#f5b16a)
   ============================================================ */

/* General button outline for filled green buttons */
.button--green .button__outline,
.button--green:hover .button__outline,
.button--green:focus .button__outline {
    border-color: #f5b16a !important;
}

/* Header CTA Button outline */
.button--header-cta--green .button__outline,
.button--header-cta--green:hover .button__outline,
.button--header-cta--green:focus .button__outline {
    border-color: #f5b16a !important;
}

/* Accessibility button outline */
.accessibility__btn--green .button__outline,
.accessibility__btn--green:hover .button__outline,
.accessibility__btn--green:focus .button__outline {
    border-color: #f5b16a !important;
}

/* Talk CTA Button outline */
.button--talk_cta .button__outline,
.button--talk_cta:hover .button__outline,
.button--talk_cta:focus .button__outline {
    border-color: #f5b16a !important;
}

/* Pill button with green modifier */
.button--pill.button--green .button__outline,
.button--pill.button--green:hover .button__outline,
.button--pill.button--green-hollow .button__outline,
.button--pill.button--green-hollow:hover .button__outline {
    border-color: #f5b16a !important;
}

/* Override CSS variable for borders */
.button__outline {
    border-color: #f5b16a !important;
}

/* ============================================================
   FOOTER BUTTON GLOBAL STYLING
   Applied to all pages with "Escúchanos" button
   ============================================================ */

/* Footer "Escúchanos" Button Typography & Sizing */
.site-footer .button--green {
    font-family: 'Anton', sans-serif !important;
    font-size: 35px !important;
    padding: 14px 35px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

/* Footer Button Base & Hover State (Orange) */
.site-footer .button--green .button__outline {
    border-color: #f5b16a !important;
}

.site-footer .button--green:hover .button__outline {
    border-color: #f5b16a !important;
    box-shadow: none !important;
}

.site-footer .button--green:hover {
    color: #ffffff !important;
}

/* ============================================================
   GLOBAL BUTTON TYPOGRAPHY
   Applied to all buttons across all pages
   ============================================================ */

button,
.button,
.button--green,
.button--green-hollow,
.button--header-cta--black,
.button--pill,
.button--talk_cta,
.accessibility__btn,
.accessibility__btn--green,
.freeform-button-submit {
    font-family: 'Anton', sans-serif !important;
}

/* Preserve Inter font for navbar button */
.button--header-cta,
.button--header-cta--green {
    font-family: "Inter", sans-serif !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* ============================================================
   HERO SUBHEADING BADGE STYLING
   Applied to hero section labels/badges
   ============================================================ */

.mainHero_inner-subheading {
    font-family: 'Anton', sans-serif !important;
    border-color: #f5b16a !important;
}

/* ============================================================
   FIX: El CSS de eyekiller deshabilita pointer-events en los
   links del navbar hasta que Vue inicializa su estado.
   Sin Vue, los links quedan inertes. Esta regla los fuerza.
   NOTA: .navbar NO incluye position:relative para preservar su
   position:absolute que lo centra horizontalmente.
============================================================ */
.main-nav--wrap,
.navbar {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 20;
    /* NO se sobreescribe position aquí — .navbar necesita position:absolute */
}

.navbar-list,
.navbar-list li,
.navbar-list a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 20;
}