/* ============================================================================
   HOTEL AVENIDA — sitio público
   v1 · 2026-09-07

   NO PORTABLE. Todo lo de acá existe solo para el sitio público y no se lleva
   al Sistema Interno. Si algo de este archivo empieza a hacer falta adentro,
   la señal es que hay que subirlo a componentes.css, no copiarlo.
   ========================================================================= */

/* --- aviso de prototipo ---------------------------------------------------
   Se borra el día que el sitio tenga datos reales.                          */
.aviso {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tinta);
  color: var(--blanco);
  font-size: var(--t-xs);
  padding: var(--s2) var(--s4);
  text-align: center;
}
.aviso b { font-family: var(--marca); font-weight: 700; }


/* --- encabezado ----------------------------------------------------------- */

.enc {
  background: var(--papel);
  border-bottom: var(--borde) solid var(--linea);
}
.enc__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s4);
}

/* El logotipo horizontal es el archivo que mandó el cliente, recortado al
   contenido. De las tres versiones que llegaron es la única que sirve acá:
   el isotipo cuadrado va a favicon, y la versión sobre fondo blanco no se usa
   porque no tiene transparencia. Ver assets/branding/LEEME.md. */
.marca { display: block; line-height: 0; }
.marca img { height: 42px; width: auto; }

@media (max-width: 520px) {
  .marca img { height: 34px; }
}

.nav { display: flex; gap: var(--s5); font-size: var(--t-sm); font-weight: 600; }
.nav a { text-decoration: none; padding-block: 2px; border-bottom: var(--filete) solid transparent; }
.nav a:hover { border-bottom-color: var(--rojo); }

/* Botón de menú: solo aparece en pantallas chicas. */
.menu-btn {
  display: none;
  background: transparent;
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-control);
  padding: 9px var(--s3);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
}

.nav-movil {
  display: none;
  border-top: var(--borde) solid var(--linea);
  padding-block: var(--s3) var(--s4);
}
.nav-movil.abierto { display: block; }
.nav-movil a {
  display: block;
  padding: var(--s3) 0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--borde) solid var(--linea);
}
.nav-movil a:last-child { border-bottom: none; }

@media (max-width: 820px) {
  .nav { display: none; }
  .menu-btn { display: block; }
}


/* --- llegada -------------------------------------------------------------- */

.llegada { padding-block: var(--s7) var(--s8); }

.llegada__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s5);
  align-items: stretch;
}
@media (max-width: 900px) { .llegada__grid { grid-template-columns: 1fr; } }

.cartel-ruta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 600;
  margin-bottom: var(--s5);
}
.escudo {
  font-family: var(--marca);
  font-size: var(--t-sm);
  line-height: 1;
  padding: 5px 8px 4px;
  border: var(--filete) solid rgba(255, 255, 255, .75);
  border-radius: var(--r-placa);
}

.llegada h1 { font-size: var(--t-2xl); }
.llegada__bajada {
  margin-top: var(--s4);
  font-size: clamp(17px, 2vw, 20px);
  max-width: 38ch;
  color: rgba(255, 255, 255, .9);
}
.llegada__acc { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* prueba social: el activo más grande del hotel */
.prueba > .placa__int { display: flex; flex-direction: column; gap: var(--s4); height: 100%; }
.prueba__num { font-family: var(--marca); font-size: clamp(52px, 8vw, 84px); line-height: .9; color: var(--azul); }
.prueba__pie { font-size: var(--t-sm); color: var(--gris); }
.estrellas { color: var(--rojo); letter-spacing: 2px; font-size: 18px; }
.cita {
  border-left: 3px solid var(--azul-tenue);
  padding-left: var(--s4);
  font-size: var(--t-sm);
  color: var(--gris);
}


/* --- franja de datos ------------------------------------------------------ */

.franja { background: var(--tinta); color: var(--blanco); }
.franja__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  padding-block: var(--s6);
}
@media (max-width: 760px) { .franja__grid { grid-template-columns: 1fr; gap: var(--s4); } }

.dato { display: flex; gap: var(--s4); align-items: flex-start; }
.dato__marca {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: var(--filete) solid var(--rojo);
  border-radius: var(--r-placa);
  font-family: var(--marca);
  font-size: var(--t-sm);
}
.dato h3 { font-size: var(--t-md); margin-bottom: 2px; }
.dato p  { font-size: var(--t-sm); color: rgba(255, 255, 255, .72); margin: 0; }


/* --- título de sección ---------------------------------------------------- */

.titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.titulo h2 { font-size: var(--t-xl); color: var(--azul-hondo); }
.titulo span { font-size: var(--t-sm); color: var(--gris); }


/* --- habitaciones --------------------------------------------------------- */

.habs { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--s4); }

.hab__cap { display: flex; align-items: baseline; gap: var(--s2); }
.hab__cap b { font-family: var(--marca); font-size: 40px; line-height: .9; color: var(--azul); }
.hab__cap span { font-size: var(--t-xs); color: var(--gris); }

.hab h3 { font-size: 19px; }

.hab__lista { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--gris); }
.hab__lista li { padding-block: 3px; border-top: var(--borde) solid var(--linea); }

.hab__pie {
  margin-top: auto;
  padding-top: var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
}
.precio { font-family: var(--marca); font-size: var(--t-lg); color: var(--tinta); }
.precio small { font-family: var(--texto); font-weight: 400; font-size: var(--t-xs); color: var(--gris); }


/* --- públicos ------------------------------------------------------------- */

.publicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 860px) { .publicos { grid-template-columns: 1fr; } }

.publico h3 { font-size: 21px; color: var(--azul-hondo); }
.publico p  { font-size: var(--t-sm); color: var(--gris); }
.publico a  { font-size: var(--t-sm); font-weight: 700; color: var(--azul); text-underline-offset: 3px; }


/* --- alrededor ------------------------------------------------------------ */

.alrededor { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); }

.lugar { border-top: 3px solid var(--azul); padding-top: var(--s3); }
.lugar h3 { font-size: var(--t-md); margin-bottom: var(--s1); }
.lugar p  { font-size: var(--t-sm); color: var(--gris); margin: 0; }
.lugar em { font-style: normal; font-weight: 700; color: var(--tinta); }


/* --- reservar ------------------------------------------------------------- */

.reservar__grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .reservar__grid { grid-template-columns: 1fr; } }

.reservar__txt { background: var(--azul); color: var(--blanco); padding: var(--s7) var(--s6); }
.reservar__txt h2 { font-size: var(--t-xl); margin-bottom: var(--s4); }
.reservar__txt p  { color: rgba(255, 255, 255, .88); max-width: 34ch; }
.reservar__tel { font-family: var(--marca); font-size: 22px; }

.reservar__form {
  background: var(--blanco);
  border: var(--borde) solid var(--linea);
  border-left: none;
  padding: var(--s6);
}
@media (max-width: 860px) { .reservar__form { border-left: var(--borde) solid var(--linea); } }

/* Resumen que aparece al elegir fechas. Es respuesta a una acción, no adorno. */
.resumen {
  display: none;
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--azul-tenue);
  border-left: 3px solid var(--azul);
  border-radius: var(--r-control);
  font-size: var(--t-sm);
}
.resumen.visible { display: block; }
.resumen b { font-family: var(--marca); font-weight: 700; }


/* --- pie ------------------------------------------------------------------ */

.pie { background: var(--tinta); color: var(--blanco); padding-block: var(--s6); }
.pie__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); }
@media (max-width: 760px) { .pie__grid { grid-template-columns: 1fr; } }

/* El isotipo va sobre una placa blanca porque el azul de marca (#1644C3) no
   tiene contraste suficiente contra la tinta del pie. Es un parche: lo que
   corresponde es pedirle al hotel una versión monocromática para fondo
   oscuro. Anotado en assets/branding/LEEME.md. */
.pie__iso {
  height: 54px;
  width: auto;
  background: var(--blanco);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-placa);
  margin-bottom: var(--s4);
}

.pie h4 {
  font-family: var(--texto);
  font-weight: 700;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .55);
  margin-bottom: var(--s3);
}
.pie p, .pie li { font-size: var(--t-sm); color: rgba(255, 255, 255, .85); }
.pie li { padding-block: 3px; }
.pie a { text-underline-offset: 3px; }

.pie__legal {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: var(--borde) solid rgba(255, 255, 255, .15);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
}