/* =========================================================================
   Football Path × RFEF — one-page
   Genios Invisibles aesthetic · sober register for the RFEF
   Tokens come from colors_and_type.css
   ========================================================================= */

:root {
  --max: 1180px;
  --gutter: clamp(22px, 5vw, 72px);
  --slate: #495057;
}

html { scroll-behavior: smooth; }
body {
  background: var(--gi-white);
  color: var(--gi-fg);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

section { padding: clamp(72px, 10vw, 132px) 0; position: relative; }
section[data-tone="dark"]   { background: var(--gi-black);  color: var(--gi-fg-on-dark); }
section[data-tone="yellow"] { background: var(--gi-yellow); color: var(--gi-black); }
section[data-tone="beige"]  { background: var(--gi-beige); }
section[data-tone="surface"]{ background: var(--gi-surface); }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--gi-font-body);
  font-weight: var(--gi-w-semi);
  font-size: var(--gi-text-xs);
  letter-spacing: var(--gi-tracking-wide);
  text-transform: uppercase;
  color: var(--gi-fg-soft);
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 var(--gi-space-6);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 26px; height: 2px; background: var(--gi-yellow);
}
section[data-tone="dark"]   .eyebrow { color: rgba(255,255,255,0.55); }
section[data-tone="yellow"] .eyebrow { color: rgba(29,29,27,0.62); }
section[data-tone="yellow"] .eyebrow::before { background: var(--gi-black); }

.kicker {
  display: inline-block;
  font-family: var(--gi-font-body);
  font-weight: var(--gi-w-semi);
  font-size: var(--gi-text-2xs);
  letter-spacing: var(--gi-tracking-wide);
  text-transform: uppercase;
  color: var(--gi-fg-muted);
  border: 1.5px solid var(--gi-border);
  padding: 7px 14px;
  border-radius: var(--gi-radius-pill);
  margin: 0 0 var(--gi-space-6);
}
section[data-tone="dark"] .kicker { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.18); }
section[data-tone="yellow"] .kicker { color: var(--gi-black); border-color: rgba(29,29,27,0.28); }

h1, h2, h3, h4, p { margin: 0; }

.display {
  font-family: var(--gi-font-display);
  font-weight: var(--gi-w-extra);
  font-size: clamp(46px, 8.5vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-sec {
  font-family: var(--gi-font-display);
  font-weight: var(--gi-w-extra);
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.lede {
  font-family: var(--gi-font-body);
  font-weight: var(--gi-w-regular);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: var(--gi-leading-base);
  color: var(--gi-fg-muted);
  max-width: 62ch;
}
section[data-tone="dark"]   .lede { color: rgba(255,255,255,0.74); }
section[data-tone="yellow"] .lede { color: rgba(29,29,27,0.82); }

.accent-line {
  font-family: var(--gi-font-display);
  font-weight: var(--gi-w-bold);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gi-yellow-deep);
  text-wrap: balance;
}
section[data-tone="dark"] .accent-line { color: var(--gi-yellow); }

.section-head { margin-bottom: clamp(44px, 6vw, 72px); max-width: 1000px; }
.section-head .lede { margin-top: var(--gi-space-6); }

/* bullet notes (the "·" intro bullets in the reference) */
.notes { list-style: none; padding: 0; margin: var(--gi-space-6) 0 0; display: flex; flex-direction: column; gap: 10px; }
.notes li {
  position: relative; padding-left: 24px;
  font-family: var(--gi-font-body); font-size: var(--gi-text-md);
  color: var(--gi-fg-muted); line-height: var(--gi-leading-snug);
  max-width: 70ch;
}
.notes li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gi-yellow);
}
section[data-tone="dark"] .notes li { color: rgba(255,255,255,0.74); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gi-border-soft);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--gi-space-6);
  padding: 13px var(--gutter); max-width: var(--max); margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .fp-mark { height: 30px; width: auto; display: block; }
.brand .wm {
  font-family: var(--gi-font-display); font-weight: var(--gi-w-bold);
  font-size: var(--gi-text-md); letter-spacing: -0.01em; color: var(--gi-black);
  line-height: 1;
}
.brand .wm sup { color: var(--gi-yellow-deep); font-weight: var(--gi-w-extra); font-size: 0.5em; vertical-align: super; margin-left: 2px; }
.topbar nav {
  display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; align-items: center;
  font-family: var(--gi-font-body); font-size: var(--gi-text-sm);
}
.topbar nav a {
  text-decoration: none; color: var(--gi-fg-muted);
  padding: 8px 14px; border-radius: var(--gi-radius-pill);
  transition: background var(--gi-dur-fast) var(--gi-ease-out), color var(--gi-dur-fast) var(--gi-ease-out);
}
.topbar nav a:hover { background: var(--gi-surface); color: var(--gi-fg); }
.topbar nav a.cta {
  background: var(--gi-yellow); color: var(--gi-black); font-weight: var(--gi-w-semi);
  font-family: var(--gi-font-display);
}
.topbar nav a.cta:hover { background: #ffbf45; }
@media (max-width: 820px) { .topbar nav a:not(.cta) { display: none; } }

/* ---------- HERO ---------- */
.hero { padding: clamp(72px, 11vw, 150px) 0 clamp(64px, 9vw, 120px); overflow: hidden; }
.hero-bandas { position: absolute; inset: 0 -4% 0 auto; width: min(46%, 620px); pointer-events: none; z-index: 0; }
.hero-bandas svg { width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; }
/* ---------- Hero: ilustración "cómo piensan juntas" ---------- */
.hero-figure { margin: clamp(28px, 4vw, 48px) 0 0; position: relative; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%); }
.hero .hero-bandas { display: none; }
.hero-figure img { width: 100%; height: auto; display: block; }
@media (min-width: 1000px) {
  .hero { position: relative; }
  .hero-figure { position: absolute; right: 0; bottom: clamp(12px, 3vw, 48px); width: min(58%, 900px); margin: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%); mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
  .hero .hero-bandas { display: none; }
  .hero-inner .bajada-notes, .hero-inner .display { max-width: 46ch; }
  .hero-inner .display { max-width: 18ch; }
}
.hero .display { max-width: 16ch; }
.hero .display .lit { color: var(--gi-yellow); }
.hero .ask {
  font-family: var(--gi-font-display); font-weight: var(--gi-w-extra);
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--gi-yellow); margin-top: var(--gi-space-8);
}
.hero .ask .soft { color: rgba(255,255,255,0.5); display: block; font-size: 0.62em; font-weight: var(--gi-w-semi); letter-spacing: 0; margin-bottom: 6px; }
.hero .bajada {
  font-family: var(--gi-font-body); font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--gi-leading-base); color: rgba(255,255,255,0.7);
  max-width: 56ch; margin-top: var(--gi-space-8);
}
.hero .eyebrow { margin-bottom: var(--gi-space-8); }
.hero .bajada-notes { margin-top: var(--gi-space-8); max-width: 56ch; }
.hero .bajada-notes li { font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,0.72); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--gi-space-10); }
.pill {
  font-family: var(--gi-font-body); font-weight: var(--gi-w-medium); font-size: var(--gi-text-sm);
  color: rgba(255,255,255,0.82); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2); padding: 10px 18px; border-radius: var(--gi-radius-pill);
  transition: background var(--gi-dur-fast) var(--gi-ease-out), border-color var(--gi-dur-fast);
}
.pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--gi-white);
  border: 1px solid var(--gi-border-soft);
  border-radius: var(--gi-radius-lg);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
}
section[data-tone="surface"] .card,
section[data-tone="beige"] .card { border-color: var(--gi-border); }
section[data-tone="yellow"] .card { border: none; box-shadow: var(--gi-shadow-md); }

.card h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-lg); letter-spacing: -0.01em; }
.card p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }

/* numbered blind-spot cards */
.numbered { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 720px) { .numbered { grid-template-columns: 1fr; } }
.bs {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  background: var(--gi-surface); border-radius: var(--gi-radius-lg);
  padding: clamp(22px, 2.2vw, 32px);
  border-left: 3px solid var(--gi-yellow);
}
.bs .num {
  font-family: var(--gi-font-display); font-weight: var(--gi-w-extra);
  font-size: clamp(40px, 4vw, 56px); line-height: 0.8; color: var(--gi-yellow-deep);
  letter-spacing: -0.04em;
}
.bs .tag { font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-fg-soft); display: block; margin-bottom: 8px; }
.bs h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-lg); margin-bottom: 8px; }
.bs p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }

/* big quote / closing statement box */
.quote {
  border-left: 4px solid var(--gi-yellow);
  background: var(--gi-surface);
  border-radius: 0 var(--gi-radius-lg) var(--gi-radius-lg) 0;
  padding: clamp(30px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
}
.quote p {
  font-family: var(--gi-font-display); font-weight: var(--gi-w-bold);
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--gi-fg); text-wrap: balance;
}
section[data-tone="dark"] .quote { background: rgba(255,255,255,0.04); }
section[data-tone="dark"] .quote p { color: var(--gi-white); }

/* icon bubble */
.ibub { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.ibub svg { width: 24px; height: 24px; }
.ibub.soft { background: rgba(248,177,51,0.16); color: var(--gi-yellow-deep); }
section[data-tone="dark"] .ibub.soft { background: rgba(248,177,51,0.16); color: var(--gi-yellow); }

/* ---------- Tensiones list ---------- */
.tens-list { display: flex; flex-direction: column; gap: 10px; }
.tens-hint { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); margin: 0 0 6px; max-width: 52ch; }
.tens {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center;
  background: var(--gi-white); border: 1px solid var(--gi-border);
  border-radius: var(--gi-radius-md); padding: 16px 20px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--gi-dur-fast) var(--gi-ease-out), background var(--gi-dur-fast) var(--gi-ease-out), box-shadow var(--gi-dur-fast) var(--gi-ease-out);
}
.tens:hover { border-color: rgba(248,177,51,0.55); }
.tens:focus-visible { outline: 2px solid var(--gi-yellow); outline-offset: 2px; }
.tens.active { border-color: var(--gi-yellow); background: var(--gi-beige); box-shadow: var(--gi-shadow-sm); }
.tens .ibub { width: 44px; height: 44px; background: rgba(248,177,51,0.14); color: var(--gi-yellow-deep); }
.tens .ibub svg { width: 21px; height: 21px; }
.tens p { font-family: var(--gi-font-display); font-weight: var(--gi-w-semi); font-size: var(--gi-text-sm); line-height: 1.3; color: var(--gi-fg); }
.tens .n { font-family: var(--gi-font-mono); font-size: 11px; color: var(--gi-fg-soft); margin-bottom: 2px; }

.tens-detail {
  background: var(--gi-black); color: var(--gi-white);
  border-radius: var(--gi-radius-lg); padding: clamp(28px, 3vw, 44px);
  position: sticky; top: 96px; align-self: start;
}
.tens-detail .det-eyebrow {
  display: block; font-family: var(--gi-font-body); font-weight: var(--gi-w-semi);
  font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: var(--gi-space-5);
}
.tens-detail .badge {
  display: inline-block; background: var(--gi-yellow); color: var(--gi-black);
  font-family: var(--gi-font-display); font-weight: var(--gi-w-bold);
  font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--gi-radius-pill); margin-bottom: var(--gi-space-5);
}
.tens-detail h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-xl); margin-bottom: 14px; }
.tens-detail p { font-family: var(--gi-font-body); font-size: var(--gi-text-md); line-height: var(--gi-leading-base); color: rgba(255,255,255,0.78); }
.tens-wrap { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 860px) { .tens-wrap { grid-template-columns: 1fr; } .tens-detail { position: static; } }

/* ---------- Dominios / radar ---------- */
.dom-wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .dom-wrap { grid-template-columns: 1fr; } }
.radar-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--gi-radius-xl); padding: clamp(24px, 3vw, 40px);
}
.radar-card svg { width: 100%; height: auto; display: block; }
.radar-card .cap {
  text-align: center; font-family: var(--gi-font-body); font-size: var(--gi-text-2xs);
  letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin-top: 14px;
}
.dom-list { display: flex; flex-direction: column; }
.dom-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.dom-item:last-child { border-bottom: none; }
.dom-row {
  width: 100%; background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  display: grid; grid-template-columns: 36px 1fr auto 18px; gap: 16px; align-items: center;
  padding: 15px 4px; text-align: left;
  transition: background var(--gi-dur-fast) var(--gi-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.dom-row:hover { background: rgba(255,255,255,0.04); }
.dom-row:focus-visible { outline: 2px solid var(--gi-yellow); outline-offset: -2px; border-radius: 6px; }
.dom-row .di { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: var(--gi-text-md); color: var(--gi-yellow); }
.dom-row .dn { font-family: var(--gi-font-display); font-weight: var(--gi-w-medium); font-size: var(--gi-text-md); color: #fff; transition: color var(--gi-dur-fast); }
.dom-row .dc { font-family: var(--gi-font-mono); font-size: var(--gi-text-xs); color: rgba(255,255,255,0.45); letter-spacing: 0.08em; }
.dom-row .chev { width: 18px; height: 18px; color: rgba(255,255,255,0.45); transition: transform var(--gi-dur-base) var(--gi-ease-out), color var(--gi-dur-fast); }
.dom-item.open .dom-row .dn { color: var(--gi-yellow); }
.dom-item.open .dom-row .dc { color: var(--gi-yellow); }
.dom-item.open .dom-row .chev { transform: rotate(180deg); color: var(--gi-yellow); }
.dom-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--gi-dur-base) var(--gi-ease-out); }
.dom-item.open .dom-panel { grid-template-rows: 1fr; }
.dom-panel > p {
  overflow: hidden; min-height: 0; margin: 0;
  font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: rgba(255,255,255,0.82);
  line-height: var(--gi-leading-base);
}
.dom-item.open .dom-panel > p {
  margin: 0 0 16px 52px; padding: 14px 18px;
  background: rgba(255,255,255,0.05); border-left: 3px solid var(--gi-yellow);
  border-radius: 0 var(--gi-radius-sm) var(--gi-radius-sm) 0;
}

/* ---------- Doble capa ---------- */
.capas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 720px) { .capas { grid-template-columns: 1fr; } }
.capa { background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); padding: clamp(26px, 2.6vw, 38px); }
.capa h3 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-xl); margin-bottom: var(--gi-space-5); }
.flist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.flist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--gi-border-soft);
  font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg); line-height: var(--gi-leading-snug);
}
.flist li:first-child { border-top: none; }
.flist li svg { width: 18px; height: 18px; color: var(--gi-yellow-deep); margin-top: 1px; flex: none; }
.triada { display: flex; flex-direction: column; gap: 4px; }
.triada span {
  font-family: var(--gi-font-display); font-weight: var(--gi-w-extra);
  font-size: clamp(40px, 6vw, 84px); line-height: 0.92; letter-spacing: -0.03em; color: var(--gi-black);
}
.triada span:nth-child(2) { color: var(--gi-yellow-deep); }

/* ---------- Biométrica ---------- */
.signal-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.signal {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gi-surface); border: 1px solid var(--gi-border);
  border-radius: var(--gi-radius-pill); padding: 10px 18px 10px 12px;
  font-family: var(--gi-font-body); font-weight: var(--gi-w-medium); font-size: var(--gi-text-sm);
}
.signal .ibub { width: 30px; height: 30px; background: rgba(248,177,51,0.16); color: var(--gi-yellow-deep); }
.signal .ibub svg { width: 16px; height: 16px; }

.bio-table { width: 100%; border-collapse: collapse; }
.bio-table th, .bio-table td { text-align: left; padding: 16px 18px; vertical-align: top; }
.bio-table thead th {
  font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs);
  letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-fg-soft);
  border-bottom: 2px solid var(--gi-border);
}
.bio-table tbody tr { border-bottom: 1px solid var(--gi-border-soft); }
.bio-table tbody tr:nth-child(even) { background: var(--gi-surface); }
.bio-table .dom { font-family: var(--gi-font-display); font-weight: var(--gi-w-semi); font-size: var(--gi-text-sm); color: var(--gi-fg); white-space: nowrap; }
.bio-table .sig { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-yellow-deep); font-weight: var(--gi-w-medium); }
.bio-table .use { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); }
.bio-table-wrap { overflow-x: auto; border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); }

.device-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gi-border); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); overflow: hidden; }
@media (max-width: 720px) { .device-grid { grid-template-columns: repeat(2, 1fr); } }
.device { background: var(--gi-white); padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.device .ibub { background: rgba(248,177,51,0.14); color: var(--gi-yellow-deep); }
.device .nm { font-family: var(--gi-font-display); font-weight: var(--gi-w-semi); font-size: var(--gi-text-sm); }
.device .mk { font-family: var(--gi-font-mono); font-size: 11px; color: var(--gi-fg-soft); }

/* ---------- Aplicaciones (yellow) ---------- */
.app-card { background: var(--gi-white); border-radius: var(--gi-radius-lg); padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 24px -16px rgba(29,29,27,0.4); }
.app-card .top { display: flex; align-items: center; justify-content: space-between; }
.app-card .idx { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: var(--gi-text-lg); color: var(--gi-black); background: var(--gi-yellow); width: 38px; height: 38px; border-radius: var(--gi-radius-sm); display: grid; place-items: center; }
.app-card .ibub { background: rgba(248,177,51,0.18); color: #b9791a; width: 44px; height: 44px; }
.app-card .ibub svg { width: 22px; height: 22px; }
.app-card h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); letter-spacing: -0.01em; }
.app-card p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }

/* ---------- Verticales ---------- */
.vert { background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); padding: clamp(22px, 2.2vw, 30px); border-top: 3px solid var(--gi-yellow); display: flex; flex-direction: column; gap: 14px; }
.vert .vhead { display: flex; align-items: center; gap: 12px; }
.vert .ibub { width: 40px; height: 40px; background: rgba(248,177,51,0.14); color: var(--gi-yellow-deep); }
.vert .ibub svg { width: 20px; height: 20px; }
.vert h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); line-height: 1.15; }
.vert ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vert li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-snug); }
.vert li svg { width: 14px; height: 14px; color: var(--gi-yellow-deep); margin-top: 3px; }

/* ---------- Genios invisibles cards ---------- */
.gi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 860px) { .gi-cards { grid-template-columns: 1fr; } }
.gicard { padding: clamp(26px, 2.6vw, 36px) 0; }
.gicard . qmark, .gicard .ibub { margin-bottom: 18px; }
.gicard h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-xl); margin-bottom: 14px; letter-spacing: -0.01em; }
.gicard p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }
.gicard + .gicard { border-left: 1px solid var(--gi-border); padding-left: clamp(24px, 2.6vw, 40px); }
@media (max-width: 860px) { .gicard + .gicard { border-left: none; padding-left: 0; border-top: 1px solid var(--gi-border); } }

/* ---------- Hipótesis ---------- */
.hyp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gi-border); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); overflow: hidden; }
@media (max-width: 720px) { .hyp { grid-template-columns: 1fr; } }
.hyp-cell { background: var(--gi-white); padding: clamp(28px, 3vw, 44px); }
.hyp-cell .lab { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: clamp(24px, 2.6vw, 34px); color: var(--gi-yellow-deep); letter-spacing: -0.02em; margin-bottom: 10px; }
.hyp-cell .lab svg { width: 26px; height: 26px; }
.hyp-cell h4 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); margin-bottom: 10px; }
.hyp-cell p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-muted); line-height: var(--gi-leading-base); }

/* ---------- Propuesta ---------- */
.prop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 760px) { .prop-grid { grid-template-columns: 1fr; } }
.prop { background: var(--gi-white); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-lg); padding: clamp(28px, 3vw, 40px); }
.prop.aporta { border-top: 4px solid var(--gi-yellow); }
.prop h3 { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-lg); margin-bottom: 6px; }
.prop .sub { font-family: var(--gi-font-body); font-weight: var(--gi-w-semi); font-size: var(--gi-text-2xs); letter-spacing: var(--gi-tracking-wide); text-transform: uppercase; color: var(--gi-fg-soft); margin-bottom: var(--gi-space-5); display: block; }

/* ---------- Integración ---------- */
.integ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 18px); }
@media (max-width: 720px) { .integ-grid { grid-template-columns: 1fr; } }
.integ {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
  background: var(--gi-beige); border-radius: var(--gi-radius-md);
  border-left: 3px solid var(--gi-yellow); padding: 20px 22px;
}
.integ svg { width: 20px; height: 20px; color: var(--gi-yellow-deep); margin-top: 2px; }
.integ p { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg); line-height: var(--gi-leading-base); }
.integ p b { font-weight: var(--gi-w-semi); }

/* ---------- Cierre ---------- */
.cierre p { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: clamp(22px, 2.8vw, 38px); line-height: 1.18; letter-spacing: -0.02em; color: var(--gi-black); max-width: 22ch; text-wrap: balance; }
.cierre .small { font-family: var(--gi-font-body); font-weight: var(--gi-w-regular); font-size: clamp(16px, 1.4vw, 19px); color: rgba(29,29,27,0.78); line-height: var(--gi-leading-base); max-width: 60ch; margin-top: var(--gi-space-8); }

/* ---------- Contacto / footer ---------- */
.foot-bandas { position: absolute; inset: 0 auto 0 -6%; width: min(36%, 460px); z-index: 0; pointer-events: none; opacity: 0.9; }
.foot-bandas svg { width: 100%; height: 100%; }
.foot-inner { position: relative; z-index: 2; }
.foot-lead { font-family: var(--gi-font-display); font-weight: var(--gi-w-extra); font-size: clamp(34px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; max-width: 14ch; }
.foot-sub { font-family: var(--gi-font-body); font-size: clamp(15px, 1.3vw, 18px); color: rgba(255,255,255,0.66); line-height: var(--gi-leading-base); max-width: 64ch; margin-top: var(--gi-space-6); }
.lockup { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: clamp(36px, 4vw, 56px); }
.lockup .bubble { height: 132px; width: auto; display: block; }
.lockup .fp-foot { height: 82px; width: auto; display: block; }
.lockup .fp { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-2xl); color: #fff; line-height: 1; }
.lockup .fp sup { color: var(--gi-yellow); font-weight: var(--gi-w-extra); font-size: 0.42em; vertical-align: super; margin-left: 3px; }
.lockup .fp .pw { display: block; font-family: var(--gi-font-body); font-weight: var(--gi-w-regular); font-size: var(--gi-text-xs); color: rgba(255,255,255,0.5); letter-spacing: 0.04em; margin-top: 8px; }
.lockup .fp .pw b { color: var(--gi-cyan); font-weight: var(--gi-w-semi); }

.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--gi-radius-lg); overflow: hidden; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 720px) { .contacts { grid-template-columns: 1fr; } }
.contact { background: var(--gi-black); padding: 26px 28px; }
.contact .nm { font-family: var(--gi-font-display); font-weight: var(--gi-w-bold); font-size: var(--gi-text-md); color: #fff; margin-bottom: 14px; }
.contact a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--gi-yellow); font-family: var(--gi-font-body); font-size: var(--gi-text-sm); margin-bottom: 8px; }
.contact a svg { width: 16px; height: 16px; }
.contact a:hover { text-decoration: underline; }
.contact .tel { font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: rgba(255,255,255,0.6); }
.foot-base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--gi-font-body); font-size: var(--gi-text-xs); color: rgba(255,255,255,0.42); }

/* ---------- entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise var(--gi-dur-slow) var(--gi-ease-out) forwards; animation-timeline: view(); animation-range: entry 0% cover 24%; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Desescale: ilustración de los tres momentos ---------- */
.desescale-figure { margin: clamp(8px, 1.6vw, 22px) auto clamp(28px, 4vw, 52px); max-width: 900px; background: var(--gi-gray-50, #f8f9fa); }
.vision-figure { margin: clamp(8px, 1.6vw, 22px) auto clamp(28px, 4vw, 52px); max-width: 820px; background: var(--gi-white, #fff); }
.vision-figure img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.metodo-figure { margin: clamp(8px, 1.6vw, 22px) auto clamp(28px, 4vw, 52px); max-width: 860px; }
.metodo-figure img { width: 100%; height: auto; display: block; }
.ciclo-figure { margin: clamp(8px, 1.6vw, 22px) auto clamp(28px, 4vw, 52px); max-width: 900px; }
.ciclo-figure img { width: 100%; height: auto; display: block; }
.desescale-figure img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

/* ---------- iPad product showcase (Apple-style, scroll-driven) ---------- */
.ipad-showcase { margin: clamp(16px, 2vw, 30px) 0 clamp(4px, 1vw, 12px); }
.ipad-eyebrow { text-align: center; font-family: var(--gi-font-display); font-weight: var(--gi-w-semi); font-size: var(--gi-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gi-fg-muted, #6b7076); margin: 0 0 clamp(20px, 2.6vw, 34px); }
.ipad-hero { max-width: 1060px; margin: 0 auto; }
.ipad-hero-h { max-width: min(760px, 92%); }
.ipad-hero img { width: 100%; height: auto; display: block; }
.ipad-cap { text-align: center; font-family: var(--gi-font-body); font-size: var(--gi-text-sm); color: var(--gi-fg-soft); margin: clamp(12px, 1.6vw, 20px) auto 0; max-width: 54ch; line-height: var(--gi-leading-snug); }
.ipad-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); max-width: 860px; margin: clamp(40px, 6vw, 84px) auto 0; align-items: start; }
.ipad-v { margin: 0; }
.ipad-v img { width: 100%; height: auto; display: block; }
.ipad-duo .v-back { transform: translateY(9%); }
@media (prefers-reduced-motion: no-preference) {
  .ipad-hero { transform-origin: center bottom; animation: ipadHero linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  .ipad-duo .v-front { animation: ipadDuoFront linear both; animation-timeline: view(); animation-range: entry 6% cover 44%; }
  .ipad-duo .v-back  { animation: ipadDuoBack linear both;  animation-timeline: view(); animation-range: entry 0% cover 48%; }
  .ipad-eyebrow, .ipad-cap { opacity: 0; transform: translateY(12px); animation: rise var(--gi-dur-slow) var(--gi-ease-out) forwards; animation-timeline: view(); animation-range: entry 0% cover 24%; }
}
@keyframes ipadHero { from { opacity: .35; transform: scale(.9) translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ipadDuoFront { from { opacity: 0; transform: translateY(82px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ipadDuoBack  { from { opacity: 0; transform: translateY(150px) scale(.93); } to { opacity: 1; transform: translateY(9%); } }

/* iPad lightbox (efecto lupa) */
.ipad-v img, .ipad-hero-h img { cursor: zoom-in; }
.ipad-lb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: clamp(18px, 4vw, 56px); overflow: auto; overscroll-behavior: contain; background: rgba(0,0,0,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .28s var(--gi-ease-out); }
.ipad-lb.open { display: flex; opacity: 1; }
.ipad-lb img { width: max(1500px, 96vw); max-width: 2000px; height: auto; margin: auto; transform: scale(.96); transition: transform .32s var(--gi-ease-out); cursor: zoom-out; }
.ipad-lb.open img { transform: scale(1); }
.ipad-lb-close { position: fixed; top: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); z-index: 2; width: 46px; height: 46px; border-radius: 9999px; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s var(--gi-ease-out); }
.ipad-lb-close:hover { background: rgba(255,255,255,0.26); }

/* radar dots: calm looping "live signal" pulse */
.rdot { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .rdot {
    animation: rdot-pulse 3.2s var(--gi-ease-in-out) infinite both;
    filter: drop-shadow(0 0 0 rgba(248,177,51,0));
  }
}
@keyframes rdot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 1px rgba(248,177,51,0.2)); }
  50%      { transform: scale(1.85); opacity: 1; filter: drop-shadow(0 0 5px rgba(248,177,51,0.65)); }
}
/* radar highlight when a domain is selected */
.rdot.hot { animation: none; transform: scale(2.6); fill: #fff; filter: drop-shadow(0 0 6px rgba(248,177,51,0.95)); }
.axis-labels text { transition: fill var(--gi-dur-fast) var(--gi-ease-out); }
.axis-labels text.hot { fill: var(--gi-yellow); }

/* utility */
.center { text-align: center; }
.mt-l { margin-top: clamp(36px, 4.5vw, 64px); }
.note-fine { font-family: var(--gi-font-body); font-size: var(--gi-text-xs); color: var(--gi-fg-soft); line-height: var(--gi-leading-base); max-width: 80ch; margin-top: var(--gi-space-6); }
section[data-tone="dark"] .note-fine { color: rgba(255,255,255,0.45); }

/* ---------- Ajustes mobile (v4 · AGO26) ---------- */
@media (max-width: 860px) {
  .vision-figure, .desescale-figure, .metodo-figure, .ciclo-figure { margin-top: clamp(6px,1.4vw,14px); margin-bottom: clamp(20px,3.4vw,32px); max-width: 100%; }
  .ipad-showcase { margin-top: clamp(12px,2vw,20px); }
  .ipad-hero-h { max-width: 100%; }
  .ipad-cap { font-size: var(--gi-text-xs); max-width: 40ch; }
}
@media (max-width: 620px) {
  .hero-figure { margin-top: clamp(20px,5vw,30px); }
  .hero-figure img { width: 100%; max-width: none; margin-left: 0; }
  .vision-figure, .desescale-figure, .metodo-figure, .ciclo-figure { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-left: calc(-1 * var(--gutter)); }
  .ipad-lb { padding: 10px; }
  .ipad-lb img { width: 1180px; max-width: none; }
  .ipad-lb-close { width: 44px; height: 44px; top: 10px; right: 10px; background: rgba(255,255,255,0.22); }
}
@media (max-width: 400px) { .ipad-lb img { width: 980px; } }