/* ===== Base ===== */
:root{
  --ba-yellow:#FFD200;
  --ink:#111111;
  --text:#2a2a2a;
  --muted:#6f6f6f;
  --bg:#ffffff;
  --bg-alt:#F6F7F9;
  --accent:#2F80ED;
  --card:#fff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}

h1,h2,h3{color:var(--ink);line-height:1.2}
h1{font-size:clamp(1.9rem,3.5vw,2.6rem);margin:0 0 .5rem}
h2{font-size:clamp(1.5rem,2.2vw,1.9rem);margin:0 0 .75rem}
h3{font-size:1.15rem;margin:.25rem 0 .25rem}
p{margin:.25rem 0 1rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1rem;border-radius:999px;border:2px solid transparent;font-weight:700;transition:.2s}
.btn.primary{background:var(--ba-yellow);color:#000}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{border-color:#000;color:#000}
.btn.ghost:hover{background:#000;color:#fff}
.btn.tiny{padding:.35rem .7rem;border:1px solid #000}
.btn.pill{border:1px solid #cfd3dc;background:#fff}
.btn.pill:hover{box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:#000}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:.9rem}
.brand-mark{width:60px;height:auto;border-radius:100px;}
.site-nav{display:flex;gap:.6rem}
.site-nav a{padding:.5rem .65rem;border-radius:10px;color:#000}
.site-nav a:hover{background:var(--bg-alt)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:#000;margin:4px 0;border-radius:2px}

/* ===== HERO (mejor contraste + layout) ===== */
.hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78vh;
  color: #fff;
  padding: clamp(2.5rem, 6vw, 5rem) 0;

  /* fondo responsive */
  background-image: image-set(
    url("assets/hero_background.webp") type("image/webp"),
    url("assets/hero_background.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

/* overlay con degradé más fuerte del lado izquierdo (zona del texto) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.55) 35%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.15) 80%,
      rgba(0,0,0,0) 100%);
}

/* contenedor y columna */
.hero-inner{
  position: relative; /* sobre el overlay */
  z-index: 1;
  width: min(1120px, 92%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

/* tipografía y límites de línea */
.hero-copy{ max-width: 740px }
.hero-copy h1{
  color:#fff;
  margin: 0 0 .25rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}
.hero-copy p{ color:#EEF2F7 }

/* botones: buen contraste sobre foto */
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.3rem }
.btn.ghost{ border-color:#fff; color:#fff }
.btn.ghost:hover{ background:#fff; color:#000 }

/* ocultamos el badge del hero para no competir con el texto */
.hero-visual, .hero-badge{ display:none !important }

/* ===== Breakpoints ===== */
@media (max-width: 900px){
  .hero{ 
    min-height: 68vh;
    background-position: center 40%;
  }
  .hero::before{
    background: linear-gradient(180deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.25) 100%);
  }
  .hero-copy{ max-width: 100% }
}
@media (max-width: 560px){
  .hero{ min-height: 60vh; background-position:center 35% }
  .cta-row .btn{ width:100%; justify-content:center }
}



/* Sections */
.section{padding:clamp(2rem,5vw,3rem) 0}
.section.alt{background:var(--bg-alt)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem}
.eyebrow{margin:0;color:var(--muted);font-size:.95rem}

/* Layout helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cards{display:grid;gap:1.1rem;margin-top:1rem}
.cards.five{grid-template-columns:repeat(5,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}

/* Card */
.card{background:var(--card);border:1px solid #e9edf4;border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.card.highlight{border:2px solid var(--ba-yellow)}
.card.area{display:flex;flex-direction:column;justify-content:space-between}
.card .link{font-weight:700}

/* Lists */
.list-check{padding-left:1.2rem}
.list-bullets li{margin:.35rem 0}
.bullets{padding-left:1.2rem;margin:.6rem 0 1rem}
.bullets li{margin:.35rem 0}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.chip{padding:.6rem .9rem;border-radius:999px;border:1px dashed #c8cbd3;color:#6f7787}
.chip[aria-disabled="true"]{pointer-events:none}

/* Footer */
.site-footer{border-top:1px solid #eee;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}

/* Responsive */
@media (max-width: 1080px){
  .cards.five{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 820px){
  .hero-inner{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cards.five{grid-template-columns:repeat(2,1fr)}
  .cards.three{grid-template-columns:1fr}
}
@media (max-width:720px){
  .site-nav{display:none;position:absolute;top:60px;right:4%;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--shadow);flex-direction:column;padding:.5rem;width:min(92vw,340px)}
  .site-nav a{padding:.85rem;border-radius:10px}
  .nav-toggle{display:block}
  .cards.five{grid-template-columns:1fr}
}