/* ============================================================
   checkout.css — NetworkTech · Checkout por pasos
============================================================ */

/* ── Banner ─────────────────────────────────────────────── */
.co-banner {
  background: linear-gradient(90deg,#ff4500,#ff6a00,#ff9d00);
  color:#fff; font-size:.82rem; font-weight:500;
  padding:.55rem 0; text-align:center;
  position:fixed; top:68px; left:0; right:0; z-index:190;
}
.co-banner__inner { display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.co-banner__sep   { opacity:.5; }
.co-countdown     { font-family:var(--font-mono); letter-spacing:.06em; }

/* ── Página ─────────────────────────────────────────────── */
.checkout-page { background:var(--bg-alt); min-height:100vh; padding:132px 0 5rem; }

/* ── Stepper ────────────────────────────────────────────── */
.co-stepper { display:flex; align-items:center; justify-content:center; margin-bottom:2.5rem; }
.co-step {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:600; color:var(--muted2); transition:color .3s;
}
.co-step--active { color:var(--text); }
.co-step--done   { color:var(--clr-primary); cursor:pointer; }
.co-step__dot {
  width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800; color:var(--muted2); transition:all .3s;
}
.co-step--active .co-step__dot { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 0 0 5px rgba(255,106,0,.15); }
.co-step--done   .co-step__dot { background:var(--grad); border-color:transparent; color:#fff; }
.co-step__line   { width:80px; height:2px; background:var(--border); margin:0 .25rem 1.6rem; transition:background .3s; flex-shrink:0; }
.co-step__line--done { background:var(--clr-primary); }

/* ── Layout ─────────────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 360px; gap:1.8rem; align-items:start; }

/* ── Paneles de paso ────────────────────────────────────── */
.co-step-panel         { animation:coFadeUp .3s ease; }
.co-step-panel--hidden { display:none; }
@keyframes coFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── Cards ──────────────────────────────────────────────── */
.co-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem; margin-bottom:1.2rem; }
.co-card__head  { margin-bottom:1.4rem; }
.co-card__title { font-size:1.05rem; font-weight:800; margin-bottom:.2rem; }
.co-card__sub   { font-size:.8rem; color:var(--muted); }

/* ── Período ────────────────────────────────────────────── */
.co-period-row { display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.co-pill {
  padding:.45rem 1rem; border-radius:20px; border:1.5px solid var(--border);
  background:none; font-family:var(--font); font-size:.82rem; font-weight:700;
  cursor:pointer; color:var(--muted); transition:all .2s;
  display:flex; align-items:center; gap:.35rem;
}
.co-pill em { font-style:normal; font-size:.68rem; background:rgba(255,106,0,.1); color:var(--clr-secondary); border:1px solid rgba(255,106,0,.2); padding:.1rem .4rem; border-radius:10px; }
.co-pill:hover  { border-color:var(--border-accent); color:var(--text); }
.co-pill.active { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(255,106,0,.3); }
.co-pill.active em { background:rgba(255,255,255,.2); color:#fff; border-color:transparent; }

/* ── Plan card ──────────────────────────────────────────── */
.co-plan-card {
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,rgba(255,106,0,.04),rgba(255,157,0,.03));
  border:1.5px solid var(--border-accent); border-radius:var(--radius);
  padding:1.2rem 1.4rem; gap:1rem; margin-bottom:.9rem;
}
.co-plan-card__name { font-size:1rem; font-weight:800; margin-bottom:.5rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.co-plan-card__bullets { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .9rem; }
.co-plan-card__bullets li { font-size:.78rem; color:var(--muted); }
.co-plan-card__right  { text-align:right; flex-shrink:0; }
.co-plan-card__price  { font-size:1.9rem; font-weight:900; line-height:1; color:var(--text); display:flex; align-items:flex-start; gap:.1rem; }
.co-plan-card__price span:first-child { font-size:1rem; margin-top:.25rem; color:var(--muted); }
.co-plan-card__price small { font-size:.75rem; font-weight:500; color:var(--muted); align-self:flex-end; margin-bottom:.1rem; }
.co-plan-card__total { font-size:.75rem; color:var(--clr-secondary); font-weight:600; margin-top:.3rem; }

.co-change-btn { background:none; border:none; font-family:var(--font); font-size:.78rem; font-weight:700; color:var(--clr-primary); cursor:pointer; padding:0; transition:color .2s; }
.co-change-btn:hover { color:var(--clr-secondary); }
.co-plan-switcher { margin-top:1rem; }
.co-plan-opts     { display:flex; flex-direction:column; gap:.5rem; }
.co-plan-opt { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:.85rem; transition:all .2s; background:none; font-family:var(--font); width:100%; }
.co-plan-opt:hover  { border-color:var(--border-accent); }
.co-plan-opt.active { border-color:var(--clr-primary); background:rgba(255,106,0,.04); }
.co-plan-opt__name  { font-weight:700; }
.co-plan-opt__price { font-weight:800; color:var(--clr-primary); }

/* ── Dominio ────────────────────────────────────────────── */
.co-domain-tabs { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.co-dtab { display:flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:1.5px solid var(--border); border-radius:20px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; color:var(--muted); position:relative; }
.co-dtab input  { position:absolute; opacity:0; }
.co-dtab:hover  { border-color:var(--border-accent); color:var(--text); }
.co-dtab--active{ border-color:var(--clr-primary); color:var(--text); background:rgba(255,106,0,.04); }
.co-search-bar  { display:flex; margin-bottom:.5rem; }
.co-input--search { border-radius:var(--radius-sm) 0 0 var(--radius-sm) !important; border-right:none !important; flex:1; }
.co-search-bar .btn { border-radius:0 var(--radius-sm) var(--radius-sm) 0 !important; height:44px; }
.co-domain-result { padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.84rem; font-weight:600; margin-top:.5rem; }
.co-domain-result--ok  { background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.25); color:#15803d; }
.co-domain-result--err { background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.2);  color:#dc2626; }

/* ── Complementos ───────────────────────────────────────── */
.co-addons { display:flex; flex-direction:column; }
.co-addon  { display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.co-addon:first-child { padding-top:0; }
.co-addon:last-child  { border-bottom:none; padding-bottom:0; }
.co-addon__icon  { font-size:1.4rem; flex-shrink:0; }
.co-addon__body  { flex:1; }
.co-addon__body strong { font-size:.87rem; font-weight:700; display:block; margin-bottom:.12rem; }
.co-addon__body p { font-size:.77rem; color:var(--muted); }
.co-addon__price { font-size:.81rem; font-weight:700; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.co-toggle { width:44px; height:24px; border-radius:12px; background:var(--border); border:none; cursor:pointer; position:relative; transition:background .25s; flex-shrink:0; padding:0; }
.co-toggle[aria-checked="true"] { background:var(--grad); }
.co-toggle__knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .25s; }
.co-toggle[aria-checked="true"] .co-toggle__knob { transform:translateX(20px); }

/* ── Navegación pasos ───────────────────────────────────── */
.co-step-nav { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; margin-bottom:1.5rem; }
.co-final-note { text-align:center; font-size:.75rem; color:var(--muted2); margin-top:.65rem; }

/* ── Forms ──────────────────────────────────────────────── */
.co-form    { display:flex; flex-direction:column; gap:.9rem; }
.co-row     { display:grid; gap:.9rem; }
.co-row--2  { grid-template-columns:1fr 1fr; }
.co-row--3  { grid-template-columns:1fr 1fr 1fr; }
.co-field   { display:flex; flex-direction:column; gap:.3rem; }
.co-field--span2 { grid-column:span 2; }
.co-label   { font-size:.76rem; font-weight:700; }
.co-req     { color:var(--clr-primary); }
.co-input   { height:44px; padding:0 .9rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-family:var(--font); font-size:.88rem; transition:border-color .2s,box-shadow .2s; width:100%; }
.co-input:focus { outline:none; border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(255,106,0,.1); }
.co-input::placeholder { color:var(--muted2); }
.co-input--mono { font-family:var(--font-mono); letter-spacing:.05em; }
.co-select  { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:10px; padding-right:2.2rem; }
.co-input-wrap { position:relative; }
.co-input-wrap .co-input { padding-right:2.8rem; }
.co-eye { position:absolute; right:.7rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:.85rem; color:var(--muted); padding:0; }
.co-hint  { font-size:.75rem; color:var(--muted2); margin-top:.3rem; }
.co-link  { color:var(--clr-primary); font-weight:600; }
.co-link:hover { color:var(--clr-secondary); }
.co-free-badge { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:rgba(22,163,74,.1); color:#16a34a; border:1px solid rgba(22,163,74,.25); padding:.18rem .55rem; border-radius:4px; margin-left:.5rem; vertical-align:middle; }

/* ── Pago ───────────────────────────────────────────────── */
.co-pay-methods { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.co-pm { display:flex; align-items:center; gap:.8rem; padding:.8rem 1.1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:all .2s; position:relative; }
.co-pm input   { position:absolute; opacity:0; }
.co-pm:hover   { border-color:var(--border-accent); }
.co-pm--active { border-color:var(--clr-primary); background:rgba(255,106,0,.03); }
.co-pm__icon   { font-size:1.2rem; }
.co-pm__label  { font-size:.87rem; font-weight:700; flex:1; }
.co-pm__hint   { font-size:.73rem; color:var(--muted); }
.co-pm__brands { display:flex; align-items:center; gap:.3rem; }
.co-pay-panel         { margin-top:1rem; }
.co-pay-panel--hidden { display:none; }
.co-info-box { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.2rem; font-size:.86rem; color:var(--muted); }
.co-transfer-data { margin-top:.8rem; display:flex; flex-direction:column; gap:.45rem; }
.co-transfer-data div { display:flex; justify-content:space-between; font-size:.84rem; }
.co-transfer-data span { color:var(--muted2); }
.co-check { display:flex; align-items:flex-start; gap:.6rem; font-size:.81rem; color:var(--muted); cursor:pointer; margin-top:1.2rem; line-height:1.55; }
.co-check input { accent-color:var(--clr-primary); width:16px; height:16px; flex-shrink:0; margin-top:.15rem; }
.co-submit-btn { font-size:1.05rem !important; padding:.95rem 2.2rem !important; }
.co-submit-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ── Resumen ────────────────────────────────────────────── */
.checkout-aside { position:sticky; top:112px; }
.co-summary { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; position:relative; overflow:hidden; }
.co-summary::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.co-summary__title { font-size:.95rem; font-weight:800; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.co-summary__head  { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.co-summary__plan  { font-size:.92rem; font-weight:800; }
.co-summary__change { font-size:.72rem; font-weight:700; color:var(--clr-primary); background:none; border:none; cursor:pointer; transition:color .2s; padding:0; }
.co-summary__change:hover { color:var(--clr-secondary); }
.co-summary__lines { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.9rem; }
.co-summary__line  { display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); }
.co-free { font-size:.65rem; font-weight:800; background:rgba(22,163,74,.1); color:#16a34a; border:1px solid rgba(22,163,74,.22); padding:.15rem .5rem; border-radius:4px; }
.co-summary__divider { height:1px; background:var(--border); margin:.9rem 0; }
.co-summary__total { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; font-weight:700; margin-bottom:.3rem; }
.co-summary__total strong { font-size:1.5rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.co-summary__renew { font-size:.72rem; color:var(--muted2); margin-bottom:.9rem; }
.co-summary__trust { display:flex; flex-direction:column; gap:.38rem; margin-top:1rem; }
.co-ti { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted); }
.co-ti span { color:var(--clr-primary); font-weight:900; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:960px) {
  .checkout-layout { grid-template-columns:1fr; }
  .checkout-aside  { position:static; order:-1; }
  .co-step__line   { width:50px; }
}
@media (max-width:640px) {
  .checkout-page   { padding-top:120px; }
  .co-card         { padding:1.3rem; }
  .co-row--2,.co-row--3 { grid-template-columns:1fr; }
  .co-field--span2 { grid-column:span 1; }
  .co-plan-card    { flex-direction:column; align-items:flex-start; }
  .co-step__line   { width:28px; }
  .co-step__label  { font-size:.68rem; }
}