/* =========================================================
   GRUPO ELIG — Holding empresarial
   Sistema de diseño: navy profundo + platino + champán
   Tipografía: Cormorant Garamond (display) · Archivo (texto)
   ========================================================= */

:root{
  /* Brand */
  --navy:        #002959;   /* marca */
  --navy-700:    #002048;
  --navy-800:    #001734;
  --navy-900:    #000f24;
  --navy-950:    #00091a;

  /* Platino / texto sobre oscuro */
  --platinum:    #eef1f6;
  --silver:      #b9c4d4;
  --silver-mut:  #7e8ca3;
  --hairline:    rgba(201,211,228,0.14);
  --hairline-2:  rgba(201,211,228,0.30);

  /* Acento champán */
  --gold:        #c6a867;
  --gold-soft:   #d8c191;
  --gold-deep:   #a98c4f;

  /* Claros (papel cálido) */
  --paper:       #f6f4ef;
  --paper-2:     #efece4;
  --ink:         #0d1626;
  --ink-soft:    #44505f;
  --ink-line:    rgba(13,22,38,0.12);

  --font-serif:  "Cormorant Garamond", Georgia, serif;
  --font-sans:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font-sans);
  background:var(--navy-900);
  color:var(--platinum);
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--navy-900); }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--gold);
  opacity:.8;
}
.eyebrow.center::before{ display:none; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:400; line-height:1.02; letter-spacing:-.01em; }
.display{ font-size:clamp(3rem, 8.5vw, 7.6rem); font-weight:300; }
.h2{ font-size:clamp(2.3rem, 5vw, 4.2rem); }
.serif-it{ font-style:italic; }
.lede{ font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--silver); font-weight:300; line-height:1.7; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ============== HEADER ============== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:12px 0;
  background:rgba(0,15,36,0.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:42px; height:42px; border-radius:9px; box-shadow:0 4px 18px rgba(0,0,0,.35); transition:width .4s var(--ease), height .4s var(--ease); }
.site-header.scrolled .brand img{ width:36px; height:36px; }
.brand .wordmark{ font-size:1.02rem; font-weight:600; letter-spacing:.34em; color:var(--platinum); padding-left:2px; }
.brand .wordmark span{ color:var(--silver-mut); }

.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{
  font-size:.82rem; font-weight:500; letter-spacing:.06em; color:var(--silver);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--platinum); }
.nav-links a:hover::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-toggle{ display:flex; align-items:center; font-size:.78rem; font-weight:600; letter-spacing:.08em; gap:2px; }
.lang-toggle button{
  background:none; border:none; color:var(--silver-mut); cursor:pointer;
  font:inherit; padding:4px 6px; transition:color .25s; letter-spacing:.08em;
}
.lang-toggle button.active{ color:var(--gold); }
.lang-toggle .sep{ color:var(--hairline-2); }

.menu-btn{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.menu-btn span{ width:24px; height:1.5px; background:var(--platinum); transition:.3s; }

/* ============== HERO ============== */
.hero{
  min-height:100vh; display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(0,41,89,.55), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-800) 55%, var(--navy-900));
  overflow:hidden;
  padding-top:120px; padding-bottom:80px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-bg img{
  position:absolute; right:-6%; bottom:0; width:62%; min-width:680px; height:100%;
  object-fit:cover; object-position:center bottom;
  opacity:.36;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 42%);
  mask-image:linear-gradient(90deg, transparent, #000 42%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, var(--navy-900));
}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 40%, #000, transparent 75%);
  mask-image:radial-gradient(80% 70% at 30% 40%, #000, transparent 75%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-inner{ max-width:920px; }
.hero h1{ margin:30px 0 0; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero .accent{ color:transparent; background:linear-gradient(100deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); -webkit-background-clip:text; background-clip:text; font-style:italic; }
.hero .lede{ margin-top:34px; max-width:560px; }
.hero-cta{ margin-top:48px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:17px 30px; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:.4s var(--ease);
}
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(6px); }
.btn-gold{ background:var(--gold); color:var(--navy-900); }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-ghost{ border-color:var(--hairline-2); color:var(--platinum); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

.hero-foot{
  position:absolute; left:0; right:0; bottom:34px; z-index:2;
}
.hero-foot .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.scroll-cue{ display:flex; align-items:center; gap:12px; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-mut); }
.scroll-cue .dot{ width:1px; height:46px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-cue .dot::after{ content:""; position:absolute; top:0; left:0; width:100%; height:14px; background:var(--gold); animation:scrollcue 2.4s var(--ease) infinite; }
@keyframes scrollcue{ 0%{transform:translateY(-16px)} 70%,100%{transform:translateY(48px)} }
.hero-tag{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--silver-mut); text-align:right; }

/* ============== SECTION HEADINGS ============== */
.sec-head{ max-width:780px; }
.sec-head .h2{ margin-top:22px; }
.sec-head .lede{ margin-top:26px; }
.sec-pad{ padding:clamp(90px,12vw,170px) 0; }

/* ============== QUIÉNES SOMOS ============== */
.about{ background:var(--paper); color:var(--ink); }
.about .eyebrow{ color:var(--gold-deep); }
.about .eyebrow::before{ background:var(--gold-deep); }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,7vw,110px); align-items:start; }
.about h2{ color:var(--ink); margin-bottom:8px; }
.about .lede{ color:var(--ink-soft); }
.about-body{ margin-top:34px; }
.about-body p{ color:var(--ink-soft); font-size:1.05rem; font-weight:300; line-height:1.85; }
.about-body p + p{ margin-top:22px; }
.about-figure{ position:relative; }
.about-figure{ margin-bottom:54px; }
.about-figure .frame{ position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/5; background:var(--navy-800); }
.about-figure .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.about-figure:hover .frame img{ transform:scale(1.05); }
.about-figure .cap{ position:absolute; left:-1px; bottom:24px; background:var(--navy); color:var(--platinum); padding:14px 22px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.about-figure .cap b{ color:var(--gold); font-weight:600; }

.stats{ margin-top:clamp(56px,8vw,92px); border-top:1px solid var(--ink-line); padding-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.stat .num{ font-family:var(--font-serif); font-size:clamp(2.6rem,5vw,3.8rem); font-weight:300; color:var(--ink); line-height:1; }
.stat .num small{ color:var(--gold-deep); font-size:.5em; vertical-align:super; }
.stat .lab{ margin-top:12px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ============== SECTORES ============== */
.sectors{ background:var(--navy-900); padding:clamp(90px,12vw,160px) 0; position:relative; }
.sectors::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background:radial-gradient(70% 60% at 85% 0%, rgba(0,41,89,.6), transparent 60%);
}
.sectors .wrap{ position:relative; z-index:1; }
.sectors-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:64px; }
.sectors-head .count{ font-family:var(--font-serif); font-size:clamp(3rem,6vw,5rem); font-weight:300; color:var(--hairline-2); line-height:.9; white-space:nowrap; }
.sectors-head .count b{ color:var(--gold); font-weight:300; }

.sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
.sector{
  position:relative; padding:34px 30px 30px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  cursor:default; overflow:hidden; transition:background .5s var(--ease); min-height:208px; display:flex; flex-direction:column;
}
.sector::after{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.sector:hover{ background:linear-gradient(180deg, rgba(0,41,89,.5), transparent); }
.sector:hover::after{ width:100%; }
.sector .idx{ font-size:.74rem; font-weight:600; letter-spacing:.16em; color:var(--silver-mut); transition:color .4s; }
.sector:hover .idx{ color:var(--gold); }
.sector h3{ font-size:1.85rem; margin-top:auto; color:var(--platinum); transition:transform .5s var(--ease); }
.sector:hover h3{ transform:translateX(6px); }
.sector p{ font-size:.86rem; color:var(--silver-mut); margin-top:10px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); line-height:1.55; }
.sector:hover p{ max-height:90px; opacity:1; }
.sector .badge-ai{
  position:absolute; top:30px; right:28px; font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-deep); border-radius:2px; padding:4px 8px; opacity:.85;
}

/* ============== PROPÓSITO ============== */
.purpose{ background:var(--paper-2); color:var(--ink); }
.purpose .eyebrow{ color:var(--gold-deep); }
.purpose .eyebrow.center::before{ display:none; }
.purpose .sec-head{ margin:0 auto; text-align:center; }
.purpose .sec-head .eyebrow{ justify-content:center; }
.purpose h2{ color:var(--ink); }
.pvm{ margin-top:clamp(56px,7vw,88px); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.pvm-card{ background:var(--paper-2); padding:clamp(34px,4vw,54px) clamp(28px,3vw,42px); transition:background .5s var(--ease); }
.pvm-card:hover{ background:var(--paper); }
.pvm-card .roman{ font-family:var(--font-serif); font-size:1.1rem; font-style:italic; color:var(--gold-deep); letter-spacing:.1em; }
.pvm-card h3{ font-size:2rem; color:var(--ink); margin:14px 0 18px; }
.pvm-card p{ color:var(--ink-soft); font-size:1rem; font-weight:300; line-height:1.8; }

/* ============== SOSTENIBILIDAD ============== */
.esg{
  background:linear-gradient(180deg, var(--navy-800), var(--navy-950));
  padding:clamp(90px,12vw,170px) 0; position:relative; overflow:hidden;
}
.esg-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,100px); align-items:center; }
.esg h2{ color:var(--platinum); }
.esg .lede{ margin-top:26px; }
.esg-pillars{ display:flex; flex-direction:column; gap:1px; background:var(--hairline); border-block:1px solid var(--hairline); }
.pillar{ background:var(--navy-900); padding:30px 8px 30px 0; display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start; transition:background .5s var(--ease); }
.pillar:hover{ background:var(--navy-800); }
.pillar .pn{ font-family:var(--font-serif); font-size:2.4rem; font-weight:300; color:var(--gold); line-height:1; }
.pillar h3{ font-size:1.5rem; color:var(--platinum); }
.pillar p{ font-size:.94rem; color:var(--silver-mut); margin-top:8px; font-weight:300; line-height:1.65; }
.esg-figure{ position:relative; }
.esg-figure .frame{ overflow:hidden; border-radius:3px; aspect-ratio:3/4; }
.esg-figure .frame img{ width:100%; height:100%; object-fit:cover; }
.esg-quote{ margin-top:clamp(56px,8vw,90px); border-top:1px solid var(--hairline); padding-top:48px; max-width:900px; }
.esg-quote p{ font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.4rem); font-weight:300; font-style:italic; color:var(--platinum); line-height:1.4; }
.esg-quote .by{ margin-top:20px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

/* ============== FOOTER ============== */
.footer{ background:var(--navy-950); padding:clamp(70px,9vw,110px) 0 40px; border-top:1px solid var(--hairline); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:60px; border-bottom:1px solid var(--hairline); }
.footer-brand{ display:flex; align-items:center; gap:16px; }
.footer-brand img{ width:64px; height:64px; border-radius:12px; }
.footer-brand .wm{ font-size:1.25rem; font-weight:600; letter-spacing:.24em; line-height:1.1; white-space:nowrap; }
.footer-brand .wm small{ display:block; font-family:var(--font-serif); font-style:italic; font-size:1rem; letter-spacing:0; color:var(--gold); text-transform:none; margin-top:8px; font-weight:400; white-space:nowrap; }
.footer-blurb{ margin-top:30px; color:var(--silver-mut); font-weight:300; max-width:360px; font-size:.96rem; }
.fcol h4{ font-family:var(--font-sans); font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.fcol a, .fcol p{ display:block; color:var(--silver); font-size:.94rem; font-weight:300; padding:7px 0; transition:color .25s; }
.fcol a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:34px; flex-wrap:wrap; }
.footer-bottom small{ color:var(--silver-mut); font-size:.78rem; letter-spacing:.04em; }

/* ============== SEDE · tarjeta dirección ============== */
.about-figure .sede-addr{
  position:absolute; left:24px; right:24px; bottom:-30px;
  background:var(--navy); color:var(--platinum);
  padding:22px 26px; box-shadow:0 30px 60px -24px rgba(0,9,26,.7);
  border-top:2px solid var(--gold);
}
.about-figure .sede-addr .k{ display:flex; align-items:center; gap:10px; font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.about-figure .sede-addr .k::before{ content:""; width:6px; height:6px; background:var(--gold); border-radius:50%; }
.about-figure .sede-addr p{ margin-top:12px; font-size:.92rem; font-weight:300; line-height:1.6; color:var(--silver); }
.about-figure .cap{ display:none; }

/* ============== PRESENCIA GLOBAL ============== */
.global{ position:relative; overflow:hidden; background:var(--navy-950); padding:clamp(100px,13vw,180px) 0 0; }
.global-bg{ position:absolute; inset:0 0 auto 0; height:78%; z-index:0; }
.global-bg img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.global-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(0,9,26,.35), rgba(0,9,26,.82) 75%),
    linear-gradient(180deg, var(--navy-950) 2%, transparent 30%, transparent 60%, var(--navy-950));
}
.global .wrap{ position:relative; z-index:1; }
.global .sec-head{ max-width:760px; margin:0 auto; text-align:center; }
.global .sec-head .eyebrow{ justify-content:center; }
.global h2{ color:var(--platinum); }
.global .lede{ margin-top:26px; }
.global-points{
  margin-top:clamp(56px,7vw,84px); display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hairline); background:rgba(0,15,36,.55); backdrop-filter:blur(6px);
}
.gpoint{ padding:38px 34px; border-right:1px solid var(--hairline); transition:background .5s var(--ease); }
.gpoint:last-child{ border-right:none; }
.gpoint:hover{ background:rgba(0,41,89,.35); }
.gpoint .gn{ font-family:var(--font-serif); font-size:2.6rem; font-weight:300; color:var(--gold); line-height:1; }
.gpoint h3{ font-size:1.5rem; color:var(--platinum); margin:16px 0 10px; }
.gpoint p{ font-size:.92rem; font-weight:300; color:var(--silver-mut); line-height:1.6; }

/* IPO strip */
.ipo{ position:relative; z-index:1; margin-top:clamp(70px,9vw,120px); border-top:1px solid var(--hairline); background:linear-gradient(180deg, transparent, rgba(0,41,89,.25)); }
.ipo-inner{ padding:clamp(56px,7vw,88px) var(--gut); text-align:center; }
.ipo-tag{
  display:inline-flex; align-items:center; gap:10px; font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--navy-900); background:var(--gold); padding:9px 18px; border-radius:2px;
}
.ipo h3{ font-size:clamp(1.9rem,3.6vw,3.1rem); color:var(--platinum); margin:26px auto 0; max-width:880px; }
.ipo h3 .serif-it{ color:var(--gold-soft); }
.ipo-exchanges{
  margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 0;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--silver);
}
.ipo-exchanges span{ padding:0 22px; border-right:1px solid var(--hairline-2); }
.ipo-exchanges span:last-child{ border-right:none; }
.ipo-note{ margin-top:26px; font-size:.78rem; letter-spacing:.04em; color:var(--silver-mut); font-style:italic; font-family:var(--font-serif); }

/* ============== REVEAL ANIM ============== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].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){ [data-reveal]{ opacity:1; transform:none; transition:none; } .scroll-cue .dot::after{ animation:none; } html{ scroll-behavior:auto; } }

/* ============== RESPONSIVE ============== */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; }
  .about-figure{ max-width:460px; }
  .esg-grid{ grid-template-columns:1fr; }
  .esg-figure{ max-width:420px; order:-1; }
  .sector-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
  .nav-links.open{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(0,9,26,.97); backdrop-filter:blur(16px); padding:8px var(--gut) 24px; border-bottom:1px solid var(--hairline);
  }
  .nav-links.open a{ padding:16px 0; border-bottom:1px solid var(--hairline); font-size:1rem; }
  .pvm{ grid-template-columns:1fr; }
  .global-points{ grid-template-columns:1fr; }
  .gpoint{ border-right:none; border-bottom:1px solid var(--hairline); }
  .gpoint:last-child{ border-bottom:none; }
  .ipo-exchanges span{ padding:0 14px; }
  .stats{ grid-template-columns:1fr; gap:34px; }
  .hero-foot .hero-tag{ display:none; }
  .sectors-head .count{ font-size:2.6rem; }
}
@media (max-width:520px){
  .sector-grid{ grid-template-columns:1fr; }
  .sector p{ max-height:90px; opacity:1; } /* siempre visible en móvil */
  .ipo-exchanges{ flex-direction:column; gap:12px; }
  .ipo-exchanges span{ border-right:none; padding:0; }
  .footer-top{ grid-template-columns:1fr; }
}