:root{
    --gold:#a98d4f;
    --gold2:#c5a95f;
    --brown:#2c1d19;
    --brown2:#1d1412;
    --dark:#131110;
    --paper:#f5f2ed;
    --text:#1b1715;
    --white:#ffffff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:74px;
}

body{
    margin:0;
    font-family:"Montserrat",Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.6;
}

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

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

.container{
    width:min(1200px,calc(100% - 44px));
    margin:auto;
}

/* MENU SUPERIOR */
.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:linear-gradient(90deg,rgba(28,18,16,.98),rgba(39,25,21,.98));
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.nav-container{
    min-height:74px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Ya no hay logo en el menú */
.nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:38px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
}

.nav > a,
.dropdown-toggle{
    position:relative;
    color:#fff;
}

.nav > a:not(.webmail-btn)::after,
.dropdown-toggle::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-12px;
    height:2px;
    background:var(--gold2);
    transform:scaleX(0);
    transform-origin:left;
    transition:.25s;
}

.nav > a:hover::after,
.dropdown-toggle:hover::after{
    transform:scaleX(1);
}

.webmail-btn{
    border:1px solid var(--gold2);
    padding:10px 16px;
    border-radius:5px;
    color:var(--gold2)!important;
}

.webmail-btn:hover{
    background:var(--gold2);
    color:#1c1512!important;
}

.dropdown{
    position:relative;
}

.dropdown-toggle{
    border:0;
    background:none;
    text-transform:uppercase;
    font-weight:700;
    cursor:pointer;
    padding:0;
}

.dropdown-menu{
    position:absolute;
    top:32px;
    right:-55px;
    width:315px;
    background:#261b18;
    border:1px solid rgba(197,169,95,.35);
    border-radius:6px;
    padding:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);

    transition:
        opacity .20s ease .35s,
        visibility 0s linear .55s,
        transform .20s ease .35s;
}

/* Puente invisible entre "Documentos" y el submenú */
.dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
}

/* Abrir inmediatamente y cerrar con un pequeño retardo */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
}

.dropdown-menu a{
    display:block;
    padding:14px 16px;
    border-radius:4px;
    color:#fff;
    text-transform:none;
    font-weight:500;
    line-height:1.45;
}

.dropdown-menu a:hover{
    background:rgba(197,169,95,.12);
    color:var(--gold2);
}

.menu-btn{
    display:none;
    border:0;
    background:none;
    padding:8px;
}

.menu-btn span{
    width:28px;
    height:2px;
    background:#fff;
    display:block;
    margin:6px 0;
}

/* HERO */
.hero{
    min-height:610px;
    padding-top:74px;
    position:relative;
    background:url("hero.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
}

.hero-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(8,8,8,.82) 0%,rgba(8,8,8,.46) 47%,rgba(8,8,8,.04) 78%),
        linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18));
}

.hero-grid{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:flex-start;
}

.hero-copy{
    width:min(600px,100%);
    text-align:left;
    color:#fff;
    margin-left:24px;
    transform:translateY(10px);
}

/* Logo principal más pequeño y alineado a la izquierda */
.hero-logo{
    width:420px;
    max-width:88%;
    margin:0;
    filter:drop-shadow(0 5px 18px rgba(0,0,0,.35));
}

/* Menos espacio entre logo y texto */
.hero-line{
    width:420px;
    max-width:75%;
    height:2px;
    background:linear-gradient(
        90deg,
        rgba(197,169,95,.35),
        var(--gold2),
        rgba(197,169,95,.35)
    );
    margin:5px 0 8px;
}

.hero-kicker{
    margin:0 0 5px;
    text-transform:uppercase;
    color:var(--gold2);
    letter-spacing:.12em;
    font-size:20px;
    font-weight:700;
}

.hero-text{
    width:min(540px,100%);
    font-size:16px;
    line-height:1.5;
    margin:0;
}

/* QUIÉNES SOMOS / VISIÓN / MISIÓN */
.about{
    background:var(--paper);
    padding:38px 0 42px;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.info-card{
    padding:8px 32px 14px;
    border-right:1px solid #d7cec5;
}

.info-card:last-child{
    border-right:0;
}

.round-icon{
    width:78px;
    height:78px;
    border:1.5px solid var(--gold);
    border-radius:50%;
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:33px;
    margin-bottom:12px;
}

.info-card h2{
    font-size:22px;
    text-transform:uppercase;
    margin:0;
}

.gold-rule{
    width:42px;
    height:3px;
    background:var(--gold);
    margin:10px 0 26px;
}

.info-card p{
    margin:0;
    font-size:14px;
    color:#29221f;
}

/* TÍTULOS */
.section-title{
    text-align:center;
    margin-bottom:32px;
}

.section-title h2{
    font-size:30px;
    text-transform:uppercase;
    margin:0;
}

.section-title span{
    display:block;
    width:72px;
    height:3px;
    background:var(--gold);
    margin:8px auto 10px;
}

.section-title p{
    max-width:920px;
    margin:0 auto;
    font-size:14px;
}

.section-title.light{
    color:#fff;
}

/* VALORES */
.values{
    background:
        linear-gradient(rgba(27,18,16,.96),rgba(20,16,15,.96)),
        url("hero.jpg") center/cover fixed;
    padding:26px 0 40px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.value-item{
    color:#fff;
    text-align:center;
    padding:8px 22px 0;
    border-right:1px solid rgba(197,169,95,.5);
}

.value-item:last-child{
    border-right:0;
}

.value-icon{
    width:66px;
    height:66px;
    margin:0 auto 14px;
    border:2px solid var(--gold2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold2);
    font-size:30px;
}

.value-item h3{
    color:var(--gold2);
    text-transform:uppercase;
    font-size:14px;
    line-height:1.3;
    margin:0 0 12px;
}

.value-item p{
    margin:0;
    font-size:12.5px;
    text-align:left;
    color:#eee7e2;
}

/* COMPROMISOS */
.commitments{
    background:var(--paper);
    padding:26px 0 34px;
}

.commit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.commit-item{
    text-align:center;
    padding:4px 34px 18px;
    border-right:1px solid #d7cec5;
}

.commit-item:last-child{
    border-right:0;
}

.commit-icon{
    width:70px;
    height:70px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(169,141,79,.45);
    border-radius:50%;
    color:var(--gold);
    background:#eee7db;
    font-size:30px;
}

.commit-item h3{
    color:#9a711f;
    text-transform:uppercase;
    font-size:14px;
    margin:0 0 12px;
}

.commit-item p{
    font-size:13px;
    margin:0;
}

.commit-note{
    text-align:center;
    margin-top:20px;
    font-size:14px;
}

.commit-note p{
    margin:0 0 2px;
}

.commit-note strong{
    color:#9a711f;
}

/* FOOTER */
.footer{
    color:#e9e4df;
    background:
        linear-gradient(rgba(17,17,16,.97),rgba(17,17,16,.97)),
        url("hero.jpg") center/cover;
    padding:26px 0 14px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.30fr .90fr .55fr .65fr;
    gap:38px;
    align-items:start;
}

.footer-col h3{
    margin:0 0 12px;
    color:var(--gold2);
    text-transform:uppercase;
    font-size:14px;
}

.footer-col p,
.footer-col a{
    display:block;
    margin:0 0 6px;
    font-size:12px;
    color:#e9e4df;
}

.footer-col a:hover{
    color:var(--gold2);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:20px;
    padding-top:12px;
    text-align:center;
    font-size:11px;
    color:#b8b0aa;
}


.social-col{
    text-align:left;
}

.social-links{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:12px;
}

.social-icon{
    width:46px;
    height:46px;
    border:1px solid var(--gold2);
    border-radius:50%;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.social-icon svg{
    width:22px;
    height:22px;
    fill:var(--gold2);
}

.social-icon:hover{
    background:var(--gold2);
    transform:translateY(-2px);
}

.social-icon:hover svg{
    fill:#18110f;
}

.social-note{
    margin-top:12px!important;
    color:#b8b0aa!important;
}


/* QR - POLÍTICAS DE PROTECCIÓN DE DATOS */
.qr-col{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.qr-col h3{
    width:100%;
    text-align:center;
}

.qr-link{
    display:block !important;
    margin:4px auto 8px !important;
}

.footer-qr{
    width:115px;
    height:115px;
    object-fit:contain;
    background:#fff;
    padding:5px;
    border-radius:4px;
    transition:transform .25s ease, box-shadow .25s ease;
}

.qr-link:hover .footer-qr{
    transform:scale(1.05);
    box-shadow:0 5px 18px rgba(197,169,95,.30);
}

.qr-text{
    margin:3px 0 0 !important;
    color:#b8b0aa !important;
    font-size:10px !important;
    line-height:1.35;
    text-align:center;
}

/* Botón flotante volver arriba */
.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:950;
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold);
    color:#17110f;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    font-size:24px;
    font-weight:700;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .25s, visibility .25s, transform .25s, background .25s;
}

.back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:var(--gold2);
}

/* RESPONSIVE */
@media (max-width:1050px){
    .nav{
        gap:22px;
        font-size:12px;
    }

    .values-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .value-item{
        border-right:0;
        border-bottom:1px solid rgba(197,169,95,.25);
        padding:20px;
    }

    .value-item:last-child{
        grid-column:1/-1;
        max-width:520px;
        justify-self:center;
    }
}

@media (max-width:850px){
    html{
        scroll-padding-top:68px;
    }

    .nav-container{
        min-height:68px;
    }

    .menu-btn{
        display:block;
        position:absolute;
        right:0;
    }

    .nav{
        display:none;
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:#1e1513;
        padding:18px 22px 24px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .nav.open{
        display:flex;
    }

    .nav > a,
    .dropdown-toggle{
        padding:13px 0;
        width:100%;
        text-align:left;
    }

    .nav > a::after,
    .dropdown-toggle::after{
        display:none;
    }

    .webmail-btn{
        margin-top:10px;
        text-align:center!important;
    }

    .dropdown-menu{
        position:static;
        width:100%;
        margin:4px 0 8px;
        box-shadow:none;
    }

    .hero{
        padding-top:68px;
        min-height:560px;
    }

    .hero-copy{
        margin-left:0;
        transform:none;
    }

    .hero-logo{
        width:380px;
    }

    .about-grid{
        grid-template-columns:1fr;
    }

    .info-card{
        border-right:0;
        border-bottom:1px solid #d7cec5;
        padding:26px 12px;
    }

    .info-card:last-child{
        border-bottom:0;
    }

    .commit-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .commit-item{
        border-bottom:1px solid #d7cec5;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:26px;
    }
}

@media (max-width:600px){
    .container{
        width:min(100% - 28px,1200px);
    }

    .hero{
        min-height:520px;
    }

    .hero-logo{
        width:315px;
    }

    .hero-line{
        margin-top:5px;
        margin-bottom:8px;
    }

    .hero-kicker{
        font-size:16px;
        letter-spacing:.09em;
    }

    .hero-text{
        font-size:14px;
    }

    .values-grid,
    .commit-grid{
        grid-template-columns:1fr;
    }

    .value-item:last-child{
        grid-column:auto;
    }

    .commit-item{
        border-right:0;
    }

    .section-title h2{
        font-size:25px;
    }
}


@media (max-width:850px){
    .social-col{
        text-align:left;
    }
}

@media (max-width:600px){
    .hero-copy{
        width:min(92%,520px);
    }

    .hero-kicker{
        font-size:15px;
    }

    .back-to-top{
        right:16px;
        bottom:16px;
        width:44px;
        height:44px;
    }
}


/* AJUSTES RESPONSIVE DEL FOOTER CON QR */
@media (max-width:850px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

    .qr-col,
    .social-col{
        text-align:left;
        align-items:flex-start;
    }

    .qr-col h3{
        text-align:left;
    }

    .qr-link{
        margin:4px 0 8px !important;
    }

    .qr-text{
        text-align:left;
    }
}

@media (max-width:600px){
    .footer-qr{
        width:105px;
        height:105px;
    }
}