/* =============================================================
   AGENDA ONE · SÓCRATES CREATIVE STUDIO
   CAPA VISUAL v2.1

   Este archivo sobrescribe la presentación original sin alterar
   las funciones, textos ni estructura de la landing.
   ============================================================= */


/* =============================================================
   01. TIPOGRAFÍAS LOCALES
   Evita diferencias entre Windows, macOS, iOS y Android.
   ============================================================= */

@font-face{
    font-family:"Ubuntu Sans";
    src:url("../fonts/ubuntu-sans-latin-variable.woff2") format("woff2");
    font-style:normal;
    font-weight:300 800;
    font-display:swap;
}

@font-face{
    font-family:"Exo 2";
    src:url("../fonts/exo-2-latin-variable.woff2") format("woff2");
    font-style:normal;
    font-weight:300 900;
    font-display:swap;
}


/* =============================================================
   02. VARIABLES DE MARCA
   ============================================================= */

:root{
    --sc-navy:#002F57;
    --sc-deep:#001F3A;
    --sc-blue:#0074C7;
    --sc-cyan:#31B4E7;
    --sc-green:#73BC25;
    --sc-yellow:#F6BD00;
    --sc-orange:#FF5300;
    --sc-white:#FFFFFF;
}


/* =============================================================
   03. BASE GLOBAL
   Sin blur, sin sombras y con fondos de secciones transparentes.
   ============================================================= */

html{
    scroll-padding-top:124px;
    font-family:"Ubuntu Sans",Ubuntu,Arial,sans-serif!important;
}

body{
    background:
        linear-gradient(rgba(49,180,231,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(49,180,231,.035) 1px,transparent 1px),
        linear-gradient(120deg,#002F57 0%,#003E69 56%,#1C425D 100%)!important;
    background-size:56px 56px,56px 56px,auto!important;
    color:var(--sc-white)!important;
}

body::before{display:none!important}

body *,
body *::before,
body *::after{
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
}

[class*="drop-shadow"]{filter:none!important}

section{
    background-color:transparent!important;
    background-image:none!important;
}

#inicio > .absolute.inset-0,
#allinone > .absolute.inset-0,
#allinone > .section-bg{
    display:none!important;
}

.wave-divider{display:none!important}


/* =============================================================
   04. TÍTULOS
   Ningún título principal supera 35 px.
   ============================================================= */

h1,h2,h3,h4,h5,h6,
[class*="font-black"],
[class*="font-extrabold"]{
    font-family:"Exo 2",sans-serif!important;
}

h1,
section h2{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    font-size:clamp(29px,3.2vw,35px)!important;
    font-weight:800!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
}

#inicio h1{
    margin-left:0;
    margin-right:0;
}

h3{font-size:clamp(18px,2vw,23px)!important}
h4{font-size:14px!important}


/* =============================================================
   05. HEADER
   ============================================================= */

body > header{
    z-index:2147483000!important;
}

body > header > div:first-child{
    background:rgba(0,31,58,.98)!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
}

body > header > div:first-child > div{
    height:76px!important;
}

body > header > div:first-child a img{
    width:auto!important;
    height:47px!important;
    max-width:220px!important;
    object-fit:contain!important;
}

#desktop-nav,
#mobile-menu{
    background:rgba(0,47,87,.98)!important;
    border-bottom:1px solid rgba(49,180,231,.28)!important;
}

.nav-link{
    min-height:38px;
    padding:6px 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:rgba(255,255,255,.7)!important;
    font-family:"Exo 2",sans-serif!important;
    font-size:15px!important;
    font-weight:300!important;
    letter-spacing:.035em!important;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--sc-cyan);
    opacity:0;
    transform:translateX(-50%);
}

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

.nav-link:hover::after,
.nav-link.active::after{opacity:1}

.nav-link i{color:var(--sc-cyan)!important}


/* =============================================================
   06. IDIOMAS
   Bandera circular completa, sin fondo ni efecto mouseover.
   ============================================================= */

.lang-btn,
.lang-btn:hover,
.lang-btn:focus,
.lang-btn:active{
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    opacity:.38;
    filter:saturate(.55);
    transform:none!important;
    transition:none!important;
}

.lang-btn.active,
.lang-btn.active:hover{
    opacity:1;
    filter:saturate(1.12);
}

.lang-btn img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:contain!important;
}

.lang-btn:focus-visible img{
    outline:2px solid var(--sc-orange);
    outline-offset:3px;
}


/* =============================================================
   07. BOTONES
   Botón naranja y hover celeste de alto contraste.
   ============================================================= */

.btn,
.btn-blue,
.btn-green{
    min-height:46px;
    padding:0 20px!important;
    border:1px solid var(--sc-orange)!important;
    border-radius:4px!important;
    background:var(--sc-orange)!important;
    color:var(--sc-white)!important;
    font-family:"Exo 2",sans-serif!important;
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.055em!important;
    line-height:1!important;
    text-transform:uppercase;
    transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease!important;
}

.btn:hover,
.btn:focus-visible,
.btn-blue:hover,
.btn-blue:focus-visible,
.btn-green:hover,
.btn-green:focus-visible{
    border-color:var(--sc-cyan)!important;
    background:var(--sc-cyan)!important;
    color:var(--sc-navy)!important;
    transform:translateY(-2px)!important;
}

.btn:disabled{
    cursor:not-allowed;
    opacity:.55!important;
    transform:none!important;
}

#btn-to-top{
    border:1px solid var(--sc-green)!important;
    border-radius:50%!important;
    background:var(--sc-green)!important;
    color:var(--sc-navy)!important;
}

#btn-to-top:hover,
#btn-to-top:focus-visible{
    border-color:var(--sc-yellow)!important;
    background:var(--sc-yellow)!important;
}


/* =============================================================
   08. HERO
   ============================================================= */

#inicio{
    min-height:auto!important;
    padding-top:176px!important;
    padding-bottom:96px!important;
}

#inicio .inline-flex.items-center{
    border:1px solid rgba(49,180,231,.36)!important;
    border-radius:4px!important;
    background:transparent!important;
}

.text-gradient{
    background:linear-gradient(90deg,var(--sc-yellow),var(--sc-orange))!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
}

.hero-image-container img{
    border-radius:0!important;
    filter:none!important;
}


/* =============================================================
   09. SECCIONES Y ETIQUETAS
   ============================================================= */

section:not(#inicio){
    padding-top:88px!important;
    padding-bottom:88px!important;
}

.section-glow-top::before{
    left:4%!important;
    width:92%!important;
    height:1px!important;
    border-radius:0!important;
    background:linear-gradient(90deg,transparent,var(--sc-cyan),var(--sc-green),var(--sc-yellow),var(--sc-orange),transparent)!important;
}

section .text-xs.font-black.uppercase.tracking-widest{
    border-radius:3px!important;
    background:transparent!important;
}


/* =============================================================
   10. TARJETAS
   ============================================================= */

.glass-card-premium,
.table-container-dark,
details.faq-item{
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:8px!important;
    background:rgba(0,47,87,.26)!important;
}

.glass-card-premium:hover,
.card-hover-premium:hover,
.feat-card:hover{
    border-color:var(--hover-color,var(--sc-cyan))!important;
    border-width:1px!important;
    background:rgba(0,47,87,.42)!important;
    transform:translateY(-3px)!important;
}

.feat-card .w-14,
.card-icon,
.faq-icon{
    border:1px solid currentColor!important;
    border-radius:5px!important;
    background:transparent!important;
}

.feat-card:hover .feat-icon,
.card-hover-premium:hover .card-icon{
    animation:none!important;
}


/* =============================================================
   11. TABLA COMPARATIVA
   ============================================================= */

.table-container-dark{
    width:100%;
    max-width:1024px;
    margin-right:auto!important;
    margin-left:auto!important;
    overflow-x:auto;
}

#filosofia .table-container-dark table{
    min-width:720px;
}

.table-container-dark thead th{
    background:rgba(0,31,58,.85)!important;
    border-bottom-color:rgba(49,180,231,.24)!important;
}

.table-container-dark tbody tr:hover td{
    background:rgba(49,180,231,.045)!important;
}

.table-container-dark tbody tr:hover td:nth-child(2){
    background:rgba(115,188,37,.07)!important;
}


/* =============================================================
   12. FAQ
   ============================================================= */

details.faq-item[open]{
    border-color:var(--sc-cyan)!important;
    background:rgba(0,47,87,.42)!important;
}

details.faq-item summary:hover{color:var(--sc-yellow)!important}


/* =============================================================
   13. FORMULARIOS
   ============================================================= */

#contact-form input,
#contact-form textarea,
#demo-form input{
    min-height:48px;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:4px!important;
    background:rgba(255,255,255,.96)!important;
    color:var(--sc-navy)!important;
}

#contact-form textarea{min-height:128px}

#contact-form input:focus,
#contact-form textarea:focus,
#demo-form input:focus{
    border-color:var(--sc-cyan)!important;
    outline:2px solid rgba(49,180,231,.18)!important;
    outline-offset:1px;
}

#contact-form label,
#demo-form .sc-captcha label{
    color:var(--sc-cyan)!important;
    font-family:"Exo 2",sans-serif!important;
}

.sc-field-help,
.sc-captcha-help{
    margin-top:6px;
    color:rgba(219,239,251,.7);
    font-size:11px;
    line-height:1.4;
}

.sc-captcha{
    padding:14px;
    border:1px solid rgba(49,180,231,.28);
    border-radius:4px;
    background:rgba(0,31,58,.46);
}

.sc-captcha > label{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.07em;
    line-height:1.2;
    text-transform:uppercase;
}

.sc-captcha-row{
    display:grid;
    grid-template-columns:minmax(130px,1fr) minmax(82px,108px) 44px;
    gap:8px;
    align-items:stretch;
}

.sc-captcha-question{
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:4px;
    color:var(--sc-white);
    font-family:"Exo 2",sans-serif;
    font-size:16px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
}

#contact-form .sc-captcha input,
#demo-form .sc-captcha input{
    width:100%;
    min-height:44px;
    padding:8px!important;
    font-family:"Exo 2",sans-serif;
    font-size:16px!important;
    font-weight:800;
    text-align:center;
}

.sc-captcha-refresh{
    display:flex;
    width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--sc-cyan);
    border-radius:4px;
    background:transparent;
    color:var(--sc-cyan);
    cursor:pointer;
}

.sc-captcha-refresh:hover,
.sc-captcha-refresh:focus-visible{
    border-color:var(--sc-yellow);
    background:var(--sc-yellow);
    color:var(--sc-navy);
}

.sc-honeypot{
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}


/* =============================================================
   14. MODALES Y AVISO DE IDIOMA
   ============================================================= */

.modal-overlay{
    background:rgba(0,24,46,.94)!important;
}

.modal-content > div,
.modal-content.bg-\[\#001f3f\]{
    border:1px solid rgba(49,180,231,.3)!important;
    border-radius:8px!important;
    background:var(--sc-deep)!important;
}

#notif-header{
    background:var(--sc-navy)!important;
}

.lang-banner{
    border-top:1px solid var(--sc-cyan)!important;
    background:var(--sc-deep)!important;
}

.lang-banner .lang-banner-btn{
    border-radius:4px!important;
}

.lang-banner .lang-banner-btn-yes{
    border-color:var(--sc-orange)!important;
    background:var(--sc-orange)!important;
}

.lang-banner .lang-banner-btn-yes:hover{
    border-color:var(--sc-cyan)!important;
    background:var(--sc-cyan)!important;
    color:var(--sc-navy)!important;
}


/* =============================================================
   15. FOOTER
   ============================================================= */

footer{
    border-top:1px solid rgba(49,180,231,.35)!important;
    background:rgba(0,24,46,.92)!important;
}

footer > div:last-child{
    background:rgba(0,13,26,.66)!important;
}

footer img{
    width:auto!important;
    max-width:220px!important;
    object-fit:contain!important;
}


/* =============================================================
   16. RESPONSIVE
   ============================================================= */

@media(max-width:1023px){
    #inicio{
        padding-top:126px!important;
        text-align:center;
    }

    #inicio h1{
        margin-left:auto;
        margin-right:auto;
    }

    #inicio p{
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:767px){
    html{scroll-padding-top:78px}

    body > header > div:first-child > div{
        height:70px!important;
    }

    body > header > div:first-child a img{
        height:42px!important;
        max-width:190px!important;
    }

    #inicio{
        padding-top:112px!important;
        padding-bottom:70px!important;
    }

    section:not(#inicio){
        padding-top:68px!important;
        padding-bottom:68px!important;
    }

    #mobile-menu .nav-link{
        font-size:14px!important;
        justify-content:flex-start;
    }

    #mobile-menu .nav-link::after{display:none}

    h1,
    section h2{
        font-size:clamp(27px,8.2vw,33px)!important;
    }

    .glass-card-premium{
        padding:22px!important;
    }

    .sc-captcha-row{
        grid-template-columns:minmax(105px,1fr) 82px 44px;
    }
}


/* =============================================================
   17. ACCESIBILIDAD
   ============================================================= */

:focus-visible{
    outline:2px solid var(--sc-yellow)!important;
    outline-offset:3px!important;
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}