/* ── HERO REPARATIE (mismo sistema visual que Home) ── */
.rep-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:28px;min-height:280px;display:flex;align-items:center;background:linear-gradient(115deg,var(--navy) 55%,var(--navy2));}
.rep-hero-img{position:absolute;right:-40px;bottom:-20px;width:340px;opacity:.9;}
.rep-hero-content{position:relative;z-index:2;padding:40px 44px;max-width:520px;}
@media(max-width:768px){
  .rep-hero{min-height:240px;}
  .rep-hero-img{width:200px;opacity:.35;}
  .rep-hero-content{padding:26px 22px;}
}

/* ── El wizard hereda las variables de marca ya definidas en zf-base.css/style.css ── */
:root{
  --navy:#1A2E5A; --navy2:#243B73; --lime:#39C700; --lime2:#2db800;
  --cyan:#0095FF; --white:#fff; --offwhite:#F5F8FF;
  --gray:#5A6475; --border:#D8E3F0; --red:#CC0000; --orange:#FF6B00;
  --gold:#FFD600; --shadow:0 8px 32px rgba(26,46,90,.12);
}

/* ═══════════════════════════════════════════
   ZEELANDFIX BOOKING FORM v2.0
   Navy #1A2E5A · Lime #39C700 · Cyan #0095FF
═══════════════════════════════════════════ */
:root{
  --navy:#1A2E5A; --navy2:#243B73; --lime:#39C700; --lime2:#2db800;
  --cyan:#0095FF; --white:#fff; --offwhite:#F5F8FF;
  --gray:#5A6475; --border:#D8E3F0; --red:#CC0000; --orange:#FF6B00;
  --gold:#FFD600; --shadow:0 8px 32px rgba(26,46,90,.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',sans-serif;background:var(--offwhite);color:var(--navy);
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}

/* ── WIZARD ── */
.wizard{max-width:1100px;margin:0 auto;padding:28px 16px 60px;position:relative;z-index:2;width:100%;}

/* ── Layout de 3 columnas: panel B2B | wizard | panel Servicegebied ── */
/* ── HOOK — bloque navy único, ancho completo: técnico + B2B a la izquierda, formulario a la derecha ── */
.rep-hook{background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 100%);overflow:hidden;margin:0 calc(50% - 50vw) 40px;width:100vw;max-width:100vw;min-height:620px;position:relative;isolation:isolate;border-radius:0;}
/* El CONTENIDO (no el fondo) se limita al mismo ancho central que usa el resto de la página
   (1280px, igual que .zf-page), para que la imagen y el texto queden alineados con todo lo
   demás en vez de "colgar" hacia la izquierda en pantallas muy anchas. */
.rep-hook-inner{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:460px 1fr;gap:20px;align-items:stretch;min-height:620px;position:relative;z-index:1;}
@media(min-width:1400px){
  .rep-hook{border-radius:26px;width:calc(100vw - 40px);margin-left:calc(50% - 50vw + 20px);margin-right:calc(50% - 50vw + 20px);}
}
.rep-hook-glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;animation:zf-rephook-drift ease-in-out infinite;}
.rep-hook-glow-1{width:360px;height:360px;top:-100px;left:-80px;background:var(--lime);opacity:.22;animation-duration:11s;}
.rep-hook-glow-2{width:300px;height:300px;bottom:-90px;left:20%;background:var(--cyan);opacity:.16;animation-duration:14s;animation-delay:-5s;}
@keyframes zf-rephook-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(24px,-18px) scale(1.12);}}
@media (prefers-reduced-motion: reduce){.rep-hook-glow{animation:none!important;}}
.rep-hook-left,.rep-hook-right{position:relative;z-index:1;}
.rep-hook-glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;}
.rep-hook-glow-1{width:340px;height:340px;top:-100px;left:-60px;background:var(--lime);opacity:.22;animation:zf-rephook-drift-1 10s ease-in-out infinite;}
.rep-hook-glow-2{width:300px;height:300px;bottom:-110px;right:20%;background:var(--cyan);opacity:.18;animation:zf-rephook-drift-2 12s ease-in-out infinite;}
@keyframes zf-rephook-drift-1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,25px) scale(1.12);}}
@keyframes zf-rephook-drift-2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-25px,-15px) scale(1.08);}}
@media (prefers-reduced-motion: reduce){.rep-hook-glow{animation:none!important;}}
.rep-hook-left{padding:70px 36px 44px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;position:relative;z-index:1;width:100%;align-self:start;}
.rep-hook-left-body{max-width:440px;margin:0 auto;text-align:center;width:100%;}
.rep-hook-img{display:flex;justify-content:center;align-items:center;width:340px;height:400px;margin:0 auto 26px;border-radius:18px;overflow:hidden;}
.rep-hook-img img{width:100%;height:100%;object-fit:cover;object-position:center;-webkit-user-drag:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.3));transition:opacity .2s ease;}
.rep-hook-img img.framed{border:3px solid rgba(255,255,255,.15);}
.rep-hook-arrow{display:none;color:var(--lime);font-size:26px;animation:zf-arrow-nudge 1.6s ease-in-out infinite;}
@keyframes zf-arrow-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@media(min-width:961px){.rep-hook-arrow{display:block;}}
@media (prefers-reduced-motion: reduce){.rep-hook-arrow{animation:none;}}
.rep-hook-left-body{text-align:center;}
.wizard-side-stats-dark{border-top-color:rgba(255,255,255,.18);}
.wizard-side-stats-dark .wf-stat{border-color:rgba(255,255,255,.18);}
.wizard-side-stats-dark .wf-stat-l{color:rgba(255,255,255,.55);}
.rep-hook-right{background:transparent;padding:36px 40px;display:flex;align-items:center;position:relative;z-index:1;}
.rep-hook-right .wizard{width:100%;}
@media(max-width:960px){
  .rep-hook-inner{grid-template-columns:1fr;min-height:auto;}
  .rep-hook-img{height:170px;margin-bottom:16px;}
  .rep-hook-right{padding:28px 20px;}
}

/* ── Franja "Servicegebied" (mapa de Zeeland) — retirada, ya no existe en el HTML ── */

/* ── Elementos de venta B2B bajo las imágenes laterales (prueba social) ── */
.wizard-side-stats{display:flex;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;}
.wf-stat{flex:1;text-align:center;}
.wf-stat:first-child{border-right:1px solid var(--line);}
.wf-stat-v{font-family:'Righteous',cursive;font-size:17px;color:var(--lime2,#2EA800);line-height:1;}
.wizard-side-right .wf-stat-v{color:var(--cyan);}
.wf-stat-l{font-size:9px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;margin-top:3px;}
.wizard-side{background:#fff;border-radius:20px;border:1px solid var(--line);overflow:hidden;box-shadow:0 14px 30px rgba(26,46,90,.08);position:sticky;top:20px;}
.wizard-side-img{width:100%;aspect-ratio:4/5;overflow:hidden;background:#F0F3F9;}
.wizard-side-img img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;}
.wizard-side-body{padding:16px;}
.wizard-side-tag{display:inline-block;background:var(--lime);color:#fff;font-size:10px;font-weight:900;padding:4px 11px;border-radius:999px;margin-bottom:9px;letter-spacing:.4px;}
.wizard-side-tag-cyan{background:var(--cyan);}
.wizard-side-title{font-family:'Righteous',cursive;font-size:14.5px;color:var(--navy);margin:0 0 7px;line-height:1.3;}
.wizard-side-desc{font-size:11.5px;color:var(--gray);font-weight:600;line-height:1.55;margin:0;}

@media(max-width:1100px){
  .wizard-flanked{grid-template-columns:1fr;max-width:760px;}
  .wizard-side{position:static;display:flex;align-items:center;gap:14px;}
  .wizard-side-img{width:110px;flex-shrink:0;aspect-ratio:1/1;}
  .wizard-side-body{padding:14px;}
}

/* ── PROGRESS ── */
.prog-wrap{background:white;border-radius:20px;padding:22px 28px;border:2px solid var(--border);margin-bottom:24px;box-shadow:var(--shadow);}
.prog-steps{display:flex;align-items:center;justify-content:space-between;position:relative;}
.prog-line-bg{position:absolute;top:19px;left:0;right:0;height:3px;background:var(--border);z-index:0;border-radius:2px;}
.prog-line-fill{position:absolute;top:19px;left:0;height:3px;background:linear-gradient(90deg,var(--lime),var(--cyan));z-index:1;border-radius:2px;transition:width .5s ease;}
.ps{display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2;flex:1;cursor:pointer;}
.ps-dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;border:3px solid var(--border);background:white;transition:all .3s;}
.ps-dot.done{background:var(--lime);border-color:var(--lime);color:white;}
.ps-dot.active{background:var(--navy);border-color:var(--navy);color:white;box-shadow:0 0 0 4px rgba(26,46,90,.15);}
.ps-dot.pending{color:var(--gray);}
.ps-lbl{font-size:10px;font-weight:800;color:var(--gray);text-align:center;white-space:nowrap;}
.ps-lbl.active{color:var(--navy);}
.ps-lbl.done{color:var(--lime);}

/* ── PANEL ── */
.panel{display:none;animation:fadeUp .3s ease;}
.panel.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── CARD ── */
.card{background:white;border-radius:24px;border:2px solid var(--border);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;}
.card-head{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:22px 28px;position:relative;overflow:hidden;border-bottom:4px solid var(--lime);}
.card-head.accent-cyan{border-bottom-color:var(--cyan);}
.card-head::before{content:'';position:absolute;top:-16px;right:-16px;width:90px;height:90px;border-radius:50%;background:rgba(57,199,0,.1);}
.card-head.accent-cyan::before{background:rgba(0,149,255,.14);}
.card-head h2{font-family:'Righteous',cursive;font-size:21px;color:white;margin-bottom:3px;display:flex;align-items:center;gap:12px;}
.card-head p{font-size:12px;color:rgba(255,255,255,.6);font-weight:600;margin-left:50px;}
.card-head-icon{font-size:19px;color:var(--lime);flex-shrink:0;width:38px;height:38px;border-radius:50%;background:rgba(57,199,0,.16);border:1.5px solid rgba(57,199,0,.4);display:inline-flex;align-items:center;justify-content:center;}
.card-head.accent-cyan .card-head-icon{color:#8FDBFF;background:rgba(0,149,255,.16);border-color:rgba(0,149,255,.4);}
.step-badge{position:absolute;top:18px;right:24px;background:var(--lime);color:var(--navy);border-radius:999px;padding:3px 13px;font-size:11px;font-weight:900;}
.card-head.accent-cyan .step-badge{background:var(--cyan);color:#fff;}
.card-body{padding:24px 28px;container-type:inline-size;container-name:wizard-card;}

/* ── FORM FIELDS ── */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.field.full{grid-column:1/-1;}
label{font-size:10px;font-weight:900;color:var(--gray);text-transform:uppercase;letter-spacing:1px;}
input,select,textarea{
  padding:11px 14px;background:var(--offwhite);border:2px solid var(--border);
  border-radius:11px;font-size:13px;font-weight:600;font-family:'Nunito',sans-serif;
  color:var(--navy);outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-user-select:text;-moz-user-select:text;user-select:text;
}
input:focus,select:focus,textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(57,199,0,.1);}
textarea{resize:vertical;min-height:72px;}
.err{border-color:var(--red)!important;}
.err-msg{font-size:11px;color:var(--red);font-weight:700;margin-top:2px;display:none;}
.err-msg.show{display:block;}

/* ── SECTION LABEL ── */
.slbl{font-size:10px;font-weight:900;color:var(--gray);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.slbl::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── BRAND GRID ── */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-bottom:18px;}
.brand-btn{background:white;border:2px solid var(--border);border-radius:16px;padding:18px 10px;text-align:center;cursor:pointer;transition:all .2s;font-size:13px;font-weight:800;color:var(--navy);}
.brand-btn:hover,.brand-btn.sel{border-color:var(--lime);background:rgba(57,199,0,.05);}
.brand-icon{font-size:22px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#ffffff;border:1.5px solid rgba(26,46,90,.14);margin:0 auto 10px;overflow:hidden;}
.brand-logo-img{width:38px;height:38px;object-fit:contain;-webkit-user-drag:none;}

/* ── REPAIR TILES ── */
.repair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:18px;}
.rt{background:white;border:2px solid var(--border);border-radius:14px;padding:14px 10px;cursor:pointer;transition:all .2s;position:relative;text-align:center;}
.rt:hover{border-color:var(--lime);box-shadow:0 3px 12px rgba(57,199,0,.1);}
.rt.sel{border-color:var(--lime);background:rgba(57,199,0,.06);}
.rt.no-stk{border-color:rgba(204,0,0,.25);background:rgba(204,0,0,.02);}
.rt-chk{position:absolute;top:7px;right:7px;width:18px;height:18px;background:var(--lime);border-radius:5px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.rt.sel .rt-chk{opacity:1;}
.rt-ico{font-size:22px;margin:0 auto 8px;width:44px;height:44px;border-radius:50%;background:rgba(57,199,0,.1);border:1.5px solid rgba(57,199,0,.28);display:flex;align-items:center;justify-content:center;}
.rt-nm{font-size:11px;font-weight:900;color:var(--navy);margin-bottom:3px;}
.rt-pr{font-family:'Righteous',cursive;font-size:16px;color:var(--lime);}
.rt-pr-blur{filter:blur(5px);-webkit-filter:blur(5px);user-select:none;pointer-events:none;}
.rt-login-note{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:900;color:var(--cyan);text-decoration:none;margin-top:3px;position:relative;z-index:2;}
.rt-login-note:hover{text-decoration:underline;}
.rt-oem{font-family:'Righteous',cursive;font-size:12px;color:var(--cyan);margin-top:2px;}
.sb{font-size:9px;font-weight:900;padding:2px 7px;border-radius:999px;display:inline-block;margin-top:4px;}
.sb-y{background:rgba(57,199,0,.14);color:var(--lime2);}
.sb-l{background:rgba(0,149,255,.12);color:var(--cyan);}
.sb-n{background:rgba(0,149,255,.12);color:var(--cyan);}
.sb-na{background:transparent;color:var(--cyan);font-size:13px;padding:0;}
.rt-eta{font-size:9px;color:var(--red);font-weight:700;margin-top:2px;line-height:1.4;}

/* ── QUALITY ── */
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.qt{border:2px solid var(--border);border-radius:16px;padding:22px 16px;cursor:pointer;transition:all .2s;background:white;position:relative;overflow:hidden;text-align:center;}
.qt:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(26,46,90,.1);}
.qt.ag{border-color:var(--lime);background:rgba(57,199,0,.04);}
.qt.sel{border-width:3px;}

/* Efecto de iluminación radial, detrás de la ilustración */
.qt-glow{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:140px;height:140px;border-radius:50%;filter:blur(30px);opacity:.5;z-index:0;}
.qt-glow-lime{background:#39C700;}
.qt-glow-cyan{background:#0095FF;}

.qt-illus{width:72px;height:72px;position:relative;z-index:1;margin-bottom:10px;}

.qt-title{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:6px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.qt-pill{font-size:10.5px;background:rgba(57,199,0,.15);color:var(--lime2);padding:2px 9px;border-radius:999px;font-weight:800;}
.qt-desc{font-size:13px;color:var(--gray);line-height:1.55;position:relative;z-index:1;margin-bottom:8px;}
.qt-badge{font-size:12px;font-weight:900;margin-top:5px;position:relative;z-index:1;}
.qt:hover{border-color:var(--lime);}
.qt.oem{border-color:var(--cyan);}

/* ── MINI SUMMARY ── */
.mini-sum{background:var(--offwhite);border:2px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:16px;}
.ms-title{font-size:10px;font-weight:900;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.ms-row{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--navy);padding:4px 0;border-bottom:1px solid var(--border);}
.ms-row:last-child{border-bottom:none;font-family:'Righteous',cursive;font-size:15px;padding-top:8px;}
.ms-price{color:var(--lime);font-family:'Righteous',cursive;}

/* ── ZONES ── */
.zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;margin-bottom:16px;}
.zc{border:2px solid var(--border);border-radius:13px;padding:13px 14px;cursor:pointer;transition:all .2s;background:white;}
.zc:hover,.zc.sel{border-color:var(--lime);background:rgba(57,199,0,.05);}
.zc-name{font-size:12px;font-weight:900;color:var(--navy);margin-bottom:2px;}
.zc-price{font-family:'Righteous',cursive;font-size:17px;color:var(--lime);}
.zc-eta{font-size:10px;color:var(--gray);font-weight:700;}
.zc-towns{font-size:9px;color:var(--gray);margin-top:3px;line-height:1.4;}
.pc-row{display:flex;gap:9px;margin-bottom:14px;}
.pc-row input{flex:1;}
.pc-row button{background:var(--navy);color:white;border:none;border-radius:11px;padding:11px 18px;font-size:12px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;white-space:nowrap;}
.pc-result{padding:11px 14px;border-radius:11px;font-size:12px;font-weight:700;margin-bottom:14px;}
.pc-ok{background:rgba(57,199,0,.08);border:1px solid rgba(57,199,0,.25);color:#1a7a00;}
.pc-warn{background:rgba(0,149,255,.07);border:1px solid rgba(0,149,255,.2);color:var(--navy);}

/* ── CALENDAR ── */
.cal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal-nav button{background:white;border:2px solid var(--border);border-radius:9px;width:34px;height:34px;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.cal-nav button:hover{border-color:var(--lime);}
.cal-month{font-family:'Righteous',cursive;font-size:16px;color:var(--navy);}
.cal-dh-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px;}
.cal-dh{text-align:center;font-size:9px;font-weight:900;color:var(--gray);padding:3px 0;text-transform:uppercase;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cd{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;border:2px solid transparent;}
.cd.empty,.cd.past{pointer-events:none;}
.cd.past{color:var(--border);}
.cd.today{border-color:var(--lime);color:var(--lime);font-weight:900;}
.cd.sel{background:var(--navy);color:white;border-color:var(--navy);}
.cd.wknd{background:rgba(0,149,255,.06);}
.cd.hol{background:rgba(90,100,117,.08);color:var(--gray);}
.cd:not(.past):not(.empty):not(.sel):hover{background:rgba(57,199,0,.1);border-color:var(--lime);}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.cl-item{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--gray);}
.cl-dot{width:11px;height:11px;border-radius:3px;}

/* ── SLOTS ── */
.slot-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;}
.slot{display:flex;align-items:center;justify-content:space-between;background:var(--offwhite);border:2px solid var(--border);border-radius:11px;padding:10px 13px;cursor:pointer;transition:all .2s;}
.slot:hover:not(.booked){border-color:var(--lime);background:rgba(57,199,0,.04);}
.slot.sel{background:rgba(57,199,0,.08);border-color:var(--lime);}
.slot.booked{opacity:.4;pointer-events:none;}
.slot-time{font-size:13px;font-weight:900;color:var(--navy);}
.slot-sur{font-size:10px;font-weight:900;color:var(--cyan);}
.slot-av{font-size:9px;font-weight:900;padding:2px 7px;border-radius:999px;}
.av-ok{background:rgba(57,199,0,.12);color:#1a7a00;}
.av-busy{background:rgba(26,46,90,.1);color:var(--navy);}
.av-full{background:rgba(90,100,117,.1);color:var(--gray);}
.sur-notice{background:rgba(0,149,255,.07);border:1px solid rgba(0,149,255,.2);border-radius:11px;padding:10px 14px;margin-top:10px;font-size:11px;font-weight:700;color:var(--navy);}

/* ── TOGGLE SWITCH ── */
.tog-row{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--offwhite);border:2px solid var(--border);border-radius:11px;cursor:pointer;margin-bottom:10px;}
.tog-sw{position:relative;width:44px;height:22px;flex-shrink:0;}
.tog-sw input{opacity:0;width:0;height:0;}
.tog-sl{position:absolute;cursor:pointer;inset:0;background:#C0CCE0;border-radius:11px;transition:.3s;}
.tog-sl:before{position:absolute;content:"";width:16px;height:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
input:checked + .tog-sl{background:var(--lime);}
input:checked + .tog-sl:before{transform:translateX(22px);}
.dis-banner{background:linear-gradient(135deg,rgba(57,199,0,.1),rgba(0,149,255,.08));border:2px solid rgba(57,199,0,.3);border-radius:13px;padding:13px 16px;margin-bottom:14px;display:none;align-items:center;gap:12px;}
.dis-pct{font-family:'Righteous',cursive;font-size:20px;color:var(--lime);flex-shrink:0;}

/* ── PAYMENT ── */
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-bottom:18px;}
.pm{border:2px solid var(--border);border-radius:13px;padding:13px;text-align:center;cursor:pointer;transition:all .2s;background:white;}
.pm:hover,.pm.sel{border-color:var(--lime);background:rgba(57,199,0,.05);}
.pm-ico{font-size:22px;margin:0 auto 6px;width:40px;height:40px;border-radius:50%;background:rgba(0,149,255,.1);border:1.5px solid rgba(0,149,255,.26);display:flex;align-items:center;justify-content:center;}
.pm-nm{font-size:11px;font-weight:900;color:var(--navy);}
.pm-sub{font-size:9px;color:var(--gray);margin-top:1px;}

/* ── FINAL SUMMARY ── */
.fsm{background:white;border-radius:18px;border:2px solid var(--border);overflow:hidden;margin-bottom:18px;}
.fsm-head{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:18px 24px;}
.fsm-head h3{font-family:'Righteous',cursive;font-size:17px;color:white;margin-bottom:2px;}
.fsm-body{padding:18px 24px;}
.fsr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--gray);}
.fsr:last-child{border-bottom:none;}
.fsr strong{color:var(--navy);}
.fsr-val{font-weight:800;color:var(--navy);}
.fsm-total{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(57,199,0,.06);border-top:2px solid rgba(57,199,0,.2);}
.fsm-total-lbl{font-family:'Righteous',cursive;font-size:15px;color:var(--navy);}
.fsm-total-val{font-family:'Righteous',cursive;font-size:36px;color:var(--lime);line-height:1;}
.guar-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px;}
.guar{background:white;border:2px solid var(--border);border-radius:13px;padding:12px;text-align:center;}
.guar-ico{font-size:20px;margin-bottom:4px;}
.guar-title{font-size:10px;font-weight:900;color:var(--navy);}
.guar-sub{font-size:9px;color:var(--gray);margin-top:1px;}

/* ── MOLLIE ── */
.mollie-box{background:var(--offwhite);border:2px solid var(--border);border-radius:14px;padding:20px;text-align:center;}
.mol-lbl{font-size:10px;font-weight:900;color:var(--gray);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.mol-amt{font-family:'Righteous',cursive;font-size:32px;color:var(--navy);margin-bottom:3px;}
.mol-desc{font-size:12px;color:var(--gray);margin-bottom:16px;}
.mol-banks{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.mol-bank{background:white;border:2px solid var(--border);border-radius:9px;padding:6px 12px;font-size:11px;font-weight:800;color:var(--navy);cursor:pointer;transition:all .2s;}
.mol-bank:hover,.mol-bank.sel{border-color:var(--lime);}
.mol-sec{font-size:10px;color:var(--gray);display:flex;align-items:center;justify-content:center;gap:4px;}

/* ── SUCCESS ── */
.success{display:none;text-align:center;padding:44px 24px;}
.suc-ico{width:72px;height:72px;background:var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:32px;box-shadow:0 6px 24px rgba(57,199,0,.35);}
.suc-title{font-family:'Righteous',cursive;font-size:28px;color:var(--navy);margin-bottom:8px;}
.suc-title span{color:var(--lime);}
.suc-sub{font-size:14px;font-weight:600;color:var(--gray);line-height:1.7;max-width:480px;margin:0 auto 22px;}
.order-box{background:var(--offwhite);border:2px solid var(--lime);border-radius:14px;padding:14px 22px;display:inline-block;margin-bottom:20px;}
.qr-pay-box{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0 6px;}
.qr-pay-box #qr-pay-canvas{padding:10px;background:#fff;border-radius:12px;border:2px solid var(--border);}
.qr-pay-box #qr-pay-canvas img,.qr-pay-box #qr-pay-canvas table{display:block;}
.qr-lbl{font-size:10.5px;font-weight:800;color:var(--gray);text-align:center;}
.ob-lbl{font-size:10px;font-weight:900;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.ob-val{font-family:'Righteous',cursive;font-size:26px;color:var(--navy);}
.nxt-steps{background:white;border-radius:18px;border:2px solid var(--border);padding:20px 24px;text-align:left;max-width:480px;margin:0 auto 20px;}
.ns-title{font-size:12px;font-weight:900;color:var(--navy);margin-bottom:12px;}
.ns-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.ns-num{width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--navy);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.ns-text{font-size:12px;font-weight:700;color:var(--gray);line-height:1.6;}

/* ── NAV BTNS ── */
.nav-btns{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:white;border-top:2px solid var(--border);}
.btn-back{background:white;border:2px solid var(--border);border-radius:999px;padding:11px 24px;font-size:13px;font-weight:800;color:var(--gray);cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;}
.btn-back:hover{border-color:var(--navy);color:var(--navy);}
.btn-back:disabled{opacity:.3;pointer-events:none;}
.btn-next{background:var(--lime);color:var(--navy);border:none;border-radius:999px;padding:13px 30px;font-size:13px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;box-shadow:0 4px 16px rgba(57,199,0,.35);transition:all .2s;display:flex;align-items:center;gap:7px;}
.btn-next:hover{background:var(--lime2);transform:translateY(-1px);}
.btn-next:disabled{opacity:.4;pointer-events:none;transform:none;}
.btn-pay{background:linear-gradient(135deg,var(--lime),var(--lime2));box-shadow:0 5px 20px rgba(57,199,0,.45);font-size:14px;padding:14px 32px;}

/* ── MISC ── */
.hb-green{background:rgba(57,199,0,.06);border:1px solid rgba(57,199,0,.2);border-radius:11px;padding:12px 15px;margin-bottom:14px;font-size:12px;font-weight:700;color:var(--navy);line-height:1.6;}
.hb-warn{background:rgba(0,149,255,.05);border:1px solid rgba(0,149,255,.2);border-radius:11px;padding:12px 15px;margin-bottom:14px;font-size:12px;font-weight:700;color:var(--navy);line-height:1.6;}
.hb-info{background:rgba(0,149,255,.05);border:1px solid rgba(0,149,255,.15);border-radius:11px;padding:12px 15px;margin-bottom:14px;font-size:12px;font-weight:700;color:#003B6F;line-height:1.6;}

/* ── ADMIN PANEL ── */
.price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.price-row label{font-size:11px;font-weight:700;color:var(--gray);flex:1;margin:0;text-transform:none;letter-spacing:0;}
.price-row input{width:80px;padding:7px 10px;border:2px solid var(--border);border-radius:8px;font-size:13px;font-weight:700;background:var(--offwhite);text-align:right;-webkit-user-select:text;user-select:text;}
.price-row input:focus{border-color:var(--lime);}
.stock-toggle{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--gray);}
.stock-toggle select{padding:5px 8px;border-radius:7px;font-size:11px;width:100px;}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .cal-wrap{grid-template-columns:1fr;}
  .frow,.frow3{grid-template-columns:1fr;}
  .guar-row{grid-template-columns:1fr 1fr;}
  .repair-grid{grid-template-columns:repeat(2,1fr);}
  .qrow,.pm-grid{grid-template-columns:1fr 1fr;}
  .ps-lbl{font-size:8px;}
  .card-body,.nav-btns{padding:16px 14px;}
    .prog-wrap{padding:16px 14px;}
}

/* ── ANTIFRAUDE: honeypot — oculto de forma robusta (no display:none, que algunos
   bots detectan y evitan; posición fuera de pantalla + opacidad 0 + sin poder tabular) ── */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;height:0;overflow:hidden;}

/* ── ANTIFRAUDE: CAPTCHA nivel 2 (reto matemático autoalojado) ── */
.captcha-box{background:var(--offwhite);border:2px solid var(--border);border-radius:13px;padding:14px 16px;}
.captcha-row{display:flex;align-items:center;gap:12px;}
.captcha-q{font-family:'Righteous',cursive;font-size:18px;color:var(--navy);background:#fff;border:2px solid var(--border);border-radius:10px;padding:8px 16px;}
.captcha-row input{max-width:100px;}

/* ── Estado de cliente: 4 pestañas animadas (nuevo/registrado/socio/autónomo) ── */
.ctype-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.ctype-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;opacity:0;transform:translateY(10px) scale(.94);animation:zf-ctype-in .45s ease forwards;}
@keyframes zf-ctype-in{to{opacity:1;transform:translateY(0) scale(1);}}
.ctype-card:hover{transform:translateY(-4px);border-color:var(--lime);box-shadow:0 10px 22px rgba(57,199,0,.14);}
.ctype-card.sel{box-shadow:0 0 0 3px var(--cyan),0 0 24px rgba(0,149,255,.35);}
.ctype-card.sel .ctype-icon{background:var(--lime);color:#fff;transform:scale(1.08) rotate(-4deg);}
.ctype-icon{width:38px;height:38px;border-radius:50%;background:rgba(26,46,90,.06);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:17px;margin:0 auto 8px;transition:transform .25s ease,background .25s ease,color .25s ease;}
.ctype-title{font-size:11.5px;font-weight:900;color:var(--navy);margin-bottom:3px;}
.ctype-desc{font-size:9.5px;color:var(--gray);font-weight:600;line-height:1.35;}
.ctype-badge{display:inline-block;margin-top:6px;background:var(--lime);color:#fff;font-size:10px;font-weight:900;padding:2px 8px;border-radius:999px;}
@media(max-width:600px){.ctype-grid{grid-template-columns:repeat(2,1fr);}}
@media (prefers-reduced-motion: reduce){.ctype-card{animation:none;opacity:1;transform:none;}}

/* ── FACTURA IMPRIMIBLE ──
   Oculta en pantalla normal. Al pulsar "Factuur downloaden" se añade la clase
   body.printing-invoice (ver printInvoice() en el JS), que oculta TODO lo demás
   y muestra solo #invoice-print — así window.print()/"Guardar como PDF" del
   navegador imprime únicamente la factura, no el resto de la página. */
.invoice-only{display:none;}
body.printing-invoice > *:not(#invoice-print){display:none!important;}
body.printing-invoice #invoice-print{display:block!important;max-width:680px;margin:0 auto;padding:40px;font-family:'Nunito',sans-serif;color:var(--navy);}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--lime);padding-bottom:18px;margin-bottom:22px;}
.inv-logo{font-family:'Righteous',cursive;font-size:22px;color:var(--navy);}
.inv-logo em{font-style:normal;color:var(--lime2);}
.inv-meta{text-align:right;font-size:12px;font-weight:700;}
.inv-parties{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px;font-size:12px;line-height:1.6;}
.inv-lbl{font-size:10px;font-weight:900;color:var(--lime2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.inv-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:18px;}
.inv-table th{text-align:left;border-bottom:2px solid var(--navy);padding:8px 4px;font-size:10px;text-transform:uppercase;}
.inv-table td{padding:7px 4px;border-bottom:1px solid var(--border);}
.inv-table td:last-child,.inv-table th:last-child{text-align:right;}
.inv-total-row{display:flex;justify-content:space-between;font-family:'Righteous',cursive;font-size:18px;color:var(--navy);border-top:2px solid var(--navy);padding-top:10px;margin-bottom:26px;}
.inv-qr-block{text-align:center;margin-bottom:20px;}
.inv-qr-block p{font-size:9px;color:var(--gray);margin-top:6px;}
.inv-legal{font-size:9px;color:var(--gray);line-height:1.5;border-top:1px solid var(--border);padding-top:12px;}
@media print{
  @page{margin:14mm;}
  body.printing-invoice{background:#fff!important;}
}

/* ═══════════════════════════════════════════
   PANEL DE CALIDAD — modal centrado en escritorio, hoja deslizante desde abajo
   en móvil (patrón nativo de apps iOS/Android — más natural al tacto que un
   panel lateral). La ficha de servicios nunca se mueve ni se pierde.
═══════════════════════════════════════════ */
.qp-overlay{position:fixed;inset:0;background:rgba(26,46,90,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99998;display:none;align-items:center;justify-content:center;padding:20px;}
.qp-overlay.open{display:flex;}
.qp-panel{width:460px;max-width:100%;max-height:85vh;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.6);border-radius:24px;overflow-y:auto;padding:28px 26px 32px;
  transform:scale(.92);opacity:0;transition:transform .28s cubic-bezier(.34,1.3,.64,1),opacity .2s;box-shadow:0 24px 60px rgba(26,46,90,.28);}
.qp-overlay.open .qp-panel{transform:scale(1);opacity:1;}

@media (max-width:640px){
  .qp-overlay{align-items:flex-end;padding:0;}
  .qp-panel{width:100%;max-height:88vh;border-radius:24px 24px 0 0;
    transform:translateY(100%);opacity:1;padding:12px 20px 32px;}
  .qp-overlay.open .qp-panel{transform:translateY(0);}
  .qp-panel::before{content:'';display:block;width:40px;height:4px;background:#E5E9F0;border-radius:99px;margin:0 auto 18px;}
}

.qp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.qp-title{font-family:'Righteous',sans-serif;font-size:19px;color:var(--navy);}
.qp-close{width:34px;height:34px;border-radius:50%;border:none;background:var(--offwhite);color:var(--navy);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qp-close:hover{background:#E5E9F0;}
.qp-sub{color:#6B7A85;font-size:12.5px;margin-bottom:24px;}

/* Estado "buscando..." */
.qp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;}
.qp-loading-svg{width:90px;height:90px;margin-bottom:20px;}
.qp-loading-ring{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:40;
  animation:qp-spin 1.1s linear infinite;transform-origin:center;}
@keyframes qp-spin{100%{transform:rotate(360deg);}}
.qp-loading-txt{font-weight:800;color:var(--navy);font-size:14px;}

/* Fichas de resultado — con brillo degradado de marca al pasar el cursor */
.qp-panel-calidad{width:860px;}
.qp-carrusel-wrap{position:relative;display:flex;align-items:center;gap:14px;}
.qp-flecha{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;box-shadow:0 6px 18px rgba(26,46,90,.14);transition:.15s;}
.qp-flecha:hover{border-color:var(--cyan);transform:scale(1.1);}
.qp-flecha:disabled{opacity:.25;cursor:not-allowed;pointer-events:none;}
.qp-flecha svg{width:24px;height:24px;}
#qp-body{overflow:hidden;flex:1;min-width:0;}
.qp-resultados{display:flex;flex-direction:row;gap:18px;transition:transform .38s cubic-bezier(.4,0,.2,1);}
@media (max-width:900px){
  .qp-panel-calidad{width:100%;}
  .qp-flecha{width:38px;height:38px;}
}
.qp-ficha{position:relative;display:flex;flex-direction:column;flex:0 0 250px;background:#fff;border:2px solid #E5E9F0;border-radius:20px;cursor:pointer;text-align:left;transition:border-color .2s,transform .18s,box-shadow .25s;overflow:hidden;}
.qp-ficha::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,149,255,.08),rgba(57,199,0,.08));opacity:0;transition:opacity .25s;pointer-events:none;z-index:2;}
.qp-ficha:hover{border-color:var(--cyan);transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,149,255,.18);}
.qp-ficha:hover::before{opacity:1;}
.qp-ficha-imagen{width:100%;height:180px;background:#F5F8FF;display:flex;align-items:center;justify-content:center;border-bottom:2px solid #E5E9F0;overflow:hidden;flex-shrink:0;}
.qp-ficha-imagen img{width:100%;height:100%;object-fit:cover;display:block;}
.qp-ficha-imagen i{font-size:46px;color:#C3CCDE;}
.qp-ficha-contenido{padding:18px 18px 20px;position:relative;z-index:1;}
.qp-ficha-punto{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-right:8px;border:2px solid rgba(0,0,0,.08);vertical-align:middle;}
.qp-ficha-nombre{font-weight:800;font-size:16px;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;}
.qp-ficha-desc{color:#6B7A85;font-size:12.5px;margin-bottom:14px;line-height:1.5;min-height:38px;}
.qp-ficha-meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.qp-ficha-precio{font-family:'Righteous',sans-serif;font-size:24px;color:var(--lime2,#2EA800);}
.qp-ficha-ref{font-size:10.5px;color:#A0ABC0;}
.qp-sin-resultados{text-align:center;color:#6B7A85;font-size:13px;padding:40px 20px;}

/* Tarjeta de servicio ya elegida — brillo degradado sutil en vez de icono */
.rt.rt-elegida{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime) inset,0 6px 18px rgba(57,199,0,.16);}
.rt:hover{border-color:var(--cyan);box-shadow:0 6px 18px rgba(0,149,255,.12);}
.rt-calidad-elegida{font-size:10.5px;font-weight:800;color:var(--lime2,#2EA800);margin-top:2px;display:flex;align-items:center;justify-content:center;gap:4px;}
.rt-calidad-punto{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* Trabajos Especiales — complemento opcional dentro de la ficha de calidad */
.qp-trabajo-especial{display:flex;align-items:flex-start;gap:8px;background:#F5F8FF;border:1.5px solid #C9DCF0;border-radius:10px;padding:8px 10px;margin-top:4px;font-size:11px;color:#4A5568;cursor:pointer;position:relative;z-index:1;line-height:1.4;text-transform:none;letter-spacing:normal;font-weight:400;}
.qp-trabajo-especial input[type="checkbox"]{margin-top:2px;flex-shrink:0;accent-color:var(--cyan);}
.qp-trabajo-especial strong{color:var(--navy);}
.rt-te-elegido{font-size:9.5px;font-weight:700;color:#8B5FBF;margin-top:2px;display:flex;align-items:center;justify-content:center;gap:3px;}
.ms-row-te{color:#8B5FBF;font-size:12px;}

/* ═══════════════════════════════════════════
   DIAGRAMA INTERACTIVO DEL MÓVIL — sustituye a la cuadrícula de reparaciones.
   Se queda dentro del mismo recuadro central del asistente, sin provocar scroll.
═══════════════════════════════════════════ */
.diagram-toggle-wrap{display:flex;justify-content:center;margin-top:calc(10px + 1cm);margin-bottom:14px;}
.diagram-toggle{display:flex;background:var(--offwhite);border-radius:99px;padding:4px;gap:4px;}
.diagram-toggle-btn{border:none;background:transparent;padding:7px 18px;border-radius:99px;font-family:inherit;font-weight:800;font-size:11px;color:var(--gray);cursor:pointer;transition:.2s;}
.diagram-toggle-btn.actief{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(26,46,90,.25);}

.diagram-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:0 auto 14px;position:relative;}
.diagram-movil-col{display:flex;justify-content:center;position:relative;}
.diagram-svg{width:190px;height:auto;display:block;overflow:visible;flex-shrink:0;margin-top:2cm;}
.diagram-selecciones-izq{display:flex;flex-direction:column;gap:8px;justify-self:start;}
.diagram-servicios-extra{display:flex;flex-direction:column;gap:12px;justify-self:end;}
.diagram-vista{display:none;}
.diagram-vista.actief{display:block;}
.diag-vorm{cursor:pointer;transition:fill .18s;}
.diag-hit{cursor:pointer;fill:transparent;}

.diag-servicio{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid rgba(0,149,255,.3);border-radius:99px;padding:4px 12px 4px 4px;box-shadow:0 3px 8px rgba(0,149,255,.15);transition:transform .15s,box-shadow .15s;}
.diag-servicio:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,149,255,.25);}
.diag-servicio-bol{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;background:var(--cyan);transition:background .2s;flex-shrink:0;}
.diag-servicio-naam{font-weight:800;font-size:11.5px;color:var(--navy);white-space:nowrap;}

/* Columna izquierda — resumen visual de reparaciones ya elegidas. Mismo tamaño
   que los iconos de servicio de la derecha, para quedar centrados en la misma
   línea visual. Verde lima directamente (ya están confirmadas). */
/* Posición ABSOLUTA a propósito — así, sea cual sea su contenido, nunca puede
   empujar ni desplazar al móvil ni a los demás elementos del grupo flexible. */
/* Posición ABSOLUTA a propósito — así nunca desplaza al móvil. IMPORTANTE: la
   .card tiene overflow:hidden (para las esquinas redondeadas), así que esta
   columna debe quedarse DENTRO de los límites de la tarjeta o el navegador la
   recorta y desaparece — por eso NO se aleja tanto como se probó antes. */
/* Diseño tipo "chip" moderno — icono en círculo + nombre de la pieza al lado,
   da más información que un icono suelto (el cliente ve qué ha elegido, no
   solo un símbolo abstracto que hay que recordar). */
.diagram-seleccion-item{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid rgba(57,199,0,.3);border-radius:99px;padding:4px 12px 4px 4px;box-shadow:0 3px 8px rgba(57,199,0,.15);animation:diag-sel-pop .25s cubic-bezier(.34,1.4,.64,1);}
.diagram-seleccion-bol{width:30px;height:30px;border-radius:50%;background:var(--lime);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.diagram-seleccion-texto{font-weight:800;font-size:11.5px;color:var(--navy);white-space:nowrap;}
@keyframes diag-sel-pop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Marca de "ya elegido" — anillo lima permanente, visible aunque no se esté con el cursor encima */
.diag-zona.diag-elegido .diag-vorm{fill:var(--lime) !important;opacity:.85 !important;filter:drop-shadow(0 0 12px var(--lime)) drop-shadow(0 0 6px var(--lime));}
.diag-zona.diag-elegido .diag-hit{outline:none;}
.diag-servicio.diag-elegido .diag-servicio-bol{background:var(--lime);box-shadow:0 0 0 3px rgba(57,199,0,.25);}

/* ═══════════════════════════════════════════
   AVISO DE CONFIRMACIÓN — maqueta clara y accesible del mensaje del sistema.
   Fondo CLARO a propósito (legibilidad para cualquier edad).
═══════════════════════════════════════════ */
.aviso-overlay{position:fixed;inset:0;background:rgba(26,46,90,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;}
.aviso-overlay.open{display:flex;}
.aviso-panel{width:380px;max-width:100%;background:#fff;border-radius:22px;padding:26px 24px;box-shadow:0 30px 70px rgba(26,46,90,.35);}
.aviso-titulo{font-family:'Righteous',sans-serif;font-size:17px;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.aviso-titulo .rp-icon-svg{color:var(--cyan);}
.aviso-sub{font-size:13px;color:#6B7A85;margin-bottom:18px;line-height:1.55;}
.aviso-telefono{background:var(--offwhite);border:2px solid var(--border);border-radius:20px;padding:18px 16px;margin-bottom:18px;}
.aviso-telefono-etiqueta{font-size:9.5px;color:#8A97B0;text-align:center;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;}
.aviso-mensaje-sistema{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-start;}
.aviso-mensaje-icono{width:26px;height:26px;border-radius:50%;background:var(--lime);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.aviso-mensaje-titulo{font-weight:800;font-size:13.5px;color:var(--navy);margin-bottom:3px;}
.aviso-mensaje-texto{font-size:12.5px;color:#4A5568;line-height:1.55;}
.aviso-botones{display:flex;flex-direction:column;gap:9px;}
.aviso-btn{border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;transition:.15s;}
.aviso-btn-primario{background:var(--navy);color:#fff;}
.aviso-btn-primario:hover{background:#0F1E3F;}
.aviso-btn-secundario{background:var(--offwhite);color:var(--cyan);}
.aviso-btn-secundario:hover{background:#EAF5FF;}



/* Extra's — ventana emergente al pulsar "Volgende". Reutiliza el estilo .qp-ficha
   ya usado en el panel de calidad (mismo lenguaje visual, sin fondos oscuros). */
.qp-ficha-check{position:absolute;top:16px;right:18px;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;z-index:1;transition:.15s;}
.qp-ficha.checked{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime) inset;}
.qp-ficha.checked .qp-ficha-check{background:var(--lime);border-color:var(--lime);}
.ex-btn-confirmar{width:100%;border:none;background:var(--navy);color:#fff;border-radius:12px;padding:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;margin-top:16px;transition:.15s;}
.ex-btn-confirmar:hover{background:#0F1E3F;}

/* Extra's — emergente HORIZONTAL con tarjetas de producto (imagen real arriba,
   icono de respaldo si aún no hay foto). Se desplaza en horizontal en pantallas
   estrechas en vez de apilarse verticalmente. */
.ex-panel-wide{width:820px;max-width:96vw;background:#FFFFFF;border:1px solid var(--border);border-radius:24px;padding:30px 32px 32px;overflow:hidden;
  transform:scale(.92);opacity:0;transition:transform .28s cubic-bezier(.34,1.3,.64,1),opacity .2s;box-shadow:0 24px 60px rgba(26,46,90,.28);}
.qp-overlay.open .ex-panel-wide{transform:scale(1);opacity:1;}
@media (max-width:640px){
  .ex-panel-wide{width:100%;max-width:100%;border-radius:24px 24px 0 0;transform:translateY(100%);opacity:1;padding:22px 16px 24px;overflow:hidden;}
  .qp-overlay.open .ex-panel-wide{transform:translateY(0);}
}

/* Rejilla en vez de fila con scroll — las tarjetas se encogen o crecen juntas
   para que las 5 quepan siempre visibles, sin desplazamiento en ningún sentido. */
.ex-fila-horizontal{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:8px 0 20px;}
.ex-card{position:relative;background:#fff;border:2px solid #E5E9F0;border-radius:16px;padding:14px 10px;cursor:pointer;transition:.2s;text-align:center;min-width:0;}
@media (max-width:640px){
  .ex-fila-horizontal{grid-template-columns:repeat(3,1fr);gap:10px;}
  .ex-card{padding:10px 8px;}
}
.ex-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,149,255,.14);}
.ex-card.checked{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime) inset;}
.ex-card-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;z-index:1;}
.ex-card.checked .ex-card-check{background:var(--lime);border-color:var(--lime);}
.ex-card-img{width:100%;height:100px;object-fit:contain;margin-bottom:10px;}
.ex-card-ico{width:100%;height:100px;display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--cyan);margin-bottom:10px;}
.ex-card-nombre{font-weight:800;font-size:13px;color:var(--navy);margin-bottom:3px;line-height:1.25;}
.ex-card-desc{font-size:10.5px;color:var(--gray);margin-bottom:7px;line-height:1.35;}
.ex-card-precio{font-family:'Righteous',sans-serif;font-size:16px;color:var(--lime2,#2EA800);}

/* Nombre de la zona bajo el cursor — fijo entre el interruptor y el móvil. */
.diagram-zona-nombre{text-align:center;font-weight:800;font-size:12px;color:var(--cyan);min-height:18px;margin-bottom:6px;margin-top:1.5cm;}



/* ══════════════════════════════════════════════════════════════
   RESPONSIVE DEL DIAGRAMA — 4 escenarios reales, con Container
   Queries (responden al ancho REAL disponible dentro de la tarjeta,
   no al ancho de toda la ventana — importante porque el diseño ya
   cambia de 2 columnas a 1 a los 960px, y el hueco disponible da un
   salto ahí, no es progresivo con el viewport).
   Probado y aprobado antes en la herramienta de maquetación.
══════════════════════════════════════════════════════════════ */

/* 1) ANCHO (≥900px de hueco real) — máxima separación entre iconos y móvil */
@container wizard-card (min-width: 900px) {
  .diagram-stage{padding:0 30mm;}
  .diagram-selecciones-izq{margin-right:20px;}
  .diagram-servicios-extra{margin-left:20px;}
}

/* 2) NORMAL (600–899px) — misma idea, menos distancia */
@container wizard-card (min-width: 600px) and (max-width: 899.98px) {
  .diagram-stage{padding:0 12px;}
  .diagram-selecciones-izq{margin-right:6px;}
  .diagram-servicios-extra{margin-left:6px;}
}

/* 3) ESTRECHO (350–599px) — ya no sobra espacio: se reduce el tamaño de
   todo en vez de acercar los elementos */
@container wizard-card (min-width: 350px) and (max-width: 599.98px) {
  .diagram-svg{width:105px;}
  .diagram-seleccion-item,.diag-servicio{padding:3px 8px 3px 3px;gap:5px;}
  .diagram-seleccion-bol,.diag-servicio-bol{width:22px;height:22px;font-size:10px;}
  .diagram-seleccion-texto,.diag-servicio-naam{font-size:9.5px;}
  .diagram-stage{gap:8px;}
}

/* 4) MÓVIL (<350px) — mismo criterio, reducido aún más, y el conjunto
   completo desplazado 1cm a la izquierda (probado y confirmado) */
@container wizard-card (max-width: 349.98px) {
  .diagram-svg{width:82px;}
  .diagram-seleccion-item,.diag-servicio{padding:2px 6px 2px 2px;gap:4px;}
  .diagram-seleccion-bol,.diag-servicio-bol{width:18px;height:18px;font-size:8px;}
  .diagram-seleccion-texto,.diag-servicio-naam{font-size:8px;}
  .diagram-stage{gap:5px;transform:translateX(-1cm);}
}

/* En pantallas estrechas, la rejilla 2×3 ya funciona bien tal cual (cada
   botón se encoge junto con la tarjeta) — no hace falta ningún ajuste extra. */

/* ══════════════════════════════════════════════════════════════
   PANEL DE CHECKOUT (Stap 5) — desglose de importes + método de pago,
   todo integrado en un único bloque. Acordado con el cliente el
   23/08/2026, sustituye al antiguo .pm-grid + .mollie-box duplicado.
   Solo colores de marca (navy/lima/cyan/blanco) — nada de amarillos.
══════════════════════════════════════════════════════════════ */

/* 4 fichas de garantía */
.guar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.guar-card{background:#fff;border:2px solid var(--border);border-radius:16px;padding:18px 12px;text-align:center;position:relative;overflow:hidden;}
.guar-ico-bol{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--lime),#2EA800);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:0 6px 14px rgba(57,199,0,.3);position:relative;z-index:1;}
.guar-ico-bol .rp-icon-svg{color:#fff;font-size:19px;}
.guar-titel{font-weight:800;font-size:12px;color:var(--navy);margin-bottom:2px;position:relative;z-index:1;}
.guar-sub{font-size:9.5px;color:var(--gray);position:relative;z-index:1;line-height:1.3;}

/* Panel de checkout */
.checkout-card{background:#fff;border-radius:24px;box-shadow:0 10px 34px rgba(26,46,90,.1);overflow:hidden;margin-top:20px;border:2px solid var(--border);}
.checkout-head{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.checkout-head-lbl{color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;max-width:120px;line-height:1.4;}
.checkout-head-total{color:var(--lime);font-family:'Righteous',sans-serif;font-size:32px;white-space:nowrap;}

.checkout-desglose{padding:18px 24px;border-bottom:1.5px dashed var(--border);}
.dg-row{display:flex;justify-content:space-between;font-size:12.5px;color:#5A6B85;padding:5px 0;}
.dg-row.korting{align-items:flex-start;}
.dg-row.korting .dg-korting-info{display:flex;align-items:center;gap:6px;}
.dg-row.korting .dg-korting-info .rp-icon-svg{color:var(--lime);font-size:13px;}
.dg-row.korting .dg-korting-txt{display:flex;flex-direction:column;}
.dg-row.korting .dg-korting-bron{font-size:9.5px;color:var(--gray);font-weight:700;}
.dg-row.korting span:last-child{color:var(--lime);font-weight:800;}
.dg-row.totaal{border-top:1.5px solid var(--border);margin-top:6px;padding-top:10px;font-weight:800;color:var(--navy);font-size:14px;}

.checkout-pay{padding:20px 24px 24px;}
.pay-titel{font-weight:800;font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;}

/* Rejilla plana 2×3 — 6 botones, todos exactamente del mismo tamaño, sin
   anidar nada ni expandir nada. */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pay-grid-3{grid-template-columns:1fr 1fr 1fr;}
.pay-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid var(--border);border-radius:14px;padding:16px 10px;cursor:pointer;transition:.15s;height:84px;background:#fff;outline:none;}
.pay-btn:focus,.pay-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,149,255,.3);}
.pay-btn:hover{border-color:var(--cyan);}
.pay-btn.sel{border-color:var(--cyan);background:#EAF5FF;box-shadow:0 0 0 2px var(--cyan) inset,0 0 20px rgba(0,149,255,.18);}
.pay-btn-logo{height:26px;display:flex;align-items:center;justify-content:center;background:#fff;}
.pay-btn-logo img{max-height:26px;max-width:80px;object-fit:contain;}
.pay-btn-logo-icono{width:28px;height:28px;border-radius:8px;background:var(--navy);display:flex;align-items:center;justify-content:center;}
.pay-btn-logo-icono .rp-icon-svg{color:#fff;font-size:14px;}
.pay-btn-naam{font-weight:800;font-size:11px;color:var(--navy);text-align:center;}

.checkout-btn{width:100%;border:none;background:linear-gradient(135deg,var(--lime),#2EA800);color:#fff;padding:15px;border-radius:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;margin-top:18px;box-shadow:0 8px 20px rgba(57,199,0,.3);display:flex;align-items:center;justify-content:center;gap:8px;outline:none;}
.checkout-btn:focus,.checkout-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(57,199,0,.35),0 8px 20px rgba(57,199,0,.3);}
.checkout-btn:hover{background:linear-gradient(135deg,#2EA800,#268F00);}
.checkout-veilig{text-align:center;font-size:10px;color:var(--gray);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px;}

/* Captcha (nivel 2), integrado con el mismo estilo limpio */
.captcha-box{background:#F5F8FF;border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-top:16px;}
.captcha-titel{font-weight:800;font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.captcha-fila{display:flex;align-items:center;gap:10px;}
.captcha-pregunta{background:#fff;border:2px solid var(--border);border-radius:10px;padding:10px 14px;font-weight:800;font-size:14px;color:var(--navy);white-space:nowrap;}
.captcha-input{flex:1;border:2px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;font-weight:800;font-size:14px;color:var(--navy);width:0;min-width:0;}
.captcha-input:focus{outline:none;border-color:var(--cyan);}
.captcha-input.err{border-color:#D9534F;}



/* FORZADO — oculta cualquier icono o imagen que aparezca dentro de las fichas
   de garantía, venga de donde venga (nuestro código, un plugin, lo que sea). */
.guar-grid i, .guar-grid svg, .guar-grid img { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   KLANTSTATUS (Stap 4) — 3 fichas (ZZP retirada, 23/08/2026), fondos
   de color de marca, SVG propios. + verificación real de Club con
   2 emergentes (sin cuenta verificada / premios reales del socio).
══════════════════════════════════════════════════════════════ */
.ctype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ctype-card{border-radius:16px;padding:16px 10px;text-align:center;cursor:pointer;transition:.2s;position:relative;overflow:hidden;border:2px solid transparent;}
.ctype-card:hover{transform:translateY(-2px);}
.ctype-ico{width:34px;height:34px;margin:0 auto 8px;display:block;}
.ctype-title{font-weight:800;font-size:11.5px;color:#fff;margin-bottom:2px;position:relative;z-index:1;}
.ctype-desc{font-size:8.5px;color:rgba(255,255,255,.75);line-height:1.3;position:relative;z-index:1;}
.ctype-badge{position:absolute;top:6px;right:6px;background:#fff;color:var(--navy);font-size:8px;font-weight:900;padding:2px 6px;border-radius:99px;}
.ctype-cyan{background:linear-gradient(135deg,var(--cyan),#0077CC);}
.ctype-navy{background:linear-gradient(135deg,var(--navy),var(--navy2));}
.ctype-lime{background:linear-gradient(135deg,var(--lime),#2EA800);}

.qp-panel-aviso{width:380px;max-width:100%;text-align:center;}
.qp-panel-premios{width:520px;max-width:100%;}
.aviso-svg-club{width:80px;height:80px;margin:0 auto 14px;display:block;}
.aviso-titel-club{font-family:'Righteous',sans-serif;font-size:18px;color:var(--navy);margin-bottom:8px;}
.aviso-tekst-club{font-size:12.5px;color:#5A6B85;line-height:1.6;margin-bottom:18px;}
.aviso-btns-club{display:flex;flex-direction:column;gap:8px;}
.aviso-btn-club{border:none;border-radius:12px;padding:12px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;display:block;text-align:center;}
.aviso-btn-primario-club{background:var(--navy);color:#fff;}
.aviso-btn-secundario-club{background:#F5F8FF;color:var(--cyan);}

.premios-head-club{text-align:center;margin-bottom:18px;}
.premios-svg-club{width:60px;height:60px;margin:0 auto 8px;display:block;}
.premios-titel-club{font-family:'Righteous',sans-serif;font-size:18px;color:var(--navy);}
.premios-sub-club{font-size:11.5px;color:#5A6B85;}
.premios-fila-club{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.premio-ficha{flex:1;min-width:140px;border:2px solid var(--border);border-radius:16px;padding:16px 12px;text-align:center;cursor:pointer;transition:.2s;position:relative;}
.premio-ficha:hover{border-color:var(--cyan);transform:translateY(-2px);}
.premio-ficha.sel{border-color:var(--lime);background:#FAFFF7;box-shadow:0 0 0 2px var(--lime) inset;}
.premio-ficha-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;}
.premio-ficha.sel .premio-ficha-check{background:var(--lime);border-color:var(--lime);}
.premio-svg{width:44px;height:44px;margin:0 auto 8px;display:block;}
.premio-valor{font-family:'Righteous',sans-serif;font-size:20px;color:var(--lime);margin-bottom:2px;}
.premio-desc{font-size:10px;color:var(--gray);}

/* ══════════════════════════════════════════════════════════════
   STAP 2 (LOCATIE) — rediseño moderno + validación real de
   dirección vía PDOK (registro oficial neerlandés). El rojo solo
   se usa en el aviso de error, en ningún otro sitio. Añadido 23/08/2026.
══════════════════════════════════════════════════════════════ */
.pc-fila-moderna{display:flex;gap:10px;}
.pc-input-moderna{flex:1;border:2px solid var(--border);border-radius:14px;padding:14px 16px;font-family:inherit;font-weight:800;font-size:15px;color:var(--navy);text-transform:uppercase;}
.pc-input-moderna:focus{outline:none;border-color:var(--cyan);}
.pc-btn-moderna{border:none;background:var(--navy);color:#fff;border-radius:14px;padding:0 20px;font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.pc-btn-moderna:hover{background:#0F1E3F;}

.addr-fila{display:flex;gap:10px;margin-top:4px;}
.addr-campo-chico{flex:0 0 100px;}
.addr-campo{flex:1;}
.addr-label-moderna{font-weight:800;font-size:11.5px;color:var(--navy);margin-bottom:6px;display:block;}
.addr-input-moderna{width:100%;border:2px solid var(--border);border-radius:14px;padding:13px 15px;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--navy);}
.addr-input-moderna:focus{outline:none;border-color:var(--cyan);}
.addr-input-moderna.confirmado{border-color:var(--lime);background:#FAFFF7;}

.addr-confirmacion{display:flex;align-items:center;gap:10px;background:#F5FFF0;border:2px solid var(--lime);border-radius:14px;padding:12px 16px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--navy);}
.addr-confirmacion .rp-icon-svg{color:var(--lime);font-size:20px;flex-shrink:0;}

/* Emergente de dirección no encontrada — único sitio con rojo */
.qp-panel-error-addr{background:#fff;border-radius:24px;padding:28px 26px;text-align:center;width:360px;max-width:100%;box-shadow:0 24px 60px rgba(26,46,90,.28);}
.error-svg-addr{width:80px;height:80px;margin:0 auto 16px;display:block;}
.error-titel-addr{font-family:'Righteous',sans-serif;font-size:18px;color:var(--navy);margin-bottom:8px;}
.error-tekst-addr{font-size:12.5px;color:#5A6B85;line-height:1.6;margin-bottom:20px;}
.error-btn-addr{width:100%;border:none;background:var(--navy);color:#fff;border-radius:12px;padding:13px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;}
.error-btn-addr:hover{background:#0F1E3F;}

/* ══════════════════════════════════════════════════════════════
   EMERGENTE DE ENTRADA (Stap 1) — 4 caminos: nuevo/login/club/invitado.
   Fondo blanco, colores del sistema, SVG propios. Añadido: 23/08/2026.
══════════════════════════════════════════════════════════════ */
.qp-panel-entrada{width:400px;max-width:100%;}
.gate-head{text-align:center;margin-bottom:20px;}
.gate-head-svg{width:64px;height:64px;margin:0 auto 12px;display:block;}
.gate-titel{font-family:'Righteous',sans-serif;font-size:19px;color:var(--navy);margin-bottom:4px;}
.gate-sub{font-size:12.5px;color:var(--gray);}

.gate-terug{border:none;background:none;color:var(--cyan);font-weight:800;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;margin-bottom:14px;padding:0;}

.gate-opciones{display:flex;flex-direction:column;gap:10px;}
.gate-opcion{display:flex;align-items:center;gap:12px;border:2px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:.15s;}
.gate-opcion:hover{border-color:var(--cyan);background:#F5FAFF;}
.gate-opcion-ico{width:26px;height:26px;flex-shrink:0;}
.gate-opcion-titel{font-weight:800;font-size:13.5px;color:var(--navy);}
.gate-opcion-desc{font-size:11px;color:var(--gray);}
.gate-opcion .rp-icon-svg{margin-left:auto;color:var(--border);font-size:18px;}

.gate-form{display:flex;flex-direction:column;gap:10px;}
.gate-fila2{display:flex;gap:10px;}
.gate-fila2 .gate-input{flex:1;}
.gate-input{border:2px solid var(--border);border-radius:12px;padding:12px 14px;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--navy);width:100%;}
.gate-input:focus{outline:none;border-color:var(--cyan);}

.gate-ctype-fila{display:flex;gap:8px;margin-top:2px;}
.gate-ctype-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--border);border-radius:10px;padding:9px 6px;font-size:11.5px;font-weight:700;color:var(--navy);cursor:pointer;}
.gate-ctype-opt input{accent-color:var(--lime);}

.gate-consent{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--gray);cursor:pointer;margin-top:4px;}
.gate-consent input{margin-top:2px;accent-color:var(--lime);flex-shrink:0;}
.gate-consent a{color:var(--cyan);font-weight:700;}

.gate-err{background:#FFF0F0;border:1.5px solid #F5C6C6;border-radius:10px;padding:9px 12px;font-size:11.5px;font-weight:700;color:var(--red);}

.gate-exito{text-align:center;padding:10px 0;}
.gate-exito i{font-size:40px;color:var(--lime);margin-bottom:10px;display:block;}
.gate-exito p{font-size:13px;color:var(--navy);font-weight:700;}

/* Distinción visual clara gratis/de pago en el mensaje de zona (Stap 2) */
.hb-info-gratis{background:rgba(57,199,0,.08);border-color:rgba(57,199,0,.3);color:#1F7A00;}
.hb-info-pago{background:rgba(0,149,255,.05);border-color:rgba(0,149,255,.2);color:#003B6F;}

/* ══════════════════════════════════════════════════════════════
   STAP 3 — ya no hay calendario real, solo estimación + aviso de
   confirmación por WhatsApp/email. Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.estimacion-svg-wrap{text-align:center;margin:8px 0 18px;}
.estimacion-svg{width:110px;height:110px;}

.estimacion-fecha-box{text-align:center;background:var(--offwhite);border:2px solid var(--border);border-radius:18px;padding:22px 20px;margin-bottom:18px;}
.estimacion-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gray);font-size:13px;font-weight:700;}
.estimacion-loading-icon{animation:zf-spin 1s linear infinite;}
@keyframes zf-spin{ to{ transform:rotate(360deg); } }
.estimacion-rango{font-family:'Righteous',sans-serif;font-size:28px;color:var(--navy);}
.estimacion-sub{font-size:12.5px;color:var(--gray);margin-top:6px;}

.estimacion-info{display:flex;gap:12px;background:#F5FAFF;border:2px solid rgba(0,149,255,.2);border-radius:14px;padding:16px 18px;margin-bottom:16px;}
.estimacion-info .rp-icon-svg{color:var(--cyan);font-size:22px;flex-shrink:0;margin-top:2px;}
.estimacion-info div{font-size:12.5px;color:var(--navy);line-height:1.6;}

.estimacion-canales{display:flex;gap:10px;justify-content:center;}
.estimacion-canal{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--border);border-radius:99px;padding:8px 16px;font-weight:800;font-size:12px;color:var(--navy);}

/* SVG animados de calidad (Stap 3, y nota de marcas) — sustituyen a los
   iconos de fuente genéricos. Añadido: 24/08/2026. */
.hb-info-svg{width:32px;height:32px;flex-shrink:0;vertical-align:middle;margin-right:8px;animation:zf-svg-pulso 2.6s ease-in-out infinite;}
.estimacion-info-svg{width:42px;height:42px;flex-shrink:0;animation:zf-svg-pulso 2.6s ease-in-out infinite;}
.estimacion-canal-svg{width:32px;height:32px;animation:zf-svg-pulso 2.6s ease-in-out infinite;}
.estimacion-canal:nth-child(2) .estimacion-canal-svg{animation-delay:.4s;}

@keyframes zf-svg-pulso{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   "ELIGE POR NOSOTROS" — botón + emergente de 2 preguntas + filtro
   de urgencia. Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.qp-elige-btn{
  display:flex;align-items:center;gap:14px;width:100%;border:none;border-radius:18px;
  padding:16px 20px;margin:14px 0 18px;cursor:pointer;text-align:left;
  background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 10px 26px rgba(26,46,90,.25);
  transition:.2s;
}
.qp-elige-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(26,46,90,.32);}
.qp-elige-svg{width:44px;height:44px;flex-shrink:0;animation:zf-svg-pulso 2.4s ease-in-out infinite;}
.qp-elige-btn span{flex:1;color:#fff;font-weight:800;font-size:14.5px;}
.qp-elige-arrow{width:20px;height:20px;flex-shrink:0;}

.qp-panel-elige{width:420px;}
.elige-pregunta{margin-bottom:20px;}
.elige-pregunta-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.elige-pregunta-svg{width:40px;height:40px;flex-shrink:0;}
.elige-pregunta-head strong{display:block;font-size:14px;color:var(--navy);}
.elige-pregunta-head span{display:block;font-size:11px;color:var(--gray);}
.elige-opciones{display:flex;gap:8px;flex-wrap:wrap;}
.elige-opcion{flex:1;min-width:100px;text-align:center;border:2px solid var(--border);border-radius:12px;padding:11px 10px;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;transition:.15s;}
.elige-opcion:hover{border-color:var(--cyan);}
.elige-opcion.sel{border-color:var(--lime);background:#FAFFF7;color:var(--lime2,#2EA800);box-shadow:0 0 0 2px var(--lime) inset;}

/* ══════════════════════════════════════════════════════════════
   PISTA "TIK OP EEN ONDERDEEL" — sobre el diagrama del móvil.
   Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.diagram-tap-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:opacity .4s,visibility .4s;
}
.diagram-tap-hint.oculto{opacity:0;visibility:hidden;}
.diagram-tap-hint svg{width:80px;height:80px;}
.tap-hint-onda{transform-origin:center;animation:zf-tap-onda 1.8s ease-out infinite;}
.tap-hint-onda-2{animation-delay:.6s;}
.tap-hint-dedo{animation:zf-tap-dedo 1.8s ease-in-out infinite;transform-origin:40px 40px;}
.tap-hint-tekst{background:rgba(26,46,90,.88);color:#fff;font-size:11px;font-weight:800;padding:6px 14px;border-radius:99px;white-space:nowrap;}

@keyframes zf-tap-onda{
  0%{ transform:scale(.5); opacity:.9; }
  100%{ transform:scale(1.8); opacity:0; }
}
@keyframes zf-tap-dedo{
  0%,100%{ transform:translateY(0) scale(1); }
  40%{ transform:translateY(4px) scale(.94); }
  55%{ transform:translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   STAP 2 (LOCATIE) — rediseño completo, mismo nivel que el panel de
   calidad: solo 2 casillas grandes, tarjeta de resultado con SVG,
   lenguaje cercano para el coste. Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.loc-fila-grande{display:flex;gap:16px;margin-bottom:18px;}
.loc-campo-grande{flex:1;}
.loc-campo-nr{flex:0 0 42%;}
.loc-label-grande{display:block;font-weight:800;font-size:12px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.loc-input-grande{width:100%;border:2px solid var(--border);border-radius:16px;padding:16px 18px;font-family:inherit;font-weight:800;font-size:17px;color:var(--navy);}
.loc-input-grande:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,149,255,.1);}
#pc-input.loc-input-grande{text-transform:uppercase;}
textarea.loc-input-grande{min-height:80px;resize:vertical;font-family:inherit;}

.loc-cargando{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gray);font-size:13px;font-weight:700;padding:24px;background:var(--offwhite);border-radius:18px;}
.loc-cargando i{animation:zf-spin 1s linear infinite;font-size:18px;}

.loc-resultado-card{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--lime);border-radius:20px;padding:18px 20px;box-shadow:0 10px 26px rgba(57,199,0,.12);animation:zf-loc-entrada .35s cubic-bezier(.34,1.3,.64,1);}
.loc-resultado-svg{width:52px;height:52px;flex-shrink:0;}
.loc-resultado-adres{font-family:'Righteous',sans-serif;font-size:18px;color:var(--navy);}
.loc-resultado-plaats{font-size:12.5px;color:var(--gray);margin-top:2px;}

.loc-zona-badge{display:flex;align-items:center;gap:10px;border-radius:16px;padding:14px 18px;margin-top:12px;font-weight:800;font-size:14px;color:#fff;animation:zf-loc-entrada .35s .1s cubic-bezier(.34,1.3,.64,1) both;}
.loc-zona-badge svg{width:22px;height:22px;flex-shrink:0;}
.loc-zona-gratis{background:linear-gradient(135deg,var(--lime),#2EA800);}
.loc-zona-kosten{background:linear-gradient(135deg,var(--cyan),#0077CC);}

@keyframes zf-loc-entrada{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.loc-nota-opcional{margin-top:20px;}
.loc-nota-toggle{display:flex;align-items:center;gap:6px;border:none;background:none;color:var(--cyan);font-weight:800;font-size:12.5px;cursor:pointer;padding:6px 0;}
.loc-nota-toggle .rp-icon-svg{transition:transform .2s;}
.loc-nota-toggle.open .rp-icon-svg{transform:rotate(45deg);}
.loc-nota-campo{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.loc-nota-campo.open{max-height:80px;margin-top:8px;}

/* ══════════════════════════════════════════════════════════════
   STAP 4 (GEGEVENS) — rediseño completo. Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */

/* ── Interruptor "reservo como empresa" ── */
.empresa-toggle-wrap{margin:18px 0;}
.empresa-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;}
.empresa-toggle input{position:absolute;opacity:0;width:0;height:0;}
.empresa-toggle-slider{position:relative;width:44px;height:25px;background:var(--border);border-radius:99px;flex-shrink:0;transition:.2s;}
.empresa-toggle-slider::before{content:'';position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.empresa-toggle input:checked + .empresa-toggle-slider{background:var(--lime);}
.empresa-toggle input:checked + .empresa-toggle-slider::before{transform:translateX(19px);}
.empresa-toggle-tekst{font-weight:800;font-size:13.5px;color:var(--navy);display:flex;align-items:center;gap:6px;}
.empresa-campos{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.empresa-campos.open{max-height:200px;margin-top:16px;}

/* ── Tarjeta de confirmación (socio ZZP/Bedrijf ya en cuenta) ── */
.empresa-confirmada-card{display:flex;align-items:center;gap:14px;background:#F5FFF0;border:2px solid var(--lime);border-radius:16px;padding:14px 18px;margin:18px 0;}
.empresa-confirmada-card svg{width:36px;height:36px;flex-shrink:0;}
.empresa-confirmada-card > div{flex:1;}
.empresa-confirmada-titel{font-weight:800;font-size:13.5px;color:var(--navy);}
.empresa-confirmada-sub{font-size:11.5px;color:var(--gray);margin-top:2px;}
.empresa-confirmada-card a{font-size:11.5px;font-weight:800;color:var(--cyan);text-decoration:none;}
.empresa-confirmada-card a:hover{text-decoration:underline;}

/* ── Aviso RGPD resumido + check de verificación ── */
.rgpd-resumen{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;background:var(--offwhite);border-radius:14px;}
.rgpd-svg{width:30px;height:30px;flex-shrink:0;}
.rgpd-resumen p{font-size:11.5px;color:var(--gray);line-height:1.5;margin:0;}
.rgpd-check-rij{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin-top:12px;padding:14px 16px;border:2px solid var(--border);border-radius:14px;transition:.15s;}
.rgpd-check-rij:hover{border-color:var(--cyan);}
.rgpd-check-rij input{position:absolute;opacity:0;width:0;height:0;}
.rgpd-check-slider{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);flex-shrink:0;position:relative;transition:.15s;margin-top:1px;}
.rgpd-check-rij input:checked + .rgpd-check-slider{background:var(--lime);border-color:var(--lime);}
.rgpd-check-rij input:checked + .rgpd-check-slider::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.rgpd-check-rij span:last-child{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.5;}
.rgpd-check-rij a{color:var(--cyan);}

/* ══════════════════════════════════════════════════════════════
   EMERGENTE DE ENVÍO POSTNL — direcciones fuera de Zeeland.
   Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.qp-panel-postnl{width:460px;}
.postnl-svg-wrap{text-align:center;margin-bottom:14px;}
.postnl-svg-wrap svg{width:90px;height:90px;}
.postnl-intro{font-size:13px;color:var(--navy);line-height:1.6;text-align:center;margin-bottom:16px;}

.postnl-direccion-box{display:flex;align-items:center;gap:10px;background:var(--offwhite);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:12.5px;font-weight:700;color:var(--navy);}
.postnl-direccion-box .rp-icon-svg{color:var(--cyan);flex-shrink:0;}

#postnl-coste-resultado{margin-bottom:16px;}
.postnl-velocidad-opciones{display:flex;gap:12px;}
.postnl-velocidad-opt{flex:1;text-align:center;border:2px solid var(--border);border-radius:16px;padding:16px 12px;cursor:pointer;transition:.15s;}
.postnl-velocidad-opt:hover{border-color:var(--cyan);}
.postnl-velocidad-opt.sel{border-color:var(--lime);background:#FAFFF7;box-shadow:0 0 0 2px var(--lime) inset;}
.postnl-velocidad-titel{font-weight:800;font-size:13px;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:6px;}
.postnl-velocidad-titel .rp-icon-svg{color:var(--cyan);}
.postnl-velocidad-precio{font-family:'Righteous',sans-serif;font-size:20px;color:var(--lime2,#2EA800);}
.postnl-gratis-club{color:var(--lime2,#2EA800);}
.postnl-velocidad-dias{font-size:11px;color:var(--gray);margin-top:2px;}

.postnl-pasos{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.postnl-paso{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gray);}
.postnl-paso-nr{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════
   VALE DE PRIORIDAD ZZP — Stap 4. Añadido: 24/08/2026.
══════════════════════════════════════════════════════════════ */
.zzp-prioridad-box{margin:16px 0;background:linear-gradient(135deg,#F0F8FF,#EAF5FF);border:2px solid var(--cyan);border-radius:16px;padding:14px 18px;}
.zzp-prioridad-check{display:flex;align-items:center;gap:12px;cursor:pointer;}
.zzp-prioridad-check input{position:absolute;opacity:0;width:0;height:0;}
.zzp-prioridad-slider{width:22px;height:22px;border-radius:7px;border:2px solid var(--cyan);flex-shrink:0;position:relative;transition:.15s;}
.zzp-prioridad-check input:checked + .zzp-prioridad-slider{background:var(--cyan);}
.zzp-prioridad-check input:checked + .zzp-prioridad-slider::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.zzp-prioridad-check span:last-child{font-size:12.5px;color:var(--navy);}
.zzp-prioridad-check .rp-icon-svg{color:var(--cyan);}

/* Nota fiscal del checkout — coherente con el modo del motor fiscal.
   Añadido: 24/08/2026. */
.checkout-fiscal-nota{font-size:10.5px;color:var(--gray);text-align:center;margin:8px 0 0;}

/* ── Icono SVG unificado del asistente — tamaño por defecto, se hereda color
   con currentColor donde el contexto lo permite. Añadido: 24/08/2026. ── */
.rp-icon-svg{display:inline-block;vertical-align:middle;width:18px;height:18px;flex-shrink:0;color:inherit;}