/* San Juan Turismo — componentes del brief sanjuan.tur.ar (reutiliza tokens --gsj-*) */

/* Stars (solo Alojamiento) */
/* Contraste de las estrellas: ver el bloque "Estrellas de categoría hotelera" en
   turismo-extend.css, donde está el token y el fundamento. Las reglas van acá
   porque es donde el selector se define y este archivo se importa último. */
.gsj-stars {
  display: inline-flex;     /* se conserva del original: el span vacío es un flex item */
  gap: 2px;
  color: var(--gsj-color-stars);
  font-size: 1rem;          /* 14px → 16px: un glifo más grande se discrimina mejor */
  letter-spacing: 1.5px;
  /* 🔴 FAMILIA E INTERLINEADO DECLARADOS. No los fijaba, así que los heredaba del lugar:
     medido el 2026-08-06 en `/servicios/alojamiento`, la MISMA estrella salía Ubuntu/26px
     dentro de una faceta del rail (`.gsj-facets__option` sí declara familia) y Lora/24px
     dentro de una tarjeta — caja de 87×26 contra 90×24 en la misma página. El glifo se ve
     igual porque ninguna de las dos fuentes contiene ★ y las dos caen al mismo fallback:
     lo que variaba era la caja. Se toma el valor del kit (heading / 1.625 = 26px). */
  font-family: var(--gsj-font-heading);
  line-height: 1.625;
}

.gsj-stars--empty {
  color: var(--gsj-color-text-muted);
}

/* PrestadorCard: card horizontal de directorio */
/* 🔴 `line-height` DECLARADA por el mismo motivo que en `.gsj-stars`: no la fijaba y la
   heredaba del contenedor, así que la tarjeta daba 27px dentro de un `<li>` (las listas de
   resultados de servicios y búsqueda) y 29.25px dentro de un `<div>` (`/destinos/iglesia`),
   arrastrando a `__body`, `__meta` y `__location`. **El kit tenía el mismo hueco**, así que
   no era divergencia sitio↔kit sino del DS. Se toma 1.5 = 27px, que es lo que ya rendían 3
   de las 4 pantallas donde aparece. */
.gsj-prestador-card { line-height:1.5; display:flex; gap:var(--gsj-space-5); background:var(--gsj-color-surface); border:1px solid var(--gsj-color-border); border-radius:var(--gsj-radius-card); overflow:hidden; text-decoration:none; color:var(--gsj-color-text); transition:box-shadow var(--gsj-duration-base) var(--gsj-ease-standard), border-color var(--gsj-duration-fast) var(--gsj-ease-standard), transform var(--gsj-duration-base) var(--gsj-ease-standard); }
.gsj-prestador-card:hover { border-color:var(--gsj-color-primary); box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(-4px); text-decoration:none; }
.gsj-prestador-card__media { flex-shrink:0; width:180px; min-height:140px; background:var(--gsj-color-bg-muted); position:relative; }
.gsj-prestador-card__media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.gsj-prestador-card__body { flex:1; min-width:0; padding:var(--gsj-space-5) var(--gsj-space-5) var(--gsj-space-5) 0; display:flex; flex-direction:column; gap:6px; }
.gsj-prestador-card--no-media .gsj-prestador-card__body { padding-left:var(--gsj-space-5); }
.gsj-prestador-card__meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* 🔴 `line-height` DECLARADA, y no es redundante. El componente ya fijaba familia, cuerpo,
   peso, color y margen, pero NO el interlineado, así que lo heredaba de la etiqueta: el DS
   base da 1.28 a `h2`/`h3` y **1.5 a `h4`**. Mientras todas las tarjetas del sitio fueron
   `h3` no se notó; el estado vacío de la agenda las escribe `h4` —cuelgan del `h3` «Mientras
   tanto, en …»— y el mismo título saltó de 23,04px a 27px de interlineado. El nivel de
   encabezado de una card es CONTEXTUAL (`SjturCards::deArticulo()` recibe `nivel`), así que
   el componente no puede depender de cuál le toque. 1.28 es exactamente lo que venían
   computando las `h3`: ninguna pantalla ya auditada se mueve. */
.gsj-prestador-card__title { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-headline); font-weight:700; line-height:1.28; color:var(--gsj-color-text); margin:0; }
.gsj-prestador-card__location { display:inline-flex; align-items:center; gap:6px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); color:var(--gsj-color-text-muted); }
.gsj-prestador-card__location svg { width:14px; height:14px; color:var(--gsj-color-primary); }
/* Chips de actividad: `gsj-badge--outline --pill` — CANON (decidido 2026-08-03, H2.7 tramo 4).
   Pill = lista de tags (tambien art-siblings); radio 8 = etiqueta de categoria (Folleto PDF).
   Ninguna pantalla del kit dibuja el caso todavia: va en el retro-sync junto a los grupos
   nuevos de servicios.html. */
.gsj-prestador-card__acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
/* MÓVIL (2026-09-22, decisión [U] «probemos sólo en prestadores»): la tarjeta se queda EN FILA
   —foto de 124 px a la izquierda, rubro / nombre / localidad a la derecha— en vez de apilarse con la
   foto a todo el ancho. Medido en /servicios/alojamiento a 390 px: apilada medía 265 px por tarjeta y
   11 pantallas por página de 20; es la lista que más se recorre desde el celular, estando en San Juan.
   Los chips de actividades (`__acts`, Guías) siguen y envuelven. */
@media (max-width:575px) {
  .gsj-prestador-card { gap:var(--gsj-space-4); }
  /* Proporcional: a 320 px la foto fija de 124 se comía el 46 % de la tarjeta y el texto caía a 4 líneas. */
  .gsj-prestador-card__media { width:clamp(96px, 36%, 124px); min-height:96px; }
  .gsj-prestador-card__body { padding:var(--gsj-space-4) var(--gsj-space-4) var(--gsj-space-4) 0; gap:4px; }
  .gsj-prestador-card__title { font-size:1.0625rem; }
}

/* PromoCard */
.gsj-promo-card { display:flex; flex-direction:column; background:var(--gsj-color-surface); border:1px solid var(--gsj-color-border); border-radius:var(--gsj-radius-card); overflow:hidden; text-decoration:none; color:var(--gsj-color-text); transition:box-shadow var(--gsj-duration-base) var(--gsj-ease-standard), transform var(--gsj-duration-base) var(--gsj-ease-standard), border-color var(--gsj-duration-fast) var(--gsj-ease-standard); }
.gsj-promo-card:hover { border-color:var(--gsj-color-primary); box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(-6px); text-decoration:none; }
/* intro image = 16:9, ENTERA (contain): la gráfica del cliente puede traer logos/texto → nunca se recorta */
.gsj-promo-card__media { aspect-ratio:16/9; background:var(--gsj-color-bg-muted); position:relative; }
.gsj-promo-card__media img { width:100%; height:100%; object-fit:contain; }
.gsj-promo-card__body { padding:var(--gsj-space-6); display:flex; flex-direction:column; gap:8px; }
.gsj-promo-card__vigencia { display:inline-flex; align-items:center; gap:6px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-caption-1); font-weight:600; color:var(--gsj-color-warning-text); background:rgba(253,194,31,.18); border-radius:var(--gsj-radius-full); padding:4px 12px; align-self:flex-start; }
.gsj-promo-card__vigencia svg { width:13px; height:13px; }

/* PromoBanner (en fichas relacionadas por tag) */
.gsj-promo-banner { display:flex; align-items:center; flex-wrap:wrap; row-gap:4px; gap:var(--gsj-space-5); background:var(--gsj-color-primary-container); border:1px solid var(--gsj-color-primary); border-radius:var(--gsj-radius-lg); padding:var(--gsj-space-4) var(--gsj-space-6); text-decoration:none; transition:background-color var(--gsj-duration-fast) var(--gsj-ease-standard); }
.gsj-promo-banner:hover { background:oklch(92% 0.06 51deg); text-decoration:none; }
.gsj-promo-banner__tag { flex-shrink:0; }
.gsj-promo-banner__title { flex:1; min-width:0; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-subheadline); font-weight:600; color:var(--gsj-color-on-primary-container); margin:0; }
/* vigencia/cta no reducen su ancho (flex-shrink:0): a lo ancho angosto (mobile), en vez de comprimirse y solaparse con el título, el `flex-wrap` del contenedor las baja a una segunda línea. */
.gsj-promo-banner__vigencia { flex-shrink:0; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-caption-1); color:var(--gsj-color-on-primary-container); opacity:.7; white-space:nowrap; }
.gsj-promo-banner__cta { flex-shrink:0; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); font-weight:600; color:var(--gsj-color-primary-text); white-space:nowrap; }

/* PromoBanner CON IMAGEN: imagen intro 16:9 ENTERA (contain) al lado, texto en COLUMNA vertical.
   El bloque de texto es una columna (no la fila del banner base) para que el título no se apriete. */
.gsj-promo-banner--media { align-items:stretch; flex-wrap:nowrap; gap:var(--gsj-space-5); padding:var(--gsj-space-3); }
/* 🔴 `display:block` NO es decorativo: es un <span>, o sea `inline` por defecto, y en un inline
   no replaced el `overflow:hidden` y el `border-radius` NO recortan. En `--media` no se notaba
   porque el padre es `flex` y el span se blockifica solo; en `--solo` el padre es `block` y las
   esquinas de la imagen salían en escuadra. Declararlo acá y no depender del padre. */
.gsj-promo-banner__media { display:block; flex:0 0 clamp(150px, 34%, 300px); aspect-ratio:16/9; border-radius:var(--gsj-radius-md); background:var(--gsj-color-bg-muted); overflow:hidden; }
.gsj-promo-banner__media img, .gsj-promo-banner__media image-slot { width:100%; height:100%; object-fit:contain; display:block; }
.gsj-promo-banner__content { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding:var(--gsj-space-2) var(--gsj-space-4); }
.gsj-promo-banner--media .gsj-promo-banner__title { flex:none; }
/* Imagen sola: la gráfica ya trae todo el texto → solo la imagen clicable.
   La caja NO impone proporción: la toma de la propia gráfica, porque es una pieza de BANNER
   WEB (la de PROMOVER VF es 3,84:1, casi un billboard 970×250). Forzar 16:9 acá daba un
   bloque de 693px de alto sobre 1232 de ancho, con bandas vacías arriba y abajo.
   En mobile se sirve un recorte propio por <picture>, así que ahí la proporción también es
   la de su gráfica. `height:auto` es lo que suelta la relación: hay que declararlo porque la
   regla compartida de `__media img` fija `height:100%`. */
/* `border:0` — en los estados con texto el marco de 1px es parte del chrome del banner, pero
   detrás de una gráfica a sangre queda como un anillo alrededor de la imagen: el <a> medía
   1232×322 y la imagen 1230×320, esos 2px por eje eran el borde asomando.
   El hover del banner base cambia el `background`, que acá queda TAPADO por la gráfica, así que
   el estado no se veía. Se usa el mismo gesto que las otras piezas clicables con imagen del DS
   (`gsj-prestador-card:21`, `gsj-promo-card:39`): levantar + sombra. La guardia global de
   `prefers-reduced-motion` de portal.css ya neutraliza la transición, no hace falta una acá. */
/* Radio de TARJETA, no el `lg` del banner base: en este estado la pieza es un bloque de imagen
   a sangre, y en la home se apila justo encima del riel de tarjetas. Dos bloques de imagen
   pegados con radios distintos (16 vs 20) se leen como descuido, no como distinción. Los
   estados CON texto se quedan en `lg`, que es la familia banner/alerta. */
.gsj-promo-banner--solo { display:block; padding:0; border:0; border-radius:var(--gsj-radius-card); background:var(--gsj-color-bg-muted); transition:transform var(--gsj-duration-fast) var(--gsj-ease-standard), box-shadow var(--gsj-duration-fast) var(--gsj-ease-standard); }
.gsj-promo-banner--solo:hover { transform:translateY(-4px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); background:var(--gsj-color-bg-muted); }
.gsj-promo-banner--solo .gsj-promo-banner__media { flex:none; width:100%; aspect-ratio:auto; border-radius:var(--gsj-radius-card); }
.gsj-promo-banner--solo .gsj-promo-banner__media img { height:auto; }
.gsj-promo-banner__media picture { display:block; width:100%; }
@media (max-width:575px) {
  .gsj-promo-banner--media { flex-direction:column; align-items:stretch; }
  .gsj-promo-banner--media .gsj-promo-banner__media { flex:none; width:100%; }
  .gsj-promo-banner__content { padding:var(--gsj-space-2); }
  /* Mobile NO recorta: recibe su propia pieza 16:9 por <picture> (la de desktop es 6:1 y a
     342px de ancho dejaría el logotipo en ~7px de alto). Las dos se muestran enteras, así que
     no hay `cover` en ningún lado y lo que el diseñador compuso es lo que se ve.
     La caja sigue en `aspect-ratio:auto`: el alto lo dicta la pieza que toque. */
}

/* RedesSociales */
.gsj-social-row { display:flex; gap:8px; list-style:none; padding:0; margin:0; }
.gsj-social-row__link { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--gsj-radius-sm); background:var(--gsj-color-fill-primary); color:var(--gsj-color-text-secondary); transition:background-color var(--gsj-duration-fast) var(--gsj-ease-standard), color var(--gsj-duration-fast) var(--gsj-ease-standard); }
.gsj-social-row__link:hover { background:var(--gsj-color-primary); color:#fff; }
.gsj-social-row__link svg { width:18px; height:18px; }

/* FichaContacto */
.gsj-contact-card { border:1px solid var(--gsj-color-border); border-radius:var(--gsj-radius-card); overflow:hidden; background:var(--gsj-color-surface); }
.gsj-contact-card__title { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-subheadline); font-weight:600; padding:14px var(--gsj-space-6); background:var(--gsj-color-bg-subtle); border-bottom:1px solid var(--gsj-color-border); margin:0; }
.gsj-contact-card__row { display:flex; gap:12px; align-items:baseline; padding:12px var(--gsj-space-6); border-bottom:.5px solid var(--gsj-color-border); font-size:var(--gsj-font-size-subheadline); }
.gsj-contact-card__row:last-child { border-bottom:none; }
.gsj-contact-card__label { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); font-weight:600; color:var(--gsj-color-text-muted); flex:0 0 32%; }
.gsj-contact-card__value { flex:1; min-width:0; color:var(--gsj-color-text); word-break:break-word; }

/* Amenities (solo Alojamiento) */
.gsj-amenities { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; list-style:none; padding:0; margin:0; }
.gsj-amenities__item { display:flex; align-items:center; gap:8px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); color:var(--gsj-color-text-secondary); }
.gsj-amenities__item svg { width:16px; height:16px; color:var(--gsj-color-success); flex-shrink:0; }

/* SelladoPasaporte (solo Sanmartinianos) */
.gsj-sellado { border-left:4px solid var(--gsj-color-primary); background:var(--gsj-color-fill-brand); border-radius:0 var(--gsj-radius-md) var(--gsj-radius-md) 0; padding:var(--gsj-space-5) var(--gsj-space-6); }
.gsj-sellado__title { display:flex; align-items:center; gap:10px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-headline); font-weight:700; color:var(--gsj-color-brand-text); margin:0 0 12px; }
.gsj-sellado__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 24px; }
.gsj-sellado__label { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-caption-1); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gsj-color-brand-text); opacity:.7; margin:0 0 2px; }
.gsj-sellado__value { font-size:var(--gsj-font-size-subheadline); color:var(--gsj-color-text); margin:0; }

/* BodegaVisita */
.gsj-visita { display:flex; flex-wrap:wrap; gap:var(--gsj-space-4); }
.gsj-visita__item { display:inline-flex; align-items:center; gap:8px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-subheadline); font-weight:600; padding:10px 16px; border-radius:var(--gsj-radius-full); background:rgba(46,125,50,.12); color:var(--gsj-color-success-text); }
.gsj-visita__item.is-no { background:var(--gsj-color-fill-primary); color:var(--gsj-color-text-muted); }
.gsj-visita__item svg { width:16px; height:16px; }

/* Filtros facetados */
.gsj-facets { display:flex; flex-direction:column; gap:var(--gsj-space-6); }
.gsj-facets__group { border-bottom:.5px solid var(--gsj-color-border); padding-bottom:var(--gsj-space-5); }
.gsj-facets__group:last-child { border-bottom:none; }
.gsj-facets__title { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gsj-color-text-muted); margin:0 0 12px; }
/* 🔴 `margin:0` EXPLÍCITO Y NO ES REDUNDANTE: es un `<label>`, y nucleus.css —que el sitio
   carga y el kit no— trae `label{margin-bottom:.375rem}`. Sin esta línea cada opción de
   faceta se llevaba 6px de más: 30px de aire falso en una faceta de 5 destinos. Décima
   aparición del bug de márgenes, y la primera sobre un elemento que no es `<p>`. */
.gsj-facets__option { display:flex; align-items:center; gap:10px; min-height:36px; font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-subheadline); color:var(--gsj-color-text-secondary); cursor:pointer; margin:0; }
.gsj-facets__count { margin-left:auto; font-size:var(--gsj-font-size-caption-1); color:var(--gsj-color-text-muted); background:var(--gsj-color-fill-primary); border-radius:var(--gsj-radius-full); padding:2px 8px; }
/* "ver más" de cola larga: Actividades tiene 46 valores definidos y 31 en uso — se muestran los N con más
   resultados y el resto se despliega. Sin esto la faceta es una lista plana inservible. */
/* Mismo `line-height` explícito que `__clear`, por el mismo `button{line-height:inherit}`
   de nucleus. ⚠️ Éste NO está medido contra el kit: ninguna pantalla implementada lo usa
   todavía (aparece en búsqueda y servicios, donde la faceta de Actividades tiene cola
   larga). Se declara igual para no dejar el mismo pozo cavado. */
.gsj-facets__more { background:none; border:none; color:var(--gsj-color-text-link); font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); font-weight:600; cursor:pointer; padding:6px 0 0; line-height:normal; min-height:24px; }
/* Chips de selección activa: misma selección que el panel, visible sin abrirlo. Mobile y desktop. */
.gsj-facets__chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gsj-facets__chips--scroll { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
.gsj-facets__chips--scroll > * { flex-shrink:0; }
/* 🔴 `line-height` Y `min-height` EXPLÍCITOS, y las dos por el mismo motivo de fondo: un
   componente que no declara una propiedad queda a merced de lo que traiga el sitio.
   · `line-height`: nucleus.css trae `button{line-height:inherit}` —el kit no lo carga— y
     eso estiraba el botón de 14px a 21px sólo en el sitio. Es el bug de márgenes de
     siempre, pero sobre `line-height`; se arregla igual, declarándolo.
   · `min-height`: los DOS lados estaban por debajo del mínimo de 24×24 CSS px que pide
     WCAG 2.5.8 (AA) para un objetivo táctil, y «Limpiar todo» no cae en la excepción de
     texto en línea: es un botón suelto en una fila de chips. 14px es media uña.
     Como el kit carga este mismo archivo, los dos lados se corrigen a la vez. */
.gsj-facets__clear { background:none; border:none; color:var(--gsj-color-text-link); font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-footnote); font-weight:600; cursor:pointer; padding:0 8px; white-space:nowrap; line-height:normal; min-height:24px; display:inline-flex; align-items:center; }

/* Presentación bottom-sheet de FiltrosFacetados en mobile — mismo componente, otro layout. */
.gsj-sheet { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; justify-content:flex-end; }
.gsj-sheet__scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); border:none; cursor:pointer; }
.gsj-sheet__panel { position:relative; background:var(--gsj-color-bg-page); border-radius:24px 24px 0 0; max-height:88%; display:flex; flex-direction:column; animation:gsj-sheet-in var(--gsj-duration-base) var(--gsj-ease-standard); }
.gsj-sheet__header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:.5px solid var(--gsj-color-border); }
.gsj-sheet__title { font-family:var(--gsj-font-heading); font-size:1.125rem; margin:0; }
.gsj-sheet__close { width:36px; height:36px; border-radius:var(--gsj-radius-full); background:var(--gsj-color-fill-primary); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gsj-color-text-secondary); }
.gsj-sheet__body { flex:1; overflow-y:auto; padding:20px; }
.gsj-sheet__footer { flex-shrink:0; display:flex; gap:12px; padding:16px 20px; border-top:.5px solid var(--gsj-color-border); background:var(--gsj-color-bg-page); }
@keyframes gsj-sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* Buscador — panel de autocompletado (sugerencias agrupadas por entidad) */
/* z-index 30, elegido contra el mapa real de la pagina de busqueda: le gana al rail
   sticky y a las cards (z auto, pintaban ENCIMA del panel — el scale(1.02) del focus-within
   hace stacking context del form y su z auto lo dejaba en orden DOM) y pierde contra el
   bottom-sheet (40), el header (200), el skip-link (500) y el drawer (1000). */
.gsj-suggest { position:relative; z-index:30; }
.gsj-suggest__panel { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50; background:var(--gsj-color-surface); border:1px solid var(--gsj-color-border); border-radius:var(--gsj-radius-lg); box-shadow:0 20px 40px -12px rgba(0,0,0,.22); padding:var(--gsj-space-4) var(--gsj-space-5); max-height:420px; overflow-y:auto; }
.gsj-suggest__group { margin-bottom:var(--gsj-space-4); }
.gsj-suggest__group:last-of-type { margin-bottom:0; }
.gsj-suggest__group-title { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-caption-1); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gsj-color-text-muted); margin:0 0 4px; }
.gsj-suggest__item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; padding:9px 6px; cursor:pointer; border-radius:var(--gsj-radius-sm); font-family:var(--gsj-font-body); }
.gsj-suggest__item:hover, .gsj-suggest__item.is-active { background:var(--gsj-color-fill-primary); }
.gsj-suggest__item-text { flex:1; min-width:0; }
.gsj-suggest__item-nombre { display:block; font-family:var(--gsj-font-heading); font-weight:600; font-size:var(--gsj-font-size-body); color:var(--gsj-color-text); }
.gsj-suggest__item-sub { display:block; font-size:var(--gsj-font-size-footnote); color:var(--gsj-color-text-muted); }
.gsj-suggest__empty { text-align:center; padding:28px 12px; }
/* El panel vivo (sjtur-suggest.js, H2.7 tramo 3) suma el estado 2 del kit y los items-enlace.
   Los items del estado 4 son <a> en el sitio (navegan a la ficha; en el kit son <button> de
   maqueta) -> text-decoration fuera. El destino replica la fila del kit: pin primario, borde
   abajo, lista vertical -- "son destinos de navegacion, no filtros aplicables". */
.gsj-suggest__item { text-decoration:none; }
.gsj-suggest__chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.gsj-suggest__destino { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; border-bottom:.5px solid var(--gsj-color-border); padding:12px 0; cursor:pointer; font-family:var(--gsj-font-body); font-size:15px; color:var(--gsj-color-text); text-decoration:none; }
.gsj-suggest__destino svg { width:18px; height:18px; flex-shrink:0; stroke:var(--gsj-color-primary); }
.gsj-suggest__destino.is-active, .gsj-suggest__chips .gsj-chip.is-active { background:var(--gsj-color-fill-primary); }
.gsj-suggest__empty-titulo { font-family:var(--gsj-font-heading); font-weight:600; margin:0 0 4px; }
.gsj-suggest__empty-sub { font-size:var(--gsj-font-size-footnote); color:var(--gsj-color-text-muted); margin:0; }
.gsj-suggest__todos { width:100%; margin-top:8px; justify-content:center; }

/* Resultados: estados */
.gsj-results-empty { text-align:center; padding:var(--gsj-space-16) var(--gsj-space-6); color:var(--gsj-color-text-muted); font-family:var(--gsj-font-heading); }
.gsj-results-empty strong { display:block; font-size:var(--gsj-font-size-headline); color:var(--gsj-color-text); margin-bottom:8px; }
/* Barra de conteo + orden, arriba de los resultados */
.gsj-results-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.gsj-results-count { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-headline); font-weight:700; color:var(--gsj-color-text); }
.gsj-results-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
/* Rótulo de entidad sobre cada fila de la lista mixta (solo búsqueda por texto libre) */
.gsj-results-kind { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gsj-results-kind__hint { font-family:var(--gsj-font-heading); font-size:var(--gsj-font-size-caption-1); color:var(--gsj-color-text-muted); }
/* Skeletons de carga (el buscador es externo y tiene latencia real) */
.gsj-skeleton-row { background:var(--gsj-color-surface); border:1px solid var(--gsj-color-border); border-radius:var(--gsj-radius-card); padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.gsj-skeleton-bar { height:12px; border-radius:6px; background:linear-gradient(90deg,var(--gsj-color-bg-muted) 25%,var(--gsj-color-fill-primary) 37%,var(--gsj-color-bg-muted) 63%); background-size:640px 100%; animation:gsj-shimmer 1.2s infinite linear; }
.gsj-skeleton-bar--title { height:17px; }
@keyframes gsj-shimmer { 0% { background-position:-320px 0; } 100% { background-position:320px 0; } }
@media (prefers-reduced-motion: reduce) { .gsj-skeleton-bar { animation:none; } .gsj-sheet__panel { animation:none; } }

/* Tour 360 boton — usa gsj-button--tonal + icono */
.gsj-tour360-icon { display:inline-flex; width:18px; height:18px; }

/* Tags visibles (nombre legible, no slug) */
.gsj-tag-row { display:flex; flex-wrap:wrap; gap:6px; }

/* Aviso de autogestión — "ficha en actualización" (Prestador mínimo/parcial) */
.gsj-aviso-autogestion { display:flex; flex-direction:column; gap:8px; background:var(--gsj-color-bg-muted); border-radius:var(--gsj-radius-lg); padding:16px; }
.gsj-aviso-autogestion__title { margin:0; font-family:var(--gsj-font-heading); font-weight:500; font-size:1rem; color:var(--gsj-color-text); }
.gsj-aviso-autogestion__body { margin:0; font-size:0.9375rem; line-height:var(--gsj-line-height-relaxed); color:var(--gsj-color-text-secondary); }

/* OficinaCard — tarjeta de oficina de turismo (directorio Planificá + ficha de Destino). Nombre prominente (reemplaza FichaContacto). */
.gsj-oficina-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px;border:1px solid var(--gsj-color-border);border-radius:var(--gsj-radius-card);background:var(--gsj-color-surface,#fff)}
.gsj-oficina-card__destino{align-self:flex-start;font-family:var(--gsj-font-heading);font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--gsj-color-primary-text);text-decoration:none}
.gsj-oficina-card__destino:hover{text-decoration:underline}
.gsj-oficina-card__name{font-family:var(--gsj-font-heading);font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--gsj-color-text);margin:0}
.gsj-oficina-card__nota{font-size:.9rem;line-height:1.45;color:var(--gsj-color-text-secondary);margin:0}
.gsj-oficina-card__details{display:flex;flex-direction:column;gap:9px;margin:6px 0 2px}
.gsj-oficina-card__detail{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.95rem;line-height:1.45}
.gsj-oficina-card__detail>svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--gsj-color-primary)}
.gsj-oficina-card__detail a{color:var(--gsj-color-text);text-decoration:none}
.gsj-oficina-card__detail a:hover{color:var(--gsj-color-primary-text);text-decoration:underline}
.gsj-oficina-card__detail--web a{color:var(--gsj-color-primary-text)}
.gsj-oficina-card__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:6px}
.gsj-oficina-card__foot .gsj-button{margin-left:auto}
/* `margin-bottom` propio: la destacada va fuera de la grilla (ancho completo), así que no
   la separa el `gap` de `.of-grid`. Venía como override page-local en el kit. */
.gsj-oficina-card--destacada{border-color:var(--gsj-color-primary);background:var(--gsj-color-bg-subtle);margin-bottom:12px}
.gsj-oficina-card--destacada .gsj-oficina-card__name{font-size:1.5rem}
@media(min-width:720px){.gsj-oficina-card--destacada .gsj-oficina-card__details{display:grid;grid-template-columns:1fr 1fr;gap:9px 28px}}

/* ==========================================================================
   gsj-entity-hero — encabezado de las páginas de entidad (2026-07-28)

   Unifica lo que estaba escrito dos veces como `.atr-hero*` (Atractivo) y
   `.exp-hero*` (Destino y Experiencia). El diff declaración por declaración dio:
     · 26 propiedades en uno solo  → modelo de contenido distinto, JUSTIFICADO
     · 11 propiedades idénticas    → esqueleto duplicado
     ·  6 propiedades en conflicto → deriva (margin-top 14 vs 16px, valores fijos
                                     vs fluidos), sin fundamento de diseño

   Lo que NO se unifica, a propósito: el TRATAMIENTO. Son dos modificadores porque
   muestran cosas distintas:
     `--foto`   Atractivo: un lugar. La foto ES el producto y está garantizada
                (43/43 atractivos publicados tienen imagen). Hero alto e inmersiva.
     `--marca`  Destino y Experiencia: título de despliegue y medida de lectura
                acotada (46ch), sobre banda de degradé de marca O sobre la foto del
                artículo. El TRATAMIENTO es lo que define el modificador.

   ⚠️ SUPERSEDIDO EN PARTE — 2026-07-30, decisión del usuario. El texto original decía
   que Destino y Experiencia van SIN foto, porque son "abstracciones que ninguna foto
   sola representa" y porque la foto "competiría con la galería de abajo". El usuario lo
   revisó viendo el render y resolvió que **el hero lleva la foto del artículo**.
   🔴 Lo que NO cambia, y confundirlo fue un error medido: **la foto es ORTOGONAL al
   modificador.** Pasar Destino de `--marca` a `--foto` no agrega una foto: cambia el
   tratamiento entero —el `__content` pierde su `max-width: 46ch` y pasa a 1113px, y el
   título de despliegue se reemplaza por el título más chico de Atractivo, que es más
   chico porque su hero carga badge + sello + alias + descripción + ubicación—. La foto
   va en `__media`, que es `position:absolute; inset:0` y por lo tanto tapa el degradé
   cuando hay imagen y lo deja ver cuando no. Un solo modificador cubre los dos casos.

   Lo que sí se unifica: el esqueleto, y el MÉTODO. Antes Atractivo usaba medidas
   fijas (min-height 460px, padding 24px, título 27px) mientras sus hermanas
   escalaban con el viewport; ahora las tres son fluidas. Que el título de Atractivo
   sea más chico sigue siendo correcto —su hero carga badge + sello + título + alias
   + descripción + ubicación, mucho más denso que badge + título + bajada—, pero
   ahora es una decisión declarada por modificador, no un número suelto.
   ========================================================================== */

.gsj-entity-hero {
  margin-top: 16px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--gsj-radius-lg);
}

.gsj-entity-hero__media {
  position: absolute;
  inset: 0;
}

/* `image-slot` es el placeholder del kit; `img` es lo que emite el sitio real desde
   `image_fulltext`. El componente sólo contemplaba el primero y por eso la foto no
   llenaba la banda (H2.5.2.1). */
.gsj-entity-hero__media image-slot,
.gsj-entity-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2026-09-24: FOCO ABAJO POR NOMBRE DE ARCHIVO. Una foto cuyo sujeto está en la franja baja (el cóndor de
   La Ciénaga, #1855: ocupa del 60 % al 99 % del alto) pierde el cuerpo en el recorte ancho del hero (1232×460)
   si se centra. Recortar el archivo no sirve: el móvil (342×316) le corta las alas. El nombre lleva el sufijo
   `--foco-abajo` y se ancla abajo en TODO marco con `cover` (hero, tarjetas). Va por nombre y no por un campo
   porque el `images` del artículo pierde claves propias al guardarse desde el admin. Medido en los tres marcos.
   ⚠️ Mismo día: el cóndor NO quedó de portada — el texto del hero y de la tarjeta va ABAJO y lo tapaba igual; pasó a
   la galería de #1855 (decisión [U]). La regla queda como mecanismo para una portada con el sujeto abajo y SIN texto
   encima; hoy no hay ninguna portada que la use. */
img[src*="--foco-abajo"] {
  object-position: 50% 100%;
}

.gsj-entity-hero__scrim {
  position: absolute;
  inset: 0;
}

.gsj-entity-hero__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 4vw, 36px);
  color: #fff;
}

.gsj-entity-hero__title {
  font-family: var(--gsj-font-heading);
  font-weight: 700;
  color: #fff;
  margin: 0;                      /* el aire lo da el `gap` del __content */
  text-wrap: balance;
}

.gsj-entity-hero__bajada {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  text-wrap: pretty;
}

/* --- Modificador FOTO: Atractivo --- */
.gsj-entity-hero--foto {
  min-height: clamp(460px, 44vw, 560px);
}

.gsj-entity-hero--foto .gsj-entity-hero__scrim {
  background-image: linear-gradient(180deg, rgba(22, 13, 4, 0) 30%, rgba(22, 13, 4, .5) 60%, rgba(22, 13, 4, .84) 100%);
}

/* Título menor que en --marca porque compite con mucho más contenido dentro del
   mismo hero. `line-height` más suelto: a este cuerpo le corresponde. */
.gsj-entity-hero--foto .gsj-entity-hero__title {
  font-size: clamp(1.7rem, 2.5vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.gsj-entity-hero--foto .gsj-entity-hero__bajada {
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
}

/* Nombre alternativo del atractivo ("Valle de la Luna"). Solo en --foto. */
.gsj-entity-hero__kicker {
  margin: 0;
  font-family: var(--gsj-font-heading);
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
}

/* Línea de ubicación con enlace al destino. Solo en --foto. */
.gsj-entity-hero__loc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: var(--gsj-font-heading);
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  margin: 0;
}

/* 🔴 SIN ESTA REGLA EL PIN MIDE 1145 × 1145 px Y EL HERO PASA DE ~460 A 1423 px. Medido.
   El `<svg>` del kit trae `width="15" height="15"` EN EL ATRIBUTO, así que la pantalla del kit
   se ve bien y esta regla nunca hizo falta ahí. El override del sitio emite sus íconos con un
   helper compartido que no pone atributos de tamaño —los otros diez componentes con ícono de
   esta hoja lo resuelven con su propia regla `svg`, y éste era el único que no la tenía—, y un
   SVG sin width/height dentro de un flex se estira a lo que haya.
   Es el mismo modo de falla de siempre: un componente `gsj-*` que no declara una propiedad
   queda a merced del contexto. El tamaño lo declara el componente, no quien lo llama.
   Estuvo latente desde el principio: hasta el 2026-08-11 ningún atractivo tenía `localidad`
   cargada, así que esta línea no se dibujaba en ninguna ficha y el bug no tenía dónde verse. */
.gsj-entity-hero__loc svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* --- Modificador MARCA: Destino y Experiencia --- */
.gsj-entity-hero--marca {
  min-height: clamp(300px, 48vw, 460px);
  background-image: linear-gradient(120deg, var(--gsj-color-primary), var(--gsj-brand-orange-dark, #7c2d12));
}

.gsj-entity-hero--marca .gsj-entity-hero__scrim {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .62));
}

/* 🔴 SOBRE FOTO EL SCRIM DE MARCA NO ALCANZA, y está medido: su alpha máxima es .62, que
   sobre un póster BLANCO (el peor caso, porque la foto la elige quien carga contenido)
   deja el texto en 6.19:1 al pie pero en **3.36:1 a media altura**, donde cae la bajada
   — que necesita 4.5. Sobre el degradé de marca alcanzaba porque ese fondo es oscuro y
   conocido; una foto cualquiera no lo es.
   Se refuerza SÓLO cuando hay foto, con la misma rampa que usa `--foto`, para no
   oscurecer de más la banda de marca cuando no hay imagen. Va por clase explícita y no
   por `:has(.gsj-entity-hero__media)`: si `:has()` no resolviera, el texto quedaría
   ilegible sobre la foto, y ése no es un modo de fallar aceptable. */
.gsj-entity-hero__scrim--foto {
  background-image: linear-gradient(180deg, rgba(22, 13, 4, 0) 30%, rgba(22, 13, 4, .5) 60%, rgba(22, 13, 4, .84) 100%);
}

.gsj-entity-hero--marca .gsj-entity-hero__content {
  max-width: 46ch;
}

/* Título de despliegue: más grande y con leading más ceñido, que es lo que pide
   un cuerpo tipográfico de este tamaño. */
.gsj-entity-hero--marca .gsj-entity-hero__title {
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.03;
}

.gsj-entity-hero--marca .gsj-entity-hero__bajada {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.45;
  max-width: 40ch;
  color: rgba(255, 255, 255, .92);
}


/* --- Crédito de la foto del hero (2026-09-23) ------------------------------------------------
   La leyenda de la portada es su crédito: «Foto: autor, CC BY-SA 4.0, Wikimedia Commons» o el de prensa.
   Esquina superior derecha: abajo a la izquierda está el título y abajo a la derecha el scrim es más oscuro
   en móvil; arriba no choca con nada. Encima del scrim (que es un hermano anterior). */
.gsj-entity-hero__credito {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    text-align: right;
    /* Fondo propio: sobre un cielo claro (CASLEO) la sombra sola quedaba justa. */
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 6px;
    border-radius: 4px;
}
/* A 320 px el título largo + la bajada llenan todo el alto del hero y el crédito se encimaba con el texto
   (medido en CASLEO). En angosto, y sólo si hay crédito, el contenido deja lugar arriba. */
@media (max-width: 600px) {
    .gsj-entity-hero:has(.gsj-entity-hero__credito) .gsj-entity-hero__content {
        padding-top: 48px;
    }
}