:root{
  --navy:#0E2B52;        /* azul del logo */
  --green:#2BC779;       /* verde del logo */
  --green-2:#42D39B;     /* gradiente */
  --gold:#F2C840;        /* dorado "VOCACIONAL" */
  --ink:#0b1324;
  --muted:#5b6b83;
  --bg:#f7fafc;
  --card:#ffffff;
  --ring: rgba(66,211,155,.45);
  --shadow:0 10px 30px rgba(12,42,79,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg); line-height:1.55;
}
a{color:var(--navy); text-decoration:none}
img{max-width:100%; height:auto;}
.container{width:min(1100px, 92%); margin:0 auto}

/* Header */
header{position:sticky; top:0; z-index:30; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.04)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; width:auto}
.brand .title{font-weight:700; letter-spacing:.5px; color:var(--navy)}
.menu{display:flex; align-items:center; gap:22px}
.menu a{font-weight:600}
.cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(90deg, var(--green), var(--green-2)); color:#00243f; font-weight:800; padding:10px 16px; border-radius:999px}
.hamb{display:none}

/* Hero */
.hero{position:relative; isolation:isolate; background:linear-gradient(135deg, #0E2B52 0%, #143863 50%, #0E2B52 100%);}    
.hero:before{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 80% 10%, rgba(66,211,155,.32) 0%, rgba(66,211,155,0) 55%)}
.hero .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:40px 0}
.hero h1{margin:0; font-size:clamp(28px, 4vw, 48px); color:#fff}
.hero p{color:#e9f2ff; font-size:clamp(16px, 2.2vw, 18px)}
.kicker{color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px}
.hero-card{background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:700; border:2px solid transparent}
.btn.primary{background:linear-gradient(90deg, var(--green), var(--green-2));}
.btn.secondary{background:#fff; border-color:#dbe4f0}
.btn.gold{background:var(--gold)}

@media (max-width: 900px){
  .hero .inner {
    padding: 24px 0 40px;
  }
}


/* Sections */
section{padding:10px 0}
h2.section-title{font-size:clamp(26px,3.2vw,34px); margin:0 0 18px}
.section-kicker{color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:.12em; font-size:12px}

/* Cards grid */
.grid{display:grid; gap:22px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; border:1px solid #eef3f8}
.price{display:inline-block; font-weight:800; color:#05315b; background:linear-gradient(90deg,#eef7ff,#f9fef6); border:1px solid #dbe9ff; padding:6px 10px; border-radius:999px}
.meta{color:var(--muted); font-weight:600}
.list{margin:14px 0 0 0; padding:0; list-style:none; display:grid; gap:10px}
.list li{display:grid; grid-template-columns:20px 1fr; gap:10px}
.badge{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px; color:#0b2a4e; background:rgba(242,200,64,.2); border:1px solid rgba(242,200,64,.45); padding:6px 10px; border-radius:999px}

/* Elite block */
.elite{background:linear-gradient(180deg,#ffffff 0%, #f3fbf7 100%)}
.elite .split{display:grid; grid-template-columns:1.05fr .95fr; gap:22px}
.marker{background:linear-gradient(90deg, var(--green), var(--green-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900}

/* FAQ */
details{background:#fff; border:1px solid #e6eef7; border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
summary{cursor:pointer; font-weight:700}

/* === Carrusel === */
.carousel{
  position: relative;
  background: var(--card);
  border: 1px solid #eef3f8;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 44px;        /* espacio para las flechas */
}

/* --- Galería mostrando la imagen completa --- */
.carousel.contain .car-viewport{
  /* la altura se define por JS según el slide activo */
  background:#000;              /* opcional: marco oscuro */
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
}

.carousel.contain .car-slide{
  min-width:100%;
  display:grid;
  place-items:center;           /* centra la imagen */
}

.carousel.contain .car-slide img {
  width: 100%;
  height: auto;
  max-height: 580px; /* o ajústalo según tu gusto */
  object-fit: contain;
  border-radius: calc(var(--radius) - 6px);
  margin: 0 auto;
}

.car-viewport{
  overflow: hidden;
  border-radius: calc(var(--radius) - 6px);
}

.car-track{
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}

.car-slide{
  min-width: 100%;
  user-select: none;
}

.car-slide img{
  display:block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;      /* asegura formato horizontal */
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
}

/* Flechas */
.car-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
  display: grid; place-items: center;
}
.car-btn.prev{ left: 10px; }
.car-btn.next{ right: 10px; }

/* Bullets */
.car-dots{
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding: 10px 0 4px;
}
.car-dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid #cfe0f5; background:#e9f2ff; cursor:pointer;
}
.car-dots button[aria-current="true"]{
  background: var(--green); border-color: var(--green-2);
}

/* Responsive ajustes */
@media (max-width: 640px){
  .carousel{ padding: 10px 40px; }
  .car-btn{ width:34px; height:34px; font-size:20px; }
}

/* Footer */
footer{background:#0E2B52; color:#cfe3ff}

/* Floating CTA */
.float{
  position:fixed; right:16px; bottom:16px; z-index:40;
  display:flex; gap:10px; flex-direction:column;
}
.float a{box-shadow:0 10px 25px rgba(0,0,0,.18)}

/* Responsive */
@media (max-width: 900px){
  .hero .inner{grid-template-columns:1fr; padding:56px 0}
  .grid.cols-2{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .elite .split{grid-template-columns:1fr}
  .menu{display:none}
  .hamb{display:inline-flex; background:#fff; border:1px solid #e7eef7; padding:10px 12px; border-radius:10px; font-weight:800}
  .menu.open{position:absolute; inset:60px 0 auto 0; display:grid; gap:14px; background:#fff; padding:16px; border-top:1px solid #eef2f7}
}
/* --- Video vertical responsivo 9:16 --- */
.video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;             /* asegura el formato vertical */
  background:#000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-wrap video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* se recorta sin deformar */
}

/* Opcional: estilos de sección de video */
.video-section .video-card{
  background: var(--card);
  border: 1px solid #eef3f8;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* En pantallas grandes, que el video no crezca demasiado */
@media (min-width: 1100px){
  .hero .video-wrap{ max-height: 680px; }
}