/* FG Industries — web institucional. Tokens = fuente única de verdad. */

/* ---------- Fonts (auto-hospedadas) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-600-italic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/cormorant-garamond-700.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/CabinetGrotesk-Light.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/CabinetGrotesk-Regular.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/CabinetGrotesk-Medium.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/CabinetGrotesk-Bold.woff2") format("woff2");}

/* ---------- Design tokens (de color/css-vars.css) ---------- */
:root{
  --fg-midnight-950:#04101F; --fg-midnight-900:#07142B; --fg-midnight-800:#0E2143;
  --fg-midnight-700:#16315E; --fg-hairline:#22416E;
  --fg-champagne-hi:#F3E4B0; --fg-champagne:#D8BE72; --fg-champagne-deep:#9A7C33;
  --fg-titanium-hi:#EAF0F6; --fg-titanium:#B7C2CE; --fg-titanium-deep:#5E6B79;
  --fg-ink:#EAF0FA; --fg-platinum:#D7DCE3; --fg-muted:#7C8AA3;
  --fg-foil-champagne:linear-gradient(135deg,#F3E4B0 0%,#FFFFFF 16%,#D8BE72 46%,#9A7C33 100%);
  --fg-foil-titanium:linear-gradient(135deg,#EAF0F6 0%,#FFFFFF 16%,#B7C2CE 46%,#5E6B79 100%);
  --fg-bg:var(--fg-midnight-900); --fg-surface:var(--fg-midnight-800);
  --fg-text:var(--fg-ink); --fg-text-muted:var(--fg-muted);
  --fg-accent:var(--fg-champagne); --fg-accent-cool:var(--fg-titanium); --fg-border:var(--fg-hairline);

  --fg-font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fg-font-text:"Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* escala fluida (typography-scale.json) */
  --t-display-xl:clamp(2.75rem,1.6rem + 5.8vw,5.5rem);
  --t-display-l:clamp(2.1rem,1.4rem + 3.4vw,3.5rem);
  --t-h1:clamp(1.85rem,1.3rem + 2.6vw,2.75rem);
  --t-h2:clamp(1.5rem,1.2rem + 1.6vw,2.1rem);
  --t-h3:clamp(1.25rem,1.05rem + 1.0vw,1.6rem);
  --t-body-l:clamp(1.0625rem,1rem + 0.4vw,1.25rem);
  --t-body:clamp(1rem,0.97rem + 0.18vw,1.125rem);
  --t-small:0.875rem; --t-label:0.75rem;

  /* ritmo / aire */
  --shell:min(1200px,92vw);
  --section-y:clamp(5rem,4rem + 9vw,9rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--fg-bg);color:var(--fg-text);
  font-family:var(--fg-font-text);font-weight:400;font-size:var(--t-body);line-height:1.6;
  font-feature-settings:"ss01" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(216,190,114,.22);color:var(--fg-ink);}

/* atmósfera de fondo — sapphire profundo, sin ruido */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(22,49,94,.55), transparent 60%),
    radial-gradient(90% 60% at 85% 110%, rgba(14,33,67,.6), transparent 55%),
    var(--fg-midnight-950);
}

/* ---------- Tipografía utilidades ---------- */
.display{font-family:var(--fg-font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.04;
  font-feature-settings:"liga" 1,"dlig" 1,"onum" 1;}
.foil{background:var(--fg-foil-champagne);-webkit-background-clip:text;background-clip:text;color:transparent;}
.foil-titanium{background:var(--fg-foil-titanium);-webkit-background-clip:text;background-clip:text;color:transparent;}
.eyebrow{font-family:var(--fg-font-text);font-weight:500;text-transform:uppercase;
  letter-spacing:0.22em;font-size:var(--t-label);color:var(--fg-muted);}
.lede{font-size:var(--t-body-l);color:var(--fg-platinum);max-width:62ch;}

/* ---------- Layout ---------- */
.shell{width:var(--shell);margin-inline:auto;}
section{padding-block:var(--section-y);position:relative;}
.section-head{margin-bottom:clamp(2.5rem,2rem + 3vw,4rem);}
.section-head .eyebrow{display:block;margin-bottom:1.25rem;}
.section-head h2{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-h1);
  line-height:1.12;letter-spacing:-0.005em;max-width:24ch;}

/* hairline divider */
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--fg-border),transparent);
  width:var(--shell);margin-inline:auto;}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;
  padding-block:1.1rem;backdrop-filter:blur(0);transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;}
.site-header.is-scrolled{background:rgba(7,20,43,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--fg-border);}
.site-header .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.brand-lockup{display:flex;align-items:center;gap:.7rem;}
.brand-lockup .mark{width:34px;height:auto;}
.brand-lockup .wordmark{font-family:var(--fg-font-display);font-weight:600;font-size:1.05rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-platinum);}
.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2.4rem);}
.nav a{font-size:var(--t-small);letter-spacing:.04em;color:var(--fg-muted);transition:color .3s ease;}
.nav a:hover{color:var(--fg-ink);}
@media(max-width:760px){.nav{display:none;}}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(7rem,18vh,11rem);padding-bottom:var(--section-y);}
.hero .mark-lg{width:clamp(120px,18vw,190px);height:auto;margin-bottom:clamp(2.2rem,5vw,3.4rem);}
.hero .eyebrow{display:block;margin-bottom:1.6rem;}
.hero h1{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-display-xl);
  line-height:1.0;letter-spacing:-0.015em;margin-bottom:1.8rem;}
.hero .descriptor{font-size:var(--t-body-l);color:var(--fg-platinum);max-width:46ch;margin-bottom:2.4rem;}
.hero .tag-line{display:inline-flex;align-items:center;gap:1rem;font-size:var(--t-small);
  letter-spacing:.04em;color:var(--fg-muted);}
.hero .tag-line .dot{width:5px;height:5px;border-radius:50%;background:var(--fg-champagne);
  box-shadow:0 0 12px rgba(216,190,114,.55);}

/* ---------- Statement ("Qué es FG") ---------- */
.statement p{font-family:var(--fg-font-display);font-weight:500;font-size:var(--t-h2);
  line-height:1.32;letter-spacing:-0.005em;max-width:30ch;color:var(--fg-ink);
  font-feature-settings:"liga" 1,"onum" 1;}
.statement p em{font-style:italic;font-weight:600;}
.statement .note{margin-top:2.2rem;max-width:54ch;color:var(--fg-text-muted);font-size:var(--t-body);}

/* ---------- Pilares ---------- */
.pillars-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--fg-border);border:1px solid var(--fg-border);}
.pillar{background:var(--fg-bg);padding:clamp(1.8rem,2vw + 1rem,2.8rem);}
.pillar .idx{font-family:var(--fg-font-display);font-size:1.1rem;color:var(--fg-champagne-deep);
  font-feature-settings:"lnum" 1;letter-spacing:.05em;}
.pillar h3{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-h3);
  margin:.9rem 0 .8rem;letter-spacing:-0.005em;}
.pillar p{color:var(--fg-text-muted);font-size:var(--t-body);max-width:34ch;}
@media(max-width:680px){.pillars-grid{grid-template-columns:1fr;}}

/* ---------- Portafolio ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.4vw,1.5rem);}
.subsidiary{position:relative;display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.7rem,2vw + 1rem,2.6rem);
  background:linear-gradient(180deg,rgba(14,33,67,.55),rgba(7,20,43,.35));
  border:1px solid var(--fg-border);border-radius:2px;overflow:hidden;
  transition:border-color .4s ease,transform .4s ease,background .4s ease;}
.subsidiary::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:var(--fg-foil-titanium);opacity:.5;transition:opacity .4s ease;}
.subsidiary:hover{border-color:var(--fg-titanium-deep);transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(14,33,67,.75),rgba(7,20,43,.45));}
.subsidiary:hover::before{opacity:1;}
.subsidiary .sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.subsidiary h3{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-h3);
  letter-spacing:-0.005em;}
.subsidiary .vertical{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.18em;
  color:var(--fg-titanium);white-space:nowrap;}
.subsidiary p{color:var(--fg-text-muted);font-size:var(--t-body);max-width:42ch;}
.subsidiary .visit{margin-top:auto;font-size:var(--t-small);letter-spacing:.06em;
  color:var(--fg-titanium);display:inline-flex;align-items:center;gap:.5rem;}
.subsidiary .visit .arrow{transition:transform .35s ease;}
.subsidiary:hover .visit .arrow{transform:translateX(5px);}
@media(max-width:680px){.portfolio-grid{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.site-footer{padding-block:clamp(3.5rem,3rem + 4vw,5.5rem);border-top:1px solid var(--fg-border);
  background:rgba(4,16,31,.55);}
.footer-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:2.5rem;margin-bottom:3rem;}
.footer-brand .mark{width:30px;margin-bottom:1rem;}
.footer-brand .wordmark{font-family:var(--fg-font-display);font-weight:600;font-size:1rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-platinum);}
.footer-brand .seal{margin-top:.7rem;font-family:var(--fg-font-display);font-style:italic;
  font-size:var(--t-body-l);color:var(--fg-champagne);}
.footer-descriptor{font-size:var(--t-small);letter-spacing:.04em;color:var(--fg-muted);max-width:30ch;}
.legal{font-size:var(--t-small);line-height:1.7;color:var(--fg-text-muted);max-width:74ch;
  border-top:1px solid var(--fg-border);padding-top:2rem;}
.footer-meta{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;
  margin-top:2rem;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.18em;
  color:var(--fg-titanium-deep);}

/* ---------- Reveal (micro-animación sobria) ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}
[data-reveal][data-delay="4"]{transition-delay:.32s;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .subsidiary,.subsidiary *{transition:none !important;}
}

/* ---------- Footer: contacto + entidad legal + enlaces ---------- */
.footer-contact{display:flex;flex-direction:column;gap:1.1rem;}
.footer-address{font-style:normal;font-size:var(--t-small);line-height:1.7;color:var(--fg-muted);}
.footer-address a{color:var(--fg-titanium);transition:color .3s ease;}
.footer-address a:hover{color:var(--fg-ink);}
.footer-links{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem;}
.footer-links a{font-size:var(--t-small);letter-spacing:.03em;color:var(--fg-titanium);transition:color .3s ease;}
.footer-links a:hover{color:var(--fg-ink);}

/* ---------- Documento legal (privacy / terms / data-deletion) ---------- */
.doc-main{padding-top:clamp(7rem,14vh,9rem);padding-bottom:var(--section-y);}
.doc{width:var(--shell);margin-inline:auto;}
.doc-head{margin-bottom:clamp(2.4rem,2rem + 2.5vw,3.6rem);}
.doc-head .eyebrow{display:block;margin-bottom:1.1rem;}
.doc-head h1{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-display-l);
  line-height:1.06;letter-spacing:-0.01em;}
.doc-head .updated{margin-top:1.1rem;font-size:var(--t-small);color:var(--fg-muted);letter-spacing:.02em;}
.doc-body{max-width:74ch;}
.doc-body h2{font-family:var(--fg-font-display);font-weight:600;font-size:var(--t-h3);
  letter-spacing:-0.005em;color:var(--fg-ink);margin:2.6rem 0 .9rem;}
.doc-body h2:first-of-type{margin-top:0;}
.doc-body p{color:var(--fg-platinum);font-size:var(--t-body);line-height:1.7;margin-bottom:1.1rem;}
.doc-body ul{margin:0 0 1.1rem 1.2rem;color:var(--fg-platinum);}
.doc-body li{font-size:var(--t-body);line-height:1.7;margin-bottom:.5rem;padding-left:.25rem;}
.doc-body a{color:var(--fg-champagne);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--fg-champagne-deep);transition:color .3s ease;}
.doc-body a:hover{color:var(--fg-champagne-hi);}
.doc-body strong{color:var(--fg-ink);font-weight:500;}
.doc-body address{font-style:normal;line-height:1.7;color:var(--fg-platinum);}