/*
 * CSS de las páginas publicadas.
 *
 * Es el diseño aprobado en muestra.html, llevado a las plantillas. Celular primero y casi
 * todo en CSS: las preguntas son <details>, la barra es position:fixed, el botón flotante
 * es position:sticky y el mapa se activa con una casilla.
 *
 * Lo único que necesita JavaScript es cambiar la foto grande de la galería al tocar una
 * miniatura (activos/sitio.js). Sin él la página se ve igual; sólo no cambia la foto.
 *
 * El efecto de app sale de las meta tags (ver partes/head.php) más tres cosas de acá:
 * el fondo del canvas en html, el color de las barras coincidiendo con las dos puntas de
 * la página, y los env(safe-area-inset-*).
 */

:root {
  --profundo:    #0E2A35;   /* el color de las barras del navegador */
  --fondo:       #F4F7F9;
  --carta:       #FFFFFF;
  --tinta:       #12262F;
  --suave:       #5D7079;
  --linea:       #E3EAEE;

  --mar:         #1F8FA8;
  --mar-claro:   #DCEEF3;
  --limon:       #F5C451;
  --limon-claro: #FCEFCF;
  --coral:       #EF7B5A;
  --verde:       #3FA37A;
  --verde-claro: #DCF0E7;

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;

  --sombra:      0 2px 8px rgba(18,38,47,.06);
  --sombra-alta: 0 14px 32px rgba(18,38,47,.14);

  --titulo: "Outfit", system-ui, sans-serif;
  --texto:  "Inter", system-ui, -apple-system, sans-serif;

  --lado: 1.15rem;
  --barra-alto: 3.1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --profundo:    #08181F;
    --fondo:       #0D1B22;
    --carta:       #14262F;
    --tinta:       #EAF2F5;
    --suave:       #9DB2BB;
    --linea:       #223C47;
    --mar:         #52B6CC;
    --mar-claro:   #123641;
    --limon:       #F0C86B;
    --limon-claro: #332C15;
    --coral:       #F29072;
    --verde:       #5FBF97;
    --verde-claro: #14332A;
    --sombra:      0 2px 8px rgba(0,0,0,.35);
    --sombra-alta: 0 14px 32px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

/*
 * El fondo del canvas —lo que se ve al estirar la página— va en html y es el MISMO color
 * que la barra del navegador. Arriba está el hero oscuro y abajo el cierre oscuro, así
 * que el rebote coincide en las dos puntas.
 *
 * Sin overflow-x: clip. Un recorte en un ancestro rompe position:sticky y el botón
 * flotante lo necesita. El desborde lateral se resuelve en el layout.
 */
html { background: var(--profundo); }

body {
  margin: 0;
  background: var(--fondo);
  font: 400 17px/1.65 var(--texto);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--mar); }
img { max-width: 100%; display: block; }

.ancho { width: 100%; max-width: 46rem; margin: 0 auto; padding-inline: var(--lado); }

/* --- barra de navegación ------------------------------------------
 * OPACA. Sin transparencia, sin desenfoque, sin excepciones.
 *
 * Empezó con .55 y desenfoque, pasó a .88, y las dos veces se vio lo mismo: las pastillas
 * blancas del hero y el botón amarillo se leían a través, encima del logo y del selector
 * de idioma. El desenfoque no borra un elemento de mucho contraste, sólo lo desdibuja, y
 * "casi no se ve" a los ojos de quien mira la página es "se ve".
 *
 * La versión de "opaca sólo al scrollear" necesita JavaScript escuchando el scroll o
 * animation-timeline, que hoy sólo entiende Chrome. Opaca siempre es una línea, no puede
 * fallar en ningún navegador, y el efecto de app lo sigue dando el color: la barra es
 * exactamente del mismo azul que pinta el navegador arriba y que cierra la página abajo.
 */

.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--profundo);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.barra-in {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: var(--barra-alto);
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: var(--lado);
}

.barra .marca { font: 600 1rem var(--titulo); color: #fff; text-decoration: none; flex: 1; letter-spacing: -.01em; }

.idiomas { display: flex; gap: .15rem; }

.idiomas a {
  font: 600 .72rem var(--texto);
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  padding: .3rem .55rem;
  border-radius: 999px;
}

.idiomas a.activo { background: rgba(255,255,255,.16); color: #fff; }

/* --- hero --------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /*
   * Ni una pantalla entera: en un celular alto el hero se comía todo el primer scroll y
   * no se veía que abajo había algo.
   */
  min-height: 52vh;
  min-height: 52svh;
  padding-top: calc(env(safe-area-inset-top) + var(--barra-alto) + 3rem);
  /*
   * Este relleno de abajo es lo que hace estable la superposición de las tarjetas.
   *
   * Las tarjetas suben con un margen negativo fijo. Si el hero termina justo donde termina
   * su contenido, ese margen las mete encima del botón o del texto, y cuánto se encajan
   * depende del alto de la pantalla y de si el título ocupó una línea o dos. Con una banda
   * vacía de 4.2rem al pie del hero, las tarjetas suben 2.6rem y siempre caen sobre esa
   * banda: quedan 1.6rem de aire entre ellas y lo último que escribió nadie, en cualquier
   * tamaño de pantalla.
   */
  padding-bottom: 4.2rem;
  background: var(--profundo);
  color: #fff;
  isolation: isolate;
}

.hero-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}

/* --- el hero de la portada: fotos que se alternan, SIN JAVASCRIPT --------
 * Tres capas apiladas y una animación de opacidad con retardos NEGATIVOS: cada foto
 * arranca en un punto distinto del mismo ciclo, así que la primera ya se ve en el instante
 * cero en vez de esperar su turno.
 *
 * Las flechas y los puntos quedaron afuera a propósito: sin JS no funcionan, y ya se probó
 * en la galería del hotel.
 */

.hero-fotos { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-fundido 21s infinite;
}

.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * La PRIMERA lleva opacidad 1 de base. Es lo que hace que, si la animación no corre —CSS a
 * medio cargar, "reducir movimiento", un navegador viejo—, quede una portada con una foto
 * fija en vez de un hero negro.
 */
.hero-slide:first-child { opacity: 1; }

.hero-slide:nth-child(2) { animation-delay: -14s; }
.hero-slide:nth-child(3) { animation-delay:  -7s; }
.hero-slide:nth-child(4) { animation-delay: -3.5s; }
.hero-slide:nth-child(5) { animation-delay: -17.5s; }

/*
 * Cada foto se ve un tercio del ciclo con dos segundos de fundido en cada punta. Los
 * porcentajes suman visible + fundido = el turno completo; fuera de eso está en cero y no
 * tapa a las otras.
 */
@keyframes hero-fundido {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:first-child { opacity: 1; }
}

/*
 * En escritorio el texto va abajo a la IZQUIERDA y no centrado: las fotos tienen gente en
 * primer plano, y el bloque centrado les caía encima de la cara. En celular sigue abajo,
 * que es donde el degradado tapa menos paisaje.
 */
@media (min-width: 48rem) {
  .hero-portada .ancho { margin-left: 0; margin-right: auto; }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--profundo) 0%, rgba(14,42,53,.82) 28%,
                              rgba(14,42,53,.22) 62%, rgba(14,42,53,.6) 100%);
}

.hero h1 { font-size: clamp(2.2rem, 8.5vw, 3.1rem); font-weight: 700; margin: .1rem 0 .55rem; }
.hero .bajada { font-size: 1.06rem; color: rgba(255,255,255,.92); margin-bottom: 1.4rem; max-width: 34rem; }

.ubicacion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 .84rem var(--texto);
  padding: .3rem .8rem .3rem .6rem;
  border-radius: 999px;
  margin-bottom: .9rem;
  text-decoration: none;
}

.ubicacion .punto { width: .4rem; height: .4rem; border-radius: 50%; background: var(--limon); }

.hero-datos { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 .85rem var(--texto);
  padding: .32rem .7rem;
  border-radius: 999px;
}

.chip b { font-weight: 700; }
.chip .estrella { color: var(--limon); }

/* --- botones ------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font: 600 1rem var(--texto);
  padding: .9rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease;
}

.boton-principal { background: var(--limon); color: #33280A; box-shadow: 0 8px 22px rgba(245,196,81,.32); }
.boton-suave     { background: var(--mar-claro); color: var(--mar); }
.boton:active    { transform: scale(.97); }
.boton-lleno     { width: 100%; }

/* --- secciones ---------------------------------------------------- */

.seccion { padding: 2rem 0 .2rem; }

.eyebrow {
  display: block;
  font: 600 .76rem/1 var(--texto);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mar);
  margin-bottom: .55rem;
}

.seccion h2, .banda h2, .cierre h2 { font-size: clamp(1.55rem, 5.5vw, 2rem); font-weight: 600; margin-bottom: 1rem; }
.seccion h3 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; }

.banda { padding: 2.6rem 0; margin: 2.8rem 0; }
.banda-mar   { background: var(--mar-claro); }
.banda-limon { background: var(--limon-claro); }

.plomo { color: var(--suave); }
.chica { font-size: .9rem; }

/* --- los números del hotel ---------------------------------------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: -2.6rem;
  position: relative;
  z-index: 5;
}

.numero { background: var(--carta); border-radius: var(--r-lg); padding: .9rem 1rem; box-shadow: var(--sombra-alta); }
.numero b { display: block; font: 700 1.6rem/1.15 var(--titulo); }
.numero span { display: block; font-size: .76rem; color: var(--suave); margin-top: .1rem; }
.numero.destacado b { color: var(--mar); }

@media (min-width: 34rem) { .numeros { grid-template-columns: repeat(4, 1fr); } }

/* --- galería del hotel --------------------------------------------
 * Una foto grande y las miniaturas montadas sobre su borde inferior.
 *
 * Sin JavaScript se ve exactamente igual: la foto grande es la primera y las miniaturas
 * están todas ahí. Lo único que no pasa es el cambio al tocarlas, y la tira scrollea, así
 * que igual se llega a todas.
 */

.visor {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--mar-claro);
  box-shadow: var(--sombra);
}

/*
 * Cuadrada. Empezó en 4/3, pasó a 3/2 y seguía comiéndose la pantalla de un celular alto:
 * hay que ver la foto grande y las miniaturas juntas, sin scrollear.
 *
 * El height: auto NO es decorativo. El <img> viene con width="1200" height="900" para que
 * el navegador reserve el lugar y la página no salte; esos atributos son pistas de
 * presentación y se aplican solos si el CSS no dice nada de alto. Con alto y ancho fijos,
 * aspect-ratio deja de valer y la foto salía de 900 px de alto. Poniendo el alto en auto
 * los atributos siguen reservando el lugar pero ya no mandan.
 */
.visor img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.miniaturas {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  /* montadas sobre el borde de abajo de la grande */
  margin: -2.2rem 0 0;
  padding: .35rem .7rem .5rem;
  position: relative;
  z-index: 2;
}

.mini {
  display: block;
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid var(--carta);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mar-claro);
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  position: relative;
  transition: transform .12s ease;
}

.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.activa { border-color: var(--limon); }
.mini:active { transform: scale(.95); }
.mini:focus-visible { outline: 3px solid var(--mar); outline-offset: 2px; }

/* El "+5" de la quinta: dice cuántas quedan sin ocupar más lugar. */
.mini .mas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,42,53,.62);
  color: #fff;
  font: 600 1rem var(--titulo);
}

.credito { font-size: .78rem; color: var(--suave); margin: .6rem 0 0; }

/*
 * ---------------------------------------------------------------------------
 * LA NOTA AL PIE · de dónde salió un dato y de cuándo es
 * ---------------------------------------------------------------------------
 *
 * "Horarios de la ficha de Google, al día de la publicación." y "Precios verificados el
 * 25/08/2026" son notas al pie y se veían casi como el texto de la tabla que anotan.
 *
 * El motivo no era el tamaño elegido: era que NO HABIA NINGUNO. Las dos salían con
 * class="apagado chico", y ni .apagado ni .chico existen en esta hoja — son clases del
 * PANEL, de admin.css. En el sitio no aplicaban nada y el párrafo quedaba al tamaño del
 * cuerpo. El sitio tiene .plomo y .chica, con otro nombre, y nadie lo notó porque una clase
 * que no existe no da error: sencillamente no hace nada.
 *
 * Se le da nombre propio en vez de reusar .credito —que mide casi lo mismo— porque son dos
 * cosas distintas: una acredita al autor de una foto, obligación de contrato, y la otra dice
 * de cuándo es un dato. El día que una cambie, la otra no tiene por qué seguirla.
 */
.nota {
  font-size: .8rem;
  color: var(--suave);
  margin: .6rem 0 0;
}

/* --- cercanos: mosaico para comer y ver ---------------------------
 * La foto ocupa toda la tarjeta y el nombre va encima, abajo a la izquierda.
 */

.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mosaico li {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--mar-claro);
}

.mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mosaico .etiqueta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .8rem .7rem;
  background: linear-gradient(to top, rgba(8,22,29,.88), rgba(8,22,29,.55) 45%, transparent);
  color: #fff;
}

.mosaico .etiqueta b { display: block; font: 600 .95rem/1.2 var(--titulo); }
.mosaico .etiqueta span { font-size: .8rem; color: rgba(255,255,255,.82); }

/*
 * Sin foto, o con la foto caída, la tarjeta NO queda vacía: fondo de color propio del
 * lugar e inicial en grande. Se ve intencional en vez de rota.
 */
.mosaico li.sin-foto { background: var(--fondo-lugar, var(--mar-claro)); }

.mosaico .inicial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 2.6rem var(--titulo);
  color: rgba(255,255,255,.55);
}

/*
 * El crédito de las fotos de Tiqets, ARRIBA Y SOBRE LA IMAGEN.
 *
 * No es una decisión de diseño: el contrato lo pide visible sobre la foto, al revés que el
 * de Places, al que le alcanza una línea en el pie. Va arriba porque abajo está la etiqueta
 * con el nombre y el precio, y taparla sería cambiar un incumplimiento por otro problema.
 *
 * Con sombra propia y no sobre un degradado: el degradado de la etiqueta ya carga la mitad
 * de abajo, y otro arriba dejaría la foto asomando sólo por el medio.
 */
.mosaico .credito-foto {
  position: absolute;
  top: .4rem;
  right: .5rem;
  max-width: 70%;
  font: 500 .68rem/1.25 var(--texto);
  color: rgba(255,255,255,.82);
  text-align: right;
  text-shadow: 0 1px 3px rgba(8,22,29,.9);
  pointer-events: none;
}

/*
 * El enlace que tapa la tarjeta entera. Va aparte y no envolviendo el contenido porque
 * adentro puede haber otro enlace —el del autor de la foto— y un <a> dentro de otro <a>
 * no es HTML valido: cada navegador lo desarma a su manera.
 */
.mosaico .tapa { position: absolute; inset: 0; z-index: 2; }

/* --- portada: filas por región con carrusel ------------------------
 * Una fila por región. Se arrastra con el dedo y se frena en cada tarjeta: scroll-snap,
 * sin una línea de JavaScript, igual que el carrusel de las tarjetas de hotel.
 *
 * El carrusel se estira hasta el borde de .ancho con márgenes negativos del mismo valor
 * que su padding, así las tarjetas llegan al borde de la pantalla en el celular. NUNCA se
 * pasa del ancho de .ancho, que nunca se pasa del viewport: el sitio no puede tener scroll
 * horizontal porque rompería el position:sticky del botón flotante.
 */

.seccion-region { padding: .4rem 0 0; }

.region {
  font: 600 1.4rem/1.2 var(--titulo);
  letter-spacing: -.02em;
  margin: 0 0 .55rem;
}

.carrusel {
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 0 calc(var(--lado) * -1);
  padding: .2rem var(--lado) .55rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Que el snap respete el padding: sin esto la primera tarjeta se pega al borde. */
  scroll-padding-left: var(--lado);
  -webkit-overflow-scrolling: touch;
}

/*
 * EL ANCHO ES UNA CUENTA, NO UN NÚMERO FIJO, Y ESA ES LA SEÑAL DE QUE HAY MÁS.
 *
 * Con un ancho fijo, en algunos celulares entraban dos tarjetas justas contra el borde y no
 * había ningún indicio de que se podía arrastrar. Con la cuenta entran SIEMPRE dos enteras
 * más 45 px de la tercera asomando, en cualquier ancho de pantalla.
 *
 * Una tarjeta cortada por el borde es la señal más fuerte que hay de que la fila sigue, y
 * no necesita una línea de JavaScript. Flechas no: sin JS no funcionan, y eso ya se probó
 * en la galería del hotel.
 *
 * La cuenta descuenta los 45 px del asomo y los DOS gaps —el que va entre las dos enteras
 * y el que va antes de la que asoma— y reparte lo que queda entre las dos.
 */
.carrusel > li {
  position: relative;
  flex: 0 0 calc((100% - 45px - 1.2rem) / 2);
  aspect-ratio: 11 / 14;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--mar-claro);
}

/*
 * La barrita de abajo. Es un indicio, no un control: dice "esto se arrastra" y de paso
 * cuánto falta.
 *
 * Track gris con un pulgar de acento en vez de cuatro rayitas sueltas, por una razón: así
 * puede MOVERSE con el scroll sin JavaScript, con animation-timeline. Donde el navegador no
 * lo soporta se queda quieto a la izquierda y sigue funcionando como indicio, que es
 * exactamente lo que se pidió como respaldo.
 */
.barrita {
  height: 3px;
  border-radius: 999px;
  background: var(--mar-claro);
  margin: 0 0 1.5rem;
  overflow: hidden;
}

.barrita span {
  display: block;
  width: 28%;
  height: 100%;
  border-radius: 999px;
  background: var(--mar);
}

/*
 * La barrita es HERMANA del carrusel, no está adentro, así que scroll(nearest) no lo
 * encuentra: buscaría un ancestro que scrollee y no hay ninguno. Hace falta nombrar la
 * línea de tiempo en el carrusel y abrirle el alcance en el bloque que los contiene a los
 * dos. Es lo que hacen estas tres reglas juntas, y las tres son necesarias.
 */
@supports (animation-timeline: --x) and (timeline-scope: --x) {
  .carrusel          { scroll-timeline: --carr inline; }
  .seccion-region    { timeline-scope: --carr; }

  /* Lo mismo para las tarjetas de hotel: el scroller es otro y el contenedor también. */
  .tarjeta-carrusel  { scroll-timeline: --carr inline; }
  .tarjeta-hotel     { timeline-scope: --carr; }

  .barrita span {
    animation: barrita-corre linear both;
    animation-timeline: --carr;
  }

  /*
   * El pulgar mide 28% del track, así que para terminar pegado a la derecha tiene que
   * recorrer (100 - 28) = 72 puntos de track, que son 72/28 = 257% de su propio ancho.
   * translateX se mide sobre el ancho del propio elemento, de ahí el número.
   */
  @keyframes barrita-corre {
    from { transform: translateX(0); }
    to   { transform: translateX(257%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .barrita span { animation: none; }
}

.carrusel > li.sin-foto { background: var(--fondo-lugar, var(--mar-claro)); }

.carrusel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carrusel .inicial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 2.6rem var(--titulo);
  color: rgba(255,255,255,.55);
}

/*
 * El nombre y la ciudad SOBRE la foto, sin recuadro debajo. El degradado es lo que los hace
 * legibles sobre cualquier imagen: sin él, un nombre blanco sobre un cielo claro desaparece.
 */
.carrusel .etiqueta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem .7rem .65rem;
  background: linear-gradient(to top, rgba(8,22,29,.92), rgba(8,22,29,.6) 45%, transparent);
  color: #fff;
}

.carrusel .etiqueta b    { display: block; font: 600 .95rem/1.25 var(--titulo); }
.carrusel .etiqueta span { font-size: .78rem; color: rgba(255,255,255,.8); }

/* El precio: pastilla amarilla arriba a la izquierda. Es lo que decide el clic. */
.carrusel .precio {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  background: var(--limon);
  color: var(--profundo);
  font: 700 .95rem/1 var(--titulo);
  padding: .32rem .55rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(8,22,29,.35);
}

/*
 * El "desde", adentro de la pastilla y en chico. El número es el piso de un rango, así que
 * la palabra tiene que estar; el peso visual se lo queda el número igual.
 */
.carrusel .precio small {
  display: block;
  font: 600 .58rem/1 var(--texto);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .72;
  margin-bottom: .12rem;
}

/*
 * El crédito, sobre la foto y abajo a la derecha: comparte el degradado de la etiqueta, así
 * que no necesita fondo propio ni ocupa lugar en el layout. Es obligación de contrato y
 * esta posición es la que permite cumplirla sin gastar espacio de diseño.
 */
.carrusel .credito-foto {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  max-width: 45%;
  font: 500 .64rem/1.2 var(--texto);
  color: rgba(255,255,255,.66);
  text-align: right;
  text-shadow: 0 1px 3px rgba(8,22,29,.9);
  pointer-events: none;
}

.carrusel .tapa { position: absolute; inset: 0; z-index: 3; }

@media (min-width: 34rem) {
  .carrusel > li { flex: 0 0 13rem; }
}

/* Para lectores de pantalla: el enlace que tapa la tarjeta no tiene texto visible. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- cercanos: lista compacta para el transporte -------------------
 * Una estación de subte no se elige por la foto. El grupo no baja fotos de Places: usa
 * los íconos de la plantilla.
 */

.transporte { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

.transporte li {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--carta);
  border-radius: var(--r-md);
  padding: .6rem .85rem;
  box-shadow: var(--sombra);
}

.transporte .redonda {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mar-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mar);
}

.transporte .redonda img { width: 100%; height: 100%; object-fit: cover; }
.transporte .redonda svg { width: 1.3rem; height: 1.3rem; }

.transporte .txt { flex: 1; min-width: 0; }
.transporte b { display: block; font: 600 .97rem var(--titulo); }
.transporte .meta { font-size: .82rem; color: var(--suave); }

.dist {
  display: inline-block;
  background: var(--limon-claro);
  color: #7A5B10;
  font-weight: 600;
  font-size: .78rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.transporte .dist { margin-left: auto; }

@media (min-width: 48rem) {
  .mosaico { grid-template-columns: repeat(4, 1fr); }
  /* Cuadrada también en escritorio: la misma proporción en los dos tamaños. */
  .visor img { aspect-ratio: 1 / 1; }
}

/* --- tarjetas de hotel, en el índice de ciudad ---------------------
 * Una línea con el nombre y el puntaje no vende nada: la foto es la que hace que alguien
 * entre. En celular la tarjeta es foto arriba y datos abajo; desde 34rem se pone al lado
 * para que entren más hoteles en pantalla sin achicar la foto.
 */

.tarjetas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.tarjeta-hotel {
  background: var(--carta);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
}

/*
 * El carrusel de tres fotos de cada tarjeta. Se arrastra con el dedo y se frena en cada
 * foto: scroll-snap, sin una línea de JavaScript.
 */
.tarjeta-carrusel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: var(--mar-claro);

  /*
   * CUADRADA, y la misma proporción en los dos tamaños.
   *
   * Antes era 16/10 en celular y en escritorio pasaba a aspect-ratio:auto con height:100%,
   * o sea que la altura de la foto la decidía la columna de texto de al lado — que mide
   * distinto en cada hotel según cuántos campos tenga cargados. Por eso unas salían
   * cuadradas y otras más altas: no era aleatorio, era proporcional a los datos.
   */
  aspect-ratio: 1 / 1;

  /* Cuánto asoma la foto siguiente. Es una variable para que la cuenta de abajo y el valor
     de escritorio salgan del mismo lugar y no se puedan desincronizar. */
  --asomo: 45px;
}

/*
 * LA SEGUNDA FOTO ASOMA, Y CON AIRE EN EL MEDIO.
 *
 * El primer intento dejó la foto asomando pegada a la anterior, sin separación, y eso no se
 * lee como "hay más": se lee como una foto cortada, o rota. La separación es lo que
 * convierte el recorte en una señal.
 *
 * Los 45 px de asomo y el gap salen de la misma cuenta que el carrusel de la portada, para
 * que las dos cosas se sientan iguales al arrastrar.
 */
.tarjeta-carrusel { gap: .5rem; padding-right: .5rem; scroll-padding-left: 0; }

.tarjeta-carrusel > a {
  flex: 0 0 calc(100% - var(--asomo) - .5rem);
  scroll-snap-align: start;
  display: block;
  height: 100%;
  border-radius: var(--r-md, .6rem);
  overflow: hidden;
}

/* Con una sola foto no hay nada que asomar y la tarjeta la usa entera. */
.tarjeta-carrusel > a:only-child { flex-basis: 100%; border-radius: 0; }

/*
 * La barrita de las tarjetas de hotel. Misma pieza que la de la portada: si las dos filas
 * se arrastran igual, tienen que avisarlo igual.
 */
.tarjeta-hotel .barrita { margin: .45rem .7rem .1rem; }

/* La categoría del hotel: la estrella acá SÍ significa estrella. */
.categoria {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font: 700 .85rem/1 var(--titulo);
  color: var(--tinta);
}

/* Dorado literal y no var(--limon): ese amarillo está pensado para fondos oscuros y sobre
   la tarjeta clara casi no se ve. Este tono se lee en las dos variantes del tema. */
.categoria .estrella { color: #C79A2E; }

.tarjeta-carrusel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin foto, el bloque de color con la inicial: la tarjeta nunca queda rota. */
.tarjeta-sin-foto { display: block; }

.tarjeta-carrusel .inicial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-lugar, var(--mar-claro));
  color: rgba(255,255,255,.55);
  font: 700 3rem var(--titulo);
}

.tarjeta-txt { padding: .9rem 1.1rem 1.1rem; }
.tarjeta-txt h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.tarjeta-txt h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta-txt .boton { margin-top: .8rem; }

/*
 * El nombre en las tarjetas de las otras locaciones de una película.
 *
 * Ahí la tarjeta es el nombre y nada más: no lleva precio, ni estrellas, ni puntaje, así que
 * a 1.15rem el nombre quedaba más chico que el texto corrido de al lado. Va proporcionado al
 * encabezado de su propia sección —el clamp de .seccion h2, línea 323, por 0.75— y no fijo:
 * si el encabezado cambia de tamaño en un teléfono, el nombre lo acompaña.
 *
 * REGLA PROPIA, a propósito. .tarjeta-txt h3 la comparten las tarjetas de los 358 hoteles y
 * los 119 lugares, donde el nombre convive con tres datos más y el tamaño está bien.
 */
.tarjetas-locacion .tarjeta-txt h3 { font-size: clamp(1.16rem, 4.13vw, 1.5rem); }

.tarjeta-datos { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                 font-size: .88rem; margin-bottom: .2rem; }

.pastilla-dato {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--limon-claro);
  color: #7A5B10;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
}

.pastilla-dato .estrella { color: var(--limon); }

/*
 * ---------------------------------------------------------------------------
 * LA TARJETA EN ESCRITORIO: foto a la izquierda, datos a la derecha
 * ---------------------------------------------------------------------------
 *
 * EL CUADRADO BLANCO ERA UNA CELDA VACÍA DE ESTA GRILLA.
 *
 * La tarjeta tenía TRES hijos —la foto, la barrita y el texto— y esta grilla tiene DOS
 * columnas. La colocación automática los repartía así:
 *
 *     (1,1) la foto        (1,2) la barrita, 3 px de alto
 *     (2,1) el texto       (2,2) NADA  <- el cuadrado blanco, fondo --carta (#FFFFFF)
 *
 * No había nada tapando la foto: faltaba contenido para la cuarta celda, y el fondo de la
 * tarjeta se veía a través. Y sólo pasaba con dos o más fotos, porque con una la barrita no
 * se dibuja y quedaban dos hijos — por eso se veía en unas tarjetas y en otras no, y por eso
 * cambiar medidas no lo movía.
 *
 * La foto y su barrita ahora van envueltas en .tarjeta-foto: la tarjeta tiene SIEMPRE dos
 * hijos y la grilla no se puede desarmar.
 *
 * La otra cosa que arreglan estas reglas: aspect-ratio:auto + height:100% ataban el alto de
 * la foto al de la columna de texto, que varía por hotel. De ahí las fotos de alturas
 * distintas en la misma lista. Con align-items:start nada la estira: si el texto es más
 * alto, crece la tarjeta, no la foto.
 */
.tarjeta-foto { min-width: 0; }   /* que la columna pueda achicarse sin desbordar */

/*
 * Los números que cambian la foto. Sólo existen en escritorio: acá se apagan para que en
 * celular no aparezcan nunca, aunque el JavaScript los haya creado.
 *
 * SE LLAMAN .foto-nums Y NO .numeros. ".numeros" ya es el bloque de estadísticas del hotel
 * —el de "208 reseñas · 4 estrellas", que dibuja partes/panel-negro.php—, y una regla
 * ".numeros { display: none }" acá lo habría borrado de TODAS las páginas de hotel, en todos
 * los tamaños. Antes de estrenar un nombre de clase hay que buscarlo.
 */
.foto-nums { display: none; }

/*
 * ---------------------------------------------------------------------------
 * ESCRITORIO: UNA foto quieta, y los números la cambian
 * ---------------------------------------------------------------------------
 *
 * En celular el carrusel se arrastra con el dedo y está bien así: NADA DE ESTO toca esa
 * versión, que vive fuera de esta media query y queda igual.
 *
 * Acá abajo el mismo HTML se lee distinto. Quedaban dos barras paralelas debajo de las
 * fotos —la de scroll del carrusel y la barrita de progreso— y ninguna de las dos hace
 * falta cuando no hay nada que arrastrar. Se apagan las dos y las reemplaza un 1 2 3 sobre
 * la propia foto.
 *
 * SIN JAVASCRIPT SE VE LA PRIMERA FOTO, FIJA. Es un estado correcto y no una degradación:
 * la tarjeta muestra una foto, el nombre, los datos y el botón, que es todo lo que tiene
 * que hacer. Los números los agrega sitio.js; si no carga, no aparecen y no falta nada.
 */
@media (min-width: 34rem) {
  .tarjeta-hotel { display: grid; grid-template-columns: 17rem 1fr; align-items: start; }

  /* El ancla de los números, que van encima de la foto. */
  .tarjeta-foto { position: relative; }

  /*
   * ---------------------------------------------------------------------------
   * ESTO VA SOLO DENTRO DE .tarjeta-foto, Y EL ALCANCE ES EL ARREGLO
   * ---------------------------------------------------------------------------
   *
   * Estaba escrito como `.tarjeta-carrusel` a secas, o sea para CUALQUIER tira del sitio que
   * usara esa clase. Cuando la tarjeta de producto la reusó —que era lo correcto: no escribir
   * un cuarto carrusel— se llevó puesta la tira de los tours: en escritorio le apagaba el
   * overflow, el snap y todas las fotos menos la primera. En el celular funcionaba, porque
   * esta media query no existe ahí. De ahí "en PC se ve una sola foto".
   *
   * .tarjeta-foto es el envoltorio de la tarjeta del índice de ciudad, y es EXACTAMENTE el
   * mismo que busca sitio.js para poner los numeritos:
   *
   *     var cajas = document.querySelectorAll('.tarjeta-foto');
   *     car.classList.add('con-numeros');
   *
   * Así que acotar acá deja el CSS y el JavaScript mirando el mismo elemento. La tarjeta de
   * producto usa .producto-foto y queda afuera: sigue siendo tira, con snap, con asomo y con
   * el arrastre de mouse que sitio.js ya le engancha por la lista de tiras.
   *
   * De tira que se arrastra a caja quieta. Sin overflow no hay barra de scroll —la primera
   * de las dos barras—, y sin snap ni asomo no hay nada que insinúe un arrastre que ya no
   * existe acá.
   */
  .tarjeta-foto .tarjeta-carrusel {
    display: block;
    overflow: hidden;
    scroll-snap-type: none;
    gap: 0;
    padding-right: 0;
    cursor: default;
  }

  /*
   * Una sola visible. El :first-child es el estado sin JavaScript; cuando sitio.js pone los
   * números marca el carrusel y a partir de ahí manda la que está activa.
   */
  .tarjeta-foto .tarjeta-carrusel > a { display: none; width: 100%; height: 100%; border-radius: 0; }
  .tarjeta-foto .tarjeta-carrusel > a:first-child { display: block; }

  .tarjeta-foto .tarjeta-carrusel.con-numeros > a:first-child { display: none; }
  .tarjeta-foto .tarjeta-carrusel.con-numeros > a.activa      { display: block; }

  /* La segunda barra. Indicaba cuánto faltaba de un arrastre que acá no hay. */
  .tarjeta-hotel .barrita { display: none; }

  /*
   * Abajo a la derecha: es donde menos tapa: las fotos de hotel ponen el asunto en el
   * centro o arriba, y la esquina inferior derecha suele ser piso o pared.
   */
  .foto-nums {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: flex;
    gap: .25rem;
    z-index: 2;
  }

  /*
   * Círculo oscuro translúcido con el número en blanco. Se lee sobre una foto clara y sobre
   * una oscura: el fondo propio es lo que lo hace independiente de la imagen. La sombra
   * suave despega el borde cuando la foto de atrás es casi negra.
   */
  .foto-num {
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 .76rem/1 var(--texto);
    color: #fff;
    background: rgba(8,22,29,.62);
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    cursor: pointer;
    transition: background .12s ease;
  }

  .foto-num:hover { background: rgba(8,22,29,.8); }

  /* El activo se da vuelta: blanco lleno con el número oscuro. Se distingue de lejos. */
  .foto-num.activa {
    background: #fff;
    color: var(--tinta);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
  }

  .foto-num:focus-visible { outline: 3px solid var(--mar); outline-offset: 2px; }
}

/* --- LAS TIRAS QUE SE ARRASTRAN -----------------------------------
 *
 * Las tres del sitio: las miniaturas de la ficha, el carrusel de la portada y el de cada
 * tarjeta del índice de ciudad.
 *
 * ---------------------------------------------------------------------------
 * EN ESCRITORIO NO HABÍA NINGUNA FORMA DE MOVERLAS
 * ---------------------------------------------------------------------------
 *
 * Las tres tenían `scrollbar-width: none` y `::-webkit-scrollbar { display: none }`. El
 * contenedor SÍ desplazaba, pero no quedaba ninguna vía para accionarlo con un mouse:
 * `overflow-x: auto` no da arrastre —eso es táctil—, la barra estaba borrada, y el
 * shift+rueda no lo adivina nadie. En el celular andaban porque el dedo arrastra; con mouse
 * eran una lista con contenido inalcanzable.
 *
 * La solución va en dos capas, y la de abajo no necesita JavaScript:
 *
 *   1. AQUÍ: una barra fina y visible. Es el piso: si sitio.js no carga, las tiras se
 *      siguen pudiendo mover. Es además la señal de que hay más, que un asomo solo insinúa.
 *   2. En sitio.js: arrastrar con el mouse, que es lo cómodo. Si falta, no se pierde nada.
 *
 * El asomo de 45 px se queda igual: dice que hay más contenido. Lo que faltaba no era la
 * señal, era poder moverlo.
 */

.miniaturas,
.carrusel,
.tarjeta-carrusel {
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(14,42,53,.35) transparent;
  /* Que el rebote horizontal no se lo lleve la página entera. */
  overscroll-behavior-x: contain;
}

.miniaturas::-webkit-scrollbar,
.carrusel::-webkit-scrollbar,
.tarjeta-carrusel::-webkit-scrollbar { height: 7px; }

.miniaturas::-webkit-scrollbar-track,
.carrusel::-webkit-scrollbar-track,
.tarjeta-carrusel::-webkit-scrollbar-track { background: transparent; }

.miniaturas::-webkit-scrollbar-thumb,
.carrusel::-webkit-scrollbar-thumb,
.tarjeta-carrusel::-webkit-scrollbar-thumb {
  background: rgba(14,42,53,.3);
  border-radius: 999px;
}

.miniaturas:hover::-webkit-scrollbar-thumb,
.carrusel:hover::-webkit-scrollbar-thumb,
.tarjeta-carrusel:hover::-webkit-scrollbar-thumb { background: rgba(14,42,53,.5); }

/*
 * Arrastrar una foto dispara el arrastre NATIVO de imagen del navegador, que se come el
 * gesto y deja la tira quieta con un fantasma de la foto pegado al puntero.
 */
.miniaturas img,
.carrusel img,
.tarjeta-carrusel img { -webkit-user-drag: none; user-select: none; }

/*
 * Mientras se arrastra. El snap se apaga —con el snap puesto el contenido pelea contra el
 * puntero— y se vuelve a encender al soltar, así el navegador acomoda solo a la foto más
 * cercana, que es justo el remate que se quiere.
 */
.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
  scroll-behavior: auto;
}

/* --- widget de un tercero -----------------------------------------
 * El HTML de GetYourGuide viene con el ancho que ellos decidan. Si se desborda, se
 * desborda ACÁ ADENTRO y no en la página: el scroll horizontal del sitio entero se sacó
 * a propósito para que el botón flotante pueda ser sticky, así que nada puede empujar
 * el ancho del body.
 */

.caja-widget {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.caja-widget > * { max-width: 100%; }
.caja-widget iframe { max-width: 100%; }

/* --- listas ------------------------------------------------------- */

.destacados { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.destacados li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: var(--carta);
  border-radius: var(--r-md);
  padding: .8rem .95rem;
  box-shadow: var(--sombra);
  font-size: .98rem;
}

.destacados li::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  margin-top: .55rem;
  border-radius: 50%;
  background: var(--coral);
}

.servicios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }

.servicios li {
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: 600;
  font-size: .9rem;
  padding: .42rem .85rem;
  border-radius: 999px;
}

/* --- mapa ---------------------------------------------------------
 * El mapa no se mueve al hacer scroll: si el dedo cae encima, el gesto arrastra la
 * página. Un toque en la capa marca una casilla escondida y ahí sí se activa. Sin JS.
 */

.mapa-bloque { position: relative; }

.mapa {
  position: relative;
  height: 15rem;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--mar-claro);
  box-shadow: var(--sombra);
}

.mapa iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }

#mapa-activo { position: absolute; opacity: 0; pointer-events: none; }

/*
 * La capa es transparente y no muestra nada: su único trabajo es atrapar el primer toque
 * para que el scroll no se lo lleve el iframe. Sin texto encima del mapa.
 */
.capa-mapa {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

#mapa-activo:checked ~ .mapa-bloque .capa-mapa { display: none; }
#mapa-activo:checked ~ .mapa-bloque .mapa iframe { pointer-events: auto; }

/*
 * La dirección va arriba del mapa, como texto común: sin caja, sin fondo, sin sombra.
 * 1.4rem arriba y abajo para que no quede pegada ni al título ni al mapa.
 */
.direccion { margin: 1.4rem 0; font-size: 1rem; color: var(--tinta); }

/*
 * Los dos enlaces de afiliado del cuerpo, como tarjeta.
 *
 * Como texto suelto quedaban pegados al bloque de arriba y se leían como un pie de foto.
 * Con la tarjeta ocupan su lugar, se ve que son algo en lo que se puede tocar, y el aire
 * de 1.4rem los separa de lo que tienen encima y debajo.
 */
.enlace-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.4rem 0;
  padding: .9rem 1rem;
  background: var(--carta);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  font: 600 1rem var(--texto);
  color: var(--tinta);
  text-decoration: none;
}

.enlace-tarjeta .flecha { color: var(--mar); font-weight: 700; }

/* --- condiciones -------------------------------------------------- */

.condiciones {
  background: var(--carta);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin: 0;
}

.condiciones div {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .62rem .95rem;
  border-top: 1px solid var(--linea);
}

.condiciones div:first-child { border-top: 0; }
.condiciones dt { flex: 0 0 8.5rem; font: 600 .82rem var(--texto); color: var(--suave); }
.condiciones dd { margin: 0; font-size: .96rem; }

@media (min-width: 40rem) {
  .condiciones { display: grid; grid-template-columns: 1fr 1fr; }
  .condiciones div:nth-child(2) { border-top: 0; }
  .condiciones div:nth-child(odd) { border-right: 1px solid var(--linea); }
}

/* --- preguntas ---------------------------------------------------- */

.faq { display: grid; gap: .45rem; }

.faq details {
  background: var(--carta);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/*
 * ---------------------------------------------------------------------------
 * DEUDA ANOTADA · ESTE display: flex PUEDE ROMPER EL FAQ EN SAFARI
 * ---------------------------------------------------------------------------
 *
 * Cambiarle el display a un <summary> le saca su condición de disparador en Safari: el
 * <details> deja de abrirse y el contenido, que está en el HTML, no se ve nunca. Pasó
 * exactamente eso en .ficha-tour —trece fichas llenas por dentro que parecían vacías— y ahí
 * ya está arreglado poniendo el signo con position en vez de con flex.
 *
 * ACA NO SE TOCA TODAVIA, Y ES A PROPOSITO. En Chrome abre bien —comprobado en la página
 * publicada— y esta regla la usan las 358 páginas de hotel más las de lugar: cambiarla
 * obliga a republicarlas todas. Se hace junto con el próximo cambio que ya obligue a
 * republicar hoteles, no antes.
 *
 * EL ARREGLO, ESCRITO PARA NO TENER QUE PENSARLO DE NUEVO:
 *
 *     .faq summary {
 *       position: relative;                 <- en vez de display:flex
 *       padding: .95rem 3rem .95rem 1.05rem;   <- lugar para el signo a la derecha
 *       …lo demás igual…
 *     }
 *     .faq summary::after {
 *       position: absolute;
 *       top: .95rem;                        <- a la altura de la primera línea
 *       right: 1.05rem;
 *       …lo demás igual, sin flex: 0 0 auto…
 *     }
 *
 * Y la comprobación que decide si hacía falta: en un iPhone, abrir la SEGUNDA pregunta de
 * cualquier página de hotel. La primera sale con open y no prueba nada.
 */
.faq summary {
  cursor: pointer;
  padding: .95rem 1.05rem;
  font: 600 1rem var(--titulo);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font: 400 1.35rem/1 var(--titulo);
  color: var(--mar);
  flex: 0 0 auto;
}

/*
 * EL GUION VA ESCAPADO, NO COMO CARACTER. Es la única defensa que hay.
 *
 * Acá decía content: "–" con el guión de verdad, y un ida y vuelta del archivo por CP1252 lo
 * convirtió en tres caracteres: â € ". Ocho bytes, UTF-8 perfectamente válido, así que
 * ninguna comprobación de "¿es UTF-8?" lo iba a agarrar — y el navegador dibujaba esos tres
 * símbolos al lado de cada pregunta abierta, que es lo que se veía.
 *
 * \2013 es el mismo guión escrito en ASCII puro. Un archivo sin un solo byte alto en sus
 * reglas no se puede romper así, porque no hay nada que reinterpretar.
 */
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { padding-bottom: .25rem; }
.faq .respuesta { padding: 0 1.05rem 1.1rem; color: var(--suave); font-size: .96rem; }

/* --- enlaces ------------------------------------------------------ */

.enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }

.enlaces a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--carta);
  border-radius: var(--r-md);
  padding: .85rem 1.05rem;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 500;
  box-shadow: var(--sombra);
}

.enlaces .flecha { color: var(--mar); font-weight: 600; font-size: .9rem; flex: 0 0 auto; }

/*
 * Los enlaces del final, CON la foto del hotel.
 *
 * Antes eran texto pelado, y el índice de ciudad ofrece los mismos hoteles con foto. La foto
 * es lo que hace que alguien entre; sin ella, el bloque que cierra la página no invita a
 * seguir a ninguna parte.
 */
.enlaces-foto a { gap: .8rem; padding: .6rem .85rem; }

.enlace-foto {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
  background: var(--mar-claro);
}

/* Sin foto, el bloque de color con la inicial: la fila nunca queda con un hueco. */
.enlace-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-lugar, var(--mar-claro));
  color: rgba(255,255,255,.6);
  font: 700 1.35rem var(--titulo);
}

/* min-width:0 para que un nombre largo se recorte en vez de empujar la flecha afuera. */
.enlace-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: .08rem; }

.enlace-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-dato   { color: var(--suave); font-size: .82rem; font-weight: 400; }

.ciudad { font: 600 .78rem var(--texto); text-transform: uppercase; letter-spacing: .08em;
          color: var(--suave); margin: 1.6rem 0 .4rem; }

/* --- botón flotante -----------------------------------------------
 * Sticky y no fixed: flota mientras hay página por delante y se va con el contenido al
 * llegar al final, en vez de quedar tapando el pie.
 */

.flotante-zona {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + .85rem);
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  margin-top: 1.5rem;
  pointer-events: none;
}

.flotante {
  pointer-events: auto;
  width: min(100%, 22rem);
  background: var(--mar);
  color: #fff;
  box-shadow: 0 10px 26px rgba(14,42,53,.32);
}

/* --- el final oscuro ---------------------------------------------- */

.final {
  background: var(--profundo);
  color: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: 3rem;
  /* Lo justo para despegar del borde y respetar la barra del gesto del celular. */
  padding-bottom: calc(env(safe-area-inset-bottom) + .9rem);
}

.cierre { padding: 2.8rem 0 2.2rem; }
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255,255,255,.78); }

.aviso { padding: 1.4rem 0 .6rem; font-size: .85rem; color: rgba(255,255,255,.68); }
.aviso strong { color: rgba(255,255,255,.9); }

.pie { padding: .6rem 0 0; font-size: .85rem; color: rgba(255,255,255,.55); }
.pie a { color: rgba(255,255,255,.85); }

/*
 * El hotel en el pie: un solo bloque centrado, con el nombre grande y enlazado y la
 * dirección debajo. El subrayado grueso en limón es lo que dice que el nombre se toca:
 * en un bloque oscuro, un enlace del mismo color que el texto no se lee como enlace.
 */
.pie-hotel { text-align: center; margin: 1.4rem 0; }

/*
 * Con .pie a delante: sin eso, la regla general de los enlaces del pie le gana al blanco.
 *
 * Los dos enlaces grandes del pie —el hotel y el índice— comparten la regla a propósito.
 * Escribirla dos veces con los mismos números las dejaría separarse el día que alguien
 * toque una sola, y lo que se pidió es justamente que se lean como un par.
 */
.pie a.pie-hotel-nombre,
.pie a.pie-indice {
  display: inline-block;
  font: 700 1.4rem var(--titulo);
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid var(--limon);
  padding-bottom: 3px;
}

.pie-hotel-dir {
  margin: .7rem 0 0;
  font-size: .9rem;
  color: rgba(255,255,255,.7);
}

/* El índice, centrado y con el mismo aire que el bloque del hotel. */
.pie-indice-bloque { text-align: center; margin: 1.4rem 0; }

/*
 * QUE ENTRE EN UNA LINEA EN UN CELULAR.
 *
 * "Encontrá los mejores tours en Italia" a 1.4rem no entra en 360 px y parte en dos, con el
 * subrayado amarillo cortado a la mitad de la frase. No se puede resolver con nowrap: forzar
 * una línea que no entra empuja el ancho de la página y aparece el scroll horizontal, que es
 * peor.
 *
 * Se achica la letra sólo mientras la pantalla es angosta y se deja de 1.4rem desde 26rem,
 * donde ya entra. clamp() con vw: crece con la pantalla y se planta en 1.4rem.
 */
@media (max-width: 26rem) {
  .pie a.pie-hotel-nombre,
  .pie a.pie-indice { font-size: clamp(1rem, 4.6vw, 1.4rem); }
}

/* El margen del último párrafo se sumaba al relleno del bloque y sobraba aire abajo. */
.final p:last-child, .atribuciones:last-child { margin-bottom: 0; }

.atribuciones { font-size: .78rem; color: rgba(255,255,255,.45); }
.atribuciones a { color: rgba(255,255,255,.6); }

@media (min-width: 48rem) {
  .flotante-zona { display: none; }
  .hero { min-height: 56svh; }
}

@media (prefers-reduced-motion: reduce) {
  .boton, .boton:active { transition: none; transform: none; }
}


/* ===========================================================================
   LA TARJETA DE UN TOUR · reemplaza al bloque anterior, que no dibujaba
   ===========================================================================

   Lo que había antes tenía reglas, y por eso la comprobación "la clase existe en el CSS"
   daba verde — pero no dibujaban nada que se viera:

     .boton-comprar { display: block; text-align: center; margin-top: .2rem; }

   Ni fondo ni color. El botón salía transparente sobre fondo claro: invisible, en la única
   parte de la página que monetiza. Una regla vacía cuenta igual que una completa si lo que
   se pregunta es "existe".

   Y la caja era `background:#fff` con un borde de 1px sobre un fondo casi blanco: existía y
   no se leía como un objeto.

   Acá se usan los tokens del sitio —--carta, --linea, --sombra, --r-md— así que la tarjeta
   se ve como las demás cajas y cambia con ellas.
   ======================================================================== */

/*
 * ---------------------------------------------------------------------------
 * LA TARJETA ES UNA GRILLA DE DOS HIJOS, COMO LA DE HOTEL. NO UN FLEX.
 * ---------------------------------------------------------------------------
 *
 * Con flex la foto salía angosta y altísima, y el texto apretado al lado. La razón exacta:
 *
 *   .producto era flex-direction: row y la foto .producto-foto { flex: 0 0 38% }.
 *   Un hijo de un flex se estira a lo alto del contenedor (align-items: stretch es lo que
 *   viene de fábrica), y estirar GANA sobre aspect-ratio. La caja de la foto tomaba el
 *   ancho del 38% y el alto de la tarjeta entera —diez renglones de texto—, y el <img>, con
 *   object-fit: cover, rellenaba ese rectángulo parado recortando la foto por los costados.
 *
 * La tarjeta de hotel del índice nunca tuvo ese problema porque no usa flex: es
 *
 *     .tarjeta-hotel { display: grid; grid-template-columns: 17rem 1fr; align-items: start; }
 *
 * Una columna de ancho FIJO y align-items: start, que es lo que deja al cuadrado ser
 * cuadrado. Acá se copia esa forma con la medida que corresponde a una tarjeta más chica.
 */

.productos {
  display: grid;
  gap: 1rem;
  /*
   * 26rem y no 19: la tarjeta ahora es una fila —foto a la izquierda, texto a la derecha— y
   * en 19rem el texto se quedaba con 9. Con 26 entran dos columnas recién en pantallas
   * anchas, que es cuando de verdad hay lugar para dos filas de éstas.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.producto {
  display: grid;
  background: var(--carta, #fff);
  border: 1px solid var(--linea, #E3EAEE);
  border-radius: var(--r-md, 16px);
  box-shadow: var(--sombra, 0 2px 8px rgba(18,38,47,.06));
  overflow: hidden;              /* la foto se recorta con la esquina redondeada */
  /* Sin esto un título largo no deja encoger la celda y la grilla desborda. */
  min-width: 0;
}

/* --- la foto ------------------------------------------------------------- */

/*
 * .producto-foto NO declara aspect-ratio ni fondo: los trae .tarjeta-carrusel, que es la
 * misma clase que usa la tarjeta de hotel y ya da el cuadrado 1/1, el object-fit y el color
 * de espera. Acá sólo se dice qué papel juega DENTRO de la tarjeta.
 *
 * align-self: start es la línea que arregla el estirado. Sin ella la celda de la grilla
 * también estira a sus hijos a lo alto y vuelve el rectángulo parado.
 */
.producto-foto {
  min-width: 0;
  align-self: start;
}

/* --- el texto ------------------------------------------------------------ */

.producto-txt {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1rem 1rem;
  min-width: 0;
}

/*
 * EL TITULO ES LO PRIMERO QUE SE LEE Y TIENE QUE PESAR MAS QUE EL PRECIO.
 *
 * Estaba en 1.02rem, o sea casi igual que el gancho (.92rem) y por DEBAJO del precio
 * (1.25rem). Con todo el mismo peso, la tarjeta se lee como cuatro renglones sueltos.
 *
 * Pasa a 1.53rem: 1.02 × 1.5. La jerarquía queda
 *
 *     título 1.53  >  precio 1.25  >  gancho .92  >  incluye/duración .86
 */
.producto-txt h3 {
  margin: 0;
  font: 600 1.53rem/1.25 var(--titulo, sans-serif);
  color: var(--tinta, #12262F);
  overflow-wrap: anywhere;
}

.producto-gancho  { margin: 0; font-size: .92rem; color: var(--tinta, #12262F); }
.producto-incluye { margin: 0; font-size: .86rem; color: var(--suave, #5D7079); }

.datos-producto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .8rem;
  margin: .35rem 0 .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--linea, #E3EAEE);
  margin-top: auto;               /* el bloque de precio va abajo del todo */
}

.datos-producto .dato {
  font-size: .86rem;
  color: var(--suave, #5D7079);
}

/*
 * LA PUNTUACION · sólo la traen los productos de Viator.
 *
 * La nota en negrita y cuántas opiniones al lado, en chico: son dos datos distintos y el
 * segundo es el que le da peso al primero. Sin estrellas dibujadas — una fila de estrellas se
 * lee como una valoración nuestra, y esto es lo que dice Viator.
 */
.punt-producto {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

.punt-nota {
  font-weight: 700;
  color: var(--tinta, #12262F);
}

.punt-nota::before {
  /* La estrella escapada y no pegada: las reglas de este archivo van en ASCII puro, que es lo
     que impide que un ida y vuelta de codificacion las vuelva a romper. \2605 es la estrella. */
  content: "\2605";
  margin-right: .18rem;
  color: var(--acento, #E8A33D);
}

.punt-cuantas {
  font-size: .8rem;
  color: var(--suave, #5D7079);
}

/* EL PRECIO ES EL DATO QUE DECIDE: va más grande y más oscuro que todo lo demás. */
.precio-producto {
  margin-left: auto;
  font: 700 1.25rem/1 var(--titulo, sans-serif);
  color: var(--tinta, #12262F);
  white-space: nowrap;
}

/* --- la ficha del tour, adentro de la tarjeta ----------------------------- */

/*
 * UN <details> POR TARJETA, CERRADO.
 *
 * No se puede reusar el estilo de .faq: aquellas reglas están escritas como ".faq details" y
 * ".faq summary", o sea que sólo pintan dentro del bloque de preguntas. Un <details> pelado
 * acá adentro no heredaría nada y saldría con el triangulito del navegador y sin márgenes
 * —que es "existe la etiqueta" pero no "se ve como algo del sitio"—.
 *
 * Es la caja de la letra chica: sin fondo propio, porque ya está adentro de la tarjeta, y
 * separada del precio por una línea.
 */
.ficha-tour {
  margin: .2rem 0 .6rem;
  border-top: 1px solid var(--linea, #E3EAEE);
  padding-top: .55rem;
}

/*
 * EL SUMMARY ES UN CONTROL, ASI QUE TIENE QUE MEDIR COMO UN CONTROL.
 *
 * El signo salía en .88rem, igual que el texto, y flotado a la derecha: se leía como parte
 * de la frase y no como algo que se aprieta. Y la fila entera medía 1,2 rem de alto, o sea
 * la mitad de lo que necesita un pulgar.
 *
 * Tres cosas, y ninguna toca el texto ni su color, que se quedan como están:
 *
 *   min-height: 44px      es la medida de zona tocable que usan las guías de accesibilidad
 *                         de Apple y de Android. Debajo de eso, en un celular hay que
 *                         apuntar, y apuntar falla.
 *   display: flex         el signo pasa a ser una columna propia en vez de un float. Un
 *                         float se saca del flujo y no hay forma de alinearlo con nada.
 *   align-items: flex-start   alineado con la PRIMERA LINEA del texto, no con el centro de
 *                         la caja: si el título del desplegable ocupa dos renglones, el
 *                         signo se queda arriba, al lado de donde empieza a leerse.
 *
 * Todo esto vive bajo .ficha-tour. Las preguntas del FAQ usan .faq details / .faq summary,
 * que es otra regla y no comparte ni un selector con ésta: quedan exactamente igual, en las
 * páginas de lugar y en las 358 de hotel.
 */
/*
 * ---------------------------------------------------------------------------
 * AL <summary> NO SE LE CAMBIA EL display. NI A FLEX NI A NADA.
 * ---------------------------------------------------------------------------
 *
 * Acá decía `display: flex` para poner el signo a la derecha. Es la forma habitual de
 * hacerlo y en Chrome anda — pero en Safari, cambiarle el display a un <summary> le saca su
 * condición de disparador y el <details> DEJA DE ABRIRSE. El contenido está en el HTML
 * —comprobado: las trece fichas de la página del Colosseo lo tienen— y no se abre nunca, así
 * que se ve como trece títulos vacíos.
 *
 * El signo se coloca con position: absolute, que no toca el display de nadie. El padding de
 * la derecha le reserva el lugar para que nunca se monte sobre el texto.
 *
 * Se mantiene todo lo pedido: el signo grande, alineado con la PRIMERA línea del texto —el
 * absolute cuelga de arriba, no del centro— y los 44 px de zona tocable.
 */
.ficha-tour > summary {
  cursor: pointer;
  list-style: none;
  font: 600 .88rem/1.3 var(--texto);
  color: var(--mar);

  position: relative;
  padding: .7rem 2.2rem .7rem 0;
  min-height: 44px;
  box-sizing: border-box;
}

/* El triangulito de fábrica, en los dos motores. El signo lo pone ::after. */
.ficha-tour > summary::-webkit-details-marker { display: none; }
.ficha-tour > summary::marker { content: ""; }

/*
 * El signo, 1.5rem contra los .88rem del texto: casi el doble, que es lo que lo hace leer
 * como un control y no como un carácter más de la frase.
 *
 * El line-height de 1.15rem es el alto de una línea del texto (.88 × 1.3). Con eso la caja
 * del signo mide exactamente un renglón y el glifo queda centrado sobre la primera línea,
 * aunque el título ocupe dos.
 */
/*
 * El signo, 1.5rem contra los .88rem del texto: casi el doble, que es lo que lo hace leer
 * como un control y no como un carácter más de la frase.
 *
 * Colgado de arriba a la derecha con top, no centrado con transform: así queda a la altura
 * de la PRIMERA línea aunque el título ocupe dos. El .7rem del top es el mismo padding que
 * el summary, o sea que arranca donde arranca el texto.
 */
.ficha-tour > summary::after {
  content: "\002B";                 /* el más, escapado: el archivo queda ASCII */
  position: absolute;
  top: .7rem;
  right: .35rem;
  font: 400 1.5rem/1.15rem var(--titulo);
  color: var(--mar);
}

.ficha-tour[open] > summary::after { content: "\2013"; }

.ficha-tour[open] > summary { margin-bottom: .4rem; }

.ficha-dato {
  margin: .5rem 0 .3rem;
  font-size: .84rem;
  color: var(--suave, #5D7079);
}

.ficha-tour .servicios,
.ficha-tour .excluye,
.ficha-tour .puntos { margin: .25rem 0 .5rem; }

.ficha-tour .servicios li,
.ficha-tour .excluye li,
.ficha-tour .puntos li { font-size: .82rem; max-width: 100%; overflow-wrap: anywhere; }

/*
 * LO QUE NO ENTRA EN EL PRECIO. No había ninguna clase para esto.
 *
 * Misma forma que .servicios y otro color: se distinguen de un vistazo sin leer el rótulo, y
 * el gris dice "esto no está incluido" sin escribir una negación al lado de cada línea.
 */
.excluye {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.excluye li {
  background: var(--fondo, #F4F7F9);
  color: var(--suave, #5D7079);
  border: 1px solid var(--linea, #E3EAEE);
  font-size: .9rem;
  padding: .42rem .85rem;
  border-radius: 999px;
}

/* --- el botón ------------------------------------------------------------ */

/*
 * El color lo pone .boton-principal, que va en el HTML. Acá sólo se ajusta el tamaño: en una
 * tarjeta el botón no necesita el padding de un hero.
 */
.boton-comprar {
  padding: .7rem 1.1rem;
  font-size: .95rem;
  /*
   * EL BOTON MIDE LO QUE DICE, NO LO QUE MIDE LA TARJETA.
   *
   * Llevaba .boton-lleno en el HTML, que es width: 100%, y cruzaba la tarjeta de lado a
   * lado. .boton-lleno no se toca: la usan el botón del hero y el del cierre, donde a lo
   * ancho está bien. Se le sacó a este botón y acá se dice lo que sí tiene que hacer.
   *
   * align-self: start porque .producto-txt es un flex en columna y, sin eso, el botón se
   * estira igual — sería sacar el width: 100% y que el estirado lo devuelva por otro lado.
   */
  width: auto;
  align-self: start;
}

/*
 * En escritorio el botón se va a la derecha, debajo del precio, que ya está a la derecha por
 * su margin-left: auto. Los dos alineados al mismo borde: el ojo baja del precio al botón
 * sin cruzar la tarjeta. Va desde 30rem, que es donde la tarjeta pasa a ser una fila.
 */
@media (min-width: 30rem) {
  .boton-comprar { align-self: end; }
}

/*
 * En el celular sí ocupa todo: la tarjeta es de una columna, el pulgar apunta ancho y un
 * botón corto al costado en una pantalla de 360 px se lee como un enlace más.
 */
@media (max-width: 29.99rem) {
  .boton-comprar { width: 100%; }
}

/*
 * EL CREDITO DE CADA FOTO DE LA TIRA · misma clase y mismo mecanismo que el carrusel.
 *
 * Va adentro del <a> de su foto, así que se mueve con ella: en la tira sólo se ve una a la
 * vez y el crédito que se lee es siempre el de la que se está viendo. Es lo mismo que se
 * arregló en la galería, donde el crédito era fijo y acreditaba mal a partir de la segunda.
 *
 * El <a> NO era position: relative —lo comprobé leyendo la regla, no de memoria—, así que un
 * crédito absoluto se habría colgado de la TIRA entera y se habría quedado quieto abajo a la
 * derecha mientras las fotos pasan por detrás: el mismo bug que se está arreglando. Se le
 * pone relative acá, y sólo a los hijos de .producto-foto: las otras tres tiras del sitio no
 * se tocan.
 */
.producto-foto > a { position: relative; }

.producto-foto .credito-foto {
  position: absolute;
  right: .45rem;
  bottom: .4rem;
  max-width: 80%;
  font: 500 .62rem/1.2 var(--texto);
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * DE 30rem PARA ARRIBA, LA FILA: foto a la izquierda con ancho FIJO, texto al lado.
 *
 * La columna se declara en rem, no en porcentaje. Con 38% la foto crecía con la tarjeta y su
 * lado —que es cuadrada— crecía con ella: en una tarjeta ancha la foto se comía la mitad de
 * la altura de la fila. 9.5rem es fijo y la tarjeta entera mide lo que mide el texto.
 *
 * Debajo de 30rem la grilla se queda en una sola columna —la de fábrica— y la tarjeta vuelve
 * a ser foto arriba y texto abajo, que en un celular es la única forma que entra.
 */
@media (min-width: 30rem) {
  .producto {
    grid-template-columns: 9.5rem 1fr;
    align-items: start;
  }
}

@media (min-width: 60rem) {
  /* Con más lugar, la foto un poco más grande. Sigue siendo fija y sigue siendo cuadrada. */
  .producto { grid-template-columns: 12rem 1fr; }
}

/* ---------------------------------------------------------------------------
   Tres que se usaban sin estar escritas
   ---------------------------------------------------------------------------

   .galeria la usa también la página de hotel: era un envoltorio sin reglas, y funcionaba
   de casualidad porque .visor y .miniaturas se sostienen solas. Queda escrita para que la
   comprobación "ninguna clase sin CSS" no tenga excepciones — una lista de excepciones es
   por donde se cuela la próxima.

   .puntos y .horarios son de las páginas de lugar y no existían en ningún lado.
   -------------------------------------------------------------------------- */

.galeria { display: block; }

.puntos {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}

/*
 * PASTILLAS DE VERDAD: FONDO, NO SOLO CONTORNO.
 *
 * Tenían la forma —radio 999px— pero el interior era del color de la página, así que se leían
 * como una lista con el borde puesto, no como etiquetas. El fondo es lo que las separa del
 * texto corrido.
 *
 * El tono es --mar-claro, que ya existe y es el mismo celeste que usa la banda del hero y el
 * fondo de espera de las fotos. No se inventa un color nuevo: chillón sería --limon, que en
 * este sitio está reservado para una sola cosa, el botón que se aprieta.
 *
 * El borde pasa a un celeste apenas más oscuro que el fondo: con --linea gris encima del
 * celeste se veían dos colores peleando en un elemento de 24 px de alto.
 *
 * Sólo las usa la página de LUGAR. Los destacados de un hotel son .destacados, otra regla,
 * dentro de una banda de color: esos no se tocan.
 */
.puntos li {
  padding: .3rem .8rem;
  background: var(--mar-claro, #DCEEF3);
  border: 1px solid rgba(31,143,168,.18);
  color: var(--tinta, #12262F);
  border-radius: 999px;
  font-size: .9rem;
  /* Un punto largo no puede estirar la fila más allá de la pantalla. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.horarios { width: 100%; border-collapse: collapse; margin-top: .6rem; }

.horarios th,
.horarios td {
  text-align: left;
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--linea, #eee);
  font-weight: 400;
}

.horarios th { color: var(--suave, #666); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   .tabla · la de los horarios
   ---------------------------------------------------------------------------

   Estaba usada en la página de lugar y no existía en el CSS. Una tabla sin reglas se dibuja
   con el ancho de su contenido: si una fila trae un horario largo, la tabla se pasa del
   ancho de la pantalla y arrastra la página con ella. Es el mismo desborde de siempre, por
   el elemento que más fácil lo produce.

   El overflow-x en el envoltorio es la red: si aun así no entra, scrollea LA TABLA y no la
   página.
   -------------------------------------------------------------------------- */

.tabla {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* que una celda larga no estire la tabla */
}

.tabla th,
.tabla td {
  text-align: left;
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--linea, #eee);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.tabla th { color: var(--suave, #666); white-space: nowrap; width: 45%; }