/* =========================================================
   Pagina de asesorias (consultation.html / asesoria.html)
   Se carga despues de styles.css
   ========================================================= */

.book-hero{position:relative;background:var(--ink);color:#fff;padding:128px 0 60px;overflow:hidden}
.book-hero .wrap{position:relative}
.book-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.02em;margin:0 0 16px;max-width:20ch}
.book-hero .lede{max-width:44em}
.book-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.book-trust li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;border:1px solid var(--line-dark);background:rgba(255,255,255,.05);font-size:13px;color:rgba(255,255,255,.84)}
.book-trust svg{width:15px;height:15px;color:var(--gold-2);stroke-width:2}

.book{background:var(--paper);padding:48px 0 96px}

/* pasos */
.book-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 30px;padding:0;counter-reset:paso}
.book-steps li{counter-increment:paso;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--muted);padding:7px 14px 7px 7px;border-radius:100px;background:#fff;border:1px solid var(--line)}
.book-steps li::before{content:counter(paso);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--paper-2);color:var(--muted);font-size:12px}
.book-steps li.is-done::before{content:"✓";background:var(--gold);color:#1d1503}
.book-steps li.is-current{color:var(--ink);border-color:rgba(194,154,69,.6)}
.book-steps li.is-current::before{background:var(--ink);color:var(--gold-2)}

/* bloques */
.book-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;margin-bottom:22px;box-shadow:var(--shadow-sm);scroll-margin-top:100px}
.book-block h2{font-size:1.4rem;color:var(--ink);margin:0 0 6px}
.book-block .sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}

/* modalidades */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:10px}
.mode-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 22px 20px;border-radius:16px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;outline:none}
.mode-card:hover{border-color:rgba(194,154,69,.6);transform:translateY(-3px);box-shadow:var(--shadow)}
.mode-card:focus-visible{box-shadow:0 0 0 3px rgba(194,154,69,.45)}
.mode-card[aria-checked="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,154,69,.22),var(--shadow)}
.mode-badge{position:absolute;top:-12px;left:20px;background:var(--ink);color:var(--gold-2);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:100px}
.mode-urgent .mode-badge{background:#B3261E;color:#fff}
.mode-name{font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);line-height:1.25}
.mode-price{font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1.05}
.mode-price small{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);margin-top:6px}
.mode-price .price-pending{font-size:1.05rem;color:var(--muted)}
.mode-desc{font-size:14px;color:var(--muted);line-height:1.6}
.mode-card .ticks{margin:2px 0 0}
.mode-pick{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink)}
.mode-card[aria-checked="true"] .mode-pick{color:var(--gold)}

/* fecha y hora */
.when-label{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 10px}
.days,.hours{display:flex;flex-wrap:wrap;gap:10px}
.when-hours{margin-top:24px}
.day-pill,.hour-pill{font-family:var(--sans);cursor:pointer;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:9px 14px;color:var(--ink);transition:border-color .2s ease,background .2s ease}
.day-pill{display:flex;flex-direction:column;align-items:center;min-width:74px}
.day-pill b{font-size:19px;line-height:1.15}
.day-pill span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hour-pill{display:flex;flex-direction:column;align-items:flex-start;min-width:150px;text-align:left}
.hour-pill b{font-size:15px}
.hour-pill span{font-size:12px;color:var(--muted)}
.day-pill:hover,.hour-pill:hover{border-color:rgba(194,154,69,.7)}
.day-pill[aria-pressed="true"],.hour-pill[aria-pressed="true"]{border-color:var(--gold);background:#FBF6EA}
.hour-pill:disabled{cursor:not-allowed;opacity:.45;background:var(--paper)}
.hour-pill:disabled b{text-decoration:line-through}
.when-note{font-size:13.5px;color:var(--muted);margin:0}

/* formulario sobre fondo claro */
.book-form{display:grid;gap:16px}
.book .field label{color:var(--ink)}
.book .field input,.book .field select,.book .field textarea{color:var(--text);background-color:#fff;border-color:rgba(11,27,43,.2)}
.book .field select,.book .field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C29A45' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat}
.book .field input::placeholder,.book .field textarea::placeholder{color:#8A96A3}
.book .field input:focus,.book .field select:focus,.book .field textarea:focus{background-color:#fff;border-color:var(--gold)}
.book .field select option{background:#fff;color:var(--text)}
.book .field-hint{color:var(--muted)}
.book .field-hint.is-warn{color:#8A6A1F}
.book .field-hint.is-error{color:#B3261E}
.book .field.has-error .phone-group select,.book .field.has-error .phone-group input{border-color:#B3261E}
.book .check{color:var(--muted)}

/* resumen y pago */
.book-summary{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;padding:18px 20px;border-radius:14px;background:var(--paper);border:1px solid var(--line);margin:8px 0 18px;font-size:14.5px}
.book-summary dt{color:var(--muted)}
.book-summary dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.book-summary .total{padding-top:10px;border-top:1px solid var(--line);font-size:17px;color:var(--ink)}
.btn-pay{font-size:16px;padding:18px 28px}
.btn-pay:disabled{opacity:.6;cursor:progress;transform:none}
.book-safe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted)}
.book-safe li{display:inline-flex;align-items:center;gap:6px}
.book-safe svg{width:14px;height:14px;color:var(--gold);stroke-width:2}
.book .form-note{color:var(--muted);text-align:center;margin-top:12px}
.book .form-note.err{color:#B3261E}

/* confirmacion */
.book-done{text-align:center;padding:48px 30px}
.done-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.done-ic svg{width:32px;height:32px;stroke-width:2}
.book-done h2{font-size:1.7rem}
.book-done p{max-width:48ch;margin:10px auto 22px;color:var(--muted)}

@media (max-width:900px){
  .modes{grid-template-columns:1fr;gap:22px}
}
@media (max-width:620px){
  .book-hero{padding:104px 0 44px}
  .book-block{padding:22px 18px}
  .hour-pill{min-width:calc(50% - 5px)}
  .book-steps li{font-size:12px}
}

/* hero de la pagina de asesorias: texto + tarjeta de beneficios */
.book-hero .hero-bg{position:absolute;inset:0}
.book-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:52px;align-items:center}
.book-card{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:18px;padding:28px 26px}
.book-card-t{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:#fff;margin:0 0 4px}
.book-card .ticks{margin:14px 0 0}
.book-card .ticks li{color:rgba(255,255,255,.84);font-size:14.5px}
.book-wrap{max-width:1080px}
.book-block .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.book .form-note a{color:inherit;font-weight:600}
@media (max-width:900px){
  .book-hero-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:620px){
  .book-block .field-row{grid-template-columns:1fr}
}

/* ventana de pago sobre la pagina (link de Wompi en iframe) */
.pay-open,.pay-open body{overflow:hidden}
.pay-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:16px;background:rgba(11,27,43,.72);backdrop-filter:blur(3px);animation:payIn .2s ease}
@keyframes payIn{from{opacity:0}to{opacity:1}}
.pay-modal.is-precarga{visibility:hidden;pointer-events:none;animation:none}
/* ancho suficiente para que Wompi muestre dos columnas: logo a la izquierda, metodos de pago a la derecha */
.pay-panel{display:flex;flex-direction:column;width:100%;max-width:1040px;height:min(800px,calc(100vh - 32px));height:min(800px,calc(100dvh - 32px));background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.pay-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px 9px 18px;border-bottom:1px solid var(--line);background:var(--ink);color:#fff}
.pay-title{display:flex;align-items:center;gap:10px;margin:0;font-weight:600;font-size:15px}
.pay-title svg{width:20px;height:20px;color:var(--gold-2);stroke-width:2;flex:0 0 20px}
.pay-title span{display:flex;flex-direction:column;line-height:1.3}
.pay-title small{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.66)}
.pay-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pay-close:hover{background:rgba(255,255,255,.1)}
.pay-frame{position:relative;flex:1;background:var(--paper)}
.pay-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pay-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:14px}
.pay-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12.5px}
.pay-status{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.pay-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 8px;animation:payPulse 1.6s ease-in-out infinite}
.pay-status.is-bad{color:#B3261E}
.pay-status.is-bad::before{background:#B3261E;animation:none}
@keyframes payPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pay-status::before{animation:none}}
.pay-foot a{color:var(--muted)}
@media (max-width:620px){
  .pay-modal{padding:0}
  .pay-panel{max-width:none;height:100%;border-radius:0}
  .pay-foot{justify-content:center;text-align:center}
}

/* confirmacion dentro de la ventana de pago (aparece sola cuando el servidor confirma) */
.pay-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px;background:var(--paper)}
.pay-done[hidden]{display:none}
.pay-done-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);margin-bottom:20px;animation:payPop .45s cubic-bezier(.2,.9,.3,1.3)}
.pay-done-ic svg{width:42px;height:42px;stroke-width:2.2}
.pay-done h2{font-size:1.8rem;color:var(--ink);margin:0 0 10px}
.pay-done p{max-width:40ch;color:var(--muted);margin:0 0 24px;font-size:16px}
.pay-modal.is-done .pay-panel{height:auto;max-width:560px}
.pay-modal.is-done .pay-foot{display:none}
@keyframes payPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.pay-done-ic{animation:none}}