/* ==========================
   RESET
========================== */

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

/* ==========================
   VARIABLES
========================== */

:root{

    --navy:#0B1F3A;
    --gold:#C9A96E;

    --white:#FFFFFF;
    --light:#F8F8F8;

}

/* ==========================
   GENERALES
========================== */

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    color:#222;

    background:white;
}

.container{

    width:min(1200px,90%);
    margin:auto;
}

.container h2{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

section{

    padding:80px 0;
}

h1,h2,h3{

    font-family:'Playfair Display',serif;
}

h2{

    text-align:center;

    margin-bottom:50px;

    font-size:32px;

    color:#111;
}

/* ==========================
   HEADER
========================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: #0B1F3A;
}

.navbar{

    height:90px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-right: 30px;
    margin-left: 30px;
    border-bottom:1px solid rgba(255,255,255,.35);
}

/* ==========================
   LOGO
========================== */

.logo{

    display:flex;
    align-items:center;

    gap:15px;

    color:white;
}

.logo span{

    font-size:42px;

    font-family:'Playfair Display',serif;
}

.logo small{

    font-size:11px;

    letter-spacing:1px;
}

.logo h3{

    font-size:28px;

    font-weight:600;
}

/* ==========================
   MENU
========================== */

nav{

    display:flex;

    gap:30px;
}

nav a{

    color:white;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.3s;
}

nav a:hover{

    color:var(--gold);
}

/* ==========================
   BOTON NAVBAR
========================== */

.btn-nav{

    background:var(--gold);

    color:white;

    text-decoration:none;

    padding:12px 22px;

    border-radius:4px;

    font-size:12px;

    font-weight:600;

    transition:.3s;
}

.btn-nav:hover{

    opacity:.9;
}

/* ==========================
   HERO
========================== */

.hero {

    position: relative;

    min-height: 90vh;

    background:
        linear-gradient(
            rgba(0,0,0,.65),
            rgba(11,31,58,.85)
        ),
        url('assets/image1.jpeg');
    background-image:
        linear-gradient(rgba(0,0,0,.65), rgba(11,31,58,.85)),
        image-set(url('assets/hero.webp') type('image/webp'), url('assets/image1.jpeg') type('image/jpeg'));

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.hero-text h1{

    color:white;

    font-size:64px;

    line-height:1.1;

    margin-bottom:25px;
}

.hero-text p{

    color:rgba(255,255,255,.85);

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;
}

.hero-image img{

    width:100%;

    border-radius:8px;
}

/* ==========================
   BOTONES
========================== */

.btn-gold{

    display:inline-block;

    background:var(--gold);

    color:white;

    text-decoration:none;

    padding:14px 24px;

    border-radius:4px;

    font-size:14px;

    font-weight:600;

    transition:.3s;
}

.btn-gold:hover{

    transform:translateY(-2px);
}

/* ==========================
   AREAS
========================== */

.areas{
    background:white;
}

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.card{

    text-align:center;

    padding:25px;
}

.card h2{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.card h3{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom:12px;

    color:var(--navy);
}

.card p{

    color:#555;

    line-height:1.6;
}

/* ==========================
   POR QUE ELEGIRNOS
========================== */

.porque{

    background:var(--navy);

    color:white;
}

.porque h2{

    color:white;
}

.beneficios{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    text-align:center;
}

.beneficios h4{

    margin-bottom:10px;
}

.beneficios p{

    color:rgba(255,255,255,.85);
}

/* ==========================
   SOBRE EL ESTUDIO
========================== */

.estudio{

    background:white;
}

.estudio-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.estudio-grid img{

    width:100%;

    border-radius:8px;
}

.estudio p{

    margin-bottom:25px;

    line-height:1.8;

    color:#444;
}

/* ==========================
   FOOTER
========================== */

footer{

    background:var(--navy);

    color:white;

    padding:40px 0;
}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

.footer-grid h4{

    margin-bottom:10px;
}

.footer-grid p{

    color:rgba(255,255,255,.8);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

    .hero-grid,
    .estudio-grid{

        grid-template-columns:1fr;
    }

    .cards{

        grid-template-columns:1fr 1fr;
    }

    .beneficios{

        grid-template-columns:1fr 1fr;
    }

    .hero-text h1{

        font-size:48px;
    }
}

@media(max-width:600px){

    nav{

        display:none;
    }

    .cards,
    .beneficios{

        grid-template-columns:1fr;
    }

    .hero-text h1{

        font-size:38px;
    }
}

/* ==========================
   SEO / PÁGINAS INTERNAS
========================== */

main{ padding-top:90px; }
main > .hero:first-child{ margin-top:-90px; padding-top:90px; }

a.logo{ text-decoration:none; }
.logo-name{ font-family:'Playfair Display',serif; font-size:28px; font-weight:600; display:block; }

nav a[aria-current="page"]{ color:var(--gold); }

.menu-toggle{ display:none; width:28px; height:22px; position:relative; background:none; border:0; cursor:pointer; }
.menu-toggle span{ position:absolute; left:0; width:100%; height:3px; background:white; transition:.3s; }
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:9px; }
.menu-toggle span:nth-child(3){ top:18px; }
body.menu-open .menu-toggle span:nth-child(1){ transform:rotate(45deg); top:9px; }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ transform:rotate(-45deg); top:9px; }

.page{ padding:50px 0 70px; }
.page h1{ font-size:44px; color:var(--navy); line-height:1.15; margin-bottom:20px; }
.page h2{ font-size:26px; margin:50px 0 25px; }
.narrow{ max-width:820px; }
.page p{ line-height:1.8; color:#444; margin-bottom:16px; }
.lead{ font-size:19px; }
.center{ text-align:center; }
.h4{ font-family:'Inter',sans-serif; font-size:17px; margin-bottom:10px; }

.breadcrumbs{ font-size:13px; color:#777; margin-bottom:20px; }
.breadcrumbs a{ color:var(--navy); }

.card-link{ display:block; text-decoration:none; border:1px solid #eee; border-radius:8px; transition:.3s; }
.card-link:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 20px rgba(11,31,58,.08); }
.more{ font-size:13px; font-weight:600; color:var(--gold); }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.cards-2 .card{ text-align:left; border:1px solid #eee; border-radius:8px; }

.zonas{ background:var(--light); }
.zonas .center{ margin:-30px 0 25px; color:#555; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.page .chips{ justify-content:flex-start; }
.chip{ border:1px solid var(--navy); color:var(--navy); text-decoration:none; padding:8px 16px; border-radius:30px; font-size:14px; font-weight:500; transition:.3s; }
.chip:hover{ background:var(--navy); color:white; }

.faq details{ border-bottom:1px solid #e5e5e5; padding:16px 0; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--navy); }
.faq details p{ margin:10px 0 0; }

.beneficios.light{ margin-top:40px; text-align:left; grid-template-columns:repeat(3,1fr); }
.beneficios.light p{ color:#555; }

.cta{ background:var(--navy); text-align:center; }
.cta h2{ color:white !important; margin-bottom:15px; }
.cta p{ color:rgba(255,255,255,.85); margin-bottom:25px; }
.btn-outline{ display:inline-block; border:1px solid var(--gold); color:var(--gold); text-decoration:none; padding:13px 24px; border-radius:4px; font-size:14px; font-weight:600; margin:6px; }
.cta .btn-gold{ margin:6px; }

.contact-grid{ display:grid; grid-template-columns:3fr 2fr; gap:50px; }
.contact-grid form label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--navy); }
.contact-grid input, .contact-grid select, .contact-grid textarea{ width:100%; padding:12px; border:1px solid #ccc; border-radius:4px; font:inherit; }
.contact-grid button{ border:0; cursor:pointer; margin-top:10px; }
.contact-grid address{ font-style:normal; line-height:2.2; }
.contact-grid a{ color:var(--navy); }
.hidden-field{ position:absolute; left:-9999px; }
.small{ font-size:13px !important; color:#777 !important; margin-top:10px; }

footer h4{ color:var(--gold); }
footer a{ color:rgba(255,255,255,.85); text-decoration:none; }
footer a:hover{ color:white; }
footer p{ margin-bottom:6px; }
.footer-locs{ line-height:2; }
.footer-copy{ text-align:center; margin-top:30px; font-size:13px; color:rgba(255,255,255,.6) !important; }

@media(max-width:900px){
    .navbar{ margin:0 20px; }
    .btn-nav{ display:none; }
    .menu-toggle{ display:block; }
    nav{ display:none; position:absolute; top:90px; left:0; right:0; background:var(--navy); flex-direction:column; gap:0; padding:10px 0; }
    nav.open{ display:flex; }
    nav a{ padding:14px 24px; border-top:1px solid rgba(255,255,255,.1); }
    .cards-2, .beneficios.light, .contact-grid{ grid-template-columns:1fr; }
    .page h1{ font-size:34px; }
}

@media(max-width:600px){
    nav{ display:none; }
    nav.open{ display:flex; }
    .logo span{ font-size:32px; }
    .logo-name{ font-size:22px; }
}

.estudio-grid > *{ min-width:0; }
.estudio-grid img{ max-width:100%; height:auto; }

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