/* ============================================================
   GONA Invest — web V7 (producción)
   Diseño aprobado por el cliente (oct 2026): tema oscuro, Spectral
   (titulares) + Schibsted Grotesk (texto), acento Gona Light.
   Fuentes alojadas en el propio dominio (sin Google Fonts).
   Lo usan index.html y las páginas legales.
   ============================================================ */

@font-face { font-family:"Spectral"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/spectral-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-style:italic; font-weight:300; font-display:swap;
  src:url("../fonts/spectral-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/spectral-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Schibsted Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg:        #1C211F;   /* fondo principal */
  --bg-foot:   #141817;   /* pie */
  --ink:       #E8E7E2;   /* texto principal */
  --ink-lead:  #D5DAD5;   /* párrafo de portada */
  --ink-2:     #A7ADA8;   /* texto secundario */
  --ink-3:     #8E958F;   /* etiquetas */
  --ink-foot:  #BFC5BF;   /* enlaces del pie */
  --ink-foot-2:#6F766F;   /* etiquetas del pie */
  --ink-foot-3:#777E77;   /* aviso legal del pie */
  --line:      #363D39;
  --line-2:    #4D5551;
  --line-foot: #262D2A;
  --accent:    #E1FF7C;   /* Gona Light (libro de marca) */
  --serif: "Spectral", Georgia, serif;
  --sans:  "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --max: 1100px;
  --gut: clamp(20px, 4vw, 44px);
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1, h2, h3, p { margin:0; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.6; }
::selection { background:var(--accent); color:var(--bg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
section[id] { scroll-margin-top:16px; }

/* idiomas (patrón V3–V6) */
body[data-lang="es"] .en { display:none !important; }
body[data-lang="en"] .es { display:none !important; }

/* el diseño mide 1100px de contenido + los márgenes laterales */
.wrap { max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.skip { position:absolute; left:-9999px; top:0; z-index:20; background:var(--accent); color:var(--bg); padding:10px 18px; }
.skip:focus { left:0; }

/* ---------- etiquetas y titulares comunes ---------- */
.eyebrow { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.cap { font-size:13px; color:var(--ink-3); }
.h2 { font-family:var(--serif); font-weight:300; font-size:clamp(26px, 3.4vw, 44px); line-height:1.12; letter-spacing:-.02em; }
.lead { font-size:clamp(17px, 1.4vw, 19px); line-height:1.6; color:var(--ink-2); }
.body { font-size:16px; line-height:1.6; color:var(--ink-2); }
.figure { font-family:var(--serif); font-weight:300; font-size:clamp(28px, 3.2vw, 40px); line-height:1.05; letter-spacing:-.025em; }
.figure-s { font-family:var(--serif); font-weight:300; font-size:clamp(21px, 2.1vw, 26px); line-height:1.1; letter-spacing:-.02em; }

/* fila con columna lateral de etiqueta (patrón de todas las secciones) */
.split { display:flex; flex-wrap:wrap; gap:clamp(28px, 4vw, 56px); }
.split-side { flex:1 1 150px; max-width:180px; min-width:0; }
.split-main { flex:1 1 540px; min-width:0; display:flex; flex-direction:column; gap:clamp(32px, 4vw, 52px); }

/* ---------- cabecera ---------- */
.bar {
  max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto; padding:clamp(16px, 3vw, 28px) var(--gut);
  display:flex; flex-wrap:wrap; column-gap:clamp(16px, 2.5vw, 28px); row-gap:14px;
  align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; min-height:44px; }
.brand img { height:30px; width:auto; }
.bar-right { display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px); }
.nav-wide { display:flex; flex-wrap:wrap; gap:clamp(16px, 2.4vw, 34px); align-items:center; font-size:14px; color:var(--ink-2); }
.nav-wide a.is-contact { color:var(--ink); }
.lang {
  font:inherit; font-size:13px; letter-spacing:.08em; color:var(--ink-2);
  background:none; border:0; padding:0; min-height:44px; min-width:28px; cursor:pointer; transition:color .2s;
}
.lang:hover { color:var(--ink); }

.burger { display:none; position:relative; }
.burger summary {
  list-style:none; cursor:pointer; width:44px; height:44px; margin-right:-10px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.burger summary::-webkit-details-marker { display:none; }
.burger .ico-close { display:none; }
.burger[open] .ico-open { display:none; }
.burger[open] .ico-close { display:block; }
.burger-menu {
  position:absolute; right:-10px; top:calc(100% + 16px); z-index:5; min-width:216px;
  background:var(--bg); border:1px solid var(--line); padding:8px 0; display:flex; flex-direction:column;
}
.burger-menu a { font-size:16px; color:var(--ink); padding:12px 22px; min-height:44px; display:flex; align-items:center; }
@media (pointer:coarse) and (min-width:561px){ .nav-wide a { padding:12px 0; } .lang { min-width:44px; } } /* tablets: zona táctil de 44 px */
@media (max-width:560px){
  .nav-wide { display:none; }
  .burger { display:block; }
}

/* ---------- portada ---------- */
.hero { position:relative; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:50% 72%; }
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,33,31,.60) 0%, rgba(28,33,31,.80) 46%, rgba(28,33,31,.95) 84%, #1C211F 100%);
}
@keyframes hero-fade { to { opacity:0; } }
@supports (animation-timeline: view()) {
  .hero-media { animation:hero-fade linear both; animation-timeline:view(); animation-range:exit 0% exit 90%; }
}
@media (prefers-reduced-motion:reduce){ .hero-media{ animation:none; } }
.hero-inner { position:relative; z-index:1; }
.hero-copy {
  max-width:calc(var(--max) + 2 * var(--gut)); margin:0 auto;
  padding:clamp(72px, 12vw, 150px) var(--gut) clamp(76px, 13vw, 160px);
  display:flex; flex-direction:column; gap:clamp(28px, 3.2vw, 44px);
}
.hero h1 {
  max-width:max(760px, 9.4em); /* 3 líneas estables en pantallas grandes */ font-family:var(--serif); font-weight:300;
  font-size:clamp(34px, 6.2vw, 92px); line-height:1.02; letter-spacing:-.03em;
}
.hero-sub { max-width:50ch; font-size:clamp(17px, 1.4vw, 19px); line-height:1.6; color:var(--ink-lead); }
.cta-line {
  align-self:flex-start; font-size:15px; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}

/* ---------- parámetros ---------- */
.params { position:relative; z-index:1; }
.params-box { border-top:1px solid var(--line); padding-top:30px; }
.params-main { gap:clamp(26px, 3vw, 36px); }
.grid-figs {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); /* siempre 3 o 1, nunca 2 + 1 */
  column-gap:clamp(28px, 3.5vw, 48px); row-gap:clamp(26px, 3vw, 36px);
}
@media (max-width:560px){ .grid-figs { grid-template-columns:1fr; } }
.fig { border-top:1px solid var(--accent); padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.grid-notes {
  border-top:1px solid var(--line); padding-top:clamp(24px, 3vw, 34px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  column-gap:clamp(28px, 3.5vw, 48px); row-gap:clamp(26px, 3vw, 34px);
}
.note { display:flex; flex-direction:column; gap:10px; }

/* ---------- secciones ---------- */
.sec { padding:clamp(60px, 9vw, 120px) 0; }
.sec-tight { padding:0 0 clamp(60px, 9vw, 120px); }
#nosotros .h2 { max-width:470px; }
#nosotros .lead { max-width:54ch; }
#estructura .h2 { max-width:450px; }
#estructura .lead { max-width:52ch; }
#criterio .h2 { max-width:500px; }
.h2 em { font-style:italic; }

.lines { display:flex; flex-direction:column; }
.line-row {
  border-top:1px solid var(--line); padding:clamp(18px, 2.4vw, 24px) 0;
  display:flex; flex-wrap:wrap; gap:clamp(6px, 1.5vw, 20px);
}
.line-row:last-child { border-bottom:1px solid var(--line); }
.line-row h3 { flex:1 1 190px; max-width:240px; min-width:0; font-size:17px; font-weight:500; }
.line-row p { flex:1 1 280px; min-width:0; }

.grid-cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  column-gap:clamp(28px, 4vw, 48px); row-gap:clamp(32px, 4vw, 40px);
}
.card { border-top:1px solid var(--line-2); padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.card h3 { font-family:var(--serif); font-size:clamp(21px, 2.1vw, 26px); font-weight:400; letter-spacing:-.01em; }

.grid-crit {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  column-gap:clamp(28px, 4vw, 48px); row-gap:clamp(32px, 4vw, 40px);
}
.crit { display:flex; flex-direction:column; gap:10px; }
.crit .num { font-size:13px; letter-spacing:.1em; color:var(--accent); }
.crit h3 { font-size:17px; font-weight:500; }

/* ---------- contacto ---------- */
.contact { border-top:1px solid var(--line); }
.contact-inner {
  padding-top:clamp(60px, 9vw, 120px); padding-bottom:clamp(60px, 9vw, 120px);
  display:flex; flex-wrap:wrap; gap:clamp(36px, 5vw, 80px);
}
.contact-intro { flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:clamp(18px, 2.2vw, 24px); }
.contact-intro h2 {
  max-width:460px; font-family:var(--serif); font-weight:300;
  font-size:clamp(29px, 4.4vw, 60px); line-height:1.08; letter-spacing:-.025em;
}
.contact-intro .lead { max-width:46ch; }
.contact-data { font-size:15px; line-height:1.7; color:var(--ink-3); }
.form { flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:clamp(22px, 2.6vw, 28px); }
.form-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); column-gap:28px; row-gap:26px; }
.field { display:flex; flex-direction:column; gap:10px; }
.field label { font-size:13px; color:var(--ink-3); }
.field input, .field select, .field textarea {
  width:100%; min-height:44px; padding:10px 0; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  transition:border-color .2s;
}
.field textarea { resize:vertical; line-height:1.6; }
.field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A7ADA8' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:24px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color:var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color:#E89B8B; }
.send-row { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.btn-send {
  font-family:inherit; font-size:15px; font-weight:500; color:var(--bg); background:var(--accent);
  border:0; border-radius:0; min-height:48px; padding:0 34px; cursor:pointer; transition:opacity .2s;
}
.btn-send:hover { opacity:.85; }
.btn-send[disabled] { opacity:.5; cursor:default; }
.send-note { font-size:13.5px; color:var(--ink-3); }
.consent { font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.consent a { text-decoration:underline; text-underline-offset:2px; }
.form-msg { font-size:15px; line-height:1.6; color:var(--ink); min-height:1px; }
.form-msg.is-error { color:#E89B8B; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- pie ---------- */
.foot { background:var(--bg-foot); color:var(--ink-3); }
.foot-inner {
  padding-top:clamp(48px, 6vw, 72px); padding-bottom:clamp(28px, 3.5vw, 36px);
  display:flex; flex-direction:column; gap:clamp(36px, 4.5vw, 56px);
}
.foot-top { display:flex; flex-wrap:wrap; column-gap:clamp(36px, 5vw, 72px); row-gap:clamp(32px, 4vw, 44px); align-items:flex-start; }
.foot-mark { flex:0 0 auto; width:76px; height:76px; margin:-10px 0 0 -10px; }
.foot-cols {
  flex:1 1 520px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(165px, 100%), 1fr));
  column-gap:clamp(24px, 3vw, 40px); row-gap:clamp(28px, 3.5vw, 40px);
}
.foot-col { display:flex; flex-direction:column; gap:14px; }
.foot-col .eyebrow { color:var(--ink-foot-2); }
.foot-links { display:flex; flex-direction:column; }
.foot-links a, .foot-col p { font-size:14.5px; line-height:1.75; color:var(--ink-foot); }
.foot-legal {
  max-width:92ch; font-size:12.5px; line-height:1.65; color:var(--ink-foot-3);
  border-top:1px solid var(--line-foot); padding-top:clamp(24px, 3vw, 32px);
}
.foot-bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:12.5px; color:var(--ink-foot-3); }

/* ---------- páginas legales / 404 / gracias ---------- */
.page { padding:clamp(48px, 7vw, 96px) 0 clamp(60px, 9vw, 120px); }
.page h1 { font-family:var(--serif); font-weight:300; font-size:clamp(32px, 4.6vw, 60px); line-height:1.08; letter-spacing:-.025em; max-width:20ch; }
.legal { max-width:68ch; margin-top:clamp(32px, 4vw, 48px); }
.legal h2 { font-family:var(--serif); font-weight:400; font-size:clamp(21px, 2.1vw, 26px); letter-spacing:-.01em; margin:44px 0 12px; }
.legal h3 { font-size:17px; font-weight:500; margin:28px 0 8px; }
.legal p, .legal li { font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 12px; }
.legal ul { padding-left:20px; margin:0 0 12px; }
.legal strong { color:var(--ink); font-weight:500; }
.legal a { text-decoration:underline; text-underline-offset:3px; }
.page .lead { margin-top:24px; max-width:50ch; }
.page .cta-line { margin-top:36px; }