/* ============================================================
   INMOBILIARIA HG · Tokens de diseño
   Derivados del Manual de Identidad Corporativa v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {

  /* --- Color -------------------------------------------------- */
  --hg-azul:            #1E345B;   /* maestro: header, footer, bloques */
  --hg-azul-profundo:   #15233E;   /* veladuras, hover, sombras */
  --hg-grafito:         #334355;   /* neutro institucional */
  --hg-rojo:            #D53B3B;   /* acento: CTA, pin, palabra clave */
  --hg-hielo:           #CAE7F9;   /* banda de énfasis, texto sobre azul */
  --hg-acero:           #A8BDC2;   /* formas de apoyo, texto terciario */
  --hg-electrico:       #00AAFF;   /* acento puntual, solo digital */

  --hg-fondo:           #F2F5F8;   /* secciones alternas */
  --hg-linea:           #D8DFE7;   /* bordes y divisores */
  --hg-texto:           #46505E;   /* párrafos */
  --hg-blanco:          #FFFFFF;

  --hg-overlay:         rgba(30, 52, 91, .78);
  --hg-overlay-fuerte:  rgba(21, 35, 62, .85);

  /* --- Tipografía --------------------------------------------- */
  --hg-font-titulo: 'Oswald', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --hg-font-texto:  'Poppins', 'Montserrat', system-ui, sans-serif;
  --hg-font-marca:  'Cormorant Garamond', Georgia, serif;  /* solo logotipo */

  --hg-h1:    clamp(2.125rem, 5vw,   3.5rem);
  --hg-h2:    clamp(1.75rem,  3.5vw, 2.5rem);
  --hg-h3:    clamp(1.375rem, 2.5vw, 1.75rem);
  --hg-h4:    clamp(1.125rem, 1.5vw, 1.25rem);
  --hg-body:  1rem;
  --hg-small: .8125rem;

  --hg-lh-titulo: 1.1;
  --hg-lh-texto:  1.65;
  --hg-track-titulo: .02em;
  --hg-track-boton:  .06em;

  /* --- Espacio y forma ---------------------------------------- */
  --hg-space-1: 4px;
  --hg-space-2: 8px;
  --hg-space-3: 16px;
  --hg-space-4: 24px;
  --hg-space-5: 40px;
  --hg-space-6: 64px;
  --hg-space-7: 96px;

  --hg-radius:     4px;   /* botones */
  --hg-radius-tag: 6px;   /* etiquetas de dato */
  --hg-shadow:     0 4px 16px rgba(21, 35, 62, .12);
  --hg-shadow-alta:0 8px 28px rgba(21, 35, 62, .18);

  --hg-max-width: 1200px;
  --hg-gutter:    24px;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  font-family: var(--hg-font-texto);
  font-size: var(--hg-body);
  line-height: var(--hg-lh-texto);
  color: var(--hg-texto);
  background: var(--hg-blanco);
}

h1, h2, h3 {
  font-family: var(--hg-font-titulo);
  font-weight: 700;
  line-height: var(--hg-lh-titulo);
  letter-spacing: var(--hg-track-titulo);
  text-transform: uppercase;
  color: var(--hg-azul);
}

h1 { font-size: var(--hg-h1); }
h2 { font-size: var(--hg-h2); }
h3 { font-size: var(--hg-h3); font-weight: 500; }

h4 {
  font-family: var(--hg-font-texto);
  font-size: var(--hg-h4);
  font-weight: 600;
  color: var(--hg-azul);
}

p { max-width: 70ch; }

small,
.hg-nota { font-size: var(--hg-small); font-weight: 300; }

/* Palabra clave destacada dentro de un titular.
   Una sola por titular. */
.hg-clave        { color: var(--hg-rojo); }
.hg-clave--banda {
  background: var(--hg-hielo);
  color: var(--hg-azul);
  padding: 0 var(--hg-space-2);
}

/* ============================================================
   COMPONENTES
   ============================================================ */

.hg-contenedor {
  max-width: var(--hg-max-width);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
}

/* --- Botones ------------------------------------------------- */
.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hg-space-2);
  font-family: var(--hg-font-titulo);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: var(--hg-track-boton);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--hg-space-3) var(--hg-space-5);
  border: 1px solid transparent;
  border-radius: var(--hg-radius);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.hg-btn--primario   { background: var(--hg-rojo);  color: var(--hg-blanco); }
.hg-btn--secundario { background: var(--hg-azul);  color: var(--hg-blanco); }
.hg-btn--borde      { background: transparent; color: var(--hg-azul); border-color: var(--hg-azul); }

.hg-btn--primario:hover   { background: #B62F2F; transform: translateY(-2px); }
.hg-btn--secundario:hover { background: var(--hg-azul-profundo); transform: translateY(-2px); }
.hg-btn--borde:hover      { background: var(--hg-azul); color: var(--hg-blanco); }

.hg-btn:focus-visible {
  outline: 3px solid var(--hg-electrico);
  outline-offset: 2px;
}

/* Sobre fondo azul, el botón de borde va en blanco */
.hg-sobre-azul .hg-btn--borde { color: var(--hg-blanco); border-color: var(--hg-blanco); }

/* --- Etiqueta de dato (m², altura, ubicación) ---------------- */
.hg-etiqueta {
  display: inline-block;
  font-weight: 500;
  font-size: var(--hg-small);
  padding: var(--hg-space-1) var(--hg-space-3);
  border: 1px solid currentColor;
  border-radius: var(--hg-radius-tag);
}

.hg-sobre-azul .hg-etiqueta {
  color: var(--hg-blanco);
  background: rgba(255, 255, 255, .1);
}

/* --- Hero con fotografía y veladura -------------------------- */
.hg-hero {
  position: relative;
  isolation: isolate;
  color: var(--hg-blanco);
  padding-block: var(--hg-space-7);
}

.hg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hg-overlay);
}

.hg-hero h1 { color: var(--hg-blanco); }

/* --- Sección alterna ----------------------------------------- */
.hg-seccion       { padding-block: var(--hg-space-7); }
.hg-seccion--gris { background: var(--hg-fondo); }
.hg-seccion--azul { background: var(--hg-azul); color: var(--hg-hielo); }
.hg-seccion--azul h2 { color: var(--hg-blanco); }

/* --- Tarjeta de propiedad ------------------------------------ */
.hg-tarjeta {
  background: var(--hg-blanco);
  border: 1px solid var(--hg-linea);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hg-tarjeta:hover { box-shadow: var(--hg-shadow-alta); transform: translateY(-3px); }

.hg-tarjeta__media { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hg-tarjeta__cuerpo { padding: var(--hg-space-4); }

/* Regla roja bajo el título de tarjeta */
.hg-tarjeta__cuerpo h4::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  margin-top: var(--hg-space-2);
  background: var(--hg-rojo);
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

/* Nunca texto rojo sobre azul: contraste 2.66:1 (insuficiente).
   Sobre azul usar --hg-blanco (12.37:1) o --hg-hielo (9.61:1). */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hg-btn:hover, .hg-tarjeta:hover { transform: none; }
}

/* ============================================================
   CAPA 2 · Exhibición, profundidad y movimiento
   Añadida para el sitio. No modifica ningún valor de arriba:
   solo agrega escalas que el manual no cubría porque nació para
   impresos. Todo lo de la Capa 1 sigue siendo la referencia.
   ============================================================ */

:root {

  /* --- Tipografía de exhibición --------------------------------
     El manual llega hasta h1 (3.5rem), suficiente para una ficha
     impresa y corto para un hero a pantalla completa. Oswald es
     condensada: aguanta cuerpos grandes sin romper la caja. */
  --hg-display:    clamp(2.5rem, 6.2vw, 5.25rem);
  --hg-display-2:  clamp(1.875rem, 4.2vw, 3.25rem);
  --hg-cifra:      clamp(1.5rem, 2.6vw, 2.25rem);
  --hg-cifra-xl:   clamp(4rem, 11vw, 8.5rem);
  --hg-lh-display: .95;

  /* Etiqueta superior de sección (Poppins, versalita, muy espaciada) */
  --hg-eyebrow:        .75rem;
  --hg-track-eyebrow:  .18em;

  /* --- Espacio fluido ------------------------------------------
     Los pasos 1–7 son fijos y sirven dentro de un componente.
     Entre secciones el salto tiene que respirar distinto en móvil
     que en escritorio. */
  --hg-space-8: clamp(4rem, 8vw, 7.5rem);
  --hg-space-9: clamp(5.5rem, 12vw, 11rem);

  /* --- Profundidad ---------------------------------------------
     Sombras teñidas con el azul profundo, nunca negro puro:
     el negro sobre una paleta fría se ve sucio. Una sola dirección
     de luz, cenital. */
  --hg-shadow-baja:  0 1px 2px rgba(21, 35, 62, .05), 0 2px 8px rgba(21, 35, 62, .05);
  --hg-shadow-panel: 0 -2px 0 rgba(21, 35, 62, .06), 0 -28px 56px -28px rgba(21, 35, 62, .35);

  /* --- Capas ----------------------------------------------------
     Escala cerrada. Nada de z-index: 9999 suelto. */
  --hg-z-fondo:     0;
  --hg-z-contenido: 1;
  --hg-z-pegado:    20;
  --hg-z-header:    50;
  --hg-z-grano:     80;
  --hg-z-salto:     100;

  /* --- Movimiento -----------------------------------------------
     Salida rápida y frenada larga: la marca es de bloques pesados,
     y el peso se lee en cómo frena, no en cuánto rebota. */
  --hg-ease-salida:  cubic-bezier(.16, 1, .3, 1);
  --hg-ease-entrada: cubic-bezier(.4, 0, .2, 1);
  --hg-dur-corta:    .18s;
  --hg-dur-media:    .45s;
  --hg-dur-larga:    .9s;
  --hg-escalonado:   80ms;   /* el retraso entre líneas que pide el brief */

  /* --- Textura ---------------------------------------------------
     Grano fino sobre los bloques sólidos. Sin él, un plano de color
     de 900 px de alto se ve a plástico. */
  --hg-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");

  /* --- Pilas tipográficas con respaldo calibrado -----------------
     Mismas fuentes de la Capa 1 y en el mismo orden: lo único que se
     agrega es un respaldo métricamente ajustado justo detrás de cada
     una. Mientras Oswald y Poppins viajan por la red, el texto se
     pinta con una Arial reescalada para ocupar exactamente el mismo
     espacio, y al llegar la fuente real la página no salta. */
  --hg-font-titulo: 'Oswald', 'Oswald respaldo', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --hg-font-texto:  'Poppins', 'Poppins respaldo', 'Montserrat', system-ui, sans-serif;

  /* Velos derivados del blanco: bordes y campos sobre azul. */
  --hg-velo-08: color-mix(in srgb, var(--hg-blanco)  8%, transparent);
  --hg-velo-12: color-mix(in srgb, var(--hg-blanco) 12%, transparent);
  --hg-velo-22: color-mix(in srgb, var(--hg-blanco) 22%, transparent);
  --hg-velo-35: color-mix(in srgb, var(--hg-blanco) 35%, transparent);
}

/* Respaldos métricos.
   Los números no son a ojo: salen de comparar las métricas reales de cada
   fuente contra las de Arial (unitsPerEm 2048, ascenso 1854, descenso 434,
   ancho medio 1183).

     Oswald   upm 1000 · asc 1193 · desc 289 · ancho medio 488
              size-adjust = 488/1000 ÷ 1183/2048 = 84.5 %
              ascenso  = 119.3 % ÷ 0.845 = 141.2 %
              descenso =  28.9 % ÷ 0.845 =  34.2 %

     Poppins  upm 1000 · asc 1050 · desc 350 · interlínea 100 · ancho medio 593
              size-adjust = 593/1000 ÷ 1183/2048 = 102.7 %
              ascenso  = 105.0 % ÷ 1.027 = 102.2 %
              descenso =  35.0 % ÷ 1.027 =  34.1 %
              interlínea = 10.0 % ÷ 1.027 = 9.7 %

   Si algún día cambia la tipografía de la marca, hay que recalcular esto o
   quitarlo: un respaldo mal calibrado empeora el salto en vez de evitarlo. */

@font-face {
  font-family: 'Oswald respaldo';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 84.5%;
  ascent-override: 141.2%;
  descent-override: 34.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Poppins respaldo';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 102.7%;
  ascent-override: 102.2%;
  descent-override: 34.1%;
  line-gap-override: 9.7%;
}