/* ============================================================
   INMOBILIARIA HG · Hoja del sitio
   Compartida por index.html, industrial.html, corporativo.html,
   contacto.html y 404.html.

   Todo consume las variables de identidad/hg-tokens.css. Sin
   hexadecimales sueltos: si falta un valor, se agrega al token.
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280.

   Orden del archivo:
     1. Base, accesibilidad y sistema de revelado
     2. Header y footer (iguales en todas las páginas)
     3. Portada: hero con video, bifurcación de líneas
     4. Páginas de línea: cabecera, criterios, inventario
     5. Bloques compartidos: nosotros, ubicación, proceso, contacto
     6. Breakpoints
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--hg-blanco); }
img, video { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:root {
  --hg-header-h: 62px;          /* alto del header fijo en móvil */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hg-header-h) + var(--hg-space-3));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--hg-hielo); color: var(--hg-azul); }

/* Grano fijo sobre toda la página. Los bloques de color plano de 900 px de alto
   que pide la marca se ven a plástico sin una textura mínima encima. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--hg-z-grano);
  pointer-events: none;
  background-image: var(--hg-grano);
  opacity: .035;
}

/* Foco visible global, además del que los tokens dan a .hg-btn */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--hg-electrico);
  outline-offset: 2px;
}

/* Salto al contenido para teclado y lectores de pantalla */
.hg-salto {
  position: absolute;
  left: var(--hg-space-3);
  top: calc(-1 * var(--hg-space-7));
  z-index: var(--hg-z-salto);
  background: var(--hg-blanco);
  color: var(--hg-azul);
  font-family: var(--hg-font-titulo);
  text-transform: uppercase;
  letter-spacing: var(--hg-track-boton);
  padding: var(--hg-space-2) var(--hg-space-3);
  border-radius: var(--hg-radius);
  transition: top var(--hg-dur-corta) ease;
}
.hg-salto:focus { top: var(--hg-space-2); }

.hg-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ritmo vertical. El pie va un poco más alto que la cabeza: simétrico de
   matemáticas se ve descuadrado de ojo. */
.hg-seccion { padding-block: var(--hg-space-8) calc(var(--hg-space-8) + var(--hg-space-4)); }
.hg-seccion--gris { background: var(--hg-fondo); }

/* Sin palabras huérfanas colgando solas al final del titular */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Cifras alineadas en columna: aquí casi todo el contenido son medidas */
.hg-especificaciones td,
.hg-lineas-hero__titulo,
.hg-panel__indice,
.hg-paso__num,
.hg-contador__num,
.hg-footer__tel,
.hg-header__tel,
.hg-dato-directo a,
.hg-etiqueta { font-variant-numeric: tabular-nums; }

/* Respuesta física al clic, no solo al hover */
.hg-btn { transition: background-color var(--hg-dur-corta) var(--hg-ease-entrada),
                      transform var(--hg-dur-corta) var(--hg-ease-entrada),
                      color var(--hg-dur-corta) var(--hg-ease-entrada); }
.hg-btn:active { transform: translateY(0) scale(.985); }

/* --- Etiqueta superior de sección -----------------------------
   Poppins en versalita muy espaciada. No es un titular: es la cota
   que va arriba del dibujo. */
.hg-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--hg-space-3);
  margin: 0 0 var(--hg-space-3);
  font-size: var(--hg-eyebrow);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-grafito);
}
/* El filete de la cota solo cuando cabe en la misma línea que el texto.
   Debajo de 480 px se cuelga solo y parece un error. */
.hg-eyebrow::after { content: none; }
@media (min-width: 480px) {
  .hg-eyebrow::after {
    content: '';
    flex: 0 0 auto;
    width: 56px; height: 1px;
    background: currentColor;
    opacity: .45;
  }
}
.hg-sobre-azul .hg-eyebrow { color: var(--hg-hielo); }

.hg-seccion__intro { margin-bottom: var(--hg-space-6); }
.hg-seccion__intro h2 { margin: 0; }
.hg-seccion__intro p { margin: var(--hg-space-3) 0 0; max-width: 56ch; }

/* ============================================================
   REVELADO AL HACER SCROLL
   Un solo sistema para toda la página, controlado por main.js.
   Sin JS no se esconde nada: la página se ve completa.
   ============================================================ */

.js [data-revelar] { opacity: 0; }
.js [data-revelar="subir"]   { transform: translateY(26px); }
.js [data-revelar="lateral"] { transform: translateX(-26px); }
.js [data-revelar="escala"]  { transform: scale(.97); }
.js [data-revelar].hg-visto {
  opacity: 1;
  transform: none;
  transition: opacity var(--hg-dur-larga) var(--hg-ease-salida) var(--hg-retraso, 0ms),
              transform var(--hg-dur-larga) var(--hg-ease-salida) var(--hg-retraso, 0ms);
}

/* Revelado por máscara: la línea sube desde detrás de un borde, no aparece
   por opacidad. Es lo que hace que un titular se sienta impreso y no montado. */
/* El interlineado de exhibición es .95: las mayúsculas sobresalen de su caja
   de línea y overflow:hidden se las come por arriba. El respiro vertical se
   lo devuelve el padding; el margen negativo evita que el titular crezca. */
.hg-mascara {
  display: block;
  overflow: hidden;
  padding-block: .3em .12em;
  margin-block: -.3em 0;
}
/* La línea con banda es la excepción: su caja de fondo mide ~1.48em (ascenso
   más descenso de Oswald), bastante más que la línea de .95em, así que sin
   este aire el bloque azul hielo tapa el renglón de arriba. */
.hg-mascara--banda { margin-top: 0; }
.hg-mascara > span { display: block; }
.js .hg-mascara > span { transform: translateY(105%); }
.js .hg-mascara.hg-visto > span {
  transform: none;
  transition: transform var(--hg-dur-larga) var(--hg-ease-salida) var(--hg-retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-revelar],
  .js .hg-mascara > span { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   4.1 HEADER FIJO
   Arranca transparente sobre el video y se vuelve bloque sólido
   al salir del hero. Sin cristal esmerilado: la marca es de bloques.
   ============================================================ */

.hg-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--hg-z-header);
  background: transparent;
  transition: background-color var(--hg-dur-media) var(--hg-ease-entrada),
              box-shadow var(--hg-dur-media) var(--hg-ease-entrada);
}

/* Degradado de apoyo mientras el header es transparente: sin él, el logo
   blanco se pierde cuando el dron pasa por el cielo. */
.hg-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--hg-overlay-fuerte), transparent);
  transition: opacity var(--hg-dur-media) var(--hg-ease-entrada);
}
.hg-header[data-fijo="true"] {
  background: var(--hg-azul);
  box-shadow: 0 1px 0 var(--hg-velo-12);
}
.hg-header[data-fijo="true"]::before { opacity: 0; }

/* Barra de progreso de lectura. Nace del scroll, no de un temporizador. */
.hg-progreso {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--hg-hielo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity var(--hg-dur-media) var(--hg-ease-entrada);
}
.hg-header[data-fijo="true"] .hg-progreso { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .hg-progreso { animation: hg-progreso linear; animation-timeline: scroll(root block); }
}
@keyframes hg-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hg-header__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hg-space-2);
  min-height: var(--hg-header-h);
  position: relative;
}

.hg-header__logo { flex: 1 1 auto; display: flex; align-items: center; }
/* El PNG mide 216x104: a 34 px de alto todavía tiene pixeles de sobra para
   pantallas 2x. Por encima de ~52 px se empieza a ver. Ver TODO del vector. */
.hg-header__logo img { height: 34px; width: auto; }

/* El teléfono nunca se colapsa: es el CTA principal en móvil */
.hg-header__tel {
  flex: 0 0 auto;
  padding: var(--hg-space-2) var(--hg-space-3);
  font-size: .8125rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hg-header__tel svg { width: 14px; height: 14px; flex: 0 0 auto; }

.hg-hamburguesa {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hg-velo-35);
  border-radius: var(--hg-radius);
  color: var(--hg-blanco);
  cursor: pointer;
  padding: 0;
}
.hg-hamburguesa__caja { position: relative; width: 20px; height: 14px; }
.hg-hamburguesa__caja span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform var(--hg-dur-corta) var(--hg-ease-entrada), opacity var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-hamburguesa__caja span:nth-child(1) { top: 0; }
.hg-hamburguesa__caja span:nth-child(2) { top: 6px; }
.hg-hamburguesa__caja span:nth-child(3) { top: 12px; }

.hg-hamburguesa[aria-expanded="true"] .hg-hamburguesa__caja span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hg-hamburguesa[aria-expanded="true"] .hg-hamburguesa__caja span:nth-child(2) { opacity: 0; }
.hg-hamburguesa[aria-expanded="true"] .hg-hamburguesa__caja span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel desplegable: se anima con grid-template-rows, no con max-height */
.hg-nav {
  order: 3;
  flex: 1 0 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-nav[data-abierto="true"] { grid-template-rows: 1fr; }
.hg-nav > ul { overflow: hidden; }

.hg-nav a {
  display: block;
  position: relative;
  padding: var(--hg-space-3) 0;
  color: var(--hg-blanco);
  font-size: var(--hg-body);
  text-decoration: none;
  border-bottom: 1px solid var(--hg-velo-12);
  transition: color var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-nav li:last-child a { border-bottom: 0; padding-bottom: var(--hg-space-4); }
.hg-nav a:hover { color: var(--hg-hielo); }
/* Sección activa. Va en azul hielo y no en rojo: rojo sobre azul da 2.66:1
   y no pasa ni tratándolo como gráfico. */
.hg-nav a[aria-current="true"] { color: var(--hg-hielo); }

/* Cuando el menú de móvil está abierto el header necesita fondo sí o sí:
   bloque sólido, no el degradado que usa mientras flota sobre el video. */
.hg-header:has(.hg-nav[data-abierto="true"]) { background: var(--hg-azul); }
.hg-header:has(.hg-nav[data-abierto="true"])::before { opacity: 0; }

/* ============================================================
   4.2 HERO · video del dron + corte diagonal
   ============================================================ */

.hg-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-top: calc(var(--hg-header-h) + var(--hg-space-4));
  background: var(--hg-azul-profundo);
  color: var(--hg-blanco);
}

/* Los tokens resuelven la veladura del hero con un ::before de color plano al
   78 %. Aquí hace falta un degradado sobre video —plano deja el pie de cifras
   ilegible cuando el dron sube al cielo—, así que la veladura pasa a ser una
   capa propia y el pseudo se apaga. El 78 % del manual se conserva. */
.hg-hero::before { content: none; }

.hg-hero__pelicula {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.hg-hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* La entrada del plano: arranca ligeramente ampliado y se asienta. */
.js .hg-hero__pelicula { animation: hg-asentar 2.4s var(--hg-ease-salida) both; }
@keyframes hg-asentar { from { transform: scale(1.09); } to { transform: none; } }

/* Capa 1 · veladura. Plana al 78 % en el cuerpo, más cerrada abajo para que
   la barra de cifras siempre tenga contraste. */
.hg-hero__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to bottom,
      var(--hg-overlay-fuerte) 0%,
      var(--hg-overlay) 26%,
      var(--hg-overlay) 55%,
      var(--hg-overlay-fuerte) 92%);
}

/* Capa 2 · la cuña. Es la firma visual de la marca: corte inclinado entre la
   veladura y la fotografía. En móvil no cabe de pie, así que se acuesta.
   Va con clip-path y no con skew + desbordamiento: una caja que se sale del
   hero sigue existiendo para el cálculo de rectángulos aunque overflow la
   recorte, y acaba contando como fondo de la sección de abajo. */
.hg-hero__cuna {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--hg-azul-profundo);
  clip-path: polygon(0 47%, 100% 41%, 100% 100%, 0 100%);
}
.js .hg-hero__cuna { animation: hg-cuna 1.1s var(--hg-ease-salida) .1s both; }
@keyframes hg-cuna { from { opacity: 0; transform: translateY(3%); } to { opacity: 1; transform: none; } }

.hg-hero__contenido {
  position: relative;
  align-self: center;
  padding-block: var(--hg-space-4) var(--hg-space-5);
  width: 100%;
}
.hg-hero .hg-eyebrow { color: var(--hg-hielo); }

.hg-hero h1 {
  margin: 0 0 var(--hg-space-4);
  font-size: var(--hg-display);
  line-height: var(--hg-lh-display);
  color: var(--hg-blanco);
  /* 16ch es la medida que deja "PARA TU NEGOCIO" con su banda en un solo
     renglón en todos los anchos, y a la vez fuerza el corte en tres líneas
     que pide el brief. Con 15ch la banda parte en dos. */
  max-width: 16ch;
}
/* La banda va en línea, no en bloque: si la frase parte en dos renglones cada
   uno se lleva su propia banda en vez de quedar un rectángulo con el texto
   flotando adentro. */
.hg-hero h1 .hg-clave--banda {
  display: inline;
  padding: 0 var(--hg-space-2) .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (min-width: 480px) { .hg-hero h1 .hg-clave--banda { padding-inline: var(--hg-space-3); } }

/* Y no aparece de golpe: se dibuja de izquierda a derecha detrás de la
   palabra, como el trazo de un plumón. */
.js .hg-hero h1 .hg-clave--banda {
  background-color: transparent;
  background-image: linear-gradient(var(--hg-hielo), var(--hg-hielo));
  background-repeat: no-repeat;
  background-size: 0 100%;
}
.js .hg-hero h1 .hg-mascara.hg-visto .hg-clave--banda {
  background-size: 100% 100%;
  transition: background-size .55s var(--hg-ease-salida) .58s;
}
@media (prefers-reduced-motion: reduce) {
  .js .hg-hero h1 .hg-clave--banda { background-size: 100% 100%; }
}

.hg-hero__sub {
  margin: 0 0 var(--hg-space-5);
  max-width: 44ch;
  color: var(--hg-hielo);
  font-weight: 300;
  font-size: 1.0625rem;
}

.hg-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hg-space-3);
}
.hg-hero__ctas .hg-btn { flex: 1 1 auto; }

/* --- Pie del hero: barra de bifurcación a todo el ancho -------- */
.hg-hero__pie {
  position: relative;
  border-top: 1px solid var(--hg-velo-22);
  background: color-mix(in srgb, var(--hg-azul-profundo) 55%, transparent);
}
.hg-hero__pie-fila {
  display: flex;
  flex-direction: column;
  padding-top: var(--hg-space-3);
}

/* Señal de scroll: un filete con un segmento que baja. Sin flechitas ni ratones. */
.hg-scroll {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  width: 1px; height: 52px;
  margin-left: var(--hg-space-5);
  background: var(--hg-velo-22);
  overflow: hidden;
  position: relative;
}
.hg-scroll::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background: var(--hg-hielo);
  animation: hg-scroll 2.2s var(--hg-ease-entrada) infinite;
}
@keyframes hg-scroll {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(300%); }
}


/* ============================================================
   4.3 PROPIEDADES · pila pegajosa
   Tres tarjetas iguales en fila es el patrón más repetido que existe.
   Aquí cada propiedad ocupa un panel completo y el siguiente se monta
   encima al hacer scroll: una ficha sobre otra, como se revisan en papel.
   ============================================================ */

.hg-props { position: relative; }

.hg-pila { display: grid; gap: var(--hg-space-5); }

.hg-panel {
  position: relative;
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  display: grid;
  overflow: hidden;
}

.hg-panel__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hg-azul);
}
.hg-panel__media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hg-ease-salida);
}
.hg-panel:hover .hg-panel__media > img { transform: scale(1.035); }

.hg-panel__cuerpo {
  display: flex;
  flex-direction: column;
  padding: var(--hg-space-5) var(--hg-space-4) var(--hg-space-5);
  position: relative;
}

/* Índice de la ficha, no decoración: son tres y se sabe en cuál vas. */
.hg-panel__indice {
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  /* Acero sobre blanco da 2.06:1 y no se lee. Grafito da 10.12:1. */
  color: var(--hg-grafito);
  margin-bottom: var(--hg-space-3);
}
.hg-panel__indice b { color: var(--hg-rojo); font-weight: 500; }

/* El título de ficha bajó de h3 a h4 al aparecer el encabezado de línea, que
   ahora ocupa el h3. Los tokens dan a h4 Poppins en caja baja, así que aquí
   se recupera el tratamiento de titular. */
.hg-panel h3,
.hg-panel h4 {
  margin: 0 0 var(--hg-space-3);
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-h3);
  font-weight: 500;
  line-height: var(--hg-lh-titulo);
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-azul);
}
/* Regla roja de 32 px bajo el título, como manda el manual */
.hg-panel h3::after,
.hg-panel h4::after {
  content: '';
  display: block;
  width: 32px; height: 3px;
  margin-top: var(--hg-space-3);
  background: var(--hg-rojo);
}
.hg-panel__pie-texto { margin: 0 0 var(--hg-space-4); max-width: 46ch; }

.hg-panel__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hg-space-2);
  margin-bottom: var(--hg-space-5);
}
.hg-panel__datos .hg-etiqueta {
  color: var(--hg-grafito);
  background: var(--hg-fondo);
  border-color: var(--hg-linea);
}

/* El CTA se ancla abajo: las listas tienen 5/4/4 datos y si no, los enlaces
   quedan a alturas distintas entre paneles. */
.hg-panel__acciones {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hg-space-4);
}

.hg-enlace-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  font-family: var(--hg-font-titulo);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hg-azul);
  border-bottom: 2px solid var(--hg-rojo);
  padding-bottom: var(--hg-space-1);
}
.hg-enlace-cta svg {
  width: 15px; height: 15px;
  transition: transform var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-enlace-cta:hover svg { transform: translateX(5px); }
.hg-enlace-cta:hover { color: var(--hg-azul-profundo); }

.hg-enlace-sec {
  font-size: var(--hg-small);
  color: var(--hg-grafito);
  text-decoration: none;
  border-bottom: 1px solid var(--hg-linea);
  padding-bottom: 2px;
}
.hg-enlace-sec:hover { color: var(--hg-azul); border-bottom-color: var(--hg-azul); }

/* Tira de fotos secundarias del mismo inmueble (solo Altus tiene material) */
.hg-tira {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hg-linea);
  border-top: 1px solid var(--hg-linea);
}
.hg-tira li { position: relative; background: var(--hg-blanco); }
.hg-tira img {
  width: 100%;
  /* Los atributos width/height del HTML entran como hint de presentación y
     ganan sobre aspect-ratio: sin este height:auto la foto se queda a 533 px
     fijos. Los atributos siguen, que son los que evitan el salto de layout. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Los interiores están tirados desde la puerta: el encuadre útil está
     abajo del centro, en el piso y el ventanal, no en el plafón. */
  object-position: center 64%;
}
.hg-tira span {
  display: block;
  padding: var(--hg-space-2) var(--hg-space-3) var(--hg-space-3);
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-grafito);
}
/* En móvil, tres columnas dejan miniaturas de 100 px donde no se distingue
   una planta de oficina de un plafón. Se convierte en tira deslizable. */
@media (max-width: 767.98px) {
  .hg-tira {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--hg-space-4);
  }
  .hg-tira li { scroll-snap-align: start; }
  .hg-tira span { min-height: 3.2em; }
}

/* Placeholder de foto pendiente. Trama de plano técnico: se lee como una
   lámina sin imprimir, no como un hueco. Ver TODO en cada panel. */
.hg-ph {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--hg-azul);
  overflow: hidden;
}
.hg-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hg-velo-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--hg-velo-08) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
}
.hg-ph::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(to bottom right, transparent 49.6%, var(--hg-velo-12) 49.6%, var(--hg-velo-12) 50.2%, transparent 50.2%);
}
/* Segunda variante: retícula más abierta y diagonal al revés. Dos láminas
   idénticas seguidas se leen como un error de copiado. */
.hg-ph--b::before { background-size: 58px 58px; }
.hg-ph--b::after { background-image: linear-gradient(to bottom left, transparent 49.6%, var(--hg-velo-12) 49.6%, var(--hg-velo-12) 50.2%, transparent 50.2%); }
.hg-ph__texto {
  position: relative;
  z-index: 1;
  padding: var(--hg-space-3) var(--hg-space-4);
  border: 1px solid var(--hg-velo-35);
  font-size: var(--hg-small);
  font-weight: 300;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
  text-align: center;
  background: color-mix(in srgb, var(--hg-azul) 70%, transparent);
}

/* ============================================================
   4.4 POR QUÉ HG
   Lista con filetes en vez de cuatro tarjetas iguales con ícono arriba:
   se lee como ficha técnica, que es el idioma del cliente.
   ============================================================ */

.hg-porque { display: grid; gap: var(--hg-space-5); }
.hg-porque__cabeza h2 { margin: 0; }
.hg-porque__cabeza p { margin: var(--hg-space-3) 0 0; max-width: 34ch; }
.hg-porque__cabeza .hg-btn { margin-top: var(--hg-space-5); }

.hg-razon {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--hg-space-4);
  row-gap: var(--hg-space-1);
  padding-block: var(--hg-space-4);
  border-top: 1px solid var(--hg-linea);
  transition: border-color var(--hg-dur-media) var(--hg-ease-entrada);
}
.hg-razon:last-child { border-bottom: 1px solid var(--hg-linea); }
.hg-razon__icono {
  grid-row: span 2;
  width: 34px; height: 34px;
  margin-top: 4px;
  color: var(--hg-azul);
}
/* Los íconos se dibujan al entrar. pathLength="1" normaliza trazos de
   longitudes distintas para que los cuatro tarden lo mismo. */
.js .hg-razon__icono path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hg-razon.hg-visto .hg-razon__icono path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--hg-ease-salida) var(--hg-retraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .hg-razon__icono path { stroke-dashoffset: 0; }
}
.hg-razon h3 {
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
  margin: 0;
}
.hg-razon p { margin: 0; }

/* ============================================================
   4.5 UBICACIÓN
   ============================================================ */

.hg-ubicacion-sec {
  position: relative;
  background: var(--hg-azul);
  color: var(--hg-hielo);
  overflow: clip;
}
.hg-ubicacion-sec h2 { color: var(--hg-blanco); }

/* Corte diagonal en el borde superior: la sección azul entra en cuña y no
   como un rectángulo pegado. */
.hg-ubicacion-sec::before {
  content: '';
  position: absolute;
  left: -5%; right: -5%; top: calc(-1 * var(--hg-space-5));
  height: var(--hg-space-6);
  background: var(--hg-azul);
  transform: skewY(-2deg);
}

.hg-ubicacion { display: grid; gap: var(--hg-space-6); position: relative; }
.hg-ubicacion h2 { margin: 0 0 var(--hg-space-4); }
.hg-ubicacion__texto p { margin: 0 0 var(--hg-space-4); color: var(--hg-hielo); max-width: 44ch; }
.hg-ubicacion__lista { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); }

/* Foto arriba, mapa abajo, dentro de un mismo marco. El argumento de
   ubicación necesita las dos cosas: cómo se ve la zona y dónde está. */
.hg-ubicacion__media {
  display: grid;
  gap: 1px;
  background: var(--hg-velo-22);
  border: 1px solid var(--hg-velo-22);
}

.hg-mapa {
  aspect-ratio: 16 / 10;
  background: var(--hg-azul-profundo);
  overflow: hidden;
}
.hg-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Bloque de zona dentro del argumento de ubicación */
.hg-zona { margin-top: var(--hg-space-4); }
.hg-zona h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hg-space-3);
  margin: 0 0 var(--hg-space-3);
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
  color: var(--hg-blanco);
}
.hg-zona h3 span {
  font-family: var(--hg-font-texto);
  font-size: var(--hg-eyebrow);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  color: var(--hg-hielo);
  padding: var(--hg-space-1) var(--hg-space-3);
  border: 1px solid var(--hg-velo-35);
  border-radius: var(--hg-radius-tag);
}

/* Cada pieza del bloque de medios dice a qué zona pertenece. Sin el pie,
   una foto de Tampico junto a un mapa de Altamira se lee como un error. */
.hg-mapa-fig { margin: 0; }
.hg-ubicacion__foto { margin: 0; position: relative; }
.hg-mapa-fig figcaption {
  padding: var(--hg-space-2) var(--hg-space-3);
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-hielo);
  background: var(--hg-azul-profundo);
}
.hg-mapa-fig figcaption b,
.hg-ubicacion__foto figcaption b {
  font-weight: 500;
  color: var(--hg-blanco);
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  font-size: var(--hg-eyebrow);
}
.hg-ubicacion__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 58%;
}
/* Mismo pie en la foto y en el mapa: son dos fichas de la misma tabla, no
   una imagen con rótulo encima y otra con rótulo debajo. */
.hg-ubicacion__foto figcaption {
  padding: var(--hg-space-2) var(--hg-space-3);
  background: var(--hg-azul-profundo);
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-hielo);
}

/* Pin rojo sobre pastilla blanca: rojo directo sobre azul da 2.66:1 y no pasa
   ni como gráfico. Además rompe la fila de pastillas idénticas. */
.hg-etiqueta--pin {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  background: var(--hg-blanco);
  border-color: var(--hg-blanco);
}
.hg-sobre-azul .hg-etiqueta--pin { color: var(--hg-azul); background: var(--hg-blanco); }
.hg-etiqueta--pin svg { width: 14px; height: 14px; color: var(--hg-rojo); }

/* ============================================================
   4.6 PROCESO
   Los números aquí sí significan algo: es una secuencia. El contador
   se queda fijo mientras los pasos pasan, para no perder de vista
   en cuál vas.
   ============================================================ */

.hg-proceso__rejilla { display: grid; gap: var(--hg-space-5); }

.hg-contador { display: none; }

.hg-pasos { display: grid; }

.hg-paso {
  position: relative;
  border-top: 2px solid var(--hg-azul);
  padding: var(--hg-space-5) 0 var(--hg-space-4);
  transition: opacity var(--hg-dur-media) var(--hg-ease-entrada);
}
.hg-paso__num {
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-52%);
  padding-right: var(--hg-space-3);
  background: var(--hg-blanco);
  font-family: var(--hg-font-titulo);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--hg-azul);
}
.hg-paso h3 {
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
  margin: 0 0 var(--hg-space-2);
}
.hg-paso p { margin: 0; max-width: 42ch; }

/* ============================================================
   4.7 CONTACTO
   ============================================================ */

.hg-contacto {
  background: var(--hg-azul-profundo);
  color: var(--hg-hielo);
  position: relative;
  overflow: clip;
}
.hg-contacto h2 { color: var(--hg-blanco); margin: 0 0 var(--hg-space-3); }
.hg-contacto__rejilla { display: grid; gap: var(--hg-space-6); }

.hg-form__filas { display: grid; gap: 0 var(--hg-space-4); }

.hg-campo { margin-bottom: var(--hg-space-4); }
.hg-campo label {
  display: block;
  margin-bottom: var(--hg-space-2);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hg-blanco);
}
.hg-campo input,
.hg-campo select,
.hg-campo textarea {
  width: 100%;
  font-family: var(--hg-font-texto);
  font-size: var(--hg-body);
  color: var(--hg-blanco);
  background: var(--hg-velo-08);
  border: 0;
  border-bottom: 1px solid var(--hg-velo-35);
  border-radius: var(--hg-radius) var(--hg-radius) 0 0;
  padding: var(--hg-space-3);
  transition: background-color var(--hg-dur-corta) var(--hg-ease-entrada),
              border-color var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-campo input:hover,
.hg-campo select:hover,
.hg-campo textarea:hover { background: var(--hg-velo-12); }
.hg-campo input:focus,
.hg-campo select:focus,
.hg-campo textarea:focus { border-bottom-color: var(--hg-hielo); background: var(--hg-velo-12); }
.hg-campo textarea { resize: vertical; min-height: 118px; }
.hg-campo select { appearance: none; background-image: none; }
.hg-campo select option { color: var(--hg-texto); background: var(--hg-blanco); }
.hg-campo select optgroup { color: var(--hg-azul); background: var(--hg-blanco); font-weight: 600; }
.hg-campo input::placeholder,
.hg-campo textarea::placeholder { color: var(--hg-acero); }

/* Selector con su propia flecha: la nativa se pinta gris del sistema y
   rompe el bloque. */
.hg-select { position: relative; }
.hg-select svg {
  position: absolute;
  right: var(--hg-space-3);
  bottom: 18px;
  width: 12px; height: 12px;
  color: var(--hg-hielo);
  pointer-events: none;
}

/* Error. El aviso va en blanco con un filete rojo al costado: rojo sobre
   azul profundo es ilegible, pero como barra sí comunica. */
.hg-campo [aria-invalid="true"] { border-bottom-color: var(--hg-rojo); }
.hg-campo__error {
  display: none;
  margin: var(--hg-space-2) 0 0;
  padding-left: var(--hg-space-3);
  border-left: 3px solid var(--hg-rojo);
  font-size: var(--hg-small);
  font-weight: 400;
  color: var(--hg-blanco);
}
.hg-campo--error .hg-campo__error { display: block; }

.hg-form__pie { margin: var(--hg-space-3) 0 0; font-size: var(--hg-small); font-weight: 300; }
.hg-form__estado:not(:empty) {
  margin-top: var(--hg-space-3);
  padding: var(--hg-space-3);
  border-left: 3px solid var(--hg-hielo);
  background: var(--hg-velo-08);
  color: var(--hg-blanco);
}

.hg-datos-directos { display: grid; gap: var(--hg-space-5); align-content: start; }
@media (min-width: 768px) {
  /* La columna de datos es más corta que el formulario: si no acompaña,
     deja un hueco de media pantalla al lado del campo de mensaje. */
  .hg-datos-directos {
    position: sticky;
    /* align-self: start es lo que hace que funcione: como ítem de rejilla se
       estira al alto de la fila y entonces no le queda recorrido para pegarse. */
    align-self: start;
    top: calc(var(--hg-header-h) + var(--hg-space-6));
  }
}
.hg-dato-directo { padding-top: var(--hg-space-4); border-top: 1px solid var(--hg-velo-12); }
.hg-dato-directo h2,
.hg-dato-directo h3 {
  font-size: var(--hg-small);
  font-family: var(--hg-font-texto);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
  margin: 0 0 var(--hg-space-2);
}
.hg-dato-directo a {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  font-family: var(--hg-font-titulo);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  color: var(--hg-blanco);
  text-decoration: none;
  transition: color var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-dato-directo a:hover { color: var(--hg-hielo); }
.hg-dato-directo a svg { width: 20px; height: 20px; color: var(--hg-hielo); }
.hg-dato-directo p { margin: var(--hg-space-1) 0 0; font-size: var(--hg-small); font-weight: 300; }

/* ============================================================
   4.8 FOOTER
   ============================================================ */

.hg-footer {
  background: var(--hg-azul-profundo);
  color: var(--hg-hielo);
  border-top: 1px solid var(--hg-velo-12);
  padding-block: var(--hg-space-7) var(--hg-space-4);
}
.hg-footer__cols { display: grid; gap: var(--hg-space-6); }
.hg-footer img { height: 44px; width: auto; }
.hg-footer__claim { margin: var(--hg-space-4) 0 0; max-width: 30ch; font-size: var(--hg-small); font-weight: 300; }
.hg-footer h2 {
  font-size: var(--hg-small);
  font-family: var(--hg-font-texto);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
  margin: 0 0 var(--hg-space-3);
}
.hg-footer nav ul { display: grid; gap: var(--hg-space-2); }
.hg-footer nav a { color: var(--hg-hielo); text-decoration: none; font-size: var(--hg-body); }
.hg-footer nav a:hover { color: var(--hg-blanco); text-decoration: underline; }
.hg-footer__tel {
  display: block;
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-display-2);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--hg-track-titulo);
  color: var(--hg-blanco);
  text-decoration: none;
  transition: color var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-footer__tel:hover { color: var(--hg-hielo); }
.hg-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  margin-top: var(--hg-space-3);
  color: var(--hg-hielo);
  font-size: var(--hg-small);
  text-decoration: none;
  border-bottom: 1px solid var(--hg-velo-35);
  padding-bottom: 2px;
}
.hg-footer__wa:hover { color: var(--hg-blanco); }
.hg-footer__wa svg { width: 15px; height: 15px; }
.hg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hg-space-2) var(--hg-space-5);
  margin: var(--hg-space-6) 0 0;
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-velo-12);
  font-size: var(--hg-small);
  font-weight: 300;
}
.hg-footer__legal p { margin: 0; }
.hg-footer__legal a { color: var(--hg-hielo); text-decoration: underline; text-underline-offset: 3px; }
.hg-footer__legal a:hover { color: var(--hg-blanco); }

/* ============================================================
   BREAKPOINT 480
   ============================================================ */
@media (min-width: 480px) {
  .hg-hero__ctas .hg-btn { flex: 0 0 auto; }
}

/* ============================================================
   BREAKPOINT 768 · nav en línea, cuña de pie, paneles a dos columnas
   ============================================================ */
@media (min-width: 768px) {
  :root { --hg-header-h: 76px; }

  .hg-header__barra { flex-wrap: nowrap; }
  .hg-header__logo img { height: 40px; }
  .hg-header__tel {
    padding: var(--hg-space-2) var(--hg-space-3);
    font-size: .875rem;
    order: 3;
  }

  /* La cuña se pone de pie: bloque inclinado a la izquierda, video a la derecha */
  .hg-hero__cuna { clip-path: polygon(0 0, 78% 0, 62% 100%, 0 100%); }
  @keyframes hg-cuna {
    from { opacity: 0; transform: translateX(-3%); }
    to   { opacity: 1; transform: none; }
  }
  /* Con la cuña de pie, el video queda de un solo lado y el texto nunca lo
     pisa: la veladura puede abrirse para que el plano del dron se vea. */
  .hg-hero__velo {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--hg-azul-profundo) 72%, transparent) 0%,
      color-mix(in srgb, var(--hg-azul) 34%, transparent) 28%,
      color-mix(in srgb, var(--hg-azul) 38%, transparent) 60%,
      color-mix(in srgb, var(--hg-azul-profundo) 84%, transparent) 100%);
  }

  .hg-hero__contenido > * { max-width: 68%; }
  .hg-hero__pie-fila { flex-direction: row; align-items: center; position: relative; padding-top: 0; }  .hg-scroll { display: block; }

  .hg-panel { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hg-panel__media { aspect-ratio: auto; min-height: 340px; }
  .hg-panel__cuerpo { padding: var(--hg-space-6) var(--hg-space-5); }
  /* Se alterna el lado de la foto para que la pila no sea el mismo cartel
     repetido tres veces. */
  .hg-panel:nth-child(even) .hg-panel__media { order: 2; }

  .hg-ubicacion { grid-template-columns: 1fr 1fr; align-items: center; }
  /* En tableta el contador todavía no aparece, así que los pasos se reparten
     en dos columnas y no dejan media rejilla vacía. */
  .hg-pasos { grid-template-columns: repeat(2, 1fr); column-gap: var(--hg-space-6); }
  .hg-contacto__rejilla { grid-template-columns: 1.15fr .85fr; gap: var(--hg-space-7); }
  .hg-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BREAKPOINT 1024 · pila pegajosa, encabezados partidos
   ============================================================ */
@media (min-width: 1024px) {
  /* Justo el aire necesario para que la barra de cifras siga entrando en un
     portátil de 900 px de alto: es el dato que cierra la venta. */
  .hg-hero { padding-top: calc(var(--hg-header-h) + var(--hg-space-5)); }
  .hg-hero__contenido > * { max-width: 54%; }
  .hg-hero__cuna { clip-path: polygon(0 0, 74% 0, 58% 100%, 0 100%); }

  .hg-panel { grid-template-columns: 1.08fr 1fr; }
  .hg-panel__media { min-height: 460px; }
  .hg-panel__cuerpo { padding: var(--hg-space-7) var(--hg-space-6); }

  /* Encabezado a un lado, lista al otro. Y el encabezado se queda fijo
     mientras pasan las razones. */
  .hg-porque { grid-template-columns: 1fr 1.7fr; gap: var(--hg-space-7); align-items: start; }
  .hg-porque__cabeza {
    position: sticky;
    top: calc(var(--hg-header-h) + var(--hg-space-6));
  }

  .hg-ubicacion { gap: var(--hg-space-7); grid-template-columns: .85fr 1.15fr; }

  /* Contador fijo del proceso */
  .hg-proceso__rejilla { grid-template-columns: .8fr 1.2fr; column-gap: var(--hg-space-7); }
  .hg-contador {
    display: block;
    position: sticky;
    top: 28vh;
    align-self: start;
  }
  .hg-contador__pila { position: relative; height: var(--hg-cifra-xl); }
  .hg-contador__num {
    position: absolute;
    inset: 0;
    font-family: var(--hg-font-titulo);
    font-weight: 700;
    font-size: var(--hg-cifra-xl);
    line-height: 1;
    color: var(--hg-azul);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--hg-dur-media) var(--hg-ease-salida),
                transform var(--hg-dur-media) var(--hg-ease-salida);
  }
  .hg-contador__num[data-activo="true"] { opacity: 1; transform: none; }
  .hg-contador__riel {
    width: 2px;
    height: 120px;
    margin-top: var(--hg-space-4);
    background: var(--hg-linea);
  }
  .hg-contador__barra {
    display: block;
    width: 100%;
    height: 25%;
    background: var(--hg-rojo);
    transition: transform var(--hg-dur-larga) var(--hg-ease-salida);
  }
  .hg-contador__etiqueta {
    margin: var(--hg-space-3) 0 0;
    font-size: var(--hg-small);
    font-weight: 300;
  }

  /* Dos campos por renglón solo aquí: en tableta la columna del formulario
     mide ~380 px y el selector corta su propia etiqueta. */
  .hg-form__filas { grid-template-columns: 1fr 1fr; }
  .hg-form__filas .hg-campo--ancho { grid-column: 1 / -1; }

  .hg-pasos { grid-template-columns: 1fr; gap: 0; }
  .hg-paso { padding-block: var(--hg-space-5); }
  .hg-paso__num { display: none; }
  /* Los pasos que ya pasaron o no han llegado bajan de intensidad, pero no
     tanto: a 0.45 el texto cae a 2.17:1 y deja de ser ilegible. A 0.82 el
     párrafo conserva 4.74:1 sobre el gris de sección y 5.05:1 sobre blanco,
     que son los dos fondos donde vive el proceso. (0.78 pasaba en blanco
     pero se quedaba en 4.30 sobre el gris.) */
  .hg-proceso__rejilla[data-paso] .hg-paso { opacity: .82; }
  .hg-proceso__rejilla[data-paso] .hg-paso[data-activo="true"] { opacity: 1; }

  .hg-footer__cols { grid-template-columns: 1.3fr 1fr 1.1fr; }
}

/* Pila pegajosa: solo con alto suficiente. En pantallas bajas el panel no
   cabe y el efecto se vuelve una trampa de scroll. */
@media (min-width: 1024px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .hg-pila { gap: var(--hg-space-6); }
  .hg-panel {
    position: sticky;
    top: calc(var(--hg-header-h) + var(--hg-space-4));
    box-shadow: var(--hg-shadow-panel);
  }
}

/* ============================================================
   BREAKPOINT 1280
   ============================================================ */
@media (min-width: 1280px) {
  .hg-hero__contenido > * { max-width: 50%; }
  .hg-hero__cuna { clip-path: polygon(0 0, 70% 0, 54% 100%, 0 100%); }
  .hg-panel__cuerpo { padding: var(--hg-space-7); }
}

/* ============================================================
   NAVEGACIÓN DE SITIO
   La página actual se marca con aria-current="page" en el HTML.
   Antes esto era una landing con anclas y bastaba "true"; ahora hay
   páginas de verdad y el valor correcto es "page".
   ============================================================ */

.hg-nav a[aria-current="page"] { color: var(--hg-hielo); }

/* ============================================================
   PORTADA · bifurcación de líneas en el pie del hero
   Las dos líneas de negocio son la primera decisión del visitante,
   así que ocupan la barra inferior del hero y son enlaces, no adorno.
   Aquí no va el dato de ningún inmueble concreto: eso vive en su ficha.
   ============================================================ */

.hg-lineas-hero {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.hg-lineas-hero li { border-bottom: 1px solid var(--hg-velo-12); }
.hg-lineas-hero li:last-child { border-bottom: 0; }

.hg-lineas-hero a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--hg-space-3);
  padding: var(--hg-space-3) 0;
  text-decoration: none;
  color: var(--hg-blanco);
  transition: opacity var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-lineas-hero a:hover { opacity: .78; }
.hg-lineas-hero__num {
  grid-column: 1 / -1;
  font-size: var(--hg-eyebrow);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
}
.hg-lineas-hero__titulo {
  font-family: var(--hg-font-titulo);
  font-weight: 500;
  font-size: var(--hg-cifra);
  line-height: 1.1;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
}
.hg-lineas-hero__desc {
  grid-column: 1;
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-hielo);
}
.hg-lineas-hero svg {
  grid-row: 2 / 4;
  grid-column: 2;
  width: 22px; height: 22px;
  transition: transform var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-lineas-hero a:hover svg { transform: translateX(6px); }

/* ============================================================
   PÁGINA DE LÍNEA · cabecera
   No es un hero de portada: no ocupa la pantalla completa ni lleva
   video. Su trabajo es situar en qué línea estás y con qué criterios
   se trabaja, y dejar el inventario a la vista rápido.
   ============================================================ */

.hg-cabecera {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--hg-azul);
  color: var(--hg-blanco);
  margin-top: var(--hg-header-h);
  padding-block: var(--hg-space-8) var(--hg-space-7);
}
.hg-cabecera__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hg-cabecera__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Veladura del manual: 78 % sobre la fotografía. */
.hg-cabecera__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hg-overlay);
}
/* Corte diagonal, la firma de la marca, también aquí pero más contenido
   que en la portada: es una página de trabajo, no un cartel. */
.hg-cabecera::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hg-azul-profundo);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 62%);
  opacity: .92;
}
.hg-cabecera .hg-eyebrow { color: var(--hg-hielo); }
.hg-cabecera h1 {
  margin: 0 0 var(--hg-space-4);
  font-size: var(--hg-display-2);
  line-height: var(--hg-lh-display);
  color: var(--hg-blanco);
  max-width: 18ch;
}
.hg-cabecera__intro {
  margin: 0 0 var(--hg-space-5);
  max-width: 52ch;
  color: var(--hg-hielo);
  font-weight: 300;
  font-size: 1.0625rem;
}
.hg-cabecera__ctas { display: flex; flex-wrap: wrap; gap: var(--hg-space-3); }

/* Migas: en un sitio de varias páginas hay que poder volver. */
.hg-migas { margin-bottom: var(--hg-space-4); font-size: var(--hg-small); }
.hg-migas ol { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); }
.hg-migas li::after { content: '·'; margin-left: var(--hg-space-2); opacity: .5; }
.hg-migas li:last-child::after { content: none; }
.hg-migas a { color: var(--hg-hielo); text-decoration: underline; text-underline-offset: 3px; }
.hg-migas a:hover { color: var(--hg-blanco); }
.hg-migas [aria-current="page"] { color: var(--hg-blanco); }

/* ============================================================
   CRITERIOS
   Lo que se revisa al buscar en esta línea. Es la parte que le habla
   al director de operaciones: cotas, no adjetivos. Cambia por línea,
   porque a una oficina no se le mide el patio de maniobras.
   ============================================================ */

.hg-criterios { display: grid; gap: var(--hg-space-5); }
.hg-criterios__lista { display: grid; gap: 0; }
.hg-criterio {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--hg-space-4);
  row-gap: var(--hg-space-1);
  padding-block: var(--hg-space-4);
  border-top: 1px solid var(--hg-linea);
}
.hg-criterio:last-child { border-bottom: 1px solid var(--hg-linea); }
.hg-criterio__clave {
  grid-row: span 2;
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
  /* Acero sobre el gris de sección da 1.78:1. Grafito da 9.25:1. */
  color: var(--hg-grafito);
  padding-top: 3px;
  min-width: 2.5ch;
}
.hg-criterio h3 {
  margin: 0;
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
}
.hg-criterio p { margin: 0; }

/* ============================================================
   LISTADO DE PROPIEDADES
   Tarjetas que llevan a la ficha completa. El patrón de tarjeta es el
   que espera quien busca inmueble; lo que lo saca de lo genérico es que
   cada una lleva su clave de inventario, su sello de operación y tres
   cotas reales, no un párrafo de relleno.
   ============================================================ */

.hg-tarjetas { display: grid; gap: var(--hg-space-5); }

.hg-tarjeta-prop {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  transition: box-shadow var(--hg-dur-media) var(--hg-ease-salida),
              transform var(--hg-dur-media) var(--hg-ease-salida),
              border-color var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-tarjeta-prop:hover {
  box-shadow: var(--hg-shadow-alta);
  transform: translateY(-4px);
  border-color: var(--hg-acero);
}
/* Foco visible en la tarjeta entera, no solo en el enlace: el área
   pinchable es toda la tarjeta (ver el ::after del título). */
.hg-tarjeta-prop:focus-within {
  outline: 3px solid var(--hg-electrico);
  outline-offset: 2px;
}

.hg-tarjeta-prop__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hg-azul);
}
.hg-tarjeta-prop__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--hg-ease-salida); }
.hg-tarjeta-prop:hover .hg-tarjeta-prop__media > img { transform: scale(1.04); }

/* Sello de operación. Todo el portafolio es renta; el sello está igual
   porque el visitante no tiene por qué asumirlo. */
.hg-sello {
  position: absolute;
  left: 0; top: var(--hg-space-4);
  z-index: 1;
  padding: var(--hg-space-1) var(--hg-space-3);
  background: var(--hg-rojo);
  color: var(--hg-blanco);
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
}

/* Los anuncios sincronizados desde Google Ads no llevan sello de operación:
   no son inventario curado, son campaña viva. Azul y no rojo, porque el rojo
   está presupuestado como acento y ya lo gastan el CTA y la clave. */
.hg-sello--anuncio {
  background: var(--hg-azul);
  color: var(--hg-blanco);
}

.hg-tarjeta-prop__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--hg-space-4);
}
.hg-clave-inv {
  margin: 0 0 var(--hg-space-2);
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
  color: var(--hg-grafito);
}
.hg-clave-inv b { color: var(--hg-rojo); font-weight: 500; }

.hg-tarjeta-prop h3 {
  margin: 0 0 var(--hg-space-3);
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
}
/* Toda la tarjeta es pinchable sin anidar enlaces ni romper el foco:
   el enlace del título se estira por encima con un pseudo-elemento. */
.hg-tarjeta-prop h3 a { color: inherit; text-decoration: none; }
.hg-tarjeta-prop h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.hg-tarjeta-prop h3 a:focus-visible { outline: none; }

.hg-tarjeta-prop__resumen { margin: 0 0 var(--hg-space-4); font-size: var(--hg-small); }

/* Tres cotas en línea. Es lo que se compara de un vistazo entre tarjetas. */
.hg-cotas {
  display: grid;
  /* auto-fit: una propiedad puede tener dos cotas conocidas o tres, y
     no se inventa una tercera para cuadrar la rejilla. */
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--hg-space-3) var(--hg-space-2);
  margin-top: auto;
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-linea);
}
.hg-cotas div { min-width: 0; }
.hg-cotas dt {
  font-size: var(--hg-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hg-grafito);
}
.hg-cotas dd {
  margin: 2px 0 0;
  font-family: var(--hg-font-titulo);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  color: var(--hg-azul);
  font-variant-numeric: tabular-nums;
}
.hg-tarjeta-prop__pie {
  display: flex;
  align-items: center;
  gap: var(--hg-space-2);
  margin-top: var(--hg-space-4);
  font-family: var(--hg-font-titulo);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
  color: var(--hg-azul);
}
.hg-tarjeta-prop__pie svg { width: 15px; height: 15px; transition: transform var(--hg-dur-media) var(--hg-ease-salida); }
.hg-tarjeta-prop:hover .hg-tarjeta-prop__pie svg { transform: translateX(5px); }

/* ============================================================
   FICHA DE PROPIEDAD · página de detalle
   ============================================================ */

.hg-detalle {
  margin-top: var(--hg-header-h);
  padding-block: var(--hg-space-6) var(--hg-space-5);
  background: var(--hg-azul);
  color: var(--hg-hielo);
}
.hg-detalle h1 {
  margin: 0 0 var(--hg-space-3);
  font-size: var(--hg-display-2);
  line-height: var(--hg-lh-display);
  color: var(--hg-blanco);
  max-width: 20ch;
}
.hg-detalle__linea {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-3);
  margin-bottom: var(--hg-space-4);
}
.hg-detalle__intro { margin: 0 0 var(--hg-space-5); max-width: 56ch; font-weight: 300; font-size: 1.0625rem; }
.hg-detalle__ctas { display: flex; flex-wrap: wrap; gap: var(--hg-space-3); }

/* Cotas clave bajo el titular: lo que decide si sigues leyendo. */
.hg-clave-datos {
  display: grid;
  gap: var(--hg-space-4);
  margin: var(--hg-space-5) 0 0;
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-velo-22);
}
.hg-clave-datos dt {
  font-size: var(--hg-eyebrow);
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
}
.hg-clave-datos dd {
  margin: var(--hg-space-1) 0 0;
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-cifra);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-blanco);
  font-variant-numeric: tabular-nums;
}

/* --- Galería ---------------------------------------------------
   Imagen grande y tira de miniaturas que la cambian. Sin librería:
   son treinta líneas en main.js. Las miniaturas son botones de
   verdad, así que funcionan con teclado y lo dicen con aria-pressed. */
.hg-galeria { display: grid; gap: var(--hg-space-2); }
.hg-galeria__principal {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hg-azul);
  border: 1px solid var(--hg-linea);
}
.hg-galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.hg-galeria__pie {
  margin: 0;
  padding: var(--hg-space-2) var(--hg-space-3);
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-grafito);
  border: 1px solid var(--hg-linea);
  border-top: 0;
}
.hg-galeria__tiras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 26%;
  gap: var(--hg-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--hg-space-1);
}
.hg-galeria__tiras button {
  padding: 0;
  border: 1px solid var(--hg-linea);
  background: none;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  transition: border-color var(--hg-dur-corta) var(--hg-ease-entrada), opacity var(--hg-dur-corta) var(--hg-ease-entrada);
  opacity: .62;
}
.hg-galeria__tiras img { width: 100%; height: 100%; object-fit: cover; }
.hg-galeria__tiras button:hover { opacity: .85; }
.hg-galeria__tiras button[aria-pressed="true"] { opacity: 1; border-color: var(--hg-rojo); border-width: 2px; }

/* --- Ficha técnica --------------------------------------------- */
.hg-bloque-ficha { display: grid; gap: var(--hg-space-6); }
.hg-bloque-ficha h2 { margin: 0 0 var(--hg-space-4); font-size: var(--hg-h3); }
.hg-bloque-ficha h3 { margin: var(--hg-space-5) 0 var(--hg-space-3); font-size: var(--hg-h4); font-family: var(--hg-font-titulo); font-weight: 500; }

.hg-especificaciones {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--hg-body);
}
.hg-especificaciones th,
.hg-especificaciones td {
  padding: var(--hg-space-3) 0;
  border-bottom: 1px solid var(--hg-linea);
  vertical-align: top;
}
.hg-especificaciones th {
  width: 44%;
  font-weight: 400;
  color: var(--hg-grafito);
  padding-right: var(--hg-space-4);
}
.hg-especificaciones td { font-weight: 500; color: var(--hg-azul); font-variant-numeric: tabular-nums; }

/* Lista de lo que incluye. Palomita dibujada, no emoji. */
.hg-incluye { display: grid; gap: var(--hg-space-3); }
.hg-incluye li { display: grid; grid-template-columns: auto 1fr; gap: var(--hg-space-3); align-items: start; }
.hg-incluye svg { width: 18px; height: 18px; margin-top: 5px; color: var(--hg-rojo); }

/* Panel lateral pegajoso con el contacto de esa propiedad */
.hg-panel-contacto {
  background: var(--hg-azul-profundo);
  color: var(--hg-hielo);
  padding: var(--hg-space-5);
}
.hg-panel-contacto h2 { color: var(--hg-blanco); margin: 0 0 var(--hg-space-2); font-size: var(--hg-h4); }
.hg-panel-contacto > p { margin: 0 0 var(--hg-space-4); font-size: var(--hg-small); }
.hg-panel-contacto .hg-campo label { color: var(--hg-blanco); }
.hg-panel-contacto .hg-btn { width: 100%; }
.hg-panel-contacto__directo {
  margin-top: var(--hg-space-5);
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-velo-12);
  display: grid;
  gap: var(--hg-space-3);
}
.hg-panel-contacto__directo a {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  color: var(--hg-blanco);
  text-decoration: none;
  font-family: var(--hg-font-titulo);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
}
.hg-panel-contacto__directo a:hover { color: var(--hg-hielo); }
.hg-panel-contacto__directo svg { width: 17px; height: 17px; color: var(--hg-hielo); }

/* Aviso de fotografía pendiente dentro de la galería */
.hg-aviso-foto {
  margin: 0;
  padding: var(--hg-space-3);
  background: var(--hg-fondo);
  border: 1px solid var(--hg-linea);
  border-left: 3px solid var(--hg-rojo);
  font-size: var(--hg-small);
}

/* ============================================================
   BREAKPOINTS · listado y ficha
   ============================================================ */

@media (min-width: 600px) {
  /* auto-fit con mínimo de 420 px: una sola ficha ocupa el ancho, dos o más
     se acomodan en dos columnas y nunca en tres (1200 / 420 = 2.8). */
  .hg-tarjetas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

  /* Una ficha sola a todo el ancho sería una foto de 750 px de alto: se
     acuesta, como en la vista de lista. */
  .hg-tarjetas > .hg-tarjeta-prop:only-child { flex-direction: row; }
  .hg-tarjetas > .hg-tarjeta-prop:only-child .hg-tarjeta-prop__media { flex: 0 0 44%; aspect-ratio: auto; }
  .hg-tarjetas > .hg-tarjeta-prop:only-child .hg-tarjeta-prop__cuerpo { flex: 1; }
}

@media (min-width: 768px) {
  .hg-detalle { padding-block: var(--hg-space-7) var(--hg-space-6); }
  .hg-detalle h1 { font-size: var(--hg-display); }
  .hg-clave-datos { grid-template-columns: repeat(3, 1fr); }
  .hg-galeria__tiras { grid-auto-columns: 1fr; grid-auto-flow: column; overflow-x: visible; }
  .hg-bloque-ficha { grid-template-columns: 1.5fr 1fr; gap: var(--hg-space-7); align-items: start; }
  .hg-panel-contacto { position: sticky; top: calc(var(--hg-header-h) + var(--hg-space-4)); align-self: start; }
  .hg-tarjeta-prop__cuerpo { padding: var(--hg-space-5); }
}

@media (min-width: 1024px) {
  .hg-tarjetas { gap: var(--hg-space-6); }
  .hg-detalle__cabeza { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--hg-space-6); align-items: end; }
  .hg-clave-datos { margin-top: 0; }
}

/* ============================================================
   CINTA DE CIERRE
   Cada página termina empujando al teléfono o a WhatsApp. Es el único
   trabajo del sitio y no puede depender de que el visitante suba al
   header.
   ============================================================ */

.hg-cinta {
  background: var(--hg-azul);
  color: var(--hg-hielo);
  padding-block: var(--hg-space-8);
}
.hg-cinta__caja { display: grid; gap: var(--hg-space-5); align-items: center; }
.hg-cinta h2 { color: var(--hg-blanco); margin: 0 0 var(--hg-space-3); }
.hg-cinta p { margin: 0; max-width: 46ch; }
.hg-cinta__ctas { display: flex; flex-wrap: wrap; gap: var(--hg-space-3); }

/* ============================================================
   404
   ============================================================ */

.hg-404 {
  position: relative;
  isolation: isolate;
  min-height: 70svh;
  display: grid;
  align-content: center;
  margin-top: var(--hg-header-h);
  padding-block: var(--hg-space-8);
  background: var(--hg-azul-profundo);
  color: var(--hg-hielo);
}
.hg-404 h1 { color: var(--hg-blanco); font-size: var(--hg-display-2); margin: 0 0 var(--hg-space-4); }
.hg-404 p { margin: 0 0 var(--hg-space-5); max-width: 48ch; }
.hg-404__enlaces { display: flex; flex-wrap: wrap; gap: var(--hg-space-3); }

/* ============================================================
   BREAKPOINTS DE LO NUEVO
   ============================================================ */

@media (min-width: 768px) {
  .hg-lineas-hero { grid-template-columns: 1fr 1fr; }
  .hg-lineas-hero li { border-bottom: 0; border-left: 1px solid var(--hg-velo-12); }
  .hg-lineas-hero li:first-child { border-left: 0; }
  .hg-lineas-hero a { padding: var(--hg-space-4); }
  .hg-lineas-hero li:first-child a { padding-left: 0; }

  .hg-cabecera { padding-block: var(--hg-space-9) var(--hg-space-8); }
  .hg-cabecera h1 { font-size: var(--hg-display); }


  .hg-criterios__lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--hg-space-6); }
  .hg-criterio:nth-child(2) { border-top: 1px solid var(--hg-linea); }
  .hg-criterio:nth-last-child(2) { border-bottom: 1px solid var(--hg-linea); }

  .hg-cinta__caja { grid-template-columns: 1.4fr auto; gap: var(--hg-space-6); }
}

@media (min-width: 1024px) {
  .hg-criterios { grid-template-columns: 1fr 1.7fr; gap: var(--hg-space-7); align-items: start; }
  .hg-criterios__cabeza { position: sticky; top: calc(var(--hg-header-h) + var(--hg-space-6)); }

}

/* Cabecera sin fotografía: trama de plano técnico en vez de un plano de
   color liso. Se usa en la línea industrial mientras no haya foto real. */
.hg-cabecera--trama::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--hg-velo-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--hg-velo-08) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ============================================================
   BREAKPOINT 1024 · el menú pasa a barra con desplegables
   Con cinco grupos y submenús, en 768 px no cabe: el hamburguesa se
   queda hasta 1024 y abajo de eso el mismo marcado es un acordeón.
   ============================================================ */
@media (min-width: 1024px) {
  .hg-hamburguesa { display: none; }

  .hg-nav {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    margin-right: var(--hg-space-4);
  }
  .hg-nav > ul { display: flex; align-items: center; gap: var(--hg-space-4); overflow: visible; }
  .hg-nav > ul > li { position: relative; }
  .hg-nav > ul > li > a {
    padding: var(--hg-space-2) 0;
    border-bottom: 0;
    font-size: .9375rem;
  }
  /* El último enlace hereda del panel móvil un padding-bottom de 24 px que
     en barra horizontal lo levanta respecto a los demás. */
  .hg-nav > ul > li:last-child > a { padding-bottom: var(--hg-space-2); }
  /* Subrayado que crece desde la izquierda, no un borde que aparece de golpe */
  .hg-nav > ul > li > a::after,
  .hg-nav__disparador::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--hg-hielo);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--hg-dur-media) var(--hg-ease-salida);
  }
  .hg-nav__disparador { position: relative; }
  .hg-nav > ul > li > a:hover::after,
  .hg-nav > ul > li > a[aria-current="page"]::after,
  .hg-nav__grupo[data-activo="true"] .hg-nav__disparador::after,
  .hg-nav__disparador:hover::after { transform: none; }
}

/* ============================================================
   NAVEGACIÓN CON NIVELES
   El menú deja de ser cuatro anclas planas. En escritorio los grupos
   abren al pasar el cursor o al enfocar; en móvil se comportan como
   acordeón dentro del panel. El estado lo lleva data-abierto, que pone
   main.js, y el CSS no depende solo de :hover: con teclado y en táctil
   :hover no existe.
   ============================================================ */

.hg-nav__disparador {
  display: flex;
  align-items: center;
  gap: var(--hg-space-2);
  width: 100%;
  padding: var(--hg-space-3) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hg-velo-12);
  color: var(--hg-blanco);
  font-family: var(--hg-font-texto);
  font-size: var(--hg-body);
  text-align: left;
  cursor: pointer;
}
.hg-nav__disparador svg {
  width: 11px; height: 11px;
  margin-left: auto;
  transition: transform var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-nav__disparador[aria-expanded="true"] svg { transform: rotate(180deg); }
.hg-nav__disparador:hover { color: var(--hg-hielo); }

/* Acordeón en móvil: se anima con grid-template-rows, no con max-height */
.hg-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-submenu > div { overflow: hidden; }
.hg-nav__grupo[data-abierto="true"] > .hg-submenu { grid-template-rows: 1fr; }

.hg-submenu ul { padding: var(--hg-space-2) 0 var(--hg-space-3) var(--hg-space-3); }
.hg-submenu a {
  display: block;
  padding: var(--hg-space-2) 0;
  border-bottom: 0;
  font-size: .9375rem;
  color: var(--hg-hielo);
}
.hg-submenu a:hover { color: var(--hg-blanco); }
.hg-submenu__titulo {
  margin: var(--hg-space-3) 0 var(--hg-space-1);
  font-size: var(--hg-eyebrow);
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-acero);
}
.hg-submenu__titulo:first-child { margin-top: 0; }

/* ============================================================
   BUSCADOR
   Es el punto de entrada del sitio, no un adorno del hero. Funciona
   sin JavaScript: es un formulario GET que lleva a propiedades.html
   con los parámetros en la URL, y ahí se aplican.
   ============================================================ */

.hg-buscador {
  display: grid;
  gap: var(--hg-space-3);
  padding: var(--hg-space-4);
  background: var(--hg-velo-08);
  border: 1px solid var(--hg-velo-22);
  backdrop-filter: blur(2px);
}
.hg-buscador__campo { display: grid; gap: var(--hg-space-1); position: relative; }
.hg-buscador label {
  font-size: var(--hg-eyebrow);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-hielo);
}
.hg-buscador select,
.hg-buscador input {
  width: 100%;
  appearance: none;
  padding: var(--hg-space-3);
  font-family: var(--hg-font-texto);
  font-size: var(--hg-body);
  color: var(--hg-blanco);
  background: var(--hg-azul-profundo);
  border: 1px solid var(--hg-velo-35);
  border-radius: var(--hg-radius);
}
.hg-buscador select option { color: var(--hg-texto); background: var(--hg-blanco); }
.hg-buscador__campo > svg {
  position: absolute;
  right: var(--hg-space-3);
  bottom: 17px;
  width: 12px; height: 12px;
  color: var(--hg-hielo);
  pointer-events: none;
}
.hg-buscador .hg-btn { width: 100%; }
.hg-buscador__pie {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-hielo);
}
.hg-buscador__pie a { color: var(--hg-blanco); }

/* ============================================================
   PORTADA DE PORTAL
   ============================================================ */

/* Accesos por tipo: la primera bifurcación después del buscador. */
.hg-accesos {
  display: grid;
  /* minmax(0,1fr) y no 1fr: con 1fr la celda no baja de su min-content y
     "Lotes industriales" desbordaba la pantalla a 320 px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hg-linea);
  border: 1px solid var(--hg-linea);
}
.hg-acceso {
  display: grid;
  gap: var(--hg-space-1);
  padding: var(--hg-space-4);
  background: var(--hg-blanco);
  text-decoration: none;
  transition: background-color var(--hg-dur-corta) var(--hg-ease-entrada);
}
.hg-acceso:hover { background: var(--hg-fondo); }
.hg-acceso svg { width: 28px; height: 28px; color: var(--hg-azul); margin-bottom: var(--hg-space-2); }
.hg-acceso b {
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-h4);
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-azul);
}
.hg-acceso span { font-size: var(--hg-small); color: var(--hg-grafito); }
.hg-acceso em {
  font-style: normal;
  font-size: var(--hg-eyebrow);
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-rojo);
  font-variant-numeric: tabular-nums;
}

/* Franja de ciudades: el otro eje por el que se busca. */
.hg-ciudades { display: grid; gap: var(--hg-space-4); }
.hg-ciudad {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 220px;
  padding: var(--hg-space-5);
  overflow: hidden;
  isolation: isolate;
  background: var(--hg-azul);
  color: var(--hg-blanco);
  text-decoration: none;
}
.hg-ciudad img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hg-ease-salida);
}
.hg-ciudad::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--hg-overlay-fuerte), color-mix(in srgb, var(--hg-azul) 45%, transparent));
}
.hg-ciudad:hover img { transform: scale(1.05); }
.hg-ciudad b {
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-h3);
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
}
.hg-ciudad span { font-size: var(--hg-small); color: var(--hg-hielo); }

/* ============================================================
   RESULTADOS · rail de filtros + rejilla
   ============================================================ */

.hg-resultados { display: grid; gap: var(--hg-space-5); }

.hg-filtros__abrir { width: 100%; justify-content: space-between; }
.hg-filtros__abrir span { font-variant-numeric: tabular-nums; }

.hg-filtros {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hg-dur-media) var(--hg-ease-salida);
}
.hg-filtros[data-abierto="true"] { grid-template-rows: 1fr; }
.hg-filtros > form { overflow: hidden; }

.hg-filtros fieldset {
  margin: 0;
  padding: var(--hg-space-4) 0;
  border: 0;
  border-top: 1px solid var(--hg-linea);
}
.hg-filtros legend {
  padding: 0;
  font-size: var(--hg-eyebrow);
  font-weight: 500;
  letter-spacing: var(--hg-track-eyebrow);
  text-transform: uppercase;
  color: var(--hg-grafito);
  margin-bottom: var(--hg-space-3);
}
.hg-filtro-op {
  display: flex;
  align-items: center;
  gap: var(--hg-space-3);
  padding: var(--hg-space-1) 0;
  cursor: pointer;
}
.hg-filtro-op input { width: 17px; height: 17px; accent-color: var(--hg-rojo); flex: 0 0 auto; }
.hg-filtro-op__conteo { margin-left: auto; font-size: var(--hg-small); color: var(--hg-grafito); font-variant-numeric: tabular-nums; }
.hg-filtros select,
.hg-filtros input[type="search"] {
  width: 100%;
  padding: var(--hg-space-2) var(--hg-space-3);
  font-family: var(--hg-font-texto);
  font-size: var(--hg-small);
  color: var(--hg-texto);
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  border-radius: var(--hg-radius);
}
.hg-filtros__acciones { display: grid; gap: var(--hg-space-2); padding-top: var(--hg-space-4); border-top: 1px solid var(--hg-linea); }

/* Barra de herramientas: conteo, orden y vista. */
.hg-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hg-space-3);
  padding-bottom: var(--hg-space-4);
  border-bottom: 1px solid var(--hg-linea);
  margin-bottom: var(--hg-space-5);
}
.hg-herramientas__conteo {
  margin: 0;
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-h4);
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-azul);
  font-variant-numeric: tabular-nums;
}
.hg-herramientas__grupo { display: flex; align-items: center; gap: var(--hg-space-2); }
.hg-herramientas__grupo:first-of-type { margin-left: auto; }
.hg-herramientas label { font-size: var(--hg-small); color: var(--hg-grafito); }
.hg-herramientas select {
  padding: var(--hg-space-2) var(--hg-space-3);
  font-family: var(--hg-font-texto);
  font-size: var(--hg-small);
  color: var(--hg-texto);
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  border-radius: var(--hg-radius);
}
.hg-vista { display: flex; border: 1px solid var(--hg-linea); border-radius: var(--hg-radius); overflow: hidden; }
.hg-vista button {
  display: grid;
  place-items: center;
  width: 38px; height: 34px;
  background: var(--hg-blanco);
  border: 0;
  color: var(--hg-grafito);
  cursor: pointer;
}
.hg-vista button + button { border-left: 1px solid var(--hg-linea); }
.hg-vista button svg { width: 15px; height: 15px; }
.hg-vista button[aria-pressed="true"] { background: var(--hg-azul); color: var(--hg-blanco); }

/* Fichas ocultas por filtro. Se marcan con hidden desde main.js. */
.hg-tarjeta-prop[hidden] { display: none; }

/* Vista de lista: la misma tarjeta, acostada. */
@media (min-width: 600px) {
  .hg-tarjetas[data-vista="lista"] { grid-template-columns: 1fr; }
  .hg-tarjetas[data-vista="lista"] .hg-tarjeta-prop { flex-direction: row; }
  .hg-tarjetas[data-vista="lista"] .hg-tarjeta-prop__media { flex: 0 0 38%; aspect-ratio: auto; }
  .hg-tarjetas[data-vista="lista"] .hg-tarjeta-prop__cuerpo { flex: 1; }
}

.hg-sin-resultados {
  padding: var(--hg-space-6) var(--hg-space-5);
  border: 1px dashed var(--hg-linea);
  background: var(--hg-fondo);
}
.hg-sin-resultados h2 { margin: 0 0 var(--hg-space-3); font-size: var(--hg-h4); font-family: var(--hg-font-titulo); font-weight: 500; }
.hg-sin-resultados p { margin: 0 0 var(--hg-space-4); }

.hg-paginacion { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); margin-top: var(--hg-space-6); align-items: center; }
.hg-paginacion button {
  min-width: 40px; height: 40px;
  padding: 0 var(--hg-space-2);
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  border-radius: var(--hg-radius);
  color: var(--hg-azul);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.hg-paginacion button[aria-current="page"] { background: var(--hg-azul); border-color: var(--hg-azul); color: var(--hg-blanco); }
.hg-paginacion button:disabled { opacity: .4; cursor: default; }

/* Chips de filtros activos: hay que poder ver y quitar lo aplicado. */
.hg-chips { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); margin-bottom: var(--hg-space-4); }
.hg-chips:empty { display: none; }
.hg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  padding: var(--hg-space-1) var(--hg-space-2) var(--hg-space-1) var(--hg-space-3);
  background: var(--hg-fondo);
  border: 1px solid var(--hg-linea);
  border-radius: var(--hg-radius-tag);
  font-size: var(--hg-small);
  color: var(--hg-grafito);
}
.hg-chip button {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--hg-grafito);
  cursor: pointer;
  border-radius: 50%;
}
.hg-chip button:hover { background: var(--hg-linea); color: var(--hg-azul); }
.hg-chip svg { width: 10px; height: 10px; }

/* ============================================================
   SERVICIOS Y FIRMA
   ============================================================ */

.hg-servicios { display: grid; gap: 1px; background: var(--hg-linea); border: 1px solid var(--hg-linea); }
.hg-servicio { padding: var(--hg-space-5); background: var(--hg-blanco); }
.hg-servicio__num {
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-small);
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  color: var(--hg-rojo);
}
.hg-servicio h2, .hg-servicio h3 {
  margin: var(--hg-space-2) 0 var(--hg-space-3);
  font-size: var(--hg-h4);
  font-family: var(--hg-font-titulo);
  font-weight: 500;
}
.hg-servicio p { margin: 0 0 var(--hg-space-3); }
.hg-servicio ul { display: grid; gap: var(--hg-space-2); font-size: var(--hg-small); }
.hg-servicio li { display: grid; grid-template-columns: auto 1fr; gap: var(--hg-space-2); }
.hg-servicio li::before { content: '—'; color: var(--hg-acero); }

/* Franja de datos de la firma. Nada inventado: solo lo verificable. */
.hg-firma { display: grid; gap: var(--hg-space-4); }
.hg-firma div { padding-top: var(--hg-space-4); border-top: 2px solid var(--hg-azul); }
.hg-firma dt {
  font-family: var(--hg-font-titulo);
  font-size: var(--hg-cifra);
  font-weight: 500;
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-azul);
  font-variant-numeric: tabular-nums;
}
.hg-firma dd { margin: var(--hg-space-1) 0 0; font-size: var(--hg-small); }

/* ============================================================
   BREAKPOINTS · portal
   ============================================================ */

@media (min-width: 600px) {
  .hg-accesos { grid-template-columns: repeat(4, 1fr); }
  .hg-ciudades { grid-template-columns: repeat(2, 1fr); }
  .hg-buscador { grid-template-columns: repeat(2, 1fr); align-items: end; }
  .hg-servicios { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  /* Submenús desplegables. En móvil el mismo marcado es un acordeón. */
  .hg-nav__grupo { position: relative; }
  .hg-nav__disparador { width: auto; padding: var(--hg-space-2) 0; border-bottom: 0; font-size: .9375rem; }
  .hg-nav__disparador svg { margin-left: 0; }
  .hg-submenu {
    position: absolute;
    top: calc(100% + var(--hg-space-3));
    left: calc(-1 * var(--hg-space-4));
    display: block;
    min-width: 250px;
    padding: var(--hg-space-4);
    background: var(--hg-azul-profundo);
    border: 1px solid var(--hg-velo-12);
    box-shadow: var(--hg-shadow-alta);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--hg-dur-media) var(--hg-ease-salida),
                transform var(--hg-dur-media) var(--hg-ease-salida),
                visibility var(--hg-dur-media);
  }
  .hg-submenu > div { overflow: visible; }
  .hg-submenu ul { padding: 0; }
  .hg-nav__grupo:hover > .hg-submenu,
  .hg-nav__grupo:focus-within > .hg-submenu,
  .hg-nav__grupo[data-abierto="true"] > .hg-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Puente invisible para que el cursor no pierda el submenú al bajar. */
  .hg-nav__grupo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--hg-space-3); }

  .hg-buscador { grid-template-columns: repeat(4, 1fr) auto; }
  .hg-buscador .hg-btn { width: auto; }

  .hg-resultados { grid-template-columns: 262px 1fr; gap: var(--hg-space-6); align-items: start; }
  .hg-filtros {
    grid-template-rows: 1fr;
    position: sticky;
    top: calc(var(--hg-header-h) + var(--hg-space-4));
  }
  .hg-filtros__abrir { display: none; }
  .hg-servicios { grid-template-columns: repeat(3, 1fr); }
  .hg-firma { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   HERO DE PORTAL
   La portada dejó de ser un cartel a pantalla completa: ahora el hero
   es el marco del buscador. Mide lo que mide su contenido, no 100svh,
   porque debajo hay accesos e inventario que tienen que asomar.
   ============================================================ */

.hg-hero--portal {
  display: block;
  min-height: 0;
  padding-block: calc(var(--hg-header-h) + var(--hg-space-6)) var(--hg-space-7);
}
.hg-hero--portal .hg-hero__contenido {
  padding-block: 0;
  position: relative;
}
/* 16ch es la medida que deja la palabra clave con su banda en un solo
   renglón en todos los anchos sin que el titular cruce la cuña. */
.hg-hero--portal h1 { max-width: 16ch; }
.hg-hero--portal .hg-hero__sub { margin-bottom: var(--hg-space-5); }
/* El buscador desborda la columna de texto a propósito: es la pieza
   principal de la página y ocupa el ancho completo. */
.hg-hero--portal .hg-buscador { max-width: none; margin-top: var(--hg-space-5); }

@media (min-width: 768px) {
  .hg-hero--portal { padding-block: calc(var(--hg-header-h) + var(--hg-space-7)) var(--hg-space-8); }
  /* El titular respeta la cuña; el buscador no, porque va a todo lo ancho. */
  .hg-hero--portal .hg-hero__contenido > .hg-hero__sub,
  .hg-hero--portal .hg-hero__contenido > .hg-eyebrow { max-width: 56%; }
  .hg-hero--portal .hg-buscador { max-width: none; }
}

/* ============================================================
   FOTOGRAFÍA A LO ANCHO
   Tres piezas para que la fotografía no viva solo dentro de las
   tarjetas: banda a sangre, mosaico y fondo de cinta.
   ============================================================ */

/* --- Banda a sangre con texto encima ------------------------- */
.hg-banda-foto {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-content: center;
  min-height: 380px;
  padding-block: var(--hg-space-8);
  background: var(--hg-azul);
  color: var(--hg-hielo);
}
.hg-banda-foto > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hg-banda-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hg-overlay);
}
/* La cuña de la marca, también aquí: el corte inclinado es la firma. */
.hg-banda-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hg-azul-profundo);
  clip-path: polygon(0 0, 62% 0, 44% 100%, 0 100%);
  opacity: .88;
}
.hg-banda-foto h2 { color: var(--hg-blanco); margin: 0 0 var(--hg-space-3); }
.hg-banda-foto p { margin: 0 0 var(--hg-space-5); max-width: 42ch; }
.hg-banda-foto .hg-contenedor > * { max-width: 92%; }
.hg-banda-foto__pie {
  position: absolute;
  right: 0; bottom: 0;
  padding: var(--hg-space-2) var(--hg-space-3);
  background: var(--hg-azul-profundo);
  font-size: var(--hg-small);
  font-weight: 300;
  color: var(--hg-hielo);
}

/* --- Mosaico -------------------------------------------------
   Rejilla desigual a propósito: cuatro fotos del mismo tamaño se leen
   como catálogo de existencias. La primera manda. */
/* Seis fotos. En móvil van a dos columnas parejas (3 filas exactas); en
   escritorio a tres columnas con la primera al doble (9 celdas, 3 filas
   exactas). Las cuentas importan: cualquier otra combinación deja huecos
   al final de la rejilla. */
.hg-mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 34vw;
  gap: 2px;
  background: var(--hg-linea);
}
.hg-mosaico figure { position: relative; margin: 0; overflow: hidden; }
.hg-mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--hg-ease-salida); }
.hg-mosaico figure:hover img { transform: scale(1.05); }
.hg-mosaico figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--hg-space-2) var(--hg-space-3);
  background: var(--hg-azul-profundo);
  color: var(--hg-hielo);
  font-size: var(--hg-small);
  font-weight: 300;
}

/* --- Cinta de cierre sobre fotografía ------------------------ */
.hg-cinta { position: relative; isolation: isolate; overflow: clip; }
.hg-cinta > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hg-cinta:has(> img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hg-overlay-fuerte);
}

/* --- Fondo fotográfico en secciones azules ------------------- */
.hg-ubicacion-sec { position: relative; isolation: isolate; }
.hg-fondo-seccion {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hg-fondo-seccion img { width: 100%; height: 100%; object-fit: cover; }
.hg-fondo-seccion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hg-overlay-fuerte);
}


@media (min-width: 768px) {
  .hg-banda-foto { min-height: 460px; }
  .hg-banda-foto .hg-contenedor > * { max-width: 46%; }
  .hg-mosaico { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 20vw; }
  .hg-mosaico figure:first-child { grid-column: span 2; grid-row: span 2; }
}

@media (min-width: 1280px) {
  .hg-mosaico { grid-auto-rows: 215px; }
}

/* ============================================================
   CONTROL DE PAUSA DEL VIDEO
   WCAG 2.2.2 exige poder detener lo que se mueve solo más de cinco
   segundos. El cliente no lo quiere a la vista, así que se comporta
   igual que el enlace de "Saltar al contenido": está fuera de la
   pantalla y solo aparece cuando el teclado lo enfoca. Sigue existiendo
   para lectores de pantalla y para quien navega sin ratón.
   ============================================================ */

.hg-video-ctrl {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  align-items: center;
  gap: var(--hg-space-2);
  padding: var(--hg-space-2) var(--hg-space-3);
  background: var(--hg-azul-profundo);
  border: 1px solid var(--hg-velo-35);
  border-radius: var(--hg-radius);
  color: var(--hg-blanco);
  font-family: var(--hg-font-texto);
  font-size: var(--hg-small);
  cursor: pointer;
}
.hg-video-ctrl svg { width: 12px; height: 12px; flex: 0 0 auto; }
.hg-video-ctrl[hidden] { display: none; }

.hg-video-ctrl:focus-visible {
  left: var(--hg-gutter);
  top: calc(var(--hg-header-h) + var(--hg-space-3));
  z-index: var(--hg-z-salto);
  width: auto; height: auto;
  display: inline-flex;
  overflow: visible;
}

/* ============================================================
   REFUERZO RESPONSIVE
   Añadido tras auditar el sitio desplegado con navegador real en
   11 anchos (320–1440) y 5 páginas. Cada bloque corrige un defecto
   medido, no una sospecha.
   ============================================================ */

/* --- 1. Zonas seguras: muescas y barra de gestos -----------------
   El <meta viewport> lleva viewport-fit=cover, así que el contenido
   llega hasta el borde físico. Sin esto, en un iPhone con muesca el
   logo y el botón de teléfono quedan bajo la esquina redondeada, y
   el pie bajo la barra de gestos. max() conserva el padding original
   en pantallas sin muesca, donde env() vale 0. */
.hg-contenedor {
  padding-left: max(var(--hg-gutter, 1.5rem), env(safe-area-inset-left));
  padding-right: max(var(--hg-gutter, 1.5rem), env(safe-area-inset-right));
}
.hg-header {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.hg-pie {
  padding-bottom: max(var(--hg-space-5), env(safe-area-inset-bottom));
}

/* --- 2. Objetivos táctiles ---------------------------------------
   La auditoría encontró 44 enlaces por debajo de 44 px de alto en
   propiedades.html: los del menú medían 41. WCAG 2.5.8 pide 24 px
   como mínimo y las guías de iOS y Android piden 44. Se aplica por
   tipo de puntero, no por ancho de pantalla: una laptop con pantalla
   táctil también necesita el área grande. */
@media (pointer: coarse) {
  .hg-nav a,
  .hg-submenu a,
  .hg-footer a,
  .hg-header__logo,
  .hg-salto {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .hg-btn,
  .hg-filtro-op,
  .hg-video-ctrl,
  .hg-herramientas__grupo button,
  .hg-herramientas__grupo select,
  select, input[type="search"], input[type="text"] {
    min-height: 44px;
  }
  /* Los dos CTA del pie son el objetivo principal de la pagina en un
     telefono: llamar y escribir por WhatsApp. Median 30 y 26 px. */
  .hg-footer__tel,
  .hg-footer__wa,
  .hg-dato-directo a,
  .hg-panel-contacto__directo a,
  .hg-migas a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  /* Las migas son navegacion real, no decoracion. */
  .hg-migas a { min-height: 44px; }
  /* La casilla mide 17 px pero quien recibe el toque es la etiqueta. */
  .hg-filtro-op {
    display: flex;
    align-items: center;
    padding-block: var(--hg-space-2);
  }
  /* Mas aire entre enlaces seguidos: dos objetivos de 44 px pegados
     siguen produciendo toques equivocados. */
  .hg-submenu li + li,
  .hg-footer li + li {
    margin-top: 2px;
  }
}

/* --- 3. Legibilidad en móvil -------------------------------------
   --hg-small (13 px) alimenta 39 reglas, entre ellas el resumen de
   cada tarjeta, que es texto corrido. A 13 px en un teléfono se lee
   con esfuerzo. Subirlo a 14 px sólo en pantallas chicas mejora el
   cuerpo sin tocar la densidad del escritorio, donde 13 px está bien
   por la distancia de lectura. */
@media (max-width: 599.98px) {
  :root {
    --hg-small: .875rem;
    --hg-eyebrow: .8125rem;
  }
  /* El resumen es prosa, no un dato suelto: merece cuerpo completo. */
  .hg-tarjeta-prop__resumen { font-size: 1rem; line-height: 1.55; }
}

/* --- 4. Hover sólo donde existe ----------------------------------
   En pantalla táctil el :hover se queda pegado tras el toque: la
   tarjeta sube 4 px y ahí se queda hasta que tocas otra cosa. Se
   restringe a punteros que de verdad pueden pasar por encima. */
@media (hover: none) {
  .hg-tarjeta-prop:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--hg-linea);
  }
  .hg-tarjeta-prop:hover .hg-tarjeta-prop__media > img { transform: none; }
  .hg-tarjeta-prop:hover .hg-tarjeta-prop__pie svg { transform: none; }
  /* A cambio, respuesta inmediata al toque, que es lo que el dedo espera. */
  .hg-tarjeta-prop:active { border-color: var(--hg-acero); }
}

/* --- 5. Palabras largas ------------------------------------------
   "Lotes industriales" y "Corporativo" en titulares a 320 px eran el
   origen del desborde. El corte sólo actúa cuando no hay más remedio. */
@media (max-width: 479.98px) {
  h1, h2, h3, .hg-tarjeta-prop h3, .hg-acceso b {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}