:root{
  --gold:#D4AF37;
  --silver:#C0C0C0;
  --silver-light:#EEF1F6;
  --silver-bright:#F5F7FB;
  --ink:#111418; --white:#FFF;
  --mint:#BFEDE1; --mint-strong:#93E9BE;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--white);}

/* Layout base y respiro */
.container{max-width:1200px;margin:0 auto;padding:0 28px;}
.section{padding:88px 0;}              /* + espacio vertical */
.section h2{font-family:Outfit,Manrope,sans-serif;font-weight:800;color:#182230;margin:0 0 1.25rem}

/* Header simple */
.site-header{position:sticky;top:0;z-index:100;background:#ffffffcc;backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #e9eef3;}
.nav{display:flex;align-items:center;gap:1rem;min-height:76px;}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.logo{width:52px;height:52px;object-fit:contain}
.brand-title{font-family:Outfit,Manrope,sans-serif;font-weight:800;letter-spacing:.4px}
.brand-sub {
  color: #000000; /* negro */
  font-weight: 500; /* opcional, puedes ajustarlo */
}
.top-nav{display:flex;gap:1.1rem;margin-left:auto;align-items:center}
.top-nav a{color:#23303b;text-decoration:none;font-weight:700}
.btn{display:inline-block;padding:.95rem 1.35rem;border-radius:14px;text-decoration:none;font-weight:800;letter-spacing:.3px;transition:.2s ease}
.btn-ghost{background:transparent;border:2px solid #cfd8e3;color:#162433}

/* HERO amplio */
.hero{position:relative;overflow:hidden;padding:96px 0} /* + aire */
.hero-silver{background:linear-gradient(145deg,var(--silver-bright),var(--silver-light) 58%,#EAEFF5)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.slogan{font-family:Outfit,Manrope,sans-serif;font-weight:900;font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.15;margin:0 0 1.1rem}
.slogan .hl-1 {
  display: inline;
  font-size: 2rem;   /* más pequeño */
  color: #1b2b3a;    /* gris oscuro */
}

.slogan .hl-2 {
  display: inline;
  font-size: 2.6rem; /* más grande */
  color: #D4AF37;    /* dorado */
}

.lead{font-size:1.05rem;color:#344355;margin:0 0 1.4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 1.2rem}
.btn-whatsapp{background:var(--mint-strong);color:#083327;border:2px solid #63cfb1}
.btn-whatsapp:hover{filter:brightness(.95)}
.btn-secondary{background:#fff;border:2px solid #d8e1ea;color:#0f2e2b}
.btn-secondary:hover{background:#f7fafc}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.badge{background:#fff;border:1px solid #e4ebf3;color:#3a4b5a;border-radius:999px;padding:.44rem .8rem;font-weight:800;font-size:.88rem}
.hero-logo{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.12))}

/* Fondo de íconos más suave y grande */
.pattern{
  position:absolute;inset:0;
  background-image:url('pattern-realestate.svg');
  background-size:340px;            /* iconos más grandes */
  background-repeat:repeat;
  opacity:.07;                      /* MUCHO más suave */
  pointer-events:none;              /* no bloquea clics */
}

/* Cards y grids con más espacio */
.section-cards .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{background:#fff;border:1px solid #eef2f6;padding:1.4rem;border-radius:14px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.section-dark{background:#182230;color:#fff}
.section-dark h2{color:var(--gold)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.rates-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}

/* Footer */
.site-footer{background:#f6f9fc;padding:36px 0;text-align:center;font-size:.95rem;color:#596575}

/* Responsive */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero{padding:72px 0}
  .container{padding:0 22px}
  .section{padding:72px 0}
  .section-cards .cards{grid-template-columns:1fr 1fr}
  .grid-2,.rates-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .section-cards .cards{grid-template-columns:1fr}
  .btn{padding:.9rem 1.15rem}
}
/* Steps bonitos */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.step{padding:1.6rem 1.4rem;border-radius:16px;border:1px solid #e9eef5;box-shadow:0 6px 24px rgba(2,8,20,.04);text-align:center}
.step h3{margin:.8rem 0 .4rem;font-size:1.25rem}
.step p{margin:0;color:#3b4654;font-size:1rem;line-height:1.5}
.step-icon{width:72px;height:72px;margin:0 auto .8rem;border-radius:16px;display:grid;place-items:center;font-size:34px;font-weight:700;color:#0f2e2b}

/* colores distintos por tarjeta */
.step.c1 .step-icon{background:#E7F7FF;border:1px solid #cfefff}
.step.c2 .step-icon{background:#FFF4DF;border:1px solid #ffe3b3}
.step.c3 .step-icon{background:#EAF5FF;border:1px solid #d7eaff}
.step.c4 .step-icon{background:#E8FFF3;border:1px solid #c9f7e5}

/* responsive */
@media (max-width:1060px){.steps-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps-grid{grid-template-columns:1fr}}
/* Features más grandes y legibles */
.section-dark .grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;row-gap:1.4rem;
  max-width:1000px;margin-inline:auto;
}
.section-dark .grid-2 li{
  font-size:1.18rem;line-height:1.6;list-style:none;position:relative;padding-left:1.8rem
}
.section-dark .grid-2 li::before{
  content:"✓"; position:absolute; left:.2rem; top:.05rem;
  font-weight:900; color:#F2C94C; font-size:1.3rem;
}
.section-dark h2{font-size:2rem;margin-bottom:1.2rem}
/* grid para tasas */
.pro-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:1060px){.pro-grid{grid-template-columns:1fr}}

/* tarjetas elevadas */
.card-elev{
  background:#fff;border:1px solid #e8eef5;border-radius:18px;
  padding:22px 22px;border-radius:18px;
  box-shadow:0 10px 34px rgba(2,8,20,.06);
}
.card-title{margin:.2rem 0 1rem;font-size:1.25rem}
.ref-list{padding-left:1.1rem;margin:0 0 .6rem}
.ref-list li{margin:.25rem 0;font-size:1.02rem}

/* inputs modernos */
.input-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem}
.input-group > span{font-weight:700;color:#2a3847;font-size:.92rem}
.input{
  width:100%;height:48px;border:1.6px solid #dfe7f1;border-radius:12px;
  padding:0 14px;font-weight:700;background:#fff;color:#12202e;
}
.input:focus{
  outline:none;border-color:#7dd3bf; box-shadow:0 0 0 4px rgba(125,211,191,.18);
}

/* acción y resultado */
.calc-actions{margin-top:.6rem}
.btn-primary{background:#0f766e;color:#fff;border:2px solid #0a5e58}
.btn-primary:hover{filter:brightness(.98)}
.result-box{
  margin-top:1rem;background:#f8fffc;border:1px solid #cfeee4;color:#0c3d36;
  padding:14px;border-radius:12px;font-weight:700
}
/* armonizar títulos/separaciones */
#tasas h2{margin-bottom:1.25rem}
/* Espaciado extra y fondo más suave */
.section {
  padding: 88px 0;   /* más aire entre secciones */
}

.hero {
  padding: 96px 0;   /* más aire arriba/bajo el eslogan */
}

.pattern {
  opacity: .07;          /* fondo mucho más sutil */
  background-size: 340px; /* iconos más grandes y espaciados */
  pointer-events: none;   /* no interfiere al hacer clic */
}
/* ---- Sección Ventajas ---- */
.ventajas {
  text-align: center;
  padding: 80px 20px;
}

.ventajas-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 2.5rem;
  text-transform: uppercase;
}

.ventajas-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 1.8rem 3rem;
  max-width: 900px;
  justify-content: center;
}

.ventajas-list li {
  font-size: 1.3rem;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.ventajas-list .check {
  color: var(--gold); /* ✔ dorado */
  font-size: 1.4rem;
  font-weight: bold;
}
/* Sección Calculadora Rápida */
.calc-form label {
  font-size: 1.2rem;   /* más grande */
  font-weight: 600;
}

.calc-form input {
  font-size: 1.25rem;   /* números claramente más grandes */
  padding: 12px 14px;   /* espacio interno cómodo */
}

.calc-form button {
  font-size: 1.1rem;    
  padding: 14px 20px;
}

/* Título de la calculadora */
.calc-calc h3 {
  text-transform: uppercase;      /* todo en mayúscula */
  font-size: 1.6rem;              /* un poco más grande */
  font-weight: 800;               /* fuerte y visible */
  color: #2ecc71;                 /* verde dólar */
}
/* Botón de la calculadora */
.calc-calc button {
  background-color: #2ecc71;   /* verde dólar */
  border: none;
  color: #fff;
  font-size: 1.1rem;          /* un poco más grande */
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.calc-calc button:hover {
  background-color: #27ae60;  /* tono más oscuro al pasar el mouse */
}
/* ===== Calculadora (correcciones de selectores) ===== */

/* TÍTULO en mayúsculas + verde dólar */
.card-elev .card-title{
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 800;
  color: #2ecc71; /* verde dólar */
  margin-bottom: 1rem;
}

/* Labels y números más grandes */
.calc-form label{
  font-size: 1.2rem;
  font-weight: 600;
}

.calc-form .input,
.calc-form input{
  font-size: 1.25rem;   /* números más grandes */
  padding: 12px 14px;
}

/* Botón en verde dólar coherente */
.btn-primary{
  background-color: #2ecc71;   /* verde dólar */
  border: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .25s ease;
}

.btn-primary:hover{
  background-color: #27ae60;   /* más oscuro al hover */
}

/* Borde input al enfocar en verde dólar (opcional chévere) */
.calc-form .input:focus,
.calc-form input:focus{
  outline: none;
  border-color: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46,204,113,.18);
}
/* ====== TITULAR DE SECCIÓN ====== */
#tasas h2{
  text-transform: uppercase;          /* TASAS Y CALCULADORA en MAYÚSCULAS */
}

/* ====== TÍTULOS DE LAS TARJETAS ======
   Quitamos reglas anteriores y definimos cada una como pides  */
.card-elev .card-title{
  text-transform: none;               /* por defecto normal */
  color: #1b2b3a;                     /* color “ink” / negro azulado */
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

/* Títulos de la sección "Tasas y Calculadora" */
.calc-card h3,
.calc-calc h3 {
  text-transform: uppercase;   /* todo en MAYÚSCULAS */
  font-size: 1.6rem;           /* tamaño uniforme */
  font-weight: 800;            /* más fuerte */
  color: #2ecc71;              /* verde dólar */
  margin-bottom: 1rem;
}

/* ====== TEXTOS MÁS GRANDES EN LA CALCULADORA ====== */
.calc-form .input-group > span{
  font-size: 1.25rem;                 /* Monto / Interés mensual / Meses */
  font-weight: 700;
}

.calc-form .input,
.calc-form input{
  font-size: 1.25rem;                 /* números más grandes */
  padding: 12px 14px;
}

/* Botón verde dólar coherente */
.btn-primary{
  background-color:#2ecc71; border:none; color:#fff;
  font-size:1.1rem; font-weight:700; padding:12px 28px;
  border-radius:10px; cursor:pointer; transition:background .25s ease;
}
.btn-primary:hover{ background:#27ae60; }

/* Enfoque de inputs en verde dólar (detalle pro) */
.calc-form .input:focus,
.calc-form input:focus{
  outline:none; border-color:#2ecc71; box-shadow:0 0 0 4px rgba(46,204,113,.18);
}
/* === Forzar estilo de títulos en la sección TASAS Y CALCULADORA === */
/* Aplica a los h3 de las dos tarjetas (Referencia / Calculadora rápida) */
#tasas .card-elev > h3,
.rates-grid .card-elev > h3,
.card-elev .card-title {
  text-transform: uppercase !important;  /* TODO EN MAYÚSCULAS */
  color: #2ecc71 !important;             /* verde dólar */
  font-weight: 800;
  margin-bottom: 1rem;
}