/* ══════════════════════════════════════════════════════════════════════════
   EPTI — HOME
   Solo la portada: hero, selector de programas y franja informativa.
   Depende de epti-base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:82vh;display:grid;place-items:center;overflow:hidden;color:#fff;isolation:isolate}

/* La imagen ya no está en el CSS: la inyecta la plantilla con
   style="--epti-hero:url(...)", para que sea editable desde el metabox. */
.hero-bg{position:absolute;inset:0;background-image:var(--epti-hero);background-size:cover;background-position:center center;filter:sepia(.35) saturate(1.05) hue-rotate(-5deg) brightness(.86);z-index:-2}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,36,22,.55) 0%,rgba(44,36,22,.25) 35%,rgba(44,36,22,.65) 100%),linear-gradient(90deg,rgba(201,146,42,.18) 0%,rgba(44,36,22,.05) 60%)}
.hero-inner{position:relative;z-index:1;max-width:1100px;padding:96px 32px 120px;width:100%;text-align:center}
.hero .kicker{color:#F2D89A}
.hero .kicker::before{color:#F2D89A}

/* El -.02em es cuestión de tamaño de display, no de página: por eso va
   scopeado al hero y no al body. */
.hero h1{color:#fff;font-style:italic;font-weight:500;margin-top:18px;max-width:28ch;margin-left:auto;margin-right:auto;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:#F2D89A;font-weight:400}
.hero-sub{margin-top:22px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.86);max-width:56ch;margin-left:auto;margin-right:auto}

/* ── Selector de programas ─────────────────────────────────────────────── */
.nivel-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1040px;margin-inline:auto}
.nivel-card{position:relative;border-radius:16px;border:1px solid rgba(242,216,154,.45);background:rgba(30,22,12,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:flex-start;padding:28px 24px 24px;cursor:pointer;transition:all .25s ease;text-align:left;overflow:hidden;text-decoration:none}
.nivel-card:hover{border-color:var(--gold-2);background:rgba(18,10,2,.88);transform:translateY(-5px);box-shadow:0 0 0 1px rgba(212,160,50,.6),0 24px 56px rgba(0,0,0,.5),0 0 40px rgba(201,146,42,.15)}
.nivel-card .eyebrow{font-size:9.5px;letter-spacing:.3em;color:#F2D89A;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.nivel-card .nivel-title{font-family:var(--overpass);font-size:clamp(20px,2vw,27px);line-height:1.12;color:#fff;font-weight:600;margin-bottom:12px}
.nivel-card .nivel-desc{font-size:13px;color:rgba(255,255,255,.78);line-height:1.65;flex:1}
.nivel-card .nivel-req{margin-top:18px;padding-top:14px;border-top:1px solid rgba(242,216,154,.25);font-size:12px;color:rgba(242,216,154,.82);line-height:1.55}
.nivel-card .nivel-req strong{color:#F2D89A;font-weight:600}
.nivel-card .nivel-arrow{margin-top:18px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(242,216,154,.55);display:grid;place-items:center;color:#F2D89A;transition:all .25s ease;flex-shrink:0}
.nivel-card:hover .nivel-arrow{background:var(--gold);border-color:var(--gold);color:#fff}

/* ── Pie del hero y franja informativa ─────────────────────────────────── */
.hero-foot{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:16px;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.06em}
.hero-foot .dot{width:4px;height:4px;border-radius:50%;background:#F2D89A}
.info-strip{background:var(--cream);padding:56px 32px;border-bottom:1px solid var(--line)}
.info-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.info-item{text-align:center;padding:16px 24px;border-right:1px solid var(--line)}
.info-item:last-child{border-right:0}
.info-item .num{font-family:var(--serif);font-size:42px;color:var(--gold);font-weight:500;line-height:1;font-style:italic}
.info-item .lbl{margin-top:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--topo)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .hero-inner{padding:72px 20px 100px}
  .hero-sub{font-size:15px}
  .hero-foot{flex-wrap:wrap;gap:10px;font-size:12px;justify-content:center}
  .nivel-grid{grid-template-columns:1fr;max-width:100%;margin-top:40px}
  .nivel-card{max-width:480px;margin:0 auto;width:100%}
  .info-grid{grid-template-columns:1fr 1fr;gap:24px 0}
  .info-item{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}
  .info-item:nth-last-child(-n+2){border-bottom:0}
  .info-strip{padding:40px 20px}
}
@media(max-width:480px){
  .hero{min-height:65vh}
  .hero-inner{padding:56px 16px 80px}
  .info-grid{grid-template-columns:1fr 1fr}
}