/* ============================================================
   Web storytelling tesis UCA · v29 ajustada
   Hoja consolidada: une la base + parches v24/v25 en un solo
   sistema de diseño, sin !important ni reglas en conflicto.
   Identidad: dark institucional + dorado UCA.
   ============================================================ */

/* ---------- 1. Tokens de diseño ---------- */
:root{
  /* Color */
  --bg:#050F40;
  --deep:#0A031E;
  --night:#02040D;
  --green:#0F8B24;
  --orange:#E36414;
  --teal:#0F4C5C;
  --gold:#D9A441;
  --gold-soft:#F3D48A;
  --gold-deep:#8A5A13;
  --ink:#F6F8FF;
  --muted:#C7D1E6;            /* +contraste vs. v25 (#B9C4DA) */
  --label:#E4EAF7;
  --line:rgba(255,255,255,.10);
  --line-gold:rgba(217,164,65,.28);
  --card:rgba(10,16,43,.72);
  --card-strong:rgba(7,12,35,.88);

  /* Sombras y formas */
  --shadow:0 22px 56px rgba(0,0,0,.30);
  --shadow-gold:0 14px 34px rgba(0,0,0,.22), 0 0 24px rgba(217,164,65,.10);
  --radius:26px;
  --radius-sm:16px;

  /* Layout */
  --max:1180px;
  --header-h:66px;

  /* Tipografía */
  --font-display:"Palatino Linotype", Palatino, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-xl:clamp(3rem, 8vw, 6.4rem);
  --display-lg:clamp(2rem, 4.4vw, 3.7rem);
  --display-md:clamp(1.3rem, 2.5vw, 2.05rem);

  /* Texto degradado dorado (firma visual del sitio) */
  --gold-text:linear-gradient(100deg, #fff 0%, var(--gold-soft) 46%, var(--gold) 72%, #fff 100%);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px); /* los anclajes ya no quedan ocultos bajo el header fijo */
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(circle at calc(12% + var(--bg-pan-x,0px)) calc(14% + var(--bg-pan-y,0px)), rgba(217,164,65,.24), transparent 30rem),
    radial-gradient(circle at calc(88% - var(--bg-pan-x,0px)) calc(18% + var(--bg-pan-y,0px)), rgba(15,76,92,.42), transparent 34rem),
    radial-gradient(circle at calc(18% + var(--scroll-shift-x,0px)) calc(84% - var(--scroll-shift-y,0px)), rgba(15,139,36,.18), transparent 31rem),
    radial-gradient(circle at calc(76% - var(--scroll-shift-x,0px)) calc(78% - var(--bg-pan-y,0px)), rgba(227,100,20,.18), transparent 29rem),
    linear-gradient(145deg, var(--night) 0%, var(--bg) 36%, var(--deep) 67%, #030411 100%);
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1; opacity:.7;
  background:
    linear-gradient(115deg, rgba(217,164,65,.07), transparent 22%, transparent 70%, rgba(15,76,92,.10)),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.22) 82%);
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
p{margin:0; color:var(--muted); line-height:1.6}
h1,h2,h3{margin:0; line-height:1.08; letter-spacing:-.01em; font-family:var(--font-display)}
strong{color:var(--ink)}

/* Detalles de pulido: selección de texto y barra de scroll a juego */
::selection{background:rgba(217,164,65,.85); color:#0A031E}
html{scrollbar-color:rgba(217,164,65,.55) rgba(5,10,32,.9); scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:rgba(5,10,32,.9)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius:999px; border:2px solid rgba(5,10,32,.9);
}

/* Accesibilidad: foco visible y enlace para saltar al contenido */
:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:2000;
  padding:10px 16px; border-radius:12px;
  background:var(--gold); color:#0A031E; font-weight:800; font-size:.85rem;
  transition:top .2s ease;
}
.skip-link:focus{top:14px}

/* ---------- 3. Barra de progreso y fondo animado ---------- */
.progress{position:fixed; top:0; left:0; width:100%; height:3px; z-index:1200; background:transparent}
.progress span{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg, var(--gold), var(--orange), var(--teal));
  box-shadow:0 0 18px rgba(217,164,65,.45);
}
.bg-stage{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.grid-layer{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:92px 92px; opacity:.12;
}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.26}
.orb-a{width:340px; height:340px; left:-100px; top:8%;  background:rgba(217,164,65,.40)}
.orb-b{width:400px; height:400px; right:-130px; top:20%; background:rgba(15,76,92,.42)}
.orb-c{width:320px; height:320px; left:42%; bottom:-8%;  background:rgba(15,139,36,.26)}

/* ---------- 4. Header institucional (cuadrado, fijo) ---------- */
.site-header{
  position:fixed; top:0; left:0; z-index:1000;
  width:100%; min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(18px, 4vw, 54px);
  background:linear-gradient(180deg, rgba(5,10,32,.94), rgba(5,10,32,.82));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-gold);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:760; font-size:.9rem; white-space:nowrap}
.brand img{width:36px; height:auto}
.nav{display:flex; align-items:center; gap:6px}
.nav a{
  padding:8px 11px; border-radius:999px;
  color:var(--muted); font-size:.78rem; font-weight:760;
  transition:color .22s ease, background .22s ease;
}
.nav a:hover,
.nav a.is-active{color:var(--gold-soft); background:rgba(217,164,65,.12)}

/* Botón hamburguesa (solo móvil) */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  background:rgba(217,164,65,.10);
  border:1px solid var(--line-gold); border-radius:12px;
  cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--gold-soft); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. Secciones (composición centrada) ---------- */
.section{
  width:min(calc(100% - 34px), var(--max));
  margin:0 auto; position:relative;
  min-height:76vh; padding:108px 0;
  display:grid; align-items:center; justify-items:center;
  gap:30px; text-align:center;
  --bg-offset:0px;
}
.section::before{
  content:""; position:absolute; left:50%; top:-6%;
  width:100vw; height:112%;
  transform:translate3d(-50%, calc(var(--bg-offset) * .55), 0);
  background:var(--section-gradient, none);
  z-index:-1; pointer-events:none;
}
.section-index{
  width:58px; height:58px; border-radius:18px;
  display:grid; place-items:center;
  font-size:.96rem; font-weight:850;
  color:var(--gold-soft);
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:14px; justify-content:center;
  margin-bottom:14px;
  color:var(--gold-soft);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:.76rem; font-weight:850;
  font-family:var(--font-body);
}
/* Filetes dorados a los lados del eyebrow: detalle editorial */
.eyebrow::before,
.eyebrow::after{
  content:""; width:34px; height:1px; flex:none;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.65));
}
.eyebrow::after{background:linear-gradient(90deg, rgba(217,164,65,.65), transparent)}
.section-copy,
.timeline-heading{max-width:850px; margin:0 auto}
.section-copy h2,
.timeline-heading h2{font-size:var(--display-lg); max-width:18ch; margin:0 auto}
.section-copy p:not(.eyebrow),
.timeline-heading p:not(.eyebrow){margin:14px auto 0; max-width:58ch}
.section-subtitle{
  margin-top:14px;
  font-size:clamp(1.05rem, 1.8vw, 1.42rem);
  line-height:1.45;
  color:var(--label);
  font-weight:520;
  letter-spacing:.01em;
}
.section-copy h2 + .section-subtitle,
.timeline-heading h2 + .section-subtitle{
  position:relative;
  padding-top:18px;
}
.section-copy h2 + .section-subtitle::before,
.timeline-heading h2 + .section-subtitle::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(118px, 34vw); height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.70), transparent);
}

/* Firma visual: títulos con degradado dorado */
.section-copy h2,
.timeline-heading h2,
.research-title-card h1,
.hero-panel h2,
.closing-card h2,
.info-card h3,
.pillar-card h3,
.timeline-card h3,
.feature-card h3,
.strategy-card h3,
.duo-card strong{
  background:var(--gold-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(217,164,65,.10);
}

/* ---------- 5.1. Bloque inicial: nombre de la investigación ---------- */
.research-title-section{
  width:100%; max-width:none;
  min-height:100svh;
  padding:150px 20px 92px;
  align-content:center;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(217,164,65,.22), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(15,76,92,.36), transparent 36%),
    radial-gradient(circle at 50% 86%, rgba(15,139,36,.13), transparent 30%),
    linear-gradient(145deg, rgba(2,4,13,.98), rgba(5,15,64,.84) 48%, rgba(10,3,30,.97));
}
.research-title-section::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(115deg, transparent 0%, rgba(217,164,65,.08) 45%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.28) 78%);
}
.research-title-card{
  width:min(calc(100% - 8px), 940px);
  margin:0 auto;
  padding:clamp(28px, 5vw, 54px);
  border-radius:30px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.092), rgba(255,255,255,.03)),
    rgba(7,12,35,.74);
  border:1px solid rgba(217,164,65,.24);
  box-shadow:0 26px 78px rgba(0,0,0,.36), 0 0 0 1px rgba(217,164,65,.08);
}
.research-context{
  width:min(100%, 680px);
  margin:0 auto 20px;
  color:var(--label);
  font-size:clamp(.86rem, 1.2vw, 1rem);
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:760;
}
.research-title-card h1{
  max-width:46ch;
  margin:0 auto;
  font-size:clamp(1.48rem, 3vw, 2.65rem);
  line-height:1.18;
  letter-spacing:-.018em;
}
.research-title-card h1::after{
  content:""; display:block;
  width:min(164px, 42vw); height:1px;
  margin:24px auto 0;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.75), transparent);
}
.research-meta{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:24px auto 0;
}
.research-meta span{
  padding:9px 13px;
  border-radius:999px;
  color:var(--gold-soft);
  background:rgba(217,164,65,.10);
  border:1px solid rgba(217,164,65,.24);
  font-size:.74rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.13em;
}

/* ---------- 6. Hero ---------- */
.hero{
  width:100%; max-width:none;
  min-height:100svh;
  padding:150px 20px 90px;
  align-content:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 20%, rgba(217,164,65,.26), transparent 31%),
    radial-gradient(circle at 84% 24%, rgba(15,76,92,.40), transparent 36%),
    radial-gradient(circle at 50% 82%, rgba(15,139,36,.16), transparent 30%),
    linear-gradient(145deg, var(--night) 0%, var(--bg) 48%, var(--deep) 100%);
}
.hero-scene{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(circle at calc(20% + var(--scroll-shift-x,0px)) calc(24% + var(--scroll-shift-y,0px)), rgba(217,164,65,.20), transparent 30%),
    radial-gradient(circle at calc(82% - var(--scroll-shift-x,0px)) 28%, rgba(15,76,92,.32), transparent 36%),
    linear-gradient(145deg, rgba(3,6,21,.92), rgba(5,15,64,.70) 48%, rgba(10,3,30,.94));
}
.hero-scene::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(115deg, transparent 0%, rgba(217,164,65,.08) 44%, transparent 58%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.045), transparent 28%),
    linear-gradient(180deg, rgba(3,6,21,.12), rgba(3,6,21,.68) 74%);
}
.hero-scene-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 22%, transparent 78%, rgba(255,255,255,.03));
}
.hero-layout{
  position:relative; z-index:3;
  width:min(calc(100% - 8px), var(--max));
  margin:0 auto;
  display:grid; grid-template-columns:1fr;
  justify-items:center; gap:28px; text-align:center;
}
.hero-copy-solo{max-width:860px; display:grid; justify-items:center}
.hero-title{display:grid; gap:2px}
.title-line{
  font-size:clamp(3rem, 7vw, 5.8rem); font-weight:800;
  background:linear-gradient(100deg, #fff 0%, var(--gold-soft) 55%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title-year{
  font-size:clamp(3.2rem, 7.8vw, 6.5rem); font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(243,212,138,.88);
  text-shadow:0 0 34px rgba(217,164,65,.24);
}
.hero-intro{max-width:46ch; margin:22px auto 0; font-size:1.1rem; color:var(--label)}
.hero-panel{
  max-width:620px; padding:28px 30px; text-align:center;
  border-radius:30px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(13,20,52,.92), rgba(8,13,38,.88)) padding-box,
    linear-gradient(140deg, rgba(217,164,65,.5), rgba(255,255,255,.10) 45%, rgba(15,76,92,.45)) border-box;
  box-shadow:var(--shadow);
}
.hero-panel small{
  display:block; margin-bottom:12px;
  color:var(--gold-soft); text-transform:uppercase;
  letter-spacing:.15em; font-size:.78rem; font-weight:850;
}
.hero-panel h2{font-size:var(--display-md)}

/* Indicador de scroll: orienta al jurado en pantalla completa */
.scroll-cue{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:8px; padding:10px 16px;
  border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-soft);
  border:1px solid rgba(217,164,65,.22);
  background:rgba(217,164,65,.07);
  transition:background .25s ease, border-color .25s ease;
}
.scroll-cue:hover{background:rgba(217,164,65,.14); border-color:rgba(217,164,65,.4)}
.scroll-cue-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-soft);
  animation:cuePulse 1.8s ease-in-out infinite;
}
@keyframes cuePulse{
  0%,100%{transform:translateY(-2px); opacity:.55}
  50%{transform:translateY(3px); opacity:1}
}

/* Animación cinematográfica del hero al entrar en vista */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.05) 42%, rgba(217,164,65,.09) 50%, transparent 60%);
  transform:translateX(-18%) scale(1.05);
}
.hero.is-inview::after{animation:cinematicSweep 2.4s cubic-bezier(.2,.75,.2,1) .3s both}
.hero.is-inview .hero-title{animation:cinematicTitle 1.05s cubic-bezier(.2,.75,.2,1) both}
.hero.is-inview .title-year{animation:cinematicYear 1.1s cubic-bezier(.2,.75,.2,1) .14s both}
@keyframes cinematicSweep{0%{opacity:0; transform:translateX(-30%) scale(1.08)} 22%{opacity:.75} 100%{opacity:0; transform:translateX(32%) scale(1)}}
@keyframes cinematicTitle{0%{opacity:0; transform:translateY(26px) scale(.965); filter:blur(14px)} 100%{opacity:1; transform:none; filter:none}}
@keyframes cinematicYear{0%{opacity:0; transform:translateY(18px) scale(.88); filter:blur(10px)} 100%{opacity:1; transform:none; filter:none}}

/* ---------- 7. Tarjetas y grids ---------- */
.feature-card, .duo-card, .timeline-card, .info-card,
.pillar-card, .recommend-card, .strategy-card, .research-title-card, .closing-card{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 38%), var(--card);
  border:1px solid rgba(217,164,65,.13);
  box-shadow:var(--shadow);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* Filete dorado superior: detalle sutil que unifica todas las tarjetas */
.feature-card::before, .duo-card::before, .timeline-card::before,
.info-card::before, .pillar-card::before, .recommend-card::before,
.strategy-card::before, .research-title-card::before,
.closing-card::before{
  content:""; position:absolute; top:0; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.55), transparent);
}
.feature-grid, .duo, .findings-grid, .pillar-grid, .recommendations-grid, .strategy-grid{
  width:min(100%, 980px); margin:0 auto;
  display:grid; gap:18px;
}
.feature-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
.duo, .findings-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.pillar-grid, .recommendations-grid, .strategy-grid{grid-template-columns:repeat(3, minmax(0,1fr))}

.feature-card{padding:22px}
.feature-card span, .duo-card small, .recommend-card span{
  display:block; margin-bottom:10px;
  color:var(--label); font-size:.76rem;
  text-transform:uppercase; letter-spacing:.13em; font-weight:850;
}
.feature-stat{min-height:180px}
.feature-stat strong{
  font-size:3.9rem; line-height:1; font-family:var(--font-display);
  background:var(--gold-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.feature-stat small{margin-top:6px; color:var(--muted); letter-spacing:.06em}
.feature-card span.stat-badge{
  display:inline-flex; margin:12px 0 0; padding:5px 12px; border-radius:999px;
  font-size:.72rem; font-weight:850; letter-spacing:.1em;
  color:var(--gold-soft);
  background:rgba(217,164,65,.12);
  border:1px solid rgba(217,164,65,.30);
}
.feature-stat.accent{background:linear-gradient(160deg, rgba(15,76,92,.88), rgba(5,15,64,.78), rgba(217,164,65,.10))}
.feature-card h3{font-size:1.3rem; margin-bottom:10px}

.duo-card{padding:24px; min-height:200px}
.duo-card strong{display:block; font-size:1.25rem; line-height:1.2; margin:12px 0 10px}

.cards-grid{display:grid; gap:18px}
.info-card{padding:22px}
.info-card .card-head{display:flex; justify-content:center}
.info-card h3{font-size:1.24rem; margin:12px 0 8px}
.card-index{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:14px;
  color:var(--gold-soft); font-weight:850;
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
}
.info-card.featured{
  grid-column:1 / -1; min-height:190px;
  border:1px solid transparent;
  background:
    linear-gradient(135deg, rgba(15,76,92,.56), rgba(5,15,64,.92) 58%, rgba(217,164,65,.20)) padding-box,
    linear-gradient(120deg, rgba(217,164,65,.55), rgba(255,255,255,.12) 40%, rgba(15,76,92,.5), rgba(217,164,65,.45)) border-box;
}

.pillar-card{padding:24px}
.pillar-card span{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:14px; margin-bottom:14px;
  color:var(--gold-soft); font-weight:850;
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
}
.pillar-card h3{font-size:1.2rem; margin-bottom:8px}
.recommend-card{padding:20px; min-height:150px}
.strategy-grid{align-items:stretch}
.strategy-card{
  min-height:255px;
  padding:24px;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}
.strategy-card span{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:14px; margin-bottom:18px;
  color:var(--gold-soft); font-weight:850;
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
}
.strategy-card h3{font-size:1.18rem; margin-bottom:10px}
.strategy-card p{font-size:.94rem; line-height:1.58; color:var(--muted)}


/* ---------- 8. Gráfico del caso ---------- */
.analysis-graphic{
  position:relative; width:min(100%, 760px); margin:0 auto;
  min-height:410px; padding:30px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border:1px solid rgba(217,164,65,.13);
  box-shadow:var(--shadow);
}
.analysis-orbit{height:230px; display:grid; place-items:center; position:relative}
.orbit-ring{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.09)}
.ring-one{width:145px; height:145px}
.ring-two{width:220px; height:220px; border-color:rgba(15,76,92,.28)}
.ring-three{width:295px; height:295px; border-color:rgba(217,164,65,.22)}
/* Satélites dorados que orbitan lentamente: el gráfico cobra vida sin distraer */
.orbit-ring::before{
  content:""; position:absolute; top:-3px; left:50%; margin-left:-3px;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 12px rgba(217,164,65,.8);
}
.ring-one{animation:orbitSpin 22s linear infinite}
.ring-two{animation:orbitSpin 34s linear infinite reverse}
.ring-three{animation:orbitSpin 48s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.analysis-node{
  width:165px; height:165px; border-radius:50%;
  display:grid; place-items:center; text-align:center; padding:16px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(217,164,65,.35);
  box-shadow:0 0 0 6px rgba(217,164,65,.06), 0 18px 44px rgba(0,0,0,.35);
  position:relative; z-index:1;
}
.analysis-node small, .analysis-node em, .analysis-summary span{
  font-size:.72rem; color:var(--label);
  text-transform:uppercase; letter-spacing:.12em; font-weight:850;
}
.analysis-node b{font-size:1.3rem; font-family:var(--font-display)}
.analysis-node em{font-style:normal}
.analysis-summary{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:680px; margin:26px auto 0;
}
.analysis-summary span{
  padding:9px 12px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
}

/* ---------- 9. Línea de tiempo ---------- */
.timeline{
  position:relative; width:min(100%, 880px);
  margin:10px auto 0;
  display:grid; gap:18px;
}
.timeline-track{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.08); border-radius:999px;
}
.timeline-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--gold), var(--orange), var(--teal));
  border-radius:999px;
}
.timeline-item{
  display:grid; grid-template-columns:1fr;
  justify-items:center; gap:12px; padding-bottom:18px;
}
.timeline-year{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--gold-soft); font-weight:850;
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
  position:relative; z-index:1;
}
.timeline-card{width:min(100%, 640px); padding:20px}
.timeline-card h3{font-size:1.18rem; margin-bottom:8px}
.timeline-item.is-active .timeline-year{background:linear-gradient(160deg, var(--gold), var(--teal)); color:#fff; border-color:transparent}
.timeline-item.is-active .timeline-card{transform:translateY(-3px)}

/* ---------- 10. Conclusiones y cierre ---------- */
.conclusion-list{width:min(100%, 920px); margin:0 auto; display:grid; gap:14px}
.conclusion-list p{
  display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:center;
  padding:16px 18px; border-radius:20px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.conclusion-list strong{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:14px;
  color:var(--gold-soft);
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.34);
  box-shadow:var(--shadow-gold);
}
.closing-section{min-height:64vh}
.closing-card{
  max-width:900px; margin:0 auto; padding:42px 34px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
}
.footer-uca-mark{width:min(76px, 20vw); margin:0 auto 14px}
.site-footer-logo .footer-uca-mark{width:min(62px, 18vw)}
.closing-card h2{font-size:var(--display-lg); max-width:16ch; margin:0 auto 18px}
.closing-card p:not(.eyebrow){max-width:58ch; margin:0 auto}

.site-footer{
  position:relative;
  padding:42px 20px 50px; text-align:center;
  display:grid; gap:8px; justify-items:center;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(420px, 70%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.6), transparent);
}
.site-footer-title{font-weight:850}
.site-footer small{color:var(--muted); letter-spacing:.02em}

/* ---------- 11. Interacción y reveals ---------- */
.soft-hover{
  --mx:50%; --my:50%;
  position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.soft-hover::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.11), transparent 36%);
  opacity:0; transition:opacity .25s ease;
}
.soft-hover:hover{
  transform:translateY(-4px);
  border-color:rgba(217,164,65,.30);
  box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(217,164,65,.20);
}
.soft-hover:hover::after{opacity:1}

.reveal{
  opacity:0; transform:translateY(24px); filter:blur(8px);
  transition:opacity .78s ease, transform .78s ease, filter .78s ease;
}
.reveal.in-view{opacity:1; transform:none; filter:none}

/* ---------- 12. Fondos diferenciados por sección ---------- */
#contexto    {--section-gradient:radial-gradient(circle at 50% 20%, rgba(217,164,65,.15), transparent 30%), radial-gradient(circle at 82% 72%, rgba(15,76,92,.18), transparent 32%)}
#caso        {--section-gradient:radial-gradient(circle at 50% 22%, rgba(15,76,92,.24), transparent 34%), radial-gradient(circle at 22% 82%, rgba(217,164,65,.12), transparent 30%)}
#problema    {--section-gradient:radial-gradient(circle at 48% 18%, rgba(227,100,20,.13), transparent 30%), radial-gradient(circle at 82% 72%, rgba(15,76,92,.18), transparent 32%)}
#marco       {--section-gradient:radial-gradient(circle at 50% 20%, rgba(217,164,65,.12), transparent 30%), radial-gradient(circle at 18% 78%, rgba(15,139,36,.12), transparent 30%), radial-gradient(circle at 84% 76%, rgba(15,76,92,.14), transparent 32%)}
#hallazgos   {--section-gradient:radial-gradient(circle at 50% 20%, rgba(15,76,92,.22), transparent 32%), radial-gradient(circle at 82% 78%, rgba(217,164,65,.12), transparent 30%)}
#propuestas  {--section-gradient:radial-gradient(circle at 50% 22%, rgba(15,139,36,.15), transparent 30%), radial-gradient(circle at 82% 74%, rgba(217,164,65,.13), transparent 30%)}
#conclusiones{--section-gradient:radial-gradient(circle at 50% 20%, rgba(217,164,65,.15), transparent 30%), radial-gradient(circle at 20% 78%, rgba(15,76,92,.14), transparent 32%)}
#recomendaciones{--section-gradient:radial-gradient(circle at 50% 22%, rgba(217,164,65,.16), transparent 31%), radial-gradient(circle at 80% 72%, rgba(15,76,92,.18), transparent 32%), radial-gradient(circle at 18% 78%, rgba(15,139,36,.12), transparent 30%)}
#cierre      {--section-gradient:radial-gradient(circle at 50% 20%, rgba(217,164,65,.18), transparent 30%), radial-gradient(circle at 50% 78%, rgba(15,76,92,.22), transparent 34%)}

/* ---------- 13. Responsive ---------- */
@media (max-width:1260px){
  .nav{
    position:fixed; top:var(--header-h); right:0;
    width:min(320px, 86vw); max-height:calc(100svh - var(--header-h));
    overflow:auto;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:18px;
    background:linear-gradient(180deg, rgba(5,10,32,.98), rgba(5,10,32,.94));
    border-left:1px solid var(--line-gold);
    border-bottom:1px solid var(--line-gold);
    border-radius:0 0 0 22px;
    box-shadow:0 26px 60px rgba(0,0,0,.45);
    transform:translateX(105%);
    transition:transform .3s ease;
  }
  .nav.is-open{transform:none}
  .nav a{font-size:.92rem; padding:12px 14px; border-radius:14px}
  .nav-toggle{display:flex}

  .feature-grid, .duo, .findings-grid,
  .pillar-grid, .recommendations-grid, .strategy-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .timeline-track{left:20px; transform:none}
}

@media (max-width:720px){
  .site-header{padding:11px 18px}
  .brand span{display:none}
  .section{padding:86px 0; min-height:auto}
  .hero{padding-top:124px}
  .research-title-section{padding-top:124px}
  .research-title-card h1{max-width:100%}
  .title-line, .title-year{-webkit-text-stroke:0}
  .title-year{
    background:linear-gradient(100deg, #fff, var(--gold-soft), var(--gold));
    -webkit-background-clip:text; background-clip:text;
  }
  .feature-grid, .duo, .findings-grid,
  .pillar-grid, .recommendations-grid, .strategy-grid{grid-template-columns:1fr}
  .section-copy h2, .timeline-heading h2{max-width:100%}
  .timeline-track{display:none}
  .analysis-graphic{min-height:auto}
  .conclusion-list p{grid-template-columns:1fr; align-items:start}
  .conclusion-list strong{margin-bottom:4px}
}

/* ---------- 14. Movimiento reducido (accesibilidad) ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; filter:none; transition:none}
  .hero.is-inview::after,
  .hero.is-inview .hero-title,
  .hero.is-inview .title-year{animation:none}
  .scroll-cue-dot{animation:none}
  .ring-one, .ring-two, .ring-three{animation:none}
  .soft-hover, .soft-hover::after, .nav, .timeline-card{transition:none}
}


/* ============================================================
   PARCHES DE COMPATIBILIDAD SERVIDOR / VISUALIZACIÓN · v30
   - Rompe caché con style.v30.css
   - Evita secciones cortadas en navegadores con soporte irregular de svh
   - Corrige la visualización del bloque Recomendaciones como tarjetas
   - Deja visible el contenido aunque el JS falle o el navegador bloquee animaciones
   ============================================================ */
html, body{width:100%; max-width:100%; overflow-x:clip;}
main{overflow-x:clip;}
@supports not (overflow: clip){html, body, main{overflow-x:hidden;}}
@supports not (height:100svh){.research-title-section,.hero{min-height:100vh;}}

/* El contenido no queda oculto si el servidor bloquea JS o hay caché vieja. */
.reveal{opacity:1; transform:none; filter:none;}
.js .reveal{opacity:0; transform:translateY(24px); filter:blur(8px);}
.js .reveal.in-view{opacity:1; transform:none; filter:none;}

/* Título inicial más estable y premium */
.research-title-card{
  width:min(calc(100% - 24px), 1040px);
  padding:clamp(30px, 4.3vw, 56px);
}
.research-logo-lockup{
  display:grid; place-items:center;
  width:76px; height:76px;
  margin:0 auto 18px;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(217,164,65,.18), rgba(255,255,255,.045));
  border:1px solid rgba(217,164,65,.28);
  box-shadow:0 16px 42px rgba(0,0,0,.28), 0 0 0 1px rgba(217,164,65,.08);
}
.research-logo-lockup img{width:48px; height:auto;}
.iso-title{
  display:inline-block;
  margin-left:.12em;
  font-size:1.16em;
  line-height:.95;
  color:transparent;
  background:linear-gradient(100deg, #fff 0%, var(--gold-soft) 42%, var(--gold) 72%, #fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 30px rgba(217,164,65,.18);
}
.research-meta span:nth-child(2){
  font-size:.9rem;
  letter-spacing:.16em;
  padding:10px 16px;
  background:linear-gradient(160deg, rgba(217,164,65,.22), rgba(255,255,255,.06));
}

/* Header: evita que el menú largo se desborde en laptops o con zoom. */
.site-header{min-width:0;}
.nav{min-width:0;}
@media (min-width:1261px){
  .nav{flex-wrap:wrap; justify-content:flex-end; row-gap:4px;}
  .nav a{white-space:nowrap;}
}

/* Recomendaciones: forzadas como tarjetas visibles en servidor. */
.final-recommendations-section{
  width:min(calc(100% - 34px), 1240px);
  min-height:auto;
  padding:118px 0 96px;
  align-items:start;
}
.final-recommendations-section .section-index{margin-bottom:4px;}
.final-recommendations-section .section-copy{margin-bottom:4px;}
.final-recommendations-section .strategy-grid{
  width:min(100%, 1160px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  justify-items:stretch;
}
.final-recommendations-section .strategy-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  min-height:270px;
  padding:24px 22px 22px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 42%),
    linear-gradient(145deg, rgba(9,15,42,.88), rgba(5,10,32,.78));
  border:1px solid rgba(217,164,65,.20);
  box-shadow:0 20px 54px rgba(0,0,0,.30);
}
.final-recommendations-section .strategy-card span{
  flex:0 0 auto;
  margin:0 0 13px;
  width:42px; height:42px;
}
.final-recommendations-section .strategy-card h3{
  font-size:clamp(1.02rem, 1.35vw, 1.26rem);
  margin:0 0 10px;
  max-width:16ch;
}
.final-recommendations-section .strategy-card p{
  max-width:34ch;
  margin:0 auto;
  font-size:clamp(.8rem, .86vw, .92rem);
  line-height:1.48;
  color:var(--muted);
}
.final-recommendations-section .strategy-card:nth-child(4) p{max-width:38ch; font-size:clamp(.76rem, .8vw, .86rem); line-height:1.42;}

/* Si el navegador interpreta mal CSS Grid, las recomendaciones siguen siendo legibles como flex. */
@supports not (display:grid){
  .feature-grid,.duo,.findings-grid,.pillar-grid,.recommendations-grid,.strategy-grid{display:flex; flex-wrap:wrap;}
  .feature-card,.duo-card,.info-card,.pillar-card,.recommend-card,.strategy-card{flex:1 1 280px;}
}

@media (max-width:1260px){
  .final-recommendations-section .strategy-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .final-recommendations-section .strategy-card{min-height:245px;}
}
@media (max-width:720px){
  html, body{overflow-x:hidden;}
  .research-logo-lockup{width:64px; height:64px; border-radius:20px;}
  .research-logo-lockup img{width:40px;}
  .iso-title{display:inline; font-size:1.08em;}
  .final-recommendations-section{width:min(calc(100% - 28px), 1240px); padding:88px 0 72px;}
  .final-recommendations-section .strategy-grid{grid-template-columns:1fr;}
  .final-recommendations-section .strategy-card{min-height:auto; padding:22px 18px;}
  .final-recommendations-section .strategy-card h3{max-width:100%;}
  .final-recommendations-section .strategy-card p,
  .final-recommendations-section .strategy-card:nth-child(4) p{max-width:100%; font-size:.9rem; line-height:1.52;}
}

/* ---------- Ajuste solicitado v31: logo sin contenedor rectangular ---------- */
.research-title-card .eyebrow{display:none;}
.research-logo-lockup{
  width:76px;
  height:76px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible;
}
.research-logo-lockup img{
  width:76px;
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(217,164,65,.18));
}
.hero-panel small{display:none;}
.hero-panel h2{margin-top:0;}
@media (max-width:720px){
  .research-logo-lockup{width:64px; height:64px; margin-bottom:18px;}
  .research-logo-lockup img{width:64px;}
}


/* ---------- Ajuste solicitado v32: separación logo/texto y recomendaciones justificadas ---------- */
.research-logo-lockup{
  margin-bottom:clamp(30px, 3.4vw, 46px) !important;
}
.research-context{
  margin-top:0;
  margin-bottom:clamp(18px, 2.2vw, 26px);
}
.final-recommendations-section .strategy-card p{
  text-align:justify;
  text-align-last:center;
  hyphens:auto;
}
.final-recommendations-section .strategy-card:nth-child(4) p{
  max-width:34ch;
  font-size:clamp(.8rem, .86vw, .92rem);
  line-height:1.48;
}
@media (max-width:720px){
  .research-logo-lockup{margin-bottom:26px !important;}
  .final-recommendations-section .strategy-card p{text-align:left; text-align-last:auto; hyphens:none;}
}

/* ---------- Ajuste solicitado v33: recomendaciones justificadas con alineación izquierda ---------- */
.final-recommendations-section .strategy-card{
  align-items:flex-start !important;
  text-align:left !important;
}
.final-recommendations-section .strategy-card span{
  margin-left:0 !important;
  margin-right:0 !important;
}
.final-recommendations-section .strategy-card h3{
  max-width:100% !important;
  text-align:left !important;
}
.final-recommendations-section .strategy-card p,
.final-recommendations-section .strategy-card:nth-child(4) p{
  width:100%;
  max-width:100% !important;
  margin:0 !important;
  text-align:justify !important;
  text-align-last:left !important;
  hyphens:auto;
}
@media (max-width:720px){
  .final-recommendations-section .strategy-card p,
  .final-recommendations-section .strategy-card:nth-child(4) p{
    text-align:left !important;
    text-align-last:auto !important;
    hyphens:none;
  }
}


/* ---------- Ajuste solicitado v34: orden narrativo y numeración ----------
   Orden final: Inicio, Contexto, Problema, Marco teórico, Caso central, Hallazgos, Propuestas, Conclusiones, Recomendaciones, Cierre.
   Se agregan numeradores coherentes con la navegación visible.
   --------------------------------------------------------------- */
.timeline-section .section-index{margin-bottom:4px;}