/* ============================================================================
   Estilos del proceso de reserva (checkout).

   ANTES VIVIAN EN UN <style> DENTRO DEL COMPONENTE, empujado con @push('styles')
   y volcado al FINAL del <body>. Resultado: el navegador pintaba la pagina entera
   en HTML desnudo y la vestia un instante despues. En una pagina de pago ese
   parpadeo asusta —parece que la web se ha roto justo antes de dar la tarjeta—.

   Aqui es un fichero normal, enlazado en la cabecera: llega antes de pintar nada.
   No lleva ni una expresion de Blade, por eso se puede sacar tal cual.
   ========================================================================== */

/* CSS ROOT & Layout de V3 */
:root {
  --orange:#E8690A;--orange-h:#d45e00;--orange-glow:rgba(232,105,10,.16);
  --navy:#162d4a;--navy2:#1e3f67;
  --cream:#faf7f3;
  --g50:#f8f9fa;--g100:#f1f3f5;--g200:#e9ecef;--g300:#dee2e6;
  --g400:#adb5bd;--g600:#6c757d;--g700:#495057;--g800:#343a40;--g900:#212529;
  --green:#1a7a4a;--green-bg:#e8f5ee;--green-border:#a8d5b8;
  --gold:#b8920a;--gold-bg:#fdf8e8;--gold-border:#f0d96a;
  --r:12px;--rs:8px;
  --sh1:0 1px 4px rgba(0,0,0,.07);
  --sh2:0 4px 20px rgba(0,0,0,.10);
  
  --kerala-orange: #E8690A;
  --kerala-navy: #162d4a;
}

.kw-wrap { display:flex; align-items:flex-start; gap:24px; max-width:1400px; margin:0 auto; padding:0 20px; }
#leftCol { flex:1 1 0%; min-width:0; }
#rightCol { flex:0 0 320px; width:320px; position:sticky; top:80px; align-self:flex-start; }
.card { background: #fff; border-radius: var(--r); padding: 24px 26px; box-shadow: var(--sh1); }
.card-title { font-family: 'Lora', serif; font-size: 21px; color: var(--navy); margin-bottom: 4px; }
.card-sub { color: var(--g600); font-size: 13.5px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--g100); }
.row1{margin-bottom:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:13px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.7px}
.fg input,.fg select,.fg textarea{border:1.5px solid var(--g300);border-radius:var(--rs);padding:10px 13px;font-size:14px;color:var(--g900);background:#fff;outline:none;width:100%}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
.fg textarea{resize:vertical;min-height:90px;line-height:1.5}
.fg .hint{font-size:11.5px;color:var(--g400);margin-top:2px}

.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;position:relative}
.step-track{position:absolute;left:12%;right:12%;top:20px;height:4px;background:var(--g200);border-radius:999px;z-index:0}
.sfill{height:100%;background:linear-gradient(90deg,var(--orange),#ffb066);border-radius:999px;transition:width .25s ease}
.snode{position:relative;z-index:1;text-align:center;cursor:default}
.sring{width:40px;height:40px;border-radius:999px;margin:0 auto 8px;background:#fff;border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--g600)}
.slabel{font-size:13px;color:var(--g600);font-weight:600}
.snode.active .sring,.snode.done .sring{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 4px var(--orange-glow)}
.snode.active .slabel,.snode.done .slabel{color:var(--navy)}
.city-wrap label,.sdiv{display:block;font-weight:700;color:var(--g800);margin-bottom:10px}
.city-wrap{position:relative;margin-bottom:22px}
.city-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--g300);border-radius:10px;background:#fff;padding:12px 14px;text-align:left}
.city-trigger.open{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-glow)}
.ct-placeholder{color:var(--g600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-arrow{color:var(--orange);font-size:12px}
.city-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--g300);border-radius:12px;box-shadow:var(--sh2);padding:12px;z-index:20}
.city-search-box input{width:100%;border:1px solid var(--g300);border-radius:10px;padding:10px 12px}
.city-list{margin-top:10px;max-height:280px;overflow:auto}
.city-option{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.city-option:hover,.city-option.kbd-focus,.city-option.is-selected{background:#fff5ec}
.co-name{font-weight:700;color:var(--navy)}
.co-addr{font-size:12px;color:var(--g600)}
.co-time{font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap}
.month-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.month-tab{border:1px solid var(--g300);background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;color:var(--g700)}
.month-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
.dates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:14px}
.dcard{border:1px solid var(--g300);background:#fff;border-radius:12px;padding:14px;cursor:pointer;text-align:left;transition:all .2s ease}
.dcard:hover{border-color:var(--orange)}
.dcard.sel{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-glow)}
.dc-day{font-size:28px;font-weight:800;color:var(--navy);line-height:1}
.dc-month{margin-top:4px;color:var(--g600);font-size:13px}
.dc-price{margin-top:10px;font-weight:700;color:var(--orange)}
.dc-badge{margin-top:8px;display:inline-block;background:#fff5ec;color:var(--orange);font-size:11px;font-weight:700;padding:4px 6px;border-radius:999px}
.empty-state{padding:18px;border:1px dashed var(--g300);border-radius:12px;color:var(--g600);background:#fff}
.promo-alert,.disc-banner{margin:14px 0;padding:12px 14px;border-radius:10px;background:#fff5ec;color:#9a4b00}
.hotel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.hcard{position:relative;border:1px solid var(--g300);border-radius:14px;background:#fff;padding:16px;cursor:pointer}
.hcard.sel{border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-glow)}
.h-stars{font-size:14px;color:#c78a00}
.h-name{font-weight:800;color:var(--navy);margin-top:6px}
.h-sub,.h-examples{font-size:13px;color:var(--g600);margin-top:6px}
.h-price{margin-top:12px;font-size:22px;font-weight:800;color:var(--orange)}
.h-unit{font-size:13px;font-weight:500;color:var(--g600)}
.h-tag{display:inline-block;margin-top:10px;background:#eef8f1;color:#1a7a4a;font-size:12px;font-weight:700;padding:5px 8px;border-radius:999px}
.pax-block{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--g300);border-radius:12px;background:#fff;margin-bottom:12px}
.pt-name{font-weight:800;color:var(--navy)}
.pt-sub{font-size:13px;color:var(--g600)}
.pax-ctrl{display:flex;align-items:center;gap:10px}
.pcbtn{width:32px;height:32px;border:1px solid var(--g300);background:#fff;border-radius:8px;font-size:18px;line-height:1}
.pcval{min-width:18px;text-align:center;font-weight:800}
.btn-row{display:flex;justify-content:flex-end;margin-top:18px}
.btn-next{background:var(--orange);border:none;color:#fff;border-radius:10px;padding:12px 18px;font-weight:800}
.btn-back{background:#fff;border:1.5px solid var(--g300);color:var(--g600);padding:12px 18px;border-radius:10px;font-weight:700}
.btn-save{background:#fff;border:1.5px solid var(--orange);color:var(--orange);padding:12px 18px;border-radius:10px;font-weight:800}
.btn-pay{background:linear-gradient(135deg,var(--orange),var(--orange-h));border:none;color:#fff;padding:12px 18px;border-radius:10px;font-weight:800}
.pax-form-block{background:var(--g50);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;border:1px solid var(--g100)}
.pax-form-block h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--navy);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.pax-num{width:26px;height:26px;background:var(--orange);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.supp-card{border:2px solid var(--g200);border-radius:var(--r);padding:13px 15px;display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;cursor:pointer;transition:all .22s;margin-bottom:8px}
.supp-card:hover{border-color:var(--orange)}
.supp-card.checked{border-color:var(--orange);background:#fff8f2}
.supp-icon{width:50px;height:50px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.si1{background:linear-gradient(135deg,#162d4a,#2a6096)}
.si2{background:linear-gradient(135deg,#0a7c6e,#1aaa94)}
.si3{background:linear-gradient(135deg,#7c1a4a,#b5346e)}
.si4{background:linear-gradient(135deg,#4a2a7c,#7a5ab8)}
.supp-img{width:50px;height:50px;object-fit:cover;border-radius:8px;flex-shrink:0}
.supp-title{font-weight:700;font-size:13px;color:var(--navy);margin-bottom:2px}
.supp-desc{font-size:12px;color:var(--g600);line-height:1.4}
.supp-price{font-size:18px;font-weight:700;color:var(--orange);text-align:right}
.supp-pp{font-size:11px;color:var(--g400);text-align:right}
.chk{width:20px;height:20px;border:2px solid var(--g300);border-radius:4px;appearance:none;cursor:pointer;transition:all .2s}
.chk:checked{background:var(--orange);border-color:var(--orange)}
.sum-box{background:var(--g50);border-radius:var(--r);padding:15px 17px;margin-bottom:13px}
.sum-box h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--g400);margin-bottom:10px}
.sum-row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;border-bottom:1px solid var(--g200)}
.sum-row:last-child{border-bottom:none}
.sr-k{color:var(--g600)}
.sr-v{font-weight:600;color:var(--g900);text-align:right;padding-left:12px}
.disc-row{display:flex;gap:8px;margin:10px 0}
.disc-row input{flex:1}
.btn-apply{background:var(--g800);color:#fff;border:none;padding:10px 18px;border-radius:var(--rs);font-size:13px;font-weight:700}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:11px 0}
.pm{border:2px solid var(--g200);border-radius:var(--rs);padding:13px 10px;text-align:center;cursor:pointer;transition:all .2s}
.pm.sel{border-color:var(--navy);background:#f0f4ff}
.pm-icon{font-size:26px;margin-bottom:4px}
.pm-name{font-size:13px;font-weight:700;color:var(--g800)}
.pm-desc{font-size:11px;color:var(--g600)}
.privacy-row{display:flex;align-items:flex-start;gap:10px;background:var(--g50);border-radius:var(--rs);padding:12px 13px;border:1px solid var(--g100);margin:13px 0}
.privacy-row label{font-size:13px;color:var(--g700);line-height:1.55;cursor:pointer}
.privacy-row a{color:var(--orange);text-decoration:none;font-weight:600}
.trust-bar{display:flex;flex-wrap:wrap;gap:14px;padding-top:15px;margin-top:14px;border-top:1px solid var(--g100)}
.tb-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--g600)}
.sidebar{position:sticky;top:18px}
.price-cap,.sb-body{background:#fff;border-radius:14px;box-shadow:var(--sh1)}
.price-cap{padding:18px 18px 12px;margin-bottom:14px}
.pc-label{font-size:13px;color:var(--g600);font-weight:700}
.pc-total{font-size:34px;font-weight:900;color:var(--navy);line-height:1;margin-top:4px}
.pc-pp{margin-top:6px;color:var(--g700)}
.sb-body{overflow:hidden}
.sb-img{position:relative}
.sb-img img{width:100%;height:180px;object-fit:cover}
.sb-overlay{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.08))}
.sbt{color:#fff;font-weight:800;font-size:22px;line-height:1.1}
.sb-sec,.price-bk{padding:16px 18px}
.sb-sec h5,.price-bk h5{margin:0 0 12px;font-size:16px;color:var(--navy);font-weight:800}
.sb-row,.pk{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.sk{color:var(--g600)}
.sv,.pa{font-weight:700;color:var(--g800);text-align:right}
.pk.total{border-top:1px solid var(--g200);margin-top:8px;padding-top:12px}
.pk.green{color:var(--green)}
.urgency{margin:0 18px 12px;padding:12px;border-radius:10px;background:#fff5ec;color:#9a4b00;font-weight:700}
.rating-row{padding:0 18px 18px;color:var(--g700)}
.stars{color:#c78a00;letter-spacing:1px}

/* Se irÃ¡n aÃ±adiendo mÃ¡s estilos base globales o de layouts generales si hace falta. 
   La mayorÃ­a de los estilos custom irÃ¡n en los partials o aquÃ­. */

@media(max-width:992px){
  .kw-wrap{flex-direction:column}
  #rightCol{position:static;width:100%;flex:none}

  /* En el telefono el wizard se salia 147 px del ancho de pantalla y arrastraba toda la pagina
     de lado. Es el caso clasico de flex: un hijo de un contenedor flex NO se encoge por debajo
     de su contenido salvo que se le diga (min-width:auto es el valor por defecto), asi que las
     tarjetas y la fila de botones empujaban el documento entero.
     Medido con el movil emulado: de 537 px de contenido a 390, que es exactamente el ancho de
     la pantalla. Cero arrastre. */
  .kw-wrap > *          { min-width: 0; max-width: 100%; }
  .kw-wrap .card,
  .kw-wrap .btn-row     { max-width: 100%; }
  .kw-wrap .stepper .snode { min-width: 0; }
  .kw-wrap .stepper     { overflow-x: auto; }

  /* La foto de la tarjeta lateral llevaba width:100% y nada mas, asi que se estiraba al ancho
     de su padre... que a su vez crecia por culpa de la propia foto. Un pez que se muerde la
     cola: en produccion el ancho de maquetacion se iba a 1155 px con la pantalla en 400, y
     entonces TODO lo que esta fijo -la barra de arriba, el chat, el pie de reserva- se colocaba
     sobre esos 1155 y la pagina entera se arrastraba de lado.
     El 100vw rompe el ciclo porque no depende del padre. Medido en produccion: de 1155 a 400. */
  .kw-wrap .sb-img img  { max-width: 100vw; }
}
@media(max-width:600px){
  .card{padding:18px 16px}
  .row2,.row3,.pay-grid,.hotel-grid{grid-template-columns:1fr}
}

/* Reference-aligned overrides */
.stepper{background:#fff;border-radius:var(--r);padding:17px 22px;margin-bottom:16px;box-shadow:var(--sh1);display:flex;align-items:center;position:relative}
.step-track{position:absolute;left:66px;right:66px;top:50%;height:2px;background:var(--g200);transform:translateY(-50%);z-index:0;margin-top:-12px}
.sfill{height:100%;background:var(--orange);transition:width .4s ease}
.snode{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1;text-align:center}
.sring{width:36px;height:36px;border-radius:50%;border:2px solid var(--g300);background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--g400);margin:0}
.slabel{font-size:11px;font-weight:600;color:var(--g400);white-space:nowrap}
.snode.active .sring{border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:0 0 0 5px var(--orange-glow)}
.snode.done .sring{border-color:var(--green);background:var(--green);color:#fff}
.snode.active .slabel{color:var(--orange)}
.snode.done .slabel{color:var(--green)}

.city-wrap{position:relative;margin-bottom:13px}
.city-wrap label{font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;display:block}
.city-trigger{width:100%;border:1.5px solid var(--g300);border-radius:var(--rs);padding:10px 36px 10px 13px;font-size:14px;color:var(--g900);background:#fff;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.city-trigger:hover{border-color:var(--g400)}
.city-trigger.open{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow);border-bottom-left-radius:0;border-bottom-right-radius:0}
.ct-placeholder{color:var(--g400)}
.ct-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--g400);font-size:12px;pointer-events:none}
.city-trigger.open .ct-arrow{transform:translateY(-50%) rotate(180deg)}
.city-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid var(--orange);border-top:none;border-bottom-left-radius:var(--rs);border-bottom-right-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;padding:0}
.city-search-box{padding:10px 10px 8px;border-bottom:1px solid var(--g100);position:sticky;top:0;background:#fff;z-index:1}
.city-search-box input{width:100%;border:1.5px solid var(--g200);border-radius:var(--rs);padding:8px 12px;font-size:13.5px;outline:none}
.city-search-box input:focus{border-color:var(--orange)}
.city-list{max-height:220px;overflow-y:auto;margin-top:0}
.city-option{padding:9px 13px;font-size:13.5px;border-bottom:1px solid var(--g100);border-radius:0}
.city-option:last-child{border-bottom:none}
.city-option:hover,.city-option.kbd-focus{background:#fff8f2}
.city-option.is-selected{background:#fff3e8;font-weight:600}
.co-name{font-weight:500;color:var(--g900)}
.co-addr{font-size:11.5px;color:var(--g400)}
.co-lugar{font-size:11.5px;color:var(--g600);margin-top:2px}
.co-time{font-size:12px;color:var(--g600);font-weight:600}
.kw-lugar{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;font-size:13px;color:var(--g600);line-height:1.4}
.kw-lugar .ico{color:var(--orange);flex:none;margin-top:1px}
.kw-lugar b{color:var(--navy,#1b2a41);font-weight:600}

.sdiv{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--g400);display:flex;align-items:center;gap:10px;margin:20px 0 11px}
.sdiv::after{content:'';flex:1;height:1px;background:var(--g100)}

.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mtab{border:1.5px solid var(--g200);background:#fff;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--g600);transition:all .2s;white-space:nowrap}
.mtab:hover{border-color:var(--orange);color:var(--orange)}
.mtab.active{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 3px 8px var(--orange-glow)}
.dates-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.dcard{border:2px solid var(--g200);border-radius:var(--r);padding:12px 14px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;min-width:90px;flex:0 0 auto}
.dcard:hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:var(--sh1)}
.dcard.sel{border-color:var(--orange);background:#fff8f2;box-shadow:0 0 0 3px var(--orange-glow)}
.dc-day{font-size:22px;font-weight:700;color:var(--navy);line-height:1}
.dc-month{font-size:11px;color:var(--g400);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.dc-price{font-size:13px;font-weight:700;color:var(--green);margin-top:5px}
.dcard.sel .dc-price{color:var(--orange)}
.dc-dow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--g400);margin-bottom:2px}
.dcard.sel .dc-dow{color:var(--orange)}
.dcard.is-weekend .dc-dow{color:#c0392b;font-weight:800}
.dcard.sel.is-weekend .dc-dow{color:var(--orange)}
.dc-badge{font-size:9px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-border);border-radius:4px;padding:2px 5px;margin-top:3px;font-weight:700;display:inline-block}
.promo-alert{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--rs);padding:10px 13px;font-size:12.5px;color:var(--gold);font-weight:500;margin-top:8px;gap:7px;align-items:center}
.disc-banner{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--rs);padding:10px 13px;font-size:12.5px;color:var(--green);font-weight:500;margin-top:6px;line-height:1.5}

.hotel-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:4px}
.hcard{border:2px solid var(--g200);border-radius:var(--r);padding:15px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;background:#fff}
.hcard:hover{border-color:var(--orange);box-shadow:var(--sh2);transform:translateY(-1px)}
.hcard.sel{border-color:var(--orange);background:#fff8f2;box-shadow:none}
.hcard.sel::after{content:'✓';position:absolute;top:10px;right:11px;width:22px;height:22px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.h-stars{color:#f59e0b;font-size:13px;margin-bottom:3px}
.h-name{font-weight:700;font-size:14px;color:var(--navy);margin:0 0 2px}
.h-sub{font-size:12px;color:var(--g600);margin-bottom:7px}
.h-price{font-size:22px;font-weight:700;color:var(--orange);line-height:1;margin-top:0}
.h-unit{font-size:11px;font-weight:400;color:var(--g600)}
.h-examples{font-size:11px;color:var(--g400);margin-top:4px;line-height:1.5}
.h-tag{display:inline-block;background:var(--green-bg);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-top:4px;border:1px solid var(--green-border)}
.hotel-off{background:#1f2937;color:#fff;font-size:11px;padding:6px 10px;border-radius:6px}

.pax-block{background:var(--g50);border-radius:var(--rs);padding:12px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;border:1px solid var(--g100)}
.pt-name{font-size:14px;font-weight:600;color:var(--g900)}
.pt-sub{font-size:12px;color:var(--g600);margin-top:1px}
.pax-ctrl{display:flex;align-items:center;gap:13px}
.pcbtn{width:30px;height:30px;border-radius:50%;border:2px solid var(--g300);background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;line-height:1;font-weight:300;color:var(--g800)}
.pcbtn:hover{border-color:var(--orange);color:var(--orange)}
.pcval{font-size:17px;font-weight:700;min-width:22px;text-align:center}

.btn-row{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;padding-top:17px;border-top:1px solid var(--g100);flex-wrap:wrap}
.btn-next{background:var(--orange);color:#fff;border:none;padding:12px 26px;border-radius:var(--rs);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 4px 14px var(--orange-glow)}
.btn-back{background:#fff;border:1.5px solid var(--g300);color:var(--g600);padding:11px 20px;border-radius:var(--rs);font-size:14px;font-weight:600;cursor:pointer}
.btn-save{background:#fff;border:1.5px solid var(--orange);color:var(--orange);padding:12px 20px;border-radius:var(--rs);font-size:14px;font-weight:700;cursor:pointer}
.btn-pay{background:linear-gradient(135deg,var(--orange),var(--orange-h));color:#fff;border:none;padding:13px 28px;border-radius:var(--rs);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 5px 18px var(--orange-glow)}

.sidebar{position:sticky;top:70px}
.price-cap{background:var(--navy);border-radius:var(--r) var(--r) 0 0;padding:17px 18px;text-align:center;color:#fff;margin-bottom:0;box-shadow:none}
.pc-label{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px;font-weight:700}
.pc-total{font-size:44px;font-weight:700;color:#ff9f4a;line-height:1;font-family:'Lora',serif;margin-top:0}
/* El simbolo, detras y algo mas pequeno: acompana a la cifra sin competir con ella. */
.pc-eur{font-size:.52em;font-weight:700;margin-left:.1em;letter-spacing:0}

/* ── RESUMEN DE LA RESERVA, tal cual la maqueta ─────────────────────────────
   docs/maquetas/Checkout-Oporto-Paso1.html. Blanco sobre gris claro, en el mismo
   plano que el formulario. Lo unico en naranja y en grande es el total. */
.sidebar .resumen{padding:24px 22px;background:#f8f9fa}
.sidebar .resumen img{width:100%;height:120px;object-fit:cover;border-radius:4px;display:block;margin-bottom:14px}
.sidebar .resumen h3{font-family:'Open Sans',sans-serif;font-size:16px;margin:0 0 4px;font-weight:600;line-height:1.3;color:#212529}
.sidebar .resumen .meta{font-size:13px;color:#6c757d;line-height:1.5;margin-bottom:10px}
.sidebar .resumen .lin{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;color:#495057}
.sidebar .resumen .lin.desc{color:#1a7a4a}
.sidebar .resumen .lin.f{font-weight:600;color:#212529}
.sidebar .resumen .sep{border-top:1px solid #dee2e6;margin:12px 0}
.sidebar .resumen .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:#212529}
.sidebar .resumen .total b{font-size:26px;font-weight:700;color:#ff7300;line-height:1}
.sidebar .resumen .ahora{background:#fff;border:1px solid #e9ecef;border-radius:4px;padding:13px 15px;margin-top:15px}
.sidebar .resumen .ahora .lin{padding:4px 0}
.sidebar .resumen .avisos{margin-top:16px;display:grid;gap:8px}
.sidebar .resumen .avisos div{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#6c757d;line-height:1.4}
.sidebar .resumen .avisos svg{color:#1a7a4a;flex:0 0 auto;margin-top:2px}
/* Sin foto propia, una banda con el nombre del viaje: sobria y honesta. Mejor eso que una
   imagen de archivo que no tiene nada que ver con lo que el cliente esta comprando. */
.sb-sinfoto{display:flex;align-items:flex-end;min-height:96px;padding:14px;background:linear-gradient(135deg,#1f3a54,#2c5474)}
.sb-sinfoto .sbt{color:#fff;font-weight:700;font-size:14px;line-height:1.3}
.pc-total sup{font-size:19px;vertical-align:super;line-height:0}
.pc-pp{font-size:13px;color:rgba(255,255,255,.55);margin-top:3px}
.pc-pp strong{color:rgba(255,255,255,.85)}
.sb-body{background:#fff;border-radius:0 0 var(--r) var(--r);border:1px solid var(--g200);border-top:none;overflow:hidden;box-shadow:none}
.sb-img img{width:100%;height:128px;object-fit:cover;display:block}
.sb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(22,45,74,.78) 0%,transparent 55%);display:flex;align-items:flex-end;padding:10px 12px}
.sbt{font-family:'Lora',serif;color:#fff;font-size:14px;line-height:1.25;font-weight:400}
.sb-sec{padding:12px 15px;border-bottom:1px solid var(--g100)}
.sb-sec:last-child{border-bottom:none}
.sb-sec h5,.price-bk h5{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--g400);margin-bottom:8px}
.sb-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.sk{color:var(--g600)}
.sv{color:var(--g800);font-weight:500;text-align:right;padding-left:8px}
.price-bk{padding:13px 15px;border-bottom:1px solid var(--g100)}
.pk{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--g600)}
.pk .pa{color:var(--orange);font-weight:600}
.pk.total{font-size:15px;font-weight:700;color:var(--g900);border-top:1.5px solid var(--g200);padding-top:9px;margin-top:7px}
.pk.total .pa{color:var(--orange);font-size:17px}
.pk.green .pa{color:var(--green)}
.urgency{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--rs);padding:8px 12px;margin:11px 13px;font-size:12px;color:var(--gold);font-weight:500}
.rating-row{padding:10px 15px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g700)}
.stars{color:#f59e0b;font-size:14px;letter-spacing:-1px}

@media(max-width:900px){
  .price-cap{border-radius:var(--r)}
  .sb-body{border-radius:var(--r);border-top:1px solid var(--g200);margin-top:8px}
  .hotel-grid,.pay-grid{grid-template-columns:1fr}
}

/* ── Anchor section (reserva-anchor) ─────────────────────────────── */
.reserva-anchor{background:linear-gradient(135deg,#162d4a 0%,#1e3f67 60%,#1a5e8c 100%);padding:40px 28px 28px;text-align:center;border-top:4px solid #E8690A;position:relative}
.ra-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ra-left{text-align:left;flex:1;min-width:280px}
.ra-badge{display:inline-block;background:#E8690A;color:#fff;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:10px}
.ra-title{font-family:'Lora',serif;font-size:26px;color:#fff;margin:0 0 8px;line-height:1.2}
.ra-sub{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:14px;line-height:1.5}
.ra-pills{display:flex;gap:16px;flex-wrap:wrap}
.ra-pills span{color:rgba(255,255,255,.8);font-size:12.5px;font-weight:500}
.ra-right{text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:16px 28px;flex-shrink:0}
.ra-price-hint{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px}
.ra-price{font-family:'Lora',serif;font-size:42px;font-weight:700;color:#ff9f4a;line-height:1}
.ra-price-sub{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.ra-arrow{color:rgba(255,255,255,.3);font-size:22px;margin-top:18px;text-align:center;animation:bounceDown 1.8s ease-in-out infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(6px);opacity:.7}}
[x-cloak]{display:none!important}
.kw-err{margin-top:5px;font-size:12.5px;line-height:1.4;color:#b3261e;font-weight:500}
.kw-campo-mal input,.kw-campo-mal select,.kw-campo-mal textarea{border-color:#b3261e!important;background:#fff7f6}
.kw-nota{margin:0 0 18px;padding:11px 14px;border-radius:8px;background:var(--kv-azul-suave,#eef7fa);border:1px solid #cfe6ee;font-size:13px;line-height:1.5;color:#2b4d59}
.kw-soyyo{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13.5px;color:#495057;cursor:pointer;font-weight:500}
.kw-soyyo input{width:16px;height:16px;margin:0;cursor:pointer}
.kw-aviso-precio{margin:18px 0;padding:18px 20px;border:1px solid #f0c78a;border-left:4px solid var(--orange);border-radius:10px;background:#fff9f2}
.kw-aviso-precio__t{font-weight:800;font-size:16px;color:#8a4b00;margin-bottom:6px}
.kw-aviso-precio__p{margin:0 0 14px;font-size:14px;line-height:1.55;color:#4a4a4a}
.kw-aviso-precio__acc{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:600px){.kw-aviso-precio__acc{flex-direction:column}.kw-aviso-precio__acc>button{width:100%;justify-content:center}}
@media(max-width:600px){
  .ra-inner{flex-direction:column;text-align:center}
  .ra-left{text-align:center}
  .ra-right{width:100%}
  .ra-pills{justify-content:center}
  .ra-title{font-size:20px}
}

/* ── Context bar sticky ──────────────────────────────────────────── */
.wizard-context-bar{position:fixed;top:0;left:0;right:0;z-index:1031;background:var(--navy);border-bottom:2px solid var(--orange);padding:8px 20px;display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.8);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.wcb-name{font-weight:700;color:#fff}
.wcb-sep{color:rgba(255,255,255,.3)}
.wcb-price{margin-left:auto;color:#ff9f4a;font-weight:700;font-size:14px}

/* ═══ VISUAL UPGRADE PATCH v1 ═══ */

/* Stepper fusionado con card */
.stepper{border-radius:12px 12px 0 0;margin-bottom:0;border-bottom:2px solid #f1f3f5;box-shadow:none}
.panel.active>.card{border-radius:0 0 12px 12px;box-shadow:0 6px 24px rgba(0,0,0,.08)}

/* Fechas más impactantes */
.dcard{min-width:100px;padding:14px 16px;border-radius:12px}
.dc-day{font-size:28px;font-weight:800}
.dc-price{font-size:14px;font-weight:800;margin-top:6px}
.dcard.sel{border-color:#E8690A;background:linear-gradient(135deg,#fff8f2 0%,#fff3e6 100%);box-shadow:0 4px 16px rgba(232,105,10,.18);transform:translateY(-2px)}
.dcard.sel .dc-day{color:#E8690A}

/* Hotel cards con más peso */
.hcard{padding:18px;border-width:2px}
.hcard.sel{background:linear-gradient(135deg,#fff8f2 0%,#fff3e5 100%);box-shadow:0 4px 18px rgba(232,105,10,.16);transform:translateY(-2px)}
.hcard.sel::after{width:28px;height:28px;font-size:13px;top:12px;right:12px;box-shadow:0 2px 8px rgba(232,105,10,.4)}
.h-name{font-size:15px}
.h-price{font-size:26px;margin-top:8px}

/* Sidebar más cálido */
.price-cap{background:linear-gradient(135deg,#162d4a 0%,#1e3f67 60%,#1a5e8c 100%);padding:20px 18px 18px;border-bottom:3px solid #E8690A}
.pc-total{font-size:52px;text-shadow:0 2px 12px rgba(255,159,74,.3)}
.pc-label{letter-spacing:2px;font-size:9px}
.sb-body{border:1.5px solid #dee2e6;border-top:none;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.sb-img img{height:148px}
.urgency{background:linear-gradient(90deg,#fdf8e8,#fef9ec);font-weight:600;border-left:3px solid #b8920a;border-radius:0 8px 8px 0;border-top:none;border-right:none;border-bottom:none;padding:10px 14px}

/* Botón siguiente con zona de cierre */
.btn-row{background:linear-gradient(to top,rgba(255,255,255,1) 0%,rgba(248,247,243,0) 100%);margin:0 -26px -24px;padding:18px 26px 22px;border-top:1px solid #f1f3f5}
.btn-next{padding:13px 32px;font-size:15.5px;border-radius:9px;box-shadow:0 6px 20px rgba(232,105,10,.35);letter-spacing:.2px}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,105,10,.45)}
.btn-pay{padding:14px 32px;font-size:16px;border-radius:9px;box-shadow:0 6px 22px rgba(232,105,10,.38)}
.demo-notice{background:#fff8e1;border:1.5px solid #ffe082;border-radius:var(--r);padding:14px 18px;font-size:14px;color:#7a5c00;text-align:center;font-weight:500;width:100%}

/* Fondo y profundidad */
.kw-wrap{background:transparent}
#leftCol{filter:drop-shadow(0 2px 12px rgba(0,0,0,.06))}
.wrap{padding-top:28px}
.pax-block{border-radius:10px;transition:box-shadow .2s}
.pax-block:hover{box-shadow:0 2px 10px rgba(0,0,0,.07)}
.pcbtn{width:34px;height:34px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sdiv{margin:24px 0 13px;font-size:10.5px;letter-spacing:1.1px}

.deposit-amount{color:var(--orange)}
.pc-deposit-desc{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:var(--rs);padding:10px 14px;font-size:13px;color:#7a5c00;margin-bottom:12px;line-height:1.5}
/* ── Modal ───────────────────────────────────────────────── */
.kwz-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:1040;display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(2px)}
.kwz-modal-backdrop.open{display:flex}
.kwz-modal{background:#fff;border-radius:12px;max-width:640px;width:100%;
  max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;z-index:1041}
.kwz-modal-header{padding:18px 22px;border-bottom:1px solid #f1f3f5;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#fff;z-index:1}
.kwz-modal-header h3{font-family:'Lora',serif;font-size:18px;color:#162d4a;margin:0}
.kwz-modal-close{background:none;border:none;font-size:22px;cursor:pointer;
  color:#adb5bd;padding:2px 8px;border-radius:6px;transition:background .2s;line-height:1}
.kwz-modal-close:hover{background:#f1f3f5;color:#495057}
.kwz-modal-body{padding:20px 22px;font-size:13.5px;color:#495057;line-height:1.7}
.kwz-modal-body h4{font-size:14px;font-weight:700;color:#162d4a;margin:16px 0 6px}
.kwz-modal-body h4:first-child{margin-top:0}
.kwz-modal-body p{margin-bottom:10px}
.kwz-modal-body ul{padding-left:18px;margin-bottom:10px}
.kwz-modal-body li{margin-bottom:4px}
.kwz-modal-body table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 16px}
.kwz-modal-body table th{background:#f8f9fa;padding:8px 12px;text-align:left;
  font-weight:700;color:#162d4a;border:1px solid #dee2e6}
.kwz-modal-body table td{padding:8px 12px;border:1px solid #dee2e6}
.warn-box{background:#fdf0ef;border:1px solid #f5b7b1;border-radius:8px;
  padding:11px 14px;font-size:13px;color:#922b21;margin:0 0 16px;font-weight:500}
.conditions-body{font-size:13px;line-height:1.7;color:#495057}
.conditions-body *{max-width:100%}
.conditions-section{border-top:1px solid #f1f3f5;padding-top:16px;margin-top:16px}
@media(max-width:600px){
  .kwz-modal{max-height:92vh;border-radius:12px 12px 0 0}
  .kwz-modal-backdrop{padding:0;align-items:flex-end}
}
/* ── Iconos pago ─────────────────────────────────────────────── */
.pm-icon{display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:6px;min-height:28px}
.pm-icon svg{border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* ── Sidebar anticipo ────────────────────────────────────────── */
.deposit-split .pa{color:var(--orange);font-weight:700}
.deposit-rest{font-size:12px;color:var(--g500)}
.deposit-rest .rest-amount{color:var(--g600);font-weight:500}
/* ── Tarifa grid (step 4 nivel 1) ────────────────────────────── */
.tarifa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin:12px 0 4px}
.tg-card{border:2px solid var(--g200);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .22s;background:#fff}
.tg-card:hover{border-color:var(--navy);box-shadow:var(--sh1)}
.tg-card.sel{border-color:var(--navy);background:#f0f4ff;box-shadow:0 4px 16px rgba(22,45,74,.12)}
.tg-card-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tg-card-title{font-weight:700;font-size:14px;color:var(--navy);line-height:1.2;flex:1;min-width:0;word-break:break-word}
.tg-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.tg-badge.flexible{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.tg-badge.no-reembolsable{background:#fdf0ef;color:#922b21;border:1px solid #f5b7b1}
.tg-card-price{font-size:15px;font-weight:700;color:var(--navy)}
.tg-price-original{text-decoration:line-through;color:var(--g400);font-size:13px;font-weight:400;margin-right:4px}
.tg-promo-badge{display:inline-block;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px;vertical-align:middle}
/* ── Pago grid (step 4 nivel 2) ──────────────────────────────── */
.pago-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0 12px}
.pg-card{border:2px solid var(--g200);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .22s;background:#fff}
.pg-card:hover{border-color:var(--navy);box-shadow:var(--sh1)}
.pg-card.sel{border-color:var(--orange);background:#fff8f2;box-shadow:0 4px 16px rgba(230,100,18,.1)}
.pg-card-title{font-weight:700;font-size:13.5px;color:var(--navy);margin-bottom:4px}
.pg-card-desc{font-size:12px;color:var(--g600);line-height:1.5;margin-bottom:8px}
.pg-card-price{font-size:14px;font-weight:700;color:var(--navy)}
.pg-card.sel .pg-card-price{color:var(--orange)}
/* ── Room blocks (step 1 habitaciones) ─────────────────────── */
.rooms-header{background:var(--g50);border-radius:var(--rs);padding:12px 15px;margin-bottom:10px;border:1px solid var(--g100)}
.rooms-count-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.rooms-label{font-size:14px;font-weight:600;color:var(--g900)}
.rooms-sub{font-size:12px;color:var(--g600)}
.room-block{background:var(--g50);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;border:1px solid var(--g100)}
.room-block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.room-num{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}
.room-pax-count{font-size:11px;color:var(--g600);background:var(--g200);padding:2px 8px;border-radius:10px}
.kids-ages-wrap{margin-top:10px;padding-top:10px;border-top:1px dashed var(--g200)}
.kids-ages-label{font-size:11.5px;color:var(--g600);margin-bottom:8px}
.kids-ages-row{display:flex;flex-wrap:wrap;gap:8px}
.rp-age-select{border:1.5px solid var(--g300);border-radius:var(--rs);padding:6px 10px;font-size:13px;color:var(--g900);background:#fff;outline:none;cursor:pointer;transition:border-color .2s;width:110px}
.rp-age-select:focus{border-color:var(--orange)}
.transfer-box{background:#f0f7ff;border:1.5px solid #c5d8f0;border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.tb-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px}
.tb-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #dde8f5;font-size:13px}
.tb-row:last-of-type{border-bottom:none}
.tb-k{color:var(--g600);font-weight:500}
.tb-v{color:var(--g900);font-weight:600}
.tb-note{font-size:12px;color:var(--g600);margin-top:10px;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════════════
   UNA SOLA CAJA — docs/maquetas/Checkout-Oporto-Paso1.html

   Lo que habia antes eran tres piezas sueltas flotando sobre el fondo: el
   stepper con su sombra, el panel con la suya y el resumen con la suya, cada
   una con esquinas redondeadas y un hueco de 24 px entre medias. El resumen
   parecia de otra pagina.

   Aqui es UNA caja con borde: los pasos arriba a todo el ancho, y debajo dos
   columnas separadas por una LINEA VERTICAL. El resumen va sobre gris claro
   dentro de esa misma caja.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fecha de nacimiento: dia / mes / ano. El mes se lleva el sitio porque lleva texto. */
.kw-nac{display:grid;grid-template-columns:72px minmax(0,1fr) 88px;gap:8px}
.kw-nac select{border:1.5px solid var(--g300);border-radius:var(--rs);padding:10px 8px;font-size:14px;
  color:var(--g900);background:#fff;outline:none;width:100%}
.kw-nac select:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}

.kw-pista{margin:14px 0 0;font-size:12.5px;color:var(--g600)}
.kw-pista span{color:#b34d00;font-weight:700}

.kw-wrap{display:block;max-width:1180px;margin:0 auto;padding:0 22px;background:transparent}

/* Los pasos: tapa de la caja. Sin sombra, sin hueco debajo. */
.kw-wrap .stepper{
  background:#fff;border:1px solid var(--g200);border-radius:5px 5px 0 0;border-bottom:0;
  padding:20px 24px 22px;margin:0;box-shadow:none;
}

/* El cuerpo de la caja: contenido y resumen, con la linea entre medias. */
.kw-wrap .cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  background:#fff;border:1px solid var(--g200);border-radius:0 0 5px 5px;overflow:clip;
}

.kw-wrap #leftCol{min-width:0;filter:none;border-right:1px solid var(--g200)}

/* El panel ya no es una tarjeta: es el interior de la caja. */
.kw-wrap .panel>.card,
.kw-wrap .panel.active>.card{
  background:transparent;border-radius:0;box-shadow:none;border:0;
}

/* El resumen: segunda columna, gris claro, hasta abajo. La columna pinta el gris hasta el final y el
   resumen se queda pegado arriba al hacer scroll (sticky), asi el precio y el boton se ven siempre.
   overflow:clip en .cuerpo, no hidden: hidden convierte la caja en contenedor de scroll y el sticky no pega. */
.kw-wrap #rightCol{position:static;width:auto;flex:none;min-width:0;background:#f8f9fa}
.kw-wrap .sidebar{position:static;height:100%}
.kw-wrap .sidebar .resumen{height:auto;position:sticky;top:54px}   /* 54 = barra de contexto fija (38) + aire */

/* En movil la caja se apila y la linea pasa a ser horizontal. */
@media(max-width:900px){
  .kw-wrap{padding:0 14px}
  .kw-wrap .cuerpo{grid-template-columns:minmax(0,1fr)}
  .kw-wrap #leftCol{border-right:0;border-bottom:1px solid var(--g200)}
  .kw-wrap .sidebar .resumen{position:static}
}


/* La ciudad ELEGIDA se ve elegida: en gris claro parecia el texto de ayuda y el cliente
   volvia a abrir el desplegable para comprobar si habia seleccionado algo. */
.ct-placeholder.es-elegido {
    color: var(--g900);
    font-weight: 600;
}

/* ── Cómo pagar (lateral): total o señal, elegido desde el paso 1 ──────────── */
.kw-pago { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g200); }
.kw-pago__t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--g600); margin-bottom: 8px; }
.kw-pago__op {
    width: 100%;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    text-align: left;
    background: #fff;
    border: 1.5px solid var(--g200);
    border-radius: var(--rs);
    padding: 10px 12px;
    margin-bottom: 7px;
    font-family: var(--sans, inherit);
    cursor: pointer;
}
.kw-pago__op:hover { border-color: var(--orange); }
.kw-pago__op.sel { border-color: var(--orange); background: #fff8f2; }
.kw-pago__r { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--g300); display: block; }
.kw-pago__op.sel .kw-pago__r { border-color: var(--orange); border-width: 5px; }
.kw-pago__c b { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.kw-pago__c small { display: block; font-size: 12px; color: var(--g600); line-height: 1.35; }
.kw-pago__p { font-size: 15px; font-weight: 800; color: var(--orange); white-space: nowrap; }
.kw-pago__resto { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--g600); padding: 2px 2px 0; }

/* ── Reservar (lateral) ────────────────────────────────────────────────────
   El botón principal junto al precio, más grande que «Guardar presupuesto», que
   queda como acción secundaria justo debajo. */
.kw-reservar { margin-top: 16px; }
.kw-reservar__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--orange);
    color: #fff;
    border: 0;
    border-radius: var(--rs);
    padding: 15px 18px;
    font-family: var(--sans, inherit);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(232,105,10,.32);
    transition: transform .15s, box-shadow .15s;
}
.kw-reservar__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(232,105,10,.42); }
.kw-reservar__flex { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; font-size: 13px; color: var(--g600); line-height: 1.4; }
.kw-reservar__flex .ico { color: var(--orange); flex: none; margin-top: 1px; }
.kw-reservar__flex b { color: var(--navy); }
.kw-reservar + .kw-presu { margin-top: 10px; padding-top: 0; border-top: 0; }
/* En móvil la barra inferior ya lleva el «Reservar ›»: dentro de la hoja no se repite. */
.kw-hoja .kw-reservar { display: none; }

/* ── Guardar presupuesto ──────────────────────────────────────────────────
   Accion secundaria, junto al precio: no compite con el boton de pagar pero
   esta a la vista desde el primer paso. Quien no reserva hoy se lleva el precio
   por correo en vez de irse sin dejar rastro. */
.kw-presu { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g200); }

.kw-presu__abrir {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--navy);
    border: 1.5px solid var(--g300);
    border-radius: var(--rs);
    padding: 11px 14px;
    font-family: var(--sans, inherit);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.kw-presu__abrir:hover { border-color: var(--orange); color: var(--orange); }
.kw-presu__abrir svg { flex: none; }

.kw-presu__caja {
    margin-top: 11px;
    background: #fff;
    border: 1px solid var(--g200);
    border-radius: var(--rs);
    padding: 14px;
}
.kw-presu__ay { margin: 0 0 11px; font-size: 12.5px; color: var(--g600); line-height: 1.45; }
.kw-presu__campo { margin-bottom: 9px; }
.kw-presu__campo label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--g600);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 3px;
}
.kw-presu__campo input {
    width: 100%;
    border: 1.5px solid var(--g300);
    border-radius: var(--rs);
    padding: 9px 11px;
    font-size: 14px;
    color: var(--g900);
    outline: none;
}
.kw-presu__campo input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.kw-presu__campo.kw-campo-mal input { border-color: #b3261e; }

.kw-presu__enviar {
    width: 100%;
    margin-top: 4px;
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: var(--rs);
    padding: 11px 14px;
    font-family: var(--sans, inherit);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}
.kw-presu__enviar:hover { background: var(--navy2); }
.kw-presu__enviar:disabled { opacity: .6; cursor: default; }

.kw-presu__ok {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: var(--rs);
    padding: 12px 14px;
    font-size: 13px;
    color: #14603a;
    line-height: 1.5;
}
.kw-presu__ok b { display: block; margin-bottom: 3px; }
.kw-presu__ok span { display: block; }
.kw-presu__ok a { display: inline-block; margin-top: 6px; font-weight: 700; color: #14603a; }

/* ══ BARRA INFERIOR DE MÓVIL ═══════════════════════════════════════════════
   El precio y la acción del paso, siempre a la vista.

   Medido antes de esto en un teléfono de 390×844, paso 1: el botón de avanzar
   quedaba a 1.799 px y el «Total del viaje» a 2.291 px — 2,7 pantallas de
   scroll. La rejilla de dos columnas pasa a una en ≤900px y el resumen se
   apila entero al final, así que el cliente rellenaba el paso sin ver nunca
   lo que cuesta.

   Solo móvil: en escritorio la columna lateral pegajosa ya cumple. */
.kw-pie,
.kw-hoja-fondo { display: none; }

@media (max-width: 900px) {

  /* El alto de la barra en un solo sitio: lo usan el hueco del body y la hoja. */
  :root { --kw-pie-alto: 108px; }

  .kw-pie {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1039;
    background: #fff;
    border-top: 1px solid var(--g200);
    box-shadow: 0 -3px 18px rgba(0, 0, 0, .10);
    /* El inset de abajo es la barra de gestos del iPhone: sin él, el botón queda
       justo debajo de ella y se pulsa «atrás» del sistema en vez de pagar. */
    padding: 5px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    font-family: var(--kv-sans, "Open Sans", system-ui, sans-serif);
  }

  /* La fila del precio es pulsable ENTERA: un chevron de 16 px es una diana
     demasiado pequeña para un pulgar. */
  .kw-pie__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 3px 2px 5px;
    cursor: pointer;
    text-align: left;
  }
  .kw-pie__cifras b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #ff7300;
    line-height: 1.15;
  }
  .kw-pie__cifras small {
    display: block;
    font-size: 11.5px;
    color: #6b6b6b;
    line-height: 1.3;
  }
  .kw-pie__chevron {
    display: inline-flex;
    color: #6b6b6b;
    transition: transform .2s ease;
  }
  .kw-pie__chevron.esta-abierto { transform: rotate(180deg); }

  .kw-pie__acc { display: flex; align-items: stretch; gap: 8px; }

  .kw-pie__atras {
    flex: 0 0 auto;
    width: 46px;
    background: #fff;
    border: 1px solid var(--g200);
    border-radius: var(--rs, 5px);
    color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .kw-pie__ir {
    flex: 1;
    background: #ff7300;
    color: #fff;
    border: 0;
    border-radius: var(--rs, 5px);
    padding: 13px 12px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    /* Sin esto, en el paso 4 «Pagar — 1.234,00 €» parte el importe en dos líneas
       y la barra crece de golpe. */
    white-space: nowrap;
  }
  .kw-pie__ir:active { background: #e66800; }

  .kw-pie__nota {
    flex: 1;
    align-self: center;
    font-size: 13px;
    color: #6b6b6b;
    text-align: center;
  }

  /* ── La hoja del resumen ──────────────────────────────────────────────
     Sube desde abajo, como el modal de condiciones: en un móvil el pulgar
     está abajo, no arriba. */
  .kw-hoja-fondo {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1042;
    background: rgba(0, 0, 0, .5);
    align-items: flex-end;
  }
  .kw-hoja {
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .kw-hoja__cab {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px 11px;
    border-bottom: 1px solid #f1f3f5;
  }
  .kw-hoja__cab h3 {
    margin: 0;
    font-family: 'Lora', serif;
    font-size: 17px;
    color: #162d4a;
  }
  .kw-hoja__x {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #adb5bd;
    padding: 0 6px;
    cursor: pointer;
  }
  .kw-hoja__cuerpo { padding: 4px 18px 10px; }

  /* ── Lo que la barra deja sin trabajo ────────────────────────────────
     El resumen entero vive ahora en la hoja, y la imagen y el título del
     viaje ya están arriba en la cabecera del checkout. Apilado abajo solo
     añadía 2,7 pantallas de scroll muerto. */
  .kw-wrap #rightCol { display: none; }

  /* Y el «Siguiente» del final del formulario duplicaría el de la barra.
     Volver atrás sigue estando en el «‹» de la barra y en los pasos ya
     pulsables del stepper. */
  .kw-wrap .btn-row { display: none; }

  /* Hueco para que la barra no tape el final del formulario. Medido: la barra son
     108 px, mas la franja de gestos del movil, que la barra ya se reserva por dentro. */
  body.kvc { padding-bottom: calc(var(--kw-pie-alto) + env(safe-area-inset-bottom, 0px)); }
}

/* ══ LA BARRA DE ARRIBA EN MÓVIL ═══════════════════════════════════════════
   Iba a `top:0` con z-index 1031 y se montaba ENCIMA de la cabecera fija del
   sitio, que en móvil mide 46 px (medido en el navegador con user-agent de
   iPhone; los 91 px que se ven emulando sin UA son la cabecera de escritorio,
   que es otra). Ahora se cuelga justo debajo.

   Y el título va truncado: «Asturias Paraíso Natural con la Playa de las
   Catedrales» ocupaba dos líneas en 390 px y doblaba el alto de la barra. */
@media (max-width: 900px) {
  .kvc .wizard-context-bar {
    top: 46px;
    padding: 7px 14px;
    font-size: 12.5px;
    gap: 7px;
  }
  .kvc .wcb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .kvc .wcb-step { flex: none; white-space: nowrap; }
}

/* ══ EL CHAT FLOTANTE, FUERA DEL CHECKOUT EN MÓVIL ═════════════════════════
   La burbuja de HubSpot va abajo a la derecha con z-index 2147483647 y se
   sentaba JUSTO ENCIMA del botón de avanzar y del de pagar. Tapar el botón
   principal del carrito con un widget es la peor forma posible de perder una
   venta.

   Es el mismo criterio que ya se aplicó al flotante de WhatsApp en esta
   página (kv-checkout.css). El canal no se pierde: el teléfono sigue en la
   banda de «Reserva segura», arriba y siempre visible. */
@media (max-width: 900px) {
  body.kvc #hubspot-messages-iframe-container { display: none !important; }
}

/* ══ LOS GRUPOS DE LA LISTA DE CIUDADES ════════════════════════════════════
   «Más elegidas» / «Todas las ciudades», igual que en la ficha. */
.co-rotulo {
  margin: 12px 0 4px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g500, #8a8a8a);
}
.city-list > div:first-child .co-rotulo { margin-top: 2px; }

/* Cada opción va ahora dentro de un envoltorio (para poder colar los rótulos), así que
   `.city-option:last-child` pasó a coincidir SIEMPRE —cada una es hija única— y se llevaba
   por delante todas las líneas de separación. Se reponen sobre el envoltorio. */
.city-list > div > .city-option { border-bottom: 1px solid var(--g100); }
.city-list > div:last-child > .city-option { border-bottom: none; }

/* ══ MÓVIL CON PREFIJO DE PAÍS ═════════════════════════════════════════════
   El prefijo a la izquierda, fijo, y el número al lado. Van pegados y con el
   mismo alto para que se lean como UN campo, que es lo que son: un teléfono.

   La bandera es un emoji, no una imagen. En iOS y Android —de donde viene casi
   todo el tráfico— se ve perfecta; en Windows el navegador la dibuja como las
   dos letras del país («ES +34»), que sigue diciendo lo mismo. Se prefiere eso
   a cargar 90 KB de librería con su sprite en la página de pagar. */
.kw-tel { display: flex; align-items: stretch; gap: 0; }

.kw-tel__pre {
  flex: 0 0 auto;
  width: 104px;
  border: 1px solid var(--g300, #ced4da);
  border-right: 0;
  border-radius: var(--rs, 5px) 0 0 var(--rs, 5px);
  background: var(--g50, #f8f9fa);
  padding: 0 6px 0 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--g900, #212529);
  cursor: pointer;
  /* Sin esto Safari le pone su propio relieve y deja de parecer parte del campo. */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23868e96' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.kw-tel__num {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--rs, 5px) var(--rs, 5px) 0 !important;
}
/* La regla genérica del formulario (.fg select { width:100%; padding:10px 13px }) gana por
   especificidad a la clase sola: el prefijo se comía el campo entero y el número quedaba a
   cero. El selector reforzado devuelve el reparto: prefijo fijo, el resto para el número. */
.fg .kw-tel select.kw-tel__pre,
.kw-tel select.kw-tel__pre {
  flex: 0 0 auto;
  width: 96px;
  padding: 0 22px 0 10px;
}
.kw-tel__pre:focus,
.kw-tel__num:focus { position: relative; z-index: 1; }

@media (max-width: 600px) {
  .fg .kw-tel select.kw-tel__pre,
  .kw-tel select.kw-tel__pre { width: 88px; font-size: 13.5px; }
}

/* El mismo par dentro de la caja de guardar presupuesto. */
.kw-presu__campo .kw-tel__num { width: 100%; }

/* Cupón: enlace gris pequeño; el campo solo aparece si se pulsa. */
.kw-cupon { margin-top: 12px; font-size: 12.5px; }
.kw-cupon__abrir { background: none; border: 0; padding: 0; color: var(--g600); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 12.5px; }
.kw-cupon__abrir:hover { color: var(--orange); }
.kw-cupon__caja { display: flex; gap: 6px; margin-top: 8px; }
.kw-cupon__caja input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--g300); border-radius: 8px; padding: 0 10px; font-size: 13px; text-transform: uppercase; }
.kw-cupon__caja input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.kw-cupon__caja button { height: 36px; padding: 0 12px; border: 1px solid var(--g300); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.kw-cupon__caja button:hover { border-color: var(--orange); color: var(--orange); }
.kw-cupon__err { margin: 6px 0 0; color: #b3261e; font-size: 12px; }
.kw-cupon__ok { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; color: #1a7a4a; font-weight: 600; }
.kw-cupon__ok button { background: none; border: 0; padding: 0; color: var(--g600); font-size: 12px; text-decoration: underline; cursor: pointer; }

/* Web México (E8): ayuda del bloque de noches extra */
.supp-ayuda{font-size:13px;color:var(--g600);line-height:1.45;margin:-4px 0 10px}

/* E8b: tarjetas de suplementos y noches con foto de verdad; euro de referencia bajo el total en México */
.supp-card{grid-template-columns:104px 1fr auto}
.supp-img,.supp-icon{width:104px;height:74px;border-radius:10px}
.supp-icon{background-image:linear-gradient(135deg,#162d4a,#2a6096)}
.tot-eur{text-align:right;font-size:12px;color:var(--g600);margin-top:2px}
.pg-hint{font-size:12.5px;color:var(--g600);margin:8px 2px 0;line-height:1.45}
@media(max-width:600px){.supp-card{grid-template-columns:72px 1fr auto}.supp-img,.supp-icon{width:72px;height:56px}}
