/* ===== Base ===== */
:root{
  --bg:#0b1624;
  --ink:#e6e9ef;
  --muted:#a6b0c3;
  --brand:#d5b06d; /* dorado sobrio */
  --card:#111a2a;
  --line:rgba(255,255,255,.08);
  --ring:rgba(213,176,109,.4);
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 60% -10%, rgba(213,176,109,.09), transparent 45%),
              radial-gradient(900px 600px at -10% 20%, rgba(213,176,109,.06), transparent 60%),
              var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4{font-family:Merriweather, Georgia, 'Times New Roman', serif; margin:0 0 .5rem}
h1{font-size:clamp(2rem,3vw,3rem); line-height:1.1}
h2{font-size:clamp(1.6rem,2.2vw,2.4rem)}
h3{font-size:1.2rem}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.btn{
  display:inline-block;
  padding:.85rem 1.15rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid var(--line);
  transition:.25s ease;
}
.btn.primary{background:var(--brand); color:#0b0f17; border-color:transparent}
.btn.ghost{color:var(--ink); background:transparent}
.btn:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* ===== Header ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg, rgba(11,22,36,.9), rgba(11,22,36,.7));
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand-title{font-weight:800; letter-spacing:.3px}
.brand-sub{font-size:.85rem; color:var(--muted)}
.nav-actions{display:flex; gap:10px}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:48px 20px 24px}
.hero-text .tagline{color:var(--muted); margin:.25rem 0 1rem}
.grados{margin:0 0 1rem; padding-left:1.1rem}
.grados li{margin:.2rem 0}
.hero-ctas{display:flex; gap:10px; margin:1rem 0 1.25rem}

.meta{display:flex; gap:22px; flex-wrap:wrap}
.meta-item{display:flex; flex-direction:column; align-items:flex-start}
.meta-kpi{font-weight:800; font-size:1.7rem; color:var(--brand)}
.meta-label{color:var(--muted); font-size:.9rem}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center}
.portrait{
  width:100%; max-width:360px; border-radius:16px; box-shadow: var(--shadow);
  border:1px solid var(--line); object-fit:cover;
  background:#0d1626;
}
.seal{position:absolute; right:-30px; top:-30px; width:170px; height:170px}
.seal.big{position:relative; width:260px; height:260px}
.seal-svg{width:100%; height:100%}
.seal-ring{fill:none; stroke:var(--ring); stroke-width:2}
.seal-text{
  font: 600 16px/1 Inter, system-ui; letter-spacing:3px; text-transform:uppercase;
  fill: var(--brand);
}
.seal-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52%; height:auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
}

@keyframes spin {
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ===== Sections ===== */
.section{padding:64px 0; border-top:1px solid var(--line)}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}
.section-head{max-width:840px; margin:0 auto 28px; text-align:center}
.section-head p{color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card p{color:var(--muted); margin:.5rem 0 0}

/* ===== Sabías que ===== */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.fact{
  background:rgba(255,255,255,.02); border:1px dashed var(--line); border-radius:var(--radius);
  padding:18px; position:relative;
}
.fact h4{margin:.25rem 0 .35rem}
.fact p{color:var(--muted); margin:0}
.badge{
  position:absolute; top:-12px; left:-12px; background:var(--brand); color:#0b0f17;
  border-radius:999px; width:28px; height:28px; display:grid; place-items:center;
  font-weight:900; box-shadow:0 6px 14px rgba(213,176,109,.35)
}

/* ===== Reviews ===== */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.review{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.review blockquote{margin:.5rem 0; color:var(--ink)}
.stars{color:var(--brand); letter-spacing:2px}

/* ===== Contacto ===== */
.contacto{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.contact-list{list-style:none; padding:0; margin:0 0 16px}
.cta-row{display:flex; gap:10px}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line); padding:22px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer small{color:var(--muted)}
.footer-logos img{height:30px; opacity:.4; mix-blend:screen; margin-left:8px}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:20px}
  .hero-visual{order:-1}
  .cards, .grid, .reviews, .contacto{grid-template-columns:1fr}
  .portrait{max-width:260px} /* más pequeña en móvil */
  /* Botones en columna y full width */
  .hero-ctas{flex-direction:column; align-items:stretch}
  .hero-ctas .btn{width:100%; text-align:center}
  /* Sello más compacto en móvil */
  .seal{width:140px; height:140px; right:-6px; top:-6px}
}