:root{
      --primary:#6622CF; /* Morado */
      --accent:#00CCFE;  /* Azul */
      --sun:#FFD24C;     /* Amarillo */
      --ink:#111111;
      --ink-2:#2B2B2B;
      --muted:#6B7280;
      --bg:#0E0E10;      /* fondo profundo y limpio */
      --card:#151518;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:#EDEDEE;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

    /* --- XS overflow fixes --- */
    html, body { overflow-x: hidden; }
    .btn { min-width: 0; }
    .nav__menu { gap: 8px; }
    .footgrid, .trust, .nav, .bottom-cta__row { overflow: hidden; }
    .hide-xs{display:inline}
    .show-xs{display:none}
    @media(max-width:400px){
      .btn{padding:10px 12px;font-size:14px}
      #ctaHeader{padding:10px 12px;font-size:14px}
      .bottom-cta__row{gap:8px}
      .bottom-cta .btn{padding:10px 8px;font-size:14px}
      .brand__name{display:none}
    }
    @media(max-width:360px){
      .nav .btn{font-size:13px}
    }

    /* Header */
    header{position:sticky;top:0;z-index:50;background:rgba(14,14,16,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{display:flex;align-items:center;gap:10px}
    .brand__logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 14px rgba(0,0,0,.35)}
    .brand__name{font-family:Mont, Inter;letter-spacing:.2px;font-weight:700}
    .nav__links{display:none;gap:18px}
    .nav__link{padding:10px 12px;border-radius:12px;transition:background .2s}
    .nav__link:hover{background:rgba(255,255,255,.06)}

    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:12px 18px;background:var(--primary);color:white;font-weight:600;box-shadow:var(--shadow);transition:transform .05s ease, box-shadow .2s}
    .btn:hover{transform:translateY(-1px)}
    .btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.14)}
    .btn--accent{background:var(--accent);color:#05242C}

    .nav__menu{display:inline-flex;gap:10px}
    .nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}

    @media(min-width:980px){
      .nav__links{display:flex}
      .nav__menu{display:none}
    }

    /* Hero */
    .hero{position:relative;padding:48px 0 24px;overflow:hidden}
    .hero__grid{display:grid;gap:28px}
    .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:999px;font-size:12px;color:#D7F6FF}
    .hero h1{font-family:Mont, Inter;font-size:34px;line-height:1.1;margin:10px 0}
    .hero p{color:#C8C9CF;font-size:16px}
    .hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
    .hero__art{position:relative}
    .hero__card{background:linear-gradient(180deg,#1A1A1F,#131318);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
    .hero__stars{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%, rgba(102,34,207,.35), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0,204,254,.25), transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(255,210,76,.2), transparent 50%);filter:blur(40px);opacity:.7;pointer-events:none}

    @media(min-width:980px){
      .hero{padding:72px 0 36px}
      .hero__grid{grid-template-columns:1.1fr .9fr;align-items:center}
      .hero h1{font-size:48px}
      .hero p{font-size:18px}
    }

    /* Trust bar */
    .trust{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;padding:18px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:#101014}
    .trust img{height:28px;opacity:.8}

    /* Section utility */
    section{padding:54px 0}
    .section__title{font-family:Mont, Inter;font-size:26px;margin:0 0 14px}
    .section__lead{color:#C8C9CF;max-width:720px}

    /* Value props */
    .grid-3{display:grid;gap:14px}
    @media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
    .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
    .k-icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--sun),var(--accent));display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}

    /* Cursos */
    .courses__grid{display:grid;gap:14px}
    @media(min-width:760px){.courses__grid{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1100px){.courses__grid{grid-template-columns:repeat(3,1fr)}}
    .course{display:flex;flex-direction:column;gap:12px}
    
    /* Media de cursos en formato cuadrado */
.course__media{
  /* Quita la altura fija que tenías: height: 180px; */
  aspect-ratio: 1 / 1;      /* cuadrado automático según el ancho */
  height: auto;             /* deja que crezca con el grid */
  border-radius: 14px;
  overflow: hidden;
  background: #0D0D11;
  border: 1px solid rgba(255,255,255,.08);
}

/* Asegura el recorte centrado de imagen/video */
.course__media img,
.course__media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}









    .pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;color:#D8DCEF;font-size:12px}
    .course__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}

    /* Galería */
    .gallery__lead{color:#C8C9CF;max-width:720px}
    .gallery__grid{display:grid;gap:10px;margin-top:24px}
    @media(min-width:600px){.gallery__grid{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1000px){.gallery__grid{grid-template-columns:repeat(3,1fr)}}

    .gallery__item {
  /* Asegura el “marco” fijo */
  height: 200px;            /* ajusta si quieres */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #0D0D11;
}

.gallery__item button{
  all: unset;
  display: block;           /* ocupa todo el ancho */
  width: 100%;
  height: 100%;             /* ocupa todo el alto del marco */
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none; /* Safari/iOS */
}

/* La imagen/video debe rellenar y centrarse */
.gallery__item img,
.gallery__item video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* rellena sin deformar */
  object-position: center;  /* centrada */
}


  /* Opcional: ajusta altura según breakpoint para mejor proporción */
@media (min-width: 600px) and (max-width: 999px) {
  .gallery__item { height: 220px; }
}
@media (min-width: 1000px) {
  .gallery__item { height: 240px; }
}
    


    .lightbox{border:none;border-radius:16px;padding:0;max-width:min(95vw,1100px);background:transparent}
    .lightbox__inner{position:relative}
    .lightbox__img{width:100%;height:auto;display:block;border-radius:16px}
    .lightbox__close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}

    /* Metodología */
    .steps{display:grid;gap:14px}
    @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
    .step{position:relative;padding-top:6px}
    .step::after{content:"";position:absolute;top:0;left:0;width:24px;height:3px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:8px}

    /* Planes */
    .plans{display:grid;gap:14px}
    @media(min-width:900px){.plans{grid-template-columns:1fr 1fr}}
    .plan__price{font-size:28px;font-weight:800}
    .note{color:#AEB0B6;font-size:14px}
    .list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
    .list li{display:flex;gap:8px;align-items:flex-start}

    /* Testimonios */
    .testis{display:grid;gap:14px}
    @media(min-width:900px){.testis{grid-template-columns:repeat(3,1fr)}}
    .quote{font-style:italic;color:#D7DAE2}

    /* FAQ */
    details{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
    summary{cursor:pointer;font-weight:600}
    details p{color:#C7C9D0}

    /* CTA bar bottom mobile */
    .bottom-cta{position:sticky;bottom:0;z-index:40;background:rgba(14,14,16,.75);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08)}
    .bottom-cta__row{display:flex;gap:10px;padding:10px}
    .bottom-cta .btn{flex:1}

    /* Footer */
    footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.08);color:#B8BAC2}
    .footgrid{display:grid;gap:18px}
    @media(min-width:900px){.footgrid{grid-template-columns:2fr 1fr 1fr}}

    /* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .mt-6{margin-top:24px}
    .mt-10{margin-top:40px}
    .center{text-align:center}
    .accent{color:var(--accent)}
    .sun{color:var(--sun)}



    /* XS tweaks para iPhone 13 (~390px) */
@media (max-width: 420px) {
  /* Cambia el label a "Demo" en pantallas pequeñas */
  .hide-xs { display: none !important; }
  .show-xs { display: inline !important; }

  /* Compacta el CTA del header y evita desbordes */
  #ctaHeader {
    padding: 10px 12px;
    font-size: 14px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Asegura que el grupo (toggle + CTA) no fuerce ancho extra */
  .nav__menu {
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav__menu .btn {
    min-width: 0;      /* ya lo tienes global, lo reforzamos aquí */
    max-width: 140px;  /* cinturón de seguridad extra */
  }
}


/* Bottom CTA compacto en móviles */
@media (max-width: 420px) {
  .bottom-cta {
    /* espacio seguro para iPhone (notch) */
    padding-bottom: max(env(safe-area-inset-bottom), 6px);
  }
  .bottom-cta__row {
    gap: 8px;              /* menor separación */
    padding: 8px 10px;     /* más compacto */
  }
  .bottom-cta .btn {
    min-width: 0;          /* permite encoger */
    padding: 10px 8px;
    font-size: 14px;
    white-space: nowrap;   /* evita salto de línea */
    overflow: hidden;      
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  .bottom-cta .btn { font-size: 13px; }
}

/* Ocultar header y drawer en móviles; visible en laptops/PC */
@media (max-width: 979px) {
  header { display: none !important; }
  #drawer { display: none !important; }
}




/* --- Formulario de agendar --- */
.form-card { margin-top: 12px; margin-bottom: 90px; } /* espacio por el bottom-cta */
.form-card form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 760px){ .grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; } }

.field label { display:block; font-weight:600; margin-bottom:6px; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"]{
  width:100%; padding:12px 14px; border-radius:12px;
  background:#0D0D11; color:#EDEDEE;
  border:1px solid rgba(255,255,255,.12);
}
.field input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,204,254,.15);
}

.segmented{
  display:flex; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); overflow:hidden;
}
.segmented input{ display:none; }
.segmented label{
  flex:1; text-align:center; padding:10px 12px; cursor:pointer;
}
.segmented input:checked + label{
  background:var(--accent); color:#05242C; font-weight:700;
}

.form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.error{ color:#FF6B6B; font-size:12px; min-height: 14px; display:block; }


/* Teléfono con selector de país (prefijo) */
.input-group.phone{
  display:flex; align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden; background:#0D0D11;
}
.input-group.phone .dial{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:rgba(255,255,255,.06);
  border:0; border-right:1px solid rgba(255,255,255,.1);
  color:#EDEDEE; padding:12px 12px; font-weight:600; white-space:nowrap;
}
.input-group.phone input{
  flex:1; border:0; background:transparent; color:#EDEDEE; padding:12px 14px;
}
.input-group.phone input:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,204,254,.15) inset; }
.input-group.phone .dial:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,204,254,.15); }

/* iOS: evita auto-zoom en inputs al foco forzando >=16px */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Solo en navegadores WebKit móviles (iOS) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea,
  .input-group.phone input,
  .input-group.phone .dial,
  .segmented label {
    font-size: 16px !important;
    line-height: 1.25;
  }
}