/* ==========================================================================
   Karonchi — página de venta, Academia y landing del Reto.
   Continúa el sistema definido en theme.css; usa sus mismos tokens.
   ========================================================================== */

/* ---------- lista de dolores ---------- */
.dolores{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);max-width:640px}
.dolores li{display:flex;gap:var(--s4);align-items:flex-start;background:var(--blanco);
  border-radius:12px;padding:var(--s4) var(--s5);box-shadow:var(--e1);
  font-size:1.02rem;line-height:1.6;transition:transform .34s var(--resorte)}
.dolores li:hover{transform:translateX(6px)}
.dolores .x{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:var(--pomp-oscuro);
  color:var(--blanco);display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-top:2px}

.incluye--ancha{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ---------- dos paneles de precio ---------- */
.precios-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:900px;margin-inline:auto}
.precios-par .panel{text-align:center}
.precios-par .monto.chico{font-size:clamp(1.2rem,2.4vw,1.5rem);opacity:.9}
.corte{border:0;border-top:1px solid rgba(248,244,236,.18);margin:var(--s5) 0}
@media(max-width:760px){.precios-par{grid-template-columns:1fr}}

.cupos-ancho{max-width:900px;margin:var(--s7) auto 0}
.cupos-ancho .fila{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);margin-bottom:var(--s3)}
.cupos-ancho b{font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--pomp-tinta);font-variant-numeric:tabular-nums}
.cupos-ancho .marcas i{background:var(--champagne);height:26px}
.cupos-ancho .marcas i.on{background:var(--pomp)}

/* ---------- Academia ---------- */
.puerta-cerrada{max-width:52ch;padding:var(--s8) 0}
.puerta-cerrada h1{font-size:clamp(1.8rem,4.6vw,2.8rem);margin:var(--s4) 0 var(--s5)}
.puerta-cerrada p{color:var(--taupe-texto);margin-bottom:var(--s7)}

.lista-modulos{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:var(--s3)}
.mod-fila{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;
  background:var(--blanco);border-radius:10px;padding:var(--s5);text-decoration:none;color:var(--carbon);
  box-shadow:var(--e1);transition:transform .34s var(--resorte),box-shadow .34s var(--suave)}
.mod-fila:hover{transform:translateX(6px);box-shadow:var(--e2)}
.mod-fila:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:3px}
.mod-n{font-family:var(--display);font-size:1.4rem;color:var(--pomp-tinta);
  font-variant-numeric:tabular-nums;line-height:1}
.mod-cuerpo{display:block}
.mod-tit{display:block;font-family:var(--display);font-size:1.3rem;line-height:1.2;letter-spacing:-.02em}
.mod-desc{display:block;font-size:.94rem;color:var(--taupe-texto);margin-top:var(--s1)}
.mod-dur{font-size:.8rem;color:var(--taupe-texto);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .mod-fila{grid-template-columns:auto 1fr;gap:var(--s4);padding:var(--s4)}
  .mod-dur{display:none}
  .mod-fila:hover{transform:none}
}

.volver{margin-bottom:var(--s5)}
.volver a{color:var(--taupe-texto);text-decoration:none;font-size:.9rem}
.volver a:hover{color:var(--pomp-tinta)}
.volver a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:3px;border-radius:3px}

.video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  box-shadow:var(--e3);background:var(--carbon)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.paso-modulos{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid var(--champagne)}
.paso-modulos a{color:var(--pomp-tinta);text-decoration:none;font-size:.94rem;font-weight:500;
  min-height:44px;display:inline-flex;align-items:center}
.paso-modulos a:hover{color:var(--carbon)}
.paso-modulos a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:3px;border-radius:3px}

/* ---------- Landing del Reto ---------- */
.mini{display:flex;justify-content:center;padding:var(--s5) 0 0}
.mini a{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;
  text-decoration:none;color:var(--carbon)}
.mini a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:4px}

.hero-reto{padding:var(--s7) 0 var(--s8);text-align:center;position:relative;overflow:hidden}
.hero-reto h1{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2rem,8.4vw,5.8rem);line-height:1.0;max-width:17ch;margin-inline:auto}
.hero-reto h1 em{font-style:italic}
.hero-reto .d-flota.uno{width:60px;height:60px;top:10%;left:8%}
.hero-reto .d-flota.dos{width:38px;height:38px;bottom:16%;right:9%;animation-delay:1.2s}
.bajada-reto{margin:var(--s6) auto 0;max-width:46ch;
  font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--taupe-texto)}
.fecha-chip{display:inline-flex;align-items:center;gap:var(--s2);background:var(--carbon);
  color:var(--marfil);border-radius:999px;padding:var(--s2) var(--s5);
  font-size:.8rem;font-weight:500;margin-bottom:var(--s6)}
.fecha-chip b{color:var(--lima);font-weight:700}
@media(max-width:640px){.hero-reto .d-flota{display:none}}

.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  font-family:var(--cuerpo);font-weight:700;font-size:1rem;min-height:60px;padding:0 var(--s7);
  border-radius:999px;text-decoration:none;background:var(--lima);color:var(--carbon);
  box-shadow:var(--e2);margin-top:var(--s7);border:2px solid transparent;
  transition:transform .32s var(--resorte),box-shadow .32s var(--suave),background .25s linear}
.btn-wa:hover{background:var(--lima-hondo);transform:translateY(-3px);box-shadow:var(--e3)}
.btn-wa:active{transform:translateY(-1px)}
.btn-wa:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.btn-wa .ic{width:22px;height:22px;flex:0 0 auto}
.nota-wa{font-size:.82rem;color:var(--taupe-texto);margin-top:var(--s3)}
@media(max-width:560px){.btn-wa{width:100%}}

.lista-dias{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:var(--s3)}
.dia{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;
  background:var(--blanco);border-radius:12px;padding:var(--s4) var(--s5);box-shadow:var(--e1);
  transition:transform .34s var(--resorte),box-shadow .34s var(--suave)}
.dia:hover{transform:translateX(6px);box-shadow:var(--e2)}
.dia .n{width:44px;height:44px;border-radius:999px;background:var(--lima);color:var(--carbon);
  display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;
  font-variant-numeric:tabular-nums}
.dia h3{font-family:var(--cuerpo);font-size:1.15rem;font-weight:600;letter-spacing:0}
.dia p{font-size:.92rem;color:var(--taupe-texto)}

.quien-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.foto-reto{position:relative}
.foto-reto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:6px}
.foto-reto::after{content:"";position:absolute;inset:0;background:var(--pomp);
  mix-blend-mode:multiply;opacity:.12;border-radius:6px}
.check{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.check li{display:flex;gap:var(--s3);align-items:baseline;font-size:1.02rem}
.check .tic{flex:0 0 auto;width:24px;height:24px;border-radius:999px;background:var(--lima);
  color:var(--carbon);display:grid;place-items:center;font-weight:700;font-size:.75rem;
  transform:translateY(4px)}
@media(max-width:860px){
  .quien-grid{grid-template-columns:1fr;gap:var(--s6)}
  .foto-reto{order:-1;max-width:420px;margin-inline:auto}
}

.cierre-reto{background:var(--carbon);color:var(--marfil);text-align:center;
  padding:var(--s9) 0;position:relative;overflow:hidden}
.cierre-reto h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.8rem,5.6vw,3.6rem);line-height:1.06;max-width:20ch;margin-inline:auto}
.cierre-reto h2 .lima{color:var(--lima)}
.cierre-reto p{color:rgba(248,244,236,.66);margin:var(--s4) auto 0;max-width:42ch}
.cierre-reto .d-flota{width:52px;height:52px;top:14%;right:10%}
@media(max-width:640px){.cierre-reto .d-flota{display:none}}

.pie-reto{padding:var(--s6) 0;text-align:center;font-size:.8rem;color:var(--taupe-texto)}

/* ---------- pedido de nombre a las alumnas migradas ---------- */
.pedir-nombre{background:var(--pomp-claro);border-radius:12px;padding:var(--s6);
  margin-bottom:var(--s7);max-width:560px}
.pedir-nombre label{display:block;font-family:var(--display);font-size:1.4rem;
  letter-spacing:-.02em;margin-bottom:var(--s2)}
.pedir-nombre .ayuda{font-size:.94rem;color:var(--taupe-texto);margin-bottom:var(--s5)}
.fila-nombre{display:flex;gap:var(--s3);flex-wrap:wrap}
.fila-nombre input{flex:1 1 220px;min-height:54px;padding:0 var(--s4);font-family:var(--cuerpo);
  font-size:1rem;color:var(--carbon);background:var(--blanco);
  border:1px solid var(--taupe);border-radius:999px}
.fila-nombre input:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:2px;
  border-color:var(--pomp-tinta)}
.fila-nombre .btn{flex:0 0 auto}
@media(max-width:560px){.fila-nombre .btn{width:100%}}

/* ---------- opciones de pago en la página de venta ---------- */
.precios-par .opcion{display:flex;flex-direction:column;gap:var(--s2)}
.precios-par .opcion .btn{margin-top:var(--s4);width:100%}
/* Variante para cualquier fondo oscuro, no solo los paneles de precio. */
.btn-linea.claro{color:var(--marfil);border-color:rgba(248,244,236,.45)}
.btn-linea.claro:hover{background:var(--marfil);color:var(--carbon);border-color:var(--marfil)}

/* aviso arriba del checkout */
.aviso-compra{background:var(--pomp-claro);color:var(--carbon);border-radius:10px;
  padding:var(--s4) var(--s5);margin-bottom:var(--s6);font-size:.98rem;line-height:1.6}
.aviso-compra a{color:var(--pomp-tinta);font-weight:600;text-underline-offset:3px}
.aviso-compra a:hover{color:var(--carbon)}
.aviso-compra a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:3px;border-radius:3px}

/* ---------- banner de cookies ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--carbon);
  color:var(--marfil);box-shadow:0 -8px 40px -12px rgba(42,36,32,.5)}
.cookies-in{width:min(1220px,100% - var(--s5));margin-inline:auto;
  display:flex;align-items:center;gap:var(--s6);padding:var(--s5) 0;flex-wrap:wrap}
.cookies-texto{flex:1 1 320px}
.cookies-texto p{font-size:.92rem;line-height:1.6}
.cookies-texto p:first-child{margin-bottom:var(--s1)}
.cookies-texto a{color:var(--lima);text-underline-offset:3px}
.cookies-texto a:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:3px}
.cookies-acciones{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cookies-check{display:inline-flex;align-items:center;gap:var(--s2);font-size:.88rem;
  min-height:44px;cursor:pointer}
.cookies-check input{width:18px;height:18px;accent-color:var(--lima);cursor:pointer}
.cookies .btn{min-height:46px;font-size:.82rem;padding:0 var(--s5)}
.cookies .btn-linea{color:var(--marfil);border-color:rgba(248,244,236,.45);background:transparent}
.cookies .btn-linea:hover{background:var(--marfil);color:var(--carbon);border-color:var(--marfil)}
@media(max-width:760px){
  .cookies-in{gap:var(--s4);padding:var(--s4) 0}
  .cookies-acciones{width:100%}
  .cookies .btn{flex:1 1 100%}
}

/* enlace de cookies en el pie */
.pie-link-boton{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:rgba(248,244,236,.85);text-decoration:underline;text-underline-offset:3px}
.pie-link-boton:hover{color:var(--lima)}
.pie-link-boton:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:3px}

/* casilla de renuncia al desistimiento, en el checkout */
.k-renuncia{background:var(--pomp-claro);border-radius:10px;padding:var(--s4) var(--s5);
  margin:var(--s5) 0}
.k-renuncia label{display:flex;gap:var(--s3);align-items:flex-start;
  font-size:.94rem;line-height:1.6;cursor:pointer}
.k-renuncia input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--pomp-tinta)}

/* huecos por completar en los textos legales */
.entrada mark{background:#FFE9A8;padding:2px 6px;border-radius:3px;color:var(--carbon);font-weight:500}
.entrada table{width:100%;border-collapse:collapse;margin:var(--s5) 0;font-size:.94rem}
.entrada th,.entrada td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--champagne);
  vertical-align:top}
.entrada th{font-weight:600;color:var(--carbon)}
.entrada td{color:var(--taupe-texto)}

/* ---------- Reto: secciones nuevas del mock de la jefa ---------- */

/* dolores */
/* Cinco frases en tres columnas dejan dos huerfanas abajo a la izquierda. En
   dos columnas centradas la ultima queda al medio y la seccion se lee pareja. */
.dolores{list-style:none;margin:var(--s7) auto 0;padding:0;max-width:760px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.dolores li{flex:1 1 330px;max-width:360px;
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--blanco);border-radius:12px;padding:var(--s4) var(--s5);
  box-shadow:var(--e1)}
.dolores li span:last-child{font-size:.98rem;line-height:1.5}
.dolores-cierre{text-align:center;margin-top:var(--s7);
  font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.45rem);font-style:italic}
.dolores-btn{text-align:center;margin-top:var(--s5)}

/* cuatro pasos */
.pasos{list-style:none;counter-reset:none;margin:var(--s7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.paso{background:var(--blanco);border:1px solid var(--champagne);border-radius:14px;
  padding:var(--s5)}
.paso-n{display:block;font-family:var(--display);font-style:italic;font-size:1.7rem;
  color:var(--pomp-tinta);margin-bottom:var(--s3);line-height:1}
.paso h3{font-size:1.02rem;margin:0 0 var(--s2)}
.paso p{font-size:.9rem;color:var(--taupe-texto);margin:0}
.pasos-fechas{text-align:center;margin-top:var(--s6);color:var(--taupe-texto);font-size:.95rem}
.pasos-fechas b{color:var(--carbon)}

/* quién soy y qué pasa después */
.quien-p{color:var(--taupe-texto);margin-bottom:var(--s4);max-width:52ch}
.despues{max-width:60ch;margin-inline:auto;text-align:center;
  font-family:var(--display);font-size:clamp(1.1rem,2.3vw,1.4rem);line-height:1.45}

@media(max-width:860px){
  .pasos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pasos{grid-template-columns:1fr}
  .dolores{grid-template-columns:1fr}
  .dolores-btn .btn-wa{width:100%}
}

/* En pantallas chicas el chip se parte en tres renglones desparejos. Envuelto
   y centrado se lee como una sola etiqueta. */
@media(max-width:560px){
  .fecha-chip{flex-wrap:wrap;justify-content:center;text-align:center;
    line-height:1.5;padding-inline:var(--s4)}
}

/* ---------- Reto: composicion alineada, como el mock de la jefa ---------- */

/* Hero a dos columnas: texto a la izquierda, foto al costado. Antes estaba
   todo centrado y la clienta pidio explicitamente que no. */
.rt-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;text-align:left}
.rt-hero-texto h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:var(--s4) 0 var(--s5);
  max-width:18ch}
.rt-hero .bajada-reto{margin:0 0 var(--s5);max-width:46ch}
.rt-hero .fecha-chip{margin-bottom:0}

.rt-datos{list-style:none;margin:0 0 var(--s6);padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);
  font-size:.92rem;color:var(--taupe-texto)}
.rt-datos li{display:flex;align-items:center;gap:var(--s4)}
.rt-datos li:not(:last-child)::after{content:"·";color:var(--taupe)}
.rt-datos b{color:var(--carbon);font-weight:700}

.rt-hero-btns{display:flex;flex-wrap:wrap;gap:var(--s3)}

.rt-hero-foto{position:relative}
.rt-hero-foto img{width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:var(--e2)}

/* Titulos de seccion: a la izquierda, no centrados.
   El ancho se mide en caracteres, no en columnas: 28ch parte un titulo largo
   en once renglones. 34ch deja dos o tres, que es como se lee un titular. */
.rt-h2{max-width:34ch;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.16}
.reto .cab{max-width:none}
.reto .cab{text-align:left;margin-inline:0}
.reto .dolores{justify-content:flex-start;margin-inline:0;max-width:none}
.reto .dolores-cierre{text-align:left}
.reto .dolores-btn{text-align:left}
.reto .pasos-fechas{text-align:left}

/* Que pasa despues: caja con icono al costado, no un parrafo centrado. */
.despues-caja{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  align-items:center;background:var(--champagne);border-radius:16px;
  padding:clamp(1.5rem,4vw,2.4rem)}
.despues-ic{width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--pomp);color:var(--blanco);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center}
.despues-caja p{font-size:1.02rem;line-height:1.6;max-width:62ch;margin:0}

/* ---------- el formulario ---------- */
.rt-anotarme{position:relative;overflow:hidden;padding:var(--s9) 0;
  background:var(--carbon)}
.rt-form-caja{max-width:560px;position:relative;z-index:1}
.rt-form-cab{margin-bottom:var(--s6)}
.rt-form-cab .et{color:var(--lima)}
.rt-form-cab h2{color:var(--marfil);font-size:clamp(1.6rem,3.4vw,2.2rem);
  margin:var(--s3) 0 var(--s4);max-width:20ch}
.rt-form-cab p{color:rgba(248,244,236,.72);max-width:50ch}

.rt-form .campo label{color:var(--marfil)}
.rt-form .campo small{color:rgba(248,244,236,.55)}
.rt-form .campo input{background:rgba(248,244,236,.06);border-color:rgba(248,244,236,.28);
  color:var(--marfil)}
.rt-form .campo input::placeholder{color:rgba(248,244,236,.38)}
.rt-form .campo input:focus{border-color:var(--lima);
  box-shadow:0 0 0 3px rgba(217,224,75,.22);background:rgba(248,244,236,.1)}
.campo-opt{font-weight:400;font-size:.76rem;color:rgba(248,244,236,.5);
  margin-left:var(--s2)}

/* La arroba va dentro del campo, para que nadie la escriba dos veces. */
.campo-arroba{position:relative;display:block}
.campo-arroba::before{content:"@";position:absolute;left:var(--s4);top:50%;
  transform:translateY(-50%);color:rgba(248,244,236,.45);font-size:1rem;
  pointer-events:none}
.campo-arroba input{padding-left:calc(var(--s4) + 1.1rem)}

.rt-form .aviso--mal{background:rgba(248,244,236,.07);
  border:1px solid rgba(248,244,236,.18);border-left:3px solid var(--lima)}
.rt-form .aviso b{color:var(--marfil)}
.rt-form .aviso p,.rt-form .aviso li{color:rgba(248,244,236,.72)}

/* ---------- ya se anoto ---------- */
.rt-listo{text-align:left}
.rt-listo-ic{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--lima);
  color:var(--carbon);font-size:1.5rem;font-weight:700;margin-bottom:var(--s5)}
.rt-listo h2{color:var(--marfil);font-size:clamp(1.7rem,3.6vw,2.4rem);
  margin:0 0 var(--s4);max-width:20ch}
.rt-listo > p{color:rgba(248,244,236,.75);max-width:46ch;margin:0 0 var(--s6)}
.rt-listo-nota{color:rgba(248,244,236,.5);font-size:.85rem;margin-top:var(--s4)}
.btn-wa--grande{font-size:1.05rem;padding:var(--s4) var(--s6)}

@media(max-width:860px){
  .rt-hero{grid-template-columns:1fr}
  .rt-hero-foto{order:-1}
  .rt-hero-foto img{aspect-ratio:16/11;object-fit:cover;object-position:center 25%}
  .despues-caja{grid-template-columns:1fr;text-align:left}
}
@media(max-width:560px){
  .rt-hero-btns .btn{width:100%}
  .rt-datos{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .rt-datos li:not(:last-child)::after{display:none}
  .btn-wa--grande{width:100%}
}

/* El destello de esta seccion competia con el formulario: se achica, se corre
   al borde y se baja la opacidad. Es un acento, no un protagonista. */
.rt-anotarme .d-flota{width:120px;height:120px;top:auto;bottom:8%;left:-40px;
  opacity:.22;z-index:0}
@media(max-width:980px){.rt-anotarme .d-flota{display:none}}

/* Los titulos de esta seccion heredaban el interlineado suelto del display.
   En dos renglones cortos quedaba un hueco raro entre lineas. */
.rt-form-cab h2,.rt-listo h2{line-height:1.14}
.rt-listo > p{margin-bottom:var(--s5)}
.rt-listo-nota{margin-top:var(--s3)}

/* En celular la foto se recorta a 16/11 y la chapa quedaba sobre la cara.
   Abajo a la izquierda cae sobre el fondo. */
@media(max-width:860px){
  .rt-hero-foto .chapa{top:auto;right:auto;bottom:var(--s3);left:var(--s3)}
}

/* ---------- selector de region en el checkout ---------- */
.k-region{background:var(--blanco);border:1px solid var(--champagne);border-radius:12px;
  padding:var(--s5);margin-bottom:var(--s6)}
.k-region-titulo{margin:0 0 var(--s4);font-weight:600;font-size:.95rem}
.k-region-ops{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.k-region-op{display:flex;flex-direction:column;gap:2px;padding:var(--s4);
  border:1.5px solid var(--champagne);border-radius:10px;text-decoration:none;
  color:var(--carbon);background:var(--marfil);
  transition:border-color .2s linear,background .2s linear}
.k-region-op b{font-size:1rem}
.k-region-op span{font-size:.85rem;color:var(--taupe-texto)}
.k-region-op:hover{border-color:var(--pomp)}
/* La activa se marca con el rosa de la marca, no solo con un borde: tiene que
   verse de un vistazo cual esta elegida. */
.k-region-op--activa{border-color:var(--pomp-tinta);background:var(--pomp-claro)}
.k-region-op--activa b::after{content:" ✓";color:var(--pomp-tinta)}
.k-region-precio{margin:var(--s4) 0 0;font-size:.95rem;color:var(--taupe-texto)}
.k-region-precio a{color:var(--pomp-tinta);text-underline-offset:3px}
@media(max-width:560px){.k-region-ops{grid-template-columns:1fr}}


/* ==========================================================================
   Página de venta (Programa Presencia)

   Misma paleta que la Home y Contacto: nada de fondos oscuros. Lo que cambia
   es cómo se organiza la página, que es lo que hace que se note que estás en
   otro lado:

   1. La Home apoya tarjetas blancas sobre fondos de color. Acá se invierte:
      una lámina blanca grande sostiene el contenido sobre el marfil.
   2. Los encabezados van centrados. En la Home van todos a la izquierda.
   3. Un filete lima recorre la lámina: el acento de Instagram, usado como
      marca de página y no como relleno.
   ========================================================================== */

/* ---------- hero ---------- */
.vt-hero{position:relative;overflow:hidden;background:var(--marfil);
  padding:var(--s8) 0 var(--s7)}
.vt-hero .d-flota.uno{width:70px;height:70px;top:14%;right:7%}
.vt-hero .d-flota.dos{width:40px;height:40px;bottom:18%;left:4%;animation-delay:1.1s}

.vt-hero-in{position:relative;z-index:1;text-align:center}
.vt-hero .et{display:block;text-wrap:balance}
/* Ancho en píxeles, no en ch: la 'ch' de Instrument Serif es muy angosta y
   una medida en ch apila el titular palabra por palabra. 620px es el ancho
   al que este titular cae en tres líneas parejas. */
.vt-hero-txt{max-width:min(100%,660px);margin-inline:auto}
.vt-hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.06;margin-top:var(--s4);
  overflow-wrap:normal;hyphens:none;text-wrap:balance;
  max-width:min(100%,620px);margin-inline:auto}
/* La palabra que da nombre al programa, en rosa tinta: un solo acento. */
.vt-hero h1 em{font-style:italic;color:var(--pomp-tinta)}
.vt-hero-apoyo{max-width:52ch;margin:var(--s5) auto 0}
.vt-bajada{font-size:1.05rem;color:var(--taupe-texto)}
.vt-hero .hero-acciones{margin-top:var(--s6);justify-content:center}

/* ---------- ficha de datos duros ----------
   Los cuatro datos que se miran antes de leer nada. Van sobre la lámina
   blanca, que arranca acá y le da a la página su superficie propia. */
.vt-ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  margin:var(--s7) auto 0;padding:var(--s6);
  max-width:1000px;background:var(--blanco);border-radius:14px;
  box-shadow:var(--e1);border-top:3px solid var(--lima);
  text-align:left}
.vt-ficha div{display:flex;flex-direction:column;gap:var(--s2)}
.vt-ficha dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--taupe-texto)}
.vt-ficha dd{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.15;
  letter-spacing:-.01em;color:var(--carbon)}

/* ---------- ritmo de las secciones ----------
   Encabezado centrado: la marca de agua de esta página. */
.vt-seccion .cab{max-width:46ch;margin-inline:auto;margin-bottom:var(--s7);
  text-align:center}
.vt-seccion .cab h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08}
.vt-seccion .cab p{max-width:52ch;margin-inline:auto}

/* Las tarjetas se alinean en grilla pareja, no centradas (eso es del Reto). */
/* Dos y dos, centradas. Con auto-fit el navegador metía tres arriba y una
   suelta abajo; acá las columnas son fijas para que las cuatro queden en dos
   filas parejas. */
.vt-seccion .dolores{max-width:880px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3)}
.vt-seccion .dolores li{max-width:none;flex:initial}

/* Cinco ítems: tres arriba, dos abajo centradas.
   La segunda fila arranca en la mitad de una columna, y por eso cada una de
   las dos últimas ocupa dos de las seis medias columnas de la grilla. */
.vt-seccion .incluye--ancha{max-width:1060px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.vt-seccion .incluye--ancha li{grid-column:span 2}
.vt-seccion .incluye--ancha li:nth-child(4){grid-column:2 / span 2}
.vt-seccion .incluye--ancha li:nth-child(5){grid-column:4 / span 2}

/* ---------- índice de los 13 módulos ----------
   En la Home los módulos son tarjetas sueltas. Acá el mismo contenido se lee
   como un índice sobre lámina blanca: una lista larga que se recorre de un
   vistazo. Es la firma de la página. */
.vt-indice-lamina{background:var(--blanco);border-radius:14px;
  padding:var(--s7) var(--s7) var(--s6);box-shadow:var(--e1);
  border-top:3px solid var(--lima)}
.vt-modulos{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s8)}
.vt-modulos li{display:flex;align-items:baseline;gap:var(--s5);
  break-inside:avoid;padding:var(--s4) 0;
  border-bottom:1px solid var(--champagne)}
.vt-modulos li:last-child{border-bottom:0}
.vt-mod-n{flex:0 0 auto;font-size:.72rem;letter-spacing:.14em;font-weight:600;
  color:var(--pomp-tinta);font-variant-numeric:tabular-nums}
.vt-mod-t{font-family:var(--display);font-size:clamp(1.1rem,1.9vw,1.5rem);
  line-height:1.2;letter-spacing:-.02em}

@media(max-width:900px){
  /* En pantalla angosta las grillas se apilan: una sola columna. */
  .vt-seccion .dolores{grid-template-columns:1fr}
  .vt-seccion .incluye--ancha{grid-template-columns:1fr}
  .vt-seccion .incluye--ancha li,
  .vt-seccion .incluye--ancha li:nth-child(4),
  .vt-seccion .incluye--ancha li:nth-child(5){grid-column:auto}

  .vt-hero{padding-top:var(--s7)}
  .vt-hero-txt{max-width:none}
  /* En pantalla angosta el titular gana tamaño: es lo primero que se lee. */
  .vt-hero h1{font-size:clamp(1.85rem,7.4vw,2.6rem);max-width:none}
  /* Los destellos se sacan en pantalla angosta: no hay margen libre donde
     ponerlos sin que pisen el titular o asomen detrás de la ficha. Es lo
     mismo que hace el hero de la Home. */
  .vt-hero .d-flota{display:none}
  .vt-ficha{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4);
    margin-top:var(--s6);padding:var(--s5)}
  .vt-modulos{columns:1}
  .vt-indice-lamina{padding:var(--s6) var(--s5) var(--s5)}
}
@media(max-width:560px){
  .vt-hero .hero-acciones .btn{width:100%}
  .vt-ficha dd{font-size:1.15rem}
}

/* ==========================================================================
   Landing de la masterclass

   Una sola pantalla: texto a la izquierda, formulario a la derecha, sin nada
   más. Quien llega acá ya vio el anuncio y ya decidió; lo único que tiene que
   hacer es encontrar dónde anotarse sin scrollear.

   Por eso la grilla es de dos columnas y el alto mínimo es el de la ventana:
   en escritorio todo entra de una. En celular se apila, con el formulario
   debajo del título.
   ========================================================================== */

.mc-main{position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:var(--s7) 0 var(--s8)}

.mc-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:1}

/* ---------- Izquierda: el texto ---------- */

/* El titular manda: es lo primero que se lee y lo que decide si sigue. */
.mc-texto h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1;
  margin:var(--s4) 0 var(--s5)}
.mc-bajada{color:var(--taupe-texto);max-width:46ch;font-size:1.02rem}

/* La fecha en tarjeta: es el dato que la gente vuelve a buscar. */
.mc-cuando{display:inline-flex;flex-direction:column;gap:2px;
  margin:var(--s6) 0 0;padding:var(--s4) var(--s5);
  background:var(--pomp-claro);border-left:3px solid var(--pomp-oscuro);
  border-radius:0 10px 10px 0}
.mc-cuando b{font-size:1.1rem;color:var(--carbon)}
.mc-cuando span{color:var(--taupe-texto);font-size:.92rem}

/* ---------- Derecha: el formulario ---------- */

.mc-caja{background:var(--carbon);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--e3)}
.mc-caja-titulo{color:var(--marfil);font-size:1.45rem;margin:0}

/* Sobre el fondo oscuro, los campos invierten como en la landing del Reto. */
.mc-form{margin-top:var(--s5)}
.mc-form .campo{margin-bottom:var(--s4)}
.mc-form .campo label{color:var(--marfil)}
.mc-form .campo small{color:rgba(248,244,236,.55)}
.mc-form .campo input{background:rgba(248,244,236,.06);
  border-color:rgba(248,244,236,.28);color:var(--marfil)}
.mc-form .campo input::placeholder{color:rgba(248,244,236,.38)}
.mc-form .campo input:focus{border-color:var(--lima);
  box-shadow:0 0 0 3px rgba(217,224,75,.25)}
.mc-form .aviso--mal{background:rgba(248,244,236,.07)}
.mc-form .aviso b{color:var(--marfil)}
.mc-form .aviso p,.mc-form .aviso li{color:rgba(248,244,236,.72)}

/* Nombre y apellido en la misma fila: dos campos cortos, uno debajo del otro
   alarga la caja sin necesidad. */
.mc-dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* ---------- Ya se anotó ---------- */

.mc-listo{text-align:left}
.mc-listo-ic{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--lima);
  color:var(--carbon);font-size:1.3rem;margin-bottom:var(--s4)}
.mc-listo h2{color:var(--marfil);font-size:1.6rem;margin:0 0 var(--s3)}
.mc-listo > p{color:rgba(248,244,236,.75);margin:0 0 var(--s5);font-size:.95rem}
.mc-nota{color:rgba(248,244,236,.5);font-size:.82rem;margin-top:var(--s4)}

/* El ID y el código: el plan B si el enlace se rompe al copiarse.
   Monoespaciada porque son datos que se transcriben a mano. */
.mc-zoom-datos{list-style:none;margin:var(--s5) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s5)}
.mc-zoom-datos li{display:flex;flex-direction:column;gap:2px}
.mc-zoom-datos span{color:rgba(248,244,236,.55);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase}
.mc-zoom-datos b{color:var(--marfil);font-size:1rem;font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.04em}

/* ---------- Pantalla angosta ---------- */

@media(max-width:900px){
  /* Se apila y se suelta el alto fijo: forzar 100svh con el formulario debajo
     dejaría media pantalla vacía antes de poder anotarse. */
  .mc-main{min-height:0;padding:var(--s6) 0 var(--s7);display:block}
  .mc-grid{grid-template-columns:1fr;gap:var(--s6)}
  .mc-texto h1{font-size:clamp(1.9rem,7.2vw,2.5rem)}
  .mc-bajada{max-width:none}
  .mc-cuando{display:flex}
  /* El destello se saca: no hay margen libre donde ponerlo sin pisar el
     titular. Es lo mismo que hacen el hero de la Home y el del Reto. */
  .mc-main .d-flota{display:none}
}

@media(max-width:560px){
  .mc-dos{grid-template-columns:1fr;gap:0}
  .mc-caja{padding:var(--s5) var(--s4);border-radius:14px}
}