/* ============================================================
   VIVE Santiago — estilos de las páginas interiores
   (Rutas | Tours · Actividades | Eventos · Paquetes Turísticos)
   Complementa home.css, que debe cargarse antes.
   ============================================================ */

/* ---------- Cabecera de página ---------- */
.cabecera{position:relative; overflow:hidden; color:#fff; padding:0}
.cabecera-art{position:absolute; inset:0; pointer-events:none}
.cabecera .wrap{position:relative; z-index:2; padding-top:66px; padding-bottom:74px}
.cabecera .eyebrow{color:#ffd0dd}
.cabecera .eyebrow::before{background:#ffd0dd}
.cabecera h1{font-size:clamp(2.1rem,4.6vw,3.4rem); margin:14px 0 16px; text-shadow:0 3px 22px rgba(20,25,45,.25)}
.cabecera p{max-width:640px; font-size:1.05rem; color:rgba(255,255,255,.9)}
.miga{font-size:.8rem; color:rgba(255,255,255,.75); margin-bottom:18px; display:flex; gap:8px; align-items:center}
.miga a:hover{color:#fff; text-decoration:underline}
.cab-datos{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.cab-dato{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); font-size:.86rem; font-weight:500;
}
.cab-dato b{font-weight:700}

/* ---------- Aviso de borrador ---------- */
.aviso{
  display:flex; gap:14px; align-items:flex-start; background:#fff6e6; border:1px solid #f0d9a8;
  border-radius:var(--r-m); padding:16px 20px; margin-bottom:34px;
}
.aviso svg{flex-shrink:0; margin-top:2px; color:#b5811d}
.aviso b{display:block; margin-bottom:3px; font-size:.95rem}
.aviso p{font-size:.88rem; color:#7a5c1c; line-height:1.55}

/* ---------- Barra de filtros ---------- */
.barra-filtros{
  position:sticky; top:76px; z-index:60; background:rgba(251,250,247,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea); padding:16px 0;
}
.filtros-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr) auto; gap:10px; align-items:end}
.campo-f label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin-bottom:5px}
.campo-f input, .campo-f select{
  width:100%; padding:11px 14px; border-radius:var(--r-s); border:1.5px solid var(--linea);
  background:#fff; font-family:var(--sans); font-size:.9rem; font-weight:500; color:var(--tinta); outline:none;
}
.campo-f input:focus, .campo-f select:focus{border-color:var(--rosa)}
.limpiar{padding:11px 16px; border-radius:var(--r-s); font-size:.86rem; font-weight:700; color:var(--gris); white-space:nowrap}
.limpiar:hover{color:var(--rosa)}
.resumen-filtros{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.resumen-filtros b{font-family:var(--titulo); font-weight:900; font-size:1.15rem}

/* ---------- Grillas ---------- */
.grid-fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px}
.grid-fichas .exp{flex:1 1 auto; scroll-snap-align:none}

/* ---------- Panoramas (eventos) ---------- */
.grid-panoramas{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px}
.pano{
  background:#fff; border-radius:var(--r-m); padding:22px; box-shadow:var(--sombra);
  border-left:4px solid var(--azul); transition:transform .22s ease, box-shadow .22s ease;
}
.pano:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.pano .barrio-tag{font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--azul)}
.pano h3{font-size:1.02rem; margin:7px 0 6px}
.pano p{font-size:.87rem; color:var(--gris); line-height:1.55}
.pano .tipo{display:inline-block; margin-top:13px; font-size:.72rem; font-weight:700; color:var(--grafito); background:var(--papel); border:1px solid var(--linea); padding:4px 11px; border-radius:100px}

/* ---------- Agenda vacía ---------- */
.agenda-vacia{
  text-align:center; padding:58px 28px; background:#fff; border:2px dashed var(--linea);
  border-radius:var(--r-l);
}
.agenda-vacia h3{font-size:1.3rem; margin-bottom:10px}
.agenda-vacia p{color:var(--gris); max-width:520px; margin:0 auto 22px; font-size:.95rem}

/* ---------- Paquetes ---------- */
.lista-paquetes{display:grid; gap:26px}
.paquete{
  background:#fff; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sombra);
  display:grid; grid-template-columns:320px 1fr; transition:box-shadow .25s ease;
}
.paquete:hover{box-shadow:var(--sombra-alta)}
.paquete-art{position:relative; min-height:280px; background:var(--linea)}
.paquete-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.paquete-art::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(20,22,18,.45),transparent 65%)}
.paquete-dias{
  position:absolute; top:16px; left:16px; z-index:2; background:var(--rosa); color:#fff;
  padding:7px 15px; border-radius:100px; font-size:.78rem; font-weight:700;
}
.paquete-body{padding:28px 30px; display:flex; flex-direction:column}
.paquete-body h3{font-size:1.35rem; margin-bottom:8px}
.paquete-intro{color:var(--gris); font-size:.94rem; margin-bottom:20px}
.paquete-cols{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px}
.paquete-cols h4{font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rosa); margin-bottom:10px}
.paquete-cols li{display:flex; gap:9px; align-items:flex-start; font-size:.88rem; margin-bottom:8px; line-height:1.45}
.paquete-cols li svg{flex-shrink:0; margin-top:4px; color:var(--verde)}
.paquete-pie{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--linea);
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.paquete-precio small{display:block; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gris)}
.paquete-precio b{font-family:var(--titulo); font-weight:900; font-size:1.6rem}
.paquete-precio i{font-style:normal; font-size:.8rem; color:var(--gris); display:block; margin-top:2px}
.desglose{margin-top:16px; font-size:.82rem; color:var(--gris)}
.desglose summary{cursor:pointer; font-weight:700; color:var(--grafito); list-style:none}
.desglose summary::-webkit-details-marker{display:none}
.desglose summary::before{content:"▸ "; color:var(--rosa)}
.desglose[open] summary::before{content:"▾ "}
.desglose table{width:100%; border-collapse:collapse; margin-top:10px}
.desglose td{padding:6px 0; border-bottom:1px solid var(--linea)}
.desglose td:last-child{text-align:right; white-space:nowrap; font-weight:700; color:var(--tinta)}
.desglose tr:last-child td{border-bottom:0}

/* ---------- Condiciones ---------- */
.acordeon{display:grid; gap:10px; max-width:820px}
.acordeon details{background:#fff; border-radius:var(--r-m); box-shadow:var(--sombra); padding:18px 22px}
.acordeon summary{cursor:pointer; font-weight:700; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+"; color:var(--rosa); font-size:1.3rem; font-weight:700; line-height:1}
.acordeon details[open] summary::after{content:"–"}
.acordeon p, .acordeon li{font-size:.9rem; color:var(--gris); line-height:1.65; margin-top:12px}
.acordeon li{margin-top:6px; padding-left:16px; position:relative}
.acordeon li::before{content:"·"; position:absolute; left:5px; color:var(--rosa); font-weight:700}

/* ---------- CTA de cierre ---------- */
.cierre{
  background:var(--tinta); color:#fff; border-radius:var(--r-xl); padding:52px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
}
.cierre h2{font-size:clamp(1.5rem,2.8vw,2.1rem); margin-bottom:10px}
.cierre p{color:rgba(255,255,255,.76); max-width:520px}
.cierre.con-espacio{margin-top:56px}
@media (max-width:620px){
  .cierre.con-espacio{margin-top:36px}
}
.cierre-acc{display:flex; gap:12px; flex-wrap:wrap}

@media (max-width:1040px){
  .filtros-grid{grid-template-columns:1fr 1fr 1fr; }
  .paquete{grid-template-columns:1fr}
  .paquete-art{min-height:210px}
}
@media (max-width:860px){
  .barra-filtros{position:static}
  .paquete-cols{grid-template-columns:1fr; gap:16px}
  .cierre{padding:38px 30px}
}
@media (max-width:620px){
  .filtros-grid{grid-template-columns:1fr}
  .grid-fichas, .grid-panoramas{grid-template-columns:1fr}
  .cabecera .wrap{padding-top:44px; padding-bottom:52px}
  .paquete-body{padding:24px 22px}
}

/* ============================================================
   Páginas de barrio
   ============================================================ */
.cabecera .cab-dato svg{flex-shrink:0}

/* Historia */
.historia{display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:start}
.historia p{margin-bottom:16px; font-size:1.02rem; line-height:1.75; color:#3c403b; max-width:62ch}
.historia p:first-of-type{font-size:1.12rem; color:var(--tinta)}
.ficha-datos{background:#fff; border-radius:var(--r-l); box-shadow:var(--sombra); padding:26px; position:sticky; top:100px}
.ficha-datos h3{font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--rosa); margin-bottom:16px}
.ficha-datos dl{display:grid; gap:14px; margin:0}
.ficha-datos dt{font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gris); font-weight:700}
.ficha-datos dd{margin:2px 0 0; font-size:.95rem; font-weight:500}

/* Tarjetas de imperdibles y cartelera */
.ficha{
  flex:0 0 clamp(250px,27%,330px); scroll-snap-align:start;
  background:#fff; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sombra);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.ficha:hover{transform:translateY(-6px); box-shadow:var(--sombra-alta)}
.ficha-art{height:172px; position:relative; overflow:hidden; background:var(--linea)}
.ficha-art img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.ficha:hover .ficha-art img{transform:scale(1.05)}
.ficha-tag{
  position:absolute; top:12px; left:12px; background:var(--rosa); color:#fff;
  padding:5px 12px; border-radius:100px; font-size:.72rem; font-weight:700;
}
.ficha-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1}
.ficha-body h3{font-size:1.06rem; margin-bottom:8px; line-height:1.3}
.ficha-body p{font-size:.89rem; color:var(--gris); line-height:1.55}
.ficha-pie{margin-top:auto; padding-top:14px; font-size:.8rem; color:var(--azul-osc); font-weight:600}

/* Imperdibles del barrio: tres fijos, en grilla. Al salir del carrusel
   las tarjetas dejan de estar limitadas a 330px y ocupan un tercio del
   ancho, así que la foto y el texto crecen con ellas. */
.grid-imperdibles{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px}
.grid-imperdibles .ficha{flex:none; scroll-snap-align:none}
.grid-imperdibles .ficha-art{height:240px}
.grid-imperdibles .ficha-body{padding:26px 28px 30px}
.grid-imperdibles .ficha-body h3{font-size:1.25rem; margin-bottom:10px}
.grid-imperdibles .ficha-body p{font-size:.95rem; line-height:1.6}

@media (max-width:900px){
  .grid-imperdibles{grid-template-columns:repeat(2,1fr); gap:20px}
  .grid-imperdibles .ficha-art{height:200px}
}

/* En el teléfono vuelve a ser carrusel: apiladas ocupan tres pantallas
   y el barrio se lee como una lista larga. Se resuelve solo con CSS
   —scroll horizontal con imán— así que no necesita el JS del carrusel
   grande ni sus flechas, que en pantalla táctil sobran. La tarjeta
   siguiente asoma un poco: es lo que avisa que hay más al costado. */
@media (max-width:620px){
  .grid-imperdibles{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* se sale del wrap para que la primera tarjeta parta en el margen
       y la última no quede pegada al borde */
    margin-inline:-24px; padding:4px 24px 6px;
  }
  .grid-imperdibles::-webkit-scrollbar{display:none}
  .grid-imperdibles .ficha{flex:0 0 82%; scroll-snap-align:start}
  .grid-imperdibles .ficha-body{padding:22px 24px 26px}
  .grid-imperdibles .ficha-body h3{font-size:1.14rem}
}

/* Servicios destacados */
.servicio{
  flex:0 0 clamp(238px,24%,300px); scroll-snap-align:start;
  background:#fff; border-radius:var(--r-m); overflow:hidden; box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.servicio:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta)}
.servicio-art{height:132px; position:relative; background:linear-gradient(135deg,var(--azul),var(--rosa))}
.servicio-art img{width:100%; height:100%; object-fit:cover}
.servicio-tipo{
  position:absolute; bottom:10px; left:10px; background:rgba(255,255,255,.94); color:var(--grafito);
  padding:4px 11px; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
/* Sello para distinguir a los que sí tienen convenio con el hub del
   resto de los lugares del barrio, que están por referencia. */
.servicio-hub{
  position:absolute; top:10px; right:10px; background:var(--rosa); color:#fff;
  padding:4px 10px; border-radius:100px; font-size:.62rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.servicio-body{padding:16px 18px 20px}
.servicio-body h3{font-size:1rem; margin-bottom:4px}
.servicio-body p{font-size:.84rem; color:var(--gris)}

/* Otros barrios */
.otros-barrios{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.otros-barrios .barrio{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  padding:15px 17px; border-radius:var(--r-m); transition:.2s;
}
.otros-barrios .barrio:hover{background:rgba(255,255,255,.13); transform:translateX(4px); border-color:rgba(255,255,255,.25)}

@media (max-width:1040px){
  .historia{grid-template-columns:1fr; gap:28px}
  .ficha-datos{position:static}
  .ficha{flex-basis:clamp(250px,44%,330px)}
  .servicio{flex-basis:clamp(238px,42%,300px)}
}
@media (max-width:620px){
  .ficha, .servicio{flex-basis:82vw}
}

/* ============================================================
   Rutas privadas
   Reusan la tarjeta .exp; lo que cambia es que no tienen foto
   propia (la portada se dibuja con el color de su categoría) y
   que el valor depende del tamaño del grupo.
   ============================================================ */
.privada-art{
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.28), transparent 58%),
    linear-gradient(140deg, var(--tono,#4b69a6), color-mix(in srgb, var(--tono,#4b69a6) 55%, #1d2136));
}
/* La tarjeta regular oscurece la foto para que se lea el texto;
   aquí el degradado ya es oscuro y ese velo sobra. */
.privada-art::after{background:linear-gradient(transparent 62%,rgba(20,22,18,.34))}
/* Con foto real (la que publica Bokun para esa ruta) se muestra la
   imagen y vuelve el velo oscuro estándar; sin foto sigue el bloque
   de color por categoría de arriba. */
.privada-art.con-foto{background:var(--linea)}
.privada-art.con-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.exp:hover .privada-art.con-foto img{transform:scale(1.05)}
.privada-art.con-foto::after{background:linear-gradient(transparent 52%,rgba(20,22,18,.62))}
.privada-sello{
  position:absolute; top:14px; right:14px; z-index:2; color:#fff;
  border:1.5px solid rgba(255,255,255,.7); border-radius:100px;
  padding:4px 11px; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.privada-sub{
  font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--rosa-osc); margin:-4px 0 8px;
}
.privada-barrios{font-size:.8rem; color:var(--gris); margin:-6px 0 14px; line-height:1.5}
.privada-barrios a{color:var(--gris); text-decoration:underline; text-underline-offset:2px}
.privada-barrios a:hover{color:var(--rosa-osc)}
.privada .precio i{display:block; font-style:normal; font-size:.72rem; color:var(--gris); margin-top:2px}

/* Tabla de tramos por número de pasajeros */
.tabla-tramos{overflow-x:auto; background:#fff; border:1px solid var(--linea); border-radius:var(--r-l)}
.tabla-tramos table{width:100%; border-collapse:collapse; min-width:520px; font-size:.9rem}
.tabla-tramos th, .tabla-tramos td{padding:13px 18px; text-align:right; border-bottom:1px solid var(--linea)}
.tabla-tramos th:first-child, .tabla-tramos td:first-child{text-align:left; font-weight:600}
.tabla-tramos thead th{
  background:var(--papel); font-size:.74rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gris); white-space:nowrap;
}
.tabla-tramos tbody tr:last-child td{border-bottom:0}
.tabla-tramos tbody tr:hover{background:var(--papel)}

/* El barrio-tag de un panorama ahora enlaza a la página del barrio */
a.barrio-tag{text-decoration:none}
a.barrio-tag:hover{color:var(--rosa-osc)}

/* ============================================================
   Grupos y Eventos — buscador de salones y cotizador
   ============================================================ */
.grid-espacios{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px}

.espacio{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:22px 24px 18px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.espacio:hover{box-shadow:var(--sombra)}
.espacio.elegido{border-color:var(--rosa); box-shadow:0 0 0 2px rgba(194,68,107,.16)}

/* Foto de cabecera de una tarjeta .espacio — la usan tanto la guía del
   vino como los salones de Grupos y Eventos: se sale del padding de la
   tarjeta para llegar a los bordes, con las esquinas de arriba
   redondeadas igual que la tarjeta. */
.lugar-vino-art, .espacio-art{
  margin:-22px -24px 2px; height:168px; overflow:hidden;
  border-radius:var(--r-l) var(--r-l) 0 0;
}
.lugar-vino-art img, .espacio-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.espacio:hover .lugar-vino-art img, .espacio:hover .espacio-art img{transform:scale(1.05)}

.espacio-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.espacio-cab h3{font-size:1.06rem; line-height:1.3; margin:6px 0 6px}
.espacio-tipo{
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul);
}
.espacio-dir{
  font-size:.83rem; color:var(--gris); display:flex; align-items:baseline;
  gap:5px; flex-wrap:wrap; line-height:1.45;
}
.espacio-dir svg{flex-shrink:0; position:relative; top:2px}
.espacio-dir a{color:var(--gris); text-decoration:underline; text-underline-offset:2px}
.espacio-dir a:hover{color:var(--rosa-osc)}

.espacio-sello{
  flex-shrink:0; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 10px; border-radius:100px;
  background:var(--papel); color:var(--gris); border:1px solid var(--linea);
}
.espacio-sello.on{background:#e7f0ea; color:#3c6149; border-color:#cfe1d5}

.espacio-notas{font-size:.87rem; color:var(--gris); line-height:1.55}

.espacio-cap{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.espacio-cap b{font-size:1.24rem; font-family:var(--titulo)}
.espacio-cap span{font-size:.83rem; color:var(--gris)}
.espacio-cap i{font-style:normal; font-size:.78rem; opacity:.85}

.espacio-etq{display:flex; flex-wrap:wrap; gap:6px}
.espacio-etq.servicios{margin-top:-4px}
.etq{
  font-size:.73rem; font-weight:600; padding:4px 10px; border-radius:100px;
  background:var(--azul-sup); color:var(--azul-osc);
}
.etq.tenue{background:var(--papel); color:var(--gris); border:1px solid var(--linea); font-weight:500}

.espacio-sel{
  margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:9px;
  font-size:.88rem; font-weight:600; cursor:pointer;
}
.espacio-sel input{width:17px; height:17px; accent-color:var(--rosa); cursor:pointer}

/* ---- Cotizador ---- */
.cotizador{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:30px 32px; display:flex; flex-direction:column; gap:22px;
}
.cot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.cotizador textarea{
  width:100%; font:inherit; font-size:.92rem; padding:11px 13px; resize:vertical;
  border:1.5px solid var(--linea); border-radius:var(--r-s); background:var(--papel);
}
.cotizador textarea:focus{outline:none; border-color:var(--azul); background:#fff}

.cot-servicios{border:0; padding:0; margin:0}
.cot-servicios legend{
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gris); margin-bottom:12px; padding:0;
}
.cot-checks{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.cot-check{display:flex; align-items:center; gap:9px; font-size:.9rem; cursor:pointer}
.cot-check input{width:17px; height:17px; accent-color:var(--rosa); cursor:pointer; flex-shrink:0}

.cot-resumen{background:var(--papel); border-radius:var(--r-m); padding:20px 24px}
.cot-resumen h3{font-size:1rem; margin-bottom:10px}
.cot-vacio{font-size:.88rem; color:var(--gris); line-height:1.55}
#cot-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
#cot-lista > li > b{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris); margin-bottom:6px;
}
#cot-lista ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px}
#cot-lista ul li{font-size:.9rem; padding-left:14px; position:relative; line-height:1.5}
#cot-lista ul li::before{content:"·"; position:absolute; left:2px; color:var(--rosa); font-weight:700}

@media (max-width:640px){
  .grid-espacios{grid-template-columns:1fr}
  .cotizador{padding:22px 20px}
  .espacio-cab{flex-direction:column; align-items:flex-start}
}

/* Lo que falta cargar en el directorio de espacios: el vacío se muestra,
   no se esconde, porque es la lista de trabajo del hub. */
.faltantes{
  margin-top:28px; background:var(--papel); border:1px dashed var(--linea);
  border-radius:var(--r-m); padding:24px 28px;
}
.faltantes h3{font-size:1rem; margin-bottom:12px}
.faltantes ul{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px}
.faltantes li{font-size:.89rem; color:var(--gris); line-height:1.55; padding-left:15px; position:relative}
.faltantes li::before{content:"·"; position:absolute; left:3px; color:var(--rosa); font-weight:700}
.faltantes li b{color:var(--tinta)}

/* Superficie y tabla de montajes: el dato duro del salón */
.espacio-m2{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:12px 0 0; border-top:1px solid var(--linea);
}
.espacio-m2 b{font-size:1.3rem; font-family:var(--titulo)}
.espacio-m2 span{font-size:.83rem; color:var(--gris)}
.espacio-m2 i{font-style:normal; opacity:.85}

table.montajes{width:100%; border-collapse:collapse; font-size:.87rem}
table.montajes caption{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris); padding-bottom:8px;
}
table.montajes th, table.montajes td{padding:7px 0; border-bottom:1px solid var(--linea); vertical-align:top}
table.montajes tbody tr:last-child th, table.montajes tbody tr:last-child td{border-bottom:0}
table.montajes th[scope=row]{text-align:left; font-weight:600}
table.montajes th small{display:block; font-weight:400; font-size:.76rem; color:var(--gris); margin-top:2px}
table.montajes td{text-align:right; font-weight:700; font-family:var(--titulo); white-space:nowrap; padding-left:10px}
table.montajes thead th{
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gris); text-align:right; padding-bottom:6px;
}
table.montajes thead th:first-child{text-align:left}
table.habitaciones td{font-size:.86rem}
.pie-tabla{font-size:.76rem; color:var(--gris); line-height:1.5; margin-top:-4px}

.hoteles-grupo{display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:20px}
@media (max-width:640px){ .hoteles-grupo{grid-template-columns:1fr} }

/* Lugares del vino — Guía de Enoturismo Urbano */
.lugar-etiquetas{
  flex-shrink:0; max-width:42%; text-align:right; font-size:.78rem; font-weight:700;
  color:var(--rosa-osc); line-height:1.35;
}
.lugar-maridaje{
  background:var(--rosa-sup); border-radius:var(--r-s); padding:12px 15px;
}
.lugar-maridaje b{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rosa-osc); margin-bottom:5px;
}
.lugar-maridaje p{font-size:.86rem; line-height:1.5; color:var(--tinta)}

.lugar-datos{margin:0; padding-top:14px; border-top:1px solid var(--linea); display:flex; flex-direction:column; gap:9px}
.lugar-datos > div{display:grid; grid-template-columns:74px 1fr; gap:10px; align-items:baseline}
.lugar-datos dt{
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gris);
}
.lugar-datos dd{margin:0; font-size:.83rem; line-height:1.5; color:var(--gris)}
.lugar-datos a{color:var(--rosa-osc); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}
@media (max-width:520px){
  .lugar-datos > div{grid-template-columns:1fr; gap:2px}
  .lugar-etiquetas{max-width:100%; text-align:left}
}

/* ============================================================
   Vinculación — contenedor del home y página completa
   ============================================================ */

/* Entrada desde el home: mismo patrón que el bloque de Grupos. */
.vinc-entrada{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--sombra);
}
.vinc-entrada-art{min-height:340px}
.vinc-entrada-txt{padding:44px 48px; display:flex; flex-direction:column; justify-content:center}
.vinc-entrada-txt h2{margin-bottom:12px}
.vinc-entrada-txt > p{color:var(--gris); line-height:1.62; margin-bottom:22px}

.vinc-entrada-lista{list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:13px}
.vinc-entrada-lista li{padding-left:17px; position:relative; line-height:1.5}
.vinc-entrada-lista li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--rosa);
}
.vinc-entrada-lista b{display:block; font-size:.93rem; margin-bottom:2px}
.vinc-entrada-lista span{font-size:.87rem; color:var(--gris); line-height:1.5}

/* Página */
.vinc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.vinc-grid.tres{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vinc-card{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:26px 28px; display:flex; flex-direction:column; gap:10px;
}
.vinc-card h3{font-size:1.04rem; line-height:1.3}
.vinc-card p{font-size:.9rem; color:var(--gris); line-height:1.6}
.vinc-cifras{margin-bottom:34px}
.vinc-cifras .cifra span{max-width:26ch; margin-inline:auto}
.vinc-texto{max-width:62ch; display:flex; flex-direction:column; gap:14px}
.vinc-texto p{color:var(--gris); font-size:1.02rem; line-height:1.65}

.vinc-hub{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:38px; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); padding:40px 44px;
}
.vinc-hub h2{margin:6px 0 12px}
.vinc-hub > div > p{color:var(--gris); line-height:1.62}
.vinc-hub-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.vinc-hub-lista li{
  display:flex; align-items:center; gap:11px; background:var(--papel);
  border-radius:var(--r-s); padding:13px 16px; font-weight:600; font-size:.93rem;
}
.vinc-hub-lista svg{color:var(--rosa); flex-shrink:0}

.vinc-pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}

@media (max-width:900px){
  .vinc-entrada, .vinc-hub{grid-template-columns:1fr}
  .vinc-entrada-art{min-height:200px; order:-1}
  .vinc-entrada-txt{padding:32px 26px}
  .vinc-hub{padding:30px 26px; gap:26px}
}

/* ============================================================
   El filtro oculta tarjetas con el atributo [hidden], pero las
   tarjetas declaran display:flex y ganan por especificidad al
   [hidden]{display:none} del navegador: quedaban a la vista aunque
   el contador ya las hubiera descontado. Esto lo zanja para todas.
   ============================================================ */
[hidden]{display:none !important}



/* La sección .barrios pinta su texto en blanco para el fondo oscuro, y eso
   se heredaba dentro de las tarjetas blancas: el título quedaba invisible. */
.barrios .vinc-card{color:var(--tinta)}
.barrios .tarjeta-barrio{color:var(--tinta)}

/* ---- Tarjeta de barrio (carrusel del home y de Vinculación) ----
   Tarjeta con bloque de imagen arriba. Hoy lleva una ilustración sobre un
   tono plano; cuando haya fotos del barrio se reemplaza el <img> y el
   resto de la ficha no cambia. */
.tarjeta-barrio{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column; color:var(--tinta);
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;
}
.tarjeta-barrio:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.carrusel .tarjeta-barrio{flex:0 0 clamp(240px,26%,292px); scroll-snap-align:start}
/* Las ilustraciones de barrio son láminas a color completas, no íconos:
   van a sangre, igual que en las fichas de las páginas de barrio. */
.tarjeta-barrio-art{position:relative; height:140px; overflow:hidden; background:var(--linea)}
.tarjeta-barrio-art img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.tarjeta-barrio:hover .tarjeta-barrio-art img{transform:scale(1.05)}
.tarjeta-barrio-art::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 58%,rgba(20,22,18,.28))}
.tarjeta-barrio-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
.tarjeta-barrio-body h3{font-size:1.02rem; line-height:1.3}
.tarjeta-barrio-body p{font-size:.88rem; color:var(--gris); line-height:1.55}
.tarjeta-barrio-body .acceso-link{margin-top:auto; padding-top:8px}

/* Distintivo opcional: hoy lo usan los 4 barrios foco de la presentación */
.tarjeta-barrio-sello{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; background:rgba(255,255,255,.94); color:var(--rosa-osc);
}

/* La sección va sobre fondo oscuro: el pie del carrusel tiene que leerse. */
.barrios .carrusel-pie .contador{color:rgba(255,255,255,.72)}
.barrios .carrusel-pie .barra{background:rgba(255,255,255,.18)}
.barrios .carrusel-pie .barra i{background:rgba(255,255,255,.85)}

/* ============================================================
   Ficha de actividad — mismo esquema que los catálogos:
   portada, cuerpo a dos columnas y barra lateral con tarifas.
   ============================================================ */
.ficha-modal{
  width:min(980px,94vw); max-height:90vh; padding:0; border:0;
  border-radius:var(--r-l); background:#fff; color:var(--tinta);
  overflow:visible; box-shadow:0 30px 90px -20px rgba(20,22,18,.5);
}
.ficha-modal::backdrop{background:rgba(20,22,18,.62); backdrop-filter:blur(3px)}
.ficha-cuerpo{max-height:90vh; overflow-y:auto; border-radius:var(--r-l)}
.ficha-cerrar{
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--tinta);
  display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.ficha-cerrar:hover{background:#fff}

.fd-hero{position:relative; height:250px; overflow:hidden; background:var(--linea)}
.fd-hero img{width:100%; height:100%; object-fit:cover}
.fd-hero.sin-foto{
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.24), transparent 58%),
    linear-gradient(140deg, var(--tono,#4b69a6), color-mix(in srgb, var(--tono,#4b69a6) 55%, #1d2136));
}
.fd-grad{position:absolute; inset:0; background:linear-gradient(transparent 32%,rgba(20,22,18,.82))}
.fd-titulo{position:absolute; left:0; right:0; bottom:0; padding:26px 32px; color:#fff}
.fd-titulo .eyebrow{color:#ffb6ca}
.fd-titulo .eyebrow::before{background:#ffb6ca}
.fd-titulo h2{color:#fff; font-size:1.7rem; line-height:1.2; margin:6px 0 8px}
.fd-meta{font-size:.86rem; color:rgba(255,255,255,.82)}

/* Dos columnas: a la izquierda la tarjeta de precios y datos seguida del
   contenido (acordeón y política de edades); a la derecha el calendario
   de reserva de Bokun. En móvil todo va en una columna, calendario al final. */
.fd-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:34px; padding:30px 32px 34px; align-items:start}
.fd-cuerpo.sin-reserva{grid-template-columns:minmax(0,1fr)}
.fd-izq{min-width:0}
.fd-izq .fd-principal{margin-top:22px}
.fd-principal h4{
  font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gris); margin:24px 0 10px;
}
.fd-principal h4:first-of-type{margin-top:0}
.fd-principal p{font-size:.95rem; line-height:1.65; margin-bottom:10px}

/* Acordeón de la ficha: cada grupo (experiencia, itinerario, incluye…)
   se abre al tocar su título; solo uno abierto a la vez. */
.fd-grupo{border-top:1px solid var(--linea)}
.fd-grupo:first-of-type{border-top:0}
.fd-grupo summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; cursor:pointer; list-style:none; user-select:none;
}
.fd-grupo summary::-webkit-details-marker{display:none}
.fd-grupo summary::marker{content:""; display:none}
.fd-grupo summary h4{flex:1 1 auto}
.fd-grupo summary h4{margin:0; color:var(--tinta)}
.fd-grupo summary svg{flex-shrink:0; color:var(--gris); transition:transform .2s ease}
.fd-grupo summary:hover h4{color:var(--rosa-osc)}
.fd-grupo[open] summary svg{transform:rotate(180deg)}
.fd-grupo[open] summary h4{color:var(--rosa-osc)}
.fd-grupo-cuerpo{padding:0 0 18px}
.fd-grupo-cuerpo > p:last-child{margin-bottom:0}
.fd-barrios{font-size:.88rem; color:var(--gris); margin-bottom:16px}
.fd-barrios b{color:var(--tinta); margin-right:6px}
.fd-barrios a{color:var(--rosa-osc); text-decoration:underline; text-underline-offset:2px}

.fd-ruta{list-style:none; padding:0; margin:0; border-left:2px solid var(--linea)}
.fd-ruta li{position:relative; padding:0 0 16px 20px}
.fd-ruta li::before{
  content:""; position:absolute; left:-6px; top:6px; width:10px; height:10px;
  border-radius:50%; background:var(--rosa); border:2px solid #fff;
}
.fd-ruta strong{display:block; font-size:.93rem}
.fd-ruta span{display:block; font-size:.86rem; color:var(--gris); line-height:1.5; margin-top:2px}

.fd-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.fd-lista li{position:relative; padding-left:24px; font-size:.92rem; line-height:1.5}
.fd-lista li::before{position:absolute; left:0; font-weight:700}
.fd-lista.si li::before{content:"✓"; color:#3c8158}
.fd-lista.no li::before{content:"×"; color:#b2455c; font-size:1.1em; line-height:1.2}
.fd-lista.item li::before{content:"·"; color:var(--rosa); font-size:1.4em; line-height:.9}

.fd-aviso{
  margin-top:22px; background:var(--papel); border-radius:var(--r-s);
  padding:14px 16px; font-size:.87rem; line-height:1.55; color:var(--gris);
}
.fd-aviso b{color:var(--tinta)}

.fd-side{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-m); padding:22px 24px;
}
.fd-precio{margin-bottom:16px}
.fd-precio b{display:block; font-size:1.85rem; font-family:var(--titulo); line-height:1.1; margin-top:4px}
.fd-precio p{font-size:.8rem; color:var(--gris); line-height:1.5; margin-top:6px}
.fd-precio.doble{display:flex; gap:26px}

.fd-matriz{width:100%; border-collapse:collapse; margin-bottom:18px; font-size:.88rem}
.fd-matriz th, .fd-matriz td{padding:8px 0; border-bottom:1px solid var(--linea); vertical-align:top}
.fd-matriz tr:last-child th, .fd-matriz tr:last-child td{border-bottom:0}
.fd-matriz th{text-align:left; font-weight:600; color:var(--gris)}
.fd-matriz td{text-align:right; font-weight:700; font-family:var(--titulo)}
.fd-matriz td small{display:block; font-family:var(--sans); font-weight:500; font-size:.72rem; color:var(--gris)}

.fd-dl{margin:0 0 18px; display:flex; flex-direction:column; gap:9px}
.fd-dl > div{display:flex; justify-content:space-between; gap:14px; font-size:.86rem; align-items:baseline}
.fd-dl dt{color:var(--gris); flex-shrink:0}
.fd-dl dd{margin:0; font-weight:600; text-align:right}

.fd-side .btn{width:100%; justify-content:center; margin-bottom:9px}
.fd-nota{font-size:.75rem; color:var(--gris); line-height:1.5; margin-top:12px}

@media (max-width:820px){
  .fd-cuerpo{grid-template-columns:1fr; gap:26px; padding:24px 22px 28px}
  .fd-side{position:static}
  .fd-hero{height:190px}
  .fd-titulo{padding:20px 22px}
  .fd-titulo h2{font-size:1.35rem}
}

/* En la tabla de tramos, aclarar si el valor es por grupo o por persona */
.tabla-tramos td small{display:block; font-weight:500; font-size:.72rem; color:var(--gris); margin-top:1px}

/* Calendario de reserva en línea (widget de Bokun): columna derecha de la ficha */
.fd-reserva{position:sticky; top:0; align-self:start; min-width:0}
@media (max-width:820px){
  .fd-reserva{position:static; margin-top:6px; padding-top:22px; border-top:1px solid var(--linea)}
}
.fd-reserva-intro{font-size:.88rem; color:var(--gris); margin-bottom:14px}
.fd-reserva .bokunWidget{min-height:120px}
.fd-reserva noscript p{font-size:.88rem; color:var(--gris); line-height:1.55}

/* Traslado ida y vuelta: un calendario por tramo, numerados. Es mucho
   más alto que la columna izquierda, así que no se queda pegado arriba. */
.fd-enlazada{position:static}
.fd-enlazada .fd-codigo{margin:0 0 18px}
.fd-tramos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.fd-tramo{scroll-margin-top:12px}
.fd-tramo-cab{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px}
.fd-tramo-cab b{display:block; font-family:var(--titulo); font-size:.98rem}
.fd-tramo-cab small{display:block; font-size:.8rem; color:var(--gris); line-height:1.45; margin-top:2px}
.fd-tramo-n{flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; font-size:.86rem; color:#fff; background:var(--rosa)}
.fd-tramo-ok{display:none; margin-left:auto; flex-shrink:0; font-size:.74rem; font-weight:700; color:var(--verde); background:#e8f0ea; border-radius:999px; padding:5px 10px}
.fd-tramo.en-carrito .fd-tramo-n{background:var(--verde)}
.fd-tramo.en-carrito .fd-tramo-ok{display:block}
.fd-tramo-solo{margin-top:16px; font-size:.84rem; color:var(--gris)}
.fd-tramo-solo button{font:inherit; font-weight:700; color:var(--azul-osc); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}

/* ============================================================
   Video de cabecera del home
   Cubre todo el hero. Va sobre la ilustración SVG, que queda de
   respaldo si el video no carga o si el sistema pide menos
   movimiento. El velo mantiene legible el texto blanco sobre
   cualquier fotograma.
   ============================================================ */
.hero{min-height:clamp(520px,74vh,760px); display:flex; align-items:center}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; pointer-events:none;
}
.hero-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(20,25,45,.78) 0%, rgba(20,25,45,.55) 42%, rgba(20,25,45,.18) 72%, transparent 100%),
    linear-gradient(to top, rgba(20,25,45,.55), transparent 46%);
}
/* La ilustración de respaldo se queda debajo del video. */
.hero .hero-art{z-index:0}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}
@media (max-width:720px){
  .hero{min-height:clamp(440px,68vh,560px)}
  /* En vertical el texto ocupa el centro: el velo tiene que ser parejo. */
  .hero-velo{background:linear-gradient(to top, rgba(20,25,45,.72), rgba(20,25,45,.42))}
}

/* Las tarjetas de Explora pasaron de ilustración SVG a foto: el recorte
   lo hace object-fit, igual que en el resto de las tarjetas del sitio. */
.acceso-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.acceso:hover .acceso-art img{transform:scale(1.05)}

/* Foto de Experiencias grupales, sobre la ilustración de respaldo */
.grupos-foto{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Foto de la entrada a Vinculación, sobre la ilustración de respaldo */
.vinc-entrada-art{position:relative}
.vinc-entrada-foto{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ============ COCINAS DEL MUNDO (Gastronomía Internacional) ============ */
.cocina{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cocina:hover{border-color:transparent; box-shadow:var(--sombra-alta); transform:translateY(-3px)}
/* En un carrusel (las "otras cocinas" de cada ficha) la tarjeta necesita
   ancho propio: como ítem flexible sin base se aplastaba a unos píxeles. */
.carrusel .cocina{flex:0 0 clamp(250px,27%,320px); scroll-snap-align:start; align-self:stretch}

/* El espacio de imagen: la foto se monta encima del degradado de la
   región, así la tarjeta se ve completa aunque todavía no exista. */
.cocina-art{
  position:relative; aspect-ratio:16/9; display:flex; flex-direction:column;
  justify-content:flex-end; padding:16px 20px; color:#fff;
}
.cocina-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cocina-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 30%,rgba(18,20,16,.72));
}
.cocina-art > *{position:relative; z-index:2}
.cocina-region{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.85); margin-bottom:2px;
}
.cocina-art h3{font-size:1.12rem; line-height:1.2; color:#fff}

.cocina-body{padding:16px 20px 18px; display:flex; flex-direction:column; gap:11px}
.cocina-sub{font-size:.82rem; color:var(--gris); margin:0}
.cocina-body .espacio-etq{margin:0}
.cocina-donde{
  font-size:.8rem; line-height:1.5; color:var(--gris); margin:0;
  padding-top:11px; border-top:1px solid var(--linea);
}
.cocina-donde a{color:var(--rosa); font-weight:600}
.cocina-donde a:hover{text-decoration:underline}
.cocina-body .acceso-link{margin-top:auto; padding-top:2px}

/* ============ PÁGINA DE UNA COCINA (comida-<país>.html) ============ */
.grid-platos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px;
  margin-top:32px;
}
.plato{
  display:flex; align-items:center; gap:14px; background:#fff;
  border:1px solid var(--linea); border-radius:var(--r-m); padding:18px 20px;
  font-weight:600; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plato:hover{border-color:transparent; box-shadow:var(--sombra); transform:translateY(-2px)}
.plato-ico{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--rosa-sup); color:var(--rosa-osc); display:grid; place-items:center;
}
@media (max-width:620px){
  .grid-platos{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
  .plato{padding:14px 16px; font-size:.92rem}
}

/* ============ REGISTRO HUB (formulario embebido) ============ */
.form-hub{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:8px; box-shadow:var(--sombra); overflow:hidden;
}
.form-hub iframe{
  display:block; width:100%; height:min(1400px, 168vh); min-height:900px;
  border:0; border-radius:var(--r-m);
}
.form-hub-nota{
  margin-top:18px; text-align:center; font-size:.86rem; color:var(--gris);
}
.form-hub-nota a{color:var(--rosa); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ============ REGISTRO HUB (formulario propio) ============ */
.wrap-angosto{max-width:840px}

.hub-bloque{border:0; padding:0; margin:0}
.hub-bloque + .hub-bloque{border-top:1px solid var(--linea); padding-top:24px}
.hub-bloque > legend{
  font-family:var(--titulo); font-size:1.05rem; font-weight:800;
  color:var(--tinta); padding:0; margin-bottom:16px;
}
.hub-ayuda{font-size:.84rem; color:var(--gris); line-height:1.55; margin:-6px 0 16px}
.req{color:var(--rosa)}

/* La trampa antirrobots: fuera de la vista, pero no con display:none,
   porque varios bots ignoran los campos ocultos de esa manera. */
.hub-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.hub-acepto{align-items:flex-start; font-size:.88rem; line-height:1.5}
.hub-acepto input{margin-top:2px}

.hub-error{
  background:var(--rosa-sup); color:var(--rosa-osc); border-radius:var(--r-s);
  padding:12px 16px; font-size:.88rem; font-weight:600; margin:0;
}

.hub-ok{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:44px 40px; text-align:center; box-shadow:var(--sombra);
}
.hub-ok h2{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:10px}
.hub-ok p{color:var(--gris); max-width:48ch; margin:0 auto 22px}
.hub-ok a{color:var(--rosa)}
.hub-ok .btn{color:inherit}

/* Cláusulas de autorización: bloque legal, se lee antes de aceptar. */
.hub-clausulas{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-m);
  padding:20px 24px 20px 12px; margin-bottom:18px;
  max-height:290px; overflow-y:auto;
}
.hub-clausulas ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:14px}
.hub-clausulas li{font-size:.86rem; line-height:1.6; color:var(--tinta)}
.hub-clausulas a{color:var(--rosa); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* Foto de cabecera: va bajo el velo para que el título se lea igual. */
.cabecera-foto{position:absolute; inset:0; overflow:hidden}
.cabecera-foto img{width:100%; height:100%; object-fit:cover; display:block}
.cabecera-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(18,20,16,.82) 0%,rgba(18,20,16,.62) 48%,rgba(18,20,16,.35) 100%);
}

/* Con foto la cabecera ocupa el 80% del alto de pantalla, para que la
   imagen se note; el contenido se ancla abajo, como un hero. */
.cabecera.con-foto{min-height:80vh; display:flex; align-items:flex-end}
.cabecera.con-foto .wrap{width:100%; padding-top:110px; padding-bottom:64px}
@media (max-width:820px){
  .cabecera.con-foto{min-height:60vh}
  .cabecera.con-foto .wrap{padding-top:66px; padding-bottom:44px}
}

/* Los panoramas también viajan en carrusel: mismo ancho de tarjeta que
   en la grilla, para que no cambien de tamaño según dónde aparezcan. */
.carrusel .pano{flex:0 0 clamp(250px,30%,320px); scroll-snap-align:start; align-self:stretch}

/* Tarjeta a la que apunta un enlace compartido, cuando no tiene ficha
   que abrir: un destello para ubicarla entre las demás. */
.destacada{animation:destacar 2.6s ease}
@keyframes destacar{
  0%, 100%{box-shadow:var(--sombra)}
  12%, 62%{box-shadow:0 0 0 4px var(--rosa), var(--sombra-alta)}
}
@media (prefers-reduced-motion:reduce){
  .destacada{animation:none; box-shadow:0 0 0 4px var(--rosa), var(--sombra-alta)}
}

/* ---- Traslados: tarjetas de tipo de servicio ---- */
.traslados-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.carrusel .traslado{flex:0 0 clamp(260px,31%,360px); scroll-snap-align:start; align-self:stretch}
.traslado{background:#fff; border-radius:var(--r-l); padding:32px 28px; box-shadow:var(--sombra); transition:transform .22s ease, box-shadow .22s ease}
.traslado:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.traslado-icono{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:var(--rosa-sup); color:var(--rosa);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.traslado h3{font-size:1.12rem; margin-bottom:8px}
.traslado p{color:var(--gris); font-size:.9rem; line-height:1.6}
@media (max-width:620px){
  .traslados-grid{grid-template-columns:1fr}
  .carrusel .cocina{flex-basis:82vw}
}

/* Restaurantes imperdibles de cada cocina (comida-<país>.html): seis
   tarjetas en carrusel, como el resto de las secciones. La vacía es el
   molde: se ve dónde va cada restaurante hasta que se cargue en
   cocinas.json. */
.carrusel .resto{flex:0 0 clamp(250px,30%,320px); scroll-snap-align:start; align-self:stretch}
.resto{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease;
}
.resto:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.resto-art{position:relative; aspect-ratio:16/10; overflow:hidden}
.resto-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.resto-num{
  position:absolute; top:12px; left:12px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:#fff; color:var(--tinta); display:grid; place-items:center; font-size:.78rem; font-weight:800;
}
.resto-body{padding:16px 20px 18px; display:flex; flex-direction:column; gap:7px}
.resto-body h3{font-size:1.05rem; line-height:1.25}
.resto-meta{font-size:.82rem; color:var(--gris); margin:0}
.resto-pedir{font-size:.88rem; line-height:1.5; margin:0}
.resto-pedir b{color:var(--rosa); font-weight:700}
.resto-body .acceso-link{margin-top:auto; padding-top:6px}
.resto-vacio{border:1.5px dashed var(--linea); box-shadow:none}
.resto-vacio:hover{transform:none; box-shadow:none}
.resto-vacio .resto-art{background:var(--papel); display:grid; place-items:center}
.resto-vacio .resto-ico{color:var(--linea); transform:scale(2.4)}
.resto-vacio h3, .resto-vacio .resto-pedir{color:var(--gris)}
@media (max-width:620px){ .carrusel .resto{flex-basis:82vw} }

/* Tarjeta horizontal (Gastronomía Internacional, en vez del carrusel
   de imperdibles): foto a la izquierda, ficha del país a la derecha.
   Reusa .cocina-sub, .cocina-donde y .espacio-etq/.etq de la tarjeta
   vertical de TarjetaCocina, para que ambas se vean parte de la
   misma familia. */
.cocina-destacada{
  display:grid; grid-template-columns:minmax(260px,38%) 1fr;
  background:#fff; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sombra);
  margin-top:32px;
}
.cocina-destacada-art{position:relative; min-height:280px}
.cocina-destacada-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cocina-destacada-region{
  position:absolute; top:16px; left:16px; z-index:2; color:#fff;
  background:rgba(20,22,18,.5); backdrop-filter:blur(4px);
  padding:5px 13px; border-radius:100px; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.cocina-destacada-body{padding:34px 38px; display:flex; flex-direction:column; gap:12px}
.cocina-destacada-body h3{font-size:1.6rem}
.cocina-destacada-body > p{color:var(--gris); font-size:.96rem; line-height:1.6}
.cocina-destacada-body .cocina-sub{font-size:.9rem; font-weight:700; color:var(--rosa-osc); margin:-6px 0 0}
@media (max-width:720px){
  .cocina-destacada{grid-template-columns:1fr}
  .cocina-destacada-art{min-height:200px}
  .cocina-destacada-body{padding:26px 24px}
}

/* ---------- Documentos legales ----------
   Términos, privacidad, cookies y aviso legal comparten esta hoja: una
   sola columna angosta, porque son textos para leer, no para escanear.
   El ancho se limita en caracteres (no en píxeles) para que la línea
   siga siendo cómoda si cambia el cuerpo tipográfico. */
.doc-legal{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:52px 56px; max-width:76ch;
}
/* El margen entre párrafos se suma al medio-interlineado que cada caja
   lleva arriba y abajo, así que un margen de 8px se ve como 17px: el
   doble del hueco entre líneas de un mismo párrafo, y el texto se lee
   como bloques sueltos. Con 2-3px el salto queda apenas por sobre el
   interlineado, que es lo que corresponde a un documento corrido. */
.doc-entrada{color:var(--tinta); font-size:.98rem; line-height:1.5; margin-bottom:3px}
.doc-entrada:last-of-type{margin-bottom:0}

/* Interlineado y separaciones más cerradas que en el resto del sitio: son
   textos corridos y largos, y el aire de las páginas comerciales aquí los
   estira de más. Las frases sueltas del original (varias secciones son de
   una línea) se leen mejor juntas que espaciadas. */
.doc-bloque{margin-top:26px}
.doc-bloque h2{font-size:1.18rem; line-height:1.3; margin-bottom:8px}
.doc-bloque h3{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rosa-osc); margin:16px 0 6px;
}
.doc-bloque p{color:var(--gris); font-size:.94rem; line-height:1.5; margin-bottom:2px}
.doc-bloque p:last-child{margin-bottom:0}
.doc-bloque ul{list-style:none; margin:4px 0 6px; padding:0; display:grid; gap:1px}
.doc-bloque ul:last-child{margin-bottom:0}
.doc-bloque li{
  color:var(--gris); font-size:.94rem; line-height:1.5;
  padding-left:18px; position:relative;
}
.doc-bloque li::before{content:"·"; position:absolute; left:6px; color:var(--rosa); font-weight:700}

.doc-pie{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--linea);
  color:var(--gris); font-size:.85rem; line-height:1.6;
}
.doc-pie a{color:var(--rosa-osc); font-weight:600}

/* Los cuatro documentos se citan entre sí, así que conviene poder saltar
   de uno a otro sin volver al pie de página. */
.doc-otros{
  margin-top:34px; max-width:76ch; display:flex; align-items:baseline;
  gap:8px 18px; flex-wrap:wrap;
}
.doc-otros > span{
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--gris);
}
.doc-otros ul{list-style:none; margin:0; padding:0; display:flex; gap:8px 20px; flex-wrap:wrap}
.doc-otros a{color:var(--tinta); font-size:.9rem; font-weight:600; border-bottom:1px solid var(--linea)}
.doc-otros a:hover{color:var(--rosa); border-bottom-color:var(--rosa)}

@media (max-width:720px){
  .doc-legal{padding:32px 24px; border-radius:var(--r-m)}
  .doc-bloque{margin-top:30px}
}

/* ---------- Cotizador de traslados ----------
   Caja de reserva de "Cómo te movemos". La estructura sigue la de
   Transvip: pestañas por tipo de viaje arriba, el par origen-destino en
   una fila con el botón de invertir al medio, y el resto de los datos
   debajo. Los campos reusan el mismo trazo que los filtros (.campo-f)
   para que se vean parte del mismo sistema. */
.reserva-traslado{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl);
  box-shadow:var(--sombra); padding:26px 28px; margin-bottom:34px;
  display:flex; flex-direction:column; gap:18px;
}

.reserva-tabs{display:flex; gap:6px; background:var(--papel); border-radius:var(--r-m); padding:5px; flex-wrap:wrap}
.reserva-tabs button{
  flex:1 1 150px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:var(--r-s); font-size:.88rem; font-weight:700;
  color:var(--gris); background:transparent; transition:background .2s ease, color .2s ease;
}
.reserva-tabs button:hover{color:var(--tinta)}
.reserva-tabs button[aria-selected="true"]{background:#fff; color:var(--rosa); box-shadow:var(--sombra)}

/* El botón de invertir se alinea con la caja del input, no con la
   etiqueta, por eso el margen de arriba. */
.reserva-campos{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start}
.reserva-campos.secundarios{grid-template-columns:repeat(4,1fr)}
.campo-r label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gris); margin-bottom:5px}
.campo-r input, .campo-r select, .campo-r textarea{
  width:100%; padding:11px 14px; border-radius:var(--r-s); border:1.5px solid var(--linea);
  background:#fff; font-family:var(--sans); font-size:.9rem; font-weight:500; color:var(--tinta); outline:none;
}
.campo-r textarea{resize:vertical; min-height:88px; line-height:1.5}
.campo-r input:focus, .campo-r select:focus, .campo-r textarea:focus{border-color:var(--rosa)}
/* Los datos de contacto van separados del viaje por una línea. */
.reserva-contacto{border-top:1px solid var(--linea); padding-top:18px}
/* El acuse de recibo ocupa el lugar del formulario. */
#tg-ok{margin-bottom:34px}
/* El extremo que es el aeropuerto no se escribe: se muestra como dato. */
.campo-r .campo-fijo{
  padding:11px 14px; border-radius:var(--r-s); border:1.5px dashed var(--linea);
  background:var(--papel); font-size:.9rem; font-weight:600; color:var(--gris);
}
.reserva-invertir{
  margin-top:23px; width:38px; height:38px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--linea); background:#fff; color:var(--gris);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.reserva-invertir:hover{border-color:var(--rosa); color:var(--rosa)}

.reserva-vuelta{display:flex; align-items:center; gap:9px; font-size:.9rem; font-weight:600; cursor:pointer}
.reserva-vuelta input{width:17px; height:17px; accent-color:var(--rosa)}

.reserva-pie{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--linea); padding-top:18px;
}
.reserva-nota{font-size:.84rem; color:var(--gris); line-height:1.55; max-width:46ch; margin:0}

@media (max-width:860px){
  .reserva-campos.secundarios{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .reserva-traslado{padding:20px; border-radius:var(--r-l)}
  .reserva-campos{grid-template-columns:1fr}
  .reserva-campos.secundarios{grid-template-columns:1fr}
  .reserva-invertir{margin:0 auto}
  .reserva-tabs button{flex:1 1 100%}
  .reserva-pie .btn{width:100%}
}

/* Varias cocinas destacadas apiladas: aire entre una y otra. */
.cocina-destacada + .cocina-destacada{margin-top:22px}

/* Crédito de foto con licencia que exige nombrar al autor (CC BY-SA). */
.foto-credito{
  position:absolute; right:10px; bottom:8px; z-index:2;
  font-size:.62rem; color:rgba(255,255,255,.85); background:rgba(20,22,18,.55);
  padding:3px 8px; border-radius:100px; letter-spacing:.02em;
}

/* ---------- Completa tu viaje (cross-sell en la ficha) ----------
   Otras experiencias para sumar al mismo carrito de Bokun y los
   descuentos por nivel. El código de cada nivel se destapa desde
   sitio.js según cuántos productos lleve el carrito. */
.fd-completa{margin-top:26px; padding:20px 20px 18px; background:var(--azul-sup); border-radius:var(--r-m)}
.fd-completa h4{font-size:1.02rem; margin-bottom:6px}
.fd-completa>p{font-size:.86rem; color:var(--gris); line-height:1.55}
.fd-niveles{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.fd-niveles li{background:#fff; border:1px solid var(--linea); border-radius:var(--r-s); padding:10px 8px; text-align:center; transition:border-color .2s, box-shadow .2s}
.fd-niveles li b{display:block; font-family:var(--titulo); font-size:1.25rem; color:var(--azul-osc); line-height:1.1}
.fd-niveles li span{display:block; font-size:.72rem; color:var(--gris); margin-top:3px; line-height:1.3}
.fd-niveles li.logrado{border-color:var(--verde); box-shadow:0 0 0 2px rgba(79,122,94,.18)}
.fd-niveles li.logrado b{color:var(--verde)}
.fd-nivel-estado{font-size:.84rem; color:var(--tinta); line-height:1.5; margin-top:14px}
.fd-codigo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px; background:#fff; border:1px dashed var(--verde); border-radius:var(--r-s)}
.fd-codigo span{font-size:.78rem; color:var(--gris)}
.fd-codigo b{font-family:var(--titulo); font-size:1.15rem; letter-spacing:.06em; color:var(--verde)}
.fd-codigo button{margin-left:auto; font:inherit; font-size:.78rem; font-weight:700; color:var(--azul-osc); background:var(--azul-sup); border:0; border-radius:999px; padding:6px 12px; cursor:pointer}
.fd-codigo button:hover{background:#dbe4f2}
.fd-sugeridas{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.fd-sugeridas a{display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r-s); padding:8px; text-decoration:none; color:var(--tinta); transition:box-shadow .2s}
.fd-sugeridas a:hover{box-shadow:var(--sombra)}
.fd-sugeridas img{width:64px; height:48px; object-fit:cover; border-radius:6px; flex:none}
.fd-sug-txt{display:flex; flex-direction:column; min-width:0}
.fd-sug-txt strong{font-size:.88rem; line-height:1.3}
.fd-sug-txt small{font-size:.76rem; color:var(--gris); margin-top:2px}
@media (max-width:480px){ .fd-niveles{grid-template-columns:1fr 1fr 1fr; gap:6px} .fd-niveles li b{font-size:1.05rem} }

/* ---------------------------------------------------------------------------
   Pantallas de reserva propias (.rsv)
   ---------------------------------------------------------------------------
   Reemplazan al calendario incrustado de Bokun en la columna derecha de la
   ficha. Reusan el trazo de .reserva-traslado y .campo-r para que se vean parte
   del mismo sistema y no de un formulario pegado. */
.rsv{display:flex; flex-direction:column; gap:18px}
.rsv h4{font-size:1.05rem}
.rsv-intro{font-size:.88rem; color:var(--gris); margin:0}
.rsv-paso{display:flex; flex-direction:column; gap:16px}
.rsv-rotulo{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gris);
}

/* Mientras llega la disponibilidad. El punto late para que se vea que algo
   pasa: la primera respuesta del middleware puede tardar un segundo. */
.rsv-cargando{display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--gris); font-weight:600}
.rsv-punto{width:9px; height:9px; border-radius:50%; background:var(--rosa); animation:rsv-late 1.1s ease-in-out infinite}
@keyframes rsv-late{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rsv-punto{animation:none}}

/* Calendario */
.rsv-cal{display:flex; flex-direction:column; gap:10px}
.rsv-mes{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rsv-mes strong{font-size:.98rem; text-transform:capitalize; letter-spacing:-.01em}
.rsv-mes button{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--linea);
  background:#fff; display:flex; align-items:center; justify-content:center; color:var(--tinta);
  transition:border-color .18s ease;
}
.rsv-mes button:hover:not(:disabled){border-color:var(--tinta)}
.rsv-mes button:disabled{border-style:dashed; color:#a9ada6; cursor:not-allowed}
.rsv-dias-cab,.rsv-dias{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.rsv-dias-cab span{text-align:center; font-size:.63rem; font-weight:700; letter-spacing:.1em; color:var(--gris)}
.rsv-dia{
  height:44px; border-radius:12px; border:1.5px solid var(--linea); background:#fff;
  font-size:.92rem; font-weight:700; color:var(--tinta);
  transition:border-color .15s ease, background .15s ease;
}
.rsv-dia:hover:not(:disabled){border-color:var(--rosa)}
.rsv-dia-off{background:#f1efea; border-style:dashed; border-color:#cfccc4; color:var(--gris); font-weight:600; cursor:not-allowed}
.rsv-dia-on,.rsv-dia-on:hover{background:var(--rosa); border-color:var(--rosa); color:#fff; box-shadow:0 8px 18px -8px rgba(34,36,31,.45)}
.rsv-leyenda{display:flex; flex-wrap:wrap; gap:14px; margin:0; font-size:.72rem; font-weight:600; color:var(--gris)}
.rsv-leyenda span{display:inline-flex; align-items:center; gap:6px}
.rsv-leyenda i{width:12px; height:12px; border-radius:4px; display:inline-block}
.rsv-m-libre{background:#fff; border:1.5px solid var(--linea)}
.rsv-m-cerrado{background:#f1efea; border:1.5px dashed #cfccc4}
.rsv-m-elegido{background:var(--rosa)}

.rsv-48h{margin:0; font-size:.82rem; line-height:1.55; color:var(--gris); background:var(--papel); border-radius:var(--r-m); padding:12px 14px}
.rsv-48h a{font-weight:700; color:var(--rosa); text-decoration:underline}

/* Horarios */
.rsv-horarios{display:flex; flex-direction:column; gap:9px}
.rsv-horarios > div{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.rsv-hora{
  min-height:58px; border-radius:var(--r-m); border:1.5px solid var(--linea); background:#fff;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  padding:10px 15px; color:var(--tinta); transition:border-color .15s ease;
}
.rsv-hora strong{font-size:.9rem; font-weight:700}
.rsv-hora span{font-size:.78rem; font-weight:600; color:var(--gris)}
.rsv-hora:hover{border-color:var(--rosa)}
.rsv-hora-on,.rsv-hora-on:hover{background:var(--rosa); border-color:var(--rosa); color:#fff}
.rsv-hora-on span{color:rgba(255,255,255,.85)}

/* Pasajeros */
.rsv-pax{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--linea); padding-top:16px}
.rsv-pax-fila{display:flex; align-items:center; justify-content:space-between; gap:14px}
.rsv-pax-txt{display:flex; flex-direction:column; gap:1px}
.rsv-pax-txt strong{font-size:.92rem; font-weight:700}
.rsv-pax-txt small{font-size:.78rem; color:var(--gris); font-weight:500}
.rsv-pax-mando{display:flex; align-items:center; gap:4px}
.rsv-pax-mando button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--linea); background:#fff;
  font-size:1.15rem; font-weight:700; color:var(--tinta); transition:border-color .18s ease;
}
.rsv-pax-mando button:hover{border-color:var(--rosa)}
.rsv-pax-mando input{
  width:52px; height:44px; text-align:center; border:1.5px solid var(--linea); border-radius:var(--r-s);
  font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--tinta); background:#fff;
}
.rsv-pax-mando input:focus{border-color:var(--rosa); outline:none}

/* Datos del pasajero */
.rsv-volver{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; color:var(--rosa);
}
.rsv-volver:hover{text-decoration:underline}
.rsv-elegido{margin:0; font-size:.92rem; font-weight:700; background:var(--papel); border-radius:var(--r-m); padding:12px 14px}
.rsv-campos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.rsv-campo{display:flex; flex-direction:column; gap:5px}
.rsv-campo-ancho{grid-column:1/-1}
.rsv-campo > span{font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gris)}
.rsv-campo input{
  width:100%; box-sizing:border-box; padding:11px 14px; border-radius:var(--r-s);
  border:1.5px solid var(--linea); background:#fff; font-family:var(--sans);
  font-size:.9rem; font-weight:500; color:var(--tinta); outline:none;
}
.rsv-campo input:focus{border-color:var(--rosa)}
.rsv-campo input.rsv-mal{border-color:var(--rosa-osc); background:var(--rosa-sup)}
.rsv-campo small{font-size:.76rem; color:var(--gris); line-height:1.45}
@media (max-width:620px){.rsv-campos{grid-template-columns:1fr}}

/* Total y pago */
.rsv-pie{border-top:1px solid var(--linea); padding-top:16px; display:flex; flex-direction:column; gap:14px}
.rsv-total{display:flex; flex-direction:column; gap:2px}
.rsv-total strong{font-size:1.75rem; font-weight:900; letter-spacing:-.03em; line-height:1.05}
.rsv-total small{font-size:.8rem; color:var(--gris); font-weight:500}
.rsv-acciones{display:flex; flex-direction:column; gap:12px}
.rsv-acciones > .btn{width:100%}
.rsv-acciones > .btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.rsv-medios{display:flex; flex-direction:column; gap:9px}
.rsv-medios > div{display:flex; flex-direction:column; gap:9px}
/* Los botones de pago llevan los colores de cada pasarela, no los del sitio:
   quien va a pagar reconoce la marca antes de apretar, y eso es justamente lo
   que da confianza en el último paso. */
.rsv-medio{
  width:100%; flex-direction:column; align-items:center; gap:3px;
  padding:12px 18px; height:auto; white-space:normal; text-align:center;
  border:none;
}
.rsv-medio strong{font-size:.94rem; font-weight:700}
.rsv-medio small{font-size:.76rem; font-weight:500; opacity:.9}
.rsv-medio:disabled{opacity:.6; cursor:progress; transform:none}

/* El amarillo y el azul marino son los de PayPal. */
.rsv-medio-paypal{background:#ffc439; color:#003087}
.rsv-medio-paypal:hover:not(:disabled){background:#f2b630}

/* El azul de Mercado Pago es #009ee3, pero con texto blanco da 2,6:1 de
   contraste y el mínimo legible es 4,5:1. Oscurecido lo justo llega a 4,6:1 y
   sigue leyéndose como su azul: antes que una marca exacta está que alguien
   con poca visión pueda leer cuánto va a pagar. */
.rsv-medio-mercadopago{background:#007eb5; color:#fff}
.rsv-medio-mercadopago:hover:not(:disabled){background:#006d9d}

/* El nombre de la pasarela, en dos trozos como en cada marca. */
.rsv-marca{
  display:flex; align-items:baseline; gap:.14em;
  font-size:1.06rem; font-weight:800; letter-spacing:-.02em; line-height:1;
  font-style:italic; margin-bottom:1px;
}
/* Centrado y no sobre la línea base: el isotipo mide 36 px contra un texto de
   17, y alineados por la base quedaba colgando bajo el nombre. */
.rsv-marca-mercadopago{
  font-style:normal; font-weight:700; letter-spacing:-.01em;
  gap:.3em; align-items:center;
}
/* Tamaño por CSS además del atributo: hay reglas en el sitio que le ponen
   ancho a las imágenes y dejaban el isotipo en cero. */
.rsv-iso{width:36px; height:36px; flex:none; display:block}
.rsv-medio-paypal .rsv-marca-a{color:#003087}
.rsv-medio-paypal .rsv-marca-b{color:#0070e0}
.rsv-medio-mercadopago .rsv-marca-a,
.rsv-medio-mercadopago .rsv-marca-b{color:#fff}
.rsv-medio-mercadopago .rsv-marca-b{font-weight:400}

/* La línea de compra segura, bajo los botones. */
.rsv-seguro{
  display:flex; align-items:flex-start; justify-content:center; gap:6px;
  margin:0; font-size:.78rem; font-weight:600; line-height:1.45;
  color:var(--verde, #1d7a4c); text-align:left;
}
/* El candado va con la primera línea: en el teléfono el texto ocupa tres y
   centrado quedaba flotando junto a la del medio. */
.rsv-seguro svg{width:14px; height:14px; flex:none; margin-top:1px}
.rsv-letra-chica{margin:0; font-size:.76rem; color:var(--gris); text-align:center; line-height:1.5}
.rsv-error{
  margin:0; font-size:.86rem; font-weight:600; line-height:1.5; color:var(--rosa-osc);
  background:var(--rosa-sup); border-radius:var(--r-m); padding:11px 14px;
}

/* ---------------------------------------------------------------------------
   La vuelta del pago (/pago/listo y compañía)
   --------------------------------------------------------------------------- */
.pago-wrap{padding:38px 24px 60px}
.pago-caja{
  max-width:620px; margin:0 auto; background:#fff; border:1px solid var(--linea);
  border-radius:var(--r-xl); box-shadow:var(--sombra); padding:30px 32px;
  display:flex; flex-direction:column; gap:20px;
}
.pago-caja.pago-ok{box-shadow:var(--sombra-alta); border-color:var(--verde)}
.pago-estado{margin:0; font-size:1rem; line-height:1.6; font-weight:600}
.pago-datos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; padding:20px 0 0; border-top:1px solid var(--linea)}
.pago-datos > div{display:flex; flex-direction:column; gap:3px; min-width:0}
.pago-datos dt{font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gris)}
.pago-datos dd{margin:0; font-size:.95rem; font-weight:700; word-break:break-word}
.pago-datos > div:first-child dd{font-size:1.3rem; letter-spacing:-.02em; color:var(--rosa)}
.pago-botones{display:flex; gap:10px; flex-wrap:wrap}
.pago-botones .btn{flex:1 1 180px}
.pago-letra-chica{margin:0; font-size:.82rem; color:var(--gris); line-height:1.55}
@media (max-width:600px){
  .pago-caja{padding:24px 20px; border-radius:var(--r-l)}
  .pago-datos{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Capa PWA: el cartel de "hay una versión nueva" y el de instalar
   ---------------------------------------------------------------------------
   Lo crea public/assets/js/pwa.js y aparece poco: cuando hay una versión nueva
   esperando, o cuando el navegador avisa que el sitio se puede instalar.

   Abajo a la IZQUIERDA porque abajo a la derecha vive el botón flotante del
   asesor por chat (.wa, en home.css, con z-index 80). Este va por debajo de
   ese y por encima del contenido. */
.pwa-cartel{
  position:fixed; left:20px; bottom:20px; z-index:79;
  max-width:min(380px, calc(100vw - 40px));
  display:flex; align-items:center; gap:12px;
  padding:13px 12px 13px 18px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  box-shadow:var(--sombra-alta, 0 18px 40px -12px rgba(0,0,0,.28));
  animation:pwa-entra .28s ease both;
}
.pwa-cartel p{margin:0; font-size:.88rem; line-height:1.45; font-weight:600; color:var(--tinta)}
.pwa-cartel-si{
  flex:0 0 auto; cursor:pointer;
  padding:9px 15px; border:0; border-radius:999px;
  background:var(--rosa); color:#fff;
  font:inherit; font-size:.82rem; font-weight:700; letter-spacing:.01em;
  transition:background .2s;
}
.pwa-cartel-si:hover{background:var(--rosa-osc)}
.pwa-cartel-no{
  flex:0 0 auto; cursor:pointer;
  width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--gris);
  font:inherit; font-size:1.15rem; line-height:1;
}
.pwa-cartel-no:hover{background:var(--linea); color:var(--tinta)}
@keyframes pwa-entra{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.pwa-cartel{animation:none}}
@media (max-width:600px){
  /* En el celular ocupa el ancho y se sienta sobre el botón del chat. */
  .pwa-cartel{left:12px; right:12px; bottom:86px; max-width:none}
}
@media print{.pwa-cartel{display:none}}