/* =========================================================
   howtü — Landing page v1.0
   Paleta tomada del mockup "Muck up HOWTU final"
   ========================================================= */

:root{
  --morado:      #5D17EB;
  --morado-osc:  #4A11C0;
  --morado-claro:#F1EAFE;
  --negro:       #0D0D0D;
  --gris-txt:    #4A4A4A;
  --gris-borde:  #DCDCDC;
  --gris-campo:  #ECECEC;
  --blanco:      #FFFFFF;

  --wrap: 1180px;
  --radio: 4px;
  --sombra: 0 10px 30px rgba(13,13,13,.10);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }

body{
  margin:0;
  font-family:'Poppins', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--negro);
  background:var(--blanco);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 .5em; line-height:1.1; letter-spacing:-.02em; }
p{ margin:0 0 1em; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.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:-9999px; top:0; z-index:200;
  background:var(--morado); color:#fff; padding:.7rem 1.2rem;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--morado); outline-offset:2px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  background:var(--morado);
  color:var(--blanco);
  font-weight:600;
  font-size:1rem;
  padding:.75rem 1.4rem;
  border:0; border-radius:var(--radio);
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
  text-align:center;
}
.btn:hover{ background:var(--morado-osc); transform:translateY(-1px); }
.btn-lg{ font-size:1.15rem; padding:.9rem 2.6rem; }
.btn-sm{ font-size:.95rem; padding:.45rem 1.1rem; border-radius:999px; }
.btn-xs{ font-size:.85rem; padding:.45rem .9rem; }

.link-purple{ color:var(--morado); font-weight:500; }
.link-purple:hover{ text-decoration:underline; }

/* ---------- Títulos ---------- */
.title-xl{ font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:700; }
.title-lg{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); font-weight:700; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--blanco);
  border-bottom:1px solid #F0F0F0;
}
.header-inner{
  display:flex; align-items:center; gap:2rem;
  min-height:var(--header-h);
}
.logo img{ height:42px; width:auto; }

.nav{
  display:flex; align-items:center; gap:1.75rem;
  margin-left:auto;
  font-size:1.05rem;
}
.nav > a{ font-weight:500; }
.nav > a:not(.btn):hover{ color:var(--morado); }

.search{
  display:flex; align-items:center; gap:.4rem;
  border-bottom:1px solid var(--gris-borde);
  padding-bottom:.15rem;
}
.search input{
  border:0; outline:0; font:inherit; font-size:.95rem;
  background:transparent; width:130px; padding:.25rem 0;
}
.search input::placeholder{ color:#9A9A9A; font-style:italic; }
.search button{ background:none; border:0; color:#7A7A7A; cursor:pointer; padding:0; display:flex; }

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:.4rem;
}
.nav-toggle span{
  display:block; width:26px; height:2.5px; background:var(--negro);
  border-radius:2px; margin:5px 0; transition:.25s;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:clamp(430px, 62vh, 580px);
  overflow:hidden;
  background:var(--negro);
}
.hero-track{ height:100%; }

.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }

.slide-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
.slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%);
}

.slide-inner{
  position:relative; z-index:2;
  height:100%;
  display:flex; align-items:center;
}
.hero-card{
  background:var(--blanco);
  padding:2.2rem 2.4rem 2.4rem;
  max-width:480px;
  box-shadow:var(--sombra);
}
.hero-card h1{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight:700;
  margin-bottom:1.2rem;
}

.hero-credit{
  position:absolute; right:0; bottom:1.6rem; z-index:2;
  width:min(100% - 2.5rem, var(--wrap));
  left:50%; transform:translateX(-50%);
  color:#fff; text-align:right;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero-credit strong{ display:block; font-size:clamp(1.5rem, 3vw, 2.4rem); font-weight:700; }
.hero-credit span{ font-size:.95rem; opacity:.95; }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(255,255,255,.18); color:#fff;
  border:0; width:46px; height:46px; border-radius:50%;
  font-size:2rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s;
}
.hero-arrow:hover{ background:rgba(255,255,255,.4); }
.hero-arrow.prev{ left:1rem; }
.hero-arrow.next{ right:1rem; }

.hero-dots{
  position:absolute; z-index:3; bottom:.9rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem;
}
.hero-dots button{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.5);
}
.hero-dots button[aria-selected="true"]{ background:var(--morado); width:26px; border-radius:999px; }

/* =========================================================
   QUÉ ES HOWTU
   ========================================================= */
.que-es{ padding:5rem 0 4rem; }
.que-es .title-xl{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.inline-logo{ height:.95em; width:auto; display:inline-block; transform:translateY(.06em); }

.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--gris-txt);
  max-width:64ch;
}
.lead.center{ margin-inline:auto; text-align:center; }

.pilares{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.pilares li{
  border:1px solid var(--gris-borde);
  border-top:4px solid var(--morado);
  padding:1.5rem 1.4rem;
  background:var(--blanco);
  transition:box-shadow .2s, transform .2s;
}
.pilares li:hover{ box-shadow:var(--sombra); transform:translateY(-3px); }
.pilar-ico{ color:var(--morado); font-weight:700; font-size:1.05rem; }
.pilares h3{ font-size:1.15rem; margin:.5rem 0 .4rem; }
.pilares p{ margin:0; font-size:.95rem; color:var(--gris-txt); }

.cta-block{ text-align:center; margin-top:4rem; }
.cta-block .title-lg{ margin-bottom:1.5rem; }

/* =========================================================
   QUÉ INCLUYE
   ========================================================= */
.incluye{ background:var(--morado-claro); padding:4.5rem 0; }
.incluye .title-lg{ text-align:center; }
.incluye .sub{ text-align:center; color:var(--gris-txt); margin-bottom:2.5rem; }

.modulos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  counter-reset:m;
}
.modulos li{
  background:var(--blanco);
  padding:1rem 1.2rem;
  display:flex; align-items:center; gap:.9rem;
  font-weight:500;
  border-radius:var(--radio);
}
.modulos span{
  color:var(--morado); font-weight:700; font-size:1.1rem;
  min-width:2ch;
}

/* =========================================================
   CURSOS
   ========================================================= */
.cursos{ padding:5rem 0; }
.cursos-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem;
}
.cursos-head .title-xl{ margin:0; }

.filtro select{
  font:inherit; font-size:.95rem;
  padding:.6rem 1rem; border:1px solid var(--gris-borde);
  border-radius:var(--radio); background:var(--blanco); cursor:pointer;
}

.grid-cursos{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.curso{
  position:relative;
  border:1px solid var(--gris-borde);
  background:var(--blanco);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s;
}
.curso:hover{ box-shadow:var(--sombra); transform:translateY(-4px); }
.curso > img{ width:100%; height:210px; object-fit:cover; object-position:center 25%; }

.curso-info{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.curso-info h3{ font-size:1.15rem; margin-bottom:.5rem; }
.curso-info p{ margin:0 0 .2rem; font-size:.88rem; color:var(--gris-txt); }
.curso-info p strong{ color:var(--negro); }

.curso-foot{
  margin-top:auto; padding-top:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.precio{ font-weight:700; font-size:1.1rem; }

.cursos-mas{ text-align:center; margin-top:2.5rem; font-size:1.05rem; }

/* =========================================================
   SOY EMPRESARIO
   ========================================================= */
.empresario{ background:var(--negro); color:#fff; padding:5rem 0; }
.empresario-inner{
  display:grid; gap:3rem;
  grid-template-columns:1fr 1fr;
  align-items:center;
}
.empresario-copy p{ color:#D6D6D6; font-size:1.05rem; }
.empresario-copy .strong{ color:#fff; font-weight:600; }

.form-card{
  background:var(--blanco); color:var(--negro);
  padding:2rem; border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.campos{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.form-card label{ display:block; font-size:.9rem; font-weight:600; }
.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel]{
  width:100%; margin-top:.4rem;
  background:var(--gris-campo);
  border:1px solid transparent; border-radius:var(--radio);
  padding:.7rem .8rem; font:inherit; font-size:.95rem;
}
.form-card input:focus{ border-color:var(--morado); background:#fff; outline:none; }
.form-card input[aria-invalid="true"]{ border-color:#D32F2F; background:#FDECEC; }

.form-card .btn{ margin-top:1.6rem; width:100%; }

.check{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1.1rem; font-weight:400; font-size:.9rem;
}
.check input{ width:18px; height:18px; accent-color:var(--morado); }
.check a{ color:var(--morado); text-decoration:underline; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

.form-msg{ margin:1rem 0 0; font-size:.9rem; font-weight:600; min-height:1.2em; }
.form-msg.ok{ color:#1B7F3B; }
.form-msg.err{ color:#D32F2F; }

/* =========================================================
   ALIADOS
   ========================================================= */
.aliados{ padding:4rem 0; }
.aliados .title-lg{ margin-bottom:2rem; }
.aliados-logos{
  display:flex; align-items:center; gap:3.5rem; flex-wrap:wrap;
}
.aliados-logos img{
  height:52px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.65;
  transition:filter .2s, opacity .2s;
}
.aliados-logos img:hover{ filter:none; opacity:1; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--morado); color:#fff; padding:3rem 0 1.5rem; }
.footer-inner{
  display:grid; gap:2.5rem;
  grid-template-columns:1fr auto;
  align-items:start;
}
.footer-legal{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-legal a:hover{ text-decoration:underline; }

.footer-contacto{ text-align:right; }
.footer-contacto p{ font-size:1.05rem; }
.redes{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; justify-items:end; }
.redes a{ display:flex; align-items:center; gap:.6rem; }
.redes a:hover{ text-decoration:underline; }

.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}
.footer-logo{ height:30px; width:auto; }
.footer-bottom small{ opacity:.85; }

/* =========================================================
   MODAL
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.5rem; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(13,13,13,.6); }
.modal-box{
  position:relative; background:#fff; border-radius:6px;
  padding:2rem; width:min(100%, 440px);
  max-height:90vh; overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal-box h2{ font-size:1.5rem; }
.modal-close{
  position:absolute; top:.6rem; right:.9rem;
  background:none; border:0; font-size:1.9rem; line-height:1;
  cursor:pointer; color:#888;
}
.modal-box label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.modal-box input{
  width:100%; margin-top:.35rem;
  background:var(--gris-campo); border:1px solid transparent; border-radius:var(--radio);
  padding:.7rem .8rem; font:inherit;
}
.modal-box input:focus{ border-color:var(--morado); background:#fff; outline:none; }
.modal-box .check{ display:flex; align-items:center; gap:.6rem; font-weight:400; }
.modal-box .check input{ width:18px; height:18px; margin-top:0; padding:0; }
.modal-box .btn{ width:100%; margin-top:.5rem; }
.modal-box .form-msg{ margin-bottom:0; }
.modal-nota{ font-size:.85rem; color:var(--gris-txt); margin-top:1rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .empresario-inner{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-contacto{ text-align:left; }
  .redes{ justify-items:start; }
}

@media (max-width: 780px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    background:#fff; border-bottom:1px solid var(--gris-borde);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--sombra);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav > a{ padding:.85rem 0; border-bottom:1px solid #F0F0F0; }
  .nav .btn{ margin:.85rem 0; }
  .search{ margin-top:.5rem; }
  .search input{ width:100%; }

  .hero-card{ padding:1.6rem 1.6rem 1.8rem; }
  .hero-credit{ text-align:left; bottom:2.4rem; }
  .hero-credit strong{ font-size:1.35rem; }
  .hero-credit span{ font-size:.82rem; }
  .hero-arrow{ display:none; }
  .campos{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .hero{ height:560px; }
  .slide-inner{ align-items:flex-start; padding-top:2.5rem; }
  .hero-card{ max-width:none; }
  .cursos-head{ align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}