@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#ffffff; --bg2:#faf8f2; --card:#ffffff; --card2:#f5f2e8;
  --navy:#2c3154; --navy-soft:#565c86;
  --accent:#e8bc4e;  /* dorado - cabello */
  --accent2:#3fae74; /* verde - cola */
  --accent3:#d9555c; /* rojo - corbata/ojos */
  --brown:#a8682f;   /* café - zapatos */
  --text:#252a45; --muted:#6d7296;
  --border:#e9e5d8; --btn-text:#241a08;
  --font-head:'Fredoka', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth; scroll-padding-top:calc(76px + var(--safe-t))}
body{
  margin:0; font-family:var(--font-body);
  background:var(--bg); color:var(--text); line-height:1.6; -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
}
h1,h2,h3,.logo,.btn,.btn-outline,nav a,.badge,.price-amount,.stat b{ font-family:var(--font-head); }

/* ---------- Animaciones ---------- */
@keyframes fadeInUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)} 50%{box-shadow:0 0 14px currentColor}}

/* ---------- Header ---------- */
/* ---------- Gate: elegir tutoría o Artifact ---------- */
.site-hidden{display:none !important}
#gate{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:calc(6vh + var(--safe-t)) 6vw calc(6vh + var(--safe-b)); background:var(--bg);
}
.gate-inner{max-width:640px; width:100%; text-align:center; animation:fadeInUp .5s ease both}
.gate-logo{font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--navy); margin:0 0 44px}
.gate-logo span{color:var(--accent2)}
.gate-lema{font-family:var(--font-head); font-style:italic; color:var(--accent2); margin:-6px 0 14px; font-size:1.05rem}
#gate h1{
  font-family:var(--font-head); font-weight:700; font-size:2.1rem; line-height:1.18;
  letter-spacing:-0.01em; color:var(--navy); margin:0 0 44px;
}
.gate-options{display:grid; gap:14px}
@media (min-width:640px){ .gate-options{grid-template-columns:1fr 1fr} }
.gate-option{
  text-align:left; background:none; border:1.5px solid var(--border); border-radius:14px; padding:22px;
  cursor:pointer; font-family:var(--font-body); transition:border-color .15s ease, transform .15s ease;
  min-height:44px;
}
.gate-option:hover{border-color:var(--accent2); transform:translateY(-2px)}
.gate-option:active{transform:translateY(0) scale(.99)}
.gate-option h2{font-family:var(--font-head); font-size:1.08rem; color:var(--navy); margin:0 0 8px; font-weight:600}
.gate-option p{color:var(--muted); font-size:.87rem; margin:0; line-height:1.5}

.gate-form{max-width:440px; margin:0 auto; text-align:left; display:grid; gap:12px}
.gate-form:not([hidden]){animation:fadeInUp .4s ease both}
.gate-form h2{font-family:var(--font-head); font-size:1.25rem; color:var(--navy); margin:6px 0 2px; text-align:center}
.gate-back{
  background:none; border:none; color:var(--muted); font-size:.85rem; cursor:pointer; padding:8px 0;
  text-align:left; font-family:var(--font-body); justify-self:start; min-height:44px;
}
.gate-back:hover{color:var(--navy)}

/* Volver al menú principal desde el sitio completo */
nav a.nav-menu{font-weight:600; color:var(--navy)}
.menu-flotante{
  position:fixed; top:calc(12px + var(--safe-t)); left:12px; z-index:55; min-height:44px; padding:0 16px;
  background:#fff; color:var(--navy); border:2px solid var(--navy); box-shadow:3px 3px 0 var(--accent);
  font-family:var(--font-head); font-size:.85rem; font-weight:600; cursor:pointer;
}
.menu-flotante:hover{background:var(--accent)}
.menu-flotante{display:none}
.menu-flotante[hidden]{display:none}

header{
  padding:18px 6vw; padding-top:calc(18px + var(--safe-t)); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); z-index:40;
}
.logo{font-weight:700; font-size:1.4rem; color:var(--navy); transition:transform .25s cubic-bezier(.34,1.56,.64,1); cursor:default; display:inline-block}
.logo:hover{transform:scale(1.06) rotate(-2deg)}
.logo span{color:var(--accent2)}
nav{display:flex; align-items:center; flex-wrap:wrap}
nav a{color:var(--navy-soft); text-decoration:none; margin-left:20px; font-size:.88rem; font-weight:500; position:relative; padding-bottom:3px; transition:color .2s ease}
nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .25s ease}
nav a:hover{color:var(--navy)}
nav a:hover::after{width:100%}

/* ---------- Hero ---------- */
.hero{
  padding:88px 6vw 56px; text-align:center; position:relative; background:var(--bg);
}
.hero h1{
  font-weight:700; font-size:3.4rem; letter-spacing:-0.01em; margin:0 0 20px; max-width:820px; margin-inline:auto;
  color:var(--navy); animation:fadeInUp .6s ease both; line-height:1.08;
}
.hero h1 em{font-style:normal; color:var(--accent2); position:relative; display:inline-block}
.hero p{color:var(--muted); max-width:600px; margin:0 auto 26px; font-size:1rem; animation:fadeInUp .6s ease .1s both}
.badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(63,174,116,.10); border:1.5px dashed rgba(63,174,116,.4);
  padding:6px 14px; border-radius:20px; font-size:.78rem; font-weight:600; color:var(--accent2); margin-bottom:16px;
  animation:fadeInUp .6s ease both, pulseGlow 3s ease-in-out infinite 1s; transform:rotate(-1deg);
}
.badge-alert{color:var(--accent3); background:rgba(217,85,92,.10); border-color:rgba(217,85,92,.4)}

/* ---------- Buscador ---------- */
.search-box{
  max-width:660px; margin:0 auto; background:var(--card); border:1px solid var(--border); box-shadow:0 10px 28px rgba(44,49,84,.07);
  border-radius:16px; padding:16px; display:grid; grid-template-columns:1fr auto; gap:12px;
  animation:fadeInUp .6s ease .15s both;
}
@media (max-width:640px){ .search-box{grid-template-columns:1fr} }
.search-field-wrap{position:relative; text-align:left}
select, input, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--card2); color:var(--text); font-size:16px; font-family:var(--font-body); transition:border-color .2s ease, box-shadow .2s ease;
}
select:focus, input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,188,78,.22)}
.field-label{display:block; font-size:.8rem; color:var(--navy-soft); font-weight:600; margin:2px 0 -4px}
.file-hint{font-size:.72rem; color:var(--muted); margin-top:-6px}
input[type="file"]{padding:9px 12px; font-size:.82rem; cursor:pointer}

.suggestions-box{
  grid-column:1 / -1; display:none; background:var(--card); border:1px solid var(--border); border-radius:12px;
  max-height:300px; overflow-y:auto; text-align:left;
}
.suggestions-box.show{display:block; animation:fadeInUp .18s ease both}
.suggestion-item{padding:10px 14px; cursor:pointer; font-size:.87rem; transition:background .15s ease}
.suggestion-item:hover{background:var(--card2); color:var(--navy)}

/* ---------- Botones ---------- */
.btn{
  background:var(--accent); color:var(--btn-text); border:none;
  padding:12px 22px; border-radius:10px; font-weight:600; cursor:pointer; font-size:.94rem;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.015); box-shadow:0 10px 22px rgba(232,188,78,.4); filter:brightness(.96)}
.btn:active{transform:translateY(0) scale(.96)}
.btn-outline{
  background:transparent; border:1.5px solid var(--accent3); color:var(--accent3);
  padding:12px 22px; border-radius:10px; font-weight:600; cursor:pointer; font-size:.94rem;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-outline:hover{background:var(--accent3); color:#fff; transform:translateY(-2px)}
.btn-outline:active{transform:scale(.96)}

/* ---------- Secciones ---------- */
section{padding:54px 6vw}
section:nth-of-type(odd){background:var(--bg2)}
.section-title{font-size:1.4rem; margin-bottom:6px; color:var(--navy); font-weight:600; font-family:var(--font-head)}
.section-sub{color:var(--muted); margin-bottom:24px; max-width:620px}

.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:28px; position:relative; z-index:1}
/* Las sugerencias del buscador van EN el flujo de la página (empujan lo de abajo), no encima:
   así nada las puede tapar ni ellas tapan nada. No volver a hacerlas position:absolute. */
.stat{padding:0 28px; border-right:1px solid var(--border); animation:fadeInUp .6s ease .2s both}
.stat:last-child{border-right:none}
.stat b{display:block; font-size:1.6rem; color:var(--navy); font-weight:600}
.stat span{color:var(--muted); font-size:.78rem}
@media (max-width:520px){
  .stat{border-right:none; border-bottom:1px solid var(--border); padding:10px 24px; width:100%; max-width:220px}
}

/* ---------- Tarjetas de módulos ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:13px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:13px; padding:18px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.card:hover{border-color:var(--accent); box-shadow:0 10px 22px rgba(44,49,84,.09); transform:translateY(-4px) scale(1.015)}
.grid .card:nth-child(odd):hover{transform:translateY(-4px) scale(1.015) rotate(-0.6deg)}
.grid .card:nth-child(even):hover{transform:translateY(-4px) scale(1.015) rotate(0.6deg)}
.card h3{margin:0; font-size:.98rem; color:var(--navy); font-weight:600; font-family:var(--font-body)}
.card-cta{display:inline-flex; align-items:center; gap:4px; color:var(--brown); font-size:.78rem; font-weight:600; margin-top:11px}
.card-cta .arrow{transition:transform .2s ease}
.card:hover .card-cta .arrow{transform:translateX(4px)}
.empty-note{
  grid-column:1/-1; text-align:center; color:var(--muted); padding:30px; border:1px dashed var(--border);
  border-radius:14px;
}
#loadMoreBtn{display:block; margin:28px auto 0}

/* ---------- CTA panels ---------- */
.cta-split{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:800px){ .cta-split{grid-template-columns:1fr} }
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px;
  box-shadow:0 8px 24px rgba(44,49,84,.05); transition:box-shadow .25s ease, transform .25s ease;
}
.panel:hover{box-shadow:0 14px 34px rgba(44,49,84,.09); transform:translateY(-2px)}
.panel h3{margin-top:0; color:var(--navy); font-weight:600}
form{display:flex; flex-direction:column; gap:11px; margin-top:14px}

footer{padding:24px 6vw; text-align:center; color:var(--muted); font-size:.84rem; border-top:1px solid var(--border)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:calc(24px + var(--safe-b)); left:50%; transform:translateX(-50%) translateY(220%);
  background:var(--navy); color:#fff; padding:13px 22px; border-radius:10px; font-weight:600;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility .3s ease;
  z-index:80; max-width:90vw; text-align:center; box-shadow:0 14px 30px rgba(44,49,84,.25);
  visibility:hidden; opacity:0;
}
.toast.show{transform:translateX(-50%) translateY(0); visibility:visible; opacity:1}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(37,42,69,.45); backdrop-filter:blur(2px); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:16px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease;
}
.modal-overlay.show{opacity:1; visibility:visible; pointer-events:auto}
.modal{
  background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:24px;
  max-width:440px; width:100%; position:relative; max-height:88vh; overflow-y:auto;
  transform:scale(.93) translateY(10px); transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 24px 60px rgba(37,42,69,.28);
}
.modal-overlay.show .modal{transform:scale(1) translateY(0)}
.modal h3{margin:0 0 8px; padding-right:20px; color:var(--navy); font-weight:600}
.modal-desc{color:var(--muted); font-size:.87rem; margin:0 0 14px}
.modal-instruction{color:var(--accent2); font-size:.8rem; font-weight:600; margin:0 0 14px}
.modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted);
  font-size:1.1rem; cursor:pointer; transition:transform .2s ease, color .2s ease;
}
.modal-close:hover{color:var(--accent3); transform:rotate(90deg)}

.modal-tabs{display:flex; gap:6px; background:var(--card2); padding:4px; border-radius:12px; margin-bottom:16px}
.modal-tab{flex:1; text-align:center; padding:9px 8px; border-radius:9px; font-size:.8rem; font-weight:600;
  cursor:pointer; color:var(--muted); transition:.2s ease; user-select:none; font-family:var(--font-head)}
.modal-tab.active{background:var(--accent); color:var(--btn-text)}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:fadeInUp .3s ease both}

.pricing-options{display:flex; flex-direction:column; gap:9px}
.price-card{
  border:1.5px solid var(--border); background:var(--card2); border-radius:12px; padding:11px 14px;
  cursor:pointer; display:block; position:relative; transition:.2s ease;
}
.price-card.static{cursor:default}
.price-card input{position:absolute; opacity:0; pointer-events:none}
.price-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.price-amount{font-weight:700; font-size:1.05rem; color:var(--navy)}
.price-unit{font-size:.7rem; color:var(--muted); font-family:var(--font-body)}
.price-card p{margin:0; font-size:.76rem; color:var(--muted)}
.price-card.selected{border-color:var(--accent); background:rgba(232,188,78,.14); transform:scale(1.015)}
.price-card.premium{border-color:rgba(232,188,78,.5); background:linear-gradient(135deg,rgba(232,188,78,.12),rgba(63,174,116,.08))}
.price-card.premium .price-amount{color:var(--accent3)}
.artifact-note{color:var(--muted); font-size:.85rem; margin:0 0 14px}

/* ---------- Ribbon "Hot" y tags ---------- */
.hot-tag, .excl-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700;
  padding:3px 9px; border-radius:20px; margin-bottom:8px;
}
.hot-tag{color:var(--accent3); background:rgba(217,85,92,.1)}
.excl-tag{color:var(--brown); background:rgba(168,104,47,.1)}
.card.is-hot{border-color:rgba(217,85,92,.3)}

/* ---------- Módulos exclusivos ---------- */
.exclusive-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:15px}
.exclusive-card{
  background:linear-gradient(160deg, var(--navy), #3a4070); color:#fff; border-radius:15px; padding:20px;
  cursor:pointer; position:relative; overflow:hidden; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.exclusive-card:hover{transform:translateY(-5px) scale(1.02); box-shadow:0 16px 34px rgba(44,49,84,.32)}
.exclusive-card .excl-tag{background:rgba(232,188,78,.18); color:var(--accent)}
.exclusive-card h3{margin:6px 0 10px; font-size:1.04rem; padding-right:6px; font-weight:600}
.exclusive-card .price{font-size:1.3rem; font-weight:700; color:var(--accent); font-family:var(--font-head)}
.exclusive-card .price span{font-size:.72rem; font-weight:500; color:#d8dbf2; font-family:var(--font-body)}
.exclusive-card ul{margin:12px 0 0; padding-left:18px; font-size:.8rem; color:#d8dbf2}
.exclusive-card ul li{margin-bottom:3px}

.modal-exclusive-price{font-size:1.5rem; font-weight:700; color:var(--navy); margin:4px 0 2px; font-family:var(--font-head)}
.modal-exclusive-price span{font-size:.78rem; color:var(--muted); font-weight:500; font-family:var(--font-body)}
.temario-list{margin:12px 0 18px; padding-left:20px; color:var(--text); font-size:.88rem}
.temario-list li{margin-bottom:6px}

.session-list{margin:0 0 16px; padding-left:20px; color:var(--text); font-size:.86rem}
.session-list li{margin-bottom:5px}
.session-list b{color:var(--navy)}

/* ---------- Comentarios / módulo faltante ---------- */
.comment-box{max-width:620px; margin:0 auto; text-align:center}
.comment-box form{text-align:left; margin-top:18px}

/* ---------- Fix: contenido tapado por el header sticky al navegar por anclas ---------- */
#buscar, #catalogo, #hot, #exclusivo, #dar-clases, #comentarios{ scroll-margin-top:84px; }

/* ---------- Scrollbar personalizado ---------- */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent); border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--accent3)}

/* ---------- Reveal genérico ----------
   Antes cada sección, tarjeta y testimonio aparecía con su propio fade-slide-up
   al hacer scroll — la típica "cascada" de animaciones idénticas de una página
   hecha en automático. Se deja UN solo momento animado (el hero, al cargar) y
   el resto del contenido ya está visible: menos ruido, se siente más hecho a mano. */
.reveal{opacity:1; transform:none}

@media (max-width:480px){
  header{padding:14px 4vw}
  nav a{margin-left:11px; font-size:.8rem}
  .hero{padding:56px 5vw 34px}
  .hero h1{font-size:2.15rem; letter-spacing:normal}
  .hero p{font-size:.9rem}
  section{padding:32px 5vw}
  .modal{padding:20px}
}

/* ---------- Accesibilidad ---------- */
.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;
}
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--navy); color:#fff; padding:10px 16px;
  border-radius:8px; z-index:200; transition:top .2s ease; text-decoration:none; font-weight:600; font-size:.85rem;
}
.skip-link:focus{top:12px}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .card:focus-visible, .modal-tab:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;
}

/* ---------- Consentimiento ---------- */
.consent-line{
  display:flex; align-items:flex-start; gap:8px; font-size:.76rem; color:var(--muted); line-height:1.4;
}
.consent-line input{width:auto; margin-top:2px; flex-shrink:0}
.consent-line-opcional{font-size:.72rem; margin-top:-2px}
.consent-line a{color:var(--accent2)}

/* ---------- Botón volver arriba ---------- */
.back-to-top{
  position:fixed; bottom:calc(24px + var(--safe-b)); right:22px; width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:#fff; border:none; font-size:1.2rem; cursor:pointer;
  box-shadow:0 8px 20px rgba(44,49,84,.3); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.back-to-top:hover{background:var(--accent3)}

/* ---------- Estado de envío ---------- */
button[disabled]{opacity:.6; cursor:default; transform:none !important}

/* ---------- Campo trampa anti-spam (invisible para humanos) ---------- */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---------- Microcopy de confianza ---------- */
.trust-line{
  text-align:center; font-size:.75rem; color:var(--muted); margin:10px 0 0;
}

/* ---------- Certificado (mockup honesto, sin inventar institución) ---------- */
.cert-preview{margin-top:16px}
.cert-mock{
  background:linear-gradient(160deg,#fdfbf5,#f5f0de); border:2px solid var(--accent);
  border-radius:12px; padding:20px; text-align:center; position:relative;
}
.cert-icon{display:block; margin:0 auto 6px; color:var(--navy)}
.cert-mock-top{font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:.85rem; letter-spacing:.04em}
.cert-mock-via{font-size:.68rem; color:var(--muted); margin-top:1px}
.cert-mock-name{font-family:var(--font-head); font-size:1.15rem; color:var(--accent3); margin:10px 0 2px; font-weight:600}
.cert-mock-line{font-size:.78rem; color:var(--muted)}
.cert-mock-modulo{font-family:var(--font-head); font-size:.95rem; color:var(--navy); margin:6px 0; font-weight:600}
.cert-mock-sign{margin-top:14px; font-size:.72rem; color:var(--muted); border-top:1px dashed var(--border); padding-top:8px; display:inline-block}
.cert-note{font-size:.76rem; color:var(--muted); margin-top:10px; text-align:center}
.cert-info{display:inline-block; margin-left:2px}
.cert-info summary{
  display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:.66rem;
  font-weight:700; font-style:italic; font-family:Georgia,serif; cursor:pointer; list-style:none;
  vertical-align:middle;
}
.cert-info summary::-webkit-details-marker{display:none}
.cert-info summary:hover, .cert-info summary:focus-visible{border-color:var(--navy); color:var(--navy)}
.cert-info p{
  text-align:left; margin-top:8px; font-size:.76rem; line-height:1.5; max-width:46ch; margin-inline:auto;
}

/* ---------- Ejemplos de Artifact ---------- */
.artifact-example{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px;
}
.artifact-example h3{margin:4px 0 8px; font-size:1rem; color:var(--navy)}
.artifact-example p{margin:0; font-size:.85rem; color:var(--muted)}

/* ---------- Testimonios ---------- */
.testimonio-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
}
.testimonio-card .estrellas{color:var(--accent); font-size:.85rem; margin-bottom:8px}
.testimonio-card p{margin:0 0 10px; font-size:.88rem; color:var(--text); font-style:italic}
.testimonio-card .autor{font-size:.78rem; color:var(--muted); font-weight:600}
.testimonio-card .tipo-tag{display:inline-block; font-size:.65rem; font-weight:700; color:var(--accent2); background:rgba(63,174,116,.1); padding:2px 8px; border-radius:20px; margin-bottom:6px}

/* ---------- Botón de WhatsApp (solo dudas) ---------- */
.wa-dudas[hidden]{display:none}
.wa-dudas{
  position:fixed; bottom:calc(24px + var(--safe-b)); left:22px; z-index:60;
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 16px; border-radius:999px;
  background:#25d366; color:#0b2e17; font-weight:700; font-size:.9rem;
  text-decoration:none; box-shadow:0 8px 20px rgba(37,211,102,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-dudas:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(37,211,102,.45)}
.wa-dudas:focus-visible{outline:3px solid var(--navy); outline-offset:3px}

/* ---------- Universidad en la tarjeta ---------- */

/* ---------- Sugerencia activa por teclado en el buscador ---------- */
.suggestion-item.active{background:var(--card2); color:var(--navy)}


/* =====================================================================
   TEMA GEOMÉTRICO-MINIMALISTA
   Cuadrados, círculos y triángulos como lenguaje visual; líneas navy de 2px,
   esquinas rectas, sombras "duras" (sin difuminar), mucho blanco, movimiento
   marcado. Mismos colores de siempre (dorado, verde, rojo, navy, café).
   ===================================================================== */

/* El atributo hidden SIEMPRE oculta (antes .gate-form/.gate-options con display:grid lo anulaban) */
[hidden]{display:none !important}

/* Esquinas rectas en todo; los círculos se piden explícitamente */
*, *::before, *::after{border-radius:0 !important}
.g-circle-l, .g-dot, .logo::before, .cert-info summary, #gateTutorias::before,
.card:nth-child(3n+2)::after, .exclusive-card::after{border-radius:50% !important}

/* ---------- Figuras animadas (hero y pantalla de entrada) ---------- */
.geo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.g{position:absolute; display:block}
.g-circle-l{
  width:clamp(170px,30vw,380px); height:clamp(170px,30vw,380px); background:var(--accent);
  top:-9%; right:-7%;
  animation:geoPop 1s cubic-bezier(.34,1.56,.64,1) both, geoFloat 7s ease-in-out 1s infinite alternate;
}
.g-square-o{
  width:clamp(64px,10vw,130px); height:clamp(64px,10vw,130px); border:4px solid var(--navy);
  bottom:9%; left:4%;
  animation:geoPop 1s cubic-bezier(.34,1.56,.64,1) .15s both, geoSpin 26s linear 1.2s infinite;
}
.g-square-s{
  width:34px; height:34px; background:var(--accent2); top:20%; left:9%;
  animation:geoPop .9s cubic-bezier(.34,1.56,.64,1) .3s both, geoSpin 6s linear 1.2s infinite reverse;
}
.g-dot{
  width:28px; height:28px; background:var(--accent3); bottom:32%; right:13%;
  animation:geoPop .9s cubic-bezier(.34,1.56,.64,1) .45s both, geoPulse 2.2s ease-in-out 1.4s infinite;
}
.g-half{
  width:120px; height:60px; background:var(--accent2); bottom:0; right:24%;
  clip-path:ellipse(60px 60px at 50% 100%);
  animation:geoPop 1s cubic-bezier(.34,1.56,.64,1) .6s both, geoSway 5s ease-in-out 1.6s infinite alternate;
}
.g-cross{
  width:36px; height:36px; bottom:34%; left:17%;
  background:linear-gradient(var(--navy),var(--navy)) center/100% 5px no-repeat,
             linear-gradient(var(--navy),var(--navy)) center/5px 100% no-repeat;
  animation:geoPop .9s cubic-bezier(.34,1.56,.64,1) .75s both, geoSpin 9s linear 1.7s infinite;
}
.g-tri{
  width:46px; height:40px; background:var(--accent3); top:46%; right:4%;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  animation:geoPop .9s cubic-bezier(.34,1.56,.64,1) .9s both, geoFloat 4s ease-in-out 1.8s infinite alternate;
}
@keyframes geoPop{from{scale:0; opacity:0} to{scale:1; opacity:1}}
@keyframes geoFloat{to{translate:0 -30px}}
@keyframes geoSway{from{translate:-24px 0} to{translate:24px 0}}
@keyframes geoSpin{to{rotate:360deg}}
@keyframes geoPulse{50%{scale:1.6}}
@keyframes stripMove{to{background-position-x:-120px}}
@keyframes cardIn{from{opacity:0; translate:0 22px; scale:.93}}

/* Tira de figuras que avanza sin parar */
.geo-strip{
  height:32px; background-color:#fff; border-top:2px solid var(--navy); border-bottom:2px solid var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Ccircle cx='14' cy='14' r='9' fill='%23e8bc4e'/%3E%3Crect x='44' y='5' width='18' height='18' fill='%233fae74'/%3E%3Cpolygon points='90,4 104,24 76,24' fill='%23d9555c'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 2px; animation:stripMove 5s linear infinite;
}

.hero > *:not(.geo){position:relative; z-index:1}
#gate{position:relative}
#gate .gate-inner{position:relative; z-index:1}

/* ---------- Estructura general ---------- */
header{background:#fff; backdrop-filter:none; border-bottom:2px solid var(--navy)}
.logo::before{content:''; display:inline-block; width:14px; height:14px; background:var(--accent); margin-right:8px; vertical-align:-1px}
nav a{transition:box-shadow .15s ease, color .15s ease}
nav a:hover{color:var(--navy); box-shadow:inset 0 -4px 0 var(--accent)}

.hero{padding:104px 6vw 76px}
.badge{
  display:inline-block; background:var(--accent); color:var(--navy); border:2px solid var(--navy);
  transform:none; animation:fadeInUp .6s ease both; padding:6px 14px; font-weight:700; letter-spacing:.02em;
}
.hero h1 em{display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; color:var(--navy); background:linear-gradient(transparent 74%, var(--accent) 74%); padding:0 .08em}

section{padding:76px 6vw}
.section-title{font-size:1.9rem; font-weight:700; display:flex; align-items:center; gap:14px}
.section-title::before{content:''; flex:none; width:.62em; height:.62em; background:var(--accent)}
section:nth-of-type(3n+2) .section-title::before{background:var(--accent2); border-radius:50% !important}
section:nth-of-type(3n) .section-title::before{background:var(--accent3); clip-path:polygon(50% 0,100% 100%,0 100%)}
.comment-box .section-title{justify-content:center}

.stat{border-right:2px solid var(--navy)}
.stat b{font-size:2.5rem; font-weight:700; line-height:1.1}
.stat span{font-weight:600; letter-spacing:.02em}
@media (max-width:520px){ .stat{border-right:none; border-bottom:2px solid var(--navy)} }

/* ---------- Buscador ---------- */
.search-box{border:2px solid var(--navy); box-shadow:8px 8px 0 var(--accent); background:#fff; padding:14px}
select, input, textarea{border:2px solid var(--navy); background:#fff}
select:focus, input:focus, textarea:focus{border-color:var(--navy); box-shadow:4px 4px 0 var(--accent)}
.suggestions-box{border:2px solid var(--navy)}
.suggestion-item{padding:12px 14px; border-bottom:1px solid var(--border); font-weight:500}
.suggestion-item:last-child{border-bottom:none}
.suggestion-item:hover, .suggestion-item.active{background:var(--accent); color:var(--navy)}

/* ---------- Botones: sombra dura que se "hunde" al presionar ---------- */
.btn{
  background:var(--accent); color:var(--navy); border:2px solid var(--navy); box-shadow:4px 4px 0 var(--navy);
  font-weight:700; transition:transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn:hover{transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--navy); filter:none}
.btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--navy)}
.btn-outline{
  background:#fff; border:2px solid var(--navy); color:var(--navy); box-shadow:4px 4px 0 var(--accent3);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn-outline:hover{background:var(--accent3); color:#fff; transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--navy)}
.btn-outline:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--navy)}

/* ---------- Tarjetas del catálogo ---------- */
.grid{gap:18px}
.card{
  position:relative; background:#fff; border:2px solid var(--navy); padding:20px 18px;
  animation:cardIn .5s cubic-bezier(.34,1.56,.64,1) both;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.card h3{padding-right:20px}
.card::after{content:''; position:absolute; top:14px; right:14px; width:10px; height:10px; background:var(--accent)}
.card:nth-child(3n+2)::after{background:var(--accent2)}
.card:nth-child(3n)::after{background:var(--accent3); clip-path:polygon(50% 0,100% 100%,0 100%)}
.card:hover, .grid .card:nth-child(odd):hover, .grid .card:nth-child(even):hover{
  transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--accent); border-color:var(--navy);
}
.card.is-hot{border-color:var(--accent3)}
.card.is-hot:hover{box-shadow:6px 6px 0 var(--accent3)}
.card-cta{color:var(--navy); font-weight:700}
.hot-tag, .excl-tag{border:2px solid currentColor; padding:2px 8px; background:none}

/* ---------- Cursos exclusivos ---------- */
.exclusive-card{
  background:var(--navy); border:2px solid var(--navy); box-shadow:6px 6px 0 var(--accent);
  transition:transform .14s ease, box-shadow .14s ease;
}
.exclusive-card::after{content:''; position:absolute; top:-18px; right:-18px; width:60px; height:60px; background:var(--accent)}
.exclusive-card:hover{transform:translate(-4px,-4px); box-shadow:11px 11px 0 var(--accent)}
.exclusive-card .excl-tag{background:none; border-color:var(--accent); color:var(--accent)}

/* ---------- Paneles, planes, ejemplos, modal ---------- */
.panel, .artifact-example, .testimonio-card{border:2px solid var(--navy); background:#fff; box-shadow:none}
.panel:hover{box-shadow:6px 6px 0 var(--accent2); transform:translate(-3px,-3px)}
.artifact-example{transition:transform .14s ease, box-shadow .14s ease}
.artifact-example:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--accent3)}
.price-card{border:2px solid var(--navy); background:#fff}
.price-card.premium{background:var(--card2); border-color:var(--navy)}
.price-card.selected{background:var(--accent); border-color:var(--navy); transform:none}
.price-card.selected .price-amount, .price-card.selected p, .price-card.selected .price-unit{color:var(--navy)}
.cert-mock{background:#fff; border:2px solid var(--navy)}
.cert-mock-sign{border-top:2px solid var(--navy)}
.modal{border:2px solid var(--navy); box-shadow:10px 10px 0 var(--accent)}
.modal-overlay{backdrop-filter:none; background:rgba(44,49,84,.55)}
.modal-tabs{background:none; border:2px solid var(--navy); padding:0; gap:0}
.modal-tab{border-right:2px solid var(--navy)}
.modal-tab:last-child{border-right:none}
.modal-tab.active{background:var(--navy); color:#fff}
.toast{border:2px solid var(--navy); box-shadow:6px 6px 0 var(--accent)}
.back-to-top{background:var(--accent); color:var(--navy); border:2px solid var(--navy); box-shadow:4px 4px 0 var(--navy)}
.back-to-top:hover{background:var(--accent3); color:#fff}
.wa-dudas{border:2px solid var(--navy); box-shadow:4px 4px 0 var(--navy)}
.wa-dudas:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy)}
footer{border-top:2px solid var(--navy)}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .card:focus-visible, .modal-tab:focus-visible{
  outline:3px solid var(--navy); outline-offset:3px;
}
::-webkit-scrollbar-track{background:#fff}
::-webkit-scrollbar-thumb{background:var(--navy)}
::-webkit-scrollbar-thumb:hover{background:var(--accent3)}

/* ---------- Pantalla de entrada ---------- */
#gate h1{font-size:2.7rem; font-weight:700}
.gate-logo::before{content:''; display:inline-block; width:14px; height:14px; background:var(--accent); margin-right:8px}
.gate-option{
  border:2px solid var(--navy); background:#fff; box-shadow:6px 6px 0 var(--navy);
  transition:transform .14s ease, box-shadow .14s ease;
}
.gate-option::before{content:''; display:block; width:28px; height:28px; margin-bottom:16px; background:var(--accent)}
#gateArtifact::before{background:var(--accent2)}
.gate-option:hover{transform:translate(-4px,-4px); border-color:var(--navy)}
#gateTutorias:hover{box-shadow:11px 11px 0 var(--accent)}
#gateArtifact:hover{box-shadow:11px 11px 0 var(--accent2)}
.gate-option:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--navy)}
.gate-option h2{font-weight:700; font-size:1.15rem}

@media (max-width:640px){
  .hero{padding:72px 5vw 48px}
  section{padding:48px 5vw}
  .section-title{font-size:1.5rem}
  .g-circle-l{opacity:.9}
  .g-cross, .g-tri{display:none}
  .g-square-s{top:auto; bottom:6%; left:auto; right:9%}
  .hero h1{font-size:2rem}
  #gate h1{font-size:2rem}
}

/* Quien prefiere menos movimiento en su sistema, no lo ve */
@media (prefers-reduced-motion:reduce){
  .g, .geo-strip, .card, .btn, .badge, .gate-inner{animation:none !important}
  *{transition-duration:.01ms !important}
}


/* ---------- Detalles de formularios ---------- */
.opt{font-weight:600; font-size:.72rem; color:var(--muted); text-transform:none; letter-spacing:0; margin-left:6px;
  border:1.5px solid var(--border); padding:1px 7px; white-space:nowrap}
.gate-pro{margin:34px 0 0; font-size:.9rem; color:var(--muted)}
.gate-pro a{color:var(--navy); font-weight:700; text-decoration:none; box-shadow:inset 0 -3px 0 var(--accent);
  transition:box-shadow .15s ease}
.gate-pro a:hover{box-shadow:inset 0 -1.4em 0 var(--accent)}
select{cursor:pointer}

.hot-more{display:block; margin:26px auto 0}

/* FAQ */
#faq .faq-list{max-width:760px; margin:24px auto 0; display:grid; gap:12px}
.faq-item{border:2px solid var(--navy); background:#fff; padding:0}
.faq-item summary{cursor:pointer; padding:16px 18px; font-family:var(--font-head); font-weight:600; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; font-weight:700; color:var(--accent2)}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin:0; padding:0 18px 16px; color:var(--muted); font-size:.93rem}
.faq-item a{color:var(--navy); font-weight:600}

/* Bolsa de trabajo lateral */
.jobs-panel{position:fixed; right:0; top:96px; width:300px; max-width:86vw; z-index:40; background:#fff; border:2px solid var(--navy); border-right:0; box-shadow:-6px 6px 0 var(--accent); transition:transform .3s ease}
.jobs-panel.collapsed{transform:translateX(calc(100% - 46px))}
.jobs-toggle{width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--navy); color:#fff; border:0; padding:10px 14px; font-family:var(--font-head); font-weight:600; font-size:.95rem; cursor:pointer}
.jobs-arrow{display:inline-block; transition:transform .3s}
.jobs-panel.collapsed .jobs-arrow{transform:rotate(180deg)}
/* Colapsada no gira el carrusel: menos trabajo para el teléfono y nada se mueve detrás de la pestaña. */
.jobs-panel.collapsed .jobs-track{animation-play-state:paused}
.jobs-body{padding:10px 0 12px; overflow:hidden}
.jobs-note,.jobs-credit{margin:0 14px 8px; font-size:.75rem; color:var(--muted)}
.jobs-credit a{color:var(--navy); font-weight:600}
.jobs-lane-title{margin:10px 14px 6px; font-family:var(--font-head); font-weight:600; font-size:.82rem; color:var(--navy); text-transform:uppercase; letter-spacing:.04em}
.jobs-lane{overflow:hidden; border-block:1px solid var(--border); padding:8px 0; background:var(--bg2)}
.jobs-track{display:flex; width:max-content; gap:10px; padding-right:10px; animation:jobsRight var(--dur,60s) linear infinite}
.jobs-lane:hover .jobs-track{animation-play-state:paused}
@keyframes jobsRight{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.job-chip{display:block; flex:none; width:210px; padding:8px 10px; border:2px solid var(--navy); background:#fff; text-decoration:none; color:var(--text)}
.job-chip b{display:block; font-family:var(--font-head); font-size:.82rem; color:var(--navy); white-space:normal; line-height:1.25; max-height:2.5em; overflow:hidden}
.job-chip span{display:block; font-size:.72rem; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.job-chip{cursor:default}
.jobs-empty{display:block; padding:4px 14px; font-size:.78rem; color:var(--muted)}
@media (max-width:760px){
 .jobs-panel{top:auto; bottom:84px; width:260px}
 /* Colapsada se ve como una pestaña vertical completa ("Bolsa de trabajo" de arriba a abajo),
    no como una tira cortada: así se nota que es un botón y se puede tocar sin adivinar. */
 .jobs-panel.collapsed{transform:none; width:auto; max-width:none; background:transparent; border:0; box-shadow:none}
 .jobs-panel.collapsed .jobs-toggle{width:auto; writing-mode:vertical-rl; text-orientation:mixed; justify-content:center; gap:10px; padding:16px 9px; font-size:.85rem; border-radius:12px 0 0 12px; box-shadow:-4px 4px 0 var(--accent)}
 .jobs-panel.collapsed .jobs-arrow{transform:rotate(90deg)}
 .jobs-panel.collapsed .jobs-body{display:none}
}
@media (prefers-reduced-motion:reduce){ .jobs-track{animation:none} .jobs-lane{overflow-x:auto} }

.gate-options-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

#gate .gate-inner{max-width:940px}
.gate-options-3 .gate-option h2{font-size:1.05rem}

/* ---------- Ajustes para móviles (iOS y Android) ---------- */
.modal-overlay{-webkit-backdrop-filter:blur(2px)}
/* Notch / esquinas en horizontal (viewport-fit=cover) */
header{padding-left:max(6vw, env(safe-area-inset-left, 0px)); padding-right:max(6vw, env(safe-area-inset-right, 0px))}
#gate{padding-left:max(6vw, env(safe-area-inset-left, 0px)); padding-right:max(6vw, env(safe-area-inset-right, 0px))}
.wa-dudas{left:max(22px, env(safe-area-inset-left, 0px))}
.back-to-top{right:max(22px, env(safe-area-inset-right, 0px))}
/* Etiquetas y notas: nada por debajo de 12 px */
.hot-tag, .excl-tag{font-size:.75rem}
.cert-mock-via{font-size:.75rem}
/* Zona de toque de 44 px en los enlaces de la portada sin cambiar su aspecto */
.gate-pro a{position:relative}
.gate-pro a::before{content:''; position:absolute; inset:-14px -6px}
@media (max-width:640px){
  /* Encabezado normal (no fijo): en pantallas chicas ocupaba hasta una cuarta parte */
  header{position:static; padding-left:max(5vw, env(safe-area-inset-left, 0px)); padding-right:max(5vw, env(safe-area-inset-right, 0px))}
  /* Menú en una sola fila con desplazamiento lateral y enlaces de 44 px */
  nav{width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:none; white-space:nowrap; margin-left:0; margin-right:18px; min-height:44px; display:inline-flex; align-items:center; padding-bottom:0}
  nav a:last-child{margin-right:0}
  .menu-flotante:not([hidden]){display:block}
}
.cert-info summary{position:relative; font-size:.75rem}
.cert-info summary::after{content:""; position:absolute; inset:-15px}
/* Casillas de consentimiento fáciles de tocar (iOS y Android) */
.consent-line input[type="checkbox"]{width:22px; height:22px; margin-top:0; accent-color:var(--navy)}
.price-unit{font-size:.75rem}
/* Teléfono en horizontal: pantalla baja, el encabezado no debe quedarse fijo */
@media (max-height:600px){
  header{position:static; padding-top:calc(10px + var(--safe-t)); padding-bottom:10px}
  .menu-flotante:not([hidden]){display:block}
}

/* =====================================================================================
   22-oct-2026 (Saul: "pocos cambios porque ya es linda, pero mejorala" + mas animacion, que se
   vea bien en iPhone/Android). Un pulido, no un rediseño: mismos colores y mismo estilo de
   sombras duras. Las secciones vuelven a aparecer al hacer scroll, pero suave y UNA vez por
   sección (no tarjeta por tarjeta). Todo se apaga con "reducir movimiento".
   ===================================================================================== */
html.anim .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
html.anim .reveal.in-view{opacity:1; transform:none}
html.anim .section-sub.reveal{transition-delay:.08s}

/* La figurita de color de cada título entra con un giro */
html.anim .section-title.reveal::before{transform:scale(0) rotate(-90deg); transition:transform .7s cubic-bezier(.34,1.56,.64,1) .15s}
html.anim .section-title.reveal.in-view::before{transform:none}

/* El subrayado dorado del título principal se dibuja al cargar */
html.anim .hero h1 em{background-size:0% 100%; background-repeat:no-repeat; animation:mtSubrayado 1s cubic-bezier(.16,1,.3,1) .45s forwards}
@keyframes mtSubrayado{to{background-size:100% 100%}}

/* Tarjetas y precios: la flechita avanza y el cambio es un poco más elástico */
.card, .price-card{transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .14s ease}
.card .arrow, .btn .arrow{display:inline-block; transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .arrow, .btn:hover .arrow{transform:translateX(4px)}

/* Campos: foco con un pequeño "salto" de la sombra dorada */
select, input, textarea{transition:box-shadow .2s ease, border-color .2s ease}

/* Teléfonos: tocar se siente (las sombras duras se hunden al presionar también en touch) */
@media (hover:none){
  .card:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  html.anim .reveal{opacity:1 !important; transform:none !important}
  html.anim .hero h1 em{background-size:100% 100% !important}
}