:root {
  --moss-deep: #1F3B2A;
  --moss: #2E7D4F;
  --moss-soft: #7FBF97;
  --moss-tint: #EAF4EC;
  --neon-green: #4CB161;
  --amber: #E8993D;
  --cream: #FAF9F4;
  --charcoal: #201F1B;
  --stone: #E4E0D4;
  --stone-line: #D7D2C2;
  --white: #FFFFFF;
  /* Portada nocturna (pantalla de inicio) */
  --noche: #14261B;
  --noche-alto: #1D3325;
  --borde-noche: #2C4634;
  --ivory: #F2EFE4;
  --verde-claro: #7FBF97;
  --verde-apagado: #93A996;
  --ambar: #E8993D;
  --ambar-oscuro: #8A5A2B; /* mismo tono, con contraste suficiente sobre blanco */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(63, 74, 50, 0.08);

  /* Sistema de movimiento: dos curvas, tres duraciones — nada de "ease"
     genérico suelto. --snap para lo que el dedo empuja (transform en el
     toque); --glide para lo que el ojo sigue (color, opacity, sombra). */
  --snap: cubic-bezier(.32, .72, 0, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--moss-deep);
}

#app {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;   /* "clip" no crea una zona de desplazamiento propia: así la barra superior se queda fija al bajar */
}

/* Header */
/* Encabezado de sección: mismo verde noche que la portada, para que la
   app se sienta una sola pieza y no dos diseños distintos. */
.app-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--noche);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header img.mini-logo {
  height: 24px;
  width: auto;
}

.app-header .header-title {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--ivory);
  letter-spacing: 0.02em;
}

/* Star divider - signature element */
.star-divider {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 6px 0 16px;
}
.star-divider svg { width: 9px; height: 9px; }
.star-divider svg path { fill: var(--moss-soft); }

/* Main scroll area */
.view {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 100px;
  display: none;
  animation: fadein var(--dur-3) var(--glide);
}
.view.active { display: block; }
#view-inicio { position: relative; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PORTADA (Inicio) — la recepción del hotel, en el bolsillo.
   Fondo verde noche: el huésped llega de noche y lo primero
   que necesita es la clave del wifi. Por eso el wifi es el
   protagonista, y las secciones son filas que ya traen el dato.
   ============================================================ */
#view-inicio {
  background: var(--noche);
  padding: 0 0 20px;
}
/* En la portada, el logo va dentro del contenido: la barra superior sobra */
#app.en-portada .app-header { display: none; }
#app.en-portada { background: var(--noche); }

/* Flecha para volver al inicio (visible solo dentro de una sección) */
.volver-inicio {
  background: rgba(255,255,255,0.12);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-2) var(--snap), background var(--dur-1) var(--glide);
}
.volver-inicio:active { transform: scale(0.9); background: rgba(255,255,255,0.2); }
.volver-inicio svg { width: 19px; height: 19px; stroke: var(--ivory); }
.volver-inicio:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.portada {
  padding: 20px 22px 26px;
  color: var(--ivory);
}
.marca-portada { margin-bottom: 16px; }
.marca-logo-portada { height: 30px; width: auto; max-width: 62%; display: block; opacity: 0.97; }
.marca-nombre-portada {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
}
.marca-header { display: flex; align-items: center; }
.marca-logo-header { height: 22px; width: auto; max-width: 150px; }
.marca-nombre-header {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ivory);
}

.saludo {
  font-size: 13px;
  color: var(--verde-claro);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.portada-titulo {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ivory);
  letter-spacing: -0.01em;
  margin-bottom: 7px;
  max-width: 22ch;
}
.portada-sub {
  font-size: 13px;
  color: var(--verde-apagado);
  margin-bottom: 18px;
}
.portada-contexto {
  font-size: 12.5px;
  color: var(--ambar);
  margin: -11px 0 18px;
}

/* El wifi: el elemento memorable de la pantalla */
.wifi-list { display: flex; flex-direction: column; gap: 10px; }
.wifi-banner {
  background: var(--noche-alto);
  border: 1px solid var(--borde-noche);
  border-radius: 16px;
  padding: 16px 18px;
}
.wifi-banner .wt {
  font-size: 12px;
  color: var(--verde-apagado);
  margin-bottom: 3px;
}
.wifi-banner .wv {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  color: var(--ivory);
  word-break: break-all;
}
.wifi-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}
.wifi-clave-bloque { flex: 1; min-width: 0; }
.btn-copiar {
  flex-shrink: 0;
  background: var(--ambar);
  color: #2E1B05;
  border: none;
  border-radius: 11px;
  padding: 11px 15px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1) var(--glide), transform var(--dur-2) var(--snap);
}
.btn-copiar:active { transform: scale(0.94); }
.btn-copiar.copiado { background: var(--verde-claro); color: #0F2A18; }
.btn-qr {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borde-noche);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--dur-1) var(--glide), transform var(--dur-2) var(--snap);
}
.btn-qr svg { width: 19px; height: 19px; stroke: var(--ivory); }
.btn-qr:active { transform: scale(0.94); background: rgba(255,255,255,0.08); }
.btn-qr:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

/* Modal del QR del WiFi */
.qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,16,12,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--glide);
}
.qr-overlay.open { opacity: 1; pointer-events: auto; }
.qr-box {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 32px 28px 26px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transform: translateY(10px) scale(0.97);
  transition: transform var(--dur-3) var(--glide);
}
.qr-overlay.open .qr-box { transform: translateY(0) scale(1); }
.qr-box canvas { border-radius: 10px; margin: 0 auto 16px; display: block; }
.qr-red { font-family: 'Fraunces', serif; font-size: 16px; color: var(--moss-deep); margin-bottom: 6px; }
.qr-ayuda { font-size: 12.5px; color: #6B7160; line-height: 1.5; }
.qr-aviso { font-size: 13px; color: #A5473C; line-height: 1.5; margin-bottom: 4px; }
.qr-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.qr-close svg { width: 15px; height: 15px; stroke: var(--charcoal); }
.qr-close:active { transform: scale(0.9); }
.wifi-separador {
  height: 1px;
  background: var(--borde-noche);
  margin: 15px 0;
}

.rubro-wifi {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--verde-claro);
  margin: 28px 0 10px;
}

/* Directorio: tarjetas que abren cada sección, con el dato ya visible */
.directorio {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
/* Jerarquía: la sección más usada ocupa el ancho completo y pesa más */
.tarjeta-seccion.destacada,
.tarjeta-seccion.ancha {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 13px;
}
.tarjeta-seccion.destacada {
  background: var(--ambar);
  border-color: var(--ambar);
  padding: 17px 18px;
}
.tarjeta-seccion.destacada svg { stroke: #4A2E0C; width: 24px; height: 24px; }
.tarjeta-seccion.destacada .ts-nombre { color: #2E1B05; font-size: 16.5px; flex: 1; }
.tarjeta-seccion.destacada .ts-dato { color: #6B4416; margin-top: 0; }
.tarjeta-seccion.ancha .ts-nombre { flex: 1; }
.tarjeta-seccion.ancha .ts-dato { margin-top: 0; }

.tarjeta-seccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  background: var(--noche-alto);
  border: 1px solid var(--borde-noche);
  border-radius: 16px;
  padding: 14px 15px 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--dur-2) var(--snap), border-color var(--dur-1) var(--glide);
}
.tarjeta-seccion:active {
  transform: scale(0.965);
  border-color: var(--verde-claro);
}
.tarjeta-seccion svg {
  width: 21px;
  height: 21px;
  stroke: var(--verde-claro);
}
.ts-nombre {
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--ivory);
}
.ts-dato {
  font-size: 12px;
  color: var(--verde-apagado);
  margin-top: -3px;
}

/* Barra de contacto: acciones directas, sin entrar a la sección */
.barra-contacto {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.accion-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 12px;
  border-radius: 16px;
  border: 1px solid var(--borde-noche);
  background: transparent;
  color: var(--ivory);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-2) var(--snap), border-color var(--dur-1) var(--glide);
}
.accion-contacto:active { transform: scale(0.965); border-color: var(--verde-claro); }
.accion-contacto svg { width: 17px; height: 17px; stroke: var(--verde-claro); flex-shrink: 0; }
.accion-contacto.sola { grid-column: 1 / -1; }
.ver-contactos {
  grid-column: 1 / -1;
  text-align: center;
  background: none;
  border: none;
  color: var(--verde-apagado);
  font-family: inherit;
  font-size: 12.5px;
  padding: 14px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tarjeta-seccion:focus-visible,
.btn-copiar:focus-visible {
  outline: 2px solid var(--verde-claro);
  outline-offset: 3px;
}

/* Un único momento de entrada, encadenado */
@media (prefers-reduced-motion: no-preference) {
  .saludo, .portada-titulo, .portada-sub, .wifi-list {
    animation: entrada 0.7s var(--glide) backwards;
  }
  .portada-titulo { animation-delay: 0.06s; }
  .portada-sub    { animation-delay: 0.12s; }
  .wifi-list      { animation-delay: 0.2s; }
}
@keyframes entrada {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada escalonada para las tarjetas de Info general, Servicios y
   Habitaciones y salones — antes aparecían de golpe, sin el mismo
   cuidado que le dimos a la portada. */
@media (prefers-reduced-motion: no-preference) {
  #view-infogeneral .card,
  #view-servicios .room-card,
  #view-habitaciones .room-card {
    animation: entrada 0.4s var(--glide) backwards;
  }
  #view-infogeneral .card:nth-of-type(1),
  #view-servicios .room-card:nth-of-type(1),
  #view-habitaciones .room-card:nth-of-type(1) { animation-delay: 0.02s; }
  #view-infogeneral .card:nth-of-type(2),
  #view-servicios .room-card:nth-of-type(2),
  #view-habitaciones .room-card:nth-of-type(2) { animation-delay: 0.06s; }
  #view-infogeneral .card:nth-of-type(3),
  #view-servicios .room-card:nth-of-type(3),
  #view-habitaciones .room-card:nth-of-type(3) { animation-delay: 0.1s; }
  #view-infogeneral .card:nth-of-type(4),
  #view-servicios .room-card:nth-of-type(4),
  #view-habitaciones .room-card:nth-of-type(4) { animation-delay: 0.14s; }
  #view-infogeneral .card:nth-of-type(n+5),
  #view-servicios .room-card:nth-of-type(n+5),
  #view-habitaciones .room-card:nth-of-type(n+5) { animation-delay: 0.18s; }
}

/* Section headers */
.section-title {
  font-size: 22px;
  margin-bottom: 2px;
}
.section-sub {
  font-size: 13px;
  color: #6B7160;
  margin-bottom: 4px;
}
.subseccion-titulo {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--moss-deep);
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--ambar);
}
/* Conecta el subtítulo con su primera tarjeta: mismo grupo visual */
.subseccion-titulo + .card { margin-top: -2px; border-top-color: var(--stone-line); }

.contact-combo { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.contact-combo .ct-label { font-family: 'Fraunces', serif; font-size: 15px; color: var(--moss-deep); }
.ct-actions { display: flex; gap: 8px; }
.ct-action {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--moss-tint);
  flex-shrink: 0;
}
.ct-action svg { width: 18px; height: 18px; stroke: var(--moss-deep); }
.ct-action:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

/* Cards / lists */
.card {
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.row-list .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--stone);
  font-size: 14px;
}
.row-list .row:last-child { border-bottom: none; }

/* Modo bloque: para valores largos que no entran bien a la derecha de
   una sola línea (por ejemplo, un horario con varias franjas). */
.row-list .row.apilado {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.row-list .row.apilado .v { text-align: left; }
.row-list .row .k { color: var(--charcoal); }
.row-list .row .v { color: var(--moss); font-weight: 500; text-align: right; }

/* Check-in / Check-out: lo primero que busca cualquier huésped */
.row-list .row.row-clave .k { color: var(--moss-deep); font-weight: 600; }
.row-list .row.row-clave .v { color: var(--ambar-oscuro); font-weight: 700; }

.note-box {
  background: var(--moss-tint);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 13px;
  color: var(--moss-deep);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Menu categories */
.menu-cat { margin-bottom: 22px; }
.menu-cat h3 { font-size: 16px; margin-bottom: 10px; }
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--stone-line);
  font-size: 14px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .price { color: var(--moss); font-weight: 500; white-space: nowrap; }

/* Contact */
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--stone-line);
  text-decoration: none;
  color: var(--charcoal);
}
.contact-item:last-child { border-bottom: none; }
.contact-item .icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--moss-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-item .icon-circle svg { width: 18px; height: 18px; stroke: var(--moss-deep); }
.contact-item .ct-label { font-size: 12px; color: #6B7160; }
.contact-item .ct-value { font-family: 'Fraunces', serif; font-size: 15px; color: var(--moss-deep); margin-top: 2px; }

.poi-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--stone); font-size: 13.5px; }
.poi-row:last-child { border-bottom: none; }
.poi-row .dist { color: var(--moss); font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.dist-icono { width: 13px; height: 13px; stroke: var(--moss); flex-shrink: 0; }
.poi-row .poi-left { display: flex; flex-direction: column; gap: 2px; }
.lugar-nombre-real { color: #6B7160; font-size: 12.5px; font-style: italic; }
.maps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--moss);
  border: 1px solid var(--stone-line);
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
}
.maps-btn svg { width: 16px; height: 16px; stroke: var(--moss); }

/* Estado vacío: tono de hotel, no de sistema */
.estado-vacio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  padding: 18px;
}
.estado-vacio svg { width: 20px; height: 20px; stroke: var(--moss-soft); flex-shrink: 0; margin-top: 1px; }
.estado-vacio p { font-size: 13.5px; color: #6B7160; line-height: 1.55; }

/* Franja de cierre al pie de cada sección */
.cierre-seccion {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--stone-line);
  text-align: center;
}
.cierre-seccion p {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--moss-deep);
  margin-bottom: 12px;
}
.cierre-acciones { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.cierre-btn {
  background: var(--moss-deep);
  color: var(--cream);
  border-radius: 100px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-2) var(--snap);
}
.cierre-btn:active { transform: scale(0.95); }
.cierre-btn.secundario {
  background: transparent;
  color: var(--moss-deep);
  border: 1px solid var(--stone-line);
}

/* Carrusel de fotos (portada de hoteles) */
.hotel-carousel { position: relative; height: 190px; }

/* Promos del menú: carrusel vertical tipo historia de Instagram */
.promo-carousel { height: min(66vh, 480px); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.promo-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background: var(--noche);
  scroll-snap-align: start;
}
.promo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 36px 16px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.hotel-carousel-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hotel-carousel-track::-webkit-scrollbar { display: none; }
.hotel-carousel-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}
.hotel-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.carousel-dot {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  transition: background var(--dur-2) var(--glide), transform var(--dur-2) var(--glide);
  pointer-events: auto;
  cursor: pointer;
}
/* Área de toque más grande que el punto visible, sin agrandar el punto */
.carousel-dot::before { content: ""; position: absolute; inset: -10px; }
.carousel-dot.active { background: #fff; transform: scale(1.2); }
.carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hotel-carousel-track.arrastrando { scroll-snap-type: none; cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .hotel-carousel-track { cursor: grab; } }

/* Nuestros hoteles */
.hotel-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
}
.hotel-card .hotel-card-photo {
  height: 150px;
  width: 100%;
  background: var(--moss-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hotel-card .hotel-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.hotel-card .hotel-card-photo svg { width: 30px; height: 30px; stroke: var(--moss-soft); }
.hotel-card .hotel-card-body { padding: 16px 18px; }
.hotel-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.hotel-card .hotel-card-logo { max-height: 34px; width: auto; margin-bottom: 10px; display: block; }
.hotel-card p { font-size: 13px; color: #6B7160; line-height: 1.5; }
.hotel-card .hotel-card-cta {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--moss);
  font-weight: 600;
}

/* Hotel detail overlay */
.hotel-detail-overlay {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--cream);
  z-index: 50;
  display: flex;
  flex-direction: column;
  /* visibility en vez de display:none: así la hoja sí se desliza al abrir y al cerrar */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 220ms;
}
.hotel-detail-overlay.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 320ms var(--snap), visibility 0s;
}
.hotel-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--stone-line);
  background: var(--white);
  flex-shrink: 0;
}
.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--moss-deep);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.back-btn svg { width: 18px; height: 18px; stroke: var(--moss-deep); }
.hotel-detail-body { flex: 1; overflow-y: auto; padding: 22px 20px 60px; }
.hotel-detail-logo { max-height: 44px; width: auto; display: block; }
.hotel-detail-desc { font-size: 14px; color: #4A4F42; line-height: 1.6; margin-bottom: 22px; margin-top: 16px; }
.hotel-detail-subtitle {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--moss-deep);
  margin: 4px 0 12px;
}

/* Room cards with photos */
.room-card {
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-top: 3px solid var(--moss-deep);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.room-card .room-photos {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  height: 140px;
}
.room-card .room-photos img { height: 140px; width: auto; min-width: 100%; object-fit: cover; flex-shrink: 0; cursor: pointer; }
.room-card .room-photos.empty {
  height: 64px;
  background: var(--moss-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-card .room-photos.empty svg { width: 22px; height: 22px; stroke: var(--moss); }
.room-card .room-body { padding: 13px 16px; }
.room-card h4 { font-family: 'Fraunces', serif; font-size: 14.5px; color: var(--moss-deep); margin-bottom: 4px; }
.room-titulo-linea { display: flex; align-items: center; gap: 8px; }
.room-icono { display: inline-flex; flex-shrink: 0; }
.room-icono svg { width: 16px; height: 16px; stroke: var(--moss); }
.room-card .room-horario { font-size: 12px; color: var(--moss); font-weight: 600; margin-bottom: 5px; min-height: 15px; }
.room-card .room-horario.vacio { visibility: hidden; }
.room-card p { font-size: 13px; color: #6B7160; line-height: 1.5; }

/* Galería vertical a pantalla completa (fotos de habitación) */
.photo-lightbox {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(10,10,8,0.97);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), display 200ms allow-discrete;
}
.photo-lightbox.open { display: flex; opacity: 1; }
@starting-style { .photo-lightbox.open { opacity: 0; } }
.photo-lightbox-close {
  position: fixed;
  top: 16px;
  right: max(16px, calc(50% - 240px + 16px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-lightbox-close svg { width: 20px; height: 20px; }
.photo-lightbox-track {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  align-items: center;
}
.photo-lightbox-track::-webkit-scrollbar { display: none; }
.photo-lightbox-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
}
.photo-lightbox-dots {
  position: sticky;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding-top: 10px;
  flex-shrink: 0;
}
.photo-lightbox-dots .carousel-dot { background: rgba(255,255,255,0.4); }
.photo-lightbox-dots .carousel-dot.active { background: #fff; }

/* Bottom nav */
.bottom-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--white);
  border-top: 1px solid var(--stone-line);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 30;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  color: #9AA08A;
}
.nav-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.nav-btn span { font-size: 10.5px; font-family: 'Work Sans', sans-serif; letter-spacing: 0.01em; }
.nav-btn.active { color: var(--moss-deep); }
.nav-btn.active svg { stroke: var(--moss-deep); }

/* Install banner */
.install-banner {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  background: var(--moss);
  color: var(--cream);
  padding: 11px 16px;
  font-size: 12px;
  line-height: 1.4;
}
.install-banner span { flex: 1 1 100%; }
.install-banner.show { display: flex; }
.install-banner button {
  background: var(--cream);
  color: var(--moss-deep);
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.install-banner .dismiss {
  background: none;
  color: var(--cream);
  opacity: 0.8;
  padding: 7px 6px;
}

::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   Selector de idioma
   ============================================================ */
.selector-idioma { position: relative; margin-left: auto; flex-shrink: 0; }
.hero-text { position: relative; }
.selector-idioma.en-portada-sel {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}
.btn-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 100px;
  padding: 7px 12px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1) var(--glide);
}
.btn-idioma:active { background: rgba(255,255,255,0.2); }
.btn-idioma svg { width: 14px; height: 14px; stroke: var(--verde-claro); }
.btn-idioma:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

.menu-idiomas {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--noche-alto);
  border: 1px solid var(--borde-noche);
  border-radius: 14px;
  padding: 6px;
  min-width: 168px;
  z-index: 60;
  display: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.menu-idiomas.abierto { display: block; }
.opcion-idioma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--ivory);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.opcion-idioma:hover { background: rgba(255,255,255,0.07); }
.opcion-idioma.activo { color: var(--verde-claro); font-weight: 600; }
.opcion-idioma .tilde { font-size: 13px; }

/* Pantalla para cuando no hay nada que mostrar (link incompleto,
   negocio inexistente, servicio no disponible, sin conexión) */
.pantalla-estado {
  min-height: 100vh;
  background: var(--noche);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  gap: 10px;
}
.pantalla-estado .pe-logo { height: 26px; width: auto; opacity: 0.9; margin-bottom: 16px; }
.pantalla-estado h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ivory);
}
.pantalla-estado p {
  font-size: 14px;
  color: var(--verde-apagado);
  line-height: 1.6;
  max-width: 34ch;
}

/* Formulario para ingresar el código del alojamiento */
.pe-form {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  width: 100%;
  max-width: 330px;
}
.pe-form input {
  flex: 1;
  min-width: 0;
  background: var(--noche-alto);
  border: 1px solid var(--borde-noche);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--ivory);
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
}
.pe-form input::placeholder { color: var(--verde-apagado); }
.pe-form input:focus { outline: 2px solid var(--verde-claro); outline-offset: 1px; }
.pe-form button {
  flex-shrink: 0;
  background: var(--ambar);
  color: #2E1B05;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pe-form button:active { transform: scale(0.96); }
.pe-error { color: #E8A29B; font-size: 13px; min-height: 18px; margin-top: 4px; }
.pe-detalle { margin-top: 14px; font-size: 12px; color: var(--verde-apagado); max-width: 90vw; }
.pe-detalle summary { cursor: pointer; }
.pe-detalle code {
  display: block;
  margin-top: 8px;
  background: var(--noche-alto);
  border: 1px solid var(--borde-noche);
  border-radius: 8px;
  padding: 10px;
  font-size: 11.5px;
  color: var(--ivory);
  word-break: break-word;
  text-align: left;
}

/* ============================================================
   Ajustes de acabado
   ============================================================ */

/* (1) Tarjetas de hotel sin foto: sin recuadro vacío, más aire */
.hotel-card.sin-foto .hotel-card-body { padding: 18px; }

/* (5) Jerarquía: el nombre del hotel pesa más que su descripción */
.hotel-card h3 {
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 7px;
  color: var(--moss-deep);
}
.hotel-card p { font-size: 13px; line-height: 1.55; color: #6B7160; }
.hotel-card { cursor: pointer; transition: transform var(--dur-2) var(--snap), box-shadow var(--dur-2) var(--glide); }
.hotel-card:active { transform: scale(0.985); }

/* (2) Continuidad con la portada: cada sección abre con una franja oscura */
.seccion-cabecera {
  background: var(--noche);
  margin: -20px -20px 20px;
  padding: 20px 20px 22px;
  border-radius: 0 0 20px 20px;
}
.seccion-cabecera .section-title {
  color: var(--ivory);
  font-size: 24px;
  margin: 0;
}
.seccion-cabecera .section-sub {
  color: var(--verde-apagado);
  margin: 5px 0 0;
}

/* (3) El botón de copiar el wifi, más discreto: el ámbar queda solo
   para la tarjeta de Menú, que es la acción principal */
.btn-copiar {
  background: transparent;
  border: 1px solid var(--borde-noche);
  color: var(--ivory);
}
.btn-copiar:active { background: rgba(255,255,255,0.08); }
.btn-copiar.copiado {
  background: var(--verde-claro);
  color: #0F2A18;
  border-color: var(--verde-claro);
}

/* (4) Tarjetas del inicio: un poco más despegadas del fondo */
.tarjeta-seccion {
  background: var(--noche-alto);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.tarjeta-seccion:active { border-color: var(--verde-claro); }

/* (7) Franja de cierre más liviana: se repite en cada sección */
.cierre-seccion {
  margin-top: 26px;
  padding-top: 18px;
}
.cierre-seccion p { font-size: 13.5px; color: #6B7160; margin-bottom: 10px; }
.cierre-btn {
  padding: 9px 16px;
  font-size: 12.5px;
  background: transparent;
  color: var(--moss-deep);
  border: 1px solid var(--stone-line);
}
.cierre-btn:first-child {
  background: var(--moss-deep);
  color: var(--cream);
  border-color: var(--moss-deep);
}


/* ============================================================
   (1) Atmósfera de la portada
   ============================================================ */
/* Un degradado muy sutil evita que el fondo se lea como un rectángulo
   plano, sin competir con el contenido. */
#view-inicio {
  position: relative;
  background:
    radial-gradient(120% 65% at 82% -8%, rgba(255,255,255,0.075), transparent 62%),
    radial-gradient(90% 50% at 0% 108%, rgba(255,255,255,0.045), transparent 60%),
    var(--noche);
}

/* Foto del hotel de fondo, con velo oscuro para mantener la lectura */
#view-inicio.con-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-portada);
  background-size: cover;
  background-position: center 30%;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
}
#view-inicio.con-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.42) 45%,
    var(--noche) 92%);
  z-index: 0;
  pointer-events: none;
}
#view-inicio > * { position: relative; z-index: 1; }

/* ============================================================
   (2) El acento deja de estar huérfano: aparece en varios lugares
   ============================================================ */
.rubro-wifi {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rubro-wifi::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ambar);
  flex-shrink: 0;
}
.saludo { color: var(--ambar); }
.btn-copiar:active { border-color: var(--ambar); }
.seccion-cabecera .section-title { position: relative; }
.seccion-cabecera::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ambar);
  margin-top: 12px;
}
.cierre-btn:first-child { background: var(--moss-deep); }
.hotel-card-body h3::after,
.room-card h4::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ambar);
  opacity: 0.65;
  margin: 7px 0 0;
}

/* ============================================================
   (3) Cada sección con su propio aire
   ============================================================ */
.seccion-cabecera { padding-bottom: 18px; }
.view:not(#view-inicio) { background: var(--cream); }

/* ============================================================
   (4) El menú, más apetecible
   ============================================================ */
.menu-cat h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
  color: var(--moss-deep);
  margin-bottom: 12px;
}
.menu-cat h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stone-line);
}
.menu-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--stone);
  align-items: baseline;
}
.menu-item span:first-child { font-size: 14.5px; color: var(--charcoal); }
.menu-item .price {
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--moss-deep);
}

/* ============================================================
   (5 y 6) Íconos e interacción
   ============================================================ */
.tarjeta-seccion svg {
  padding: 7px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.tarjeta-seccion.destacada svg { background: rgba(0,0,0,0.09); }
.tarjeta-seccion {
  transition: transform var(--dur-2) var(--snap), border-color var(--dur-1) var(--glide), background var(--dur-1) var(--glide);
}
.tarjeta-seccion:active { background: rgba(255,255,255,0.05); }
.tarjeta-seccion.destacada:active { background: var(--ambar); filter: brightness(0.94); }
.accion-contacto:active { background: rgba(255,255,255,0.05); }
.room-card, .hotel-card, .card { transition: box-shadow var(--dur-2) var(--glide), transform var(--dur-2) var(--snap); }
.hotel-card:active { box-shadow: 0 1px 4px rgba(0,0,0,0.07); }

/* ============================================================
   Foco visible por teclado: los elementos que faltaban
   ============================================================ */
.accion-contacto:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
.cierre-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.maps-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.opcion-idioma:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: -2px; }
.hotel-card:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.contact-item:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.photo-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Etiqueta de tipo en Habitaciones y salones: distingue de un vistazo
   qué es cada cosa, sin tener que leer el nombre completo */
.room-tipo {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 7px;
}
.room-tipo-habitacion { background: var(--moss-tint); color: var(--moss-deep); }
.room-tipo-salon { background: #FBEFDC; color: var(--ambar-oscuro); }

/* Nuestros hoteles: numeración de catálogo, no una lista más */
.hotel-card-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ambar-oscuro);
  margin-bottom: 6px;
}

/* Descripción de cada plato, debajo del nombre */
.menu-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu-desc { font-size: 12.5px; line-height: 1.4; color: #6B7160; }
.note-box:empty { display: none; }

/* Buscador y filtros de categoría */
.filtro-bar { position: sticky; top: 76px; z-index: 5; background: var(--cream, #fff); padding: 8px 0 10px; margin-bottom: 8px; }
.filtro-q { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--stone-line, #ddd); border-radius: 999px; font: inherit; font-size: 16px; background: var(--white, #fff); color: var(--charcoal); }
.filtro-q::placeholder { color: #6a6f66; opacity: 1; }
.filtro-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.filtro-chips::-webkit-scrollbar { display: none; }
.filtro-chips button { flex: none; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--stone-line, #ddd); background: var(--white, #fff); color: var(--charcoal, #333); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.filtro-chips button.on { background: var(--moss-deep, #1F4D3A); border-color: var(--moss-deep, #1F4D3A); color: #fff; }
.filtro-vacio { text-align: center; color: var(--mut, #777); font-size: 14px; margin: 18px 0; }
[hidden] { display: none !important; }

/* "Ver todos los contactos": botón destacado */
.ver-contactos { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 14px 18px; border-radius: 14px; background: var(--verde-claro, #4FD1A1); color: #0F2A20; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s ease; }
.ver-contactos::after { content: "→"; font-size: 18px; }
.ver-contactos:active { transform: scale(.97); }

/* ============================================================
   MODELO 2 — Editorial claro (lo elige cada negocio desde su panel)
   ============================================================ */
html[data-modelo="2"] #app.en-portada,
html[data-modelo="2"] #view-inicio { background: var(--cream); }
html[data-modelo="2"] #view-inicio { padding: 0 0 8px; }
html[data-modelo="2"] #view-inicio.con-foto::before,
html[data-modelo="2"] #view-inicio.con-foto::after { display: none; }
html[data-modelo="2"] .portada { padding: 0; color: var(--charcoal); }
html[data-modelo="2"] .portada-hero {
  position: relative; min-height: 340px; padding: 76px 24px 56px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  border-radius: 0 0 34px 34px;
  background-color: var(--noche);
  background-image: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78)), var(--foto-portada, none);
  background-size: cover; background-position: center;
}
html[data-modelo="2"] .marca-portada { position: absolute; top: 28px; left: 24px; margin: 0; }
html[data-modelo="2"] .marca-nombre-portada { color: #fff; }
html[data-modelo="2"] .saludo { color: var(--ambar); font-weight: 600; margin-bottom: 6px; }
html[data-modelo="2"] .portada-titulo { color: #fff; font-size: 30px; line-height: 1.12; max-width: 18ch; margin-bottom: 8px; }
html[data-modelo="2"] .portada-sub { color: rgba(255,255,255,.82); margin: 0; }
html[data-modelo="2"] .portada-contexto { color: var(--ambar); margin: 6px 0 0; }
html[data-modelo="2"] .rubro-wifi { display: none; }
html[data-modelo="2"] .wifi-list { margin: -28px 18px 0; position: relative; z-index: 2; }
html[data-modelo="2"] .wifi-banner { background: #fff; border: 0; border-radius: 20px; box-shadow: 0 8px 24px rgba(31,59,42,.14); }
html[data-modelo="2"] .wifi-banner .wt { color: #7a7a72; }
html[data-modelo="2"] .wifi-banner .wv { color: var(--charcoal); }
html[data-modelo="2"] .wifi-separador { background: #EEEADD; }
html[data-modelo="2"] .btn-copiar { background: var(--noche); border: 0; color: #fff; border-radius: 99px; padding: 11px 17px; }
html[data-modelo="2"] .btn-copiar.copiado { background: var(--moss); color: #fff; }
html[data-modelo="2"] .btn-qr { border-color: #D7D2C2; border-radius: 99px; }
html[data-modelo="2"] .btn-qr svg { stroke: var(--charcoal); }
html[data-modelo="2"] .directorio { margin-top: 0; padding: 20px 18px 0; gap: 12px; }
html[data-modelo="2"] .tarjeta-seccion {
  background: #fff; border: 1px solid #E4E0D4; border-radius: 20px; padding: 16px;
  min-height: 112px; justify-content: space-between; gap: 10px;
}
html[data-modelo="2"] .tarjeta-seccion:active { background: #fff; border-color: var(--moss); }
html[data-modelo="2"] .ts-nombre { color: var(--charcoal); font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px; }
html[data-modelo="2"] .ts-dato { color: #6B7160; margin-top: 2px; }
html[data-modelo="2"] .tarjeta-seccion svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; stroke: #2E7D4F; background: #EAF4EC; }
html[data-modelo="2"] .tarjeta-seccion[data-goto="servicios"] svg { stroke: #C07A1F; background: #FDF0DC; }
html[data-modelo="2"] .tarjeta-seccion[data-goto="habitaciones"] svg { stroke: #3D6296; background: #E8EEF7; }
html[data-modelo="2"] .tarjeta-seccion[data-goto="alrededores"] svg { stroke: #B04B5E; background: #F6E7EA; }
html[data-modelo="2"] .tarjeta-seccion[data-goto="lavanderia"] svg { stroke: #4B55A8; background: #E5E9F7; }
html[data-modelo="2"] .tarjeta-seccion[data-goto="infoturismo"] svg { stroke: #2A8A78; background: #E3F2EF; }
html[data-modelo="2"] .tarjeta-seccion.destacada,
html[data-modelo="2"] .tarjeta-seccion.ancha { min-height: 0; }
html[data-modelo="2"] .tarjeta-seccion.destacada { background: var(--noche); border-color: var(--noche); }
html[data-modelo="2"] .tarjeta-seccion.destacada svg { stroke: var(--ambar); background: rgba(255,255,255,.12); width: 44px; height: 44px; }
html[data-modelo="2"] .tarjeta-seccion.destacada .ts-nombre { color: #fff; font-size: 17px; }
html[data-modelo="2"] .tarjeta-seccion.destacada .ts-dato { color: rgba(255,255,255,.72); }
html[data-modelo="2"] .barra-contacto { padding: 0 18px; margin-top: 14px; }
html[data-modelo="2"] .accion-contacto { background: #fff; border: 1px solid #D7D2C2; color: var(--charcoal); border-radius: 99px; }
html[data-modelo="2"] .accion-contacto svg { stroke: var(--moss); }
html[data-modelo="2"] .accion-contacto:first-child { background: var(--noche); border-color: var(--noche); color: #fff; }
html[data-modelo="2"] .accion-contacto:first-child svg { stroke: #fff; }
html[data-modelo="2"] .accion-contacto:active { background: #f0ede4; }
html[data-modelo="2"] .ver-contactos { background: var(--moss); color: #fff; box-shadow: none; }
/* Dentro de cada módulo */
html[data-modelo="2"] .seccion-cabecera { border-radius: 0 0 30px 30px; padding: 6px 22px 24px; }
html[data-modelo="2"] .seccion-cabecera .section-title { font-size: 32px; }
html[data-modelo="2"] .menu-cat h3 { font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); margin-bottom: 4px; }
html[data-modelo="2"] .menu-cat h3::after { display: none; }
html[data-modelo="2"] .menu-item { border-bottom-color: #EEEADD; }
html[data-modelo="2"] .room-card, html[data-modelo="2"] .hotel-card, html[data-modelo="2"] .card { border-radius: 22px; }

/* ============================================================
   Botón de modo claro / oscuro
   ============================================================ */
.btn-tema-g { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.btn-tema-g svg { width: 19px; height: 19px; }
.btn-tema-g .ic-sol { display: none; }
html[data-tema="oscuro"] .btn-tema-g .ic-sol { display: block; }
html[data-tema="oscuro"] .btn-tema-g .ic-luna { display: none; }
.btn-tema-g.en-header { margin-left: auto; background: rgba(255,255,255,.12); }
.portada { position: relative; }
.portada-hero > .btn-tema-g { position: absolute; top: 22px; right: 20px; z-index: 3; }
#app.en-portada .btn-tema-g.en-header { display: none; }

/* ============================================================
   MODO OSCURO (opcional) — funciona con el Modelo 1 y el 2
   ============================================================ */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --cream: #101713; --white: #1A2520; --charcoal: #ECEAE0;
  --stone: #2A372F; --stone-line: #33443A;
  --moss-deep: #A9D8B9; --moss: #62BE88; --moss-soft: #7FBF97; --moss-tint: #1D2F25;
  --ambar-oscuro: #E8B070;
  --shadow: 0 2px 10px rgba(0,0,0,.35);
}
html[data-tema="oscuro"] body { background: #0B100D; color: var(--charcoal); }
html[data-tema="oscuro"] .cierre-btn,
html[data-tema="oscuro"] .cierre-btn:first-child { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
html[data-tema="oscuro"] .cierre-btn:not(:first-child) { background: transparent; color: var(--charcoal); border-color: var(--stone-line); }
html[data-tema="oscuro"] .section-sub,
html[data-tema="oscuro"] .qr-ayuda, html[data-tema="oscuro"] .contact-item .ct-label,
html[data-tema="oscuro"] .lugar-nombre-real, html[data-tema="oscuro"] .estado-vacio p,
html[data-tema="oscuro"] .hotel-card p, html[data-tema="oscuro"] .room-card p,
html[data-tema="oscuro"] .cierre-seccion p, html[data-tema="oscuro"] .menu-desc { color: #A3AE9F; }
html[data-tema="oscuro"] .hotel-detail-desc { color: #C5CEC1; }
html[data-tema="oscuro"] .room-tipo-salon { background: #3A2E18; color: var(--ambar-oscuro); }
html[data-tema="oscuro"] .note-box { background: var(--moss-tint); color: var(--charcoal); }
html[data-tema="oscuro"] .qr-box { background: #fff; }
html[data-tema="oscuro"] .qr-box .qr-red { color: #1F3B2A; }
html[data-tema="oscuro"] .qr-box .qr-ayuda { color: #6B7160; }
html[data-tema="oscuro"] .filtro-q,
html[data-tema="oscuro"] .filtro-chips button { background: var(--white); color: var(--charcoal); border-color: var(--stone-line); }
html[data-tema="oscuro"] .filtro-chips button.on { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
html[data-tema="oscuro"] .filtro-bar { background: var(--cream); }
/* Modelo 2 en oscuro */
html[data-tema="oscuro"][data-modelo="2"] .wifi-banner,
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion,
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion:active,
html[data-tema="oscuro"][data-modelo="2"] .accion-contacto { background: var(--white); border: 1px solid var(--stone-line); box-shadow: none; }
html[data-tema="oscuro"][data-modelo="2"] .wifi-banner .wt, html[data-tema="oscuro"][data-modelo="2"] .ts-dato { color: #A3AE9F; }
html[data-tema="oscuro"][data-modelo="2"] .wifi-banner .wv, html[data-tema="oscuro"][data-modelo="2"] .ts-nombre { color: var(--charcoal); }
html[data-tema="oscuro"][data-modelo="2"] .wifi-separador { background: var(--stone-line); }
html[data-tema="oscuro"][data-modelo="2"] .btn-copiar { background: #2E7D4F; }
html[data-tema="oscuro"][data-modelo="2"] .btn-qr { border-color: var(--stone-line); }
html[data-tema="oscuro"][data-modelo="2"] .btn-qr svg { stroke: var(--charcoal); }
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion svg { background: rgba(255,255,255,.07); }
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion.destacada { background: var(--noche); border-color: var(--noche); }
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion.destacada .ts-nombre { color: #fff; }
html[data-tema="oscuro"][data-modelo="2"] .tarjeta-seccion.destacada .ts-dato { color: rgba(255,255,255,.72); }
html[data-tema="oscuro"][data-modelo="2"] .accion-contacto { color: var(--charcoal); }
html[data-tema="oscuro"][data-modelo="2"] .accion-contacto:first-child { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
html[data-tema="oscuro"][data-modelo="2"] .menu-item { border-bottom-color: var(--stone-line); }
html[data-tema="oscuro"][data-modelo="2"] .menu-cat h3 { color: var(--moss); }

/* ---- Auditoría: toque, contraste y respuesta al tacto ---- */
.btn-copiar { min-height: 44px; }
.qr-close { width: 44px; height: 44px; top: 6px; right: 6px; }
.cierre-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-tema-g, .filtro-chips button, .cierre-btn, .btn-copiar, .qr-close { transition: transform 120ms cubic-bezier(.23,1,.32,1), background-color 160ms ease; }
.btn-tema-g:active, .filtro-chips button:active, .cierre-btn:active, .btn-copiar:active, .qr-close:active { transform: scale(.96); }
.btn-tema-g:focus-visible, .filtro-chips button:focus-visible, .filtro-q:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }
html[data-tema="oscuro"] .filtro-q::placeholder { color: #9aa59a; }
@media (prefers-reduced-motion: reduce) {
  .btn-tema-g, .filtro-chips button, .cierre-btn, .btn-copiar, .qr-close { transition: none; }
  .btn-tema-g:active, .filtro-chips button:active, .cierre-btn:active, .btn-copiar:active, .qr-close:active { transform: none; }
}

/* Logos de hoteles: apilados más altos; en modo oscuro, sobre un fondo claro para que se lean */
.hotel-card .hotel-card-logo.logo-vertical { max-height: 92px; }
.hotel-detail-logo.logo-vertical { max-height: 110px; }
html[data-tema="oscuro"] .hotel-card-logo,
html[data-tema="oscuro"] .hotel-detail-logo { background: #FAF9F4; border-radius: 12px; padding: 8px 12px; box-sizing: content-box; }

/* Info turismo: descripción y fotos por lugar */
.poi-row.con-extra { flex-wrap: wrap; row-gap: 10px; }
.lugar-fotos { flex-basis: 100%; display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.lugar-fotos.n1 { grid-template-columns: 1fr; }
.lugar-fotos.n2 { grid-template-columns: 1fr 1fr; }
.lugar-fotos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lugar-fotos.n3 img:first-child { grid-row: 1 / 3; }
.lugar-fotos img { width: 100%; height: 100%; min-height: 96px; max-height: 190px; object-fit: cover; display: block; cursor: pointer; }
.lugar-fotos.n1 img { max-height: 200px; }
.lugar-desc { flex-basis: 100%; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--charcoal); }

/* Botón de reseñas */
.btn-resenas { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 4px; padding: 12px 18px; border-radius: 14px; border: 1.5px solid var(--ambar, #E8993D); color: var(--ambar, #E8993D); font-size: 14.5px; font-weight: 600; text-decoration: none; background: transparent; transition: transform .15s ease; }
.btn-resenas span { font-size: 17px; line-height: 1; }
.btn-resenas:active { transform: scale(.97); }
html[data-modelo="2"]:not([data-tema="oscuro"]) .btn-resenas { color: var(--ambar-oscuro, #B9701F); border-color: var(--ambar, #E8993D); }

.tours-titulo { font-family:'Fraunces',serif; font-size:17px; margin:20px 0 10px; color:var(--moss-deep); }
.tour-item { padding:10px 0; border-top:1px solid var(--stone); }
.tour-item:first-of-type { border-top:none; }
.tour-cab { display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:14px; }
.tour-precio { color:var(--moss); font-size:13px; font-weight:600; white-space:nowrap; }
.btn-wa-tour { display:inline-block; margin-top:8px; padding:8px 16px; border-radius:999px; background:#25D366; color:#fff; font-size:13px; font-weight:600; text-decoration:none; }
.btn-ig-tour { display:inline-block; margin:0 0 8px; padding:6px 14px; border-radius:999px; border:1px solid var(--moss); color:var(--moss-deep); font-size:13px; font-weight:600; text-decoration:none; }
.resenas-tira { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 0 10px; -webkit-overflow-scrolling:touch; }
.resenas-tira img { flex:0 0 78%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; scroll-snap-align:start; cursor:pointer; }

html[data-rubro="tours"] .solo-hotel { display: none !important; }
html:not([data-rubro="tours"]) .solo-tours { display: none !important; }
.tour-card { margin-bottom: 14px; }
.tour-dur { display:inline-block; font-size:12.5px; color:var(--moss); margin-top:2px; }
button.btn-wa-tour { border:none; cursor:pointer; font-family:inherit; }
.dlg-reserva { margin:auto; border:none; border-radius:16px; padding:20px; width:min(92vw,420px); background:var(--white,#fff); color:var(--charcoal,#222); }
.dlg-reserva::backdrop { background:rgba(0,0,0,.5); }
.dlg-reserva h3 { margin:0 0 12px; font-family:'Fraunces',serif; font-size:17px; }
.dlg-reserva label { display:block; font-size:12.5px; margin-bottom:10px; }
.dlg-reserva input, .dlg-reserva textarea { width:100%; box-sizing:border-box; margin-top:3px; padding:9px 10px; border:1px solid var(--stone,#ddd); border-radius:10px; font:inherit; background:transparent; color:inherit; }
.dlg-fila { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dlg-acciones { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.dlg-acciones button { padding:9px 16px; border-radius:999px; border:none; font:inherit; font-weight:600; cursor:pointer; }
.dlg-sec { background:transparent; border:1px solid var(--stone,#ccc) !important; color:inherit; }
.dlg-ok { background:#25D366; color:#fff; }

/* ===== Tours: diseños azules (Recuadros y Expandidos) ===== */
html[data-rubro="tours"][data-paleta="cartel"] {
  --noche:#2E4A9E; --noche-alto:#3D5AB0; --borde-noche:#5670BE; --ivory:#fff;
  --verde-claro:#C9D6F2; --verde-apagado:#D5DEF3; --ambar:#C9D6F2; --velo:#101A38;
}
html[data-rubro="tours"][data-paleta="cartel"]:not([data-tema="oscuro"]) {
  --moss-deep:#243B80; --moss:#2E4A9E; --moss-soft:#9DB0DE; --moss-tint:#EEF1F8; --neon-green:#2E4A9E;
  --cream:#F6F7FA; --stone:#E4E8F1; --stone-line:#D8DEEB; --ambar-oscuro:#243B80;
}
/* texto sobre el acento claro: azul muy oscuro en vez del marrón del hotel */
html[data-rubro="tours"] .btn-copiar, html[data-rubro="tours"] .tarjeta-seccion.destacada .ts-nombre,
html[data-rubro="tours"] .tarjeta-seccion.destacada svg { color:#0B1B3A; stroke:#0B1B3A; }
html[data-rubro="tours"] .tarjeta-seccion.destacada .ts-dato { color:#26406F; }

/* ===== Tours: distribución de la portada =====
   Orden: marca y bienvenida, acción principal (WhatsApp), los dos
   servicios lado a lado, y el resto en filas. Sin saludo ni datos de hotel. */
html[data-rubro="tours"] .portada { display: flex; flex-direction: column; }
html[data-rubro="tours"] .portada-hero { order: 0; }
html[data-rubro="tours"] .barra-contacto { order: 1; margin: 22px 0 0; grid-template-columns: 1fr; gap: 10px; }
html[data-rubro="tours"] .directorio { order: 2; margin-top: 22px; }
html[data-rubro="tours"] .saludo,
html[data-rubro="tours"] .portada-sub,
html[data-rubro="tours"] .portada-contexto { display: none !important; }
html[data-rubro="tours"] .portada-titulo { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }

/* WhatsApp: botón principal, sólido */
html[data-rubro="tours"] .accion-contacto { padding: 16px 14px; border-radius: 14px; font-size: 15px; font-weight: 600; }
html[data-rubro="tours"] .accion-contacto[href^="https://wa.me"],
html[data-rubro="tours"] .accion-contacto[href*="wa.me"] { order: -1; background: var(--ambar); border-color: var(--ambar); color: #0B1B3A; }
html[data-rubro="tours"] .accion-contacto[href*="wa.me"] svg { stroke: #0B1B3A; }
html[data-rubro="tours"] .accion-contacto.sola { grid-column: auto; }
/* "Ver todos los contactos" baja a fila discreta */
html[data-rubro="tours"] .ver-contactos { background: transparent; color: var(--ivory); box-shadow: none; border: 1px solid var(--borde-noche); font-weight: 500; }

/* Tours y Traslados: dos tarjetas iguales, vertical */
html[data-rubro="tours"] .tarjeta-seccion.solo-tours,
html[data-rubro="tours"] .tarjeta-seccion.destacada.solo-tours {
  grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0;
  min-height: 132px; padding: 18px 16px; border-radius: 16px;
  background: rgba(255,255,255,.1); border: 1px solid var(--borde-noche); color: var(--ivory);
}
html[data-rubro="tours"] .tarjeta-seccion.solo-tours svg { stroke: var(--ivory); background: rgba(255,255,255,.14); width: 40px; height: 40px; padding: 9px; border-radius: 12px; }
html[data-rubro="tours"] .tarjeta-seccion.solo-tours .ts-nombre { color: var(--ivory); font-size: 16px; flex: 0; margin-top: auto; }
html[data-rubro="tours"] .tarjeta-seccion.solo-tours .ts-dato { color: var(--verde-apagado); margin-top: 2px; }
/* Info general: fila de ancho completo */
html[data-rubro="tours"] .tarjeta-seccion[data-goto="infogeneral"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 13px; }
html[data-rubro="tours"] .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { flex: 1; }
html[data-rubro="tours"] .tarjeta-seccion[data-goto="infogeneral"] .ts-dato { margin-top: 0; }
html[data-rubro="tours"] #datoInfoGeneral { display: none; }

/* Tours con foto de portada: foto más clara y botones abajo para que se aprecie */
html[data-rubro="tours"] #view-inicio.con-foto::before { opacity: 0.9; background-position: center 35%; }
html[data-rubro="tours"] #view-inicio.con-foto::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0) 22%,
    rgba(0,0,0,0) 48%,
    color-mix(in srgb, var(--velo) 55%, transparent) 72%,
    color-mix(in srgb, var(--velo) 92%, transparent) 100%);
}
html[data-rubro="tours"] #view-inicio.con-foto .portada { min-height: 0; }
html[data-rubro="tours"] #view-inicio.con-foto .barra-contacto { margin-top: 18px; }
html[data-rubro="tours"] #view-inicio.con-foto .directorio { margin-top: 12px; }

/* Tours: tarjetas más sólidas sobre la foto (azul de la paleta + desenfoque) */
html[data-rubro="tours"] #view-inicio.con-foto .tarjeta-seccion,
html[data-rubro="tours"] #view-inicio.con-foto .ver-contactos {
  background: color-mix(in srgb, var(--noche) 86%, transparent);
  border-color: color-mix(in srgb, var(--ivory) 22%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Tours: WhatsApp y Llamar lado a lado, los dos sólidos */
html[data-rubro="tours"] .barra-contacto { grid-template-columns: 1fr 1fr; }
html[data-rubro="tours"] .barra-contacto > .ver-contactos,
html[data-rubro="tours"] .barra-contacto > .btn-resenas,
html[data-rubro="tours"] .accion-contacto.sola { grid-column: 1 / -1; }
html[data-rubro="tours"] .accion-contacto[href^="tel:"] { background: #fff; border-color: #fff; color: #0B1B3A; }
html[data-rubro="tours"] .accion-contacto[href^="tel:"] svg { stroke: #0B1B3A; }

/* Tours y Traslados: protagonistas. Degradado de la paleta, ícono con el acento */
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours {
  min-height: 176px; padding: 18px 16px; border-radius: 20px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--verde-claro) 42%, var(--noche)) 0%, var(--noche) 78%);
  border: 1px solid color-mix(in srgb, var(--verde-claro) 55%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours svg {
  width: 56px; height: 56px; padding: 14px; border-radius: 16px;
  background: var(--ambar); stroke: #0B1B3A;
}
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours .ts-nombre { font-size: 19px; line-height: 1.15; }
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours .ts-dato {
  margin-top: 8px; padding: 3px 10px; border-radius: 99px; font-size: 12px;
  background: rgba(255,255,255,.16); color: var(--ivory);
}
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours .ts-dato:empty { display: none; }

/* Tours: sin el cierre "¿Necesitás algo más?" ni el botón de recepción dentro de los módulos */
html[data-rubro="tours"] .cierre-seccion { display: none !important; }

/* Tours: tarjetas de propuesta (jerarquía: nombre > precio > duración > descripción) */
.tour-card { position:relative; padding:18px 18px 16px; border:1px solid color-mix(in srgb, var(--noche) 22%, var(--stone-line)); border-top:4px solid var(--ambar); border-radius:18px; box-shadow:0 6px 18px color-mix(in srgb, var(--noche) 12%, transparent); }
.tour-nombre { margin:0 0 10px; font-size:21px; line-height:1.2; font-weight:800; color:var(--noche); overflow-wrap:anywhere; }
.tour-precio-grande { display:inline-block; margin:0 0 8px; padding:6px 14px; border-radius:999px; background:var(--ambar); color:#0B1B3A; font-size:18px; font-weight:800; line-height:1.2; }
.tour-card .tour-dur { display:block; margin:0 0 10px; font-size:14px; font-weight:600; color:var(--noche); opacity:.8; }
.tour-card .lugar-desc { margin:0 0 12px; font-size:13.5px; opacity:.85; }
.lugar-fotos { position:relative; }
.mas-fotos { position:absolute; right:8px; bottom:8px; padding:3px 10px; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:13px; font-weight:700; pointer-events:none; }
.tour-card .btn-wa-tour { display:block; width:100%; margin-top:12px; padding:12px 16px; font-size:15px; text-align:center; }

/* Tours: contraste (el azul rey vivo sólo en acentos; el velo de la foto va en azul noche) */
html[data-rubro="tours"] .tour-precio-grande { background: var(--noche); color: #fff; }
html[data-rubro="tours"] .tour-card { border-top-color: var(--noche); }
html[data-rubro="tours"] #view-inicio.con-foto .ver-contactos { background: color-mix(in srgb, var(--velo) 70%, transparent); border-color: color-mix(in srgb, var(--ivory) 35%, transparent); }
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours {
  background: linear-gradient(155deg, color-mix(in srgb, var(--noche) 85%, #fff) 0%, color-mix(in srgb, var(--noche) 70%, var(--velo)) 100%);
  border-color: color-mix(in srgb, var(--verde-claro) 60%, transparent);
}
html[data-rubro="tours"] #view-inicio.con-foto .tarjeta-seccion[data-goto="infogeneral"] { background: color-mix(in srgb, var(--velo) 72%, transparent); }

/* Tours en modo oscuro: neutros azulados (no verdes) y tarjetas de propuesta legibles */
html[data-rubro="tours"][data-tema="oscuro"] {
  --cream:#0A1224; --white:#121C33; --stone:#22304F; --stone-line:#2B3B5E;
  --moss-deep:#C9DAFF; --moss:#8DB1FF; --moss-soft:#7FA0E0; --moss-tint:#16233F; --ambar-oscuro:#C9DAFF;
}
html[data-rubro="tours"][data-tema="oscuro"] body { background:#070D1C; }
html[data-rubro="tours"][data-tema="oscuro"] .section-sub,
html[data-rubro="tours"][data-tema="oscuro"] .contact-item .ct-label,
html[data-rubro="tours"][data-tema="oscuro"] .estado-vacio p,
html[data-rubro="tours"][data-tema="oscuro"] .menu-desc { color:#A9B6D3; }
html[data-rubro="tours"][data-tema="oscuro"] .tour-card { border-color:#2B3B5E; border-top-color:var(--ambar); box-shadow:none; }
html[data-rubro="tours"][data-tema="oscuro"] .tour-nombre { color:#fff; }
html[data-rubro="tours"][data-tema="oscuro"] .tour-card .tour-dur { color:var(--verde-claro); opacity:1; }
html[data-rubro="tours"][data-tema="oscuro"] .tour-card .lugar-desc { color:#D5DDF0; opacity:1; }
html[data-rubro="tours"][data-tema="oscuro"] .tour-precio-grande { background:var(--ambar); color:#0B1B3A; }


/* ===== Tours: diseño "Cartel" =====
   Portada clara: foto grande arriba con esquinas redondeadas, tarjeta de acción
   que la pisa, tours como tarjetas con foto, traslados como banner azul. */
.cartel-tours { display: none; }
html[data-rubro="tours"][data-paleta="cartel"] #app.en-portada, html[data-rubro="tours"][data-paleta="cartel"] #view-inicio { background: #F5F6F9; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio { padding: 0 0 16px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio.con-foto::before, html[data-rubro="tours"][data-paleta="cartel"] #view-inicio.con-foto::after { display: none; }
html[data-rubro="tours"][data-paleta="cartel"] .cartel-tours { display: block; order: 3; }
html[data-rubro="tours"][data-paleta="cartel"] .cartel-tours[hidden] { display: none; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada { padding: 0; color: #0B1B3A; font-family: 'Poppins', 'Work Sans', sans-serif; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-hero {
  position: relative; min-height: 430px; padding: 0 20px 76px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  border-radius: 0 0 34px 34px; overflow: hidden; background-color: #34456F;
  background-image: linear-gradient(180deg, rgba(10,16,32,.42) 0%, rgba(10,16,32,0) 30%, rgba(10,16,32,.72) 100%), var(--foto-portada, none);
  background-size: cover; background-position: center;
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-portada { position: absolute; top: 28px; left: 20px; margin: 0; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-nombre-portada { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-titulo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -.03em; color: #fff; max-width: 14ch; margin: 0; }
/* Tarjeta de acción que pisa la foto */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .barra-contacto {
  order: 1; position: relative; z-index: 3; margin: -52px 16px 0; padding: 14px;
  grid-template-columns: 1fr; gap: 10px; background: #fff; border-radius: 24px;
  box-shadow: 0 14px 34px rgba(16,26,56,.14);
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto { min-height: 52px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto[href*="wa.me"] { background: #2E4A9E; border-color: #2E4A9E; color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto[href*="wa.me"] svg { stroke: #fff; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto[href^="tel:"] { background: transparent; border: 1.5px solid #D8DEEB; color: #2E4A9E; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto[href^="tel:"] svg { stroke: #2E4A9E; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .ver-contactos {
  background: none; border: 0; box-shadow: none; color: #2E4A9E; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0; padding: 10px 6px 2px; min-height: 0;
  text-decoration: underline; text-underline-offset: 4px; display: block; width: auto; justify-self: center;
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .ver-contactos::after { content: none; }
/* Carrusel de tours */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 28px 20px 14px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab h2 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: #0B1B3A; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-vt { background: none; border: 0; padding: 6px 2px; font: 600 14px 'Poppins', sans-serif; color: #2E4A9E; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-sc { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 16px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-sc::-webkit-scrollbar { display: none; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card {
  flex: none; width: 236px; scroll-snap-align: start; padding: 0; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: #0B1B3A; background: #fff; border-radius: 22px; box-shadow: 0 8px 20px rgba(16,26,56,.08);
  transition: transform 120ms cubic-bezier(.23,1,.32,1);
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card:active { transform: scale(.98); }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .ft { height: 200px; margin: 8px; border-radius: 16px; background-size: cover; background-position: center; background-color: #C9D6F2; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .ft.sin-foto { background-image: linear-gradient(160deg, #A9B8DD, #5C73B3); }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .inf { padding: 6px 16px 16px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .n { font-weight: 700; font-size: 17.5px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 8px; overflow-wrap: anywhere; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .m { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #5C6B8C; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .m b { font-size: 17px; font-weight: 700; color: #2E4A9E; font-variant-numeric: tabular-nums; }
/* Traslados e Info general */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .directorio { order: 2; margin-top: 0; padding: 14px 16px 0; grid-template-columns: 1fr; gap: 12px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] { display: none !important; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion.solo-tours {
  flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 18px; border-radius: 24px;
  background: #fff; border: 1px solid #D8DEEB; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #0B1B3A;
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion.solo-tours svg { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: #EEF1F8; stroke: #2E4A9E; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion.solo-tours .ts-nombre { flex: 1; margin: 0; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: #0B1B3A; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion.solo-tours .ts-dato { margin: 0; background: #EEF1F8; color: #3C4A6B; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion.solo-tours::after { content: "→"; font-size: 20px; color: #2E4A9E; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] {
  background: #fff; border: 1px solid #D8DEEB; border-radius: 24px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #0B1B3A;
}
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { color: #0B1B3A; font-family: 'Poppins', sans-serif; font-weight: 600; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] svg { stroke: #2E4A9E; background: #EEF1F8; }
/* Títulos del resto de las pantallas con la misma tipografía */
html[data-rubro="tours"][data-paleta="cartel"] .section-title, html[data-rubro="tours"][data-paleta="cartel"] .tour-nombre { font-family: 'Poppins', sans-serif; letter-spacing: -.02em; }

/* Cartel en modo oscuro */
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #app.en-portada, html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio { background: #070D1C; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada { color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .barra-contacto { background: #121C33; border: 1px solid #2B3B5E; box-shadow: none; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .accion-contacto[href*="wa.me"] { background: #3A5BC4; border-color: #3A5BC4; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .accion-contacto[href^="tel:"] { border-color: #2B3B5E; color: #BFD4FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .accion-contacto[href^="tel:"] svg { stroke: #BFD4FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .ver-contactos, html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .cartel-vt { color: #BFD4FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .cartel-cab h2 { color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .cartel-card { background: #121C33; color: #fff; box-shadow: none; border: 1px solid #2B3B5E; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .cartel-card .m { color: #A9B6D3; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .cartel-card .m b { color: #8DB1FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] { background: #121C33; border-color: #2B3B5E; color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] svg { background: #16233F; stroke: #8DB1FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion.solo-tours { background: #121C33; border-color: #2B3B5E; color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion.solo-tours .ts-nombre { color: #fff; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion.solo-tours svg { background: #16233F; stroke: #8DB1FF; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion.solo-tours .ts-dato { background: #16233F; color: #C9D6F2; }
html[data-rubro="tours"][data-paleta="cartel"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion.solo-tours::after { color: #8DB1FF; }

/* Cartel: logo más grande */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-portada { top: 24px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-logo-portada { height: 92px; max-width: 80%; opacity: 1; object-fit: contain; object-position: left center; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-nombre-portada { font-size: 24px; }
/* Cartel: carrusel de tours debajo de traslados e info */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab { padding-top: 26px; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-vt { min-height: 44px; display: inline-flex; align-items: center; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card { width: 244px; }

/* Detalle de tour: hoja desde abajo con galería en carrusel */
.dlg-tour { margin: auto auto 0; width: min(100vw, 480px); max-width: 100vw; max-height: 92vh; padding: 0; border: 0; border-radius: 26px 26px 0 0; overflow: auto; background: #fff; color: #0B1B3A; font-family: 'Poppins', 'Work Sans', sans-serif; }
.dlg-tour::backdrop { background: rgba(10,16,32,.6); }
.dt-gal-wrap { position: relative; }
.dt-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3; scrollbar-width: none; background: #C9D6F2; }
.dt-gal::-webkit-scrollbar { display: none; }
.dt-gal img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.dt-sin { flex: none; width: 100%; background: linear-gradient(160deg, #A9B8DD, #5C73B3); }
.dt-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(10,16,32,.55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dt-x svg { width: 20px; height: 20px; }
.dt-pos { position: absolute; right: 14px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(10,16,32,.6); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-body { padding: 20px 20px 24px; }
.dt-body h3 { margin: 0 0 10px; font-family: "Poppins", system-ui, sans-serif; font-size: 24px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dt-meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.dt-meta b { font-size: 22px; font-weight: 700; color: #2E4A9E; font-variant-numeric: tabular-nums; }
.dt-meta span { font-size: 14px; color: #5C6B8C; }
.dt-body p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: #3C4A6B; white-space: pre-line; }
.dt-body p:empty { display: none; }
.dt-wa { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: #2E4A9E; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.dt-wa:active { transform: scale(.98); }
html[data-tema="oscuro"] .dlg-tour { background: #121C33; color: #fff; }
html[data-tema="oscuro"] .dt-meta b { color: #8DB1FF; }
html[data-tema="oscuro"] .dt-meta span, html[data-tema="oscuro"] .dt-body p { color: #B7C3DD; }
html[data-tema="oscuro"] .dt-wa { background: #3A5BC4; }

html[data-lista="vertical"][data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-sc { display: block; overflow: visible; padding: 4px 16px 20px; scroll-snap-type: none; }
html[data-lista="vertical"] .c2 { background: #fff; border: 1px solid #E4E8F1; border-radius: 24px; padding: 18px 0; margin: 0 0 14px; box-shadow: 0 6px 22px rgba(16,26,56,.08); }
html[data-lista="vertical"] .c2 h3 { margin: 0; padding: 0 18px; font: 700 20px/1.15 'Poppins', sans-serif; letter-spacing: -.02em; color: #0B1B3A; overflow-wrap: anywhere; }
html[data-lista="vertical"] .c2-dur { padding: 6px 18px 0; font-size: 13.5px; font-weight: 600; color: #5C6B8C; }
html[data-lista="vertical"] .c2-desc { margin: 0; padding: 10px 18px 0; font-size: 14.5px; line-height: 1.55; color: #3C4A6B; white-space: pre-line; }
html[data-lista="vertical"] .c2-hist { display: flex; gap: 8px; overflow-x: auto; padding: 14px 18px 2px; scroll-snap-type: x proximity; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html[data-lista="vertical"] .c2-hist::-webkit-scrollbar { display: none; }
html[data-lista="vertical"] .c2-t { flex: none; position: relative; width: 128px; aspect-ratio: 9 / 15; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #C9D6F2 center / cover no-repeat; scroll-snap-align: start; cursor: pointer; transition: transform .15s; }
html[data-lista="vertical"] .c2-t:active { transform: scale(.97); }
html[data-lista="vertical"] .c2-t video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
html[data-lista="vertical"] .c2-t .pl { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); }
html[data-lista="vertical"] .c2-t .pl::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
html[data-lista="vertical"] .c2-precio { padding: 14px 18px 0; font: 700 22px 'Poppins', sans-serif; color: #2E4A9E; font-variant-numeric: tabular-nums; }
html[data-lista="vertical"][data-tema="oscuro"] .c2 { background: #121C33; border-color: #2B3B5E; box-shadow: none; }
html[data-lista="vertical"][data-tema="oscuro"] .c2 h3 { color: #fff; }
html[data-lista="vertical"][data-tema="oscuro"] .c2-dur { color: #A9B6D3; }
html[data-lista="vertical"][data-tema="oscuro"] .c2-desc { color: #B7C3DD; }
html[data-lista="vertical"][data-tema="oscuro"] .c2-precio { color: #8DB1FF; }
@media (prefers-reduced-motion: reduce) { html[data-lista="vertical"] .c2-t { transition: none; } }
.dt-gal video { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; background: #000; }

/* Visor a pantalla completa (tipo historia) */
.dlg-visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
.dlg-visor::backdrop { background: #000; }
.vs-pista { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vs-pista::-webkit-scrollbar { display: none; }
.vs-pista > * { flex: none; width: 100vw; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; background: #000; }
.vs-barras { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; }
.vs-barras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }
.vs-barras i.on { background: #fff; }
.vs-x { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vs-nav { position: absolute; z-index: 2; top: 80px; bottom: 150px; width: 22%; border: 0; background: none; cursor: pointer; }
.vs-prev { left: 0; } .vs-next { right: 0; }
.vs-pie { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.vs-tit { font: 700 17px/1.2 'Poppins', sans-serif; margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.vs-wa { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: #2E4A9E; color: #fff; font: 600 15px 'Poppins', sans-serif; text-decoration: none; }
.vs-wa[hidden] { display: none; }

/* ---------- Promociones (rubro tours): sobre los tours, en cualquier diseño ---------- */
.promo-tours { display: none; }
html[data-rubro="tours"] .promo-tours { display: block; order: 3; margin: 22px 0 0; padding: 16px 0 6px; background: linear-gradient(180deg, #FFF4E5, #FFE7C7); color: #3A2410; }
html[data-rubro="tours"] .promo-tours[hidden] { display: none; }
.promo-tit { margin: 0; padding: 0 20px 12px; font: 700 22px/1.1 'Poppins', sans-serif; letter-spacing: -.02em; color: #7A3200; }
.promo-sc { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 16px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.promo-sc::-webkit-scrollbar { display: none; }
.promo-card { flex: none; width: 244px; scroll-snap-align: start; padding: 0; border: 2px solid #E4572E; border-radius: 22px; background: #fff; color: #1B1B1B; text-align: left; cursor: pointer; font: inherit; overflow: hidden; }
.promo-card:active { transform: scale(.98); }
.promo-card .ft { position: relative; height: 180px; margin: 8px; border-radius: 15px; background: #FFD9B0 center / cover; }
.promo-card .ft.sin-foto { background-image: linear-gradient(160deg, #FFC48A, #E4572E); }
.pr-badge { position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 99px; background: #E4572E; color: #fff; font: 700 12px 'Poppins', sans-serif; letter-spacing: .06em; }
.pr-cal { position: absolute; top: 8px; right: 8px; width: 46px; border-radius: 10px; overflow: hidden; background: #fff; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.pr-cal i { display: block; padding: 2px 0; background: #D62F2F; color: #fff; font: 700 10px 'Poppins', sans-serif; font-style: normal; letter-spacing: .08em; }
.pr-cal b { display: block; padding: 2px 0 4px; font: 700 20px/1 'Poppins', sans-serif; color: #1B1B1B; }
.promo-card .inf { padding: 4px 14px 14px; }
.promo-card .n { font-weight: 700; font-size: 17px; line-height: 1.15; margin-bottom: 4px; overflow-wrap: anywhere; }
.pr-hasta { font-size: 12.5px; font-weight: 600; color: #B3361A; margin-bottom: 6px; }
.promo-card .m { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #6B5A4A; }
.promo-card .m s { color: #8A7B6C; font-size: 13px; }
.promo-card .m b { font-size: 18px; color: #D62F2F; font-variant-numeric: tabular-nums; }
html[data-tema="oscuro"][data-rubro="tours"] .promo-tours { background: linear-gradient(180deg, #2A1708, #1F1206); color: #fff; }
html[data-tema="oscuro"] .promo-tit { color: #FFB877; }
html[data-tema="oscuro"] .promo-card { background: #1C1209; color: #fff; }
html[data-tema="oscuro"] .promo-card .m, html[data-tema="oscuro"] .promo-card .m s { color: #D1BBA3; }
html[data-tema="oscuro"] .promo-card .m b { color: #FF8A6B; }
html[data-tema="oscuro"] .pr-hasta { color: #FFA98F; }

/* ---------- Precio: monto grande + etiqueta "por persona / por viaje" ---------- */
.pr { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pr .pd { font: 600 11px 'Poppins', sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.pr .pm { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pr .pu { margin-top: 4px; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; font: 600 10.5px/1.3 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: .05em; opacity: .75; white-space: nowrap; }
.c2-precio .pr, #dtPrecio .pr, .tour-precio-grande .pr { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.c2-precio .pm { font-size: 26px; } #dtPrecio .pm { font-size: 24px; }
.c2-precio .pu, #dtPrecio .pu, .tour-precio-grande .pu { margin-top: 0; }
.promo-card .m .pr { font-size: 18px; }
.dt-meta .pr span { color: inherit; font-size: inherit; }
.dt-meta .pr .pm { font-size: 24px; } .dt-meta .pr .pu { font-size: 10.5px; }

/* ---------- Pantalla de entrada Alder (sin código de negocio): azul grisáceo del logo ---------- */
.entrada { --e-bg:#121B29; --e-ink:#F1F4F9; --e-mut:#9FB0C8; --e-acc:#9DB8DA; --e-ease:cubic-bezier(.23,1,.32,1);
  position:relative; min-height:100dvh; overflow:hidden; display:flex; flex-direction:column; background:var(--e-bg); color:var(--e-ink);
  font-family:'Poppins',sans-serif; padding:max(60px,env(safe-area-inset-top)) 28px max(40px,env(safe-area-inset-bottom)); }
.en-halo { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 46% at 85% 8%,rgba(110,145,190,.26),transparent 62%),radial-gradient(70% 40% at 0% 100%,rgba(70,100,150,.18),transparent 60%); }
.en-mark { position:absolute; right:-118px; top:70px; width:380px; max-width:none; opacity:.10; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 72%); mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 72%); }
.en-logo { position:relative; width:84px; height:auto; }
.en-main { position:relative; margin-top:auto; padding-top:48px; max-width:420px; width:100%; }
.en-main h1 { font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(34px,10.3vw,42px); line-height:1.04; letter-spacing:-.035em; margin:0 0 12px; text-wrap:balance; color:var(--e-ink); }
.en-main h1 b { color:var(--e-acc); font-weight:600; }
.en-sub { font-size:15px; line-height:1.5; color:var(--e-mut); max-width:292px; margin:0 0 30px; }
.en-form { display:block; }
.en-form label { display:block; font-size:12.5px; font-weight:500; color:#C5D1E2; margin-bottom:8px; letter-spacing:.01em; }
.en-form input { display:block; width:100%; height:58px; border:0; border-radius:18px; background:#1A2638; padding:0 18px; margin-bottom:12px;
  font:500 17px 'Poppins',sans-serif; color:var(--e-ink); box-shadow:0 0 0 1px rgba(157,184,218,.22),inset 0 1px 0 rgba(255,255,255,.05);
  transition:box-shadow .18s var(--e-ease); }
.en-form input::placeholder { color:#7F92AC; font-weight:400; }
.en-form input:focus { outline:none; box-shadow:0 0 0 1.5px var(--e-acc),0 0 0 5px rgba(157,184,218,.16),inset 0 1px 0 rgba(255,255,255,.05); }
.en-form button { display:flex; width:100%; height:58px; align-items:center; justify-content:center; border:0; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg,#B3C9E6,#97B3D6); color:#0E1726; font:600 16.5px 'Poppins',sans-serif; letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -10px rgba(110,150,205,.38); transition:transform .16s var(--e-ease); }
.en-form button:active { transform:scale(.97); }
.en-form .pe-error { color:#F0B4AD; font-size:13px; min-height:0; margin:10px 0 0; }
.en-form .pe-error:empty { display:none; }
.en-hint { margin:16px 0 0; font-size:12.5px; color:#7F92AC; }
.en-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(157,184,218,.12); }
.en-chips span { font-size:12px; font-weight:500; color:#A9B8CE; background:rgba(157,184,218,.08); border-radius:999px; padding:7px 14px; box-shadow:inset 0 0 0 1px rgba(157,184,218,.14); }
/* Entrada escalonada: aparece de a una pieza, rápida */
@keyframes en-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) {
  .en-logo,.en-main h1,.en-sub,.en-form,.en-hint,.en-chips { animation:en-in .32s var(--e-ease) backwards; }
  .en-main h1 { animation-delay:50ms; } .en-sub { animation-delay:100ms; } .en-form { animation-delay:150ms; } .en-hint { animation-delay:200ms; } .en-chips { animation-delay:250ms; }
}
/* Pantallas de estado (sin conexión, no disponible) con la misma paleta */
.pantalla-estado { background:#121B29; color:#F1F4F9; }
.pantalla-estado .pe-logo { height:56px; opacity:1; margin-bottom:20px; }
.pantalla-estado h1 { font-family:'Poppins',sans-serif; font-weight:600; font-size:22px; letter-spacing:-.02em; color:#F1F4F9; }
.pantalla-estado p, .pe-detalle { color:#9FB0C8; }

/* ---------- Pulido de interacción (guía de tours) ---------- */
/* Hojas y visor: entran y salen con animación (entrada 320ms, salida más rápida); el modal de reserva queda centrado */
:root { --ease-out-fuerte: cubic-bezier(.23,1,.32,1); --ease-hoja: cubic-bezier(.32,.72,0,1); }
.dlg-tour, .dlg-visor, .dlg-reserva { transition: transform 200ms var(--ease-out-fuerte), opacity 200ms var(--ease-out-fuerte), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.dlg-tour::backdrop, .dlg-rec::backdrop, .dlg-visor::backdrop, .dlg-reserva::backdrop { transition: opacity 200ms var(--ease-out-fuerte), overlay 200ms allow-discrete, display 200ms allow-discrete; opacity: 1; }
.dlg-tour:not([open]) { transform: translateY(100%); }
.dlg-visor:not([open]) { opacity: 0; transform: scale(.98); }
.dlg-reserva:not([open]) { opacity: 0; transform: scale(.96); }
.dlg-tour:not([open])::backdrop, .dlg-rec:not([open])::backdrop, .dlg-visor:not([open])::backdrop, .dlg-reserva:not([open])::backdrop { opacity: 0; }
.dlg-tour[open] { transition-duration: 320ms; transition-timing-function: var(--ease-hoja); }
.dlg-visor[open], .dlg-reserva[open] { transition-duration: 240ms; }
.dlg-tour[open]::backdrop, .dlg-visor[open]::backdrop, .dlg-reserva[open]::backdrop { transition-duration: 280ms; }
@starting-style {
  .dlg-tour[open] { transform: translateY(100%); }
  .dlg-visor[open] { opacity: 0; transform: scale(.98); }
  .dlg-reserva[open] { opacity: 0; transform: scale(.96); }
  .dlg-tour[open]::backdrop, .dlg-visor[open]::backdrop, .dlg-reserva[open]::backdrop { opacity: 0; }
}
/* Toque: sin destello gris de Android; las tarjetas y botones responden al instante */
.promo-card, .cartel-card, .c2-t, .dt-wa, .btn-wa-tour, .btn-reservar, .cartel-vt, .vs-wa, .vs-nav, .vs-x { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.promo-card { transition: transform 120ms var(--ease-out-fuerte); }
.dt-wa, .btn-wa-tour, .vs-wa { transition: transform 120ms var(--ease-out-fuerte), filter 160ms ease; }
.dt-wa:active, .btn-wa-tour:active, .vs-wa:active { transform: scale(.97); }
.promo-card:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .dlg-tour, .dlg-visor, .dlg-reserva { transition-property: opacity, overlay, display; }
  .dlg-tour:not([open]) { transform: none; opacity: 0; }
  .dlg-visor:not([open]), .dlg-reserva:not([open]) { transform: none; }
  @starting-style { .dlg-tour[open] { transform: none; opacity: 0; } .dlg-visor[open], .dlg-reserva[open] { transform: none; } }
  .promo-card, .dt-wa, .btn-wa-tour, .vs-wa { transition: none; }
}

/* Crítica impeccable: jerarquía de precio, acento único, formulario, orden */
/* orden portada tours: contacto → promos → tours → traslados/info */
html[data-rubro="tours"] .promo-tours { order: 2; }
html[data-rubro="tours"][data-paleta="cartel"] .cartel-tours, html[data-rubro="tours"] .cartel-tours { order: 3; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .directorio { order: 4; margin-top: 8px; }
html[data-lista="vertical"] .cartel-vt { display: none; }
/* Promociones: sin bloque durazno, un solo acento (#D9441F) */
html[data-rubro="tours"] .promo-tours { background: none; color: inherit; padding-top: 4px; }
.promo-tit { color: #0B1B3A; }
html[data-tema="oscuro"] .promo-tit { color: #fff; }
html[data-tema="oscuro"][data-rubro="tours"] .promo-tours { background: none; }
.promo-card { border-color: #D9441F; }
.pr-badge { background: #D9441F; }
.pr-cal i { background: #D9441F; }
.promo-sc:has(.promo-card:only-child) .promo-card { width: 100%; }
.promo-card .m { align-items: flex-end; }
.promo-card .m .pp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.promo-card .m b { color: #D9441F; }
html[data-tema="oscuro"] .promo-card { background: #121C33; }
html[data-tema="oscuro"] .promo-card .m b { color: #FF8A6B; }
html[data-tema="oscuro"] .promo-card .m, html[data-tema="oscuro"] .promo-card .m s { color: #B7C3DD; }
.promo-card .pr .pu { opacity: .9; }
/* detalle: promo grande, original chico y apagado; duración abajo */
.dt-meta { flex-wrap: wrap; row-gap: 6px; }
#dtPrecio { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#dtPrecio s { font-size: 15px; font-weight: 500; color: #7A869F; }
#dtPrecio:has(s) .pr, #dtPrecio:has(s) .pm { color: #D9441F; }
#dtDur { flex-basis: 100%; }
html[data-tema="oscuro"] #dtPrecio s { color: #93A0BC; }
html[data-tema="oscuro"] #dtPrecio:has(s) .pr { color: #FF8A6B; }
/* lista vertical: precio junto al nombre */
html[data-lista="vertical"] .c2-precio { padding: 6px 18px 0; }
/* formulario de reserva */
.dlg-reserva { font-family: 'Poppins', system-ui, sans-serif; color: #0B1B3A; background: #fff; border-radius: 22px; padding: 22px 20px; }
.dlg-reserva:focus { outline: none; }
.dlg-reserva h3 { font: 700 18px/1.2 'Poppins', sans-serif; letter-spacing: -.01em; color: #0B1B3A; margin: 0 0 14px; }
.dlg-reserva label { font-size: 13px; font-weight: 600; color: #3C4A6B; margin-bottom: 12px; }
.dlg-reserva input, .dlg-reserva textarea { min-height: 46px; font-size: 16px; font-weight: 400; color: #0B1B3A; border: 1.5px solid #D8DEEB; border-radius: 12px; padding: 10px 12px; margin-top: 5px; outline: none; transition: border-color 150ms, box-shadow 150ms; }
.dlg-reserva textarea { resize: none; min-height: 72px; }
.dlg-reserva input:focus, .dlg-reserva textarea:focus { border-color: #2E4A9E; box-shadow: 0 0 0 3px rgba(46,74,158,.18); }
.dlg-nota { margin: 0 0 14px; font-size: 12.5px; color: #5C6B8C; }
.dlg-acciones { gap: 10px; margin-top: 0; }
.dlg-acciones button { min-height: 48px; font-family: 'Poppins', sans-serif; font-size: 15px; padding: 0 16px; }
.dlg-sec { flex: 1; border: 1.5px solid #D8DEEB !important; color: #3C4A6B; }
.dlg-ok { flex: 1.6; background: #2E4A9E; color: #fff; }
html[data-tema="oscuro"] .dlg-reserva { background: #121C33; color: #fff; }
html[data-tema="oscuro"] .dlg-reserva h3, html[data-tema="oscuro"] .dlg-reserva input, html[data-tema="oscuro"] .dlg-reserva textarea { color: #fff; }
html[data-tema="oscuro"] .dlg-reserva label, html[data-tema="oscuro"] .dlg-sec, html[data-tema="oscuro"] .dlg-nota { color: #B7C3DD; }
html[data-tema="oscuro"] .dlg-reserva input, html[data-tema="oscuro"] .dlg-reserva textarea, html[data-tema="oscuro"] .dlg-sec { border-color: #2B3B5E !important; }
html[data-tema="oscuro"] .dlg-reserva input:focus, html[data-tema="oscuro"] .dlg-reserva textarea:focus { border-color: #8DB1FF; box-shadow: 0 0 0 3px rgba(141,177,255,.22); }
html[data-tema="oscuro"] .dlg-ok { background: #3A5BC4; }
.dlg-fila { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.dlg-reserva input { min-width: 0; }
.dlg-acciones button { font-size: 14px; white-space: nowrap; padding: 0 12px; }
.dlg-sec { flex: 1 1 0; } .dlg-ok { flex: 1.5 1 0; }
.dlg-reserva input[type=date], .dlg-reserva input[type=time] { font-size: 15px; padding-inline: 10px; }

/* Tours: "Dejanos tu reseña" legible sobre la tarjeta blanca (antes usaba el azul pálido) */
html[data-rubro="tours"]:not([data-tema="oscuro"]) .btn-resenas { color: var(--ambar-oscuro); border-color: var(--ambar-oscuro); background: #fff; }
.promo-card .vig { margin: 4px 0 2px; font-size: 13.5px; font-weight: 600; color: #D9441F; }

/* ---------- Tours: horario, "Ver recorrido" y pantalla del recorrido ---------- */
.dt-hor { margin: -4px 0 12px; font-size: 14px; font-weight: 600; color: #2E4A9E; }
.dt-rec, .c2-rec { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; margin: 0 0 12px; border: 2px solid #2E4A9E; border-radius: 999px; background: transparent; color: #2E4A9E; font: 600 15px 'Poppins', sans-serif; cursor: pointer; transition: transform 160ms var(--ease-out-fuerte); }
.dt-rec:active, .c2-rec:active { transform: scale(.97); }
.dt-rec[hidden] { display: none; }
html[data-lista="vertical"] .c2-rec { width: calc(100% - 36px); margin: 12px 18px 0; }
html[data-tema="oscuro"] .dt-hor { color: #8DB1FF; }
html[data-tema="oscuro"] .dt-rec, html[data-tema="oscuro"] .c2-rec { border-color: #8DB1FF; color: #8DB1FF; }

.dlg-rec { margin: auto auto 0; width: min(100vw, 480px); max-width: 100vw; max-height: 96vh; padding: 0; border: 0; border-radius: 26px 26px 0 0; overflow: auto; overscroll-behavior: contain; background: #fff; color: #0B1B3A; font-family: 'Poppins', sans-serif; transition: transform 200ms var(--ease-out-fuerte), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.dlg-rec::backdrop { background: rgba(10,16,32,.6); }
.dlg-rec:not([open]) { transform: translateY(100%); }
.dlg-rec[open] { transition-duration: 320ms; transition-timing-function: var(--ease-hoja); }
@starting-style { .dlg-rec[open] { transform: translateY(100%); } }
.dlg-rec .dt-gal-wrap::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(11,27,58,.88)); pointer-events: none; }
.rc-ov { position: absolute; left: 20px; right: 70px; bottom: 16px; z-index: 1; color: #fff; pointer-events: none; }
.rc-ov h3 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; color: #fff; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rc-hor { display: flex; gap: 20px; }
.rc-hor span { display: flex; flex-direction: column; }
.rc-hor small { font-size: 12px; opacity: .85; }
.rc-hor b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-tar { margin-top: 6px; }
.rc-tar .pr, .rc-tar .pr span { color: #fff; }
.rc-tar .pr { align-items: flex-start; padding-left: 0; }
.dlg-rec .dt-pos { z-index: 1; }
.rc-lista { list-style: none; margin: 0; padding: 22px 20px 28px; }
.rc-p { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.rc-p:last-child { padding-bottom: 0; }
.rc-p:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 2px; border-left: 2px dashed #C9D6F2; }
.rc-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2E4A9E; color: #fff; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 3px #2E4A9E, inset 0 0 0 4.5px #fff; }
.rc-p:last-child .rc-n { background: #D9441F; box-shadow: inset 0 0 0 3px #D9441F, inset 0 0 0 4.5px #fff; }
.rc-p b { display: block; padding-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.rc-p p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: #3C4A6B; white-space: pre-line; }
/* La ruta se dibuja: cada sello aparece y su tramo baja hasta el siguiente (solo transform y opacity) */
.dlg-rec[open] .rc-p { animation: rcIn 280ms var(--ease-out-fuerte) both; animation-delay: calc(min(var(--i), 7) * 45ms + 140ms); }
.dlg-rec[open] .rc-n { animation: rcSello 280ms var(--ease-out-fuerte) both; animation-delay: inherit; }
.rc-p:not(:last-child)::before { transform-origin: top; }
.dlg-rec[open] .rc-p:not(:last-child)::before { animation: rcTramo 260ms var(--ease-out-fuerte) both; animation-delay: calc(min(var(--i), 7) * 45ms + 220ms); }
@keyframes rcIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes rcSello { from { transform: scale(.85); } }
@keyframes rcTramo { from { transform: scaleY(0); } }
.rc-hor, .rc-tar, .rc-ov h3 { text-wrap: balance; }
.rc-p p { text-wrap: pretty; }
.dlg-rec .dt-x:active { transform: scale(.94); }
.dlg-rec .dt-x { transition: transform 160ms var(--ease-out-fuerte); }
@media (prefers-reduced-motion: reduce) {
  .dlg-rec[open] .rc-p { animation: rcFade 200ms ease both; }
  .dlg-rec[open] .rc-n, .dlg-rec[open] .rc-p::before { animation: none; }
  .dlg-rec { transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
  .dlg-rec:not([open]) { transform: none; opacity: 0; }
  @starting-style { .dlg-rec[open] { transform: none; opacity: 0; } }
}
@keyframes rcFade { from { opacity: 0; } }
html[data-tema="oscuro"] .dlg-rec { background: #121C33; color: #fff; }
html[data-tema="oscuro"] .rc-p p { color: #B7C3DD; }
html[data-tema="oscuro"] .rc-p:not(:last-child)::before { border-color: #2B3B5E; }

/* Tarjetas de tours: recuadro alrededor y botón "Consultar disponibilidad" */
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card { border: 1.5px solid #C9D6F2; overflow: hidden; display: flex; flex-direction: column; cursor: default; }
html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card:active { transform: none; }
.cc-abre { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out-fuerte); }
.cc-abre:active { transform: scale(.98); }
.btn-disp { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 999px; background: #2E4A9E; color: #fff; font: 600 14.5px 'Poppins', sans-serif; cursor: pointer; transition: transform 160ms var(--ease-out-fuerte); margin: 4px 14px 14px; }
.btn-disp:active { transform: scale(.97); }
html[data-lista="vertical"] .btn-disp { width: calc(100% - 36px); margin: 12px 18px 0; }
html[data-lista="vertical"] .c2 { border: 1.5px solid #C9D6F2; }
html[data-tema="oscuro"] .btn-disp { background: #3A5BC4; }

/* ---------- Animaciones del huésped (hotel y tours) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* La portada se arma una sola vez, al abrir la guía. Al volver al inicio
     desde una sección ya no se repite: se ve cientos de veces por día. */
  #app:not(.intro) .saludo,
  #app:not(.intro) .portada-titulo,
  #app:not(.intro) .portada-sub,
  #app:not(.intro) .wifi-list { animation: none; }
  #app.intro .saludo,
  #app.intro .portada-titulo,
  #app.intro .portada-sub,
  #app.intro .wifi-list { animation-duration: .42s; animation-timing-function: var(--ease-out-fuerte); }

  /* Hotel: las secciones entran en cascada, corta (30-50ms entre una y otra) */
  #app.intro .tarjeta-seccion,
  #app.intro .accion-contacto,
  #app.intro .ver-contactos { animation: entrada .36s var(--ease-out-fuerte) backwards; animation-delay: 200ms; }
  #app.intro .tarjeta-seccion:nth-child(2) { animation-delay: 240ms; }
  #app.intro .tarjeta-seccion:nth-child(3) { animation-delay: 280ms; }
  #app.intro .tarjeta-seccion:nth-child(4) { animation-delay: 320ms; }
  #app.intro .tarjeta-seccion:nth-child(5) { animation-delay: 360ms; }
  #app.intro .tarjeta-seccion:nth-child(n+6) { animation-delay: 400ms; }
  #app.intro .barra-contacto > * { animation-delay: 440ms; }

  /* Tours: la tarjeta de contacto sube sobre la foto y las excursiones entran una tras otra */
  #app.intro .promo-card, #app.intro .cartel-card, #app.intro .c2 { animation: entrada .38s var(--ease-out-fuerte) backwards; animation-delay: 220ms; }
  #app.intro .promo-card:nth-child(2), #app.intro .cartel-card:nth-child(2), #app.intro .c2:nth-child(2) { animation-delay: 270ms; }
  #app.intro .promo-card:nth-child(3), #app.intro .cartel-card:nth-child(3), #app.intro .c2:nth-child(3) { animation-delay: 320ms; }
  #app.intro .promo-card:nth-child(n+4), #app.intro .cartel-card:nth-child(n+4), #app.intro .c2:nth-child(n+4) { animation-delay: 370ms; }
  html[data-rubro="tours"] #app.intro .portada .barra-contacto { animation: entrada .42s var(--ease-out-fuerte) 120ms backwards; }

  /* Listas de las demás secciones (excursiones, traslados, menú, hoteles...) con la misma cascada */
  #toursList > *, #trasladosList > *, #hotelesList > *, #menuCategorias > *, #menuPromos > *,
  #lavanderiaCategorias > *, #infoTurismoGrupos > * { animation: entrada .36s var(--ease-out-fuerte) backwards; }
  #toursList > :nth-child(2), #trasladosList > :nth-child(2), #hotelesList > :nth-child(2), #menuCategorias > :nth-child(2),
  #lavanderiaCategorias > :nth-child(2), #infoTurismoGrupos > :nth-child(2) { animation-delay: 40ms; }
  #toursList > :nth-child(3), #trasladosList > :nth-child(3), #hotelesList > :nth-child(3), #menuCategorias > :nth-child(3),
  #lavanderiaCategorias > :nth-child(3), #infoTurismoGrupos > :nth-child(3) { animation-delay: 80ms; }
  #toursList > :nth-child(n+4), #trasladosList > :nth-child(n+4), #hotelesList > :nth-child(n+4), #menuCategorias > :nth-child(n+4),
  #lavanderiaCategorias > :nth-child(n+4), #infoTurismoGrupos > :nth-child(n+4) { animation-delay: 120ms; }

  /* Hoja del tour: el texto entra apenas después de que la hoja sube */
  .dlg-tour[open] .dt-body > * { animation: entrada .3s var(--ease-out-fuerte) backwards; animation-delay: 150ms; }
  .dlg-tour[open] .dt-body > :nth-child(2) { animation-delay: 185ms; }
  .dlg-tour[open] .dt-body > :nth-child(3) { animation-delay: 220ms; }
  .dlg-tour[open] .dt-body > :nth-child(4) { animation-delay: 255ms; }
  .dlg-tour[open] .dt-body > :nth-child(n+5) { animation-delay: 290ms; }

  /* Al redibujar con el contenido fresco no se repite la entrada de la portada */
  #app.sin-entrada :is(.accion-contacto, .ver-contactos, .promo-card, .cartel-card, .c2, .ft.foto-ok),
  #app.sin-entrada .portada .barra-contacto { animation: none; }

  /* Fotos de tours: aparecen con un desenfoque corto en vez de saltar cuando terminan de bajar */
  .ft.foto-ok { animation: fotoIn .3s var(--ease-out-fuerte) backwards; }
  @keyframes fotoIn { from { opacity: .45; filter: blur(5px); } }
}
@media (prefers-reduced-motion: reduce) {
  .hotel-detail-overlay { transform: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .hotel-detail-overlay.open { opacity: 1; transition: opacity 200ms ease, visibility 0s; }
}

/* ---------- Módulo Animaciones: botón "Vivir el recorrido" en la pantalla del recorrido ---------- */
.rc-vivir { position: relative; display: flex; align-items: center; gap: 13px; width: calc(100% - 40px); margin: 16px 20px 0; min-height: 66px; padding: 0 20px 0 12px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #2E4A9E, #5577DA); color: #fff; font-family: 'Poppins', sans-serif; text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 10px 24px -8px rgba(46, 74, 158, .55); transition: transform 160ms var(--ease-out-fuerte); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rc-vivir[hidden] { display: none; }
.rc-vivir:active { transform: scale(.97); }
.rc-vivir:disabled { opacity: .7; }
.rv-pl { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.rv-pl i { display: block; margin-left: 3px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.rv-tx b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.rv-tx small { display: block; font-size: 12px; font-weight: 500; opacity: .88; }
@media (prefers-reduced-motion: no-preference) {
  .rc-vivir::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80px; width: 60px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: rvBrillo 3.2s var(--ease-out-fuerte) 1.2s infinite; }
}
@keyframes rvBrillo { 0% { left: -80px; } 45%, 100% { left: calc(100% + 40px); } }

/* ---------- Descripción y Recomendaciones de la excursión ---------- */
.info-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.info-fila.uno { grid-template-columns: minmax(0, 1fr); }
html[data-lista="vertical"] .info-fila { margin: 10px 18px 0; }
.info-b { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 6px; border: 0; border-radius: 999px; background: #EAEFFC; color: #2E4A9E; font: 600 13.5px 'Poppins', sans-serif; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 160ms var(--ease-out-fuerte), background-color 160ms ease; }
.info-b { min-width: 0; }
.info-b svg { flex: none; width: 16px; height: 16px; }
@media (max-width: 400px) { .info-b svg { display: none; } }
.info-b:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .info-b:hover { background: #DCE5FA; } }
.info-b:focus-visible, .in-x:focus-visible { outline: 2px solid #2E4A9E; outline-offset: 2px; }
.in-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 20px 6px; }
.in-cab small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #5C6B8C; overflow-wrap: anywhere; }
.in-cab h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #0B1B3A; }
.in-x { flex: none; width: 44px; height: 44px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #EAEFFC; color: #2E4A9E; cursor: pointer; transition: transform 160ms var(--ease-out-fuerte); }
.in-x svg { width: 18px; height: 18px; }
.in-x:active { transform: scale(.94); }
.in-cuerpo { padding: 10px 20px calc(30px + env(safe-area-inset-bottom)); }
.in-txt p { margin: 0 0 14px; max-width: 65ch; font-size: 15.5px; line-height: 1.65; color: #25335A; white-space: pre-line; text-wrap: pretty; }
.in-txt p:last-child { margin-bottom: 0; }
.in-recs { list-style: none; margin: 0; padding: 0; }
.in-recs li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; font-size: 15.5px; line-height: 1.5; color: #25335A; overflow-wrap: anywhere; text-wrap: pretty; }
.in-recs li + li { border-top: 1px solid #E3E9F5; }
.in-ck { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: #EAEFFC; color: #2E4A9E; }
.in-ck svg { width: 15px; height: 15px; stroke-width: 2.6; }
.dlg-info[open] .in-recs li { animation: rcIn 280ms var(--ease-out-fuerte) both; animation-delay: calc(min(var(--i), 7) * 45ms + 120ms); }
.dlg-info[open] .in-txt p { animation: rcIn 300ms var(--ease-out-fuerte) both; animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .dlg-info[open] .in-recs li, .dlg-info[open] .in-txt p { animation: rcFade 200ms ease both; } .info-b, .in-x { transition: none; } }
html[data-tema="oscuro"] .info-b, html[data-tema="oscuro"] .in-x { background: rgba(141, 177, 255, .14); color: #8DB1FF; }
html[data-tema="oscuro"] .dlg-info { background: #121C33; color: #fff; }
html[data-tema="oscuro"] .in-cab h3 { color: #fff; }
html[data-tema="oscuro"] .in-cab small { color: #A9B6D3; }
html[data-tema="oscuro"] .in-txt p, html[data-tema="oscuro"] .in-recs li { color: #DCE4F7; }
html[data-tema="oscuro"] .in-recs li + li { border-color: #2B3B5E; }
html[data-tema="oscuro"] .in-ck { background: rgba(141, 177, 255, .14); color: #8DB1FF; }

/* Pantalla de espera mientras llegan los datos del negocio */
html.cargando #app { visibility: hidden; }
html.cargando body::before { content: ""; position: fixed; inset: 0; z-index: 9999; background: #121B29 url("alder-marca-claro.png") center / 76px auto no-repeat; animation: cargaPulso 1.1s ease-in-out infinite alternate; }
@keyframes cargaPulso { from { background-size: 70px auto; opacity: .7; } to { background-size: 78px auto; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.cargando body::before { animation: none; } }

/* Horario de salida fijo (bloqueado) o a convenir (editable) en el formulario de consulta */
.dlg-reserva input:disabled { background: #EEF1F7; color: #5C6B8C; opacity: 1; cursor: not-allowed; -webkit-text-fill-color: #5C6B8C; }
.dlg-hnota { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; font-weight: 500; color: #5C6B8C; }
.dlg-hnota[hidden] { display: none; }
html[data-tema="oscuro"] .dlg-reserva input:disabled { background: #1B2745; color: #8FA0C5; -webkit-text-fill-color: #8FA0C5; }
html[data-tema="oscuro"] .dlg-hnota { color: #A9B6D3; }

/* ---------- Pantalla de entrada: directorio desplegable por tipo + colores claros ---------- */
.en-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.en-logos .en-logo-cl { display: none; }
.en-tema { appearance: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(157, 184, 218, .12); color: var(--e-acc); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--e-ease); }
.en-tema:active { transform: scale(.94); }
.en-tema:focus-visible, .en-cab:focus-visible, .en-neg:focus-visible { outline: 2px solid var(--e-acc); outline-offset: 3px; }
.en-main { padding-top: 40px; }
.en-fila { display: flex; gap: 10px; }
.en-fila input { flex: 1; min-width: 0; margin-bottom: 0; }
.en-form .en-fila button { width: 108px; flex: none; }
.en-sep { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--e-mut); }
.en-sep::after { content: ""; flex: 1; height: 1px; background: rgba(157, 184, 218, .16); }
.en-acc { display: flex; flex-direction: column; gap: 10px; }
.en-cat { border-radius: 20px; background: #1A2638; box-shadow: inset 0 0 0 1.5px #2A3A55; overflow: hidden; transition: box-shadow .2s var(--e-ease); }
.en-cat.abierta { box-shadow: inset 0 0 0 1.5px #5C78B0; }
.en-cab { appearance: none; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.en-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #22314A; color: var(--e-acc); }
.en-tx { min-width: 0; }
.en-tx b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.en-tx small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--e-mut); }
.en-n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--e-acc); background: #22314A; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.en-n:empty { display: none; }
.en-ch { flex: none; color: var(--e-mut); transition: transform .22s var(--e-ease); }
.en-cat.abierta .en-ch { transform: rotate(180deg); }
.en-lista { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.en-lista[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .en-lista:not([hidden]) { animation: en-in .24s var(--e-ease) backwards; } }
.en-neg { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #16233A; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--e-ease); }
.en-neg:active { transform: scale(.98); }
.en-lg { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #fff; color: #2E4A9E; overflow: hidden; }
.en-lg img { max-width: 44px; max-height: 40px; object-fit: contain; }
.en-go { margin-left: auto; color: var(--e-acc); }
.en-vacio { margin: 4px 6px 0; font-size: 13px; line-height: 1.45; color: var(--e-mut); }

/* Colores claros (se elige con el botón sol/luna de arriba): gris plata frío, tinta azul marino y un solo acento acero */
html[data-entrada="claro"] .entrada { --e-bg: #E8EDF4; --e-ink: #0E1726; --e-mut: #53607B; --e-acc: #27498F; }
html[data-entrada="claro"] .entrada { background: linear-gradient(180deg, #EEF2F8 0%, #E4EAF3 100%); }
html[data-entrada="claro"] .en-halo { background: radial-gradient(90% 46% at 88% 4%, rgba(39, 73, 143, .13), transparent 62%), radial-gradient(70% 38% at 0% 100%, rgba(14, 23, 38, .07), transparent 60%); }
html[data-entrada="claro"] .en-mark { display: block; opacity: .07; filter: brightness(.25) saturate(1.4); }
html[data-entrada="claro"] .en-logos .en-logo-osc { display: none; }
html[data-entrada="claro"] .en-logos .en-logo-cl { display: block; filter: brightness(.5) saturate(1.5) contrast(1.15); }
html[data-entrada="claro"] .en-tema { background: #F7F9FC; color: #0E1726; box-shadow: 0 8px 20px -10px rgba(14, 23, 38, .35), inset 0 1px 0 #fff; }
html[data-entrada="claro"] .en-main h1 b { color: var(--e-acc); }
html[data-entrada="claro"] .en-form label { color: #2B3A58; }
html[data-entrada="claro"] .en-form input { background: #F7F9FC; color: #0E1726; box-shadow: 0 10px 24px -14px rgba(14, 23, 38, .4), inset 0 0 0 1px rgba(14, 23, 38, .1), inset 0 1px 0 #fff; }
html[data-entrada="claro"] .en-form input::placeholder { color: #66728D; }
html[data-entrada="claro"] .en-form input:focus { box-shadow: 0 0 0 2px #27498F, 0 0 0 6px rgba(39, 73, 143, .16); }
html[data-entrada="claro"] .en-form button { background: #0E1726; color: #F4F7FB; box-shadow: 0 14px 26px -12px rgba(14, 23, 38, .6), inset 0 1px 0 rgba(255, 255, 255, .14); }
html[data-entrada="claro"] .en-form .pe-error { color: #A8321A; }
html[data-entrada="claro"] .en-hint { color: #5D6A85; }
html[data-entrada="claro"] .en-sep { color: #53607B; }
html[data-entrada="claro"] .en-sep::after { background: rgba(14, 23, 38, .14); }
html[data-entrada="claro"] .en-cat { background: #F7F9FC; box-shadow: 0 14px 30px -18px rgba(14, 23, 38, .45), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(14, 23, 38, .06); }
html[data-entrada="claro"] .en-cat.abierta { box-shadow: 0 16px 34px -16px rgba(39, 73, 143, .5), inset 0 0 0 1.5px #27498F; }
html[data-entrada="claro"] .en-ic { background: #DCE5F3; color: #1D3B78; }
html[data-entrada="claro"] .en-n { background: #DCE5F3; color: #1D3B78; }
html[data-entrada="claro"] .en-tx small { color: #53607B; }
html[data-entrada="claro"] .en-ch { color: #53607B; }
html[data-entrada="claro"] .en-neg { background: #E8EEF7; }
html[data-entrada="claro"] .en-lg { background: #fff; box-shadow: 0 6px 14px -8px rgba(14, 23, 38, .4); }
html[data-entrada="claro"] .en-go { color: #27498F; }
html[data-entrada="claro"] .en-vacio { color: #53607B; }

/* ===== Tours: orden de la portada =====
   Info general arriba, Traslados debajo y recién después las promociones y las excursiones.
   La tarjeta "Excursiones" sobra: el carrusel de abajo ya tiene su "Ver todos". */
html[data-rubro="tours"][data-paleta] #view-inicio .portada .directorio, html[data-rubro="tours"] #view-inicio .portada .directorio { order: 2; margin-top: 8px; }
html[data-rubro="tours"][data-paleta] #view-inicio .portada .promo-tours, html[data-rubro="tours"] #view-inicio .portada .promo-tours { order: 3; }
html[data-rubro="tours"][data-paleta] #view-inicio .portada .cartel-tours, html[data-rubro="tours"] #view-inicio .portada .cartel-tours { order: 4; }
html[data-rubro="tours"] .tarjeta-seccion[data-goto="tours"] { display: none !important; }
html[data-rubro="tours"] .tarjeta-seccion[data-goto="infogeneral"] { order: 1; }
html[data-rubro="tours"] #view-inicio .tarjeta-seccion.solo-tours[data-goto="traslados"] { order: 2; grid-column: 1 / -1; min-height: 118px; }

.in-sub { margin: 18px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5B6B93; }
.in-sub:first-child { margin-top: 0; }
html[data-tema="oscuro"] .in-sub { color: #9FB2E0; }

/* ============================================================
   Tours en computadora: la guía deja de ser una columna de celular
   y usa el ancho (portada amplia, excursiones en cuadrícula).
   En celular no cambia nada (todo vive dentro de este corte).
   ============================================================ */
@media (min-width: 960px) {
  html[data-rubro="tours"] #app { max-width: 1180px; box-shadow: 0 0 0 1px rgba(16, 26, 56, .05); }
  html[data-rubro="tours"] .photo-lightbox, html[data-rubro="tours"] .hotel-detail-overlay { max-width: none; }

  /* Portada */
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-hero { min-height: 540px; padding: 0 64px 120px; border-radius: 0 0 44px 44px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-portada { top: 40px; left: 64px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-nombre-portada { font-size: 20px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-titulo { font-size: 68px; max-width: 14ch; }
  html[data-rubro="tours"] .btn-tema-g { top: 32px; right: 56px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .barra-contacto { width: min(720px, calc(100% - 128px)); margin: -64px auto 0; grid-template-columns: 1fr 1fr; padding: 18px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .barra-contacto .ver-contactos { grid-column: 1 / -1; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .barra-contacto .accion-contacto.sola { grid-column: 1 / -1; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab { padding: 56px 64px 18px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab h2 { font-size: 34px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 22px; overflow: visible; padding: 6px 64px 36px; scroll-snap-type: none; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card { width: auto; transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .ft { height: 210px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card { display: flex; flex-direction: column; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .cc-abre { flex: 1; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card .btn-disp { margin-top: auto; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .directorio { grid-template-columns: 1fr 1fr; padding: 8px 64px 0; gap: 18px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .promo-tours { padding-left: 64px; padding-right: 64px; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16, 26, 56, .16); }
}
@media (min-width: 960px) {
  /* Pantallas interiores */
  html[data-rubro="tours"] .view:not(#view-inicio) { padding: 20px 64px 120px; }
  html[data-rubro="tours"] .seccion-cabecera { margin: -20px -64px 30px; padding: 26px 64px 28px; border-radius: 0 0 32px 32px; }
  html[data-rubro="tours"] .seccion-cabecera .section-title { font-size: 34px; }
  html[data-rubro="tours"] #toursList, html[data-rubro="tours"] #trasladosList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
  html[data-rubro="tours"] #infoGeneralList { columns: 2; column-gap: 22px; }
  html[data-rubro="tours"] #infoGeneralList > .card { break-inside: avoid; margin-bottom: 22px; }

  /* Ventanas: más anchas y centradas en vez de hoja de celular */
  .dlg-tour { margin: auto; width: min(760px, 92vw); border-radius: 26px; }
  .dlg-tour .dt-gal { aspect-ratio: 16 / 9; }
}
@media (min-width: 960px) {
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .directorio .tarjeta-seccion { grid-column: auto; }
}

/* ===== Tours: Info general con cabecera de color por bloque (claro y oscuro) ===== */
html[data-rubro="tours"] #view-infogeneral .card { padding: 0 0 6px; border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px #D9E0F2, 0 8px 18px -12px rgba(30, 50, 110, .35); }
html[data-rubro="tours"] #view-infogeneral .card h3 { display: block !important; margin: 0 0 4px !important; padding: 13px 18px; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #fff !important; background: #2C4A9E; }
html[data-rubro="tours"] #view-infogeneral .row-list { padding: 4px 18px 8px; }
html[data-rubro="tours"] #view-infogeneral .row-list .row { padding: 13px 0; border-bottom: 1px solid #E4E9F5; }
html[data-rubro="tours"] #view-infogeneral .row-list .row .k { font-weight: 600; color: #14213D; }
html[data-rubro="tours"] #view-infogeneral .row-list .row .v { color: #2C4A9E; font-weight: 500; }
html[data-rubro="tours"] #view-infogeneral .row-list .row.apilado .v { margin-top: 3px; padding: 10px 12px; border-radius: 10px; background: #EEF2FC; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .card { background: #0F1B35; box-shadow: 0 0 0 1px #243556; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .card h3 { background: #1D3470; color: #DCE6FF !important; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .row-list .row { border-bottom-color: #213150; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .row-list .row .k { color: #F1F5FF; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .row-list .row .v { color: #9DBBFF; }
html[data-rubro="tours"][data-tema="oscuro"] #view-infogeneral .row-list .row.apilado .v { background: #16264A; }

.dlg-reserva select { width: 100%; box-sizing: border-box; margin-top: 3px; padding: 10px; border: 1px solid var(--stone, #ddd); border-radius: 10px; font: inherit; background: transparent; color: inherit; }
html[data-tema="oscuro"] .dlg-reserva select { background: #121C33; color: #fff; }

/* ===== Traslados: formulario (hoja en celular, ventana centrada en computadora) =====
   Un acento (azul de marca), campos de 48 px, botones en píldora, el resto con radio 14 px. */
.dlg-traslado { --tr-tinta: #0B1B3A; --tr-tenue: #5C6B8C; --tr-linea: #D8DEEB; --tr-azul: #2E4A9E; --tr-tinte: #EEF2FC; --tr-fondo: #fff;
  width: min(100vw, 520px); max-width: 100vw; max-height: 94dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; overflow: hidden; background: var(--tr-fondo); color: var(--tr-tinta); font-family: 'Poppins', 'Work Sans', sans-serif; }
.dlg-traslado[open] { display: flex; flex-direction: column; }
@media (min-width: 640px) { .dlg-traslado { margin: auto; border-radius: 24px; max-height: 90dvh; } }
.tr-form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.tr-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 12px; }
.tr-cab h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--tr-tinta); }
.tr-cab p { margin: 4px 0 0; font-size: 14px; color: var(--tr-tenue); }
.tr-x { flex: none; width: 44px; height: 44px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: var(--tr-tinte); color: var(--tr-tinta); font-size: 15px; cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); } .tr-x:active { transform: scale(.92); }
.tr-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; display: grid; gap: 22px; align-content: start; }
.tr-sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.tr-sec legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--tr-tenue); }
.dlg-traslado label { display: block; margin: 0; font-size: 13px; font-weight: 600; color: var(--tr-tinta); }
.dlg-traslado input[type="text"], .dlg-traslado input[type="date"], .dlg-traslado input[type="time"], .dlg-traslado select, .dlg-traslado textarea { width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 6px; padding: 0 14px; border: 1.5px solid var(--tr-linea); border-radius: 14px; background: var(--tr-fondo); color: var(--tr-tinta); font: 500 16px/1.2 'Poppins', 'Work Sans', sans-serif; }
.dlg-traslado textarea { padding: 12px 14px; min-height: 84px; resize: vertical; line-height: 1.4; margin-top: 0; }
.dlg-traslado select { margin-top: 0; }
.dlg-traslado input::placeholder, .dlg-traslado textarea::placeholder { color: #7A88A8; font-weight: 400; }
.dlg-traslado :is(input, select, textarea):focus-visible { outline: 2px solid var(--tr-azul); outline-offset: 1px; border-color: var(--tr-azul); }
.dlg-traslado input[type="date"], .dlg-traslado input[type="time"] { padding-right: 10px; }

/* Rutas: tarjetas que se eligen (la tarifa se ve al instante) */
.tr-rutas { display: grid; gap: 8px; }
.tr-ruta { position: relative; cursor: pointer; }
.tr-ruta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr-ruta-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--tr-linea); border-radius: 14px; transition: border-color 160ms ease, background-color 160ms ease; }
.tr-ruta-in b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .tr-ruta-in small { flex: none; font-size: 12.5px; font-weight: 600; color: var(--tr-azul); text-align: right; }
.tr-ruta input:checked + .tr-ruta-in { border-color: var(--tr-azul); background: var(--tr-tinte); box-shadow: inset 0 0 0 1px var(--tr-azul); }
.tr-ruta input:focus-visible + .tr-ruta-in { outline: 2px solid var(--tr-azul); outline-offset: 2px; }
.tr-otra { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--tr-tinte); } .tr-otra[hidden] { display: none; }
.tr-otra input { background: var(--tr-fondo); }

/* Tipo: control segmentado */
.tr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tr-tinte); } .tr-seg[hidden] { display: none; }
.tr-seg label { position: relative; cursor: pointer; }
.tr-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tr-seg span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tr-tenue); transition: background-color 160ms ease, color 160ms ease; }
.tr-seg input:checked + span { background: var(--tr-azul); color: #fff; }
.tr-seg input:focus-visible + span { outline: 2px solid var(--tr-azul); outline-offset: 2px; }
.tr-fijo { margin: 0; display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--tr-tinte); color: var(--tr-azul); font-size: 14px; font-weight: 600; } .tr-fijo[hidden] { display: none; }

/* Tarifa */
.tr-precio { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; background: var(--tr-azul); color: #fff; } .tr-precio[hidden] { display: none; }
.tr-precio span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.tr-precio b { grid-row: 1 / 3; grid-column: 2; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tr-precio small { font-size: 13px; opacity: .9; }
.tr-precio.cotiza b { font-size: 20px; }

/* Pasajeros y horarios */
.tr-pas { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .tr-pas input { flex: 1; margin: 0 !important; }
.tr-quita { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tr-tinte); color: var(--tr-tinta); cursor: pointer; }
.tr-mas { min-height: 44px; padding: 0 16px; border: 1.5px dashed #9DB0DE; border-radius: 999px; background: none; color: var(--tr-azul); font: 600 14px/1 'Poppins', sans-serif; cursor: pointer; }
.tr-viaje { padding: 12px; border-radius: 14px; background: var(--tr-tinte); } .tr-viaje + .tr-viaje { margin-top: 10px; } .tr-viaje[hidden] { display: none; }
.tr-viaje-t { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--tr-azul); }
.tr-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-aviso { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tr-tenue); }

/* Acciones siempre a la vista */
.tr-pie { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tr-linea); background: var(--tr-fondo); }
.tr-pie button { min-height: 52px; border-radius: 999px; font: 600 15px/1 'Poppins', sans-serif; cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); } .tr-pie button:active { transform: scale(.98); }
.tr-sec-btn { padding: 0 22px; border: 1.5px solid var(--tr-linea); background: none; color: var(--tr-tinta); }
.tr-ok { border: 0; background: var(--tr-azul); color: #fff; white-space: nowrap; }
.tr-pie button:focus-visible, .tr-x:focus-visible, .tr-mas:focus-visible, .tr-quita:focus-visible { outline: 2px solid var(--tr-azul); outline-offset: 2px; }

html[data-tema="oscuro"] .dlg-traslado { --tr-tinta: #F1F5FF; --tr-tenue: #9FB0D3; --tr-linea: #2B3B5E; --tr-azul: #3A5BC4; --tr-tinte: rgba(141, 177, 255, .12); --tr-fondo: #121C33; }
html[data-tema="oscuro"] .tr-ruta-in small, html[data-tema="oscuro"] .tr-viaje-t, html[data-tema="oscuro"] .tr-fijo, html[data-tema="oscuro"] .tr-mas { color: #9DBBFF; }
html[data-tema="oscuro"] .tr-ruta input:checked + .tr-ruta-in { border-color: #6F98F5; box-shadow: inset 0 0 0 1px #6F98F5; }
html[data-tema="oscuro"] .dlg-traslado input::placeholder, html[data-tema="oscuro"] .dlg-traslado textarea::placeholder { color: #7F90B6; }
@media (prefers-reduced-motion: reduce) { .tr-x, .tr-pie button, .tr-ruta-in, .tr-seg span { transition: none; } }

/* ===== Tours: pantalla "Ver todos" en formato póster =====
   La foto ocupa toda la tarjeta y el texto va encima. Un acento (blanco sobre foto), radio 28 px en tarjetas y píldoras en chips y botones. */
html[data-rubro="tours"] #view-tours #toursList { display: grid; gap: 18px; }
html[data-rubro="tours"] #view-tours .tour-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; margin: 0; padding: 0 0 20px; overflow: hidden; border: 0 !important; border-radius: 28px; background: linear-gradient(160deg, #4A66BE, #1B2A55); color: #fff; box-shadow: 0 18px 34px -20px rgba(16, 26, 56, .6); }
html[data-rubro="tours"] #view-tours .tour-card > * { flex: none !important; }
html[data-rubro="tours"] #view-tours .tour-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 14, 32, .2) 0%, rgba(8, 14, 32, 0) 22%, rgba(8, 14, 32, .6) 52%, rgba(8, 14, 32, .94) 100%); }
html[data-rubro="tours"] #view-tours .lugar-fotos { position: absolute; inset: 0; z-index: -2; display: block; border-radius: 0; overflow: hidden; }
html[data-rubro="tours"] #view-tours .lugar-fotos img { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; }
html[data-rubro="tours"] #view-tours .lugar-fotos img:not(:first-child) { display: none; }
html[data-rubro="tours"] #view-tours .mas-fotos { top: 16px; right: 16px; bottom: auto; }
html[data-rubro="tours"] #view-tours .tour-dur { position: absolute; top: 16px; left: 16px; margin: 0 !important; padding: 6px 12px; border-radius: 999px; background: rgba(10, 16, 32, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff !important; font-size: 13px !important; font-weight: 600; opacity: 1 !important; }
html[data-rubro="tours"] #view-tours .tour-nombre { margin: 0; padding: 0 20px; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: #fff !important; }
html[data-rubro="tours"] #view-tours .tour-precio-grande { align-self: flex-start; order: -1; margin: auto 20px 8px; padding: 5px 14px; background: #fff !important; color: #0B1B3A !important; font-size: 17px; }
html[data-rubro="tours"] #view-tours .tour-precio-grande .pr { color: #0B1B3A; }
html[data-rubro="tours"] #view-tours .lugar-desc { margin: 8px 0 0 !important; padding: 0 20px; font-size: 14px; line-height: 1.45; color: #E6ECFA !important; opacity: 1 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-rubro="tours"] #view-tours .btn-wa-tour { margin: 16px 20px 0 !important; width: auto !important; min-height: 50px; background: #fff; color: #0B1B3A; font-weight: 700; }
html[data-rubro="tours"][data-tema="oscuro"] #view-tours .tour-card { box-shadow: 0 0 0 1px #243556; }
html[data-rubro="tours"] #view-tours .btn-wa-tour:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 960px) { html[data-rubro="tours"] #view-tours #toursList { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } }

/* Movimiento: entrada escalonada al abrir la pantalla, foto que aparece con suavidad, zoom sutil al pasar el mouse y respuesta al toque */
@keyframes tour-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tour-foto { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-rubro="tours"] #view-tours.active .tour-card { animation: tour-sube 340ms cubic-bezier(.23, 1, .32, 1) backwards; }
  html[data-rubro="tours"] #view-tours.active .tour-card:nth-child(2) { animation-delay: 50ms; }
  html[data-rubro="tours"] #view-tours.active .tour-card:nth-child(3) { animation-delay: 100ms; }
  html[data-rubro="tours"] #view-tours.active .tour-card:nth-child(4) { animation-delay: 150ms; }
  html[data-rubro="tours"] #view-tours.active .tour-card:nth-child(n+5) { animation-delay: 200ms; }
  html[data-rubro="tours"] #view-tours .lugar-fotos img:first-child { animation: tour-foto 420ms cubic-bezier(.23, 1, .32, 1) backwards; transition: transform 500ms cubic-bezier(.23, 1, .32, 1); }
  html[data-rubro="tours"] #view-tours .btn-wa-tour { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
  html[data-rubro="tours"] #view-tours .btn-wa-tour:active { transform: scale(.97); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-rubro="tours"] #view-tours .tour-card:hover .lugar-fotos img:first-child { transform: scale(1.04); }
  html[data-rubro="tours"] #view-tours .btn-wa-tour:hover { background: #E6ECFA; }
}

/* Toda la tarjeta de la excursión abre su ficha: el nombre es un botón que se estira sobre la tarjeta; el botón de consulta queda por encima */
html[data-rubro="tours"] #view-tours .tour-abre { all: unset; display: block; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; overflow-wrap: anywhere; }
html[data-rubro="tours"] #view-tours .tour-abre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html[data-rubro="tours"] #view-tours .tour-abre:focus-visible::after { outline: 3px solid #fff; outline-offset: -6px; border-radius: 28px; }
html[data-rubro="tours"] #view-tours .btn-wa-tour { position: relative; z-index: 2; }
html[data-rubro="tours"] #view-tours .tour-dur, html[data-rubro="tours"] #view-tours .mas-fotos { z-index: 0; pointer-events: none; }

/* Computadora: la barra de desplazamiento se ve. La página se desplaza dentro de <body> (html y body tienen alto fijo), y antes todas las barras estaban ocultas, así que no había nada para arrastrar. */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  html, body { scrollbar-width: thin; scrollbar-color: #9DB0DE transparent; }
  html[data-tema="oscuro"], html[data-tema="oscuro"] body { scrollbar-color: #3A4B75 transparent; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 12px; height: 12px; }
  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #9DB0DE; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
  html[data-tema="oscuro"] body::-webkit-scrollbar-thumb { background-color: #3A4B75; }
  .view, .dlg-tour, .dlg-rec, .in-cuerpo, .tr-cuerpo, .dlg-traslado { scrollbar-width: thin; scrollbar-color: #9DB0DE transparent; }
}

/* Ficha de excursión: flechas para pasar las fotos con el mouse */
.dt-flecha { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 16, 32, .55); color: #fff; cursor: pointer; transform: translateY(-50%); transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
.dt-prev { left: 14px; } .dt-next { right: 14px; }
.dt-flecha:active { transform: translateY(-50%) scale(.94); }
.dt-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dt-flecha:not([hidden]) { display: grid; } .dt-flecha:hover { background: rgba(10, 16, 32, .8); } }
@media (prefers-reduced-motion: reduce) { .dt-flecha { transition: none; } }

/* ============================================================
   Tours en computadora, parte 2: barra de navegación fija y portada partida
   (texto y botones a la izquierda, foto a la derecha, excursiones a la vista).
   En celular la barra no existe (display: none) y nada de esto aplica.
   ============================================================ */
.nav-pc { display: none; }
.pc-ver { display: none; }
@media (min-width: 960px) {
  html[data-rubro="tours"] #app { max-width: 1280px; }
  html[data-rubro="tours"] .app-header, html[data-rubro="tours"] #app.en-portada .app-header { display: none; }

  /* Barra de navegación */
  html[data-rubro="tours"] .nav-pc { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 56px; background: color-mix(in srgb, var(--cream) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 #D8DEEB; font-family: 'Poppins', sans-serif; }
  html[data-rubro="tours"] .nav-pc-marca { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #0B1B3A; margin-right: 20px; white-space: nowrap; }
  html[data-rubro="tours"] .nav-pc-marca img { height: 30px; width: auto; display: block; }
  html[data-rubro="tours"] .nav-pc-marca .marca-nombre-header { font: inherit; color: inherit; }
  html[data-rubro="tours"] .nav-pc-links { display: flex; gap: 28px; }
  html[data-rubro="tours"] .nav-pc-links button { position: relative; padding: 8px 0; border: 0; background: none; color: #5C6B8C; font: 500 15px/1 'Poppins', sans-serif; cursor: pointer; transition: color 160ms ease; }
  html[data-rubro="tours"] .nav-pc-links button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
  html[data-rubro="tours"] .nav-pc-links button[aria-current="page"] { color: #0B1B3A; } html[data-rubro="tours"] .nav-pc-links button[aria-current="page"]::after { transform: scaleX(1); }
  html[data-rubro="tours"] .nav-pc-links button:focus-visible, html[data-rubro="tours"] .nav-pc-wa:focus-visible, html[data-rubro="tours"] .nav-pc-tema:focus-visible { outline: 2px solid #2E4A9E; outline-offset: 4px; border-radius: 6px; }
  html[data-rubro="tours"] .nav-pc-sp { flex: 1; }
  html[data-rubro="tours"] .nav-pc-tema { position: static; width: 44px; height: 44px; margin: 0; color: #0B1B3A; background: transparent; box-shadow: inset 0 0 0 1.5px #D8DEEB; }
  html[data-rubro="tours"] .nav-pc-wa { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: #2E4A9E; color: #fff; font: 600 15px/1 'Poppins', sans-serif; text-decoration: none; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
  html[data-rubro="tours"] .nav-pc-wa[hidden] { display: none; } html[data-rubro="tours"] .nav-pc-wa:active { transform: scale(.97); }
  html[data-rubro="tours"] .nav-pc-links button[hidden] { display: none; }

  /* Portada partida */
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "texto foto" "cta foto"; grid-template-rows: 1fr auto; column-gap: 56px; row-gap: 0; align-items: start; padding: 20px 56px 0; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada::after { content: ""; grid-area: foto; align-self: stretch; min-height: 340px; border-radius: 32px; background: var(--foto-pc, none) center / cover, linear-gradient(160deg, #4A66BE, #1B2A55); box-shadow: 0 30px 60px -30px rgba(16, 26, 56, .55); }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada > * { grid-column: 1 / -1; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-hero { grid-area: texto; grid-column: auto; align-self: end; position: static; display: block; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; color: #0B1B3A; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-hero .btn-tema-g, html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .marca-portada { display: none; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .portada-titulo { max-width: 13ch; margin: 0 0 16px; font-size: clamp(44px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.035em; color: #0B1B3A; }
  html[data-rubro="tours"] #view-inicio .portada .portada-sub { display: block !important; margin: 0; max-width: 44ch; font-size: 18px; line-height: 1.5; color: #5C6B8C; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .barra-contacto { grid-area: cta; grid-column: auto; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: auto; margin: 24px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .pc-ver { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: #2E4A9E; color: #fff; font: 600 15px/1 'Poppins', sans-serif; cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .pc-ver:active { transform: scale(.97); }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto[href*="wa.me"] { display: none; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .accion-contacto { min-height: 54px; padding: 0 30px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .ver-contactos { flex-basis: 100%; justify-self: auto; padding: 4px 0 0; text-align: left; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .directorio { display: none; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-cab { padding: 28px 0 14px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .cartel-sc { padding: 6px 0 40px; }
  html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .promo-tours { padding-left: 0; padding-right: 0; }
  html[data-rubro="tours"] .view:not(#view-inicio) { padding-left: 56px; padding-right: 56px; }
  html[data-rubro="tours"] .seccion-cabecera { margin: -20px -56px 30px; padding-left: 56px; padding-right: 56px; }

  /* Modo oscuro */
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc { background: color-mix(in srgb, #070D1C 92%, transparent); box-shadow: 0 1px 0 #243556; }
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-marca, html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-links button[aria-current="page"], html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-tema { color: #F1F5FF; }
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-links button { color: #9FB0D3; } html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-links button[aria-current="page"] { color: #F1F5FF; }
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-tema { box-shadow: inset 0 0 0 1.5px #243556; }
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-wa, html[data-rubro="tours"][data-tema="oscuro"][data-paleta="cartel"] #view-inicio .portada .pc-ver { background: #3A5BC4; }
  html[data-rubro="tours"][data-tema="oscuro"][data-paleta="cartel"] #view-inicio .portada .portada-titulo, html[data-rubro="tours"][data-tema="oscuro"][data-paleta="cartel"] #view-inicio .portada .portada-hero { color: #F1F5FF; }
  html[data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .portada-sub { color: #9FB0D3; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  html[data-rubro="tours"] .nav-pc-links button:hover:not([aria-current="page"]) { color: #2E4A9E; }
  html[data-rubro="tours"] .nav-pc-links button:hover::after { transform: scaleX(1); }
  html[data-rubro="tours"][data-tema="oscuro"] .nav-pc-links button:hover { color: #fff; }
  html[data-rubro="tours"] .nav-pc-wa:hover, html[data-rubro="tours"][data-paleta="cartel"] #view-inicio .portada .pc-ver:hover { background: #243B80; }
}
@media (prefers-reduced-motion: reduce) { .nav-pc-links button, .nav-pc-links button::after, .nav-pc-wa, .pc-ver { transition: none !important; } }
@media (min-width: 960px) {
  html[data-rubro="tours"][data-tema="oscuro"][data-paleta="cartel"] #view-inicio .portada .barra-contacto { background: none !important; border: 0 !important; box-shadow: none !important; }
}

/* Tours en computadora: las excursiones del inicio entran escalonadas */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  html[data-rubro="tours"] #view-inicio.active .cartel-sc > *, html[data-rubro="tours"] #view-inicio .portada .cartel-sc > * { animation: tour-sube 340ms cubic-bezier(.23, 1, .32, 1) backwards; }
  html[data-rubro="tours"] #view-inicio .portada .cartel-sc > *:nth-child(2) { animation-delay: 50ms; }
  html[data-rubro="tours"] #view-inicio .portada .cartel-sc > *:nth-child(3) { animation-delay: 100ms; }
  html[data-rubro="tours"] #view-inicio .portada .cartel-sc > *:nth-child(n+4) { animation-delay: 150ms; }
}

/* ===== Tours: diseño "Nuevo" (accesos arriba, contacto, tarjetas con foto) ===== */
@media (max-width: 959px) {
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .portada-hero { padding-bottom: 84px; min-height: 400px; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio {
  order: 1; position: relative; z-index: 3; margin: -58px 16px 0; padding: 12px; background: #fff; border-radius: 24px;
  box-shadow: 0 14px 34px rgba(16,26,56,.14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio .tarjeta-seccion { grid-column: auto !important; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio [data-goto="tours"] { order: 1 !important; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio [data-goto="traslados"] { order: 2 !important; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio [data-goto="infogeneral"] { order: 3 !important; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] { display: flex !important; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion.solo-tours,
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] {
  flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; height: 96px; padding: 0 4px; border-radius: 22px;
  border: 0; text-align: center; transition: transform 160ms cubic-bezier(.23,1,.32,1);
}
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:active { transform: scale(.97); }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:is(.solo-tours,[data-goto="infogeneral"]) svg { width: 28px; height: 28px; padding: 0; margin: 0; background: none !important; border-radius: 0; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:is(.solo-tours,[data-goto="infogeneral"]) .ts-nombre { flex: none; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1.1; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:is(.solo-tours,[data-goto="infogeneral"]) .ts-dato { display: none; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion.solo-tours::after { content: none; }
/* Excursiones: con borde. Traslados e Info general: rellenos, para destacarlos */
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] { background: #fff; box-shadow: inset 0 0 0 1.5px #DDE3F3; color: #2E4A9E; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] svg { stroke: #2E4A9E; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] .ts-nombre { color: #2E4A9E; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] { background: linear-gradient(150deg, #2E4A9E, #1B2B63); box-shadow: 0 14px 24px -14px rgba(27,43,99,.8); }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] { background: linear-gradient(150deg, #3A5BC0, #2E4A9E); box-shadow: 0 14px 24px -14px rgba(46,74,158,.8); }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] svg,
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] svg { stroke: #fff; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] .ts-nombre,
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { color: #fff; }
/* Contacto: WhatsApp y Llamar lado a lado */
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .barra-contacto { order: 2; margin: 14px 16px 0; padding: 12px; grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .barra-contacto .accion-contacto.sola { grid-column: 1 / -1; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .barra-contacto .ver-contactos { grid-column: 1 / -1; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .barra-contacto .btn-resenas { display: none; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-vt { display: none; }
html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-sc { display: block; overflow: visible; padding: 4px 16px 8px; scroll-snap-type: none; }
}
/* Tarjetas */
.c3 { background: #fff; border-radius: 26px; overflow: hidden; margin: 0 0 16px; box-shadow: 0 14px 34px -22px rgba(16,26,56,.4); color: #0B1B3A; }
.c3-ft { position: relative; height: 190px; background-color: #C9D6F2; background-size: cover; background-position: center; }
.c3-ft.sin-foto { background-image: linear-gradient(160deg, #A9B8DD, #5C73B3); }
.c3-dur { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(15,26,60,.72); color: #fff; font: 600 13px 'Poppins', sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c3-in { padding: 16px 18px 18px; font-family: 'Poppins', 'Work Sans', sans-serif; }
.c3-in h3 { margin: 0; font: 600 19px/1.2 'Poppins', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.c3-precio { margin-top: 8px; }
.c3-precio .pr { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.c3-precio .pu { margin: 0; border: 0; opacity: 1; }
.c3-precio .pm { font: 700 26px 'Poppins', sans-serif; color: #2E4A9E; font-variant-numeric: tabular-nums; }
.c3-precio .pu { margin-left: 8px; padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px #DDE3F3; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5C6B8C; }
.c3-precio .pd { margin-right: 6px; font-size: 12px; font-style: normal; color: #5C6B8C; }
.c3-hor { margin-top: 6px; font-size: 14px; color: #5C6B8C; }
.c3-desc { margin: 10px 0 0; font: 400 14px/1.5 'Work Sans', sans-serif; color: #5C6B8C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.c3-mas { display: inline-block; margin-top: 6px; padding: 4px 0; border: 0; background: none; font: 600 13px 'Poppins', sans-serif; color: #2E4A9E; cursor: pointer; }
.c3-rec, .c3 .btn-disp { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 999px; font: 600 15px 'Poppins', sans-serif; cursor: pointer; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.c3-rec { box-sizing: border-box; height: 46px; margin-top: 12px; background: transparent; color: #2E4A9E; border: 0; box-shadow: inset 0 0 0 1.5px #DDE3F3; }
.c3 .btn-disp { box-sizing: border-box; height: 48px; margin: 10px 0 0 !important; background: #2E4A9E; color: #fff; border: 0; }
.c3-rec:active, .c3 .btn-disp:active { transform: scale(.97); }
.c3-resena { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 16px 24px; min-height: 48px; border-radius: 999px; background: transparent; border: 1.5px solid #1B2B63; color: #1B2B63; font: 600 15px 'Poppins', sans-serif; text-decoration: none; }
@media (max-width: 959px) { html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio { background: #121C33; box-shadow: none; border: 1px solid #2B3B5E; } }
@media (max-width: 959px) { html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] { background: transparent; box-shadow: inset 0 0 0 1.5px #2B3B5E; color: #BFD4FF; } }
@media (max-width: 959px) { html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] svg { stroke: #BFD4FF; } }
@media (max-width: 959px) { html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] .ts-nombre { color: #BFD4FF; } }
html[data-tema="oscuro"] .c3 { background: #121C33; color: #fff; box-shadow: 0 0 0 1px #243556; }
html[data-tema="oscuro"] .c3-precio .pm, html[data-tema="oscuro"] .c3-mas { color: #8DB1FF; }
html[data-tema="oscuro"] .c3-precio .pu, html[data-tema="oscuro"] .c3-hor, html[data-tema="oscuro"] .c3-desc, html[data-tema="oscuro"] .c3-precio .pd { color: #A9B6D3; }
html[data-tema="oscuro"] .c3-precio .pu { box-shadow: inset 0 0 0 1px #2B3B5E; }
html[data-tema="oscuro"] .c3-rec { color: #BFD4FF; box-shadow: inset 0 0 0 1.5px #2B3B5E; }
html[data-tema="oscuro"] .c3 .btn-disp { background: #3A5BC4; }
html[data-tema="oscuro"] .c3-resena { border-color: #8DB1FF; color: #BFD4FF; }
/* Pantallas internas: pestañas en la cabecera azul y horarios / recorrido en las tarjetas */
.mod-tabs { display: flex; gap: 8px; margin-top: 18px; }
.mod-tabs button { flex: 1; min-width: 0; height: 44px; padding: 0 6px; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,.14); color: #fff; font: 600 13px 'Poppins', sans-serif; cursor: pointer; white-space: nowrap; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.mod-tabs button svg { flex: none; width: 18px; height: 18px; stroke: currentColor; }
.mod-tabs button.on { background: #fff; color: #2E4A9E; }
.mod-tabs button:active { transform: scale(.97); }
html[data-rubro="tours"] #view-tours .tour-hor { margin: 6px 0 0; padding: 0 20px; font-size: 14px; color: #E6ECFA; }
html[data-rubro="tours"] #view-tours .btn-rec { position: relative; z-index: 2; margin: 12px 20px 0; min-height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 15px 'Poppins', sans-serif; cursor: pointer; }
html[data-rubro="tours"] #view-tours .btn-rec:active { transform: scale(.97); }
html[data-rubro="tours"] #view-tours .tour-card > .btn-rec { flex: none !important; }
@media (min-width: 960px) {
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-vt { display: none; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; overflow: visible; scroll-snap-type: none; }
  html[data-lista="nuevo"][data-rubro="tours"] .c3 { margin: 0; }
  html[data-lista="nuevo"][data-rubro="tours"] .barra-contacto .btn-resenas { display: none; }
}
@media (max-width: 959px) {
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] { background: linear-gradient(150deg, #3A5BC4, #1F3170); border: 0; }
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] { background: linear-gradient(150deg, #4A6BD0, #3A5BC4); border: 0; }
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] svg,
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] svg { stroke: #fff; }
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] .ts-nombre,
html[data-tema="oscuro"][data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { color: #fff; }
}

/* ===== Diseño Nuevo en computadora: panel lateral fijo + contenido a la derecha (también en los módulos internos) ===== */
.side-pc { display: none; }
@media (min-width: 960px) {
  html[data-lista="nuevo"][data-rubro="tours"] body { background: #F5F6F9; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] body { background: #070D1C; }
  html[data-lista="nuevo"][data-rubro="tours"] #app { max-width: none; margin: 0; padding-left: 430px; background: transparent; }
  html[data-lista="nuevo"][data-rubro="tours"] .nav-pc, html[data-lista="nuevo"][data-rubro="tours"] .app-header { display: none !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .side-pc {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 430px; box-sizing: border-box; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
    background: linear-gradient(rgba(10,16,32,.5), rgba(10,16,32,.82)), var(--foto-pc, none) center / cover, #34456F; font-family: 'Poppins', 'Work Sans', sans-serif;
  }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-marca { padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: left; font: 700 22px 'Poppins', sans-serif; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-marca img { display: block; width: 260px; max-width: 100%; height: auto; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-tema { position: static; flex: none; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; background: rgba(27,43,99,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-med h1 { margin: 0; color: #fff; font: 700 44px/1.06 'Poppins', sans-serif; letter-spacing: -.03em; max-width: 12ch; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-wa, html[data-lista="nuevo"][data-rubro="tours"] .sp-tel { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 999px; font: 600 16px 'Poppins', sans-serif; text-decoration: none; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-wa { background: #fff; color: #1B2B63; }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-tel { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
  html[data-lista="nuevo"][data-rubro="tours"] .sp-vc { display: block; margin-top: 18px; padding: 6px 0; border: 0; background: none; color: #fff; font: 600 15px 'Poppins', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

  /* Portada: se oculta la foto grande y el contacto (ya están en el panel); queda la barra de accesos y las excursiones */
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada { display: flex; flex-direction: column; padding: 40px 44px 24px; max-width: 1120px; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio { order: 1; width: 100%; max-width: none; box-sizing: border-box; align-self: stretch; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-tours { order: 2; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada::after { display: none; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .portada-hero, html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .barra-contacto { display: none; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .directorio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] { display: flex !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .directorio .tarjeta-seccion { grid-column: auto !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .directorio [data-goto="tours"] { order: 1 !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .directorio [data-goto="traslados"] { order: 2 !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .directorio [data-goto="infogeneral"] { order: 3 !important; }
  html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs { order: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 30px; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion.solo-tours, html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"], html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; height: 88px; min-height: 88px; padding: 0 22px; border: 0; border-radius: 24px; text-align: left; font-family: 'Poppins', sans-serif;
  }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:is(.solo-tours,[data-goto="infogeneral"]) svg, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button svg { width: 34px; height: 34px; padding: 0; margin: 0; flex: none; background: none !important; border-radius: 0; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:is(.solo-tours,[data-goto="infogeneral"]) .ts-nombre, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button span { flex: none; font: 600 18px/1.1 'Poppins', sans-serif; letter-spacing: 0; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion .ts-dato { display: none; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion.solo-tours::after { content: none; }
  /* Excursiones (o la pantalla actual): con borde. Las otras, rellenas */
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"], html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button.on { background: #fff; color: #2E4A9E; box-shadow: inset 0 0 0 1.5px #DDE3F3; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] svg, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button.on svg { stroke: #2E4A9E; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] .ts-nombre { color: #2E4A9E; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"], html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button[data-goto="traslados"]:not(.on) { background: linear-gradient(150deg, #2E4A9E, #1B2B63); color: #fff; box-shadow: 0 18px 30px -18px rgba(27,43,99,.8); }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"], html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button[data-goto="infogeneral"]:not(.on) { background: linear-gradient(150deg, #3A5BC0, #2E4A9E); color: #fff; box-shadow: 0 18px 30px -18px rgba(46,74,158,.8); }
  html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button[data-goto="tours"]:not(.on) { background: linear-gradient(150deg, #2E4A9E, #27428E); color: #fff; box-shadow: 0 18px 30px -18px rgba(46,74,158,.8); }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] svg, html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] svg, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button:not(.on) svg { stroke: #fff; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"] .ts-nombre, html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"] .ts-nombre { color: #fff; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-cab { padding: 36px 0 18px; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-cab h2 { font-size: 30px; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .cartel-sc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0; overflow: visible; scroll-snap-type: none; }
  html[data-lista="nuevo"][data-rubro="tours"] .c3 { margin: 0; max-width: none; }
  html[data-lista="nuevo"][data-rubro="tours"] .c3-ft { height: 230px; }
  html[data-lista="nuevo"][data-rubro="tours"] .c3-resena { margin: 28px 0 0; max-width: 360px; }

  /* Módulos internos: sin cabecera azul, pestañas arriba y contenido a la derecha del panel */
  html[data-lista="nuevo"][data-rubro="tours"] .view:not(#view-inicio) { padding: 40px 44px 80px; max-width: 1120px; box-sizing: border-box; }
  html[data-lista="nuevo"][data-rubro="tours"] .seccion-cabecera { display: flex; flex-direction: column; margin: 0 0 26px; padding: 0; background: none; border-radius: 0; box-shadow: none; color: #0B1B3A; }
  html[data-lista="nuevo"][data-rubro="tours"] .seccion-cabecera .section-title { font: 700 34px/1.1 'Poppins', sans-serif; letter-spacing: -.02em; color: #0B1B3A; }
  html[data-lista="nuevo"][data-rubro="tours"] .seccion-cabecera .section-title::after, html[data-lista="nuevo"][data-rubro="tours"] .seccion-cabecera::after { display: none; }
  html[data-lista="nuevo"][data-rubro="tours"] .seccion-cabecera .section-sub { margin: 8px 0 0; font-size: 16px; color: #5C6B8C; max-width: 60ch; }
  html[data-lista="nuevo"][data-rubro="tours"] #toursList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .seccion-cabecera .section-title { color: #fff; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .seccion-cabecera .section-sub { color: #A9B6D3; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"], html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .mod-tabs button.on { background: transparent; color: #BFD4FF; box-shadow: inset 0 0 0 1.5px #2B3B5E; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] svg, html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .mod-tabs button.on svg, html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] .ts-nombre { stroke: #BFD4FF; color: #BFD4FF; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="tours"] .ts-nombre { stroke: none; }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="traslados"], html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .mod-tabs button[data-goto="traslados"]:not(.on) { background: linear-gradient(150deg, #3A5BC4, #1F3170); }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] #view-inicio .portada .tarjeta-seccion[data-goto="infogeneral"], html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .mod-tabs button[data-goto="infogeneral"]:not(.on) { background: linear-gradient(150deg, #4A6BD0, #3A5BC4); }
  html[data-lista="nuevo"][data-rubro="tours"][data-tema="oscuro"] .mod-tabs button[data-goto="tours"]:not(.on) { background: linear-gradient(150deg, #3A5BC4, #2B47A0); }
}

/* ===== Animaciones del diseño Nuevo (celular y PC) ===== */
:root { --e3: cubic-bezier(.23, 1, .32, 1); }
@keyframes e3-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes e3-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes e3-side { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
html[data-lista="nuevo"][data-rubro="tours"] .c3 { transition: transform 220ms var(--e3), box-shadow 220ms ease; }
html[data-lista="nuevo"][data-rubro="tours"] .c3-ft { transition: transform 500ms var(--e3); }
html[data-lista="nuevo"][data-rubro="tours"] .tarjeta-seccion, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button, html[data-lista="nuevo"][data-rubro="tours"] .sp-wa, html[data-lista="nuevo"][data-rubro="tours"] .sp-tel, html[data-lista="nuevo"][data-rubro="tours"] .sp-vc, html[data-lista="nuevo"][data-rubro="tours"] .c3-mas, html[data-lista="nuevo"][data-rubro="tours"] .sp-marca { -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--e3), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
html[data-lista="nuevo"][data-rubro="tours"] .sp-wa:active, html[data-lista="nuevo"][data-rubro="tours"] .sp-tel:active, html[data-lista="nuevo"][data-rubro="tours"] .sp-vc:active, html[data-lista="nuevo"][data-rubro="tours"] .c3-mas:active, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button:active, html[data-lista="nuevo"][data-rubro="tours"] .sp-marca:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  html[data-lista="nuevo"][data-rubro="tours"] .c3:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(16, 26, 56, .5); }
  html[data-lista="nuevo"][data-rubro="tours"] .c3:hover .c3-ft { transform: scale(1.04); }
  html[data-lista="nuevo"][data-rubro="tours"] #view-inicio .portada .tarjeta-seccion:hover, html[data-lista="nuevo"][data-rubro="tours"] .mod-tabs button:hover:not(.on) { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Al abrir la guía: la portada entra en secuencia corta (primera vez, una sola vez) */
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .portada-hero { animation: e3-in 420ms var(--e3) backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .directorio .tarjeta-seccion[data-goto="tours"] { animation: e3-up 360ms var(--e3) 120ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .directorio .tarjeta-seccion[data-goto="traslados"] { animation: e3-up 360ms var(--e3) 170ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .directorio .tarjeta-seccion[data-goto="infogeneral"] { animation: e3-up 360ms var(--e3) 220ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .barra-contacto { animation: e3-up 360ms var(--e3) 260ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .barra-contacto > * { animation: none; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .cartel-cab { animation: e3-up 360ms var(--e3) 300ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .c3:nth-child(1) { animation: e3-up 380ms var(--e3) 340ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .c3:nth-child(2) { animation: e3-up 380ms var(--e3) 390ms backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #app.intro .c3:nth-child(3) { animation: e3-up 380ms var(--e3) 440ms backwards; }
  /* Cuando se hace scroll, cada tarjeta entra al llegar a la pantalla */
  html[data-lista="nuevo"][data-rubro="tours"] .c3.rv { opacity: 0; transform: translateY(14px); }
  html[data-lista="nuevo"][data-rubro="tours"] .c3.rv.in { opacity: 1; transform: none; transition: opacity 320ms var(--e3), transform 320ms var(--e3), box-shadow 220ms ease; }
  /* Pantallas internas: un cambio corto y suave, nada que haga esperar */
  html[data-lista="nuevo"][data-rubro="tours"] .view.active:not(#view-inicio) .seccion-cabecera { animation: e3-up 260ms var(--e3) backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-infogeneral.active .card { animation: e3-up 300ms var(--e3) backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-infogeneral.active .card:nth-child(2) { animation-delay: 40ms; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-infogeneral.active .card:nth-child(3) { animation-delay: 80ms; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-infogeneral.active .card:nth-child(4) { animation-delay: 120ms; }
  html[data-lista="nuevo"][data-rubro="tours"] #view-infogeneral.active .card:nth-child(n+5) { animation-delay: 160ms; }
  /* Panel lateral (PC): entra desde el borde y sus bloques suben en cascada */
  html[data-lista="nuevo"][data-rubro="tours"] .side-pc { animation: e3-side 420ms var(--e3) backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-top, html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-med h1, html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-acc, html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-vc { animation: e3-up 380ms var(--e3) backwards; }
  html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-top { animation-delay: 80ms; } html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-med h1 { animation-delay: 140ms; } html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-acc { animation-delay: 200ms; } html[data-lista="nuevo"][data-rubro="tours"] .side-pc .sp-vc { animation-delay: 250ms; }
}

/* Descripción y Recomendaciones en las tarjetas del diseño Nuevo */
.c3 .info-fila { margin: 10px 0 0; }
html[data-rubro="tours"] #view-tours .tour-card > .info-fila { position: relative; z-index: 2; margin: 10px 20px 0; }
html[data-rubro="tours"] #view-tours .tour-card .info-b { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-tema="oscuro"] .c3 .info-b { background: rgba(141,177,255,.14); color: #8DB1FF; }
html[data-lista="nuevo"][data-rubro="tours"] #view-tours .tour-card { padding-top: 64px; }