/* Asesores Rodríguez — landing multi-página (demo estilo "financiera")
   Tipografía: Fraunces (títulos, serif con carácter/confianza) + Inter (texto). */

:root{
  --marino:#0b2447;
  --marino-claro:#1a3a68;
  --dorado:#c9a227;
  --dorado-claro:#e8c766;
  --crema:#f6f7fb;
  --gris:#dde2ec;
  --texto:#33394a;
  --blanco:#ffffff;
  --negro:#0f1620;

  --font-heading:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  --radius:12px;
  --shadow:0 14px 34px rgba(11,36,71,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--texto);
  background:var(--blanco);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--font-heading); margin:0 0 .5em; line-height:1.2; color:var(--marino); font-weight:600;}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  font-weight:700; color:var(--dorado); margin-bottom:.6em; display:inline-block;
}
.section{padding:80px 0;}
.section-alt{background:var(--crema);}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9em 1.7em; border-radius:8px; font-weight:600;
  border:2px solid transparent; cursor:pointer; font-family:var(--font-body);
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
  font-size:.95rem;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--dorado); color:var(--marino);}
.btn-primary:hover{background:var(--dorado-claro);}
.btn-outline{border-color:var(--blanco); color:var(--blanco);}
.btn-outline-dark{border-color:var(--marino); color:var(--marino);}
.btn-small{padding:.65em 1.3em; font-size:.88rem;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--gris);
}
.header-inner{display:flex; align-items:center; gap:2em; padding:16px 0;}
.logo{display:flex; align-items:center; gap:.6em; font-family:var(--font-heading); font-weight:700; font-size:1.25rem; color:var(--marino);}
.logo-mark{
  width:36px; height:36px; border-radius:8px; background:var(--marino);
  display:flex; align-items:center; justify-content:center; color:var(--dorado); font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.main-nav{display:flex; gap:1.75em; margin-left:auto; font-weight:600; font-size:.95rem;}
.main-nav a{color:var(--texto); padding:.3em 0; border-bottom:2px solid transparent;}
.main-nav a:hover, .main-nav a.active{color:var(--marino); border-color:var(--dorado);}
.nav-toggle{display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; margin-left:auto;}

/* Hero */
.hero{padding:64px 0 90px; overflow:hidden;}
.hero-inner{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.1rem);}
.hero-sub{font-size:1.1rem; max-width:44ch; color:var(--texto);}
.hero-actions{display:flex; gap:1em; flex-wrap:wrap; margin-top:1.5em;}
.hero-img-wrap{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.hero-stats{display:flex; gap:2em; margin-top:2.5em; flex-wrap:wrap;}
.hero-stat strong{display:block; font-family:var(--font-heading); font-size:1.6rem; color:var(--marino);}
.hero-stat span{font-size:.85rem; color:var(--texto);}

/* Page header (páginas internas) */
.page-header{background:var(--marino); color:var(--blanco); padding:64px 0 56px; text-align:center;}
.page-header .eyebrow{color:var(--dorado-claro);}
.page-header h1{color:var(--blanco); margin-bottom:.3em;}
.page-header p{color:rgba(255,255,255,.8); max-width:52ch; margin:0 auto;}

/* Cards */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:24px;}
.card{
  padding:32px 28px; border-radius:var(--radius); border:1px solid var(--gris);
  background:var(--blanco); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .icon{
  width:48px; height:48px; border-radius:10px; background:rgba(201,162,39,.14);
  color:var(--dorado); display:flex; align-items:center; justify-content:center; margin-bottom:1em;
}
.card h3{font-size:1.15rem;}
.card p{font-size:.94rem; margin-bottom:1.2em;}

/* Producto detallado */
.producto-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:80px;}
.producto-row:last-child{margin-bottom:0;}
.producto-row.invertido{direction:rtl;}
.producto-row.invertido > *{direction:ltr;}
.producto-row img{border-radius:var(--radius); box-shadow:var(--shadow);}
.producto-lista{margin:1.2em 0; display:flex; flex-direction:column; gap:.6em;}
.producto-lista li{display:flex; gap:.6em; align-items:flex-start; font-size:.94rem; list-style:none;}
.producto-lista svg{color:var(--dorado); flex-shrink:0; margin-top:.15em;}

/* Por qué elegirnos / valores */
.valores-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; text-align:center;}
.valor .icon{
  width:56px; height:56px; border-radius:50%; background:rgba(11,36,71,.06); color:var(--marino);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1em;
}

/* Equipo / Nosotros */
.nosotros-row{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;}
.nosotros-row img{border-radius:var(--radius); box-shadow:var(--shadow);}

/* CTA banner */
.cta-banner{background:var(--marino); color:var(--blanco); text-align:center; padding:70px 0;}
.cta-banner h2{color:var(--blanco);}
.cta-banner p{color:rgba(255,255,255,.82); max-width:50ch; margin:0 auto 1.6em;}

/* Formulario de contacto */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.form-group{margin-bottom:1.1em;}
.form-group label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.4em; color:var(--marino);}
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:.75em .9em; border:1px solid var(--gris); border-radius:8px;
  font-family:var(--font-body); font-size:.95rem; background:var(--crema);
}
.form-group textarea{resize:vertical; min-height:110px;}
.contacto-info{display:flex; flex-direction:column; gap:1.3em;}
.contacto-item{display:flex; gap:1em; align-items:flex-start;}
.contacto-item .icon{
  width:44px; height:44px; border-radius:10px; background:rgba(201,162,39,.14); color:var(--dorado);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contacto-item h4{margin:0 0 .2em; font-size:1rem; color:var(--marino);}
.contacto-item p{margin:0; font-size:.9rem;}

/* Footer */
.site-footer{background:var(--negro); color:rgba(255,255,255,.72); padding:56px 0 24px; font-size:.9rem;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-brand{color:var(--blanco); font-family:var(--font-heading); font-size:1.2rem; margin-bottom:.6em;}
.site-footer h5{color:var(--blanco); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1em;}
.site-footer a{display:block; margin-bottom:.6em; color:rgba(255,255,255,.72);}
.site-footer a:hover{color:var(--dorado-claro);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5em; font-size:.8rem; color:rgba(255,255,255,.5);}

/* Demo watermark */
.demo-note{background:var(--dorado-claro); color:var(--negro); text-align:center; font-size:.82rem; padding:.6em; font-weight:600;}

/* WhatsApp flotante */
.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:60;
}

@media (max-width:900px){
  .hero-inner, .producto-row, .producto-row.invertido, .nosotros-row, .contacto-grid{
    grid-template-columns:1fr; direction:ltr;
  }
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--blanco); flex-direction:column; padding:2em;
    transform:translateX(100%); transition:transform .2s ease; gap:1.2em;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .header-inner .btn-small{display:none;}
  .footer-grid{grid-template-columns:1fr;}
}