/* HotelesGT — app.css
   Sistema visual del brief v2. Los colores viven en tokens.css; aquí no hay
   ningún hex suelto salvo en rgba() de sombras, que el brief define literales.
   Concepto: guía editorial de altiplano. Baja densidad, mucho aire, la
   fotografía manda. */

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--fog);
  color:var(--ink);
  font-family:var(--fuente-texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){body{font-size:18px}}

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

/* ------------------------------------------------- tipografía (§4.1) */
h1,h2{font-family:var(--fuente-display);font-weight:600;color:var(--jade-700)}
h3,h4,h5,h6{font-family:var(--fuente-texto);font-weight:700;color:var(--jade-700)}

h1{font-size:30px;line-height:1.15;margin:0 0 8px}
h2{font-size:24px;line-height:1.2;margin:48px 0 16px}
h3{font-size:19px;line-height:1.3;margin:32px 0 12px}
h4{font-size:17px;line-height:1.35;margin:24px 0 8px}
@media (min-width:768px){
  h1{font-size:44px}
  h2{font-size:32px}
  h3{font-size:22px}
  h4{font-size:18px}
}

/* Enlaces: jade en todo el sitio.
   Hello Elementor trae un #CC3366 por defecto que no está en la paleta y que
   se colaba en los títulos de tarjeta. Se neutraliza aquí, en la base, y no
   caso por caso. */
a{color:var(--jade-700)}
a:hover{color:var(--jade-800)}

/* Enlaces en TEXTO CORRIDO: además, siempre subrayados (§3.2) */
.hgt-prosa a,.hgt-datos a,.hgt-faq a{
  color:var(--jade-700);text-decoration:underline;text-underline-offset:2px;
}
.hgt-prosa a:hover{color:var(--jade-800)}
/* Los enlaces que son botón o tarjeta no llevan subrayado */
.hgt-btn,.hgt-tarjeta__enlace,.hgt-estados a{text-decoration:none}
.hgt-tarjeta__nombre a{color:var(--jade-700)}
.hgt-btn--primario,.hgt-btn--primario:hover{color:var(--surface)}

.hgt-meta{font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-3)}
.hgt-caption{font-size:13px;line-height:1.4;color:var(--ink-3)}

/* ------------------------------------------------- retícula (§5) */
.hgt-contenedor{width:100%;max-width:var(--ancho-general);margin-inline:auto;padding-inline:16px}
.hgt-texto{max-width:var(--ancho-texto)}   /* 68 caracteres de medida */
@media (min-width:768px){.hgt-contenedor{padding-inline:24px}}

.hgt-seccion{margin-block:64px}
@media (min-width:1024px){.hgt-seccion{margin-block:96px}}

/* --------------------------------------------- cinta de altiplano (§2) */
/* Solo en tres sitios: borde del header, separador de bloques y relleno
   sin foto. Nunca en botones, iconos ni fondos decorativos. */
.hgt-cinta{display:block;width:100%;height:20px;border:0}
.hgt-cinta--header{height:20px}
.hgt-cinta--separador{margin-block:48px;height:20px;opacity:.9}

/* ------------------------------------------------- botones (§3.2) */
.hgt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 20px;                  /* área táctil 44px */
  font-family:var(--fuente-texto);font-size:16px;font-weight:700;line-height:1;
  border-radius:var(--r-boton);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .2s,opacity .2s;                /* solo transform/opacity */
}
/* CTA primario: UN SOLO carmín por pantalla visible (§3.4) */
.hgt-btn--primario{background:var(--carmin-600);color:var(--surface)}
.hgt-btn--primario:hover{background:var(--carmin-700);color:var(--surface)}
/* Secundario: contorno jade */
.hgt-btn--secundario{background:transparent;color:var(--jade-700);border-color:var(--jade-700)}
.hgt-btn--secundario:hover{background:var(--jade-50)}
/* Terciario: texto sin caja */
.hgt-btn--terciario{background:none;border:0;color:var(--jade-700);
  text-decoration:underline;padding-inline:0}

/* ------------------------------------------------- tarjeta (§6.1) */
.hgt-tarjeta{
  position:relative;background:var(--surface);
  border:var(--borde);border-radius:var(--r-tarjeta);
  box-shadow:var(--sombra-reposo);overflow:hidden;
  display:flex;flex-direction:column;
}
.hgt-tarjeta:hover{box-shadow:var(--sombra-hover)}

/* aspect-ratio FIJADO EN CSS o el listado se desplaza y el CLS se dispara */
.hgt-tarjeta__foto{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;background:var(--jade-50)}
.hgt-tarjeta__cuerpo{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}

/* toda la tarjeta es clicable; el CTA es acción anidada */
.hgt-tarjeta__enlace::after{content:"";position:absolute;inset:0}
.hgt-tarjeta__cta{position:relative;z-index:1}

.hgt-tarjeta__nombre{
  font-family:var(--fuente-texto);font-size:19px;font-weight:700;
  color:var(--jade-700);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hgt-tarjeta__pie{
  margin-top:auto;padding-top:12px;border-top:var(--borde);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

.hgt-amenidades{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.hgt-amenidades li{font-size:14px;color:var(--ink-3)}

/* -------------------------------- categoría vs calificación (§8.1) */
/* Nunca en la misma línea ni con el mismo icono. */
.hgt-categoria{font-size:14px;color:var(--ink-3)}      /* estrella de contorno */
.hgt-rating{
  display:inline-flex;align-items:center;gap:6px;
  font-variant-numeric:tabular-nums;
}
.hgt-rating__estrella{color:var(--oro-600)}            /* estrella rellena */
.hgt-rating__valor{font-weight:700;color:var(--ink)}
.hgt-rating__conteo{color:var(--ink-3);font-size:14px}
/* El oro SOLO sobre blanco (§3.4): sobre niebla cae a 2.71:1 */
.hgt-fondo-niebla .hgt-rating__estrella{color:var(--ink-2)}

/* ------------------------------------------------- badges y sellos */
.hgt-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--r-badge);
  font-size:13px;font-weight:500;
}
.hgt-badge--verificado{background:var(--jade-50);color:var(--jade-700);border-radius:var(--r-sello)}
.hgt-badge--temporada{background:var(--carmin-100);color:var(--ink)}
.hgt-badge--categoria{background:rgba(255,255,255,.94);color:var(--ink-2)}

/* --------------------------------------- rango de precio (§8.2) */
.hgt-precio{font-family:var(--fuente-texto);font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------- filtros (§6.5) */
/* Píldoras con scroll lateral en móvil, NO panel lateral. */
.hgt-filtros{
  display:flex;gap:8px;overflow-x:auto;padding-block:8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.hgt-filtros::-webkit-scrollbar{display:none}
.hgt-filtro{
  flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  padding:10px 16px;border-radius:var(--r-badge);
  border:1px solid var(--line-ui);color:var(--ink-2);
  background:var(--surface);font-size:15px;font-weight:500;
  text-decoration:none;white-space:nowrap;
}
.hgt-filtro[aria-pressed="true"],.hgt-filtro.is-activo{
  background:var(--jade-700);color:var(--surface);border-color:var(--jade-700);
}
.hgt-filtros-caja{margin-block:0 24px}
.hgt-filtro .hgt-num{color:var(--ink-3);font-size:13px}
.hgt-filtro.is-activo .hgt-num{color:var(--jade-100)}

/* ------------------------------------------------- héroe (§6.4) */
.hgt-heroe{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
@media (min-width:1024px){.hgt-heroe{aspect-ratio:21/9}}
.hgt-heroe__img{width:100%;height:100%;object-fit:cover;display:block}
/* Texto sobre imagen SIEMPRE con degradado (§12) */
.hgt-heroe__velo{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,46,39,.86) 0%,rgba(7,46,39,.45) 45%,rgba(7,46,39,0) 100%);
}
.hgt-heroe__texto{position:absolute;left:0;right:0;bottom:0;padding:24px 0}
.hgt-heroe__texto h1{color:var(--surface)}
.hgt-heroe__texto .hgt-heroe__sub,
.hgt-heroe__texto .hgt-actualizado{color:var(--jade-100)}

/* Sin fotografía propia el héroe cae a jade sólido. El §7.2 prohíbe ilustrar
   con banco de imágenes; un stock genérico sin marcar sería peor que nada. */
.hgt-heroe--liso{
  aspect-ratio:auto;background:var(--jade-800);padding-block:48px;
}
.hgt-heroe--liso .hgt-heroe__texto{position:static;padding:0}

/* Bloque de alternativas: terciario, con la divulgación al lado (§9) */
.hgt-alternativas{
  display:flex;flex-direction:column;gap:4px;
  margin-block:32px;
}

/* ------------------------------- barra de acción fija móvil (§6.3) */
.hgt-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:8px;align-items:center;
  height:64px;padding:8px 12px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:var(--surface);
  box-shadow:0 -2px 12px rgba(20,32,28,.10);
}
.hgt-barra .hgt-btn{flex:1;padding-inline:12px;font-size:15px}
@media (min-width:1024px){.hgt-barra{display:none}}
/* Nunca publicidad dentro ni pegada a esta barra (§6.3) */
.hgt-barra .hgt-anuncio{display:none!important}

/* --------------------------- módulos de reserva y cotización (§6.7/6.8) */
.hgt-modulo{
  background:var(--surface);border:var(--borde);border-radius:var(--r-tarjeta);
  padding:20px;box-shadow:var(--sombra-reposo);
}
.hgt-campos{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){.hgt-campos{grid-template-columns:1fr 1fr 1fr}}
.hgt-campo label{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:4px}
.hgt-campo input,.hgt-campo select{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--line-ui);border-radius:var(--r-boton);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;
}
.hgt-campo input:focus-visible,.hgt-campo select:focus-visible{
  outline:2px solid var(--jade-700);outline-offset:2px;border-color:var(--jade-700);
}
/* La leyenda de destino es obligatoria y visible ANTES del clic (§6.7) */
.hgt-destino{margin-top:8px;font-size:13px;color:var(--ink-3)}
.hgt-modulo__nota{color:var(--ink-2);margin-top:0}

/* Consentimiento: nace desmarcado y bloquea el envío (§6.8) */
.hgt-consentimiento{display:flex;gap:10px;align-items:flex-start;margin-block:12px}
.hgt-consentimiento input{margin-top:3px;width:20px;height:20px;accent-color:var(--jade-700)}
.hgt-btn[disabled]{opacity:.5;cursor:not-allowed}
.hgt-motivo-bloqueo{font-size:13px;color:var(--ink-3);margin-top:6px}

/* --------------------------- bloque de transparencia (§8.3) */
.hgt-transparencia{
  background:var(--fog);border-left:3px solid var(--jade-700);
  padding:20px 24px;border-radius:0 var(--r-sello) var(--r-sello) 0;
  font-size:15px;color:var(--ink-2);
}
.hgt-transparencia strong{color:var(--ink)}

/* --------------------------- frescura visible (§8.4) */
.hgt-actualizado{font-size:14px;color:var(--ink-3);margin-top:4px}

/* --------------------------- publicidad (§9) */
/* Contenedor neutro, etiquetado, con ALTURA RESERVADA antes de cargar. */
.hgt-anuncio{
  display:block;margin-block:32px;background:var(--surface);
  border:var(--borde);border-radius:var(--r-sello);overflow:hidden;
}
.hgt-anuncio::before{
  content:"Publicidad";display:block;padding:6px 12px;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:var(--borde);
}
.hgt-anuncio--cuadro{min-height:250px}
.hgt-anuncio--horizontal{min-height:90px}
/* Nunca dentro de la rejilla de tarjetas (§9) */
.hgt-rejilla .hgt-anuncio{display:none!important}

/* --------------------------- rejilla de tarjetas */
.hgt-rejilla{display:grid;grid-template-columns:1fr;gap:24px;list-style:none;margin:0;padding:0}
@media (min-width:600px){.hgt-rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.hgt-rejilla{grid-template-columns:repeat(3,1fr)}}

/* --------------------------- mapa bajo demanda (§6.6) */
.hgt-mapa{position:relative;aspect-ratio:16/9;border-radius:var(--r-tarjeta);
  overflow:hidden;background:var(--jade-50);margin-top:12px}
.hgt-mapa img{width:100%;height:100%;object-fit:cover}
.hgt-mapa iframe{width:100%;height:100%;border:0;display:block}

.hgt-mapa-envoltura summary{list-style:none;cursor:pointer}
.hgt-mapa-envoltura summary::-webkit-details-marker{display:none}
.hgt-mapa-aviso{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:132px;padding:20px 20px 0;
  background:var(--jade-50);border:var(--borde);border-radius:var(--r-tarjeta);
  overflow:hidden;
}
.hgt-mapa-aviso__texto{display:flex;flex-direction:column;gap:4px}
.hgt-mapa-aviso strong{color:var(--jade-700);font-weight:700}
.hgt-mapa-aviso__cinta{width:calc(100% + 40px);margin:16px -20px 0;height:20px;display:block}
.hgt-mapa-envoltura summary:focus-visible{outline:2px solid var(--jade-700);outline-offset:2px}
.hgt-mapa-envoltura[open] summary{margin-bottom:0}

/* --------------------------- galería: tira con scroll, sin carrusel (§11) */
.hgt-galeria{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory}
.hgt-galeria img{flex:0 0 auto;scroll-snap-align:start;border-radius:var(--r-tarjeta)}

/* --------------------------- header y marca (§13) */
.contenedor{width:100%;max-width:var(--ancho-general);margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.contenedor{padding-inline:24px}}

.hgt-header{background:var(--surface);border-bottom:var(--borde)}
/* La cinta de altiplano corona el header — uno de sus tres usos (§2) */
.hgt-header::before{
  content:"";display:block;height:20px;
  background-image:url("cintas/cinta-guatemala.svg");
  background-size:100% 100%;
}
.hgt-header .contenedor{
  display:flex;align-items:center;gap:24px;
  min-height:72px;padding-block:12px;flex-wrap:wrap;
}

/* Wordmark: "Hoteles" en Newsreader jade + "GT" en Figtree carmín (§13) */
.hgt-logo{
  font-family:var(--fuente-display);font-weight:600;font-size:26px;
  color:var(--jade-700);text-decoration:none;line-height:1;white-space:nowrap;
}
.hgt-logo b{
  font-family:var(--fuente-texto);font-weight:700;
  color:var(--carmin-600);letter-spacing:-.01em;
}

.hgt-buscador{flex:1;min-width:220px;display:flex}
.hgt-buscador input[type="search"]{
  width:100%;min-height:44px;padding:10px 14px;
  border:1px solid var(--line-ui);border-radius:var(--r-boton);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;
}

#contenido{display:block;min-height:50vh}

/* --------------------------- footer */
.hgt-footer{
  background:var(--jade-900);color:var(--jade-100);
  padding-block:48px;margin-top:96px;font-size:15px;
}
/* El padre impone un gris propio a los párrafos del pie: se neutraliza. */
.hgt-footer,.hgt-footer p,.hgt-footer li,.hgt-footer span{color:var(--jade-100)}
.hgt-footer a{color:var(--jade-100);text-decoration:underline}
.hgt-footer a:hover{color:var(--surface)}

/* --------------------------- home */
.hgt-hero{background:var(--surface);border-bottom:var(--borde);padding-block:56px}
.hgt-hero__sub{font-size:18px;color:var(--ink-2);max-width:var(--ancho-texto);margin:8px 0 24px}
.hgt-hero__buscador{display:flex;gap:8px;flex-wrap:wrap;max-width:var(--ancho-texto)}
.hgt-hero__buscador input[type="search"]{
  flex:1;min-width:220px;min-height:48px;padding:12px 16px;
  border:1px solid var(--line-ui);border-radius:var(--r-boton);
  font:inherit;font-size:16px;background:var(--surface);color:var(--ink);
}
.hgt-hero__buscador button{
  min-height:48px;padding:12px 24px;border:0;cursor:pointer;
  border-radius:var(--r-boton);background:var(--carmin-600);color:var(--surface);
  font-family:var(--fuente-texto);font-weight:700;font-size:16px;
}
.hgt-hero__buscador button:hover{background:var(--carmin-700)}

/* Rejilla de departamentos */
.hgt-estados{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;list-style:none;margin:0;padding:0;
}
.hgt-estados a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:var(--surface);
  border:var(--borde);border-radius:var(--r-tarjeta);
  box-shadow:var(--sombra-reposo);
  color:var(--jade-700);text-decoration:none;font-weight:700;
}
.hgt-estados a:hover{box-shadow:var(--sombra-hover)}
.hgt-estados .n{color:var(--ink-3);font-weight:500;font-size:14px;
  font-variant-numeric:tabular-nums}

/* Bloques de confianza de la home */
.hgt-ventajas{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.hgt-ventajas{grid-template-columns:repeat(3,1fr)}}
.hgt-ventajas > div{
  background:var(--surface);border:var(--borde);border-radius:var(--r-tarjeta);
  padding:24px;box-shadow:var(--sombra-reposo);
}
.hgt-ventajas h3{margin-top:0}

.hgt-intro{color:var(--ink-2);max-width:var(--ancho-texto)}

/* --------------------------- ficha (§6.2) */
.hgt-ficha{padding-bottom:96px}          /* hueco para la barra fija móvil */
@media (min-width:1024px){.hgt-ficha{padding-bottom:0}}

.hgt-ficha__foto{
  aspect-ratio:16/9;width:100%;overflow:hidden;
  border-radius:var(--r-tarjeta);background:var(--jade-50);
}
.hgt-ficha__img{width:100%;height:100%;object-fit:cover;display:block}
.hgt-ficha__cabecera{margin-top:24px}
.hgt-ficha__linea{margin:4px 0}
.hgt-ficha__direccion{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  color:var(--ink-2);margin-top:16px;
}

/* Relleno sin fotografía (§7.4) */
.hgt-sinfoto{
  position:relative;background:var(--jade-50);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hgt-sinfoto__inicial{
  font-family:var(--fuente-display);font-weight:600;font-size:48px;
  color:var(--jade-700);line-height:1;
  transform:translateY(-14%);
}
.hgt-sinfoto__cinta{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:33%;
  object-fit:fill;
}

/* Servicios y datos duros */
.hgt-servicios{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;list-style:none;margin:0;padding:0;
}
.hgt-servicios li{
  padding:12px 16px;background:var(--surface);
  border:var(--borde);border-radius:var(--r-sello);
  color:var(--ink-2);font-size:15px;
}
.hgt-datos{
  display:grid;grid-template-columns:auto 1fr;gap:8px 24px;
  margin:0;max-width:var(--ancho-texto);
}
.hgt-datos dt{font-weight:700;color:var(--ink-2);font-size:15px}
.hgt-datos dd{margin:0;color:var(--ink)}
.hgt-datos a{color:var(--jade-700);text-decoration:underline}

/* FAQ */
.hgt-faq details{
  background:var(--surface);border:var(--borde);border-radius:var(--r-sello);
  padding:16px 20px;margin-bottom:12px;
}
.hgt-faq summary{
  cursor:pointer;font-weight:700;color:var(--jade-700);
  font-family:var(--fuente-texto);
}
.hgt-faq summary:focus-visible{outline:2px solid var(--jade-700);outline-offset:2px}
.hgt-faq p{margin:12px 0 0;color:var(--ink-2)}

/* Migas */
.hgt-breadcrumbs,.breadcrumbs{font-size:14px;color:var(--ink-3);padding-top:16px}
.hgt-breadcrumbs a,.breadcrumbs a{color:var(--jade-700);text-decoration:underline}

/* --------------------------- paginación */
.hgt-paginacion{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:40px;
}
.hgt-pag{
  min-width:44px;min-height:44px;                    /* área táctil (§12) */
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border:1px solid var(--line-ui);
  border-radius:var(--r-boton);background:var(--surface);
  color:var(--jade-700);text-decoration:none;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.hgt-pag:hover{background:var(--jade-50)}
.hgt-pag.is-activo{
  background:var(--jade-700);color:var(--surface);border-color:var(--jade-700);
}

/* --------------------------- accesibilidad */
.hgt-solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Accesibilidad (§12, WCAG 2.1 AA) ------------------------------------
   Foco visible en TODO lo enfocable, no solo en campos y desplegables. El anillo
   por defecto del navegador nunca se quitó, pero varía entre navegadores y sobre
   el header oscuro casi no se ve; este lo fija con el color de marca. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--jade-700);outline-offset:2px}
.hgt-header :where(a,button,input):focus-visible{outline-color:#fff}
/* Enlace «Saltar al contenido»: fuera de pantalla hasta que recibe foco. */
.hgt-saltar{position:absolute;left:-9999px;top:0;z-index:1000;
  padding:.75rem 1rem;background:#fff;color:var(--jade-700);font-weight:600}
.hgt-saltar:focus{left:1rem;top:1rem}
/* Avisos del formulario de cotización (enviada / incompleta). */
.hgt-aviso{margin:0 0 16px;padding:12px 16px;border-radius:8px;border:1px solid var(--jade-700)}
.hgt-aviso--ok{background:color-mix(in srgb,var(--jade-700) 8%,#fff)}

/* =====================================================================
   CAPA VISUAL v2 (2026-11) — fotografía de destinos y patrón de directorio
   de viaje: header fijo con buscador, héroe fotográfico, tarjetas con la
   nota sobre la foto, ficha a dos columnas con reserva fija a la derecha.
   Va al final a propósito: sobrescribe lo anterior sin tocarlo.
   ===================================================================== */
html{scroll-padding-top:88px}
h1,h2{letter-spacing:-.01em}

/* ----------------------------------------------------------- header fijo */
.hgt-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.97);
  border-bottom:0;box-shadow:0 1px 0 var(--line)}
.admin-bar .hgt-header{top:32px}
@media (max-width:782px){.admin-bar .hgt-header{top:0}}
.hgt-header::before{height:8px}
.hgt-header .contenedor{min-height:64px;padding-block:8px;gap:16px;flex-wrap:nowrap}
.hgt-nav{display:none;gap:2px;margin-left:8px}
@media (min-width:1024px){.hgt-nav{display:flex}}
.hgt-nav a{padding:8px 12px;border-radius:var(--r-badge);color:var(--ink-2);
  font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.hgt-nav a:hover{background:var(--jade-50);color:var(--jade-700)}
.hgt-buscador{position:relative;flex:1;min-width:0;max-width:340px;margin-left:auto;align-items:center}
.hgt-buscador svg{position:absolute;left:14px;color:var(--ink-3);pointer-events:none}
.hgt-buscador input[type="search"]{min-height:42px;padding-left:40px;border-radius:var(--r-badge);
  background:var(--fog);border-color:var(--line)}
.hgt-buscador input[type="search"]:focus{background:var(--surface);border-color:var(--jade-700)}
.hgt-header :where(a,button,input):focus-visible{outline-color:var(--jade-700)}

/* ------------------------------------------------------- portada (home) */
.hgt-portada{position:relative;display:flex;align-items:flex-end;min-height:600px;
  overflow:hidden;background:var(--jade-900);isolation:isolate}
@media (min-width:1024px){.hgt-portada{min-height:660px;align-items:center}}
.hgt-portada__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hgt-portada__velo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,46,39,.30) 0%,rgba(7,46,39,.45) 40%,rgba(7,46,39,.92) 100%)}
@media (min-width:1024px){.hgt-portada__velo{
  background:linear-gradient(90deg,rgba(7,46,39,.90) 0%,rgba(7,46,39,.60) 50%,rgba(7,46,39,.15) 100%)}}
.hgt-portada__contenido{padding-block:112px 56px}
.hgt-portada h1{color:var(--surface);max-width:780px;font-size:38px;line-height:1.08;margin:0}
@media (min-width:768px){.hgt-portada h1{font-size:58px}}
.hgt-portada__eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade-100)}
.hgt-portada__sub{max-width:600px;margin:16px 0 28px;font-size:19px;line-height:1.5;color:var(--jade-50)}
.hgt-portada__buscador{position:relative;display:flex;gap:8px;max-width:640px;padding:8px;
  background:var(--surface);border-radius:var(--r-tarjeta);box-shadow:0 16px 48px rgba(0,0,0,.28)}
.hgt-portada__lupa{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.hgt-portada__buscador input[type="search"]{flex:1;min-width:0;min-height:52px;
  padding:12px 12px 12px 46px;border:0;border-radius:var(--r-boton);background:transparent;
  color:var(--ink);font:inherit;font-size:17px}
.hgt-portada__buscador button{min-height:52px;padding:0 28px;border:0;cursor:pointer;
  border-radius:var(--r-boton);background:var(--carmin-600);color:var(--surface);
  font-family:var(--fuente-texto);font-weight:700;font-size:16px}
.hgt-portada__buscador button:hover{background:var(--carmin-700)}
.hgt-portada__atajos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;
  font-size:14px;color:var(--jade-100)}
.hgt-portada__atajos a{padding:6px 14px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-badge);
  background:rgba(255,255,255,.08);color:var(--surface);text-decoration:none;font-weight:600}
.hgt-portada__atajos a:hover{background:rgba(255,255,255,.22);color:var(--surface)}

/* Pie de foto: qué lugar se ve (honestidad con la foto heredada) */
.hgt-heroe__pie{position:absolute;right:12px;bottom:8px;margin:0;z-index:1;
  font-size:11px;line-height:1.3;color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* Sobre fondo oscuro el anillo de foco va en blanco */
:where(.hgt-portada,.hgt-heroe--foto,.hgt-heroe--liso,.hgt-destino-card,.hgt-footer)
  :where(a,button,input,summary):focus-visible{outline-color:var(--surface)}
.hgt-portada__buscador :where(input,button):focus-visible{outline-color:var(--jade-700)}

/* --------------------------------------------------- franja de confianza */
.hgt-confianza{background:var(--surface);border-bottom:var(--borde)}
.hgt-confianza ul{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;
  list-style:none;margin:0 auto;padding-block:22px;font-size:14px;line-height:1.35;color:var(--ink-3)}
@media (min-width:768px){.hgt-confianza ul{grid-template-columns:repeat(4,1fr)}}
.hgt-confianza strong{display:block;font-family:var(--fuente-display);font-size:22px;
  font-weight:600;color:var(--jade-700);line-height:1.2}

/* --------------------------------------------------- cabecera de sección */
.hgt-seccion__cabeza{margin-bottom:24px}
.hgt-seccion__cabeza h2{margin:0 0 6px}
.hgt-seccion__cabeza .hgt-intro{margin:0}

/* ---------------------------------------------------- tarjetas de destino */
.hgt-destinos{display:grid;grid-template-columns:1fr;gap:16px;list-style:none;margin:0;padding:0}
@media (min-width:600px){.hgt-destinos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .hgt-destinos{grid-template-columns:repeat(3,1fr);grid-auto-rows:250px}
  .hgt-destino-card--grande{grid-row:span 2;grid-column:span 2}
}
.hgt-destino-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:250px;border-radius:var(--r-tarjeta);overflow:hidden;background:var(--jade-800);
  isolation:isolate;box-shadow:var(--sombra-reposo)}
.hgt-destino-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .5s}
.hgt-destino-card:hover .hgt-destino-card__img{transform:scale(1.05)}
.hgt-destino-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,46,39,.92) 0%,rgba(7,46,39,.35) 55%,rgba(7,46,39,0) 100%)}
.hgt-destino-card__texto{padding:20px 22px}
.hgt-destino-card h3{margin:0;font-family:var(--fuente-display);font-size:26px;font-weight:600;color:var(--surface)}
.hgt-destino-card--grande h3{font-size:34px}
.hgt-destino-card__enlace,.hgt-destino-card__enlace:hover{color:var(--surface);text-decoration:none}
.hgt-destino-card__enlace::after{content:"";position:absolute;inset:0}
.hgt-destino-card p{margin:4px 0 10px;font-size:15px;line-height:1.4;color:var(--jade-50)}
.hgt-destino-card__n{display:inline-block;padding:4px 12px;border-radius:var(--r-badge);
  background:rgba(255,255,255,.18);font-size:13px;font-weight:600;color:var(--surface)}

/* ------------------------- listas de municipios/departamentos/zonas */
/* La clase se usaba en las plantillas pero no tenía estilo: salían como
   lista con viñetas. */
.hgt-departamentos{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.hgt-departamentos a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:6px 8px 6px 16px;background:var(--surface);border:var(--borde);border-radius:var(--r-badge);
  color:var(--jade-700);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none}
.hgt-departamentos a:hover{border-color:var(--jade-500);box-shadow:var(--sombra-hover);color:var(--jade-800)}
.hgt-departamentos .n{min-width:30px;padding:3px 8px;border-radius:var(--r-badge);
  background:var(--jade-50);color:var(--jade-700);font-size:13px;font-weight:700;
  text-align:center;font-variant-numeric:tabular-nums}
.hgt-departamentos--rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.hgt-departamentos--rejilla a{display:flex;justify-content:space-between;width:100%;
  border-radius:12px;padding:12px 12px 12px 18px;font-size:16px}

/* ------------------------------------------------ banda (zonas capital) */
.hgt-banda{display:grid;background:var(--surface);border:var(--borde);border-radius:20px;
  overflow:hidden;box-shadow:var(--sombra-reposo)}
@media (min-width:1024px){.hgt-banda{grid-template-columns:400px 1fr}}
.hgt-banda__foto{position:relative;min-height:220px}
.hgt-banda__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hgt-banda__texto{padding:28px 24px}
@media (min-width:1024px){.hgt-banda__texto{padding:40px}}
.hgt-banda h2{margin-top:0}

/* ------------------------------------------------------------- tarjeta */
.hgt-tarjeta{border-radius:var(--r-tarjeta);transition:transform .2s}
.hgt-tarjeta:hover{transform:translateY(-3px)}
.hgt-tarjeta__media{position:relative;overflow:hidden}
.hgt-tarjeta__media .hgt-tarjeta__foto{transition:transform .4s}
.hgt-tarjeta:hover .hgt-tarjeta__media .hgt-tarjeta__foto{transform:scale(1.04)}
.hgt-tarjeta__nota{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--r-badge);background:var(--surface);
  box-shadow:0 2px 8px rgba(20,32,28,.18);font-size:14px;font-variant-numeric:tabular-nums}
.hgt-tarjeta__nota .hgt-rating__conteo{font-size:13px}
.hgt-tarjeta__sello{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:var(--r-badge);
  background:var(--jade-700);color:var(--surface);font-size:12px;font-weight:700;letter-spacing:.02em}
.hgt-tarjeta__cuerpo{padding:16px 18px 18px;gap:8px}
.hgt-tarjeta__tipo{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jade-600)}
.hgt-tarjeta__nombre{font-size:19px;line-height:1.3}
.hgt-tarjeta__lugar{display:flex;align-items:center;gap:6px;margin:0}
.hgt-tarjeta__lugar svg{flex:0 0 auto;color:var(--jade-600)}
.hgt-amenidades{gap:6px}
.hgt-amenidades li{padding:3px 10px;border-radius:var(--r-badge);background:var(--fog);
  font-size:13px;color:var(--ink-2)}
.hgt-tarjeta__pie{border-top:0;padding-top:12px}
.hgt-tarjeta__pie .hgt-tarjeta__cta{flex:1;font-size:15px}

/* ------------------------------------------------- héroe de listados */
.hgt-heroe--foto{aspect-ratio:auto;display:flex;align-items:flex-end;min-height:380px;
  background:var(--jade-900);isolation:isolate}
@media (min-width:1024px){.hgt-heroe--foto{min-height:460px}}
.hgt-heroe--foto .hgt-heroe__img{position:absolute;inset:0;z-index:-2}
.hgt-heroe--foto .hgt-heroe__velo{z-index:-1}
.hgt-heroe--foto .hgt-heroe__texto{position:relative;width:100%;padding:112px 0 40px}
.hgt-heroe--liso{background:radial-gradient(circle at 85% 0%,var(--jade-600) 0%,var(--jade-800) 55%,var(--jade-900) 100%);
  padding-block:56px 48px}
.hgt-heroe__texto h1{margin-bottom:6px}
.hgt-heroe__sub{margin:0;font-size:18px}
.hgt-heroe__migas{margin-bottom:12px;font-size:14px;color:var(--jade-100)}
.hgt-heroe__migas a{color:var(--surface);text-decoration:underline;text-underline-offset:2px}
.hgt-heroe__migas a:hover{color:var(--jade-100)}

/* ---------------------------------------------- ficha a dos columnas */
.hgt-ficha__foto{border-radius:20px}
@media (min-width:1024px){.hgt-ficha__foto{aspect-ratio:21/9}}
.hgt-ficha__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 48px;
  grid-template-areas:"cab" "lat" "main"}
@media (min-width:1024px){.hgt-ficha__grid{grid-template-columns:minmax(0,1fr) 380px;
  grid-template-areas:"cab lat" "main lat"}}
.hgt-ficha__cabecera{grid-area:cab}
.hgt-ficha__lateral{grid-area:lat;margin-top:24px}
.hgt-ficha__principal{grid-area:main;min-width:0}
@media (min-width:1024px){.hgt-ficha__lateral-fijo{position:sticky;top:96px}}
.hgt-ficha__lateral .hgt-modulo{padding:24px;border-radius:20px;box-shadow:0 10px 32px rgba(20,32,28,.10)}
.hgt-ficha__lateral .hgt-modulo h2{margin:0 0 16px;font-size:24px}
.hgt-ficha__lateral .hgt-campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hgt-campo input,.hgt-campo select{min-width:0}
.hgt-ficha__lateral .hgt-campos > .hgt-campo:nth-child(3){grid-column:1/-1}
.hgt-ficha__lateral .hgt-campos[style]{grid-template-columns:1fr!important}
.hgt-ficha__lateral .hgt-btn--primario{width:100%}
.hgt-ficha__principal > .hgt-seccion:first-child{margin-top:48px}
.hgt-ficha__direccion svg{flex:0 0 auto;color:var(--jade-600)}
.hgt-ficha__direccion .hgt-btn{margin-left:4px}
.hgt-btn--bloque{width:100%}

/* Servicios con marca de verificación */
.hgt-servicios li{display:flex;align-items:center;gap:10px;border-radius:12px}
.hgt-servicios li::before{content:"";flex:0 0 auto;width:18px;height:18px;background:var(--jade-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.hgt-datos{padding:20px 24px;background:var(--surface);border:var(--borde);border-radius:var(--r-tarjeta)}

/* FAQ con indicador */
.hgt-faq details{border-radius:12px}
.hgt-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.hgt-faq summary::-webkit-details-marker{display:none}
.hgt-faq summary::after{content:"+";flex:0 0 auto;font-size:24px;line-height:1;font-weight:400;
  color:var(--jade-600);transition:transform .2s}
.hgt-faq details[open] summary::after{transform:rotate(45deg)}

/* Cómo funciona */
.hgt-ventajas__icono{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:14px;border-radius:14px;background:var(--jade-50);color:var(--jade-700)}
.hgt-ventajas h3{margin:0 0 8px}
.hgt-ventajas p{margin:0;font-size:16px;color:var(--ink-2)}

/* Filtros */
.hgt-filtro{border-color:var(--line)}
.hgt-filtro:hover{border-color:var(--jade-500)}

/* -------------------------------------------------------------- footer */
.hgt-footer{padding-block:56px 24px}
.hgt-footer__rejilla{display:grid;gap:32px}
@media (min-width:768px){.hgt-footer__rejilla{grid-template-columns:1.2fr 1fr 2fr}}
.hgt-footer h2{margin:0 0 14px;font-family:var(--fuente-texto);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--surface)}
.hgt-footer ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.hgt-footer__deptos{grid-template-columns:repeat(2,1fr)}
@media (min-width:1024px){.hgt-footer__deptos{grid-template-columns:repeat(3,1fr)}}
.hgt-footer a{text-decoration:none}
.hgt-footer a:hover{text-decoration:underline;color:var(--surface)}
.hgt-footer__marca p{max-width:340px;margin-top:14px}
.hgt-logo--claro,.hgt-footer a.hgt-logo--claro{color:var(--surface);text-decoration:none}
.hgt-logo--claro b{color:var(--carmin-100)}
.hgt-footer__legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(214,233,226,.2)}
.hgt-footer__legal a{text-decoration:underline}

/* Relleno sin foto: inicial en círculo y cinta fina, menos peso visual */
.hgt-tarjeta__media .hgt-sinfoto{background:linear-gradient(160deg,var(--jade-50) 0%,var(--jade-100) 100%)}
.hgt-tarjeta__media .hgt-sinfoto__inicial{display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;background:var(--surface);font-size:40px;
  box-shadow:0 4px 16px rgba(13,83,68,.12);transform:translateY(-8%)}
.hgt-tarjeta__media .hgt-sinfoto__cinta{height:12%}

/* --------------------------------------------------------- móvil fino */
@media (max-width:599px){
  .hgt-portada__buscador button{padding:0 18px}
  .hgt-portada__sub{font-size:17px}
  .hgt-destino-card--grande h3{font-size:28px}
  .hgt-heroe--foto{min-height:340px}
}