/* Cotizador interactivo de las landings (/pagina-web/*, /website/*).
   Usa los tokens que ya define cada landing (--ink, --line, --orange,
   --display, --ui...), con valores de respaldo por si alguna no los tiene.
   Archivo externo same-origin: la CSP (style-src 'self') lo permite. */
.cq{
  --cq-bg:var(--ink-2,#0B1322); --cq-bg2:var(--ink-3,#111C30); --cq-line:var(--line,#1E2C45); --cq-line2:var(--line-2,#2A3B59);
  --cq-text:var(--td,#EEF3FA); --cq-muted:var(--md,#9FB0C9); --cq-accent:var(--orange,#F97316); --cq-accent-lt:var(--orange-lt,#FDBA74);
  --cq-blue:var(--blue,#2563EB); --cq-blue-lt:var(--blue-lt,#7EB0FF); --cq-ok:#34D399; --cq-ok-bg:rgba(52,211,153,.12);
  --cq-warn:#FCA5A5; --cq-warn-bg:rgba(248,113,113,.12);
  position:relative;
}
.cq-head{max-width:760px;margin:0 auto 28px;text-align:center}
.cq-head .eyebrow{justify-content:center}
.cq-head h2{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08}
.cq-head .lede{margin:14px auto 0}

.cq-card{max-width:900px;margin:0 auto;background:var(--cq-bg);border:1px solid var(--cq-line2);border-radius:20px;box-shadow:0 30px 80px -30px rgba(37,99,235,.35),0 0 0 1px rgba(249,115,22,.08);scroll-margin-top:90px;overflow:clip}

/* Progreso: 4 pasos */
.cq-steps{list-style:none;margin:0;padding:14px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-bottom:1px solid var(--cq-line);background:var(--cq-bg2)}
.cq-stepbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:6px 8px;border-radius:10px;background:none;border:0;color:var(--cq-muted);font:600 .875rem/1.2 var(--ui,system-ui);cursor:pointer;transition:color .2s,background-color .2s}
.cq-stepbtn:disabled{cursor:default;opacity:.6}
.cq-stepbtn:not(:disabled):hover{color:var(--cq-text);background:rgba(255,255,255,.04)}
.cq-n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cq-line2);font:700 .8125rem/1 var(--display,system-ui);color:var(--cq-muted)}
.cq-stepbtn[aria-current="step"]{color:var(--cq-text)}
.cq-stepbtn[aria-current="step"] .cq-n{background:var(--cq-accent);border-color:var(--cq-accent);color:#0A1220}
.cq-stepbtn.is-done .cq-n{background:var(--cq-ok-bg);border-color:var(--cq-ok);color:var(--cq-ok)}
@media (max-width:520px){.cq-sl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cq-stepbtn[aria-current="step"] .cq-sl{position:static;width:auto;height:auto;overflow:visible;clip:auto}.cq-steps{grid-template-columns:repeat(4,auto);justify-content:space-between}}

/* Pasos deslizables */
.cq-viewport{position:relative;padding:22px clamp(16px,3.5vw,32px) 8px;touch-action:pan-y}
.cq-slide h3{font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.15;letter-spacing:-.025em;color:var(--cq-text);outline:none}
/* El foco se mueve al título al cambiar de paso (para lectores de pantalla); no es un control, así que no lleva anillo visible. */
.cq-slide h3:focus,.cq-slide h3:focus-visible{outline:none}
.cq-hint{margin:8px 0 18px;color:var(--cq-muted);font-size:1rem;line-height:1.55;max-width:62ch}
@keyframes cqInFwd{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes cqInBack{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
.cq-in-fwd{animation:cqInFwd .32s cubic-bezier(.22,.61,.36,1)}
.cq-in-back{animation:cqInBack .32s cubic-bezier(.22,.61,.36,1)}

/* Paso 1: secciones */
.cq-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:430px){.cq-grid{grid-template-columns:1fr 1fr}}
@media (min-width:820px){.cq-grid{grid-template-columns:repeat(3,1fr)}}
.cq-opt{position:relative;display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;text-align:left;min-height:64px;padding:13px 14px;border-radius:14px;border:1.5px solid var(--cq-line2);background:var(--cq-bg2);color:var(--cq-text);font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s,transform .1s}
.cq-opt:hover{border-color:var(--cq-blue-lt)}
.cq-opt:active{transform:scale(.98)}
.cq-opt[aria-pressed="true"]{border-color:var(--cq-accent);background:rgba(249,115,22,.08)}
.cq-opt[aria-disabled="true"]{cursor:default;border-color:var(--cq-line2);background:var(--cq-bg2)}
.cq-opt[aria-disabled="true"]:active{transform:none}
.cq-check{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid var(--cq-line2);color:transparent;background:var(--cq-bg)}
.cq-opt[aria-pressed="true"] .cq-check{background:var(--cq-accent);border-color:var(--cq-accent);color:#0A1220}
.cq-opt[aria-disabled="true"] .cq-check{background:var(--cq-muted);border-color:var(--cq-muted)}
.cq-name{display:block;font-weight:600;font-size:.9375rem;line-height:1.3}
.cq-desc{display:block;margin-top:2px;color:var(--cq-muted);font-size:.8125rem;line-height:1.4}
.cq-lock{position:absolute;top:10px;right:10px;font:700 .625rem/1 var(--display,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cq-ok)}
.cq-count{margin:14px 0 0;color:var(--cq-muted);font-size:.9375rem}
.cq-count strong{color:var(--cq-text);font-variant-numeric:tabular-nums}
.cq-warn{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid rgba(248,113,113,.4);background:var(--cq-warn-bg);color:var(--cq-warn);font-size:.875rem;font-weight:600}
.cq-included{margin-top:18px;padding-top:16px;border-top:1px solid var(--cq-line)}
.cq-label{margin:0 0 8px;font:700 .6875rem/1.3 var(--display,system-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cq-muted)}
.cq-included ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
@media (min-width:700px){.cq-included ul{grid-template-columns:1fr 1fr;column-gap:24px}}
.cq-included li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.9rem;color:var(--cq-text)}
.cq-inc-ck{display:grid;place-items:center;flex:none;color:var(--cq-ok)}
.cq-inc-d{color:var(--cq-muted);font-size:.8125rem}
.cq-badge{margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--cq-ok-bg);color:var(--cq-ok);font-size:.6875rem;font-weight:700;white-space:nowrap}

/* Paso 2: extras */
.cq-extras{display:grid;gap:10px}
.cq-row,.cq-toggle{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--cq-line2);background:var(--cq-bg2);color:var(--cq-text);font:inherit;text-align:left}
.cq-toggle{cursor:pointer;transition:border-color .15s,background-color .15s}
.cq-toggle:hover{border-color:var(--cq-blue-lt)}
.cq-toggle[aria-checked="true"]{border-color:var(--cq-accent);background:rgba(249,115,22,.08)}
.cq-toggle-store{border-style:dashed}
.cq-tx{flex:1 1 200px;min-width:0}
.cq-sw{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:var(--cq-bg);border:1.5px solid var(--cq-line2);transition:background-color .15s,border-color .15s}
.cq-sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--cq-muted);transition:transform .15s,background-color .15s}
.cq-toggle[aria-checked="true"] .cq-sw{background:var(--cq-accent);border-color:var(--cq-accent)}
.cq-toggle[aria-checked="true"] .cq-sw::after{transform:translateX(18px);background:#fff}
.cq-price{margin-left:auto;font:700 .875rem/1.3 var(--display,system-ui);color:var(--cq-accent-lt);text-align:right;font-variant-numeric:tabular-nums}
.cq-stepper{display:flex;align-items:center;gap:10px;margin-left:auto}
.cq-stp{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--cq-line2);background:var(--cq-bg);color:var(--cq-text);font:600 1.125rem/1 var(--ui,system-ui);cursor:pointer}
.cq-stp:hover{border-color:var(--cq-blue-lt)}
.cq-stp-val{min-width:24px;text-align:center;font:700 1rem/1 var(--display,system-ui);font-variant-numeric:tabular-nums}

/* Paso 3: calendario */
.cq-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:4px 0 2px}
.cq-calhd{text-align:center;font-size:.6875rem;font-weight:700;letter-spacing:.08em;color:var(--cq-muted);padding-bottom:2px}
.cq-day{display:grid;justify-items:center;align-content:center;gap:4px;min-width:0;min-height:72px;padding:8px 3px;border-radius:12px;border:1.5px solid var(--cq-line2);background:var(--cq-bg2);color:var(--cq-text);font:inherit;cursor:pointer;transition:background-color .2s,border-color .2s}
.cq-day:hover{border-color:var(--cq-blue-lt)}
.cq-num{font:700 1.25rem/1.1 var(--display,system-ui);font-variant-numeric:tabular-nums}
.cq-tag{font-size:.625rem;font-weight:700;letter-spacing:.03em;line-height:1.2;text-transform:uppercase;text-align:center;color:var(--cq-ok)}
.cq-day.is-start,.cq-day.is-span{background:var(--cq-accent);border-color:var(--cq-accent);color:#0A1220}
.cq-day.is-start .cq-tag,.cq-day.is-span .cq-tag{color:#0A1220}
.cq-day.is-ready{background:#10B981;border-color:#10B981;color:#04140D}
.cq-day.is-ready .cq-tag{color:#04140D}
@media (max-width:480px){.cq-cal{gap:5px}.cq-day{min-height:62px;padding:6px 2px;border-radius:10px}.cq-tag{font-size:.5625rem;letter-spacing:0}}
.cq-delivery{margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--cq-line2);color:var(--cq-muted);font-size:.9375rem}
.cq-delivery.is-set{border-color:transparent;background:linear-gradient(135deg,var(--cq-accent),#EA580C);color:#0A1220}
.cq-dsub{display:block;font-size:.8125rem;font-weight:600;opacity:.85}
.cq-dbig{display:block;margin-top:2px;font:700 clamp(1.1rem,2.6vw,1.35rem)/1.2 var(--display,system-ui)}
.cq-delivery.is-store{border:1.5px dashed var(--cq-accent);color:var(--cq-accent-lt);font-weight:600}
.cq-fine{margin:12px 0 0;color:var(--cq-muted);font-size:.8125rem;line-height:1.5}

/* Paso 4: apartar */
.cq-summary-box{margin-bottom:18px;padding:14px 16px;border-radius:14px;background:var(--cq-bg2);border:1px solid var(--cq-line)}
.cq-summary{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.9rem}
.cq-summary dt{color:var(--cq-muted)}
.cq-summary dd{margin:0;color:var(--cq-text);font-weight:600}
.cq-summary .cq-sum-store{grid-column:1/-1;color:var(--cq-accent-lt)}
.cq-form{display:grid;gap:12px}
@media (min-width:640px){.cq-form{grid-template-columns:1fr 1fr}.cq-submit{grid-column:1/-1}}
.cq-field label{display:block;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:var(--cq-text)}
.cq-field input{width:100%;min-height:48px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--cq-line2);background:var(--cq-bg);color:var(--cq-text);font:400 1rem/1.3 var(--ui,system-ui)}
.cq-field input::placeholder{color:#7F90AB}
.cq-field input:focus-visible{outline:2px solid var(--cq-blue-lt);outline-offset:1px;border-color:var(--cq-blue-lt)}
.cq-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.cq-submit{width:100%;margin-top:4px}
.cq-submit:disabled{opacity:.7;cursor:progress}
.cq-call{display:block;margin-top:14px;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--cq-line2);color:var(--cq-text);text-decoration:none;transition:border-color .15s}
.cq-call:hover{border-color:var(--cq-accent)}
.cq-call b{display:block;font-size:.9rem}
.cq-call span span{display:block;margin-top:2px;color:var(--cq-muted);font-size:.8125rem}
.cq-trust{margin:12px 0 0;text-align:center;color:var(--cq-muted);font-size:.875rem}

/* Paso 5: confirmación */
.cq-done{text-align:center;padding-bottom:18px}
.cq-done-ck{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--cq-ok-bg);color:var(--cq-ok)}
.cq-done .cq-hint{margin-inline:auto}
.cq-contact-label{margin-top:4px}
.cq-contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:720px;margin:0 auto}
.cq-ct{flex:1 1 128px;max-width:180px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--cq-line2);background:var(--cq-bg2);color:var(--cq-text);font:600 .9375rem/1.2 var(--ui,system-ui);text-decoration:none;transition:border-color .15s,background-color .15s}
.cq-ct:hover{border-color:var(--cq-accent)}
.cq-ct-wa{background:#16A34A;border-color:#16A34A;color:#fff}
.cq-ct-wa:hover{background:#15803D;border-color:#15803D}
.cq-msg{max-width:640px;margin:18px auto 0;text-align:left}
.cq-msg label{display:block;margin-bottom:6px;font-size:.875rem;font-weight:600;color:var(--cq-text)}
.cq-msg textarea{width:100%;min-height:88px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--cq-line2);background:var(--cq-bg);color:var(--cq-text);font:400 1rem/1.4 var(--ui,system-ui);resize:vertical}
.cq-msg textarea::placeholder{color:#7F90AB}
.cq-msg textarea:focus-visible{outline:2px solid var(--cq-blue-lt);outline-offset:1px}
.cq-msg-btn{margin-top:10px;gap:10px}
.cq-msg-btn:disabled{opacity:.7;cursor:progress}
.cq-msg-status{margin:8px 0 0;min-height:1.4em;color:var(--cq-muted);font-size:.875rem}
.cq-mailbox{display:flex;align-items:center;gap:14px;max-width:520px;margin:20px auto 22px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--cq-accent);background:rgba(249,115,22,.1);text-align:left}
.cq-mailbox-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cq-accent);color:#0A1220}
.cq-mailbox-ic svg{width:22px;height:22px}
.cq-mailbox p{margin:0;color:var(--cq-muted);font-size:.875rem;line-height:1.45}
.cq-mailbox b{display:block;margin-bottom:2px;color:var(--cq-text);font:700 1.0625rem/1.3 var(--display,system-ui)}
.cq-reminder{margin:10px 0 0;font:700 1rem/1.4 var(--display,system-ui);color:var(--cq-ok)}

/* Barra de totales y navegación: pegada abajo de la tarjeta mientras se recorre */
.cq-bar{position:sticky;bottom:var(--cq-dock,0px);z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px clamp(12px,3vw,24px);border-top:1px solid var(--cq-line);background:rgba(11,19,34,.96);backdrop-filter:blur(8px)}
.cq-bar[hidden]{display:none}
.cq-storenote{flex:1 1 100%;margin:0;padding:8px 12px;border-radius:10px;border:1.5px dashed var(--cq-accent);color:var(--cq-accent-lt);font-size:.875rem;font-weight:600;line-height:1.4}
.cq-storenote[hidden]{display:none}
.cq-totals{display:flex;gap:8px;flex:1 1 300px;min-width:0}
.cq-tot{display:flex;flex-direction:column;min-width:120px;padding:8px 16px;border-radius:10px;border:1px solid var(--cq-line);background:var(--cq-bg2)}
.cq-tot span{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cq-muted)}
.cq-tot strong{font:700 1.375rem/1.2 var(--display,system-ui);color:var(--cq-text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-tot-once{border-color:rgba(249,115,22,.5)}
.cq-tot-once strong{color:var(--cq-accent-lt)}
.cq-nav{display:flex;gap:8px;margin-left:auto}
.cq-back{min-height:48px;padding:0 16px;border-radius:10px;border:1.5px solid var(--cq-line2);background:none;color:var(--cq-text);font:600 .9375rem/1 var(--ui,system-ui);cursor:pointer}
.cq-back:hover{border-color:var(--cq-blue-lt)}
.cq-next{min-height:48px}
.cq-has-dock .cq-bar{padding-right:76px}
.callbar{transition:transform .25s ease,visibility .25s}
.callbar.cq-callbar-off{transform:translateY(110%);visibility:hidden}
@media (max-width:560px){
  .cq-tot:nth-child(3){display:none}
  .cq-nav{width:100%}
  .cq-next{flex:1;min-width:0;padding-inline:12px;white-space:nowrap;font-size:.9375rem}
  .cq-back{padding:0 12px}
  .cq-tot{flex:1;min-width:0;padding:7px 12px}
  .cq-tot span{font-size:.6875rem}
  .cq-tot strong{font-size:1.25rem}
}
.cq-noscript{max-width:900px;margin:16px auto 0;color:var(--cq-muted);text-align:center}

.cq :focus-visible{outline:2px solid var(--cq-blue-lt);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .cq-in-fwd,.cq-in-back{animation:none}
  .cq *{transition:none!important}
}