/* ==========================================================
   MetriK Lab — estilos del sitio
   Estructura tomada del wireframe de baja fidelidad.
   ========================================================== */

:root{
  --noche:#0E2340;
  --noche-suave:#1B3A5C;
  --turquesa:#15BFAE;
  --turquesa-hondo:#0E8C80;
  --papel:#F6F8F9;
  --papel-hondo:#E7ECEF;
  --tinta:#33465A;
  --tinta-suave:#697B8C;
  --blanco:#FFFFFF;
  --alerta:#FDECEA;
  --alerta-borde:#E6B3AC;
  --alerta-texto:#8A2A1B;
  --ok:#E8F5F1;
  --ok-borde:#9FD6CB;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;
  color:var(--noche);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0;
}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);max-width:22ch}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
a{color:var(--turquesa-hondo)}
img{max-width:100%}

.envoltura{width:min(1080px,92vw);margin-inline:auto}
section{padding:3.6rem 0}
section.compacta{padding:2.4rem 0}
.intro{max-width:58ch;margin:.9rem 0 2.2rem}

/* ---------- navegación ---------- */
.nav{
  background:var(--blanco);
  border-bottom:1px solid var(--papel-hondo);
  position:sticky;top:0;z-index:40;
}
.nav .envoltura{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 0;
}
.marca{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.25rem;letter-spacing:-0.03em;color:var(--noche);
  text-decoration:none;flex:none;
}
.marca b{color:var(--turquesa-hondo)}
.menu{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;font-size:.94rem}
.menu a{color:var(--tinta);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--turquesa)}
.menu a[aria-current="page"]{color:var(--noche);border-bottom-color:var(--turquesa)}
.abrir-menu{display:none;background:none;border:1px solid var(--papel-hondo);border-radius:4px;
  font-size:1.2rem;padding:.35rem .6rem;cursor:pointer;color:var(--noche)}

/* ---------- botones ---------- */
.boton{
  display:inline-block;background:var(--noche);color:var(--blanco);
  text-decoration:none;font-weight:600;font-size:1rem;
  padding:.9rem 1.6rem;border-radius:4px;border:1px solid var(--noche);
  cursor:pointer;font-family:inherit;text-align:center;
  transition:background .18s ease,color .18s ease;
}
.boton:hover{background:var(--noche-suave);border-color:var(--noche-suave)}
.boton.turquesa{background:var(--turquesa-hondo);border-color:var(--turquesa-hondo)}
.boton.turquesa:hover{background:var(--turquesa);border-color:var(--turquesa)}
.boton.linea{background:transparent;color:var(--noche)}
.boton.linea:hover{background:var(--noche);color:var(--blanco)}
.boton.ancho{width:100%}
.boton.chico{padding:.55rem 1rem;font-size:.9rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--turquesa);outline-offset:2px;
}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- hero ---------- */
.hero{padding:3rem 0 3.4rem}
.hero .envoltura{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero p.entrada{font-size:1.06rem;max-width:46ch;margin:1.2rem 0 1.8rem}
.lienzo{background:var(--blanco);border:1px solid var(--papel-hondo);border-radius:6px;padding:1.4rem;margin:0}
.lienzo figcaption{margin-top:.9rem;font-size:.84rem;color:var(--tinta-suave)}
.disperso circle{opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .disperso circle{animation:desvanecer .9s ease forwards;animation-delay:1s}
  .orden rect{animation:crecer .7s cubic-bezier(.2,.7,.3,1) backwards;transform-origin:bottom}
  .orden rect:nth-child(1){animation-delay:1.15s}
  .orden rect:nth-child(2){animation-delay:1.3s}
  .orden rect:nth-child(3){animation-delay:1.45s}
  .orden rect:nth-child(4){animation-delay:1.6s}
  .orden rect:nth-child(5){animation-delay:1.75s}
  @keyframes desvanecer{to{opacity:.12}}
  @keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ---------- datos en línea ---------- */
.datos{display:flex;flex-wrap:wrap;gap:0 2rem;padding:0;margin:0 0 2rem;list-style:none;
  border-top:1px solid var(--papel-hondo);border-bottom:1px solid var(--papel-hondo)}
.datos li{padding:.85rem 0;font-size:.93rem}
.datos strong{display:block;color:var(--noche);font-weight:600}

/* ---------- rejillas y tarjetas ---------- */
.rejilla{display:grid;gap:1.6rem}
.r2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.tarjeta{
  background:var(--blanco);border:1px solid var(--papel-hondo);
  border-radius:6px;padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;
}
.tarjeta h3{font-size:1.08rem}
.tarjeta p{font-size:.95rem;margin:0;color:var(--tinta)}
.tarjeta .pie-tarjeta{
  margin-top:auto;padding-top:1rem;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;font-size:.9rem;
  border-top:1px solid var(--papel-hondo);
}
.etiqueta{
  display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.02em;
  padding:.2rem .6rem;border-radius:3px;background:var(--ok);color:var(--turquesa-hondo);
  border:1px solid var(--ok-borde);width:max-content;
}
.etiqueta.gris{background:var(--papel-hondo);color:var(--tinta-suave);border-color:var(--papel-hondo)}

.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem;
  list-style:none;padding:0;margin:0;counter-reset:paso}
.pasos li{counter-increment:paso;border-top:2px solid var(--turquesa);padding-top:.9rem}
.pasos li::before{content:counter(paso);font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;color:var(--turquesa-hondo);display:block;margin-bottom:.2rem}
.pasos h3{font-size:1.02rem;margin-bottom:.3rem}
.pasos p{font-size:.94rem;margin:0}

.logros{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.8rem 2.4rem;padding:0;margin:0;list-style:none}
.logros li{border-top:2px solid var(--turquesa);padding-top:.9rem}
.logros h3{font-size:1.05rem;margin-bottom:.3rem}
.logros p{font-size:.95rem;margin:0}

/* ---------- fondos ---------- */
.fondo-noche{background:var(--noche);color:#C9D6E2}
.fondo-noche h2,.fondo-noche h3{color:var(--blanco)}
.fondo-noche .intro{color:#9FB4C7}
.fondo-claro{background:var(--blanco);border-block:1px solid var(--papel-hondo)}

/* ---------- programa / sesiones ---------- */
.sesion{display:grid;grid-template-columns:auto 8.5rem 1fr;gap:0 1.5rem;align-items:baseline;
  padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.18)}
.sesion:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.sesion .n{font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;color:var(--turquesa);font-weight:700}
.sesion .cuando{font-size:.92rem;color:#9FB4C7}
.sesion h3{font-size:1.12rem;margin-bottom:.3rem}
.sesion p{font-size:.95rem;margin:0}

/* ---------- listas ---------- */
.incluye{list-style:none;padding:0;margin:1.2rem 0 0}
.incluye li{padding:.7rem 0 .7rem 1.8rem;position:relative;
  border-bottom:1px solid var(--papel-hondo);font-size:.97rem}
.incluye li::before{content:"";position:absolute;left:0;top:1.25rem;width:9px;height:9px;
  border-radius:50%;background:var(--turquesa)}

/* ---------- caja de precio ---------- */
.precio{background:var(--blanco);border:1px solid var(--papel-hondo);
  border-top:4px solid var(--noche);border-radius:6px;padding:1.8rem 1.6rem}
.precio .cifra{font-family:"Bricolage Grotesque",sans-serif;font-size:3rem;font-weight:700;
  color:var(--noche);line-height:1;letter-spacing:-0.03em;margin:0}
.precio .cifra span{font-size:1.1rem;font-weight:500;letter-spacing:0}
.precio .hasta{margin:.5rem 0 1.2rem;font-size:.94rem}
.precio .despues{font-size:.9rem;padding-top:1rem;border-top:1px solid var(--papel-hondo);
  margin:1.2rem 0 0;color:var(--tinta-suave)}
.pegajoso{position:sticky;top:5.5rem}

.qr{margin-top:1.2rem;display:flex;gap:1rem;align-items:center;font-size:.88rem}
.qr .marco{width:86px;height:86px;flex:none;border:1px dashed var(--tinta-suave);
  border-radius:4px;display:grid;place-items:center;font-size:.7rem;text-align:center;
  color:var(--tinta-suave);line-height:1.3;padding:.3rem}

/* ---------- formularios ---------- */
.formulario{max-width:520px}
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.9rem;font-weight:600;color:var(--noche);margin-bottom:.3rem}
.campo .ayuda{font-size:.83rem;color:var(--tinta-suave);margin:.25rem 0 0}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--papel-hondo);border-radius:4px;
  font-family:inherit;font-size:.97rem;color:var(--tinta);background:var(--blanco);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--turquesa)}
.campo.casilla{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem}
.campo.casilla input{width:auto;margin-top:.25rem}

/* ---------- acordeón ---------- */
details{background:var(--blanco);border:1px solid var(--papel-hondo);border-radius:5px;
  margin-bottom:.6rem;padding:0 1rem}
details summary{cursor:pointer;padding:.9rem 0;font-weight:600;color:var(--noche);font-size:.98rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--turquesa-hondo);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details .cuerpo{padding:0 0 1rem;font-size:.96rem}

/* ---------- avisos ---------- */
.aviso{padding:.85rem 1rem;border-radius:4px;font-size:.93rem;margin-bottom:1rem}
.aviso.rojo{background:var(--alerta);border:1px solid var(--alerta-borde);color:var(--alerta-texto)}
.aviso.verde{background:var(--ok);border:1px solid var(--ok-borde);color:var(--turquesa-hondo)}
.aviso.gris{background:var(--papel-hondo);color:var(--tinta)}
.oculto{display:none !important}

/* ---------- tabla ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--blanco)}
.tabla th,.tabla td{border:1px solid var(--papel-hondo);padding:.7rem .9rem;text-align:left}
.tabla th{background:var(--papel);width:38%;font-weight:600;color:var(--noche)}

/* ---------- migas ---------- */
.migas{font-size:.85rem;color:var(--tinta-suave);padding:1rem 0 0}
.migas a{color:var(--tinta-suave)}

/* ---------- dos columnas ---------- */
.dos{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.dos.igual{grid-template-columns:1fr 1fr}
.lateral{display:grid;grid-template-columns:230px 1fr;gap:2.2rem;align-items:start}

/* ---------- cierre ---------- */
.cierre{background:var(--noche);color:#C9D6E2;text-align:center;padding:3.8rem 0;
  background-image:radial-gradient(var(--turquesa) 1px,transparent 1px);
  background-size:22px 22px;background-position:center}
.cierre .caja{background:var(--noche);display:inline-block;padding:2.2rem 2.4rem;
  border-radius:6px;max-width:46ch}
.cierre h2{margin-inline:auto;color:var(--blanco)}
.cierre p{margin:.9rem auto 1.6rem}

/* ---------- pie ---------- */
.pie{background:var(--blanco);border-top:1px solid var(--papel-hondo);padding:2.4rem 0 1.6rem;font-size:.9rem}
.pie .columnas{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem}
.pie h4{font-size:.92rem;margin-bottom:.5rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.35rem}
.pie a{color:var(--tinta);text-decoration:none}
.pie a:hover{color:var(--turquesa-hondo)}
.pie .lema{font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;color:var(--noche);display:block;margin-bottom:.4rem}
.pie .legal{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--papel-hondo);
  color:var(--tinta-suave);font-size:.84rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* ---------- cargando ---------- */
.cargando{color:var(--tinta-suave);font-size:.95rem}

/* ---------- barra móvil fija ---------- */
.barra-movil{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .envoltura{grid-template-columns:1fr;gap:2rem}
  .dos,.dos.igual{grid-template-columns:1fr;gap:2rem}
  .lateral{grid-template-columns:1fr}
  .pie .columnas{grid-template-columns:1fr 1fr}
  .pegajoso{position:static}
}
@media (max-width:720px){
  body{font-size:16px}
  .abrir-menu{display:block}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--blanco);
    flex-direction:column;gap:0;padding:.5rem 4%;border-bottom:1px solid var(--papel-hondo);
  }
  .menu.abierto{display:flex}
  .menu li{border-bottom:1px solid var(--papel-hondo)}
  .menu li:last-child{border-bottom:none}
  .menu a{display:block;padding:.8rem 0}
  .sesion{grid-template-columns:auto 1fr;gap:.2rem 1rem}
  .sesion .cuando,.sesion div{grid-column:2}
  .pie .columnas{grid-template-columns:1fr}
  .barra-movil{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--blanco);border-top:1px solid var(--papel-hondo);
    padding:.7rem 4%;gap:.8rem;align-items:center;justify-content:space-between;
    box-shadow:0 -2px 12px rgba(14,35,64,.08);
  }
  .barra-movil .precio-movil{font-weight:600;color:var(--noche);font-size:.95rem;line-height:1.2}
  .barra-movil .precio-movil small{display:block;font-weight:400;color:var(--tinta-suave);font-size:.78rem}
  body.con-barra{padding-bottom:5rem}
}