/* Booking engine · Hot Air Balloon Mexico City */
:root{
  --rsv-ink:#1a2b49; --rsv-ink2:#63687a; --rsv-ink3:#63687a;
  --rsv-cyan:#0071eb; --rsv-blue:#1a2b49; --rsv-blue-deep:#1a2b49;
  --rsv-orange:#0071eb; --rsv-orange-soft:#e1f0ff;
  --rsv-cyan-soft:#e1f0ff; --rsv-line:#dde0e5; --rsv-surface:#fff; --rsv-surface2:#f5f6f8;
  --rsv-green:#0f7d54; --rsv-green-soft:#e2f4ea; --rsv-paper:#f5f6f8; --rsv-radius:16px;
  --rsv-accent-deep:#0071eb; --rsv-urgency-ink:#c72a3d; --rsv-gold:#ff5533;
  --rsv-shadow:0 0 32px rgba(0,0,0,.06),0 4px 8px rgba(0,0,0,.16);
  --rsv-fdisplay:'Figtree',Arial,Roboto,sans-serif; --rsv-fbody:'Figtree',Arial,Roboto,sans-serif;
}
/* Overlay + contenedor */
.rsv-overlay{position:fixed;inset:0;z-index:100000;background:rgba(26,43,73,.62);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s ease;}
.rsv-overlay.open{opacity:1;pointer-events:auto;}
.rsv-modal{background:var(--rsv-surface);width:min(960px,100%);max-height:92vh;border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1fr 320px;box-shadow:var(--rsv-shadow);transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.16,1,.3,1);font-family:var(--rsv-fbody);color:var(--rsv-ink);}
.rsv-overlay.open .rsv-modal{transform:none;}
@media(max-width:780px){.rsv-modal{grid-template-columns:1fr;max-height:96vh;}}

/* Panel principal (pasos) */
.rsv-main{padding:26px 30px 24px;overflow-y:auto;max-height:92vh;}
.rsv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.rsv-head .rsv-brand{display:flex;align-items:center;gap:10px;font-family:var(--rsv-fdisplay);font-weight:700;font-size:18px;color:var(--rsv-ink);}
.rsv-brand img{height:46px;width:auto;display:block;}
@media(max-width:520px){.rsv-brand img{height:38px;}}
.rsv-close{width:38px;height:38px;border-radius:50%;background:var(--rsv-surface2);border:none;cursor:pointer;color:var(--rsv-ink2);font-size:18px;transition:all .2s;}
.rsv-close:hover{background:var(--rsv-orange-soft);color:var(--rsv-orange);transform:rotate(90deg);}

/* Stepbar */
.rsv-steps{display:flex;gap:6px;align-items:center;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;}
.rsv-steps::-webkit-scrollbar{display:none;}
.rsv-step{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--rsv-ink3);white-space:nowrap;flex-shrink:0;}
.rsv-step .n{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--rsv-surface2);font-size:11px;transition:all .25s;}
.rsv-step.done .n{background:var(--rsv-accent-deep);color:#fff;}
.rsv-step.active{background:var(--rsv-cyan-soft);color:var(--rsv-blue);}
.rsv-step.active .n{background:var(--rsv-accent-deep);color:#fff;box-shadow:0 0 0 4px var(--rsv-cyan-soft);}

/* Screens */
.rsv-screen{animation:rsvUp .4s cubic-bezier(.2,.7,.2,1);}
@keyframes rsvUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rsv-screen h3{font-family:var(--rsv-fdisplay);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0 0 4px;color:var(--rsv-ink);}
.rsv-screen .rsv-sub{color:var(--rsv-ink3);font-size:14px;margin-bottom:18px;}

/* Calendario */
.rsv-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rsv-cal-month{font-family:var(--rsv-fdisplay);font-weight:700;font-size:19px;}
.rsv-cal-nav{display:flex;gap:6px;}
.rsv-cal-nav button{width:34px;height:34px;border-radius:10px;background:var(--rsv-surface2);border:none;cursor:pointer;color:var(--rsv-ink);transition:.2s;}
.rsv-cal-nav button:hover{background:var(--rsv-cyan-soft);color:var(--rsv-blue);}
.rsv-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.rsv-dow{font-size:10.5px;color:var(--rsv-ink3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;text-align:center;padding:6px 0;}
.rsv-day{aspect-ratio:1;display:grid;place-items:center;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;position:relative;transition:all .15s;}
.rsv-day:hover:not(.dis):not(.sel){background:var(--rsv-cyan-soft);color:var(--rsv-blue);}
.rsv-day.dis{color:var(--rsv-ink3);opacity:.32;cursor:not-allowed;}
.rsv-day.avail::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--rsv-green);}
.rsv-day.scarce::after{background:var(--rsv-orange);}
.rsv-day.sel{background:var(--rsv-accent-deep);color:#fff;box-shadow:0 6px 16px rgba(163,43,31,.34);}

/* Steppers pasajeros */
.rsv-pax-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--rsv-line);}
.rsv-pax-row:last-child{border-bottom:none;}
.rsv-pax-name{font-family:var(--rsv-fdisplay);font-size:19px;font-weight:700;}
.rsv-pax-hint{color:var(--rsv-ink3);font-size:12.5px;margin-top:1px;}
.rsv-stepper{display:flex;align-items:center;gap:14px;}
.rsv-sbtn{width:38px;height:38px;border-radius:50%;background:var(--rsv-surface2);color:var(--rsv-ink);font-size:19px;font-weight:600;display:grid;place-items:center;border:none;cursor:pointer;transition:.15s;}
.rsv-sbtn:hover:not(:disabled){background:var(--rsv-accent-deep);color:#fff;transform:scale(1.06);}
.rsv-sbtn:disabled{opacity:.3;cursor:not-allowed;}
.rsv-sval{font-family:var(--rsv-fdisplay);font-size:23px;font-weight:700;min-width:30px;text-align:center;}

/* Horarios */
.rsv-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px;margin-top:6px;}
.rsv-slot{padding:13px;border-radius:13px;border:1px solid var(--rsv-line);background:var(--rsv-surface);cursor:pointer;text-align:center;transition:.15s;}
.rsv-slot:hover{border-color:var(--rsv-cyan);}
.rsv-slot.sel{background:var(--rsv-blue);color:#fff;border-color:var(--rsv-blue);}
.rsv-slot .t{font-weight:700;font-size:14px;}
.rsv-slot .i{font-size:10.5px;color:var(--rsv-ink3);margin-top:2px;}
.rsv-slot.sel .i{color:rgba(255,255,255,.7);}
.rsv-slot.scarce .i{color:var(--rsv-orange);font-weight:600;}

/* Addons */
.rsv-addons{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
@media(max-width:600px){.rsv-addons{grid-template-columns:1fr;}}

.rsv-addon:hover{border-color:var(--rsv-cyan);}



.rsv-addon .an{font-family:var(--rsv-fdisplay);font-weight:700;font-size:16px;margin-bottom:3px;}
.rsv-addon .ad{color:var(--rsv-ink3);font-size:12.5px;line-height:1.4;margin-bottom:8px;}
.rsv-addon .ap{font-weight:700;font-size:13.5px;color:var(--rsv-urgency-ink);}

/* Form */
.rsv-fg{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;}
.rsv-fg label{font-size:11px;color:var(--rsv-ink3);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.rsv-input{padding:13px 15px;border-radius:12px;border:1px solid var(--rsv-line);background:var(--rsv-surface);color:var(--rsv-ink);font:inherit;font-size:14.5px;transition:.15s;}
.rsv-input:focus{outline:none;border-color:var(--rsv-cyan);box-shadow:0 0 0 3px var(--rsv-cyan-soft);}
.rsv-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:600px){.rsv-frow{grid-template-columns:1fr;}}
/* Palomita verde de validación por campo (nombre / correo / teléfono). */
.rsv-inwrap{position:relative;}
/* Lada y número, en una sola fila. El desplegable se queda con lo justo para
   la bandera y el «+52»: el protagonista es el número, que es lo que la
   persona escribe. En móvil NO se apila —serían dos renglones para un solo
   dato— pero el número nunca baja de la mitad del ancho. */
/* ── Order bump: fotos + dron por menos que sueltos ──────────────────────
   Aparece cuando ya eligieron una de las dos mitades. Hereda la terracota de
   la marca (--rsv-accent-deep) en vez de un rojo de alarma: en un formulario
   de pago el rojo se lee como error, y aquí queremos lo contrario.
   Móvil primero — a ancho completo, con el ahorro arriba del todo, que es lo
   único que hay que leer si se está bajando con el pulgar. */
.rsv-bump{display:block;width:100%;text-align:left;margin:14px 0 0;padding:14px 16px 15px;
  border:2px solid var(--rsv-accent-deep);border-radius:16px;background:var(--rsv-cyan-soft);
  cursor:pointer;font:inherit;position:relative;transition:.15s;}
.rsv-bump:hover{background:#e1f0ff;transform:translateY(-1px);}
.rsv-bump:active{transform:none;}
.rsv-bump:focus-visible{outline:3px solid var(--rsv-accent-deep);outline-offset:2px;}
/* La etiqueta del ahorro es lo que hace el trabajo: va sola, arriba y en
   sólido. El test de contraste en blanco y negro lo pasa por lejos. */
.rsv-bump-flag{display:inline-block;background:var(--rsv-accent-deep);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:8px;}
.rsv-bump-t{display:block;color:var(--rsv-ink);font-size:15.5px;font-weight:700;line-height:1.35;}
.rsv-bump-d{display:block;color:var(--rsv-blue);font-size:13px;line-height:1.5;margin-top:3px;}
/* 🧨 44 px de alto mínimo. Medido: sin esto el botón quedaba en 37 y es el
   único de todo el bump que hay que acertar con el pulgar. La guía táctil de
   Apple pide 44, y este es un CTA de conversión en la pantalla donde el 80%
   del tráfico es móvil: un blanco pequeño aquí se paga en ventas. */
.rsv-bump-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:11px;
  background:var(--rsv-accent-deep);color:#fff;
  font-size:14px;font-weight:700;padding:10px 20px;border-radius:999px;line-height:1.2;}
.rsv-bump:hover .rsv-bump-cta{filter:brightness(1.08);}
@media (min-width:640px){
  .rsv-bump{padding:16px 20px 17px;}
  .rsv-bump-t{font-size:16.5px;}
}

.rsv-telrow{display:flex;gap:8px;align-items:stretch;}
/* El aviso del teléfono. Ámbar y no rojo a propósito: no es un error que
   impida comprar —el teléfono siempre fue opcional—, es una cifra que
   conviene revisar antes de que el equipo escriba a un número que no existe. */
.rsv-telaviso{margin-top:6px;font-size:12.5px;line-height:1.4;color:#b45309;}
.rsv-telrow .rsv-inwrap{flex:1 1 auto;min-width:0;}
.rsv-lada{flex:0 0 auto;width:auto;max-width:42%;padding-right:10px;cursor:pointer;
  font-size:14.5px;-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'%3E%3Cpath fill='%2394a3b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:28px;}
.rsv-inwrap .rsv-input{width:100%;padding-right:42px;}
.rsv-ok{position:absolute;right:11px;top:50%;transform:translateY(-50%) scale(.4);opacity:0;width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1;pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1.6);}
.rsv-fg.is-valid .rsv-ok{opacity:1;transform:translateY(-50%) scale(1);}
.rsv-fg.is-valid .rsv-input{border-color:#16a34a;}
.rsv-fg.is-valid .rsv-input:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);}
@media(prefers-reduced-motion:reduce){.rsv-ok{transition:none;}}

/* Urgency + countdown + social proof */
.rsv-urgency{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;background:linear-gradient(90deg,var(--rsv-orange-soft),transparent);color:var(--rsv-urgency-ink);font-size:12px;font-weight:600;margin:14px 0;}
.rsv-urgency .bar{flex:1;height:5px;background:var(--rsv-orange-soft);border-radius:999px;overflow:hidden;}
.rsv-urgency .bar>div{height:100%;background:var(--rsv-orange);border-radius:999px;}
.rsv-countdown{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--rsv-cyan-soft),transparent);padding:9px 13px;border-radius:11px;font-size:12px;color:var(--rsv-blue);font-weight:600;margin:8px 0 0;}
.rsv-countdown b{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;font-size:13px;}

/* Sidebar resumen */
.rsv-side{background:var(--rsv-surface2);padding:26px 24px;display:flex;flex-direction:column;border-left:1px solid var(--rsv-line);}
@media(max-width:780px){.rsv-side{border-left:none;border-top:1px solid var(--rsv-line);}}
.rsv-side-img{aspect-ratio:16/10;border-radius:14px;background-size:cover;background-position:center;margin-bottom:14px;}
.rsv-side h4{font-family:var(--rsv-fdisplay);font-size:19px;font-weight:700;margin:0 0 2px;line-height:1.1;}
.rsv-side .rsv-rate{display:flex;align-items:center;gap:5px;color:var(--rsv-ink2);font-size:12.5px;margin-bottom:14px;}
.rsv-side .rsv-rate b{color:var(--rsv-orange);}
.rsv-sline{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0;color:var(--rsv-ink2);}
.rsv-sline .v{font-weight:600;color:var(--rsv-ink);text-align:right;}
.rsv-stotal{border-top:1px dashed var(--rsv-line);margin-top:10px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;}
.rsv-stotal .lbl{font-weight:700;}
.rsv-stotal .amt{font-family:var(--rsv-fdisplay);font-size:28px;font-weight:800;color:var(--rsv-accent-deep);letter-spacing:-.02em;}
.rsv-social{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rsv-line);font-size:12px;color:var(--rsv-ink2);}
.rsv-av{display:flex;}
.rsv-av>span{width:26px;height:26px;border-radius:50%;border:2px solid var(--rsv-surface2);margin-left:-8px;background:linear-gradient(135deg,var(--rsv-accent-deep),var(--rsv-blue));display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;}
.rsv-av>span:first-child{margin-left:0;}
.rsv-trust{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--rsv-ink3);}
.rsv-trust span{display:flex;align-items:center;gap:7px;}
.rsv-trust i{color:var(--rsv-green);}

/* Nav acciones */
.rsv-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--rsv-line);gap:12px;}
.rsv-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:14.5px;border:none;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;}
.rsv-btn-primary{background:var(--rsv-accent-deep);color:#fff;box-shadow:0 8px 20px rgba(163,43,31,.35);}
.rsv-btn-primary:hover{background:var(--rsv-blue);transform:translateY(-1px);box-shadow:0 12px 28px rgba(163,43,31,.42);}
.rsv-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.rsv-btn-ghost{background:var(--rsv-surface2);color:var(--rsv-ink);}
.rsv-btn-ghost:hover{background:var(--rsv-cyan-soft);color:var(--rsv-blue);}
.rsv-btn-wa{background:#0e7c6e;color:#fff;} /* el verde claro de WhatsApp con texto blanco daba 1.98:1; este teal = 5.09:1 */

/* Ticket / confirmación */
.rsv-confirm{text-align:center;padding:8px 0;}
.rsv-check{width:74px;height:74px;border-radius:50%;background:var(--rsv-accent-deep);color:#fff;display:grid;place-items:center;margin:0 auto 16px;font-size:36px;animation:rsvPop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes rsvPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.rsv-ticket{max-width:440px;margin:18px auto 0;background:var(--rsv-surface);border:1px solid var(--rsv-line);border-radius:22px;overflow:hidden;box-shadow:var(--rsv-shadow);text-align:left;}
.rsv-ticket-top{padding:22px 26px;background:linear-gradient(135deg,var(--rsv-accent-deep),var(--rsv-blue));color:#fff;position:relative;}
.rsv-ticket-top::after{content:'';position:absolute;bottom:-11px;left:0;right:0;height:22px;background-image:radial-gradient(circle at 11px 11px,var(--rsv-surface) 7px,transparent 8px);background-size:22px 22px;background-repeat:repeat-x;}
.rsv-ticket-top h4{font-family:var(--rsv-fdisplay);font-size:22px;margin:0;}
.rsv-ticket-body{padding:24px 26px;}
.rsv-trow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--rsv-line);font-size:13.5px;}
.rsv-trow:last-child{border-bottom:none;}
.rsv-trow .l{color:var(--rsv-ink3);}
.rsv-trow .r{font-weight:600;}
/* .rsv-qr retirado: era un damero CSS decorativo que PARECE un QR
   escaneable. En un boleto ya PAGADO eso promete un pase de abordar que nadie
   escanea (no hay sistema de check-in). La referencia legible lo sustituye. */

/* Confetti canvas */
.rsv-confetti-c{position:fixed;inset:0;pointer-events:none;z-index:100001;}

/* Botón flotante "Reservar" que puede inyectarse en tours */
.rsv-cta{display:inline-flex;align-items:center;gap:10px;background:var(--rsv-accent-deep);color:#fff;padding:15px 30px;border-radius:999px;font-weight:700;font-size:15px;border:none;cursor:pointer;box-shadow:0 8px 22px rgba(163,43,31,.35);transition:.2s;}
.rsv-cta:hover{background:var(--rsv-blue);transform:translateY(-2px);box-shadow:0 12px 30px rgba(163,43,31,.45);}

/* ===== Sticky booking bar (aparece al scroll en páginas de tour) ===== */
.rsv-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--rsv-line);box-shadow:0 -10px 34px rgba(26,43,73,.14);transform:translateY(115%);transition:transform .45s cubic-bezier(.16,1,.3,1);padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.rsv-stickybar.show{transform:none;}
.rsv-stickybar .sb-l{display:flex;align-items:center;gap:14px;min-width:0;}
.rsv-stickybar .sb-thumb{width:46px;height:46px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0;}
.rsv-stickybar .sb-name{font-family:var(--rsv-fdisplay);font-weight:700;font-size:16px;color:var(--rsv-ink);line-height:1.1;}
.rsv-stickybar .sb-meta{font-size:12px;color:var(--rsv-ink3);margin-top:1px;}
.rsv-stickybar .sb-meta b{color:var(--rsv-orange);}
.rsv-stickybar .sb-r{display:flex;align-items:center;gap:18px;}
.rsv-stickybar .sb-price{font-family:var(--rsv-fdisplay);font-weight:800;font-size:23px;color:var(--rsv-accent-deep);letter-spacing:-.02em;white-space:nowrap;}
.rsv-stickybar .sb-price small{font-size:12px;color:var(--rsv-ink3);font-weight:400;}
.rsv-stickybar .sb-cta{background:var(--rsv-accent-deep);color:#fff;border:none;border-radius:999px;padding:14px 30px;font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 22px rgba(163,43,31,.38);transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.rsv-stickybar .sb-cta:hover{background:var(--rsv-blue);transform:translateY(-1px);}
@media(max-width:620px){.rsv-stickybar{padding:11px 16px;}.rsv-stickybar .sb-thumb,.rsv-stickybar .sb-meta{display:none;}.rsv-stickybar .sb-price{font-size:19px;}.rsv-stickybar .sb-cta{padding:12px 20px;}}

/* ===== Flechas "doodle" guía REALES de TuriTop (PNG/WebP del cliente) ===== */
.rsv-hint{display:flex;align-items:flex-end;gap:9px;animation:rsvHintIn .45s ease both;pointer-events:none;}
.rsv-hint-t{font-family:var(--rsv-fdisplay);font-style:italic;font-size:18px;line-height:1.1;color:var(--rsv-ink2);padding-bottom:7px;}
.rsv-doodle{height:54px;width:auto;flex-shrink:0;opacity:.85;animation:rsvDoodleIn .55s cubic-bezier(.2,.8,.3,1) both;}
@keyframes rsvDoodleIn{from{opacity:0;transform:translateY(-7px) scale(.8) rotate(-6deg);}to{opacity:.85;transform:none;}}
@keyframes rsvDoodleInFlip{from{opacity:0;transform:translateY(-7px) scaleX(-1) scale(.8) rotate(6deg);}to{opacity:.85;transform:scaleX(-1);}}
.rsv-hint-cal .rsv-doodle,.rsv-hint-extras .rsv-doodle{animation-name:rsvDoodleInFlip;}
@keyframes rsvHintIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.rsv-hint-cal{justify-content:flex-start;margin:14px 0 2px;padding-left:8px;}
.rsv-hint-time{margin:10px 0 2px;padding-left:6px;}
.rsv-hint-time .rsv-doodle{height:46px;}
.rsv-hint-extras{margin:8px 0 6px;padding-left:6px;}
.rsv-hint-extras .rsv-doodle{height:48px;}
@media(prefers-reduced-motion:reduce){.rsv-doodle,.rsv-hint{animation:none;}.rsv-hint-cal .rsv-doodle,.rsv-hint-extras .rsv-doodle{transform:scaleX(-1);}}

/* ===== FIX: evitar que el launcher de WhatsApp (.wa-float) choque con la sticky booking bar ===== */
/* La sticky bar (.rsv-stickybar) se inyecta al final del body, asi que .wa-float queda ANTES en el DOM:
   usamos :has() (order-independent) para subir el launcher SOLO cuando la barra esta visible (.show).
   En paginas donde no existe la barra (o no esta .show) esta regla no aplica y el WhatsApp queda igual. */
body:has(.rsv-stickybar.show) .wa-float{bottom:120px;transition:bottom .45s cubic-bezier(.16,1,.3,1);}
@media(max-width:620px){body:has(.rsv-stickybar.show) .wa-float{bottom:104px;}}
/* Reserva espacio a la derecha de la barra para que su CTA nunca quede bajo el circulo de WhatsApp */
.rsv-stickybar{padding-right:96px;}
@media(max-width:620px){.rsv-stickybar{padding-right:78px;}}

/* =========================================================
   PORT 2026-07-21 — additions for the own booking UI
   (package picker, restriction notice, and the resets needed
   because slots/add-ons/picks are real <button>s now, so they
   are keyboard-reachable and announced correctly.)
   ========================================================= */

/* Interactive elements are buttons: neutralise UA styling, keep layout */
.rsv-slot,.rsv-addon,.rsv-pick{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;width:100%;}
.rsv-slot{display:block;}
.rsv-slot .t,.rsv-slot .i{display:block;}

.rsv-addon .chk,.rsv-addon .an,.rsv-addon .ad,.rsv-addon .ap{display:block;}


/* Visible keyboard focus (the whole UI is operable without a mouse) */
.rsv-slot:focus-visible,.rsv-addon:focus-visible,.rsv-pick:focus-visible,
.rsv-day:focus-visible,.rsv-btn:focus-visible,.rsv-sbtn:focus-visible,
.rsv-close:focus-visible,.rsv-cal-nav button:focus-visible{
  outline:3px solid var(--rsv-accent-deep);outline-offset:2px;}

/* Urgency bar (markup uses spans so it can live inside a button-free flow) */
.rsv-urgency .bar{display:block;}
.rsv-urgency .bar>span{display:block;height:100%;background:var(--rsv-urgency-ink);border-radius:999px;}

/* Secondary heading inside a screen */
.rsv-h3s{font-size:20px;margin-top:22px;}

/* Package picker — shown when a CTA has no single product (data-reserva="menu") */
.rsv-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:600px){.rsv-picks{grid-template-columns:1fr;}}
.rsv-pick{display:flex;align-items:center;gap:12px;text-align:left;padding:10px;border:1.5px solid var(--rsv-line);
  border-radius:16px;background:var(--rsv-surface);cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;}
.rsv-pick:hover{border-color:var(--rsv-cyan);transform:translateY(-1px);box-shadow:0 8px 20px rgba(26,43,73,.10);}
.rsv-pick .pi{width:62px;height:62px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0;}
.rsv-pick .pb{min-width:0;}
.rsv-pick .pn{display:block;font-family:var(--rsv-fdisplay);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--rsv-ink);}
.rsv-pick .pp{display:block;margin-top:4px;font-weight:700;font-size:13.5px;color:var(--rsv-accent-deep);}
.rsv-pick .pp small{font-weight:500;color:var(--rsv-ink3);font-size:11.5px;}

/* Neutral note (payment terms, private-flight minimum) */
.rsv-note{margin:12px 0 0;padding:10px 13px;border-radius:11px;background:var(--rsv-surface2);
  border:1px solid var(--rsv-line);color:var(--rsv-ink2);font-size:12.5px;line-height:1.5;}

/* Check-in requirement (photo ID). Deliberately NOT `.rsv-rules`: the absolute
   flight rules are two — minimum age and pregnancy — and 36 pages of this site
   say so. ID is a condition of CHECK-IN, so it gets the neutral note treatment
   with an ink rule down the left, not the amber "no exceptions" box. */
.rsv-note-id{border-left:3px solid var(--rsv-accent-deep);}

/* Absolute safety restrictions — stated outright, never as a "check with us" */
.rsv-rules{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;padding:11px 13px;border-radius:11px;
  background:var(--rsv-orange-soft);border:1px solid #dde0e5;color:var(--rsv-urgency-ink);
  font-size:12.5px;font-weight:600;line-height:1.5;}
.rsv-rules i{flex-shrink:0;margin-top:1px;}

/* Confirmation screen */
.rsv-ticket-tour{opacity:.92;font-size:13px;margin-top:4px;}
.rsv-done-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}

/* AA: a SCARCE slot that is also SELECTED sits on the dark #2e2620 fill, where
   the orange scarcity label measured 2.37:1. The brand gold reads 7.41:1 there.
   (.rsv-slot.scarce .i wins over .rsv-slot.sel .i on source order, so this
   compound selector is required — raising specificity, not reordering.) */
.rsv-slot.sel.scarce .i{color:var(--rsv-gold);font-weight:600;}

/* =========================================================
   PASO DE PAGO — Stripe Payment Element montado en el modal
   El desglose se muestra COMPLETO y el recargo de tarjeta lleva su propia
   línea: "precio sin sorpresas" es el argumento comercial del sitio, así que
   el 5% se lee ANTES de pagar, nunca escondido dentro del total.
   ========================================================= */
.rsv-paysum{margin:16px 0 18px;padding:16px 18px;border-radius:14px;
  background:var(--rsv-surface2);border:1px solid var(--rsv-line);}
.rsv-payline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14px;padding:6px 0;color:var(--rsv-ink2);}
.rsv-payline .v{font-weight:600;color:var(--rsv-ink);white-space:nowrap;}
/* El recargo se separa visualmente para que se lea como concepto aparte. */
.rsv-payline-fee{margin-top:6px;padding-top:11px;border-top:1px dashed var(--rsv-line);
  color:var(--rsv-urgency-ink);}
.rsv-payline-fee .v{color:var(--rsv-urgency-ink);}
.rsv-paytotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:11px;padding-top:13px;border-top:2px solid var(--rsv-line);
  font-size:15px;font-weight:700;color:var(--rsv-ink);}
.rsv-paytotal .v{font-family:var(--rsv-fdisplay);font-size:25px;font-weight:800;
  color:var(--rsv-accent-deep);letter-spacing:-.02em;white-space:nowrap;}

/* Contenedor donde Stripe monta sus campos. min-height reserva el espacio para
   que la tarjeta no dé un salto de layout al terminar de cargar. */
.rsv-pay-el{min-height:190px;margin:4px 0 14px;}
.rsv-payloading{display:grid;place-items:center;min-height:190px;
  color:var(--rsv-ink3);font-size:14px;}

.rsv-payerr{margin:0 0 14px;padding:12px 14px;border-radius:11px;
  background:#f5f6f8;border:1px solid #0071eb;color:#8f3f0a;/* 6.28:1 sobre #f5f6f8 */
  font-size:13.5px;line-height:1.55;}

/* La misma caja, pero inyectada al final de una pantalla que no es la de pago:
   necesita aire por arriba, donde el original solo lo lleva por abajo. */
.rsv-err-aviso{margin-top:16px;}

.rsv-btn-pay{width:100%;justify-content:center;font-size:16px;padding:16px 22px;}
.rsv-btn-pay:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
/* Salida por WhatsApp cuando el pago no puede continuar: nunca se deja al
   viajero en una pantalla muerta. */
#rsvWaFallback{width:100%;justify-content:center;margin-top:12px;}

/* Línea del recargo dentro del resumen lateral. */
.rsv-sline-fee{color:var(--rsv-urgency-ink);}
.rsv-sline-fee .v{color:var(--rsv-urgency-ink);}

@media (max-width:640px){
  .rsv-paysum{padding:14px;}
  .rsv-paytotal .v{font-size:22px;}
}

/* ── PayPal: el separador y el hueco del botón ─────────────────────────────
   El botón lo dibuja el SDK de PayPal dentro de un iframe con su propia marca
   —eso no se puede tocar, y es correcto: la gente lo reconoce—. Lo que sí es
   nuestro es el aire alrededor y el «o» que lo separa del pago con tarjeta. */
.rsv-o {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 14px; color: var(--rsv-ink3);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em;
}
.rsv-o::before, .rsv-o::after {
  content: ""; flex: 1; height: 1px; background: var(--rsv-line);
}
.rsv-paypal { min-height: 46px; }

/* ── El reloj del lugar apartado ───────────────────────────────────────────
   El último minuto se avisa con COLOR, no con un cambio de tamaño: agrandar
   el número movería la maqueta bajo el dedo justo cuando la persona va a
   pulsar «Pagar», y un botón que se desplaza en el último instante es la
   forma más tonta de perder una venta ya hecha. */
.rsv-countdown--corre { color: var(--rsv-accent-deep); font-weight: 700; }
.rsv-countdown--corre b { animation: rsvLatir 1s ease-in-out infinite; }
@keyframes rsvLatir { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.rsv-countdown--fin { color: var(--rsv-ink3); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .rsv-countdown--corre b { animation: none } }

/* ── Rescate al cerrar ─────────────────────────────────────────────────────
   Cubre el lightbox, no la página: el checkout sigue detrás, visible y a un
   clic. Que se vea lo que se está a punto de abandonar es la mitad del
   argumento. */
.rsv-rescate {
  position: absolute; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  /* 🧨 El botón de PayPal lo dibuja un iframe del SDK con su propio z-index alto
     y se pintaba ENCIMA de este diálogo: una barra amarilla cruzándolo por la
     mitad, que es la pinta exacta de una web rota. Contra marca ajena no se
     compite en z-index —puede subirlo cuando quiera—, así que además el JS lo
     esconde mientras dure el diálogo. Cinturón y tirantes. */
  background: rgba(23, 19, 15, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.rsv-rescate.ver { opacity: 1; }

.rsv-rescate-caja {
  width: 100%; max-width: 380px;
  background: var(--rsv-paper, #fff);
  border: 1px solid var(--rsv-line);
  border-top: 4px solid var(--rsv-accent-deep);   /* cornisa: firma CÓDICE */
  padding: 26px 24px 20px;
  text-align: center;
  transform: translateY(10px);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.rsv-rescate.ver .rsv-rescate-caja { transform: none; }

.rsv-rescate-min {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rsv-accent-deep); font-weight: 700;
  margin-bottom: 12px;
}
.rsv-rescate-caja h4 {
  font-family: var(--rsv-fdisplay); font-size: 21px; line-height: 1.15;
  margin: 0 0 8px; color: var(--rsv-ink);
}
.rsv-rescate-caja p {
  font-size: 14px; line-height: 1.6; color: var(--rsv-ink3); margin: 0 0 18px;
}
.rsv-rescate-caja .rsv-btn { width: 100%; margin-bottom: 9px; }
.rsv-rescate-caja .rsv-btn-wa {
  background: #fff; color: #128c7e; border: 1px solid #128c7e;
}
.rsv-rescate-caja .rsv-btn-wa:hover { background: #128c7e; color: #fff; }

/* La salida existe y se ve. Esconderla convertiría el rescate en una trampa,
   y una trampa se paga en reputación mucho más de lo que cobra en ventas. */
.rsv-rescate-salir {
  background: none; border: 0; padding: 8px;
  color: var(--rsv-ink3); font-size: 13px; text-decoration: underline;
  cursor: pointer;
}
.rsv-rescate-salir:hover { color: var(--rsv-ink); }

/* ── Order bump: subir de paquete ──────────────────────────────────────────
   TODA la caja es el control, no solo una casilla de 19 px. En móvil —que es
   el 80% del tráfico— la diferencia entre un objetivo de 19 px y uno de 330×170
   es la diferencia entre tomarlo y fallar el toque.

   Cornisa maciza arriba: es el talud-tablero del sitio, el mismo lenguaje que
   las tarjetas del catálogo. El bump no parece un anuncio pegado; parece parte
   del sitio, que es lo que hace que no se lea como intento de venta extra. */
.rsv-bump {
  position: relative;
  margin: 18px 0 16px;
  padding: 16px 18px 14px;
  background: var(--rsv-paper, #fff);
  border: 1px solid var(--rsv-accent-deep);
  border-top: 4px solid var(--rsv-accent-deep);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.rsv-bump:hover { background: #ffffff; box-shadow: 0 6px 22px rgba(163, 43, 31, .12); }
.rsv-bump:focus-visible { outline: 3px solid var(--rsv-accent-deep); outline-offset: 2px; }

.rsv-bump-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--rsv-accent-deep); margin-bottom: 9px;
}
.rsv-bump-fila { display: flex; gap: 13px; align-items: flex-start; }

.rsv-bump-box {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
  border: 2px solid var(--rsv-accent-deep); background: #fff;
  position: relative;
}
.rsv-bump-box::after {
  content: ""; position: absolute; left: 7px; top: 2px;
  width: 7px; height: 13px; border: solid var(--rsv-paper, #fff);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform .16s ease;
}
.rsv-bump:hover .rsv-bump-box { background: rgba(163, 43, 31, .08); }

.rsv-bump-t {
  font-family: var(--rsv-fdisplay); font-weight: 700; font-size: 15.5px;
  line-height: 1.2; color: var(--rsv-ink);
}
.rsv-bump-gana {
  margin: 6px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--rsv-ink3); line-height: 1.55;
}
.rsv-bump-gana li::before { content: "+ "; color: var(--rsv-accent-deep); font-weight: 700; }

/* La multiplicación por pasajeros va A LA VISTA antes de tocar nada: con dos
   viajeros el total salta bastante, y un salto que no se anticipó se lee como
   cargo sorpresa — que es lo que tumba el pago entero. */
.rsv-bump-cuenta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rsv-line);
  font-size: 13px; color: var(--rsv-ink3);
}
.rsv-bump-cuenta b {
  font-family: var(--rsv-fdisplay); font-size: 19px; font-weight: 800;
  color: var(--rsv-accent-deep); font-variant-numeric: tabular-nums;
}
.rsv-bump-nota { margin-top: 8px; font-size: 12px; color: var(--rsv-ink3); }

@media (prefers-reduced-motion: reduce) {
  .rsv-bump, .rsv-bump-box::after { transition: none; }
}

/* ── Ancla de precio ───────────────────────────────────────────────────────
   El «antes» NO es un tachado inventado: es el mismo precio anterior que la
   ficha del tour ya publica. Traerlo al checkout cierra el círculo — el
   visitante ve en la pantalla de pago la misma cuenta que le convenció fuera,
   y un número que aparece solo al pagar se lee como truco. */
.rsv-ancla {
  display: flex; align-items: baseline; gap: 9px;
  width: 100%; margin-bottom: 4px;
}
.rsv-ancla s { color: var(--rsv-ink3); font-size: 14px; text-decoration-thickness: 1.5px; }
.rsv-ancla-ahorro {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1a7f37;              /* verde de ahorro: no compite con el rojo de marca */
  background: rgba(26, 127, 55, .1);
  padding: 3px 8px;
}
/* 🧨 El ancla es una TERCERA fila dentro de un contenedor pensado para dos
   (etiqueta ↔ importe, en flex y a la línea base). Con `flex-wrap` a secas
   se colaba entre medias y «Total» acababa pegado a la cifra, partida en dos
   renglones. El ancla ocupa su propia fila completa y el resto no se entera. */
.rsv-stotal { flex-wrap: wrap; row-gap: 2px; }
.rsv-stotal .rsv-ancla { flex: 0 0 100%; order: -1; }
.rsv-stotal .lbl { flex: 1 1 auto; }
.rsv-stotal .amt { flex: 0 0 auto; white-space: nowrap; }

/* El cupo del lateral sale de /api/plazas, igual que el del paso 1. */
.rsv-social { display: flex; align-items: center; gap: 8px; }



/* ── El total que cuenta hacia arriba ──────────────────────────────────────
   Solo COLOR y un pulso: nada de escala. Agrandar la cifra movería la maqueta
   —y con ella el botón de pagar— justo cuando el dedo va hacia él. */
.rsv-stotal .amt { transition: color .2s ease; }
.rsv-amt--sube { color: #1a7f37 !important; animation: rsvSube .45s ease-out; }
@keyframes rsvSube { 0% { opacity: .55 } 100% { opacity: 1 } }

/* La foto del lateral cambia con el paso: se funde, no salta. */
.rsv-side-img { transition: background-image .4s ease, opacity .3s ease; }

/* ── Paso 6: el clímax ─────────────────────────────────────────────────────
   Confeti había; lo que faltaba era responder a lo que la cabeza pregunta justo
   después de pagar: cuánto falta y qué pasa ahora. */
.rsv-countdown-big {
  margin: 16px 0 4px; text-align: center;
  font-family: var(--rsv-fdisplay); font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  font-weight: 800; color: var(--rsv-accent-deep); letter-spacing: -.01em;
}
.rsv-sigue {
  margin: 18px 0 6px; padding: 16px 18px;
  background: var(--rsv-surface2, #f5f6f8); border: 1px solid var(--rsv-line);
  border-left: 3px solid var(--rsv-accent-deep);
  text-align: left;
}
.rsv-sigue-t {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--rsv-accent-deep); margin-bottom: 10px;
}
.rsv-sigue ol { margin: 0; padding-left: 20px; }
.rsv-sigue li { font-size: 13.5px; line-height: 1.6; color: var(--rsv-ink2); margin-bottom: 7px; }
.rsv-sigue li:last-child { margin-bottom: 0; }

.rsv-done-actions { display: flex; flex-direction: column; gap: 9px; }
.rsv-done-actions .rsv-btn { width: 100%; text-decoration: none; }
.rsv-done-actions .rsv-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .rsv-amt--sube { animation: none; }
  .rsv-side-img { transition: none; }
}

/* ── Reseña real en el lateral ─────────────────────────────────────────────
   SIN estrellas, y no por descuido: el volcado de la ficha no traía la nota de
   cada reseña. Pintar cinco «porque el texto es bueno» sería inventar el dato
   más comprobable que existe — cualquiera abre la ficha y lo ve. Este sitio ya
   tuvo que purgar 126 testimonios inventados; la comilla y el nombre real
   convencen sin necesidad de eso. */
.rsv-resena {
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--rsv-line);
}
.rsv-resena blockquote {
  margin: 0; padding: 0 0 0 13px;
  border-left: 2px solid var(--rsv-accent-deep);
  font-size: 13px; line-height: 1.6; color: var(--rsv-ink2);
  font-style: italic;
}
.rsv-resena figcaption {
  margin-top: 8px; padding-left: 15px;
  font-size: 11.5px; color: var(--rsv-ink3);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.rsv-resena figcaption a {
  color: var(--rsv-ink3); text-decoration: underline; text-underline-offset: 2px;
}
.rsv-resena figcaption a:hover { color: var(--rsv-accent-deep); }

/* ── Iconos de los extras ──────────────────────────────────────────────────
   48 px, no 26: el dibujo tiene detalle —la camioneta lleva once huecos— y a
   26 se convertía en una mancha gris. Comprobado mirándolos a los tres
   tamaños, no suponiéndolo.

   Dos variables hacen el trabajo:
   · `color` → la tinta del icono, que hereda de la tarjeta y por eso se pone
     roja al marcar el extra.
   · `--ico-hueco` → el color de los HUECOS del dibujo. La tarjeta cambia de
     fondo al marcarse, así que un hueco de color fijo dejaría ver el crema
     sobre el fondo nuevo, como un recorte mal pegado. */






/* Aquí vivía el juego de colores del icono de cada adicional: el hover lo
   aclaraba y `.sel` lo teñía de terracota, y había que declararlos en ese orden
   porque compiten con la misma especificidad. Se fue con los iconos —ahora cada
   tarjeta lleva su foto— y el estado marcado lo dice el aro sobre la imagen. */

/* La respuesta al «¿y si hace mal tiempo?» en la pantalla de la fecha.
   Discreta a propósito: informa, no grita. La urgencia falsa que vivía en este
   mismo calendario ya se retiró; esto es lo contrario — una razón real para no
   dudar, dicha una vez. */
.rsv-seguro{
  display:flex; gap:8px; align-items:flex-start;
  margin-top:14px; padding:11px 13px;
  background:var(--rsv-green-soft, #eef7f1); border-radius:11px;
  color:var(--rsv-ink2, #4a4038); font-size:12.5px; line-height:1.45;
}
.rsv-seguro i{ color:var(--rsv-green, #177046); font-size:14px; line-height:1.3; flex:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ¿DÓNDE TE RECOGEMOS? — tarjeta de recogida en la pantalla de confirmación.
   Solo se pinta con reserva PAGADA y paquete con transporte (ver recogidaHTML
   en public/js/reservas.js).

   Hereda el lenguaje de .rsv-sigue —fondo crema, filete de acento a la
   izquierda— pero con el borde COMPLETO en el color de acento: es lo único de
   esa pantalla que le pide algo al pasajero y tiene que ganarle la mirada al
   ticket y al confeti.

   Medidas táctiles a propósito: el input mide 16px de fuente (por debajo, iOS
   hace zoom al enfocar y descoloca el modal) y 48px de alto; el botón, 52px.
   ═══════════════════════════════════════════════════════════════════════════ */
.rsv-pickup {
  margin: 18px 0 6px; padding: 18px;
  background: var(--rsv-surface2, #f5f6f8);
  border: 1px solid var(--rsv-accent-deep);
  border-left: 3px solid var(--rsv-accent-deep);
  text-align: left;
}
.rsv-pickup-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rsv-fdisplay); font-weight: 700; font-size: 17px;
  color: var(--rsv-ink); margin-bottom: 6px;
}
.rsv-pickup-h i { color: var(--rsv-accent-deep); }
.rsv-pickup-p {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--rsv-ink2);
}
.rsv-pickup-in {
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; min-height: 48px;
  font: inherit; font-size: 16px;
  border: 1px solid var(--rsv-line); border-radius: 12px;
  background: var(--rsv-surface, #fff); color: var(--rsv-ink);
  transition: border-color .15s, box-shadow .15s;
}
.rsv-pickup-in:focus {
  outline: none; border-color: var(--rsv-accent-deep);
  box-shadow: 0 0 0 3px var(--rsv-cyan-soft, #e1f0ff);
}
/* La lista de sugerencias de Photon. Va en flujo (no absolute): dentro de un
   modal con scroll propio, un desplegable posicionado se sale de la caja. */
.rsv-pickup-sug {
  margin-top: 5px; padding: 4px;
  background: var(--rsv-surface, #fff);
  border: 1px solid var(--rsv-line); border-radius: 11px;
  box-shadow: 0 8px 22px rgba(23, 19, 15, .12);
  max-height: 232px; overflow-y: auto;
}
.rsv-pickup-op {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; min-height: 44px;
  border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--rsv-ink);
  cursor: pointer; transition: background .15s;
}
.rsv-pickup-op:hover, .rsv-pickup-op:focus-visible {
  background: var(--rsv-cyan-soft, #e1f0ff); color: var(--rsv-ink);
}
.rsv-pickup-free {
  margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--rsv-ink3);
}
/* El aviso del regreso: es distinto en cada paquete con transporte y decirlo
   mal deja a alguien esperando una camioneta que no va a volver por él. */
.rsv-pickup-back {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding: 11px 13px; border-radius: 11px;
  background: var(--rsv-orange-soft, #e1f0ff); border: 1px solid #dde0e5;
  color: var(--rsv-urgency-ink, #9d4a0d);
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.rsv-pickup-back i { flex-shrink: 0; margin-top: 1px; }
.rsv-pickup-save {
  width: 100%; justify-content: center; margin-top: 12px;
  min-height: 52px; font-size: 15px;
  background: var(--rsv-accent-deep); color: #fff;
  box-shadow: 0 8px 20px rgba(163, 43, 31, .35);
}
.rsv-pickup-save:hover:not(:disabled) { background: var(--rsv-blue); }
.rsv-pickup-save:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.rsv-pickup-msg {
  margin: 10px 0 0; text-align: center; font-size: 13.5px; font-weight: 700;
}
.rsv-pickup-msg.is-ok  { color: var(--rsv-green, #177046); }
.rsv-pickup-msg.is-err { color: #c0392b; }
/* Guardada: se atenúa el filete y se marca en verde, para que se lea de un
   vistazo que ese recuadro ya no pide nada. */
.rsv-pickup.is-saved { border-color: var(--rsv-green, #177046); }
.rsv-pickup.is-saved .rsv-pickup-h i { color: var(--rsv-green, #177046); }
@media (max-width: 600px) {
  .rsv-pickup { padding: 15px; }
  .rsv-pickup-h { font-size: 16px; }
}

/* ── ⚖️ El peso de cada pasajero ─────────────────────────────────────────────
   Va dentro de la misma tarjeta que la recogida, arriba, porque lo llevan los
   7 paquetes y la recogida solo 2. */
.rsv-peso-sec { margin-bottom: 4px; }
.rsv-pickup-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rsv-line); }
.rsv-peso-u-wrap {
  margin-left: auto; display: inline-flex; flex: none;
  border: 1px solid var(--rsv-line); border-radius: 999px; overflow: hidden;
}
.rsv-peso-u {
  border: 0; cursor: pointer; padding: 6px 13px; min-height: 32px;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--rsv-surface, #fff); color: var(--rsv-accent-deep);
}
.rsv-peso-u[aria-pressed="true"] { background: var(--rsv-accent-deep); color: #fff; }
.rsv-peso-fila { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.rsv-peso-lbl { flex: 0 0 auto; min-width: 92px; font-size: 14px; color: var(--rsv-ink2); }
.rsv-peso-in {
  width: 110px; text-align: center;
  padding: 11px 10px; min-height: 48px;
  /* 16px NO es estético: por debajo, iOS hace zoom al enfocar y descoloca el
     modal del checkout — la misma razón que ya está comentada en .rsv-pickup-in. */
  font: inherit; font-size: 16px;
  border: 1px solid var(--rsv-line); border-radius: 12px;
  background: var(--rsv-surface, #fff); color: var(--rsv-ink);
}
.rsv-peso-in:focus { outline: none; border-color: var(--rsv-accent-deep); box-shadow: 0 0 0 3px var(--rsv-cyan-soft, #e1f0ff); }
.rsv-peso-in.is-err { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.rsv-peso-u-lbl { font-size: 13px; color: var(--rsv-ink3); }
.rsv-pickup-h { flex-wrap: wrap; }
@media (max-width: 420px) {
  .rsv-peso-lbl { min-width: 74px; font-size: 13px; }
  .rsv-peso-in { width: 92px; }
}

/* ══ Tarjetas de adicionales, con la foto de lo que se vende ══════════════
   🧨 Antes eran cuatro iconos de línea grises, del mismo tamaño y el mismo
   color, en un paso titulado «Mejora tu experiencia». No mejoraban nada: un
   desayuno dentro de una cueva de roca no se vende con la silueta de un
   edificio. Y el selector era un checkbox cuadrado de formulario, que es
   exactamente lo que uno espera ver en un trámite, no en un regalo. */
.rsv-addon{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  border:1.5px solid var(--rsv-line);border-radius:18px;background:var(--rsv-surface);}
.rsv-addon-foto{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--rsv-cyan-soft);}
.rsv-addon-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;}
.rsv-addon:hover .rsv-addon-foto img{transform:scale(1.045);}
/* Un velo abajo para que el borde de la foto no choque con el texto. */
.rsv-addon-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(26,43,73,.30),transparent);pointer-events:none;}
.rsv-addon-cuerpo{display:block;padding:13px 15px 15px;}

/* El selector: un círculo sobre la foto, no una casilla de formulario.
   Vacío es un aro de cristal; marcado se rellena de terracota. 28 px para que
   se vea sin robarle sitio a la imagen — el objetivo táctil es la tarjeta
   entera, que es lo que se pulsa de verdad. */
.rsv-addon .chk{position:absolute;top:10px;right:10px;z-index:1;
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  background:rgba(26,43,73,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:grid;place-items:center;color:transparent;margin:0;
  box-shadow:0 2px 8px rgba(26,43,73,.25);transition:.2s;font-size:15px;}
.rsv-addon.sel .chk{background:var(--rsv-accent-deep);border-color:#fff;color:#fff;
  transform:scale(1.06);}
.rsv-addon.sel{border-color:var(--rsv-accent-deep);border-width:2px;
  background:var(--rsv-surface);box-shadow:0 6px 20px rgba(163,43,31,.16);}
/* 🧨 El degradado de la tarjeta seleccionada se quita: con foto encima teñía
   la imagen de naranja y parecía un fallo de color, no una selección. */
.rsv-addon.sel .rsv-addon-cuerpo{background:var(--rsv-cyan-soft);}
.rsv-addon .ad{margin-bottom:9px;}
@media (max-width:640px){
  .rsv-addon-foto{aspect-ratio:16/9;}
  .rsv-addon .chk{width:32px;height:32px;font-size:17px;}
}

/* =========================================================
   💵 Pagar todo o reservar con la mitad (28-sep-2026)
   Va ANTES de los campos de tarjeta. Contrastes medidos sobre #fff:
   tinta #17130f 18.5:1 · ink2 #5f5446 7.4:1 (6.7:1 sobre el fondo activo) · borde activo #0071eb 7.2:1.
   ========================================================= */
.rsv-plan{margin:0 0 16px;padding:0;border:0;display:grid;gap:10px;}
.rsv-plan legend{font-weight:700;font-size:15px;color:var(--rsv-ink);margin-bottom:8px;padding:0;}
.rsv-plan-op{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;
  border:2px solid var(--rsv-line);background:var(--rsv-surface);cursor:pointer;
  min-height:48px;transition:border-color .15s ease,background .15s ease;}
.rsv-plan-op input{margin:3px 0 0;width:20px;height:20px;accent-color:var(--rsv-accent-deep);flex:none;}
.rsv-plan-op span{display:flex;flex-direction:column;gap:3px;}
.rsv-plan-op b{font-size:15px;color:var(--rsv-ink);}
.rsv-plan-op small{font-size:13.5px;line-height:1.4;color:var(--rsv-ink2);}
.rsv-plan-op.on{border-color:var(--rsv-accent-deep);background:var(--rsv-orange-soft);}
.rsv-plan-op:focus-within{outline:3px solid var(--rsv-gold);outline-offset:2px;}
.rsv-plan-nota{margin:2px 2px 0;font-size:13px;line-height:1.5;color:var(--rsv-ink2);}
.rsv-payline-later .v{color:var(--rsv-urgency-ink);}
.rsv-trust-dep{font-weight:600;}

/* ── UX 28-sep: pasos que caben en celular, total junto al botón, ID plegado,
   y «más fechas» cuando al mes le quedan pocos días. ── */
@media (max-width:620px){
  .rsv-steps{gap:4px;}
  .rsv-step{padding:6px 8px;}
  .rsv-step:not(.active) .l{display:none;}
}
.rsv-nav{flex-wrap:wrap;}
.rsv-nav-total{flex:1 0 100%;display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--rsv-ink2);margin-bottom:4px;}
.rsv-nav-total b{font-size:18px;color:var(--rsv-ink);font-weight:800;}
@media (min-width:781px){.rsv-nav-total{display:none;}}
.rsv-id-fold summary{cursor:pointer;list-style:none;font-weight:600;color:var(--rsv-ink);}
.rsv-id-fold summary::-webkit-details-marker{display:none;}
.rsv-id-fold summary .why{font-weight:600;text-decoration:underline;color:var(--rsv-accent-deep);margin-left:4px;}
.rsv-id-fold[open] summary{margin-bottom:8px;}
.rsv-cal-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:13px 16px;border-radius:999px;border:2px solid var(--rsv-accent-deep);background:#fff;color:var(--rsv-accent-deep);font:inherit;font-weight:700;font-size:15px;cursor:pointer;}
/* El botón de avanzar quedaba cortado bajo el borde en celular: pie fijo con el total. */
@media (max-width:780px){.rsv-nav{position:sticky;bottom:0;background:#fff;z-index:6;margin-top:16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 18px -12px rgba(0,0,0,.18);}}
/* «Continuar al pago» es más largo: los dos botones en un renglón. */
@media (max-width:780px){.rsv-nav{gap:10px;}.rsv-nav #rsvBack{flex:0 0 auto;padding-left:18px;padding-right:18px;}.rsv-nav #rsvNext{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;}}