/* ============================================================
   Centro Porsche Alicante — Dossier 2026-2031
   Identidad: negro/blanco · Porsche Next · rojo solo acento
   ============================================================ */

@font-face {
  font-family: "Porsche Next";
  src: url("assets/fonts/PorscheNext-Thin.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Porsche Next";
  src: url("assets/fonts/PorscheNext-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Porsche Next";
  src: url("assets/fonts/PorscheNext-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --black: #000000;
  --deep: #0a0a0b;
  --surface: #0f0f11;
  --white: #ffffff;
  --gray1: #dad9de;
  --gray2: #b5b4ba;
  --gray3: #737278;
  --gray4: #2a2a2e;
  --red: #d5001c;
  --maxw: 1340px;
  --pad: clamp(22px, 5vw, 90px);
  --font: "Porsche Next", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* Tipografia base segun guia */
.subline {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(11px, 1vw, 14px);
  color: var(--gray3);
  font-weight: 400;
}
h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.thin { font-weight: 300; }
.accent { color: var(--red); }

.red-bar {
  width: 86px; height: 5px; background: var(--red);
  margin: 26px 0; transform-origin: left; transform: scaleX(0);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.in .red-bar { transform: scaleX(1); }

/* ---------- Header ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--pad);
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
header.solid {
  background: rgba(8,8,9,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--gray4);
  padding-top: 18px; padding-bottom: 18px;
}
header .brand { display: flex; align-items: center; gap: 16px; }
header .brand img { height: 50px; width: auto; transition: height .4s ease; }
header.solid .brand img { height: 42px; }
header nav { display: flex; gap: 40px; }
header nav a {
  color: var(--gray1); text-decoration: none; font-size: 16px;
  letter-spacing: .04em; transition: color .25s ease; position: relative;
}
header nav a:hover { color: var(--white); }
header nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--red); transition: width .3s ease;
}
header nav a:hover::after { width: 100%; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0; background: url("assets/img/hero.jpg") center/cover no-repeat;
  transform: scale(1.08); animation: heroZoom 16s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.9) 100%);
}
.hero .bg::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); }
.hero .container { position: relative; z-index: 2; padding-bottom: clamp(60px, 11vh, 150px); }
.hero .subline {
  color: #fff; opacity: .92; letter-spacing: .26em; font-size: clamp(12px, 1.1vw, 15px);
}
.hero h1 {
  font-size: clamp(40px, 7vw, 104px); line-height: .98; margin: 22px 0 6px;
}
.hero .lead { font-size: clamp(18px, 2vw, 26px); color: var(--gray1); font-weight: 300; max-width: 720px; margin-top: 22px; }
.hero .subline, .hero h1, .hero .lead { text-shadow: 0 2px 36px rgba(0,0,0,.6); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  color: var(--gray2); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--gray2), transparent); animation: cue 1.8s infinite; }
@keyframes cue { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ---------- Sections ---------- */
section { position: relative; }
.block { padding: clamp(70px, 12vh, 160px) 0; }
.eyebrow { display: flex; align-items: center; gap: 14px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 64px); margin-top: 18px; }
.section-head p.intro {
  color: var(--gray2); font-weight: 300; font-size: clamp(17px, 1.5vw, 22px);
  max-width: 820px; margin-top: 22px;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* Stat band */
.statband { background: var(--deep); border-block: 1px solid var(--gray4); }
.statband .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 64px 80px;
}
.stat .num { font-size: clamp(40px, 4.6vw, 76px); font-weight: 700; line-height: 1; white-space: nowrap; }
.stat .num small { font-weight: 300; font-size: .55em; }
.stat .lab { margin-top: 12px; }
.flow { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.flow .arrow { color: var(--gray3); font-size: clamp(26px,3vw,44px); font-weight: 300; }

/* Objetivos hero stats */
.goals { background:
  linear-gradient(rgba(0,0,0,.74), rgba(0,0,0,.88)), url("assets/img/goalsbg.jpg") center/cover no-repeat; }
.goals .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 60px 40px; }
.goal .num { font-size: clamp(52px, 6.5vw, 110px); font-weight: 700; line-height: .95; }
.goal .lab { margin-top: 16px; color: var(--gray1); font-weight: 300; font-size: 19px; }

/* Pillars */
.pillars .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.pillar {
  background: var(--surface); border: 1px solid var(--gray4); padding: 40px 36px;
  position: relative; overflow: hidden; transition: border-color .4s ease, transform .4s ease;
  min-height: 300px; display: flex; flex-direction: column; border-radius: 24px;
}
.pillar:hover { border-color: var(--red); transform: translateY(-6px); }
.pillar .n { font-size: 22px; color: var(--gray3); font-weight: 300; }
.pillar h3 { font-size: 28px; margin: 16px 0 14px; }
.pillar p { color: var(--gray2); font-weight: 300; font-size: 16px; }
.pillar .tag { margin-top: auto; padding-top: 22px; }
.pillar::before {
  content:""; position:absolute; left:0; top:0; height:4px; width:0; background:var(--red); transition:width .5s ease;
}
.pillar:hover::before { width: 100%; }

/* Full-bleed quote */
.fullbleed {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  background-size: cover; background-position: center;
}
.fullbleed::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.35)); }
.fullbleed .container { position: relative; z-index: 2; }
.fullbleed blockquote { font-size: clamp(26px, 3.6vw, 56px); font-weight: 300; max-width: 1000px; line-height: 1.18; }
.fullbleed blockquote b { font-weight: 700; }

/* Two-column feature */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px,5vw,80px); align-items: center; }
.feature.rev { grid-template-columns: 1fr 1.05fr; }
.feature .media { border-radius: 28px; overflow: hidden; }
.feature .media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; }
.feature h3 { font-size: clamp(26px,3vw,44px); }
.feature ul { list-style: none; margin-top: 26px; display: grid; gap: 18px; }
.feature li { padding-left: 26px; position: relative; color: var(--gray1); font-weight: 300; }
.feature li::before { content:""; position:absolute; left:0; top:.6em; width:11px; height:2px; background:var(--red); }
.feature li b { color: #fff; font-weight: 700; }

/* Mini chart */
.chartcard { background: var(--deep); border:1px solid var(--gray4); padding: 46px clamp(26px,4vw,60px); border-radius: 28px; }
.panel { border-radius: 28px; }
.chartcard h3 { font-size: clamp(24px,2.6vw,38px); }
.bars { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(12px,2vw,30px); align-items: end; height: 320px; margin-top: 40px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 14px; }
.bar .fill { width: 100%; max-width: 90px; background: linear-gradient(180deg,var(--gray3),var(--gray4)); height: 0; transition: height 1.1s cubic-bezier(.16,1,.3,1); }
.bar.peak .fill { background: linear-gradient(180deg,#fff,#9b9b9f); }
.in .bar .fill { height: var(--h); }
.bar .v { font-weight: 700; font-size: clamp(16px,1.6vw,22px); }
.bar .y { color: var(--gray3); font-size: 13px; letter-spacing:.08em; }
.ratio-line { display:flex; align-items:baseline; gap:18px; margin-top: 10px; }
.ratio-line .big { font-size: clamp(50px,7vw,120px); font-weight:700; }

/* Animated line chart */
.linechart { width: 100%; }
.linechart svg { width: 100%; height: auto; display: block; overflow: visible; }
.lc-line {
  fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.16,1,.3,1);
}
.in .lc-line { stroke-dashoffset: 0; }
.lc-area { opacity: 0; transition: opacity 1.8s ease .4s; }
.in .lc-area { opacity: 1; }
.lc-grid { stroke: var(--gray4); stroke-width: 1; opacity: 0; transition: opacity 1s ease; }
.in .lc-grid { opacity: .55; }
.lc-dot { opacity: 0; transition: opacity .5s ease; }
.in .lc-dot { opacity: 1; }
.lc-pt { font-family: var(--font); fill: #fff; font-weight: 700; opacity: 0; transition: opacity .6s ease; }
.in .lc-pt { opacity: 1; }
.lc-yr { font-family: var(--font); fill: var(--gray3); font-weight: 400; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.gallery a { position: relative; overflow: hidden; display:block; border-radius: 20px; }
.gallery img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .8s ease; filter: grayscale(.15); }
.gallery a:hover img { transform: scale(1.06); filter: grayscale(0); }
.gallery .w2 { grid-column: span 2; }
.gallery .h2 { grid-row: span 2; }

/* Closing */
.closing { text-align: center; padding: clamp(100px,18vh,220px) 0; background: radial-gradient(120% 90% at 50% 0%, var(--deep), var(--black)); }
.closing .claim {
  font-size: clamp(23px, 2.5vw, 38px); font-weight: 300; line-height: 1.45;
  max-width: 880px; margin: 0 auto; color: var(--gray2); letter-spacing: .002em;
}
.closing .claim b { font-weight: 700; color: #fff; display: block; margin-top: .5em; }
.closing .hash {
  font-size: clamp(20px,2.2vw,34px); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-top: 64px; color: #fff;
}
.closing img.logo { height: 56px; margin: 56px auto 0; display:block; opacity: .95; }

footer { border-top: 1px solid var(--gray4); padding: 40px var(--pad); color: var(--gray3); font-size: 13px; display:flex; flex-wrap:wrap; gap: 18px; justify-content: space-between; }
footer a { color: var(--gray2); text-decoration: none; }

/* ---------- Componentes subpáginas (mismo sistema) ---------- */
header nav a.active { color: var(--white); }
header nav a.active::after { width: 100%; }

.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border:1px solid var(--gray3);
  border-radius:999px; color:var(--white); text-decoration:none; font-size:15px; letter-spacing:.04em;
  transition:border-color .3s ease, background .3s ease; }
.btn:hover { border-color:var(--red); }
.btn.solid { background:var(--red); border-color:var(--red); }
.crumb { display:flex; gap:10px; align-items:center; color:var(--gray3); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.crumb a { color:var(--gray2); text-decoration:none; }
.crumb a:hover { color:#fff; }

/* hero de subpágina (más corto) */
.hero.sub { min-height: 78vh; }

/* tarjeta-pilar como enlace */
a.pillar { text-decoration:none; color:inherit; }
a.pillar .go { margin-top:18px; color:var(--red); font-size:14px; letter-spacing:.1em; text-transform:uppercase; opacity:0; transition:opacity .3s; }
a.pillar:hover .go { opacity:1; }

/* puntos numerados */
.steps { display:grid; gap:20px; }
.step { display:flex; gap:22px; align-items:flex-start; }
.step .idx { flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-weight:700; }
.step h4 { font-size:20px; font-weight:700; }
.step p { color:var(--gray2); font-weight:300; margin-top:6px; }

/* tabla */
.ptable { width:100%; border-collapse:collapse; font-size:clamp(13px,1.3vw,17px); }
.ptable th { text-align:left; padding:14px 16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray3); border-bottom:1px solid var(--gray4); font-weight:700; }
.ptable td { padding:13px 16px; color:var(--gray1); font-weight:300; border-bottom:1px solid #1b1b1f; }
.ptable td.r, .ptable th.r { text-align:right; font-variant-numeric:tabular-nums; }
.ptable tr.hl td { color:var(--red); font-weight:700; }

/* barra apilada V.N./V.O. */
.stackbar { display:flex; height:64px; border-radius:8px; overflow:hidden; }
.stackbar .vn { background:#3a3a40; width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1); }
.stackbar .vo { background:var(--red); width:0; transition:width 1.1s cubic-bezier(.16,1,.3,1) .1s; }
.stackbar span { display:flex; align-items:center; padding:0 18px; font-size:15px; font-weight:700; color:#fff; white-space:nowrap; }

/* donut */
.donut { display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.donut svg { width:240px; height:240px; flex:none; }
.donut .ring-bg { fill:none; stroke:var(--gray4); }
.donut .ring-fg { fill:none; stroke:var(--red); stroke-linecap:butt; stroke-dasharray:0 999;
  transition:stroke-dasharray 1.6s cubic-bezier(.16,1,.3,1); transform:rotate(-90deg); transform-origin:center; }
.donut .center { font-size:48px; font-weight:700; }

/* prev / next pilares */
.pnav { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.pnav a { color:var(--gray2); text-decoration:none; font-size:18px; }
.pnav a:hover { color:#fff; }
.pnav .lab { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray3); margin-bottom:6px; }

/* cifras compuestas largas no se solapan (tamaño coherente con el resto) */
.stat .num.sm { font-size: clamp(34px, 3.6vw, 56px); }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Línea cronológica de hitos ---------- */
.timeline { position: relative; margin-top: 70px; }
.tl-spine { position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:60px;
  background:#0e0e10; border-radius:6px; overflow:hidden; }
.tl-spine::before, .tl-spine::after {
  content:""; position:absolute; top:0; bottom:0; width:8px;
  background:repeating-linear-gradient(180deg,#fff 0 22px,#d5001c 22px 44px);
}
.tl-spine::before { left:6px; }
.tl-spine::after  { right:6px; }
.tl-car { position:absolute; left:50%; transform:translateX(-50%); width:74px; top:0; z-index:4;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.7)); will-change:top; }
.tl-row { position:relative; display:grid; grid-template-columns:1fr 60px 1fr; align-items:center;
  padding:34px 0; min-height:150px; }
.tl-dot { grid-column:2; justify-self:center; width:18px; height:18px; border-radius:50%; background:var(--red);
  border:4px solid #000; z-index:2; box-shadow:0 0 0 4px rgba(213,0,28,.18); }
.tl-card { background:var(--surface); border:1px solid var(--gray4); border-radius:20px; padding:26px 30px; max-width:520px; }
.tl-card .yr { font-size:clamp(30px,3.2vw,48px); font-weight:700; line-height:1; }
.tl-card h4 { font-size:21px; font-weight:700; margin:10px 0 8px; }
.tl-card p { color:var(--gray2); font-weight:300; font-size:15px; line-height:1.45; }
.tl-row.left .tl-card { grid-column:1; justify-self:end; margin-right:46px; }
.tl-row.left .tl-card { text-align:right; }
.tl-row.right .tl-card { grid-column:3; margin-left:46px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tl-spine { left:30px; }
  .tl-car { left:30px; }
  .tl-row { grid-template-columns:60px 1fr; }
  .tl-dot { grid-column:1; }
  .tl-row.left .tl-card, .tl-row.right .tl-card { grid-column:2; justify-self:start; text-align:left; margin:0 0 0 20px; }
}
@media (max-width: 900px) {
  header nav { display: none; }
  header nav.open {
    display: flex; flex-direction: column; gap: 4px; position: fixed; inset: 64px 0 auto 0;
    background: rgba(8,8,9,.97); padding: 20px var(--pad) 30px; border-bottom: 1px solid var(--gray4);
  }
  header nav.open a { padding: 12px 0; font-size: 18px; }
  .menu-toggle { display: block; }
  .feature, .feature.rev { grid-template-columns: 1fr; }
  .feature .media { order: -1; }
  .goals { background-attachment: scroll; }
  .fullbleed { background-attachment: scroll; }
  .gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 180px; }
  .gallery .w2 { grid-column: span 2; }
}
@media (max-width: 760px) {
  .scroll-cue { display: none; }
  .hero .chips { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .btn { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14px; }
  .hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .hero .lead, .section-head p.intro { font-size: 17px; }
  .statband .grid, .goals .grid { gap: 40px 30px; }
  .stat .num { font-size: clamp(38px, 12vw, 58px); }
  .stat .num.sm { font-size: clamp(26px, 8vw, 38px); }
  .goal .num { font-size: clamp(44px, 15vw, 80px); }
  .row { flex-direction: column; }
  .donut { flex-direction: column; align-items: flex-start; gap: 24px; }
  .donut svg { width: 200px; height: 200px; }
  .bars { gap: 8px; }
  .bar .v { font-size: 13px; }
  .bar .y { font-size: 10px; }
  .ratio-line .big { font-size: clamp(44px, 16vw, 90px); }
  .flow .num { font-size: 30px !important; }
  .pnav { flex-direction: column; gap: 14px; }
  .pnav a[style] { text-align: left !important; }
  .tl-card { padding: 20px 22px; }
  .tl-card .yr { font-size: 34px; }
  .tl-card h4 { font-size: 18px; }
  .tl-card p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, .hero .bg { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ===== Mejoras subpaginas / Plan de accion ===== */
.d6{transition-delay:.48s}
.btn.lg{padding:18px 42px;font-size:17px;font-weight:600}

/* grid base (faltaba: causaba que cifras y leyendas se amontonaran) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:56px 70px}

/* hero de subpagina: titulo mas contenido y con margen superior */
.hero.sub{min-height:auto;align-items:flex-start}
.hero.sub .container{padding-top:clamp(150px,22vh,240px);padding-bottom:clamp(54px,9vh,100px)}
.hero.sub h1{font-size:clamp(34px,4.6vw,64px);margin-top:18px;line-height:1.04}
.hero.sub .lead{margin-top:26px}

/* separacion de los listados respecto a los parrafos */
.section-head + .steps,.section-head + .blist{margin-top:38px}
.steps{margin-top:34px}
.blist{margin-top:30px}
.blist li{margin-bottom:14px;line-height:1.5}
.step p{margin-top:8px}

/* mas aire entre cifra y leyenda */
.stat .lab{margin-top:18px;line-height:1.35}

/* video placeholder */
.videoph{margin-top:48px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#161616,#0a0a0a);border:1px solid var(--gray4);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.videoph .vp-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.videoph .vp-play{width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 50px rgba(213,0,28,.4)}
.videoph .vp-lab{color:var(--gray2);letter-spacing:.18em}

/* divisores de pilar en Plan de Accion: banda diferenciada y visible */
.pillar-band{background:linear-gradient(180deg,#141417 0%,#0a0a0c 100%);border-block:1px solid var(--gray4)}
.pillar-divider{padding:0;border:0}
.pillar-divider .pd-num{font-size:clamp(56px,6.5vw,110px);font-weight:700;color:var(--red);line-height:1}
.pillar-divider .pd-title{font-size:clamp(30px,4vw,56px);font-weight:700;margin-top:12px;line-height:1.04}
.pillar-divider .intro{margin-top:20px;max-width:820px}


/* ===== Legibilidad cuerpo de texto ===== */
.blist{font-size:clamp(17px,1.45vw,21px);color:var(--gray1);list-style:disc;padding-left:24px}
.blist li{line-height:1.6;margin-bottom:18px}
.blist li b{color:#fff}
.step p{font-size:clamp(16px,1.3vw,19px);line-height:1.55}
.step h4{font-size:clamp(19px,1.5vw,23px)}
.card p{font-size:clamp(16px,1.3vw,19px);color:var(--gray1);line-height:1.55}
.card .k{font-size:clamp(17px,1.4vw,20px)}
.section-head p.intro{font-size:clamp(18px,1.55vw,23px);color:var(--gray1);line-height:1.55}
.pillar p{font-size:17px;line-height:1.55}

/* ratio compacto (evita textos gigantes tipo "12 anos de crecimiento") */
.ratio-compact{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}
.ratio-compact .big{font-size:clamp(48px,6vw,96px);font-weight:700;line-height:1}
.ratio-compact .big.accent{color:var(--red)}
.ratio-compact .cap{font-size:clamp(15px,1.3vw,19px);color:var(--gray2);max-width:260px}


/* ===== Sin textos pequenos en toda la web ===== */
.subline{font-size:clamp(13px,1.05vw,16px)}
.lab{font-size:clamp(13px,1.05vw,16px)}
.pillar p{font-size:18px;line-height:1.55}
.pillar .n{font-size:clamp(15px,1.15vw,18px)}
a.pillar .go{font-size:15px}
.crumb{font-size:14px}
.bar .y{font-size:16px}
.bar .v{font-size:clamp(15px,1.3vw,18px)}
.ptable{font-size:clamp(15px,1.35vw,19px)}
.ptable th{font-size:14px}
.tl-card p{font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.tl-card h4{font-size:clamp(19px,1.5vw,22px)}
.tl-card .yr{font-size:clamp(15px,1.2vw,18px)}
.stackbar span{font-size:17px}
.pill{font-size:clamp(15px,1.2vw,18px)}
.pnav a{font-size:19px}
.hero .lead,.lead{font-size:clamp(19px,1.6vw,24px)}
@media(max-width:760px){.tl-card p{font-size:16px}.bar .v{font-size:15px}}


/* ===== Tamano de cuerpo global: nada pequeno ===== */
body{font-size:18px}
.intro{font-size:clamp(18px,1.55vw,23px);color:var(--gray1);line-height:1.6}
.quote{font-size:clamp(20px,1.9vw,28px);color:var(--gray1);line-height:1.45;font-weight:300}
.quote b{color:#fff;font-weight:700}
.quote.big{font-size:clamp(26px,2.9vw,42px)!important}
.feature .reveal p,.card p,.chartcard p{font-size:clamp(17px,1.4vw,20px)}

/* tarjetas home centradas */
.pillar.center{text-align:center;align-items:center}
.pillar.center .go{align-self:center}

.pillar.center{justify-content:center}
.pillar.center .go{margin-top:18px}


/* ===== Videos Google Drive embebidos ===== */
.videoframe{margin-top:48px;border-radius:16px;overflow:hidden;border:0;background:#000;aspect-ratio:16/9;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.videoframe iframe{width:100%;height:100%;border:0;display:block}
.videogrid{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:34px}
.videogrid .videoframe{margin-top:0}


/* ===== Movil: videos limpios y sin desbordes ===== */
html,body{max-width:100%;overflow-x:hidden}
img,iframe,video{max-width:100%}
.videoframe{width:100%}
.videoframe iframe{width:100%;height:100%}
@media(max-width:760px){
  .videoframe{margin-top:28px;border-radius:14px}
  .videogrid{grid-template-columns:1fr;gap:18px;margin-top:28px}
  .block{padding:clamp(54px,9vh,90px) 0}
  .section-head h2{font-size:clamp(28px,7vw,40px)}
}

.videoframe video{width:100%;height:100%;display:block;object-fit:cover;background:#000}


/* ===== Fix header/menu movil + paginas que empiezan con bloque ===== */
header + .block{padding-top:clamp(120px,16vh,190px)}
@media(max-width:900px){
  header{padding:14px var(--pad)}
  header .brand img{height:36px}
  header.solid .brand img{height:34px}
  header nav.open{inset:72px 0 auto 0}
}
@media(max-width:760px){
  header + .block{padding-top:104px}
}

.videoframe{max-width:960px;margin-left:auto;margin-right:auto}


/* ===== CTA de las tarjetas home con icono ===== */
.pillar.center .go{opacity:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font-size:15px}
.pillar.center .go .cta-ico{flex:none}
.pillar.center .go.soon{color:var(--gray3)}
a.pillar.center:hover .go{color:#fff}

footer .hashtag{color:var(--red);text-decoration:none;font-weight:700;letter-spacing:.04em}
footer .hashtag:hover{text-decoration:underline}


/* ===== CTA tarjetas: siempre visibles + iconos bien en movil ===== */
.pillar .go{opacity:1 !important}
.pillar.center .go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:15px;line-height:1}
.pillar .go .cta-ico{width:16px;height:16px;flex:none}
@media(max-width:760px){
  .pillar.center .go{font-size:14px;gap:7px}
  .pillar .go .cta-ico{width:15px;height:15px}
}

.pillar .go{text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.pillar .go.soon{color:var(--gray3)}


/* ===== Portada de la presentacion (Plan de Accion) ===== */
.cover{display:block;max-width:960px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55);border:1px solid var(--gray4);transition:transform .4s ease,border-color .4s ease}
.cover:hover{transform:translateY(-4px);border-color:var(--red)}
.cover img{width:100%;height:auto;display:block}

.hero.sub .lead{max-width:none}

.closing .claim b{display:inline;margin-top:0}