:root{
  --bg:#06110f; --panel:#0a1513; --panel-2:#0e1c19; --glass:#0f1f1cb3;
  --ink:#eaf6f2; --muted:#a8cfc3; --line:rgba(255,255,255,.12);
  --brand:#2bb24c; --turq:#5dc1b9; --wrap:1120px;
  --blur:14px; --ring: rgba(93,193,185,.55); --ring2: rgba(43,178,76,.55);

  /* escala de logos controlada por ancho, no por altura */
  --logo-min: 180px;      /* ancho mínimo por logo */
  --logo-max: 240px;      /* ancho máximo desktop */
  --logo-mob: 25vw;       /* ancho relativo en móviles */
}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--turq);text-decoration:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding:16px}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:.5rem .8rem;background:#000;border-radius:10px;z-index:1000;color:#fff}

/* ===== Fondo general ===== */
body{
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70vw 60vh at 10% -10%, #0b231d 0, transparent 60%),
    radial-gradient(70vw 60vh at 90% 0%, #0a1d2a 0, transparent 60%),
    var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.03) 32px);
  background-size:32px 32px; opacity:.33; mix-blend-mode:soft-light;
}

/* ===== Topbar ===== */
.top{position:sticky;top:0;z-index:40;background:#06120fcc;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.top__bar{display:flex;justify-content:space-between;align-items:center}
.top__tag{color:var(--muted);font-weight:700}
.btn-ghost{border:1px solid var(--line);padding:.5rem .8rem;border-radius:12px;color:var(--ink)}
.btn-ghost:hover{border-color:#2bb24c77; box-shadow:0 0 0 3px rgba(93,193,185,.18) inset}

/* ===== HERO ===== */
.hero{padding:10px 0 6px}
.glass{
  background:var(--glass); border:1px solid var(--line); border-radius:20px; padding:16px;
  backdrop-filter:blur(var(--blur)); box-shadow:0 1px 0 #ffffff12 inset, 0 20px 60px #0009;
}
.hero-grid{
  display:grid;
  grid-template-columns: clamp(280px,48%,560px) 1fr;
  grid-template-areas:
    "heading artwork"
    "badges  artwork"
    "cta     artwork";
  gap:14px; align-items:center;
}
.hero-heading{ grid-area: heading; display:flex; flex-direction:column; gap:6px }
.hero h1{font-size:clamp(2rem,3.2vw,3.1rem);margin:0;font-weight:900;line-height:1.06}
.hero h1 span{background:linear-gradient(90deg,var(--turq),#8ae0db 35%,#b8f0ed);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:0;font-size:clamp(.98rem,1.2vw,1.05rem)}
.hero-artwork{grid-area: artwork; border-radius:18px; overflow:hidden; background:#0c1b17;
  box-shadow:0 0 0 2px #0e1c19, 0 0 0 4px #5dc1b933, 0 18px 36px #000a; display:grid; place-items:center; aspect-ratio: 16 / 11;}
.hero-artwork img{width:100%; height:100%; object-fit:cover; object-position:58% center; transform:scale(1.02)}
.hero-badges{ grid-area: badges; display:flex;gap:10px;flex-wrap:wrap;align-items:center }
.hero-badges span{ border:1px solid var(--line);border-radius:999px;padding:.40rem .68rem;background:#0e1c19;color:#dff7ef;font-weight:700 }
.hero-cta{ grid-area: cta; display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.btn-cta,.btn-lite{ display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.12rem;border-radius:14px;font-weight:800;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.btn-cta{ background:linear-gradient(180deg,var(--brand),#168f39);color:#03120b; box-shadow:0 10px 25px #2bb24c33, 0 0 0 1px #ffffff0a inset }
.btn-lite{background:#0f1d19;border:1px solid var(--line);color:#eaf6f2}
.btn-cta:hover{filter:brightness(1.06); box-shadow:0 12px 28px #2bb24c44, 0 0 0 2px var(--ring2); transform:translateY(-1px)}
.btn-lite:hover{border-color:#2bb24c66; box-shadow:0 0 0 2px var(--ring) inset; transform:translateY(-1px)}
.w-full{width:100%}

/* ===== BLOQUE RESOLUCIÓN + LOGOS ===== */
.brand-block{margin-top:14px}
.brand-title{
  margin:0 0 10px; text-align:center; font-weight:900; letter-spacing:.2px;
  font-size:clamp(1.02rem,1.8vw,1.22rem); color:#eaf6f2;
}
.brand-title b{color:#8ae0db}

/* Caja de logos */
.brand-logos{}
.brand-logos__inner{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--logo-min), 1fr));
  gap:22px;
  align-items:center;
  justify-items:center;
  padding:18px 20px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 14px 34px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.22) inset;
  animation:fadeUp .6s ease both;
}
.brand-item{display:grid;place-items:center}
.brand-item img{
  width: clamp(var(--logo-min), var(--logo-mob), var(--logo-max));
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.12));
  opacity:.98; transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.brand-item img:hover{opacity:1; transform:translateY(-1px)}

/* ===== Highlights / Inversión ===== */
.trust{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:stretch;margin-top:12px}
.info-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.info-card{background:#fff;color:#0c141c;border-radius:18px;padding:16px;box-shadow:0 14px 24px rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.05);display:flex;align-items:center;gap:12px}
.info-card.strong{outline:2px solid #e7f6f3; box-shadow:0 18px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05)}
.info-ico{font-size:28px}
.info-label{color:#516173}
.info-title{font-weight:900;font-size:1.45rem;color:#0b1a13}
.info-sub{font-size:.9rem;color:#2b5f52;margin-top:2px}

.price-banner{margin-top:4px;background:linear-gradient(180deg,#0a1513,#0b1916);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 1px 0 #ffffff10 inset, 0 18px 48px #0007, 0 0 0 1px #ffffff08 inset}
.price-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.badge-off{background:#dff7ef;color:#0d3b2c;font-weight:900;border-radius:999px;padding:.35rem .7rem;box-shadow:0 0 0 1px #2bb24c44 inset}
.price-row{display:flex;align-items:baseline;gap:10px}
.price-now{font-size:2rem;font-weight:900;color:#55d18b}
.price-old{color:#9fb3bf;text-decoration:line-through;font-size:1.1rem}
.price-note{margin:0;color:#a8cfc3}
.price-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mini{color:#9fb3bf}

/* ===== Slider de módulos ===== */
.mod-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow:auto;padding:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.mod-slider::-webkit-scrollbar{height:8px}
.mod-slider::-webkit-scrollbar-thumb{background:#1b2a25;border-radius:10px}
.mod-card{scroll-snap-align:center;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:16px;padding:16px;color:#eaf6f2;box-shadow:0 1px 0 #ffffff10 inset, 0 18px 48px #0007}
.mod-card h3{margin:0 0 6px;font-size:1rem;color:#8ae0db}
.mod-card p{margin:0;color:#d7ebe4}

/* ===== Secciones / tarjetas ===== */
.section{padding:26px 0}
.h-center{text-align:center;margin:0 0 12px}
.h-center::after{content:"";display:block;height:2px;width:72px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--turq),transparent);filter:drop-shadow(0 0 8px rgba(93,193,185,.45))}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 0 #ffffff10 inset, 0 18px 48px #0007}

/* ===== Acordeones ===== */
.accordion{display:grid;gap:12px}
.acc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b1613}
.acc[open]{box-shadow:0 0 0 1px #ffffff10 inset, 0 18px 48px #0007}
.acc > summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:#0e1c19}
.acc > summary::-webkit-details-marker{display:none}
.acc-title{font-weight:800}
.acc-count{background:#0f213d;color:#bfd6ff;border-radius:999px;padding:.2rem .55rem;font-weight:800}
.acc-sub{margin:0;padding:0 16px 8px;color:#a8cfc3}
.acc-list{margin:0;padding:0 16px 12px;display:grid;gap:8px}
.acc-list li{list-style:none;background:#0a1513;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.badge-n{background:#8ec5ff;color:#0a2143;font-weight:900;border-radius:8px;padding:.22rem .46rem;display:inline-grid;place-items:center;min-width:22px}

/* ===== Docente + Certificado ===== */
.acad-grid{display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:stretch}
@media (max-width:880px){ .acad-grid{grid-template-columns:1fr} }
.doc-col{display:flex;flex-direction:column;gap:12px}
.doc-card{display:flex; flex-direction:column; align-items:center; gap:10px;
  background:linear-gradient(180deg,#0b1916,#081411); border:1px solid var(--line);
  border-radius:16px; padding:16px;
  box-shadow:0 25px 80px #0008, 0 0 0 1px #ffffff0a inset;}
.doc-avatar{ width:136px; height:136px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px #0e1c19, 0 0 0 5px #2bb24c44, 0 10px 24px #0009; }
.doc-meta{font-size:.92rem; text-align:center; color:var(--muted)}
.doc-verify{margin-top:2px}

/* Certificado */
.cert-mock{
  background: radial-gradient(120% 140% at -10% -10%, #0e1030 0, #0a0f1c 40%, #0a0e1a 100%);
  border-radius:20px; border:1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 2px rgba(122,84,255,.13) inset, 0 30px 80px #000a, 0 0 80px #6a3cff1c;
  padding:16px; color:#dff7ff; position:relative; overflow:hidden;
}
.cert-head{display:flex; align-items:center; gap:10px; color:#c9d8ff}
.cert-head h3{margin:0}
.cert-body{
  margin-top:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px;
  box-shadow:0 1px 0 #ffffff0a inset, 0 16px 40px #0008;
}
.cert-title{font-size:1.1rem; margin-bottom:4px}
.cert-meta{color:#a9b8ff; font-size:.95rem}
.cert-pills{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px}
.cert-pills span{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:.45rem .7rem; border-radius:999px; font-weight:700; color:#e9f8ff
}
.cert-bottom{display:grid; grid-template-columns:1fr 1fr 120px; gap:12px; align-items:end}
.sig .line{height:36px; border-bottom:2px solid rgba(255,255,255,.6); opacity:.85}
.sig small{color:#a7b0d8}

/* QR reducido */
.qr{width:120px;height:120px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.18) inset, 0 0 0 6px rgba(122,84,255,.14) inset}
.qr img{width:100%;height:100%;object-fit:cover}
.cert-foot{margin-top:10px; color:#9ab; font-size:.9rem; opacity:.9}

/* ===== FAQ layout ===== */
.faq-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:16px;
  align-items:start;
}
.faq-visual{display:flex;flex-direction:column;gap:12px}
.faq-visual img{border-radius:14px}
.faq-cta{display:grid;gap:6px}
.faq-cta .mini{color:#a8cfc3}

/* ===== CTA final y footer ===== */
.last{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a1613cc;backdrop-filter:blur(8px)}
.last__grid{display:flex;justify-content:space-between;align-items:center;gap:10px}
.foot{padding:14px 0;color:#a8cfc3}
.foot__grid{display:flex;justify-content:space-between;align-items:center;gap:10px}
.foot__nav{display:flex;gap:14px}

/* ===== WhatsApp FAB ===== */
.wa-fab{position:fixed;right:18px;bottom:18px;background:#25D366;border-radius:999px;width:60px;height:60px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:60}
.wa-fab svg{width:30px;height:30px}
.wa-fab:hover{filter:brightness(1.06);transform:translateY(-2px)}
.wa-pulse{position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(37,211,102,.5);animation:wa 1.8s infinite}
@keyframes wa{0%{opacity:1;transform:scale(.9)}70%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}

/* ===== Accesibilidad extra ===== */
:focus-visible{outline:2px solid var(--turq); outline-offset:2px; border-radius:10px}

/* ===== Responsive ===== */
@media (max-width:1120px){
  .hero-grid{grid-template-columns:1fr 1.05fr}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"heading" "artwork" "badges" "cta"}
  .hero-artwork{aspect-ratio:16/10}
  .hero-artwork img{object-position:center 40%;transform:none}
  .hero-cta .btn-cta,.hero-cta .btn-lite{width:100%}
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .info-grid{grid-template-columns:1fr}
  .price-banner{flex-direction:column;align-items:flex-start}
  .price-right{align-items:flex-start}
  .mod-slider{grid-auto-columns:85%}
  .acad-grid{grid-template-columns:1fr}
}

/* En móviles queremos logos EXTRA grandes */
@media (max-width:768px){
  :root{
    --logo-min: 240px;
    --logo-mob: 60vw;
    --logo-max: 520px;
  }
  .brand-logos__inner{gap:18px; padding:16px}
}
@media (max-width:480px){
  :root{
    --logo-min: 260px;
    --logo-mob: 78vw;
  }
}

/* Animación común */
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
/* ===== FAQ dividido (media izquierda, preguntas derecha) ===== */
.faq-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
}
.faq-media{
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.faq-media img{
  width:100%;
  height:auto;
  display:block;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.faq-verify{
  padding:14px;
  display:grid;
  gap:6px;
  text-align:center;
}
.faq-verify .mini{ color:var(--muted, #cfe7de); font-size:.9rem; }

/* Responsive */
@media (max-width: 980px){
  .faq-split{ grid-template-columns: 1fr; }
}
/* Invertir columnas: preguntas IZQ, imagen DER */
.faq-split--rev { grid-auto-flow: dense; }
.faq-split--rev > div { order: 1; }       /* preguntas */
.faq-split--rev .faq-media { order: 2; }  /* imagen + botón */

/* En móviles mantenemos una sola columna en orden natural */
@media (max-width: 980px){
  .faq-split--rev > div,
  .faq-split--rev .faq-media { order: initial; }
}