/* =============================================================================
   ASTREA · CHECKOUT
   -----------------------------------------------------------------------------
   La marca de Astrea tal cual: magenta #e50097, negro puro, reglas finas y
   Anton en mayúsculas para los títulos. El turquesa (#0cc0df) se reserva para
   lo que sale bien, igual que en sus páginas de curso.

   Aquí NO se replica el lienzo de Canva de 1366px: un checkout tiene que
   funcionar y adaptarse, no escalarse. Lo que se mantiene es su letra, su
   color y su aire editorial.
   ========================================================================== */

@font-face{
  font-family:'Impact LT';
  src:url('../fonts/ImpactLTStd.woff2') format('woff2');
  font-display:swap;
}

:root{
  --magenta:#e50097;
  --magenta-d:#c1007f;
  --magenta-soft:#fdeaf6;
  --turquesa:#0cc0df;
  --turquesa-soft:#e6f9fd;
  --ink:#000;
  --mut:#6b6b6b;
  --line:#e0e0e0;
  --line-fuerte:#000;
  --soft:#f7f7f7;
  --mal:#c8102e;
  --mal-soft:#fdecee;

  --f-logo:'Impact LT',Impact,'Anton',sans-serif;
  --f-nav:'Bebas Neue',sans-serif;
  --f-display:'Anton',sans-serif;
  --f-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-alt:'DM Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* Mientras se comprueba si ya hay sesión, no se enseña nada a medias. */
body.arrancando .ck-wrap{visibility:hidden}

/* ═══════════════════════════════════════════════════════ cabecera y pie ══ */

.ck-top{
  border-bottom:2px solid var(--ink);
  padding:18px clamp(16px,5vw,56px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.ck-top__logo{
  font-family:var(--f-logo);
  font-size:clamp(28px,4.4vw,42px);
  line-height:1;color:var(--magenta);letter-spacing:.02em;
}
.ck-top__logo:hover{color:var(--ink)}
.ck-top__sello{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--f-nav);font-size:17px;letter-spacing:.06em;
  color:var(--mut);text-transform:uppercase;
}
.ck-top__sello svg{flex:none}

.ck-pie{
  border-top:1px solid var(--line);
  margin-top:64px;padding:26px clamp(16px,5vw,56px) 40px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:.85rem;color:var(--mut);
}
.ck-pie a{color:var(--magenta)}
.ck-pie a:hover{text-decoration:underline}
.ck-pie__marca{font-family:var(--f-logo);color:var(--ink);font-size:20px;letter-spacing:.06em}

/* ═════════════════════════════════════════════════════════════ armazón ══ */

.ck-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,5vw,56px)}

.ck-titulo{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,5.2vw,52px);line-height:1.02;
  margin:clamp(28px,4vw,48px) 0 6px;
}
.ck-bajada{color:var(--mut);font-size:1rem;max-width:60ch;margin-bottom:clamp(22px,3vw,34px)}

.ck{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:clamp(24px,3.4vw,52px);
  align-items:start;
}

/* ══════════════════════════════════════════════════════ pasos (columna) ══ */

.paso{border-top:2px solid var(--ink);padding:22px 0}
.paso:last-of-type{border-bottom:2px solid var(--ink)}

.paso__cab{
  display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:0;text-align:left;cursor:default;padding:0;
}
.paso__num{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--f-display);font-size:17px;line-height:1;padding-top:2px;
}
.paso--activo .paso__num{background:var(--magenta);border-color:var(--magenta);color:#fff}
.paso--hecho .paso__num{background:var(--turquesa);border-color:var(--turquesa);color:#fff}
.paso__tit{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(19px,2.4vw,25px);line-height:1.1;flex:1;
}
.paso__resumen{font-size:.86rem;color:var(--mut);flex-basis:100%;padding-left:48px;margin-top:2px}
.paso__cambiar{
  flex:none;background:none;border:0;cursor:pointer;
  font-family:var(--f-nav);font-size:16px;letter-spacing:.05em;
  color:var(--magenta);text-transform:uppercase;
}
.paso__cambiar:hover{color:var(--ink);text-decoration:underline}
.paso__cuerpo{padding:20px 0 4px 48px}
.paso:not(.paso--activo) .paso__cuerpo{display:none}

/* ═══════════════════════════════════════════════════════════ el pedido ══ */

.prod{display:flex;gap:16px;align-items:flex-start}
.prod__foto{
  width:96px;height:96px;flex:none;object-fit:cover;
  border:1px solid var(--line);background:var(--soft);
}
.prod__foto--vacia{display:grid;place-items:center;font-family:var(--f-logo);color:var(--magenta);font-size:20px}
.prod__tit{font-family:var(--f-display);text-transform:uppercase;font-size:1.24rem;line-height:1.12}
.prod__sub{font-size:.86rem;color:var(--mut);margin-top:3px}
.prod__desc{font-size:.9rem;color:#333;margin-top:9px;max-width:56ch}

/* Formas de pago de la Mentoría */
.opt-pago{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:9px;cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s;
}
.opt-pago:hover{border-color:var(--magenta)}
.opt-pago.sel{border-color:var(--magenta);background:var(--magenta-soft)}
.opt-pago__bd{flex:1;min-width:0}
.opt-pago__bd b{font-size:.95rem;display:block}
.opt-pago__bd span{font-size:.79rem;color:var(--mut);display:block;margin-top:2px}
.opt-pago__pr{font-family:var(--f-display);color:var(--magenta);font-size:1.16rem;white-space:nowrap}

/* Cupón */
.cupon{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.cupon__lb{font-size:.82rem;font-weight:700;display:block;margin-bottom:8px}
.cupon__linea{display:flex;gap:9px;flex-wrap:wrap}
.cupon__linea input{
  flex:1;min-width:150px;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;
}
.cupon__linea input:focus{outline:none;border-color:var(--magenta)}

/* ═════════════════════════════════════════════════════════ formularios ══ */

.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.82rem;font-weight:700}
.campo label .opt{font-weight:400;color:var(--mut)}
.campo input,.campo select{
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
  font-size:.95rem;background:#fff;width:100%;
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--magenta)}
.campo input[aria-invalid="true"]{border-color:var(--mal);background:var(--mal-soft)}
.campo__pista{font-size:.78rem;color:var(--mut)}
.campo__mal{font-size:.79rem;color:var(--mal);font-weight:700}

.conmutador{
  display:flex;gap:0;margin-bottom:20px;
  border:1.5px solid var(--ink);border-radius:11px;overflow:hidden;
}
.conmutador button{
  flex:1;background:#fff;border:0;cursor:pointer;padding:11px 10px;
  font-family:var(--f-nav);font-size:17px;letter-spacing:.05em;text-transform:uppercase;
}
.conmutador button[aria-pressed="true"]{background:var(--ink);color:#fff}
.conmutador button:not([aria-pressed="true"]):hover{background:var(--soft)}

/* ══════════════════════════════════════════════════════════════ avisos ══ */

.aviso{
  border-left:3px solid var(--mut);background:var(--soft);
  padding:12px 14px;font-size:.88rem;border-radius:0 8px 8px 0;
}
.aviso b{display:block;margin-bottom:3px}
.aviso--ok{border-left-color:var(--turquesa);background:var(--turquesa-soft)}
.aviso--mal{border-left-color:var(--mal);background:var(--mal-soft)}
.aviso--nota{border-left-color:var(--magenta);background:var(--magenta-soft)}
.aviso+.aviso{margin-top:10px}

/* ═══════════════════════════════════════════════════════════════ botón ══ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-nav);font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 30px;border-radius:11px;border:2px solid var(--magenta);
  background:var(--magenta);color:#fff;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover:not(:disabled){background:var(--magenta-d);border-color:var(--magenta-d)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--linea{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn--linea:hover:not(:disabled){background:#fff;color:var(--turquesa);border-color:var(--turquesa)}
.btn--ancho{width:100%}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}

/* ═══════════════════════════════════════════════════════════ el resumen ══ */

.resumen{
  position:sticky;top:22px;
  border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff;
}
/* Un punteado muy suave: la marca de Astrea no usa fondos planos. */
.resumen__cab{
  background:
    radial-gradient(circle at 1px 1px,rgba(229,0,151,.16) 1px,transparent 0) 0 0/13px 13px,
    linear-gradient(160deg,var(--magenta-soft),#fff 78%);
  border-bottom:2px solid var(--ink);
  padding:17px 20px;
}
.resumen__cab h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:1.13rem;line-height:1.1;letter-spacing:.01em;
}
.resumen__bd{padding:18px 20px}

.linea{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;padding:7px 0}
.linea--tenue{color:var(--mut)}
.linea--tachada .linea__v{text-decoration:line-through;color:var(--mut)}
.linea__v{font-weight:700;white-space:nowrap}
.linea--total{
  border-top:2px solid var(--ink);margin-top:11px;padding-top:13px;
  align-items:baseline;
}
.linea--total .linea__k{font-family:var(--f-display);text-transform:uppercase;font-size:1.02rem}
.linea--total .linea__v{font-family:var(--f-display);font-size:1.75rem;color:var(--magenta);line-height:1}
.linea__desde{font-size:.74rem;color:var(--mut);font-weight:400;display:block;text-align:right}

.resumen__nota{
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.81rem;color:var(--mut);line-height:1.5;
}
.resumen__nota b{color:var(--ink)}

.region-pie{margin-top:13px;font-size:.79rem;color:var(--mut)}
.region-pie button{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--magenta);text-decoration:underline;font-size:.79rem;
}
.region-pie select{
  margin-top:7px;width:100%;border:1.5px solid var(--line);
  border-radius:9px;padding:9px 10px;font-size:.85rem;
}

/* ══════════════════════════════════════════════════════════════ final ══ */

.final{max-width:660px;margin:clamp(30px,6vw,70px) auto;text-align:center}
.final__marca{
  width:74px;height:74px;margin:0 auto 20px;border-radius:50%;
  background:var(--turquesa);display:grid;place-items:center;color:#fff;
}
.final h1{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(27px,4.6vw,42px);line-height:1.05;margin-bottom:14px;
}
.final p{color:#333;margin-bottom:13px}
.final .acciones{justify-content:center}

.ficha-final{
  border:2px solid var(--ink);border-radius:14px;
  padding:18px 20px;margin:24px 0;text-align:left;
}
.ficha-final h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:1rem;margin-bottom:11px;
}

/* Esqueleto mientras carga */
.cargando{padding:40px 0;text-align:center;color:var(--mut)}
.cargando__barra{
  width:44px;height:3px;background:var(--magenta);margin:0 auto 14px;
  animation:ck-late 1.1s ease-in-out infinite;
}
@keyframes ck-late{0%,100%{opacity:.25;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.cargando__barra{animation:none}}

/* ════════════════════════════════════════════════════════════ responsive ══
   820px es el mismo corte que usan sus páginas (css/movil.css). */

@media (max-width:1000px){
  .ck{grid-template-columns:1fr}
  /* En pantalla estrecha el resumen va PRIMERO: lo que se compra, arriba. */
  .ck__col-resumen{order:-1}
  .resumen{position:static}
}

@media (max-width:820px){
  .ck-top{padding:14px 18px}
  .ck-top__sello{font-size:15px}
  .ck-wrap{padding:0 18px}
  .paso__cuerpo{padding-left:0}
  .paso__resumen{padding-left:48px}
  .campos{grid-template-columns:1fr}
  .acciones .btn{width:100%}
}

@media (max-width:480px){
  .ck-top__sello span{display:none}
  .prod{gap:12px}
  .prod__foto{width:72px;height:72px}
  .linea--total .linea__v{font-size:1.5rem}
}