/* ============================================================
   VARIANTE GRUPO HAGASE — "Institución con alma de sello"
   Papel crema + granate + naranja + navy. Fraunces / Archivo.
   Cargar DESPUÉS de core.css.
   ============================================================ */

:root {
  /* Paleta del grupo (prompt de Ricardo + logos originales) */
  --hg-granate: #9B1B30;
  --hg-granate-deep: #6E1222;
  --hg-naranja: #E8833A;
  --hg-navy: #16323F;
  --hg-gris: #6E6E6E;
  --hg-papel: #FAF6F1;
  --hg-crema: #F3EBE0;

  /* Colores por marca (sello Hágase Institute original) */
  --brand-realestate: #E31E24;
  --brand-homeinspector: #2B4C9B;
  --brand-loanofficer: #F7941D;
  --brand-cam: #1E7B34;
  --brand-appraisal: #8E2A7E;
  --brand-generalcontractor: #D9AD00;

  /* Mapeo al sistema */
  --c-primary: var(--hg-granate);
  --c-accent: var(--hg-naranja);
  --c-on-accent: #221008;
  --c-ink: #26221E;
  --c-heading: var(--hg-navy);
  --c-muted: #5D5A55;
  --c-bg: var(--hg-papel);
  --c-surface: #FFFFFF;
  --c-surface-alt: var(--hg-crema);
  --c-line: #E4DACC;

  --c-header-bg: color-mix(in srgb, var(--hg-navy) 96%, transparent);
  --c-header-ink: #F6F1E9;
  --c-header-line: rgba(255, 255, 255, .08);

  --c-hero-bg: radial-gradient(1200px 640px at 82% -10%, #C24B58 0%, transparent 55%),
               linear-gradient(160deg, var(--hg-granate) 0%, var(--hg-granate-deep) 68%, #4E0C18 100%);
  --c-hero-kicker: #F2B27A;
  --c-hero-muted: rgba(255, 243, 232, .86);

  --c-footer-bg: var(--hg-navy);
  --c-footer-deep: #0E212B;
  --c-cta-bg: linear-gradient(150deg, var(--hg-navy) 0%, #0F2731 80%);
  --c-statband-bg: #FFFFFF;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-tracking: -0.01em;
}

/* Textura de papel sutil (grain SVG inline, sin peticiones) */
body.theme-hagase {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero con marca de agua de sello (aro punteado) */
.theme-hagase .hero::before {
  content: ""; position: absolute; inset: -18% -12% auto auto; width: 620px; height: 620px;
  border: 2px dashed rgba(255, 255, 255, .14); border-radius: 50%; z-index: 1;
}
.theme-hagase .hero::after {
  content: ""; position: absolute; inset: auto auto -34% -10%; width: 460px; height: 460px;
  border: 1.5px solid rgba(255, 255, 255, .09); border-radius: 50%; z-index: 1;
}

/* Detalle "diploma": doble filete en tarjetas destacadas */
.theme-hagase .card--sello { position: relative; border: 1.5px solid var(--hg-navy); box-shadow: none; }
.theme-hagase .card--sello::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--hg-navy) 35%, transparent);
  border-radius: calc(var(--radius) - 6px); pointer-events: none;
}

/* Kicker con rombos tipográficos institucionales */
.theme-hagase .kicker--sello::before { content: "◆"; width: auto; height: auto; background: none; font-size: .62em; translate: 0 -1px; }
.theme-hagase .kicker--sello::after { content: "◆"; font-size: .62em; translate: 0 -1px; }

/* Acentos por marca: pinta borde superior y CTA de la tarjeta */
.brand-card[data-brand] { border-top: 5px solid var(--brand); }
.brand-card[data-brand="realestate"] { --brand: var(--brand-realestate); }
.brand-card[data-brand="homeinspector"] { --brand: var(--brand-homeinspector); }
.brand-card[data-brand="loanofficer"] { --brand: var(--brand-loanofficer); }
.brand-card[data-brand="cam"] { --brand: var(--brand-cam); }
.brand-card[data-brand="appraisal"] { --brand: var(--brand-appraisal); }
.brand-card[data-brand="generalcontractor"] { --brand: var(--brand-generalcontractor); }

/* Separador de arco (guiño al techo Hágase) */
.roof-divider { height: 54px; position: relative; overflow: hidden; }
.roof-divider::before {
  content: ""; position: absolute; left: 50%; top: 12px; translate: -50% 0; rotate: 0deg;
  width: 160px; height: 84px; border-top: 7px solid var(--hg-naranja);
  transform: skewY(0deg); clip-path: polygon(0 100%, 50% 0, 100% 100%, 92% 100%, 50% 16%, 8% 100%);
  background: var(--hg-naranja);
}