/* MEATIC — Piel G "Rediseño total" para páginas interiores (sobre styles.css) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Archivo+Black&display=swap");

:root{
  --hueso:#F6F4EF;--tinta:#15171B;--tinta2:#22252B;--ln-g:#E8E5DF;
  --gris-100:#EFEDE7;--gris-50:#F6F4EF;
  --radio:22px;--radio-sm:12px;
  --disp:'Archivo',Inter,sans-serif;--dispBlack:'Archivo Black','Archivo',sans-serif;
}
body{background:var(--hueso);color:#3C4048}
h1,h2,h3,h4{font-family:var(--disp)}

/* ---- Revelado ---- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rvd,0s)}
.rv.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- Barra de progreso (creada por moderno-d.js) ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:300}

/* ---- Topbar / Header vidrio ---- */
.topbar{background:var(--tinta)}
.header{background:rgba(246,244,239,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ln-g);box-shadow:none;transition:box-shadow .3s}
.header.compact{box-shadow:0 10px 34px rgba(21,23,27,.10)}
.header.compact .brand img{height:38px}
.brand{flex-shrink:0}
.brand img{transition:height .3s}
.nav a{font-weight:600;border-radius:10px}
.nav a:hover{background:transparent;color:var(--tinta)}
.nav a.active{background:transparent;color:var(--tinta)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--naranja);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav a{position:relative}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}

/* ---- Botones píldora con brillo ---- */
.btn{border-radius:999px;font-family:var(--disp);font-weight:700;padding:14px 26px;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s;pointer-events:none}
.btn:hover::after{left:140%}
.btn--grad{background:linear-gradient(120deg,#E63312,#F47920 60%,#F9B233);box-shadow:0 8px 22px rgba(234,91,12,.35)}
.btn--grad:hover{box-shadow:0 14px 30px rgba(234,91,12,.45)}
.btn--dark{background:var(--tinta)}
@media(max-width:1080px){.header .header-cta .btn{padding:11px 18px;font-size:.88rem}}
@media(max-width:1150px){.header .header-cta .btn{display:none}}

/* ---- Hero interior (page-hero) y hero ---- */
.hero,.page-hero{background:var(--tinta)}
.hero::before,.page-hero::before{opacity:.9;
  background:radial-gradient(60% 90% at 90% 10%,rgba(244,121,32,.28),transparent 60%),
             radial-gradient(circle at 8% 100%,rgba(230,51,18,.2),transparent 45%)}
.hero h1,.page-hero h1{font-family:var(--dispBlack);font-weight:400;text-transform:uppercase;letter-spacing:-.5px;line-height:1.02}
.hero h1 .grad-text,.page-hero h1 .grad-text{background:none;-webkit-text-fill-color:currentColor;
  color:transparent;-webkit-text-stroke:2px var(--naranja)}
.hero-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font-family:var(--disp);letter-spacing:2.5px;color:var(--dorado)}
.hero-badge i{background:var(--dorado)}
.hero-card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);border-radius:24px}
.hero-card .tag{border-radius:999px;font-family:var(--disp)}

/* ---- Stats ---- */
.stats{background:var(--tinta)}
.stat{border-left:1px solid rgba(255,255,255,.16);border-radius:0;background:transparent;padding:8px 26px}
.stat:first-child{border-left:none}
.stat .num{font-family:var(--dispBlack);font-weight:400;background:none;-webkit-text-fill-color:currentColor;color:#fff;font-size:2.4rem}
.stat .lbl{color:#A6ABB4}

/* ---- Encabezados de sección: alineados a la izquierda con índice ---- */
.section-head{margin:0 0 52px;text-align:left;max-width:720px}
.section-head h2{font-weight:800}
.section-head h2 .mark{background:linear-gradient(transparent 62%,rgba(249,178,51,.55) 62%)}
.bar{margin:18px 0 0;height:4px;border-radius:4px}
.eyebrow{font-family:var(--disp);font-weight:800;letter-spacing:2.5px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--naranja-osc)}
.section--osc .section-head{margin:0 0 52px}
.section--osc{background:var(--tinta)}

/* ---- Tarjetas ---- */
.card{background:#fff;border:1px solid var(--ln-g);border-radius:24px;
  box-shadow:0 20px 50px rgba(21,23,27,.06);transition:transform .3s,box-shadow .3s}
.card::before{display:none}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(21,23,27,.12)}
.card-ico{border-radius:16px;background:var(--tinta);color:var(--dorado);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-ico{transform:scale(1.08) rotate(-5deg)}
.card .more{font-family:var(--disp);color:var(--naranja-osc)}
.card .more i{transition:transform .25s}
.card .more:hover i{transform:translateX(4px)}
.course .ch{background:var(--tinta)}
.course .ch::after{transition:transform .5s ease}
.course:hover .ch::after{transform:rotate(65deg) scale(1.15)}
.badge-cert{border-radius:999px;font-family:var(--disp)}
.badge-free{border-radius:999px;font-family:var(--disp)}

/* ---- Split / checks ---- */
.split .media img{border-radius:26px!important}
.checks .chk{border-radius:10px}

/* ---- Pasos: panel blanco con números en contorno ---- */
.section--osc .steps{border:1px solid rgba(255,255,255,.12);border-radius:26px;overflow:hidden;gap:0;background:rgba(255,255,255,.03)}
.step{padding:38px 30px;border-left:1px solid rgba(255,255,255,.12);border-radius:0;background:transparent;transition:background .3s}
.step:first-child{border-left:none}
.step:hover{background:rgba(255,255,255,.05)}
.step .n{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;margin:0 0 14px;
  font-family:var(--dispBlack);font-weight:400;font-size:3rem;color:transparent;-webkit-text-stroke:1.5px var(--naranja);
  display:block;line-height:1;transition:color .3s}
.step:hover .n{color:var(--naranja)}
@media(max-width:900px){.step{border-top:1px solid rgba(255,255,255,.12)}}

/* ---- CTA: contenedor tinta redondeado con franja de peligro ---- */
.cta-band{background:transparent;padding:90px 0}
.cta-band::after{display:none}
.cta-band .container{position:relative;overflow:hidden;background:var(--tinta);border-radius:34px;
  padding:84px 40px;max-width:calc(var(--maxw) - 48px)}
.cta-band .container::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 80% at 50% 0%,rgba(244,121,32,.35),transparent 65%)}
.cta-band .container::after{content:"";position:absolute;top:0;left:0;right:0;height:8px;
  background:repeating-linear-gradient(45deg,var(--tinta) 0 14px,var(--dorado) 14px 28px)}
.cta-band h2{position:relative;font-family:var(--dispBlack);font-weight:400;text-transform:uppercase}
.cta-band p{position:relative}
.cta-band .btn{position:relative;z-index:2}

/* ---- Footer ---- */
.footer{background:var(--tinta)}
.f-social a{border-radius:12px;transition:background .25s,transform .25s}
.f-social a:hover{transform:translateY(-3px)}
.legal .lema{color:var(--dorado)}

/* ---- Formularios / bloques interiores ---- */
.form-wrap{border-radius:26px;border:1px solid var(--ln-g);box-shadow:0 20px 50px rgba(21,23,27,.07)}
.field input,.field select,.field textarea{border-radius:12px}
.temario{border-radius:22px}

/* ---- WhatsApp ---- */
.wa-float{animation:waPulse 2.6s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.wa-float{animation:none}}