/* City Tour Asunción. Hoja única, sin compilar.

   La marca es el logo: rojo #DD251C sobre fondo claro, con aire, nunca sobre rojo ni sobre foto, sin
   efectos. Va en PNG y a tamaño de marca: el calco en SVG probado el 02-11-2026 deformaba la script.

   El tono es cálido y liviano, no de cartel: Poppins en toda la página, por pedido del dueño, sin pasar de
   600 ni de tamaños de afiche; marcos dobles de radios concéntricos, sombras muy difusas y mucho aire.

   Contrastes medidos: blanco sobre rojo 4,82:1; rojo sobre papel 4,63:1; rojo hondo sobre papel 6,68:1;
   tinta sobre papel 16,0:1; tinta suave sobre papel 6,5:1; tinta suave sobre rubor 6,0:1. Sobre el rubor
   el rojo baja de 4,5:1: ahí sólo va en detalles que no son texto.

   Tema único claro, a propósito: el logo no puede ir sobre oscuro. */

:root {
  --rojo: #DD251C;
  --rojo-hondo: #B01C15;
  --tinta: #2A1A16;
  --tinta-suave: #6B5750;
  --papel: #FDFAF6;
  --rubor: #F9EFE9;
  --blanco: #FFFFFF;
  --hilo: rgb(42 26 22 / .1);

  --titulo: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: var(--titulo);

  --curva: cubic-bezier(.32, .72, 0, 1);
  --margen: clamp(1.25rem, 5vw, 4.5rem);
  --ancho: 82rem;
  --aire: clamp(4.5rem, 9vw, 8.5rem);
  --radio: 1.75rem;
  --bisel: .375rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.7 var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Lo que ocupa el botón flotante de abajo, para que no tape el pie. */
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
main:focus { outline: none; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 600;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
h3 {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
em { font-style: normal; color: var(--rojo); }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prosa a { color: var(--rojo-hondo); font-weight: 500; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.marco--rojo :focus-visible { outline-color: var(--blanco); }
::selection { background: var(--rojo); color: var(--blanco); }

.caja {
  width: min(100%, var(--ancho));
  margin-inline: auto;
  padding-inline: max(var(--margen), env(safe-area-inset-left)) max(var(--margen), env(safe-area-inset-right));
}
.seccion { padding-block: var(--aire); }

.saltar {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 20;
  padding: .75rem 1.25rem;
  border-radius: 99px;
  background: var(--tinta);
  color: var(--blanco);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* El marco doble: una bandeja apenas tintada y, adentro, el contenido con el radio concéntrico. */
.marco {
  padding: var(--bisel);
  border-radius: var(--radio);
  background: rgb(42 26 22 / .035);
  box-shadow: inset 0 0 0 1px rgb(42 26 22 / .05);
}
.marco > * { border-radius: calc(var(--radio) - var(--bisel)); }
.marco > img { width: 100%; object-fit: cover; background: var(--rubor); }

/* Botones: píldora roja, con el ícono en su propio disco. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.25rem;
  padding: .375rem 1.5rem .375rem .4375rem;
  border-radius: 99px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgb(176 28 21 / .75);
  transition: background-color .5s var(--curva), color .5s var(--curva), transform .5s var(--curva);
}
.boton:active { transform: scale(.98); }
.boton__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / .16);
  transition: transform .5s var(--curva);
}
.boton svg { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.boton--borde {
  background: transparent;
  color: var(--rojo-hondo);
  box-shadow: inset 0 0 0 1px rgb(176 28 21 / .4);
}
.boton--borde .boton__icono { background: rgb(221 37 28 / .09); }
.boton--chico {
  min-height: 2.75rem;
  padding: 0 1.125rem 0 .875rem;
  gap: .4375rem;
  font-size: .875rem;
  box-shadow: none;
}
.boton--chico svg { width: 1.125rem; height: 1.125rem; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; }
/* El botón de reservar lo lleva la barra flotante hasta que hay lugar para el de cada bloque. */
.solo-grande { display: none; }

@media (hover: hover) {
  .boton:hover { background: var(--rojo-hondo); }
  .boton:hover .boton__icono { transform: translateX(.125rem) scale(1.05); }
  .boton--borde:hover { background: rgb(221 37 28 / .07); color: var(--rojo-hondo); }
  .ig:hover { background: var(--rojo); color: var(--blanco); }
  .idiomas a:hover { color: var(--rojo-hondo); }
}

/* Cabecera: el logo a tamaño de marca y, a la derecha, una isla con idiomas e Instagram. */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .75rem;
}
.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { width: 5rem; }
.isla {
  display: flex;
  align-items: center;
  gap: .125rem;
  padding: .25rem;
  border-radius: 99px;
  background: var(--blanco);
  box-shadow: inset 0 0 0 1px rgb(42 26 22 / .06), 0 10px 30px -18px rgb(42 26 22 / .3);
}
.idiomas { display: flex; }
.idiomas a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta-suave);
  transition: color .4s var(--curva), background-color .4s var(--curva);
}
.idiomas a[aria-current] { background: rgb(221 37 28 / .09); color: var(--rojo-hondo); font-weight: 600; }
.ig {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--rojo);
  transition: background-color .4s var(--curva), color .4s var(--curva);
}
.ig svg { display: block; width: 1.3125rem; height: 1.3125rem; }

/* Portada. */
.portada {
  display: grid;
  gap: 1.75rem;
  padding-block: .75rem 1.25rem;
}
.portada h1 {
  font-size: min(9.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.025em;
}
.clave {
  display: table;
  margin-bottom: 1rem;
  padding: .3125rem .8125rem;
  border-radius: 99px;
  background: rgb(221 37 28 / .08);
  color: var(--rojo-hondo);
  font: 600 .6875rem/1.3 var(--texto);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lema { display: block; }
.lema::first-letter { text-transform: uppercase; }
.portada__intro { margin-top: 1rem; max-width: 34rem; color: var(--tinta-suave); }
.portada__intro strong { font-weight: 600; color: var(--tinta); }
.portada__texto .botones { margin-top: 2rem; }
.portada__foto img { aspect-ratio: 4 / 3; object-position: 32% 50%; }

/* Los cuatro datos: en el teléfono, filas como en un boleto. */
.datos { padding: .375rem 1.125rem; background: var(--blanco); }
.datos > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--hilo);
}
.datos > div:last-child { border-bottom: 0; }
.datos dt { font-size: .8125rem; color: var(--tinta-suave); }
.datos dd {
  font: 600 1.125rem/1.2 var(--titulo);
  letter-spacing: -.01em;
  text-align: right;
}
.datos small {
  display: block;
  margin-top: .25rem;
  font: 400 .75rem/1.4 var(--texto);
  letter-spacing: 0;
  color: var(--tinta-suave);
}

/* El recorrido: un hilo fino que une las paradas. */
.recorrido__cabeza p { margin-top: 1rem; max-width: 26rem; color: var(--tinta-suave); }
.recorrido__cabeza .boton { margin-top: 1.75rem; }
.paradas { --num: 2.5rem; margin-top: 2.5rem; }
.parada {
  position: relative;
  display: grid;
  grid-template-columns: var(--num) minmax(0, 1fr);
  column-gap: 1rem;
  padding-bottom: 2.5rem;
}
.parada::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--num) / 2 - .5px);
  width: 1px;
  background: rgb(221 37 28 / .35);
  transform-origin: center top;
}
.parada:last-child { padding-bottom: 0; }
.parada:last-child::before { display: none; }
.parada__num {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--num);
  height: var(--num);
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px rgb(221 37 28 / .45);
  color: var(--rojo-hondo);
  font: 500 .9375rem/1 var(--titulo);
}
.parada__cuerpo { padding-top: .25rem; min-width: 0; }
.parada p { margin-top: .5rem; max-width: 34rem; color: var(--tinta-suave); }
.foto { margin-top: 1.25rem; max-width: 38rem; --radio: 1.5rem; }
.foto img { aspect-ratio: 4 / 3; object-position: 54% 50%; }
.parada--mas .parada__num { background: var(--rojo); box-shadow: none; color: var(--blanco); font: 500 1.25rem/1 var(--texto); }
.parada--mas h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }

/* Qué llevar. */
.llevar {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radio);
  background: var(--rubor);
}
.llevar ul { display: grid; gap: .875rem; margin-top: 1.5rem; }
.llevar li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .75rem;
  line-height: 1.4;
}
.llevar li::before {
  content: "";
  width: 1.25rem;
  height: 1.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23DD251C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
}

/* El precio y la reserva, en un solo bloque: el único con fondo rojo, y por eso sin logo. */
.marco--rojo { background: rgb(221 37 28 / .08); box-shadow: inset 0 0 0 1px rgb(221 37 28 / .1); --radio: 2rem; }
.reserva {
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  background: var(--rojo);
  color: var(--blanco);
}
.reserva h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); font-weight: 500; }
.reserva__monto {
  margin-top: .5rem;
  font: 600 clamp(2.25rem, 11.5vw, 4rem)/1.1 var(--titulo);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.reserva__unidad { margin-top: .5rem; font-weight: 500; }
.reserva__pasos p { margin-top: .875rem; max-width: 34rem; }
.reserva .botones { margin-top: 1.75rem; }
.reserva .boton { background: var(--blanco); color: var(--rojo); box-shadow: none; }
.reserva .boton__icono { background: rgb(221 37 28 / .09); }
.reserva .boton--borde { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
.reserva .boton--borde .boton__icono { background: rgb(255 255 255 / .16); }
.reserva .reserva__numero { margin-top: 1rem; font-size: .9375rem; }
@media (hover: hover) {
  .reserva .boton:hover { background: var(--rubor); color: var(--rojo-hondo); }
  .reserva .boton--borde:hover { background: rgb(255 255 255 / .12); color: var(--blanco); }
}

/* Dos columnas en lo grande: título a la izquierda y contenido a la derecha. */
.doble { display: grid; gap: 2rem; }

/* Preguntas: sin JS. */
.pregunta { border-top: 1px solid var(--hilo); }
.pregunta:last-child { border-bottom: 1px solid var(--hilo); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  line-height: 1.35;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "";
  flex: none;
  width: .875rem;
  height: .875rem;
  background:
    linear-gradient(var(--rojo) 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(var(--rojo) 0 0) center / 1.5px 100% no-repeat;
  transition: transform .5s var(--curva);
}
.pregunta[open] summary::after { transform: rotate(135deg); }
.pregunta__respuesta { padding-bottom: 1.25rem; max-width: 42rem; color: var(--tinta-suave); }
@media (hover: hover) { .pregunta summary:hover { color: var(--rojo-hondo); } }

/* Hacia LTO. */
.mas__chicos { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .75rem; }
.mas__chicos a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--rojo-hondo);
  font-size: .9375rem;
  font-weight: 500;
}
.mas__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--hilo);
  text-decoration: none;
}
.mas__fila:last-child { border-bottom: 1px solid var(--hilo); }
.mas__texto p { margin-top: .375rem; color: var(--tinta-suave); font-size: .9375rem; line-height: 1.55; }
.flecha {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(221 37 28 / .08);
  color: var(--rojo-hondo);
  transition: transform .5s var(--curva);
}
@media (hover: hover) { .mas__fila:hover .flecha { transform: translateX(.25rem) scale(1.05); } }

/* Pie. */
.pie {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
  /* El hilo de arriba mide lo mismo que el contenido, sin los márgenes. */
  background: linear-gradient(var(--hilo) 0 0) center top / calc(100% - 2 * var(--margen)) 1px no-repeat;
  font-size: .9375rem;
}
.pie__logo { width: 5rem; }
.pie__lista { display: flex; flex-direction: column; }
.pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.pie__lista .pie__operado { color: var(--tinta); font-weight: 500; }
.pie__copia { color: var(--tinta-suave); font-size: .8125rem; }

/* Botón flotante del teléfono. */
.barra {
  position: fixed;
  inset: auto max(.75rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  z-index: 10;
}
/* El aro blanco lo separa cuando pasa por encima del bloque rojo. */
.barra .boton { width: 100%; box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 16px 32px -12px rgb(176 28 21 / .6); }

/* 404 */
.perdido { padding-block: clamp(2.5rem, 8vw, 5rem); }
.perdido img { width: 7rem; }
.perdido__idiomas { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.perdido h1, .perdido h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); line-height: 1.2; letter-spacing: -.02em; }
.perdido p { margin-top: .5rem; }
.perdido a { color: var(--rojo-hondo); font-weight: 500; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* En el teléfono, los dos botones del bloque rojo a todo el ancho; en pantallas muy angostas el
   texto puede pasar a dos líneas antes que salirse del bloque. */
@media (max-width: 47.99rem) {
  .reserva { padding: 1.5rem 1.25rem; }
  .reserva .boton { width: 100%; padding-right: 1rem; white-space: normal; }
}

@media (min-width: 48rem) {
  .cabecera__logo img { width: 6rem; }
  .datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; padding: 1.25rem 2rem; }
  .datos > div { display: block; padding-block: .875rem; border-bottom: 0; }
  .datos dd { margin-top: .25rem; font-size: 1.5rem; letter-spacing: -.02em; text-align: left; }
  .llevar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
  .llevar ul { margin-top: .5rem; }
  .reserva { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .reserva__monto { font-size: clamp(2.25rem, 4.4vw, 4rem); }
  .pie { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .pie__lista { flex-direction: row; flex-wrap: wrap; gap: 0 1.75rem; }
  .pie__copia { grid-column: 2; }
  .perdido__idiomas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desde acá ya no hace falta el botón flotante: entra el de cada bloque. */
@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .barra { display: none; }
  .solo-grande { display: inline-flex; }
  .botones.solo-grande { display: flex; }
  .portada {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: 1rem 2.5rem;
  }
  .portada h1 { font-size: clamp(2.75rem, 1rem + 2.9vw, 3.5rem); }
  .portada__intro { margin-top: 1.5rem; }
  .portada__foto img { aspect-ratio: 5 / 4; }
  .datos { grid-template-columns: 1fr .9fr 1.2fr .9fr; }
  .datos > div + div { padding-left: 2rem; border-left: 1px solid var(--hilo); }
  .recorrido {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 6rem);
  }
  .recorrido__cabeza { position: sticky; top: 2.5rem; align-self: start; }
  .paradas { --num: 3rem; margin-top: 0; }
  .parada { column-gap: 1.5rem; padding-bottom: 3.5rem; }
  .parada__cuerpo { padding-top: .375rem; }
  .doble { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
}

/* Movimiento: sólo si el visitante no pidió menos y sólo con transform y opacity.
   La clase .anima la pone el JS, así que sin JS todo está visible desde el principio. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes asoma {
    from { opacity: 0; transform: translateY(.75rem); }
    to { opacity: 1; transform: none; }
  }
  /* Sólo la foto: el texto de la portada, con el precio, se ve desde el primer momento. */
  .portada__foto { animation: asoma .9s var(--curva) both; }
  .pregunta[open] .pregunta__respuesta { animation: asoma .6s var(--curva) both; }

  .anima .aparece {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .9s var(--curva), transform .9s var(--curva);
  }
  .anima .aparece.visto { opacity: 1; transform: none; }

  /* El hilo de la ruta se dibuja parada por parada. */
  .anima .parada::before { transform: scaleY(0); transition: transform 1.1s var(--curva); }
  .anima .parada.visto::before { transform: none; }
  .anima .parada__num, .anima .parada__cuerpo {
    opacity: 0;
    transform: translateY(.75rem);
    transition: opacity .8s var(--curva), transform .8s var(--curva);
  }
  .anima .parada__cuerpo { transition-delay: .06s; }
  .anima .parada.visto .parada__num, .anima .parada.visto .parada__cuerpo { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}