:root { --ease-premium: cubic-bezier(0.16,1,0.3,1); }
  html {
    overflow-x: hidden; scroll-behavior: smooth; }
  section[id] { scroll-margin-top: 88px; }

  /* Hero background slideshow */
  .hero-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.55);
    opacity: 0;
    animation: heroSlide 24s infinite;
  }
  .hero-slide.slide-1 { animation-delay: 0s; object-position: center 40%; }
  .hero-slide.slide-2 { animation-delay: 8s; object-position: center 35%; }
  .hero-slide.slide-3 { animation-delay: 16s; object-position: center 30%; }
  @keyframes heroSlide {
    0%     { opacity: 0; transform: scale(1.02); }
    9.3%   { opacity: 1; transform: scale(1.01); }
    33.3%  { opacity: 1; transform: scale(1); }
    42.7%  { opacity: 0; transform: scale(1.015); }
    100%   { opacity: 0; }
  }

  /* Fade-in for content already in view on load (hero) */
  @keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .load-reveal { opacity: 0; animation: fadeUpIn 1s var(--ease-premium) forwards; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .load-reveal-opacity { opacity: 0; animation: fadeIn 1s var(--ease-premium) forwards; }

  /* Scroll-triggered reveal for the rest of the page */
  .reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 1.1s var(--ease-premium), transform 1.1s var(--ease-premium);
  }
  .reveal { transform: translateY(36px); }
  .reveal-left { transform: translateX(-48px); }
  .reveal-right { transform: translateX(48px); }
  .reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }
  .reveal-delay-1.is-visible { transition-delay: .12s; }
  .reveal-delay-2.is-visible { transition-delay: .24s; }
  .reveal-delay-3.is-visible { transition-delay: .36s; }

  /* Variant that settles at a dimmed opacity instead of full 1 (e.g. reserved/closed cards) */
  .reveal-dim { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-premium), transform 1.1s var(--ease-premium); }
  .reveal-dim.is-visible { opacity: .8; transform: none; }

  /* Nav underline */
  .nav-link { position: relative; padding-bottom: 2px; }
  .nav-link::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
    background: currentColor; transition: right .45s var(--ease-premium);
  }
  .nav-link:hover::after { right: 0; }

  /* Horizontal carousels */
  .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .fade-edge-l, .fade-edge-r {
    position: absolute; top: 0; bottom: 0; width: 96px; z-index: 10; pointer-events: none;
  }
  .fade-edge-l { left: 0; background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%); }
  .fade-edge-r { right: 0; background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%); }
  @media (max-width: 640px) {
    .fade-edge-l, .fade-edge-r { width: 36px; }
  }

  /* En pantallas estrechas las apariciones laterales se vuelven verticales.
     Desplazadas 48px a un lado, los bloques que aún no han aparecido
     ensanchaban el documento y el móvil se podía arrastrar en horizontal. */
  @media (max-width: 900px) {
    .reveal-left, .reveal-right { transform: translateY(28px); }
  }

  /* Nav glass background that fades out instead of a hard edge */
  .nav-glass-bg {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    transition: background .35s var(--ease-premium);
  }

  /* Nav stays fixed site-wide, hides on scroll-down, reappears on scroll-up */
  #siteNav { transition: transform .4s var(--ease-premium); }
  #siteNav.nav-hidden { transform: translateY(-100%); }
  #siteNav.nav-scrolled { color: #1b1c1c; }
  #siteNav.nav-scrolled .nav-logo { color: #1b1c1c; }

  /* El isotipo mide 22px de ancho y la norma WCAG 2.2 pide 24 para una zona
     pulsable. Se le da holgura a los lados: el dibujo no se mueve de sitio,
     el área que se puede tocar sí crece. */
  .nav-logo { padding-inline: 2px; }

  /* El botón de acceso sigue a la barra, en vez de llevar el color escrito
     en sus propias clases. Antes se quedaba blanco cuando la barra pasaba a
     su versión clara, y desaparecía.

     Arriba, sobre la fotografía, un contorno. Al desplazar, una pastilla
     maciza: el cristal de la barra es traslúcido y detrás puede haber una
     fotografía oscura o una sección blanca, así que un color opaco propio es
     lo único que se lee en los dos casos. */
  .nav-cta-ghost {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.3);
  }
  .nav-cta-ghost:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
  }
  #siteNav.nav-scrolled .nav-cta-ghost {
    background: #1b1c1c;
    border-color: #1b1c1c;
    color: #ffffff;
  }
  #siteNav.nav-scrolled .nav-cta-ghost:hover {
    background: #000000;
    border-color: #000000;
  }

  /* El selector de idioma tenía el mismo problema que el botón: el blanco
     escrito en sus propias reglas. Sobre la barra clara no se veía ninguno de
     los dos idiomas. El del pie queda fuera de la barra, y el del menú
     desplegado de móvil vive dentro de ella pero sobre un fondo casi negro:
     ese se excluye por su clase, o la corrección lo rompería. */
  #siteNav.nav-scrolled .gh-idioma:not(.gh-idioma-movil) a { color: rgba(27,28,28,.65); }
  #siteNav.nav-scrolled .gh-idioma:not(.gh-idioma-movil) a + a { border-left-color: rgba(27,28,28,.22); }
  #siteNav.nav-scrolled .gh-idioma:not(.gh-idioma-movil) a:hover,
  #siteNav.nav-scrolled .gh-idioma:not(.gh-idioma-movil) a:focus-visible,
  #siteNav.nav-scrolled .gh-idioma:not(.gh-idioma-movil) a.gt-current-lang { color: #1b1c1c; }

  /* Y el botón del menú en móvil: icono blanco sobre un disco negro al 35 %.
     Sobre la barra clara el disco se aclara y el icono se pierde. Macizo. */
  #siteNav.nav-scrolled #navBoton { background: #1b1c1c; }
  #siteNav.nav-scrolled #navBoton:hover { background: #000000; }
  #siteNav.nav-scrolled .nav-glass-bg {
    background: rgba(251,249,249,0.38);
    -webkit-mask-image: none;
    mask-image: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-slide, .load-reveal, .load-reveal-opacity, .nav-link::after {
      animation: none !important; transition: none !important;
    }
    .hero-slide.slide-1 { opacity: 1; }
    .load-reveal, .load-reveal-opacity { opacity: 1; transform: none; }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
    .reveal-dim { opacity: .8; transform: none; transition: none; }
  }

  /* --- CRM: filtros del catálogo y ventanas modales de captación --- */
  .filter-chip { background: transparent; border: 1px solid rgba(0,0,0,0.12); }
  .filter-chip.is-active { background: #000; color: #fff; border-color: #000; }
  .project-card[data-hidden="true"] { display: none; }
  .modal-overlay { display: none; align-items: center; justify-content: center; }
  .modal-panel {
    scrollbar-width: none; -ms-overflow-style: none;
    opacity: 0; transform: scale(.96) translateY(16px);
    transition: opacity .4s var(--ease-premium), transform .4s var(--ease-premium);
  }
  .modal-panel::-webkit-scrollbar { display: none; }
  .modal-overlay.is-open .modal-panel { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .modal-panel { transition: none; opacity: 1; transform: none; }
  }
/* Trampa para bots: invisible para las personas, pero no oculta con display:none,
   porque algunos bots ignoran los campos ocultos de esa forma. */
.gh-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Subrayado permanente en el enlace del menú de la página actual.
   Estaba en las páginas interiores del diseño original, no en la portada. */
.nav-link.is-active::after {
	right: 0;
}

/* Casillas en forma de píldora del formulario de valoración: la casilla real
   queda invisible encima y lo que se ve es la etiqueta. */
.chip-check {
	position: relative;
}

.chip-check input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.chip-check span {
	display: block;
	text-align: center;
}

.chip-check input:checked + span {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* ---- Mapas de la huella territorial -------------------------------------
 * Geometria real: el contorno de la Comunidad de Madrid y los 128 barrios de
 * la capital. Cada zona lleva marcador y nombre, con linea guia hasta una
 * etiqueta en el margen; el margen de cada lado se calcula con la etiqueta mas
 * larga que le toca, asi que ningun nombre se corta.
 */

.gh-mapa {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.gh-mapa-tierra {
	fill: #cfc9be;
	stroke: #cfc9be;
	stroke-width: 4;
	stroke-linejoin: round;
}

/* La capital, marcada dentro de la Comunidad: sin ella el mapa grande no da
 * ninguna referencia de donde esta cada cosa. */
.gh-mapa-capital {
	fill: #b0a89a;
	stroke: #b0a89a;
	stroke-width: 4;
	stroke-linejoin: round;
}

/* La trama de barrios da textura de mapa de verdad, no de mancha. */
.gh-mapa-trama {
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.8;
	opacity: .6;
}

.gh-mapa-guias path {
	fill: none;
	stroke: #171310;
	stroke-width: 1.8;
	opacity: .35;
}

.gh-halo {
	fill: #457298;
	opacity: .18;
	transform-box: fill-box;
	transform-origin: center;
	animation: gh-brota .9s cubic-bezier(.22, 1, .36, 1) both;
}

.gh-punto {
	fill: #457298;
	stroke: #ffffff;
	stroke-width: 5;
}

.gh-mapa-nombres text {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 36px;
	font-weight: 600;
	fill: #171310;
	dominant-baseline: middle;
	/* Halo del color del fondo para que el nombre se lea tambien cuando cae
	 * sobre la silueta. */
	paint-order: stroke;
	stroke: #f5f3f3;
	stroke-width: 7;
	stroke-linejoin: round;
}

@keyframes gh-brota {
	from { transform: scale(.3); opacity: 0; }
	to   { transform: scale(1); opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
	.gh-halo { animation: none; }
}

/* En pantallas estrechas el nombre sobre el mapa saldria ilegible, asi que se
 * retira junto con su guia: las zonas se leen en la leyenda de debajo. */
@media (max-width: 782px) {
	.gh-mapa-nombres,
	.gh-mapa-guias {
		display: none;
	}
}

/* ---- Los titulares en Bodoni -------------------------------------------
 * La Bodoni es una didona: su gracia está en el contraste entre el asta
 * gruesa y el filete fino. El navegador elige solo el tamaño óptico a partir
 * del cuerpo, y en un titular de 72 px se va al máximo contraste: los filetes
 * quedan en un pelo, se rompen al antialiasar y la palabra se lee sucia. Los
 * titulares además heredaban peso 400 porque `text-5xl` solo fija el cuerpo.
 *
 * Se fija un tamaño óptico bajo —el que la propia fuente trae para cuerpos
 * pequeños, donde los filetes tienen que aguantar— y algo más de peso. Sigue
 * siendo Bodoni, pero no se deshilacha.
 *
 * Van cualificados por elemento porque Tailwind inyecta su hoja después de
 * esta y, a igualdad de especificidad, ganaría él.
 */

:is(h1, h2, h3, h4, p, span, div, a, blockquote, figcaption).font-headline-lg {
	font-weight: 600;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 20;
}

:is(h1, h2, h3, h4, p, span, div, a, blockquote, figcaption).font-headline-md {
	font-weight: 500;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
}

/* El titular de portada va aparte: es texto SVG y lleva sus propios ajustes. */

/* ---- El color de cada vertical -----------------------------------------
 * El brief de marca es explícito: cada departamento tiene su color y su
 * sección debe llevarlo. Las plantillas usan estas clases y el color lo pone
 * la variable que publica gh_estilo_vertical(), así el mismo marcado vale
 * para las cinco y un cambio de paleta se hace en un solo sitio.
 *
 * Sin vertical —una página que no sea de departamento— caen al azul
 * corporativo, que es el del grupo.
 */

.gh-v-fondo {
	background-color: var(--gh-vertical, #457298);
	color: var(--gh-vertical-tinta, #ffffff);
}

.gh-v-texto {
	color: var(--gh-vertical, #457298);
}

.gh-v-borde {
	border-color: var(--gh-vertical, #457298);
}

/* Fondo tenue para bloques amplios: el color plano a toda página cansa. */
.gh-v-velo {
	background-color: color-mix(in srgb, var(--gh-vertical, #457298) 12%, transparent);
}

/* Sobre el fondo de la vertical, los textos secundarios bajan de intensidad
 * respetando la tinta que le corresponda —blanca o negra según el color—. */
.gh-v-fondo .gh-v-suave {
	color: color-mix(in srgb, var(--gh-vertical-tinta, #ffffff) 70%, transparent);
}

.gh-v-fondo .gh-v-linea {
	border-color: color-mix(in srgb, var(--gh-vertical-tinta, #ffffff) 35%, transparent);
}

/* El inverso: fondo en la tinta de la vertical y texto en su color. Lo usan
 * los botones que van dentro de un bloque ya teñido. */
.gh-v-tinta-fondo {
	background-color: var(--gh-vertical-tinta, #ffffff);
	color: var(--gh-vertical, #457298);
}

/* Superficies grandes. Coincide con el color de la vertical salvo en Activos,
 * cuyo gris es un neutro que no sostiene un bloque de énfasis. */
.gh-v-solido {
	background-color: var(--gh-vertical-solido, #457298);
	color: var(--gh-vertical-solido-tinta, #ffffff);
}

.gh-v-solido .gh-v-suave {
	color: color-mix(in srgb, var(--gh-vertical-solido-tinta, #ffffff) 70%, transparent);
}

.gh-v-solido-tinta {
	background-color: var(--gh-vertical-solido-tinta, #ffffff);
	color: var(--gh-vertical-solido, #457298);
}

/* La basa sobre la que apoyan los cuatro pilares. */
.gh-v-fondo-basa {
	background-color: #457298;
	color: #ffffff;
}

/* ---------------------------------------------------------------------
   Horquilla de inversión (formulario de acceso a proyecto)

   Al marcar una opción se ilumina la tarjeta entera, no solo el círculo
   del radio: en un móvil el objetivo táctil es la tarjeta, y la
   confirmación visual tiene que ir donde se ha tocado.
   ------------------------------------------------------------------- */
.gh-horquilla:has(input:checked) {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .55);
}

.gh-horquilla:has(input:focus-visible) {
	outline: 2px solid rgba(255, 255, 255, .7);
	outline-offset: 2px;
}

/* Reserva para navegadores sin :has() — el radio marcado sigue viéndose. */
.gh-horquilla input { accent-color: #fff; }

/* =====================================================================
   Asistente de primer contacto
   Reunión 31/08/2026. Recorrido guiado de opciones cerradas.
   ===================================================================== */

.gh-asistente {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
}

/* --- La marca: dos destellos, el signo de «esto te ayuda» --- */
.gh-asis-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: #4cd7f6;
	transition: width .32s ease, height .32s ease;
}

.gh-asis-marca-svg { width: 100%; height: 100%; }

/*
 * Un latido muy lento. Lo justo para que el ojo lo encuentre en una página
 * llena de fotografía, sin llegar a distraer de lo que se está leyendo.
 */
@keyframes gh-asis-latido {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .78; transform: scale(.93); }
}

.gh-asis-visible .gh-asis-marca-svg { animation: gh-asis-latido 3.4s ease-in-out infinite; }
.gh-asis-sin-movimiento .gh-asis-marca-svg,
.gh-asis-abierto .gh-asis-marca-svg { animation: none; }

/*
 * Lanzador discreto (portada). Comunica disponibilidad sin reclamar: más
 * bajo (~44 px), letra menor y sin latido. El texto no se pliega ni se
 * asoma en ciclos: la etiqueta «Elena · Asistente» queda fija.
 */
.gh-asis-discreto .gh-asis-lanzador {
	gap: 8px;
	padding: 10px 18px 10px 13px;
	font-size: 12.5px;
	letter-spacing: .02em;
}

.gh-asis-discreto .gh-asis-marca { width: 24px; height: 24px; }
.gh-asis-discreto .gh-asis-marca-svg { animation: none; }

/* En pantallas estrechas queda la marca y «Elena», sin ocupar viewport. */
@media (max-width: 480px) {
	.gh-asis-discreto .gh-asis-lanzador { padding: 10px 14px 10px 12px; max-width: 46vw; }
	.gh-asis-discreto .gh-asis-lanzador-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.gh-asis-marca-cabecera {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: rgba(76, 215, 246, .14);
	padding: 6px;
}

/* --- Lanzador --- */
.gh-asis-lanzador {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 78vw;
	padding: 13px 22px 13px 16px;
	border: 0;
	border-radius: 999px;
	background: #14100c;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(19, 27, 46, .26);
	opacity: 0;
	transform: translateY(14px) scale(.96);
	pointer-events: none;
	position: relative;
	transition: background-color .2s ease, transform .34s cubic-bezier(.22, .61, .36, 1),
	            opacity .34s ease, padding .32s ease, gap .32s ease,
	            width .32s ease, height .32s ease;
}

.gh-asis-lanzador-texto {
	max-width: 340px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: max-width .32s ease, opacity .22s ease, margin .32s ease;
}

.gh-asis-visible .gh-asis-lanzador {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * Plegado: se va el texto y queda la marca sola.
 *
 * Las medidas van fijas y el relleno a cero. Antes se dejaba que el ancho
 * lo calculara el contenido, y un margen negativo de -10px para cerrar el
 * hueco del texto encogía el botón: salía de 46x56, un rectángulo vertical
 * en vez de un círculo. Con ancho y alto iguales no hay forma de que se
 * descuadre.
 */
.gh-asis-plegado .gh-asis-lanzador {
	width: 58px;
	height: 58px;
	padding: 0;
	gap: 0;
	justify-content: center;
}

.gh-asis-plegado .gh-asis-lanzador-texto {
	max-width: 0;
	opacity: 0;
	margin: 0;
}

/* Plegado la marca crece: es lo único que queda y tiene que leerse sola. */
.gh-asis-plegado .gh-asis-marca { width: 28px; height: 28px; }

/*
 * Un halo que sale del botón y se desvanece. Sustituye al latido del icono
 * cuando está plegado: el movimiento pasa del dibujo al contorno, que se
 * percibe desde el rabillo del ojo sin obligar a mirar.
 */
.gh-asis-plegado .gh-asis-lanzador::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1.5px solid rgba(76, 215, 246, .55);
	animation: gh-asis-halo 2.8s ease-out infinite;
	pointer-events: none;
}

@keyframes gh-asis-halo {
	0%       { transform: scale(1);    opacity: .55; }
	70%, 100% { transform: scale(1.45); opacity: 0; }
}

.gh-asis-sin-movimiento .gh-asis-plegado .gh-asis-lanzador::after,
.gh-asis-abierto .gh-asis-lanzador::after { animation: none; opacity: 0; }

.gh-asis-lanzador:hover { background: #1d2942; }
.gh-asis-lanzador:focus-visible { outline: 3px solid #457298; outline-offset: 3px; }

.gh-asis-sin-movimiento .gh-asis-lanzador {
	transform: none;
	transition: opacity .2s ease;
}

.gh-asis-sin-movimiento .gh-asis-lanzador-texto { transition: none; }

/* --- Panel --- */

/*
 * Sin esta regla el panel no se cierra nunca. El atributo hidden pone
 * display:none desde la hoja del navegador, pero .gh-asis-panel{display:flex}
 * tiene más especificidad y lo anulaba: la equis marcaba el atributo y no
 * pasaba nada. Con el selector de atributo la especificidad ya es mayor.
 */
.gh-asis-panel[hidden] { display: none; }

.gh-asis-panel {
	width: min(392px, calc(100vw - 40px));
	max-height: min(600px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(23, 19, 16, .1);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(19, 27, 46, .2);
	animation: gh-asis-entra .24s cubic-bezier(.22, .61, .36, 1);
}

@keyframes gh-asis-entra {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.gh-asis-sin-movimiento .gh-asis-panel { animation: none; }

.gh-asis-cabecera {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 18px;
	background: #14100c;
	color: #fff;
}

.gh-asis-textos { flex: 1; min-width: 0; }

.gh-asis-titulo {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.2;
}

.gh-asis-subtitulo {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .68);
}

.gh-asis-cerrar {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.gh-asis-cerrar:hover { background: rgba(255, 255, 255, .24); }
.gh-asis-cerrar:focus-visible { outline: 2px solid #4cd7f6; outline-offset: 2px; }
.gh-asis-aspa { width: 100%; height: 100%; }

/* --- Progreso --- */
.gh-asis-progreso { display: flex; gap: 5px; padding: 14px 18px 0; }

.gh-asis-punto {
	height: 3px;
	flex: 1;
	border-radius: 999px;
	background: rgba(23, 19, 16, .1);
	transition: background-color .25s ease;
}

.gh-asis-punto-hecho { background: #457298; }

/* --- Cuerpo --- */
.gh-asis-cuerpo { padding: 16px 18px 20px; overflow-y: auto; }

.gh-asis-pregunta {
	margin: 0 0 14px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #171310;
}

.gh-asis-opciones { display: grid; gap: 9px; }

/* --- Tarjeta de opción --- */
.gh-asis-tarjeta {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 62px;
	padding: 12px 14px;
	border: 1.5px solid rgba(23, 19, 16, .1);
	border-radius: 14px;
	background: #fff;
	color: #171310;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.gh-asis-tarjeta-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	padding: 9px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--gh-asis-color, #457298) 12%, #fff);
	color: var(--gh-asis-color, #457298);
}

/* Reserva para navegadores sin color-mix. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.gh-asis-tarjeta-icono { background: #f1f4f7; }
}

.gh-asis-tarjeta-icono svg { width: 100%; height: 100%; }

.gh-asis-tarjeta-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }

.gh-asis-tarjeta-titulo {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

.gh-asis-tarjeta-detalle {
	font-size: 12px;
	line-height: 1.35;
	color: #6b6560;
}

/* La marca de elegida: invisible hasta que se pulsa. */
.gh-asis-tarjeta-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	padding: 4px;
	border-radius: 50%;
	background: var(--gh-asis-color, #457298);
	color: #fff;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .18s ease, transform .18s ease;
}

.gh-asis-tarjeta-check svg { width: 100%; height: 100%; }

.gh-asis-tarjeta:hover {
	border-color: var(--gh-asis-color, #457298);
	background: #fafbfc;
}

.gh-asis-tarjeta:focus-visible {
	outline: 2px solid var(--gh-asis-color, #457298);
	outline-offset: 2px;
}

.gh-asis-elegida {
	border-color: var(--gh-asis-color, #457298);
	background: #fafbfc;
	transform: scale(.99);
}

.gh-asis-elegida .gh-asis-tarjeta-check { opacity: 1; transform: none; }

.gh-asis-sin-movimiento .gh-asis-tarjeta,
.gh-asis-sin-movimiento .gh-asis-tarjeta-check { transition: none; }

/* --- Resumen --- */
.gh-asis-resumen {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 16px;
	padding: 16px;
	border-radius: 14px;
	background: #f6f8fa;
	border: 1px solid rgba(23, 19, 16, .07);
}

.gh-asis-resumen dt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b6560;
	padding-top: 2px;
}

.gh-asis-resumen dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	color: #171310;
}

.gh-asis-ayuda {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6560;
}

/* --- Volver --- */
.gh-asis-volver {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: #6b6560;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

.gh-asis-flecha { width: 15px; height: 15px; }
.gh-asis-volver:hover { color: #171310; }
.gh-asis-volver:focus-visible { outline: 2px solid #457298; outline-offset: 3px; border-radius: 4px; }

/* --- Formulario final --- */
.gh-asis-form { display: grid; gap: 12px; }
.gh-asis-campo { display: grid; gap: 5px; }

.gh-asis-campo label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b6560;
}

.gh-asis-campo input {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1.5px solid rgba(23, 19, 16, .13);
	border-radius: 11px;
	font-size: 14px;
	font-family: inherit;
	color: #171310;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.gh-asis-campo input:focus {
	outline: none;
	border-color: #457298;
	box-shadow: 0 0 0 3px rgba(69, 114, 152, .16);
}

.gh-asis-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6560;
}

.gh-asis-consent input { margin-top: 2px; flex-shrink: 0; accent-color: #457298; }

.gh-asis-error {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: #a0201a;
	font-size: 13px;
	line-height: 1.45;
}

.gh-asis-enviar {
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	border: 0;
	border-radius: 999px;
	background: #131b2e;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}

.gh-asis-enviar:hover:not(:disabled) { background: #1d2942; }
.gh-asis-enviar:disabled { opacity: .65; cursor: default; }
.gh-asis-enviar:focus-visible { outline: 3px solid #457298; outline-offset: 3px; }

/* --- Confirmación --- */
.gh-asis-hecho { text-align: center; padding: 22px 4px 10px; }

.gh-asis-sello {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	padding: 13px;
	border-radius: 50%;
	background: rgba(69, 114, 152, .12);
	color: #457298;
}

.gh-asis-sello svg { width: 100%; height: 100%; }

.gh-asis-hecho-titulo {
	margin: 0 0 8px;
	font-family: "Bodoni Moda", Georgia, serif;
	font-size: 23px;
	color: #171310;
}

.gh-asis-hecho-texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #6b6560;
}

/* --- Móvil: el panel ocupa casi toda la pantalla --- */
@media (max-width: 520px) {
	.gh-asistente { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
	.gh-asis-lanzador { max-width: none; justify-content: center; }
	.gh-asis-plegado .gh-asis-lanzador { align-self: flex-end; }
	.gh-asis-panel { width: 100%; max-height: calc(100vh - 110px); }
	.gh-asis-abierto .gh-asis-lanzador { display: none; }
}

/* =====================================================================
   Consentimiento y protección de datos

   Tres piezas: la información básica del artículo 13 del RGPD, la casilla
   obligatoria de la finalidad y la casilla aparte, opcional, de las
   comunicaciones comerciales.
   ===================================================================== */

.gh-rgpd { display: grid; gap: 10px; margin-top: 4px; }

.gh-rgpd-info {
	margin: 0;
	padding: 11px 13px;
	border-radius: 10px;
	background: rgba(23, 19, 16, .04);
	font-size: 11.5px;
	line-height: 1.55;
	color: #6b6560;
}

.gh-rgpd-info a { color: inherit; text-decoration: underline; }
.gh-rgpd-info a:hover { color: #171310; }

.gh-rgpd-casilla {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	line-height: 1.5;
	color: #6b6560;
	cursor: pointer;
}

/*
 * El cuadro es pequeño por naturaleza, así que la zona pulsable la da la
 * etiqueta entera. En un móvil eso marca la diferencia entre marcarla a la
 * primera o pelearse con ella.
 */
.gh-rgpd-casilla input {
	margin-top: 2px;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	accent-color: #457298;
	cursor: pointer;
}

.gh-rgpd-casilla a { color: inherit; text-decoration: underline; font-weight: 600; }
.gh-rgpd-casilla a:hover { color: #171310; }

.gh-rgpd-casilla input:focus-visible {
	outline: 2px solid #457298;
	outline-offset: 2px;
}

/* La opcional se distingue de la obligatoria sin necesidad de leerla. */
.gh-rgpd-opcional {
	padding-top: 9px;
	border-top: 1px solid rgba(23, 19, 16, .08);
}

.gh-rgpd-opcional em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 11px;
	opacity: .8;
}

/* --- Sobre fondo oscuro: la ventana de acceso a proyecto --- */
.gh-rgpd-oscuro .gh-rgpd-info {
	background: rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .62);
}

.gh-rgpd-oscuro .gh-rgpd-info a:hover,
.gh-rgpd-oscuro .gh-rgpd-casilla a:hover { color: #fff; }

.gh-rgpd-oscuro .gh-rgpd-casilla { color: rgba(255, 255, 255, .72); }
.gh-rgpd-oscuro .gh-rgpd-casilla input { accent-color: #fff; }
.gh-rgpd-oscuro .gh-rgpd-opcional { border-top-color: rgba(255, 255, 255, .14); }

/* La casilla opcional del asistente, separada de la obligatoria. */
/*
 * El texto del consentimiento va suelto junto a su casilla (04/09): el
 * recuadro que lo envolvía venía del chat anterior y aquí solo añadía dos
 * rectángulos grises encima del formulario.
 */
.gh-asis-consent-texto { display: block; }

.gh-asis-consent-opcional {
	padding-top: 9px;
	border-top: 1px solid rgba(23, 19, 16, .08);
}

.gh-asis-consent em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 11px;
	opacity: .8;
}

/* =====================================================================
   Sello de garantía hipotecaria

   Correo del 01/09: el cliente lo quería mucho más visible. Es el
   argumento que más pesa para quien duda si entrar, así que se le da
   peso de bloque en vez de nota al pie.
   ===================================================================== */

.gh-garantia {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	background: rgba(69, 114, 152, .08);
	border: 1px solid rgba(69, 114, 152, .22);
	color: #35597c;
}

.gh-garantia svg {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
}

.gh-garantia span {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* Sobre fondo oscuro: la ventana de acceso y el área privada. */
.gh-garantia-oscura {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .2);
	color: #ffffff;
}

/* Versión grande, para cuando encabeza un bloque. */
.gh-garantia-grande { padding: 14px 18px; gap: 12px; }
.gh-garantia-grande svg { width: 26px; height: 26px; }
.gh-garantia-grande span { font-size: 13.5px; }

/* El saludo de Elena, solo en la primera pantalla del asistente. */
.gh-asis-saludo {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f3f6f9;
	border: 1px solid rgba(69, 114, 152, .14);
	font-size: 13.5px;
	line-height: 1.55;
	color: #35597c;
}

/*
 * El carril del carrusel. Se oculta la barra de desplazamiento porque el
 * movimiento es automático y la barra, además de sobrar, delataba el salto
 * del bucle al volver al principio.
 */
.gh-carril {
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: auto;
}

.gh-carril::-webkit-scrollbar { display: none; }


/* =====================================================================
   Elena conversacional: el hilo del chat

   El panel es una columna: cabecera fija, hilo con scroll, sugerencias y
   barra de entrada fija abajo. La altura minima del hilo evita que el
   panel «baile» al llegar mensajes.
   ===================================================================== */

.gh-asis-charla {
	flex: 1 1 auto;
	min-height: 220px;
	padding: 16px 16px 8px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Elena no habla en burbuja: texto editorial alineado a la izquierda, con
 * su identificador encima. La burbuja queda para el visitante, sutil y con
 * el texto oscuro. Lo que destaca es lo que se dice, no el contenedor.
 */
.gh-asis-burbuja {
	max-width: 94%;
	padding: 0 2px;
	background: transparent;
	color: #1b1c1c;
	font-size: 14px;
	line-height: 1.55;
	white-space: normal;
	overflow-wrap: break-word;
}

.gh-asis-quien {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 4px 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #747878;
}

.gh-asis-burbuja-usuario {
	align-self: flex-end;
	max-width: 86%;
	padding: 9px 13px;
	border-radius: 13px;
	background: #f0eeeb;
	color: #1b1c1c;
}

/* Los tres puntos de «escribiendo». */
.gh-asis-escribiendo {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	padding: 4px 2px;
	font-size: 12.5px;
	color: #747878;
}

/* Sugerencias: atajos que se envian como texto, no un menu. */
.gh-asis-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 10px;
}

.gh-asis-chips:empty { display: none; }

.gh-asis-chip {
	border: 1px solid rgba(19, 27, 46, .22);
	background: #fff;
	color: #131b2e;
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12.5px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease-out, border-color .2s ease-out;
}

.gh-asis-chip:hover { background: #eef1f6; border-color: rgba(19, 27, 46, .4); }

/* La barra de entrada, siempre presente. */
.gh-asis-entrada {
	display: flex;
	gap: 8px;
	padding: 10px 12px 12px;
	border-top: 1px solid rgba(23, 19, 16, .08);
	background: #fff;
}

.gh-asis-entrada-campo {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid rgba(23, 19, 16, .16);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.3;
	background: #fff;
	color: #1b1c1c;
}

.gh-asis-entrada-campo:focus {
	outline: none;
	border-color: #457298;
	box-shadow: 0 0 0 3px rgba(69, 114, 152, .16);
}

.gh-asis-entrada-boton {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #14100c;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease-out;
}

.gh-asis-entrada-boton:hover { background: #457298; }
.gh-asis-entrada-boton svg { width: 18px; height: 18px; }

/* El consentimiento: la unica pieza con casillas dentro del hilo. */
@media (prefers-reduced-motion: reduce) {
	.gh-asis-escribiendo span { animation: none; }
}


/* =====================================================================
   El orbe de Elena

   La identidad visual del asistente, según la referencia del cliente: no
   una esfera maciza sino una BURBUJA de cristal hueca —el fondo se ve a
   través— con la membrana luminosa y, dentro, un anillo de energía que
   gira despacio y cambia de forma, en el azul de marca con un destello
   dorado. Todo CSS: gradientes, dos pseudoelementos y transform. Sin una
   sola librería, y a 60 fps porque solo se animan transform y opacity.

   El tamaño lo pone quien lo usa vía --orbe (lanzador 28, cabecera 56,
   miniatura 16, aviso 38). Estados: reposo (respira a 7 s, el anillo gira
   a 16 s), hover/foco (halo y leve expansión), pensando (el anillo se
   acelera) y respuesta lista (un único pulso). Con movimiento reducido,
   quieto del todo; con la pestaña oculta, en pausa.
   ===================================================================== */

.gh-orbe {
	--orbe: 28px;
	position: relative;
	display: inline-block;
	width: var(--orbe);
	height: var(--orbe);
	flex-shrink: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, rgba(150, 180, 215, .1), rgba(150, 180, 215, .03) 55%, transparent 72%);
	border: 1px solid rgba(115, 145, 175, .5);
	box-shadow:
		inset 0 0 calc(var(--orbe) * .09) rgba(255, 255, 255, .4),
		inset 0 calc(var(--orbe) * .02) calc(var(--orbe) * .05) rgba(255, 255, 255, .55),
		inset 0 calc(var(--orbe) * -.03) calc(var(--orbe) * .07) rgba(140, 175, 215, .4),
		0 0 calc(var(--orbe) * .2) rgba(110, 150, 195, .25);
	animation: gh-orbe-respira 7s ease-in-out infinite;
}

/* El anillo de energía: dónut azul de marca, descentrado e irregular. */
.gh-orbe::before {
	content: '';
	position: absolute;
	left: 18%;
	top: 22%;
	width: 58%;
	height: 56%;
	border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%;
	background: radial-gradient(closest-side, transparent 50%, rgba(120, 175, 225, .95) 65%, rgba(69, 114, 152, .8) 76%, transparent 89%);
	filter: blur(calc(var(--orbe) * .012));
	animation: gh-orbe-gira 16s linear infinite, gh-orbe-forma 9s ease-in-out infinite;
}

/* El trazo blanco del anillo y la chispa dorada, girando al contrario. */
.gh-orbe::after {
	content: '';
	position: absolute;
	left: 22%;
	top: 18%;
	width: 56%;
	height: 58%;
	border-radius: 55% 45% 48% 52% / 46% 54% 48% 52%;
	background:
		radial-gradient(closest-side, transparent 55%, rgba(255, 255, 255, .9) 67%, transparent 78%),
		radial-gradient(circle at 24% 68%, rgba(231, 176, 10, .45), transparent 20%);
	filter: blur(calc(var(--orbe) * .008));
	animation: gh-orbe-gira 23s linear infinite reverse;
}

@keyframes gh-orbe-respira {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.03); }
}

@keyframes gh-orbe-gira {
	to { transform: rotate(360deg); }
}

@keyframes gh-orbe-forma {
	0%, 100% { border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; }
	50%      { border-radius: 54% 46% 47% 53% / 45% 55% 47% 53%; }
}

/* Hover y foco del elemento que lo contiene: halo y leve expansión. */
.gh-asis-lanzador:hover .gh-orbe,
.gh-asis-lanzador:focus-visible .gh-orbe {
	box-shadow:
		inset 0 0 calc(var(--orbe) * .09) rgba(255, 255, 255, .5),
		inset 0 calc(var(--orbe) * .02) calc(var(--orbe) * .05) rgba(255, 255, 255, .65),
		inset 0 calc(var(--orbe) * -.03) calc(var(--orbe) * .07) rgba(140, 175, 215, .5),
		0 0 calc(var(--orbe) * .32) rgba(110, 150, 195, .38);
	transform: scale(1.05);
	transition: box-shadow .2s ease-out, transform .2s ease-out;
}

/* Pensando: el anillo se acelera. Es el estado, no un adorno. */
.gh-orbe-pensando::before { animation-duration: 3.5s, 4s; }
.gh-orbe-pensando::after { animation-duration: 5s; }

/* Respuesta lista: un pulso único y de vuelta al reposo. */
.gh-orbe-lista { animation: gh-orbe-pulso .5s ease-out 1; }

@keyframes gh-orbe-pulso {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* Pestaña oculta: nada se mueve. */
.gh-orbe-quieto .gh-orbe,
.gh-orbe-quieto .gh-orbe::before,
.gh-orbe-quieto .gh-orbe::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.gh-orbe,
	.gh-orbe::before,
	.gh-orbe::after,
	.gh-orbe-lista { animation: none; }
}

/* --- La cabecera del panel: el orbe protagonista sobre carbón --------- */

/*
 * El orbe manda en la cabecera (15/09, a petición del cliente).
 *
 * A 56 px se leía como un icono junto al texto. A 76 es la pieza principal,
 * que es lo que pedía la referencia. La cabecera crece con él y el texto se
 * recoloca solo.
 */
.gh-asis-cabecera .gh-orbe { --orbe: 76px; }

.gh-asis-nota {
	margin: 3px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .5);
}

/* --- El aviso contextual de /proyectos/ ------------------------------- */

.gh-asis-aviso-ctx {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	width: min(300px, calc(100vw - 48px));
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(23, 19, 16, .1);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(19, 27, 46, .16);
	animation: gh-asis-entra .28s cubic-bezier(.22, .61, .36, 1);
}

.gh-asis-aviso-ctx .gh-orbe { --orbe: 38px; animation-duration: 3.5s; }

.gh-asis-aviso-texto {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #1b1c1c;
}

.gh-asis-aviso-boton {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #14100c;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color .2s ease-out;
}

.gh-asis-aviso-boton:hover { background: #457298; }

.gh-asis-aviso-cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 6px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #747878;
	cursor: pointer;
}

.gh-asis-aviso-cerrar:hover { background: rgba(23, 19, 16, .06); }

.gh-asis-sin-movimiento .gh-asis-aviso-ctx { animation: none; }


/* =====================================================================
   Elena · cristal líquido oscuro, aclarado

   La piel visual del asistente: SOLO Elena; la web sigue editorial.
   Vidrio oscuro como pidió el brief del 02/09, pero un punto más claro
   y más transparente que la primera versión: del negro puro #050505 se
   pasa a un humo gris que deja respirar a la página de detrás. Blanco
   sobre oscuro, orbe en plata, monocromo estricto.

   Reglas de material: un único desenfocado principal (el panel), otro
   pequeño en el lanzador y el aviso; dentro del panel, solo fondos con
   alfa. El error es el único color, porque es función y no decoración.
   ===================================================================== */

/* --- El orbe: el único elemento con color de todo el agente ------------ */

/*
 * Paleta de la referencia —violeta, azul eléctrico, cian, blanco— SOLO
 * aquí: el resto del chat sigue monocromo. Esta versión CSS es la de las
 * miniaturas y el respaldo sin WebGL; los orbes protagonistas llevan
 * encima el lienzo del shader (.gh-orbe-lienzo) y ocultan estas capas.
 */
.gh-orbe {
	/*
	 * Esfera de cristal en coral, según la referencia del cliente (15/09).
	 *
	 * Una burbuja translúcida y clara, no una bola maciza: se ve el volumen
	 * por cómo la luz entra por arriba a la izquierda y se acumula abajo a la
	 * derecha, igual que en una pompa de jabón.
	 *
	 * El cuerpo casi blanco va el último de la lista: en CSS el primer
	 * gradiente se pinta encima, así que aquí el orden es de delante a atrás.
	 */
	background:
		/* El brillo especular de arriba, lo que la hace de cristal. */
		radial-gradient(ellipse 38% 28% at 34% 20%, rgba(255, 255, 255, .95), transparent 70%),
		/* El coral, concentrado en el centro y hacia abajo. */
		radial-gradient(circle at 58% 56%, rgba(255, 138, 142, .78), transparent 52%),
		radial-gradient(circle at 46% 68%, rgba(255, 168, 176, .6), transparent 48%),
		/* Un toque lila en el borde inferior izquierdo, como en la referencia. */
		radial-gradient(circle at 26% 74%, rgba(206, 150, 210, .45), transparent 40%),
		/* El cuerpo: casi blanco, apenas rosado. */
		radial-gradient(circle at 42% 34%, #fff 38%, #fdf1f1 70%, #f7e6e8 100%);
	border: 0;
	box-shadow:
		/*
		 * El filo de una burbuja: una línea clara justo dentro del borde y una
		 * sombra tenue por fuera. Sin esto se lee como un círculo pintado.
		 */
		inset 0 0 calc(var(--orbe) * .08) rgba(255, 255, 255, .9),
		inset calc(var(--orbe) * -.03) calc(var(--orbe) * -.05) calc(var(--orbe) * .14) rgba(226, 122, 132, .35),
		0 calc(var(--orbe) * .04) calc(var(--orbe) * .2) rgba(196, 122, 130, .25),
		0 0 calc(var(--orbe) * .1) rgba(255, 190, 195, .6);
	filter: blur(calc(var(--orbe) * .012));
}

/*
 * Los pliegues de seda del interior.
 *
 * Un gradiente cónico da las vetas —franjas que salen del centro— y girando
 * despacio parecen tela en movimiento. La máscara radial las difumina hacia el
 * borde para que no corten el filo de la burbuja.
 */
.gh-orbe::before {
	content: '';
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: conic-gradient(
		from 20deg at 46% 52%,
		rgba(255, 255, 255, 0) 0deg,
		rgba(255, 126, 132, .55) 42deg,
		rgba(255, 255, 255, .1) 96deg,
		rgba(255, 152, 160, .5) 152deg,
		rgba(255, 255, 255, .05) 214deg,
		rgba(232, 136, 168, .45) 272deg,
		rgba(255, 255, 255, 0) 330deg,
		rgba(255, 255, 255, 0) 360deg
	);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%);
	mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%);
	filter: blur(calc(var(--orbe) * .05));
	opacity: .9;
}

/*
 * Una segunda veta, más tenue y girando al revés: es lo que impide que el
 * dibujo se repita y da la sensación de tela que se pliega sobre sí misma.
 */
.gh-orbe::after {
	content: '';
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: conic-gradient(
		from 200deg at 56% 44%,
		rgba(255, 255, 255, 0) 0deg,
		rgba(255, 176, 150, .4) 70deg,
		rgba(255, 255, 255, .12) 140deg,
		rgba(214, 150, 214, .35) 230deg,
		rgba(255, 255, 255, 0) 320deg,
		rgba(255, 255, 255, 0) 360deg
	);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 74%);
	mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 74%);
	filter: blur(calc(var(--orbe) * .06));
	opacity: .75;
}

.gh-orbe::after { background: transparent; }

.gh-asis-lanzador:hover .gh-orbe,
.gh-asis-lanzador:focus-visible .gh-orbe {
	box-shadow:
		inset 0 0 calc(var(--orbe) * .08) rgba(255, 255, 255, .95),
		inset calc(var(--orbe) * -.03) calc(var(--orbe) * -.05) calc(var(--orbe) * .14) rgba(226, 122, 132, .4),
		0 calc(var(--orbe) * .05) calc(var(--orbe) * .24) rgba(196, 122, 130, .3),
		0 0 calc(var(--orbe) * .2) rgba(255, 170, 178, .75);
}

/* El lienzo del shader llena el orbe; las capas CSS se apartan. */
.gh-orbe-lienzo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
}

.gh-orbe-gl { background: transparent; border-color: rgba(255, 255, 255, .22); }
.gh-orbe-gl::before,
.gh-orbe-gl::after { display: none; }

/* --- El lanzador: vidrio de humo --------------------------------------- */

.gh-asis-lanzador {
	background: rgba(26, 26, 28, .62);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .2);
	transition: border-color .2s ease-out;
}

.gh-asis-lanzador:hover,
.gh-asis-lanzador:focus-visible {
	background: rgba(26, 26, 28, .62);
	border-color: rgba(255, 255, 255, .32);
}

/* --- El panel: humo transparente sobre la página ----------------------- */

.gh-asis-panel {
	width: min(440px, calc(100vw - 40px));
	max-height: min(660px, 78svh);
	background: rgba(24, 24, 26, .66);
	-webkit-backdrop-filter: blur(28px) saturate(115%);
	backdrop-filter: blur(28px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 26px;
	box-shadow:
		0 24px 70px rgba(0, 0, 0, .28),
		inset 0 1px 0 rgba(255, 255, 255, .14);
	color: #fff;
}

/* Sin desenfocado real, el vidrio se vuelve casi opaco: nada depende del blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gh-asis-panel { background: rgba(26, 26, 28, .96); }
	.gh-asis-lanzador { background: rgba(26, 26, 28, .94); }
	.gh-asis-aviso-ctx { background: rgba(26, 26, 28, .96); }
}

/* Quien pide más contraste, lo recibe: el cristal se cierra. */
@media (prefers-contrast: more) {
	.gh-asis-panel { background: rgba(18, 18, 20, .95); }
}

/* --- La cabecera, integrada en el mismo cristal ------------------------ */

/*
 * Clara, para que la esfera de cristal tenga luz que atravesar (15/09).
 *
 * La referencia del cliente es una burbuja translúcida sobre fondo blanco;
 * sobre el panel oscuro perdía el color y quedaba pálida. El resto del panel
 * se queda oscuro: sus burbujas y botones están pensados para ese fondo, y el
 * contraste entre las dos zonas separa bien la presentación de la conversación.
 */
.gh-asis-cabecera {
	background: linear-gradient(160deg, #fdfbfa 0%, #f7f1f1 58%, #f3eaeb 100%);
	border-bottom: 1px solid rgba(160, 120, 125, .18);
	padding: 20px 18px 16px;
	color: #2a2220;
}

.gh-asis-titulo {
	font-size: 10.5px;
	letter-spacing: .16em;
	/* 4,8:1 sobre el fondo claro de la cabecera. */
	color: rgba(42, 34, 32, .62);
}

.gh-asis-subtitulo {
	margin-top: 2px;
	font-size: 17px;
	font-weight: 600;
	/* 12,6:1 sobre el fondo claro de la cabecera. */
	color: #2a2220;
}

/* 4,6:1 sobre el fondo claro. */
.gh-asis-nota { font-size: 12.5px; color: rgba(42, 34, 32, .6); }

.gh-asis-cerrar { background: rgba(42, 34, 32, .08); color: #2a2220; }
.gh-asis-cerrar:hover { background: rgba(42, 34, 32, .16); }

/* El orbe de cabecera flota sobre una zona local más oscura, para que el
   resplandor violeta tenga dónde vivir sin teñir el panel. */
.gh-asis-cabecera .gh-orbe {
	box-shadow:
		/* La sombra interior del filo, la misma que en los demás tamaños: sin
		   ella la esfera se aplana justo donde más se ve. */
		inset 0 0 calc(var(--orbe) * .16) rgba(0, 0, 0, .75),
		0 8px 22px rgba(5, 0, 15, .45),
		0 0 calc(var(--orbe) * .34) rgba(108, 49, 255, .38),
		0 0 calc(var(--orbe) * .8) rgba(36, 91, 255, .16);
}

.gh-asis-cabecera .gh-orbe::marker { content: none; }

.gh-asis-cabecera {
	position: relative;
}

.gh-asis-cabecera::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 4px;
	width: 100px;
	height: 100px;
	/* En coral y muy tenue: acompaña a la esfera sin ensuciar el blanco. */
	background: radial-gradient(circle, rgba(255, 176, 170, .22), rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

/*
 * La crecida: al abrirse el panel, el orbe de cabecera nace pequeño y
 * abajo a la derecha —donde estaba el del lanzador— y sube a su sitio.
 * Simula la transición de elemento compartido sin mover nada entre
 * contenedores, que es donde se rompen las cosas.
 */
.gh-asis-abierto .gh-asis-cabecera .gh-orbe {
	animation: gh-orbe-crece .45s cubic-bezier(.22, .61, .36, 1);
}

@keyframes gh-orbe-crece {
	from { transform: translate(40vw, 30vh) scale(.42); opacity: .4; }
	to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.gh-asis-abierto .gh-asis-cabecera .gh-orbe { animation: none; }
}

/* --- La conversación, dentro del vidrio -------------------------------- */

.gh-asis-charla {
	gap: 20px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.gh-asis-charla::-webkit-scrollbar { width: 4px; }
.gh-asis-charla::-webkit-scrollbar-track { background: transparent; }
.gh-asis-charla::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 2px; }

/* 4,9:1 sobre el fondo claro de la cabecera. */
.gh-asis-quien { color: rgba(42, 34, 32, .58); }

.gh-asis-burbuja {
	max-width: 90%;
	color: rgba(255, 255, 255, .94);
}

.gh-asis-burbuja-usuario {
	max-width: 80%;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	padding: 12px 15px;
	color: #fff;
}

.gh-asis-escribiendo { color: rgba(255, 255, 255, .58); }

/* --- Sugerencias: chips de vidrio -------------------------------------- */

.gh-asis-chip {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .88);
}

.gh-asis-chip:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }

/* --- La entrada -------------------------------------------------------- */

.gh-asis-entrada {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.gh-asis-entrada-campo {
	background: rgba(255, 255, 255, .11);
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 22px;
	color: #fff;
}

.gh-asis-entrada-campo::placeholder { color: rgba(255, 255, 255, .5); }

.gh-asis-entrada-campo:focus {
	border-color: rgba(255, 255, 255, .44);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .07);
}

/* Enviar: blanco con flecha negra. El único botón macizo del cristal. */
.gh-asis-entrada-boton {
	width: 40px;
	height: 40px;
	background: #fff;
	color: #111111;
}

.gh-asis-entrada-boton:hover { background: #ececE8; }

/* --- Consentimiento y envío -------------------------------------------- */

.gh-asis-panel .gh-asis-consent { color: rgba(255, 255, 255, .88); }
.gh-asis-panel .gh-asis-consent em { color: rgba(255, 255, 255, .58); }

.gh-asis-panel .gh-asis-enviar {
	background: #fff;
	color: #111111;
}

.gh-asis-panel .gh-asis-enviar:hover { background: #ececE8; }

/* El error es funcional, no decorativo: rojo claro legible sobre humo. */
.gh-asis-panel .gh-asis-error { color: #ff9d94; }

/* --- El aviso contextual: notificación de humo ------------------------- */

.gh-asis-aviso-ctx {
	background: rgba(24, 24, 26, .72);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.gh-asis-aviso-texto { color: rgba(255, 255, 255, .94); }

.gh-asis-aviso-boton {
	background: transparent;
	border-radius: 0;
	padding: 2px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .42);
	color: #fff;
	letter-spacing: .06em;
}

.gh-asis-aviso-boton::after { content: ' →'; }
.gh-asis-aviso-boton:hover { background: transparent; border-bottom-color: #fff; }

.gh-asis-aviso-cerrar { color: rgba(255, 255, 255, .58); }
.gh-asis-aviso-cerrar:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* --- Móvil: hoja inferior de vidrio ------------------------------------ */

@media (max-width: 480px) {
	.gh-asis-panel {
		width: calc(100vw - 16px);
		max-height: 82svh;
		border-radius: 24px 24px 18px 18px;
	}

	.gh-asis-cabecera .gh-orbe { --orbe: 64px; }

	.gh-asis-entrada-campo { min-height: 48px; }

	.gh-asis-entrada-boton { width: 44px; height: 44px; }
}


/* =====================================================================
   Con WebGL activo, el CSS del orbe se aparta del todo

   El shader dibuja su propia membrana, velos y filo: las sombras
   interiores del orbe CSS de respaldo debajo del lienzo transparente
   producían un disco gris que ensuciaba la referencia. Aquí solo queda
   el halo exterior. Va al final del archivo a propósito: gana por
   cascada a los estados hover y de cabecera.
   ===================================================================== */

.gh-orbe-gl,
.gh-asis-lanzador:hover .gh-orbe-gl,
.gh-asis-lanzador:focus-visible .gh-orbe-gl {
	background: transparent;
	border: 0;
	box-shadow: 0 0 calc(var(--orbe) * .35) rgba(107, 130, 255, .2);
	filter: none;
}

.gh-orbe-gl::before { display: none; }

.gh-asis-cabecera .gh-orbe-gl {
	/* Sobre fondo claro no cabe un resplandor: lo que da volumen es una
	   sombra suave por debajo, como la de un objeto apoyado. */
	box-shadow:
		0 calc(var(--orbe) * .06) calc(var(--orbe) * .22) rgba(180, 120, 125, .28),
		0 0 calc(var(--orbe) * .12) rgba(255, 190, 190, .5);
}


/* -------------------------------------------------------------------------
 * Selector de idioma (GTranslate, ES/EN).
 *
 * El plugin pinta dentro de cada .gh-idioma un enlace por idioma con
 * data-gt-lang; aquí solo se visten como el resto de rótulos del sitio.
 * Vacío (sin plugin, sin JavaScript) no ocupa sitio.
 * ---------------------------------------------------------------------- */
.gh-idioma { display: inline-flex; align-items: center; }
.gh-idioma:empty { display: none; }
.gh-idioma a {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
	padding: 8px 7px;
	transition: color .2s;
}
.gh-idioma a + a { border-left: 1px solid rgba(255, 255, 255, .22); }
.gh-idioma a:hover,
.gh-idioma a:focus-visible,
.gh-idioma a.gt-current-lang { color: #ffffff; }
.gh-idioma-movil a { font-size: 12px; padding: 10px 12px; }
.gh-idioma-pie a { padding: 10px 9px; }

/* La barra que Google Translate intenta colgar arriba no pinta nada aquí. */
body { top: 0 !important; }
.skiptranslate iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }


/* -------------------------------------------------------------------------
 * Elena: respuestas estructuradas (ficha, lista, comparación).
 * Sobre el panel de cristal oscuro. Etiquetas apagadas, valores en blanco,
 * la rentabilidad al inversor en dorado, que es el dato que se busca.
 * ---------------------------------------------------------------------- */
.gh-asis-parrafo { margin: 0 0 10px; }
.gh-asis-parrafo:last-child { margin-bottom: 0; }

.gh-asis-ficha { display: flex; flex-direction: column; gap: 4px; }
.gh-asis-ficha-titulo { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; }
.gh-asis-ficha-lugar { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .62); }
.gh-asis-ficha-texto { margin: 6px 0 2px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); }

.gh-asis-datos { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16); }
.gh-asis-dato {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
}
.gh-asis-dato-etq { color: rgba(255, 255, 255, .62); }
.gh-asis-dato-val { font-weight: 700; text-align: right; color: #fff; }
.gh-asis-dato-clave .gh-asis-dato-val { color: #e6cc95; }

.gh-asis-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gh-asis-lista-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 9px 11px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .08);
}
.gh-asis-lista-nombre { font-size: 13px; color: #fff; }
.gh-asis-lista-datos { font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .72); }

.gh-asis-tabla { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.gh-asis-tabla th, .gh-asis-tabla td {
	padding: 7px 6px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gh-asis-tabla thead th { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.gh-asis-tabla tbody th { font-weight: 400; color: rgba(255, 255, 255, .62); }
.gh-asis-tabla td { font-weight: 600; color: #fff; }

/* -------------------------------------------------------------------------
 * Inicio de sesión: panel de cristal sobre la foto.
 * ---------------------------------------------------------------------- */
.gh-login-cristal {
	/*
	 * Mas vidrio (08/09). Antes era un panel oscuro y translucido; ahora se
	 * comporta como una lamina: el tinte baja, el desenfoque sube, y lo que
	 * dibuja la pieza son el filo de luz de arriba y el borde fino. El tinte
	 * no puede irse del todo porque el texto va en blanco sobre una foto:
	 * es lo que garantiza que se lea pase lo que pase por detras.
	 */
	background:
		linear-gradient(158deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, 0) 70%),
		rgba(16, 17, 20, .42);
	-webkit-backdrop-filter: blur(32px) saturate(1.5);
	backdrop-filter: blur(32px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, .2);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .26),
		inset 0 0 60px rgba(255, 255, 255, .04),
		0 40px 90px -40px rgba(0, 0, 0, .75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gh-login-cristal { background: rgba(18, 18, 20, .9); }
	.gh-cristal-boton { background: rgba(255, 255, 255, .16); }
}

.gh-login-campo { position: relative; }
.gh-login-campo label {
	display: block;
	margin-bottom: 4px;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.gh-login-campo input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .32);
	border-radius: 0;
	padding: 10px 36px 10px 0;
	color: #fff;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 15px;
	outline: none;
	transition: border-color .2s;
}
.gh-login-campo input::placeholder { color: rgba(255, 255, 255, .3); letter-spacing: .12em; }
.gh-login-campo input:focus { border-bottom-color: #fff; }
.gh-login-campo input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #1c1c1e inset;
	-webkit-text-fill-color: #fff;
}
.gh-login-campo .material-symbols-outlined {
	position: absolute;
	right: 0;
	bottom: 10px;
	font-size: 20px;
	color: rgba(255, 255, 255, .55);
	pointer-events: none;
}

.gh-login-aviso {
	margin: 0 0 20px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}
.gh-login-aviso-error { background: rgba(255, 92, 92, .16); border: 1px solid rgba(255, 120, 120, .35); color: #ffd5d5; }
.gh-login-aviso-ok { background: rgba(120, 200, 140, .16); border: 1px solid rgba(140, 220, 160, .35); color: #d8f5e0; }


/* -------------------------------------------------------------------------
 * Logos del grupo en el hero de la portada.
 * ---------------------------------------------------------------------- */
.gh-marcas-hero img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.gh-marcas-hero a[href*="exclusive"] img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }

/* -------------------------------------------------------------------------
 * Segunda foto de la tarjeta del carrusel: al pasar el ratón. En pantallas
 * sin ratón alterna sola cada ocho segundos.
 * ---------------------------------------------------------------------- */
/*
 * Las dos fotografias del proyecto.
 *
 * La segunda aparece solo mientras el raton esta sobre la propia imagen: ni
 * al rozar el resto de la tarjeta, ni sola cada ocho segundos como hacia
 * antes en tactil. Si nadie la senala, no se mueve nada.
 *
 * Ninguna de las dos se recorta. Vienen con proporciones muy distintas -de
 * 0,57 en una fachada vertical a 2,19 en una panoramica- y el marco es
 * siempre 16/10: encajandolas a «cover» se perdia mas de media imagen. Se
 * ven enteras, y el hueco que sobra lo llena una copia desenfocada de la
 * misma foto, que hace de fondo sin inventarse nada.
 */
.gh-foto {
	position: absolute;
	inset: 0;
	margin: 0;
	/* El relleno desenfocado va ampliado; sin esto se derrama fuera del marco. */
	overflow: hidden;
}
.gh-foto-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
	filter: blur(28px);
}
.gh-foto-real {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.gh-foto-doble .gh-foto-b { opacity: 0; transition: opacity .5s ease; }
.gh-foto-doble:hover .gh-foto-b { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.gh-foto-doble .gh-foto-b { transition: none; }
}

.gh-marcas-hero { align-items: flex-start; }
/*
 * El rótulo lleva detrás una mancha oscura desenfocada (03/09): sin borde
 * ni forma reconocible, solo un oscurecimiento suave que deja el texto en
 * blanco limpio sobre el cielo. La mancha es un pseudoelemento con blur
 * para que su contorno se disuelva del todo.
 */
.gh-marca-rotulo {
	position: relative;
	display: inline-block;
	padding: 6px 12px;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.gh-marca-rotulo::before {
	content: "";
	position: absolute;
	inset: -4px -6px;
	z-index: -1;
	border-radius: 999px;
	background: rgba(4, 6, 10, .42);
	filter: blur(12px);
}
@media (min-width: 768px) { .gh-marca-rotulo { font-size: 12px; } }




/* -------------------------------------------------------------------------
 * Las condiciones comunes, sobre el carrusel de la portada.
 *
 * Van en un bloque propio: son de todas las operaciones, no de una. El valor
 * manda; la etiqueta lo matiza.
 * ---------------------------------------------------------------------- */
.gh-condiciones {
	padding: 22px 26px;
	border-radius: 20px;
	/*
	 * Cristal transparente sobre el blanco de la sección (03/09): el tinte
	 * es mínimo y lo que dibuja la pieza son el filo de luz de arriba, el
	 * borde fino y la sombra baja. Así flota en vez de recortarse.
	 */
	background: linear-gradient(180deg, rgba(69, 114, 152, .055) 0%, rgba(69, 114, 152, .012) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(69, 114, 152, .16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 16px 36px -28px rgba(27, 28, 28, .42);
}

@media (min-width: 1024px) {
	.gh-condiciones { padding: 24px 34px; }
}

.gh-condiciones-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * A lo ancho se reparten solas, sean tres o cuatro: con un número fijo de
 * columnas, al retirar una condición quedaba un hueco al final y el bloque se
 * leía descompensado.
 */
@media (min-width: 900px) {
	.gh-condiciones-lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/*
 * Cada condición se centra en su columna y los filetes separan una de otra,
 * en vez de abrir cada bloque. Con el filete al inicio, el contenido quedaba
 * pegado a la izquierda y el aire sobrante se acumulaba a la derecha: tres
 * columnas iguales que se leían descompensadas.
 */
.gh-condiciones-lista li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 2px 14px;
	text-align: center;
}

/* El filete va entre columnas: el primero de cada fila no lo lleva. */
.gh-condiciones-lista li + li {
	border-left: 1px solid rgba(69, 114, 152, .28);
}

@media (max-width: 899px) {
	.gh-condiciones-lista li:nth-child(odd) { border-left: 0; }
}

.gh-cond-cabeza {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.gh-cond-cabeza svg {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	color: #35597c;
}

.gh-cond-valor {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #1b1c1c;
}

.gh-cond-etq {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 12.5px;
	line-height: 1.4;
	color: #6b6e71;
}

/* -------------------------------------------------------------------------
 * Pie: la familia de marcas, sin caja.
 *
 * El panel de cristal se retiró el 04/09: los logos se sostienen solos sobre
 * el negro del pie y el marco solo añadía un rectángulo que no decía nada.
 * Queda el filete vertical que separa la marca madre de las verticales.
 * ---------------------------------------------------------------------- */

/* El logo de grupo es azul sobre transparente: sobre el cristal se aclara. */
.gh-familia-grupo { filter: brightness(1.55) saturate(.85); }

/* Exclusive es casi negro: un filo claro lo despega del panel. */
.gh-familia-marca { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) drop-shadow(0 8px 20px rgba(0, 0, 0, .45)); }


/* -------------------------------------------------------------------------
 * Elena: el menú de preguntas.
 *
 * Va dentro del hilo, detrás de la respuesta. Se lee como una lista de
 * opciones, no como botones sueltos: cada una con su marca y su flecha, a
 * ancho completo, para que se pulse sin apuntar.
 * ---------------------------------------------------------------------- */
/*
 * Sección propia, entre el hilo y la barra de escritura. Tiene tope de
 * altura y su propio desplazamiento: con muchas preguntas se desliza el
 * menú, nunca la respuesta.
 */
.gh-asis-menu {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/*
	 * Tope en píxeles y no en porcentaje: el panel se dimensiona por su
	 * contenido, así que un 40% no resolvía y el menú crecía sin freno.
	 *
	 * Solo se desplaza la lista: el rótulo y la nota de «escríbela abajo»
	 * quedan fijos, porque si se van con el desplazamiento nadie descubre
	 * que se puede escribir.
	 */
	max-height: 250px;
	padding: 12px 16px 10px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.gh-asis-menu:empty { display: none; }

/* Con el menú puesto, el hilo cede altura pero nunca desaparece. */
.gh-asis-charla { min-height: 200px; }

.gh-asis-menu-titulo {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.gh-asis-menu-lista {
	list-style: none;
	margin: 0;
	padding: 0 2px 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
	/* El desvanecido de abajo dice que hay más preguntas, sin cortar en seco. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22px), transparent 100%);
}

.gh-asis-menu-lista::-webkit-scrollbar { width: 4px; }
.gh-asis-menu-lista::-webkit-scrollbar-track { background: transparent; }
.gh-asis-menu-lista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 2px; }

/* Sin desbordamiento no hay nada que desvanecer. */
.gh-asis-menu-lista:not(.gh-asis-menu-lista--corta) { padding-bottom: 6px; }
.gh-asis-menu-lista--corta {
	-webkit-mask-image: none;
	mask-image: none;
	overflow-y: visible;
}

.gh-asis-opcion {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 28px 9px 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .92);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.35;
	cursor: pointer;
	transition: background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out;
}

/* La marca de la lista: un punto, no un guion. */
.gh-asis-opcion::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: background-color .18s ease-out;
}

/* La flecha dice que la opción lleva a algún sitio. */
.gh-asis-opcion::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1.6px solid rgba(255, 255, 255, .4);
	border-bottom: 1.6px solid rgba(255, 255, 255, .4);
	transform: rotate(-45deg);
	transition: border-color .18s ease-out, right .18s ease-out;
}

.gh-asis-opcion:hover,
.gh-asis-opcion:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
}

.gh-asis-opcion:hover::before,
.gh-asis-opcion:focus-visible::before { background: #fff; }

.gh-asis-opcion:hover::after,
.gh-asis-opcion:focus-visible::after {
	border-color: #fff;
	right: 10px;
}

.gh-asis-menu-pie {
	flex: 0 0 auto;
	margin: 9px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
	.gh-asis-opcion, .gh-asis-opcion::before, .gh-asis-opcion::after { transition: none; }
}


/* -------------------------------------------------------------------------
 * Elena, formulario guiado sobre el panel de cristal (04/09).
 *
 * Las piezas del recorrido —tarjetas, resumen, campos— venían del panel
 * blanco de la primera versión. Aquí se visten para el cristal oscuro que el
 * cliente aprobó después, sin tocar su estructura.
 * ---------------------------------------------------------------------- */
.gh-asis-panel .gh-asis-progreso { border-bottom-color: rgba(255, 255, 255, .1); }
.gh-asis-panel .gh-asis-punto { background: rgba(255, 255, 255, .22); }
.gh-asis-panel .gh-asis-punto-hecho { background: #fff; }

.gh-asis-panel .gh-asis-pregunta { color: #fff; }
.gh-asis-panel .gh-asis-ayuda { color: rgba(255, 255, 255, .55); }

.gh-asis-panel .gh-asis-tarjeta {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .94);
}

.gh-asis-panel .gh-asis-tarjeta:hover,
.gh-asis-panel .gh-asis-tarjeta:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
}

.gh-asis-panel .gh-asis-tarjeta-titulo { color: #fff; }
.gh-asis-panel .gh-asis-tarjeta-detalle { color: rgba(255, 255, 255, .58); }

/*
 * Cada opción lleva el color exacto de su vertical (04/09), sin aclarar: el
 * mismo tratamiento que los distintivos del pie y de las tarjetas de
 * proyecto —bloque de color con la tinta de contraste encima—, para que el
 * asistente hable el mismo idioma visual que el resto del sitio.
 *
 * El único añadido es un filo claro: sobre el panel oscuro, el negro
 * corporativo de «Acceso a proyectos existentes» se fundiría con el fondo y
 * el bloque desaparecería. Es la misma solución que ya usa el pie con
 * Exclusive.
 */
.gh-asis-panel .gh-asis-tarjeta-icono {
	background: var(--gh-asis-color, #457298);
	color: var(--gh-asis-tinta, #ffffff);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.gh-asis-panel .gh-asis-tarjeta:hover,
.gh-asis-panel .gh-asis-tarjeta:focus-visible {
	border-color: var(--gh-asis-color, #457298);
}

.gh-asis-panel .gh-asis-elegida {
	background: rgba(255, 255, 255, .07);
	border-color: var(--gh-asis-color, #457298);
}

.gh-asis-panel .gh-asis-tarjeta:focus-visible {
	outline-color: var(--gh-asis-color, #457298);
}

.gh-asis-panel .gh-asis-tarjeta-check {
	background: var(--gh-asis-color, #457298);
	color: var(--gh-asis-tinta, #ffffff);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.gh-asis-panel .gh-asis-volver { color: rgba(255, 255, 255, .6); }
.gh-asis-panel .gh-asis-volver:hover { color: #fff; }

.gh-asis-panel .gh-asis-resumen {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
}
.gh-asis-panel .gh-asis-resumen dt { color: rgba(255, 255, 255, .55); }
.gh-asis-panel .gh-asis-resumen dd { color: #fff; }

.gh-asis-panel .gh-asis-campo label { color: rgba(255, 255, 255, .62); }
.gh-asis-panel .gh-asis-campo input,
.gh-asis-panel .gh-asis-campo textarea {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .18);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	border-radius: 12px;
	padding: 10px 12px;
	width: 100%;
	resize: vertical;
}

.gh-asis-panel .gh-asis-campo input:focus,
.gh-asis-panel .gh-asis-campo textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .1);
}

.gh-asis-panel .gh-asis-campo textarea::placeholder { color: rgba(255, 255, 255, .35); }

.gh-asis-panel .gh-asis-hecho-titulo { color: #fff; }
.gh-asis-panel .gh-asis-hecho-texto { color: rgba(255, 255, 255, .7); }
.gh-asis-panel .gh-asis-sello {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* La frase que acompaña el momento de dejar el contacto. */
.gh-asis-panel .gh-asis-calido {
	margin-top: -6px;
	margin-bottom: 16px;
	color: rgba(255, 255, 255, .72);
}


/* -------------------------------------------------------------------------
 * Flechas del carrusel, una a cada lado (04/09).
 *
 * Van sobre el carril, no encima de la cabecera: grandes, redondas y con
 * fondo sólido para que se distingan del fondo claro de la sección. La
 * altura las centra sobre la foto de la tarjeta, que es la zona estable.
 * ---------------------------------------------------------------------- */
.gh-carril-flecha {
	position: absolute;
	top: 128px;
	z-index: 20;
	display: none;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(27, 28, 28, .1);
	border-radius: 999px;
	background: #fff;
	color: #1b1c1c;
	box-shadow: 0 10px 30px -12px rgba(27, 28, 28, .45);
	cursor: pointer;
	transition: background-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
}

@media (min-width: 768px) {
	.gh-carril-flecha { display: flex; }
}

.gh-carril-flecha .material-symbols-outlined { font-size: 26px; }

.gh-carril-flecha-izq { left: 18px; }
.gh-carril-flecha-der { right: 18px; }

.gh-carril-flecha:hover,
.gh-carril-flecha:focus-visible {
	background: #1b1c1c;
	color: #fff;
	box-shadow: 0 14px 34px -12px rgba(27, 28, 28, .6);
}

.gh-carril-flecha-izq:hover { transform: translateX(-2px); }
.gh-carril-flecha-der:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
	.gh-carril-flecha { transition: none; }
	.gh-carril-flecha:hover { transform: none; }
}


/* -------------------------------------------------------------------------
 * El campo del boletín, ahora sobre la banda oscura.
 * ---------------------------------------------------------------------- */
.gh-boletin-campo {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #ffffff;
	transition: border-color .2s ease-out, background-color .2s ease-out;
}

.gh-boletin-campo::placeholder { color: rgba(255, 255, 255, .55); }

.gh-boletin-campo:focus {
	outline: none;
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .7);
}

/* El relleno automático del navegador no puede dejar el campo en blanco. */
.gh-boletin-campo:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #23252a inset;
	-webkit-text-fill-color: #fff;
}


/*
 * El saludo de Elena, solo en el primer paso del recorrido.
 *
 * La regla original venía del panel blanco de la primera versión: fondo casi
 * blanco y tinta azul. Sobre el cristal oscuro dejaba una caja clara con el
 * texto encima sin contraste, así que aquí se rehace entera en tonos del
 * panel en vez de corregir solo el color.
 */
.gh-asis-panel .gh-asis-saludo {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

/* -------------------------------------------------------------------------
 * El perfil del inversor.
 *
 * Un panel sobre el negro de la marca, con Madrid al fondo muy atenuado: el
 * vidrio solo se ve si tiene algo detras. La receta del vidrio es la misma
 * que ya usan .gh-condiciones y el panel de Elena —tinte minimo, blur, borde
 * fino, filo de luz arriba—, ajustada a fondo oscuro. Lo que se lee denso
 * (las tarjetas de operacion) va opaco: el vidrio es para el marco.
 *
 * El unico color es el de la vertical del inversor, por --gh-perfil-color.
 * ---------------------------------------------------------------------- */

.gh-perfil {
	background: #0b0d10;
	color: #fff;
}
.gh-perfil-fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.gh-perfil-fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Foto vertical en una seccion alta: se encuadra por arriba, donde esta
	   la cupula, y el recorte se lo lleva la parte baja del edificio. */
	object-position: center 18%;
	/* Mas presencia (08/09): antes se adivinaba solo en la franja de arriba. */
	opacity: .66;
	filter: saturate(.88) brightness(1.27) contrast(.97);
}
.gh-perfil-velo {
	position: absolute;
	inset: 0;
	/*
	 * El velo tiene suelo, pero ya no tapa: antes acababa en negro solido y
	 * de media pagina para abajo la fotografia desaparecia. Lo que aporta es
	 * el fondo oscuro que necesita el texto blanco del vidrio para leerse.
	 */
	background:
		radial-gradient(60% 50% at 20% 0%, rgba(255, 255, 255, .07), transparent 70%),
		linear-gradient(180deg, rgba(11, 13, 16, .33) 0%, rgba(11, 13, 16, .42) 45%, rgba(11, 13, 16, .54) 100%);
}

/* El vidrio. */
.gh-vidrio {
	position: relative;
	border-radius: 24px;
	/*
	 * Dos capas: el filo claro que hace el vidrio y, debajo, un tinte oscuro
	 * que sostiene el texto blanco. Sin ese tinte, al aclarar la fotografia
	 * el texto se quedaba sin suelo justo donde el fondo abre.
	 *
	 * El tinte esta al 25 %, y el suelo medido esta al 18 %: ahi el texto
	 * blanco de los paneles cae justo al minimo legible (4,5:1) y cualquier
	 * zona algo mas clara de la fotografia lo baja de ahi. Si alguien quiere
	 * mas transparencia, hay que oscurecer antes el velo del fondo.
	 */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .105) 0%, rgba(255, 255, 255, .078) 22%, rgba(255, 255, 255, .078) 100%),
		rgba(11, 13, 16, .33);
	-webkit-backdrop-filter: blur(26px) saturate(.72);
	backdrop-filter: blur(26px) saturate(.72);
	border: 1px solid rgba(255, 255, 255, .13);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .14),
		0 24px 48px -28px rgba(0, 0, 0, .7);
}

/* ---- El raíl ---------------------------------------------------------- */

.gh-perfil-rail {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.gh-perfil-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--gh-perfil-color, #457298);
	color: var(--gh-perfil-tinta, #fff);
	font-size: 24px;
	line-height: 1;
	letter-spacing: .02em;
	/* Un aro fino separa el disco del vidrio sin añadir otro color. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 5px rgba(255, 255, 255, .06);
}
.gh-perfil-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gh-perfil-color, #457298);
	color: var(--gh-perfil-tinta, #fff);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gh-perfil-rotulo {
	display: block;
	margin-bottom: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.gh-perfil-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gh-perfil-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
	transition: background .2s ease, color .2s ease;
}
.gh-perfil-nav a .material-symbols-outlined { font-size: 18px; opacity: .7; }
.gh-perfil-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.gh-perfil-nav a.gh-perfil-nav-activo {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 3px 0 0 var(--gh-perfil-color, #457298);
}
.gh-perfil-nav-cuenta {
	margin-left: auto;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--gh-perfil-color, #457298);
	color: var(--gh-perfil-tinta, #fff);
	font-size: 10px;
	font-weight: 700;
	text-align: center;
}

.gh-perfil-datos-boton {
	/* Solo en movil: en escritorio los datos van siempre a la vista. Se
	   declara aqui y no con lg:hidden porque esta hoja carga despues de la
	   de Tailwind y pisaria el display. */
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gh-perfil-datos-boton .material-symbols-outlined { transition: transform .25s ease; }
.gh-perfil-rail-abierto .gh-perfil-datos-boton .material-symbols-outlined { transform: rotate(180deg); }
@media (max-width: 1023px) {
	.gh-perfil-datos-boton { display: flex; }
	.gh-perfil-datos { display: none; }
	.gh-perfil-rail-abierto .gh-perfil-datos { display: block; }
}

.gh-perfil-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .78);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gh-perfil-estado-ok {
	background: rgba(126, 200, 160, .14);
	border-color: rgba(126, 200, 160, .38);
	color: #b4e6cb;
}

.gh-perfil-salir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	transition: background .2s ease;
}
.gh-perfil-salir:hover { background: rgba(255, 255, 255, .1); }

/* ---- Saludo y cifras -------------------------------------------------- */

.gh-perfil-saludo {
	padding: 32px;
	scroll-margin-top: 112px;
}
.gh-perfil-saludo::after {
	/* La linea fina del color de la vertical: el acento, sin relleno. */
	content: "";
	position: absolute;
	left: 32px;
	bottom: 0;
	width: 56px;
	height: 2px;
	background: var(--gh-perfil-color, #457298);
	border-radius: 2px;
}

.gh-perfil-cifra {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	color: #fff;
	transition: transform .25s ease, background .25s ease;
}
.gh-perfil-cifra:hover { transform: translateY(-2px); }
.gh-perfil-cifra.gh-vidrio:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .07) 100%); }
.gh-perfil-cifra-dato {
	/*
	 * La serif de la marca, con los mismos ajustes que los titulares. Bodoni
	 * Moda es variable en tamaño optico: sin fijar el «opsz» los trazos se
	 * afinan tanto a 30 px que el 1 sale como una raya y el 0 como parentesis.
	 */
	font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
	font-size: 30px;
	line-height: 1.05;
}
.gh-perfil-cifra-rotulo {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .68;
}
.gh-perfil-cifra-clara {
	border-radius: 24px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(26px) saturate(1.15);
	backdrop-filter: blur(26px) saturate(1.15);
	color: #0b0d10;
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);
}
.gh-perfil-cifra-clara .gh-perfil-cifra-rotulo { opacity: .6; }

/* ---- Operaciones ------------------------------------------------------ */

.gh-perfil-paso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(0, 0, 0, .1);
	font-size: 13px;
	line-height: 1.45;
}
.gh-perfil-paso .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; opacity: .7; }
.gh-perfil-paso strong { font-weight: 700; }

/* ---- Documentos ------------------------------------------------------- */

.gh-perfil-doc {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	color: #fff;
	transition: transform .25s ease, background .25s ease;
}
.gh-perfil-doc:hover {
	transform: translateX(2px);
	background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .07) 100%);
}
.gh-perfil-doc-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .1);
	font-size: 19px;
}
.gh-perfil-doc-nuevo {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--gh-perfil-color, #457298);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
	flex-shrink: 0;
}

/* ---- Actividad -------------------------------------------------------- */

.gh-perfil-hilo {
	padding: 22px 22px 22px 52px;
}
.gh-perfil-hilo::before {
	/* La linea es del <ol>, no de cada hito: asi no se corta entre ellos. */
	content: "";
	position: absolute;
	left: 35px;
	top: 32px;
	bottom: 32px;
	width: 1px;
	background: rgba(255, 255, 255, .14);
}
.gh-perfil-hito {
	position: relative;
	padding: 0 0 20px 6px;
}
.gh-perfil-hito:last-child { padding-bottom: 0; }
.gh-perfil-hito-icono {
	position: absolute;
	left: -31px;
	top: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 999px;
	background: #1a1d22;
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

.gh-perfil-vacio {
	padding: 18px 20px;
	border-radius: 16px;
	border: 1px dashed rgba(255, 255, 255, .22);
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
}

.gh-perfil-salida {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(26px) saturate(1.15);
	backdrop-filter: blur(26px) saturate(1.15);
	border: 1px solid rgba(255, 255, 255, .5);
	color: #0b0d10;
	transition: transform .3s ease;
}
.gh-perfil-salida:hover { transform: translateY(-2px); }

/* ---- El visor --------------------------------------------------------- */

.gh-visor {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(4, 6, 10, .72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.gh-visor[hidden] { display: none; }
.gh-visor-caja {
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	height: min(88vh, 900px);
	background: #0f1216;
	overflow: hidden;
}
.gh-visor-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gh-visor-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gh-visor-accion,
.gh-visor-cerrar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background .2s ease;
}
.gh-visor-accion:hover, .gh-visor-cerrar:hover { background: rgba(255, 255, 255, .14); }
.gh-visor-accion .material-symbols-outlined, .gh-visor-cerrar .material-symbols-outlined { font-size: 18px; }
.gh-visor-cuerpo {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.gh-visor-marco {
	flex: 1;
	width: 100%;
	border: 0;
	background: #2b2f36;
}
.gh-visor-salida {
	margin: 0;
	padding: 10px 18px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 12px;
	color: rgba(255, 255, 255, .62);
	text-align: center;
}
body.gh-visor-abierto { overflow: hidden; }
@media (max-width: 767px) {
	.gh-visor { padding: 0; }
	.gh-visor-caja { width: 100%; height: 100%; border-radius: 0; }
	.gh-visor-accion span:last-child { display: none; }
}

/* ---- Accesibilidad ---------------------------------------------------- */

.gh-perfil a:focus-visible,
.gh-perfil button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.gh-perfil-cifra, .gh-perfil-doc, .gh-perfil-salida, .gh-perfil-nav a, .gh-perfil-datos-boton .material-symbols-outlined { transition: none; }
	.gh-perfil-cifra:hover, .gh-perfil-doc:hover, .gh-perfil-salida:hover { transform: none; }
}


/* -------------------------------------------------------------------------
 * Piezas del repaso del 08/09.
 * ---------------------------------------------------------------------- */

/*
 * El boton de vidrio sobre fotografia. Mismo recetario que el panel de
 * acceso, a la escala de un boton: tinte claro minimo, desenfoque, filo de
 * luz arriba. Al pasar el raton se vuelve solido, que es la forma mas clara
 * de decir «esto se pulsa».
 */
.gh-cristal-boton {
	background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, .3);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .3),
		0 16px 32px -18px rgba(0, 0, 0, .6);
	transition: background .3s ease, color .3s ease, transform .3s ease;
}
.gh-cristal-boton:hover,
.gh-cristal-boton:focus-visible {
	background: #fff;
	color: #000;
	transform: translateY(-1px);
}

/*
 * Los sellos de «Proyectos propios · Gestion directa · Participacion de
 * inversores». Eran tres contornos grises de 10 px que se perdian debajo de
 * dos parrafos largos. Ahora tienen cuerpo: fondo propio, tinta plena, un
 * punto que los enlaza con la lista y sombra baja para separarlos del papel.
 */
.gh-sello {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	color: #1b1c1c;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .22);
}
.gh-sello::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #755937;
	flex-shrink: 0;
}

/*
 * La cita. Un recuadro gris claro con el texto dentro no llamaba la atencion
 * sobre lo unico que es una voz en toda la pagina. Se le quita la caja y se
 * le pone lo que corresponde a una cita: un filete de color a la izquierda,
 * mas cuerpo de letra y unas comillas grandes de fondo.
 */
.gh-cita {
	position: relative;
	padding: 4px 0 4px 28px;
	border-left: 3px solid #755937;
}
.gh-cita p {
	position: relative;
	z-index: 1;
	font-size: 26px;
	line-height: 1.3;
}
@media (min-width: 768px) { .gh-cita p { font-size: 30px; } }

/*
 * Fotografia de fondo en la llamada del catalogo (08/09). La foto va debajo
 * y el color de la vertical la cubre casi entera: asi aporta textura sin
 * comerse el contraste del texto, que sigue siendo tinta sobre color plano.
 */
.gh-cta-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.7);
}
.gh-cta-velo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--gh-vertical, #457298) 86%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.gh-cta-foto { opacity: .16; }
	.gh-cta-velo { display: none; }
}

/*
 * Las cuatro garantias de Arquitectura. Eran cuatro cajas grises identicas,
 * cada una con su borde, que sumaban mucho marco y poca informacion. Van
 * ahora en una sola pieza de vidrio dividida por filetes: es el mismo
 * tratamiento que las condiciones de la portada, que el cliente aprobo.
 */
.gh-avales {
	display: grid;
	grid-template-columns: 1fr;
	padding: 8px;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(117, 89, 55, .05) 0%, rgba(117, 89, 55, .012) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(117, 89, 55, .16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 40px -30px rgba(0, 0, 0, .35);
}
.gh-aval {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px;
}
.gh-aval + .gh-aval { border-top: 1px solid rgba(0, 0, 0, .08); }
@media (min-width: 640px) {
	.gh-avales { grid-template-columns: repeat(2, 1fr); }
	.gh-aval:nth-child(n+3) { border-top: 1px solid rgba(0, 0, 0, .08); }
	.gh-aval:nth-child(2n) { border-left: 1px solid rgba(0, 0, 0, .08); }
}
@media (min-width: 1280px) {
	.gh-avales { grid-template-columns: repeat(4, 1fr); }
	.gh-aval + .gh-aval { border-top: 0; border-left: 1px solid rgba(0, 0, 0, .08); }
	.gh-aval:nth-child(n+3) { border-top: 0; }
}
.gh-aval-cabeza {
	display: flex;
	align-items: center;
	gap: 10px;
}
.gh-aval-cabeza .material-symbols-outlined { font-size: 21px; opacity: .8; }

/*
 * Las tres fases del equipo propio. Son una secuencia —se analiza, se
 * desarrolla y se dirige—, asi que se numeran y se enlazan con un filete:
 * el numero dice el orden, que es justo la informacion que tres cajas
 * iguales escondian. El filete solo aparece cuando van en fila.
 */
.gh-fases { display: grid; gap: 28px; }
@media (min-width: 640px) { .gh-fases { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.gh-fase { position: relative; padding-top: 26px; }
.gh-fase::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: rgba(0, 0, 0, .12);
}
.gh-fase-numero {
	display: block;
	margin-bottom: 14px;
	font-family: "Bodoni Moda", Georgia, serif;
	font-weight: 500;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
	font-size: 34px;
	line-height: 1;
	color: #755937;
}
.gh-fase-titulo {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
	font-weight: 700;
}
.gh-fase-titulo .material-symbols-outlined { font-size: 19px; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
	.gh-cristal-boton { transition: none; }
	.gh-cristal-boton:hover { transform: none; }
}

/*
 * Los bloques claros del perfil, con algo de transparencia (08/09).
 *
 * Solo un poco: dentro se lee texto oscuro y letra pequeña —cifras, barra de
 * cobertura, formulario de reserva—, asi que el blanco tiene que seguir
 * comportandose como papel. El 90 % deja intuir la fotografia por los bordes
 * sin que el fondo se cuele en la lectura, y el desenfoque hace el resto.
 */
.gh-perfil #operaciones article,
.gh-perfil .gh-aviso-reserva {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(28px) saturate(1.15);
	backdrop-filter: blur(28px) saturate(1.15);
	border-color: rgba(255, 255, 255, .5);
}

/*
 * Los paneles interiores —ficha de cifras, estado de la financiacion— eran
 * blanco opaco sobre la tarjeta ya translucida y se recortaban como parches.
 * Bajan a un velo claro que se apoya en la tarjeta en vez de taparla.
 */
.gh-perfil #operaciones .bg-surface-container-lowest {
	background: rgba(255, 255, 255, .34);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.gh-perfil #operaciones article,
	.gh-perfil .gh-aviso-reserva,
	.gh-perfil-cifra-clara,
	.gh-perfil-salida { background: #fff; }
}

/*
 * Rotulos sobre la fotografia. No tienen panel debajo, asi que el fondo que
 * les toca cambia con la imagen: se protegen con sombra en vez de fiarlo a
 * una opacidad que solo funcionaba con el fondo oscuro de antes.
 */
.gh-perfil #operaciones > h2,
.gh-perfil #documentos > h2,
.gh-perfil #actividad > h2,
.gh-perfil-nota {
	position: relative;
	display: inline-block;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(4, 6, 10, .7);
}
.gh-perfil #operaciones > h2::before,
.gh-perfil #documentos > h2::before,
.gh-perfil #actividad > h2::before,
.gh-perfil-nota::before {
	content: "";
	position: absolute;
	inset: -6px -14px;
	z-index: -1;
	border-radius: 999px;
	background: rgba(4, 6, 10, .45);
	filter: blur(12px);
}
.gh-perfil-nota { color: rgba(255, 255, 255, .82); }

/*
 * Coherencia dentro de las tarjetas claras (08/09).
 *
 * El campo del importe era el ultimo blanco opaco del panel, y los bordes
 * interiores usaban tres grises distintos para piezas del mismo rango. Un
 * solo borde y un solo criterio: lo que se rellena va mas claro que la
 * tarjeta, lo que solo informa va mas apagado.
 */
.gh-perfil #operaciones input[type="number"] {
	background: rgba(255, 255, 255, .38);
	border-color: rgba(0, 0, 0, .16);
}
.gh-perfil #operaciones input[type="number"]:focus {
	background: rgba(255, 255, 255, .82);
}
.gh-perfil #operaciones .border-outline\/10,
.gh-perfil #operaciones .border-outline\/20,
.gh-perfil .gh-aviso-reserva .border-outline\/10 {
	border-color: rgba(0, 0, 0, .1);
}

/*
 * El grano del vidrio.
 *
 * Un degradado suave sobre una superficie ancha produce bandas: el salto de
 * un nivel de brillo, repetido a lo largo de mil pixeles, se ve como una raya
 * aunque en una columna suelta sea invisible. El remedio de toda la vida es
 * ensuciar la frontera: este ruido finisimo desordena el borde del escalon y
 * el ojo deja de encontrarlo.
 *
 * Va debajo del contenido —::before se pinta antes que los hijos— y no
 * intercepta el raton.
 */
.gh-vidrio::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: .22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

@media (prefers-reduced-motion: reduce) {
	.gh-vidrio::before { opacity: .07; }
}

/*
 * El grano del fondo.
 *
 * El mismo remedio que en el vidrio, pero aqui abajo: el velo degradado sobre
 * la fotografia recorre pocos niveles de brillo a lo largo de casi dos mil
 * pixeles, y con 256 niveles disponibles eso obliga a escalones. Cada uno es
 * de uno o dos niveles —invisible medido pixel a pixel—, pero forma una
 * frontera recta de mil pixeles de largo, y el ojo realza los bordes rectos.
 *
 * Hacen falta los dos granos, el del fondo y el del vidrio: el desenfoque de
 * los paneles promedia lo que tienen debajo, asi que este no les llega.
 */
.gh-perfil-velo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .20;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* ---- Páginas genéricas: texto corrido -----------------------------------
 * page.php envuelve el contenido en .gh-contenido y hasta hoy esa clase no
 * tenía estilos. Tailwind deja los títulos del tamaño del texto y las listas
 * sin viñeta, y un texto legal así es una pared. Aquí lo mínimo para que se
 * lea: jerarquía, aire entre bloques, viñetas y una tabla que quepa.
 * ------------------------------------------------------------------------ */

.gh-contenido { font-size: 16px; line-height: 1.7; }
.gh-contenido > * + * { margin-top: 1em; }
.gh-contenido h2 {
	font-size: 1.5rem; line-height: 1.25; font-weight: 600;
	color: #1b1c1c; margin-top: 2.4em;
}
.gh-contenido h3 {
	font-size: 1.1rem; line-height: 1.35; font-weight: 600;
	color: #1b1c1c; margin-top: 1.8em;
}
.gh-contenido h2:first-child, .gh-contenido h3:first-child { margin-top: 0; }
.gh-contenido strong { color: #1b1c1c; font-weight: 600; }
.gh-contenido a { text-decoration: underline; text-underline-offset: 2px; }
.gh-contenido ul, .gh-contenido ol { padding-left: 1.4em; }
.gh-contenido ul { list-style: disc; }
.gh-contenido ol { list-style: decimal; }
.gh-contenido li + li { margin-top: .45em; }
.gh-contenido .gh-tabla { overflow-x: auto; margin-top: 1.2em; }
.gh-contenido table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.gh-contenido th, .gh-contenido td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(27, 28, 28, .14); }
.gh-contenido th { font-weight: 600; color: #1b1c1c; background: rgba(27, 28, 28, .04); }
.gh-contenido .gh-legal-datos p { margin-top: .25em; }
.gh-contenido .gh-legal-fecha { font-size: 14px; color: #6a7076; }

/* ---- Aviso de cookies ---------------------------------------------------
 * Abajo a la izquierda, lejos del lanzador del asistente, que vive abajo a
 * la derecha. En móvil ocupa el ancho y el asistente queda por encima. Todo
 * en el negro de la marca con texto blanco: 17:1, sin discusión.
 * ------------------------------------------------------------------------ */

.gh-cookies {
	position: fixed; left: 16px; bottom: 16px; z-index: 90;
	width: min(400px, calc(100vw - 32px));
	background: #1b1c1c; color: #ffffff;
	border-radius: 18px; padding: 20px 22px 18px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
	font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.gh-cookies-titulo {
	margin: 0 0 6px; font-size: 11px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.gh-cookies-texto { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.gh-cookies-texto a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.gh-cookies-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.gh-cookies-boton {
	font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding: 10px 18px; border-radius: 999px; border: 1px solid #ffffff; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.gh-cookies-aceptar { background: #ffffff; color: #1b1c1c; }
.gh-cookies-aceptar:hover { background: #e6e6e6; border-color: #e6e6e6; }
.gh-cookies-rechazar { background: transparent; color: #ffffff; }
.gh-cookies-rechazar:hover { background: rgba(255, 255, 255, .12); }
.gh-cookies-boton:focus-visible { outline: 2px solid #e7b00a; outline-offset: 2px; }

@media (max-width: 640px) {
	.gh-cookies { left: 12px; right: 12px; bottom: 84px; width: auto; padding: 18px 18px 16px; }
}

/* -------------------------------------------------------------------------
 * Texto que no cabe en un movil.
 *
 * Tres arreglos de la revision del 14/09 sobre capturas reales de telefono.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * Los titulares se parten en dos lineas con un <br /> escrito por el
	 * cliente. Ese corte esta pensado para pantalla ancha: en un movil la
	 * segunda mitad ya no cabe y el navegador no puede recolocarla porque el
	 * salto es obligatorio. Aqui se anula y el texto fluye solo.
	 *
	 * Funciona porque el marcado lleva un espacio antes de cada <br />: sin
	 * el, las dos mitades quedarian pegadas.
	 */
	h1 br, h2 br, h3 br { display: none; }

	/*
	 * Las etiquetas de la ficha de proyecto van en versalitas con espaciado
	 * entre letras. Ese espaciado se aplica tambien despues de la ultima
	 * letra, asi que «Rentabilidad para el inversor» rozaba el borde por 5 px
	 * en la pantalla mas estrecha. Se le resta al final lo que sobra.
	 */
	.gh-dato-etiqueta { margin-right: -0.16em; overflow-wrap: anywhere; }
}

/*
 * Estas dos no son cosa de moviles.
 *
 * Se midio de 320 a 1280 y los mismos textos se salen tambien a 768 y a 1024:
 * «Descubre nuestros proyectos en ReformasHabitazone.com» se sale 225 px a
 * 768 y «Descubre la cartera completa en Habitazone.com» lo hace en todos los
 * anchos. Es logico: una palabra de 310 px no cabe en una caja de 260 la mida
 * quien la mida. Y el halo de los rotulos sobresale igual en un monitor.
 *
 * Lo que si se queda encerrado arriba es anular el <br />: en pantalla ancha
 * ese salto parte la frase en dos lineas equilibradas y funciona.
 */
/*
 * «break-word», no «anywhere». La diferencia importa y se vio en pantalla:
 * «anywhere» reparte el hueco entre todas las palabras y parte la primera que
 * llega al borde, asi que «Trasteros y minialmacenes en Madrid» quedaba como
 * «minialmacene / s en Madrid» en un movil. «break-word» solo parte cuando la
 * palabra no cabe entera en una linea vacia, que es el caso de
 * «ReformasHabitazone.com» y de ningun otro.
 */
h1, h2, h3 { overflow-wrap: break-word; }

.gh-marca-rotulo::before { inset: -4px 0; }

.gh-cifras p,
.gh-cifras span,
.gh-cta-texto,
.gh-atributo span { overflow-wrap: anywhere; }

@media (max-width: 400px) {
	/*
	 * Las tarjetas de cifras llevan 28 px de relleno a cada lado. En dos
	 * columnas sobre una pantalla de 320 quedan 74 px para el numero, y
	 * «325M€» necesita 117. Lo que sobra es el relleno, no la rejilla: dos
	 * columnas siguen siendo la lectura correcta para comparar cifras.
	 */
	.gh-cifras > * { padding-left: 16px; padding-right: 16px; }
}

/* -------------------------------------------------------------------------
 * El cuerpo de una entrada del blog.
 *
 * Este HTML lo genera el editor de WordPress: parrafos, subtitulos, citas,
 * listas e imagenes salen sin ninguna clase, asi que las utilidades del resto
 * del sitio no les llegan y hay que vestirlos aqui.
 *
 * El ancho de linea manda: la columna se queda en 720 px para que el texto
 * caiga alrededor de 68 caracteres por linea, que es donde el ojo encuentra el
 * principio de la siguiente sin perderse.
 * ---------------------------------------------------------------------- */

.gh-articulo-cuerpo {
	font-family: var(--gh-font-body, inherit);
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-on-surface, #1b1c1c);
}

.gh-articulo-cuerpo > * + * { margin-top: 1.4em; }

.gh-articulo-cuerpo p { margin: 0; }

/* Los subtitulos, con mas aire encima que debajo: asi se leen pegados al
   texto que abren y separados del que cierran. */
.gh-articulo-cuerpo h2,
.gh-articulo-cuerpo h3,
.gh-articulo-cuerpo h4 {
	font-family: "Bodoni Moda", Didot, Georgia, serif;
	font-weight: 400;
	line-height: 1.2;
	margin: 2.2em 0 0;
	text-wrap: balance;
}
.gh-articulo-cuerpo h2 { font-size: 30px; }
.gh-articulo-cuerpo h3 { font-size: 23px; }
.gh-articulo-cuerpo h4 { font-size: 19px; }
.gh-articulo-cuerpo h2 + *,
.gh-articulo-cuerpo h3 + *,
.gh-articulo-cuerpo h4 + * { margin-top: .7em; }

.gh-articulo-cuerpo a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity .18s ease;
}
.gh-articulo-cuerpo a:hover { opacity: .6; }

.gh-articulo-cuerpo strong { font-weight: 700; }

.gh-articulo-cuerpo ul,
.gh-articulo-cuerpo ol { padding-left: 1.4em; }
.gh-articulo-cuerpo li + li { margin-top: .5em; }
.gh-articulo-cuerpo ul { list-style: disc; }
.gh-articulo-cuerpo ol { list-style: decimal; }

/* La cita, sin comillas decorativas: un filete y el texto en cursiva. */
.gh-articulo-cuerpo blockquote {
	margin: 2.2em 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--color-secondary, #e7b00a);
	font-family: "Bodoni Moda", Didot, Georgia, serif;
	font-size: 21px;
	line-height: 1.5;
	font-style: italic;
}
.gh-articulo-cuerpo blockquote p { margin: 0; }
.gh-articulo-cuerpo blockquote cite {
	display: block;
	margin-top: .8em;
	font-family: inherit;
	font-size: 13px;
	font-style: normal;
	opacity: .65;
}

/* Las imagenes se salen del ancho de lectura: el texto quiere 720 px, una
   fotografia agradece mas sitio. */
.gh-articulo-cuerpo figure,
.gh-articulo-cuerpo img {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
}
.gh-articulo-cuerpo figure { margin: 2.4em 0; }
.gh-articulo-cuerpo figcaption {
	margin-top: .7em;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
	opacity: .65;
	border-radius: 0;
}

.gh-articulo-cuerpo hr {
	margin: 2.8em 0;
	border: 0;
	border-top: 1px solid rgba(27, 28, 28, .14);
}

.gh-articulo-cuerpo table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gh-articulo-cuerpo th,
.gh-articulo-cuerpo td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid rgba(27, 28, 28, .12);
}

.gh-articulo-cuerpo code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .9em;
	background: rgba(27, 28, 28, .06);
	padding: 2px 6px;
	border-radius: 5px;
}
.gh-articulo-cuerpo pre {
	overflow-x: auto;
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba(27, 28, 28, .06);
}
.gh-articulo-cuerpo pre code { background: none; padding: 0; }

.gh-articulo-etiqueta {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid rgba(27, 28, 28, .16);
	font-size: 12px;
	text-decoration: none;
	color: inherit;
	transition: background .18s ease, border-color .18s ease;
}
.gh-articulo-etiqueta:hover {
	background: var(--color-secondary, #e7b00a);
	border-color: transparent;
}

.gh-articulo-paginas { margin-top: 2.4em; }

@media (max-width: 640px) {
	.gh-articulo-cuerpo { font-size: 16px; }
	.gh-articulo-cuerpo h2 { font-size: 25px; }
	.gh-articulo-cuerpo h3 { font-size: 20px; }
	.gh-articulo-cuerpo blockquote { font-size: 18px; padding-left: 18px; }
}

/* -------------------------------------------------------------------------
 * Convivir con la barra del administrador.
 *
 * WordPress pinta su barra negra fija arriba del todo para quien ha iniciado
 * sesion. La cabecera del sitio tambien va fija arriba, asi que se solapaban y
 * el menu quedaba tapado —y sin poder pulsarse— en el escritorio del cliente.
 *
 * Un visitante no tiene esa barra y no ve ninguna diferencia: la clase
 * «admin-bar» solo la pone WordPress cuando de verdad la pinta.
 *
 * Las alturas son las suyas, no elegidas: 32 px, y 46 por debajo de 783 px,
 * que es donde su barra se hace mas alta.
 * ---------------------------------------------------------------------- */

.admin-bar #siteNav { top: 32px; }

/* El menu de movil abre a pantalla completa: tambien tiene que arrancar por
   debajo de la barra, o su boton de cerrar queda fuera de alcance. */
.admin-bar #navMovil { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar #siteNav,
	.admin-bar #navMovil { top: 46px; }
}

/*
 * Por debajo de 601 px la barra de WordPress deja de ser fija y se desplaza
 * con la pagina. Probe a devolver la cabecera a su sitio y estaba mal: medido,
 * la barra sigue ocupando los 46 px de arriba en la posicion inicial, asi que
 * el menu quedaba tapado y no recibia el raton.
 *
 * Lo correcto es que la cabecera acompane a la barra: arranca por debajo de
 * ella y se va con la pagina al desplazar, igual que hace la propia barra.
 */
@media screen and (max-width: 600px) {
	.admin-bar #siteNav {
		position: absolute;
		top: 46px;
	}

	/* El menu desplegado si vuelve a ser fijo, o no se podria desplazar por
	   dentro cuando la lista es mas alta que la pantalla. */
	.admin-bar #navMovil {
		position: fixed;
		top: 0;
	}
}