/* =========================================================================
   Hoteles y paquetes. Hereda tokens y tipografía oficiales de summit.css.
   Naranja sólo como acento (filete, precio destacado), nunca como fondo
   grande: es lo que pide el manual de marca.
   ========================================================================= */
.ht-sec { padding-block: clamp(2.5rem, 7vh, 5rem); border-top: var(--border-w) solid var(--line); }
.ht-h2 { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: .02em; line-height: 1.08;
  display: flex; align-items: baseline; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.ht-sub { color: var(--fg-muted); max-width: 68ch; margin-block-end: var(--sp-6); }
.ht-nota { color: var(--fg-muted); font-size: var(--fs-caption); max-width: 72ch;
  margin-block-start: var(--sp-5); }

/* ---------- Paquetes ---------- */
.ht-paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); }
.ht-paq { display: flex; flex-direction: column; gap: var(--sp-2);
  border: var(--border-w) solid var(--mist); padding: var(--sp-5); background: var(--white); }
.ht-paq--pass { background: var(--paper); }
.ht-paq h3 { font-family: var(--ff-display); text-transform: uppercase; font-weight: 700;
  font-size: var(--fs-body); letter-spacing: .04em; }
.ht-precio { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.ht-precio span { display: block; font-family: var(--ff-text); font-weight: 400;
  font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: .04em; text-transform: uppercase; }
.ht-imp { font-size: var(--fs-caption); color: var(--fg-muted); }
/* El aviso del costo total va marcado: es la confusión más cara del tarifario. */
.ht-ojo { font-size: var(--fs-caption); line-height: 1.5; padding: var(--sp-3);
  border-inline-start: 3px solid var(--orange); background: var(--paper); }
.ht-inc { margin-block-start: auto; padding-block-start: var(--sp-4);
  border-top: var(--border-w) solid var(--line); display: grid; gap: 4px; }
.ht-inc li { font-size: var(--fs-caption); color: var(--fg-muted); padding-inline-start: 1rem; position: relative; }
.ht-inc li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  width: 5px; height: 5px; background: var(--orange); }
/* Lo que NO incluye se lee igual de claro que lo que sí: enterarse del desayuno
   en el mostrador del hotel es el reclamo caro. Marca en raya, no en cuadro,
   para que no compita con la lista de arriba. */
.ht-no { padding-block-start: var(--sp-3); display: grid; gap: 4px; }
.ht-no__t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
/* Mismo criterio que .reg-card__aviso del formulario: aclaración del paquete,
   no una exclusión más. */
.ht-aviso { margin-block-start: var(--sp-4); padding-inline-start: var(--sp-3);
  border-inline-start: 3px solid var(--orange); font-size: var(--fs-caption);
  line-height: 1.45; color: var(--fg-muted); }
.ht-no ul { display: grid; gap: 4px; }
.ht-no li { font-size: var(--fs-caption); color: var(--fg-muted); padding-inline-start: 1rem; position: relative; }
.ht-no li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .8em;
  width: 8px; height: 1px; background: var(--steel-2); }

/* ---------- Visita a planta ---------- */
.ht-planta { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ht-planta { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.ht-planta__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-planta__txt { background: var(--ink); color: var(--white); padding: clamp(2rem, 5vw, 4rem); }
.ht-planta__txt .ht-h2 { color: var(--white); }
.ht-planta__txt p { color: var(--steel-2); max-width: 48ch; }
.ht-planta__txt .overline { color: var(--orange); }
.ht-planta__txt .ht-nota { color: var(--steel-2); }

/* ---------- Hoteles ---------- */
.ht-hoteles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); }
.ht-hotel { display: flex; flex-direction: column; gap: var(--sp-3);
  border: var(--border-w) solid var(--mist); padding: var(--sp-6); background: var(--white); }
.ht-hotel header { border-bottom: 3px solid var(--orange); padding-block-end: var(--sp-3); }
.ht-hotel h3 { font-family: var(--ff-display); text-transform: uppercase; font-weight: 700;
  font-size: var(--fs-h4); letter-spacing: .03em; line-height: 1.15; }
/* .ht-destacado se fue con la línea naranja bajo el nombre del hotel: el hotel
   se asigna por disponibilidad y ese renglón vendía uno sobre los otros. */
.ht-resumen { font-size: var(--fs-body-sm); }
.ht-hotel h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-muted); margin-block-start: var(--sp-3); }
.ht-hotel ul { display: grid; gap: 6px; }
.ht-hotel li { font-size: var(--fs-body-sm); color: var(--fg-muted); line-height: 1.45;
  padding-inline-start: 1rem; position: relative; }
.ht-hotel li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em;
  width: 5px; height: 5px; background: var(--steel-2); }
.ht-hotel .btn { margin-block-start: auto; align-self: flex-start; }

/* ---------- Cierre ---------- */
.ht-cta { padding-block: clamp(3rem, 8vh, 6rem); background: var(--paper);
  border-top: var(--border-w) solid var(--line); }

/* Aviso de comisiones. Mismo tratamiento que .reg-aviso-pago del formulario:
   no es letra chica, cambia el monto que se cobra. */
.ht-aviso-pago {
  margin-block-start: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border-inline-start: 4px solid var(--orange);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink);
  max-width: 74ch;
}
.ht-aviso-pago__t {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--orange-deep);
}