:root{
  --bg:#0b3e3a;
  --ink:#eef7f3;
  --muted:#cde6dd;
  --accent:#19e28b;
  --card:#0e4641cc;
  --line:rgba(255,255,255,.12);
  --shadow: 0 20px 40px rgba(0,0,0,.25);
  --radius: 18px; --radius-lg: 28px; --max: 1180px;
}

/* Lovelo local (asegurate de tener /fonts) */
@font-face{ font-family:'Lovelo'; src:url('../fonts/lovelo_black.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Marcellus', serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, #135b54 0%, var(--bg) 60%),
    radial-gradient(1400px 900px at 110% 10%, #0c4944 0%, var(--bg) 50%);
  background-attachment:fixed;
  line-height:1.55
}
h1,h2,h3{ font-family:'Lovelo', system-ui, sans-serif; letter-spacing:.5px }
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{ width:min(100% - 32px, var(--max)); margin-inline:auto; }

/* Header */
header{position:sticky; top:0; z-index:100; backdrop-filter: blur(10px); background:linear-gradient(180deg, rgba(11,62,58,.9), rgba(11,62,58,.55)); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
.logo-img{height:36px; width:auto; display:block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));}
.nav a.btn{ padding:10px 16px; border:1px solid var(--line); border-radius:12px; }
.nav a.btn:hover{ border-color: rgba(255,255,255,.35); }

/* Menú móvil */
.menu-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; position:relative }
.menu-toggle .bar{ position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease }
.menu-toggle .bar:nth-child(1){ top:13px }
.menu-toggle .bar:nth-child(2){ top:21px }
.menu-toggle .bar:nth-child(3){ top:29px }
.menu-toggle.open .bar:nth-child(1){ transform: translateY(8px) rotate(45deg) }
.menu-toggle.open .bar:nth-child(2){ opacity:0 }
.menu-toggle.open .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg) }

.mobile-menu{
  display:block;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(11,62,58,.92), rgba(11,62,58,.8));
  overflow:hidden;
  max-height:0;
  opacity:.0;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .35s ease, transform .35s ease;
}
.mobile-menu a{
  display:block; padding:14px 16px; border-bottom:1px solid var(--line);
}
.mobile-menu.open{
  max-height:480px;
  opacity:1;
  transform:none;
}
.mobile-menu[hidden]{ display:block } /* para permitir transiciones aunque tenga hidden */

/* Ocultar nav-links en mobile / mostrar hamburguesa */
@media (max-width:980px){
  .nav-links{ display:none }
  .menu-toggle{ display:block }
}

/* Hero */
.hero{ position:relative; padding:90px 0 60px; overflow:hidden; }
.hero:before{ content:""; position:absolute; inset:0; background-image: radial-gradient(600px 300px at 80% 20%, rgba(25,226,139,.18), transparent 60%), radial-gradient(800px 400px at 20% 80%, rgba(255,255,255,.08), transparent 60%); pointer-events:none }
.hero-wrap{ display:grid; gap:28px; align-items:center; grid-template-columns: 1.2fr .8fr; }
.hero h1{ font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:0; }
.hero p{ color:var(--muted); margin:10px 0 22px; font-size: clamp(16px, 2.4vw, 18px); }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{ background:linear-gradient(135deg, var(--accent), #8df5c6); color:#07332f; font-weight:700; padding:14px 18px; border-radius:14px; box-shadow: var(--shadow) }
.btn-ghost{ border:1px solid rgba(255,255,255,.2); padding:14px 18px; border-radius:14px }
.hero-card{ background:var(--card); border:1px solid var(--line); padding:16px; border-radius:var(--radius-lg); box-shadow:var(--shadow) }
.hero-card figure{ position:relative; overflow:hidden; border-radius:var(--radius); background:#08332f }
.hero-card img{ width:100%; object-fit:cover }
.badge{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:12px }

/* Sections */
.section{ padding:72px 0; }
.section h2{ font-size: clamp(28px, 4.5vw, 44px); margin:0 0 12px; }
.section p.lead{ color:var(--muted); margin:0 0 28px; }

/* Cards */
.grid{ display:grid; gap:24px; }
.cards{ grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); transition: transform .25s ease, box-shadow .25s ease }
.card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px rgba(0,0,0,.35) }
.card figure{ border-radius:var(--radius); overflow:hidden; background:#0b3c38 }

/* Programas */
.program{ display:grid; gap:18px; grid-template-columns: 1fr 1fr 1fr 1fr; }
.program .mod{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.mod h3{ margin:0 0 10px }
.mod p{ color:var(--muted); margin:0 }
.sep{ height:1px; background:var(--line); margin:18px 0 }

/* Nosotros */
.about{ display:grid; gap:28px; grid-template-columns: 1.1fr .9fr; align-items:start }

/* Tool */
.tool{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; background:rgba(255,255,255,.03) }
.tool .muted{ color:var(--muted) }

/* Carousel (más compacto y centrado) */
.carousel{ position:relative; user-select:none; }
.car-viewport{
  overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#0b3c38;
  max-width:900px; margin:0 auto; /* achica y centra */
}
.car-track{ display:flex; transition: transform .45s ease; will-change: transform; }
.car-slide{ flex:0 0 100%; }
.car-slide img{ width:100%; height:auto; display:block; }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; }
.car-prev{ left:10px; } .car-next{ right:10px; }
.car-btn:hover{ background:rgba(255,255,255,.3); }
.car-dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.car-dots button{ width:8px; height:8px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer; }
.car-dots button.active{ background:#fff; }

/* Contacto simplificado + mapa */
.contact-grid{
  display:grid; gap:24px; grid-template-columns: 1.1fr .9fr; align-items:start;
}
.contact-buttons a{ min-width: 140px; text-align:center }
.map-embed iframe{ height:320px } /* desktop */

@media (max-width:980px){
  .hero-wrap, .about{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr } /* contacto arriba, mapa abajo */
  .map-embed iframe{ height:220px } /* mapa más chico en mobile */
}

/* Footer con redes visibles */
footer{ padding:28px 0 48px; border-top:1px solid var(--line); color:var(--muted) }
.footer-flex{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.social{ display:flex; gap:10px; flex-wrap:wrap; }
.social-btn{
  display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink); background:rgba(255,255,255,.04);
}
.social-btn:hover{ border-color: rgba(255,255,255,.35); }

/* Animaciones reveal */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.on{ opacity:1; transform:none; transition: all .7s ease; }

/* WhatsApp flotante */
.wa{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#05302b; font-weight:900; box-shadow:var(--shadow) }

/* Responsive extras */
@media (max-width:1240px){ .program{ grid-template-columns: 1fr 1fr } }
@media (max-width:860px){ .program{ grid-template-columns: 1fr } }

/* Centrar los botones de contacto */
.contact-card { text-align: center; }

.contact-buttons{
  justify-content: center;   /* centra el grupo de botones */
  gap: 12px;                 /* separa un poco los botones */
}

.contact-buttons a{
  min-width: 160px;          /* opcional: mismo ancho visual */
}