/* =====================================================================
   BRASA GLOBAL · tema transversal (oct-2026)
   Cargada la ÚLTIMA en header.php, detrás del extra_css de cada página.
   Tres reglas de marca para TODA la familia .gd-page:

   1) H2 .section-title en editorial grande. El COLOR no se toca: cada
      página conserva el suyo (blanco sobre oscuro, tinta sobre claro).
   2) H2 del CTA final (.contact-left h2) con el degradado de brasa
      vivo del hero del index ("empresas", vaivén) y tamaño editorial.
   3) CTA .contact-row con el borde ember que estrenaron los sectores.
   ===================================================================== */

/* ═══ 1 · H2 DE SECCIÓN · SOLO TAMAÑO EDITORIAL ════════════════════ */
.gd-page .section-title {
  font-size: clamp(2.4rem, 5vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
/* La cabecera de sección se ensancha para que la parte blanca del
   titular editorial quepa en UNA línea ("Lo que pregunta un centro"
   no cabía en los 780px del base y dejaba la última palabra sola).
   El intro conserva su medida de lectura. */
.gd-page .section-head { max-width: 1100px; }
.gd-page .section-head .section-intro { max-width: 780px; }

/* El .muted del H2: mismo peso que el resto del titular (las hojas
   viejas lo dejaban en 500) y SIEMPRE en su propia línea — lockup
   bicolor de dos pisos deliberado, en vez del corte aleatorio que
   dejaba el salto natural con el tamaño editorial. */
.gd-page .section-title .muted {
  font-weight: inherit;
  display: block;
}

/* ═══ 1b · EYEBROW EDITORIAL EN LOS HEROS REDISEÑADOS ══════════════
   Solo las 10 páginas con hero editorial (6 soluciones + 4 sectores;
   el home tiene su propio hero hp3 y no se toca). El hero base ya es
   flex-column → se reordena sin tocar markup: H1 arriba, eyebrow
   debajo con una regla vertical en brasa, summary al final. */
.gd-page:is(.ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .ind-page, .corp-page, .inmo-page, .sport-page, .profile-page, .inv-page) .hero h1 {
  order: 1;
}
.gd-page:is(.ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .ind-page, .corp-page, .inmo-page, .sport-page, .profile-page, .inv-page) .hero .hero-meta {
  order: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(1.6rem, 3.5vh, 2.6rem) 0 0;
  color: rgba(255, 255, 255, 0.65);
}
.gd-page:is(.ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .ind-page, .corp-page, .inmo-page, .sport-page, .profile-page, .inv-page) .hero .hero-meta::before {
  content: '';
  flex: none;
  width: 2px;
  height: 42px;
  background: linear-gradient(180deg, #E8501F 0%, #FF7B3B 100%);
}
.gd-page:is(.ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .ind-page, .corp-page, .inmo-page, .sport-page, .profile-page, .inv-page) .hero .hero-summary {
  order: 3;
}

/* ═══ 2 · H2 DEL CTA FINAL · BRASA VIVA ════════════════════════════
   Los contact-wrap van sobre fondo oscuro en todo el sitio → rango
   claro. El color naranja queda de fallback si no hay clip de texto. */
.gd-page .contact-left h2 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #FF7B3B;
  background: linear-gradient(100deg, #E8501F 0%, #FF7B3B 45%, #FFB06B 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brasaEmber 5s ease-in-out infinite alternate;
}

/* ═══ 3 · CTA · BADGES CON BORDE EMBER ═════════════════════════════ */
.gd-page .contact-row {
  border-color: #FF5A1F;
}
.gd-page .contact-row:hover {
  border-color: #FF8A47;
  background: rgba(255, 90, 31, 0.08);
}

/* ═══ 3b · TARJETONES → PLANCHAS DE CRISTAL (sectores) ═════════════
   Los tokens de tinta/línea/fondo-de-chip pasan a claro en las
   páginas de sector: todo el texto interior de los antiguos
   tarjetones blancos (convertidos a cristal oscuro en su hoja)
   se invierte solo. Los MOCKUPS (navegador, ficha de inmueble,
   SERP, nodos de diagrama) re-anclan los tokens oscuros originales
   porque representan pantallas blancas. */
.gd-page:is(.ind-page, .corp-page, .inmo-page, .sport-page, .ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .proj-pro64, .proj-cfvng, .proj-lavalla, .proj-bajamar, .proj-index, .inv-page, .sec-index, .sol-index) {
  --ink: rgba(255, 255, 255, 0.96);
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.1);
  --bg-2: rgba(255, 255, 255, 0.06);
}
/* .compare-col es genérica y también la usan los proyectos (sin
   tokens invertidos): la plancha solo en las páginas convertidas */
.gd-page:is(.ind-page, .corp-page, .inmo-page, .sport-page, .ae-page, .dev-page, .re-page, .seo-page, .mi-page, .gdig-page, .proj-pro64, .proj-cfvng, .proj-lavalla, .proj-bajamar, .proj-index, .inv-page, .sec-index, .sol-index) .compare-col {
  background: rgba(13, 16, 20, 0.55);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border-radius: 0;
}
.gd-page .ind-mockup,
.gd-page .property-mock,
.gd-page .local-serp,
.gd-page .buyer-step__node,
.gd-page .booking-step__node,
.gd-page .report-mockup,
.gd-page .serp,
.gd-page .ai,
.gd-page .doc-mockup,
.gd-page .proj-slide__frame,
.gd-page .chrome-url,
.gd-page .qa-dashboard,
.gd-page .booking-mock,
.gd-page .ba-search {
  --ink: #0A0A0A;
  --ink-2: #525252;
  --ink-3: #A1A1A1;
  --line: #E5E5E5;
  --line-2: #EDEDED;
  --bg-2: #F4F4F4;
}

/* ═══ 3c · PROYECTOS, INVERSIÓN E ÍNDICES: acento y H2 en brasa ════
   El azul residual (badges, bordes destacados, cifras) muere también
   aquí, y el .muted de los H2 se enciende como en sectores/perfil. */
.gd-page:is(.proj-pro64, .proj-cfvng, .proj-lavalla, .proj-bajamar, .proj-index, .inv-page, .sec-index, .sol-index) {
  --accent: #E8501F;
}
.gd-page:is(.proj-pro64, .proj-cfvng, .proj-lavalla, .proj-bajamar, .proj-index, .inv-page, .sec-index, .sol-index) .section-title .muted {
  font-weight: inherit; /* mismo peso que la parte blanca */
  color: #FF7B3B;
  background: linear-gradient(100deg, #E8501F 0%, #FF7B3B 45%, #FFB06B 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brasaEmber 5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .gd-page:is(.proj-pro64, .proj-cfvng, .proj-lavalla, .proj-bajamar, .proj-index, .inv-page, .sec-index, .sol-index) .section-title .muted { animation: none; }
}

/* Hero de inversión: el ámbar siempre abre la segunda línea */
.gd-page.inv-page .hero h1 .muted { display: block; }

/* ═══ 4 · HERO EDITORIAL DEL PERFIL ════════════════════════════════
   Mismo patrón que soluciones/sectores: titular gigante con la frase
   encendida y summary descolgado. Pisa el h1 reducido de perfil.css
   (misma especificidad, esta hoja carga después). */
.gd-page.profile-page .hero h1,
.gd-page.inv-page .hero h1 {
  font-size: clamp(2.6rem, 6.8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.01;
  max-width: 1100px;
  margin-left: -0.02em;
}
.gd-page.profile-page .hero h1 .muted,
.gd-page.inv-page .hero h1 .muted {
  font-weight: inherit;
  color: #FF7B3B;
  background: linear-gradient(100deg, #E8501F 0%, #FF7B3B 45%, #FFB06B 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brasaEmber 5s ease-in-out infinite alternate;
}
/* El acento azul viejo muere también en perfil (rótulo del cargo,
   enlaces y demás var(--accent) de la página) */
.gd-page.profile-page {
  --accent: #E8501F;
}

/* H2 bicolor del perfil: la parte gris pasa a brasa viva y al mismo
   peso que la blanca (perfil.css la dejaba gris 0.6 y en 500, y su
   especificidad ganaba a la regla global). Rango claro: fondo oscuro. */
.gd-page.profile-page .section-title .muted {
  font-weight: inherit;
  color: #FF7B3B;
  background: linear-gradient(100deg, #E8501F 0%, #FF7B3B 45%, #FFB06B 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brasaEmber 5s ease-in-out infinite alternate;
}
.gd-page.profile-page .hero-summary,
.gd-page.inv-page .hero-summary {
  margin-left: auto;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 900px) {
  .gd-page.profile-page .hero-summary,
.gd-page.inv-page .hero-summary { margin-left: 0; max-width: 46ch; }
}

@keyframes brasaEmber {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-page .contact-left h2 { animation: none; }
  .gd-page.profile-page .hero h1 .muted,
.gd-page.inv-page .hero h1 .muted { animation: none; }
  .gd-page.profile-page .section-title .muted { animation: none; }
}

/* Hero de inversión: el summary sube, pegado al eyebrow (va al final
   del archivo para ganar a la regla compartida del bloque 4) */
.gd-page.inv-page .hero-summary { margin-top: clamp(0.5rem, 1.5vh, 1rem); }