/* =========================================================
   Secciones con los textos nuevos (documento de José)
   ========================================================= */
.center { text-align: center; }
.narrow { max-width: 780px; margin-inline: auto; }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.6; color: var(--ink); }

/* Sobre mí */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.about-copy p { font-size: 1.04rem; }

/* Cortes con cita */
.quote-break {
  position: relative; overflow: hidden; min-height: 88vh; display: flex; align-items: center;
  padding: clamp(80px, 12vw, 160px) 0; text-align: center;
}
.quote-break > .container { position: relative; }
.quote-break--pink { background: radial-gradient(800px 500px at 20% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg, var(--pink), #B8076B); color: var(--white); }
.quote-break--pink .hl { color: var(--obsidian); }
.quote-break--dark {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(700px 460px at 80% 100%, rgba(228,11,124,.25), transparent 65%),
    var(--obsidian);
  color: var(--white);
}
.quote-break--data { background: linear-gradient(145deg, var(--lavender-50), var(--pink-50)); color: var(--ink); }
.big-quote {
  margin: 0 auto; max-width: 15ch; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.3rem, 7vw, 5.6rem); line-height: 1.04; letter-spacing: -.035em; text-transform: uppercase;
}
.big-quote--md { max-width: 20ch; font-size: clamp(2rem, 5.4vw, 4.4rem); }
.big-quote-cite { margin: 2.2rem 0 0; font-family: var(--font-alt); letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; opacity: .8; }
.big-quote-cite::before { content: "— "; }
.js .big-quote .w { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 70ms); }
.js .big-quote.is-visible .w { opacity: 1; transform: none; }
.data-rain span {
  position: absolute; left: var(--x); top: var(--y); font-family: var(--font-alt); font-weight: 500;
  font-size: clamp(.8rem, 1.4vw, 1.05rem); color: var(--lavender); opacity: .55;
  animation: float 7s ease-in-out infinite; font-variant-numeric: lining-nums;
}
.data-rain span:nth-child(3n) { color: var(--pink); animation-delay: -2s; }
.data-rain span:nth-child(3n+1) { animation-delay: -4s; }

/* Ideas */
.idea-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.idea-illus { border-radius: 24px; overflow: hidden; background: linear-gradient(145deg, var(--lavender-50), var(--pink-50)); aspect-ratio: 28 / 17; }
.idea-illus svg { width: 100%; height: 100%; display: block; }
.idea-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; }
.idea-note { font-family: var(--font-alt); font-style: italic; font-size: 1.15rem; color: var(--pink); }
.idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.idea-grid .focus-body h3 { font-size: 1.3rem; }
.idea-grid .focus-body p { font-size: .98rem; }
.closing-line {
  margin: clamp(56px, 8vw, 96px) auto 0; max-width: 22ch; text-align: center;
  font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
}
.tag-line { margin-top: 1.8rem; font-weight: 700; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tag-line span { color: var(--pink); }

/* Datos → Contexto → Decisiones */
.statement { text-align: center; font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: 1.4rem; color: var(--text); }
.statement strong { color: var(--pink); }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 6vw, 96px); margin-top: clamp(48px, 7vw, 80px); position: relative; }
.flow::before {
  content: ""; position: absolute; top: 56px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 8px, transparent 8px 16px);
  animation: dash 1.2s linear infinite;
}
@keyframes dash { to { background-position: 32px 0; } }
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.flow-step svg {
  width: 112px; height: 112px; padding: 22px; border-radius: 28px; background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.flow-step span { font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.flow-step--final svg { background: var(--pink); border-color: var(--pink); box-shadow: var(--shadow-pink); }
.flow-step--final span { color: var(--pink); }
.fs-dots circle { fill: var(--lavender); }
.fs-dots .hot { fill: var(--pink); }
.fs-net path { fill: none; stroke: var(--lavender); stroke-width: 1.5; }
.fs-ring { fill: none; stroke: var(--white); stroke-width: 3; opacity: .85; }
.fs-core { fill: var(--white); }

/* Libros */
.book { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.book--reverse { grid-template-columns: 1.25fr .75fr; }
.book--reverse .book-cover { order: 2; }
.book .book-cover { position: relative; justify-self: center; width: 100%; max-width: 320px; }
.book .book-cover::before {
  content: ""; position: absolute; inset: 12% -14% -8% -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,11,124,.28), transparent 70%); z-index: 0;
}
.book .book-cover img, .cover-placeholder {
  position: relative; z-index: 1; border-radius: 6px 14px 14px 6px;
  box-shadow: 0 30px 60px -20px rgba(20,23,58,.45); transform: rotate(-3deg); transition: transform .4s;
}
.book--reverse .book-cover img, .book--reverse .cover-placeholder { transform: rotate(3deg); }
.book .book-cover:hover img, .book .book-cover:hover .cover-placeholder { transform: rotate(0) scale(1.02); }
.cover-placeholder {
  aspect-ratio: 916 / 1359; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(160deg, var(--obsidian), var(--indigo)); color: var(--white); text-align: center; padding: 1.5rem;
}
.cover-q { font-size: 7rem; font-weight: 800; line-height: 1; color: var(--pink); }
.cover-t { font-weight: 600; font-size: 1.05rem; line-height: 1.3; opacity: .85; }
.book-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.02em; }
.book-question { font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.book-bridge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: clamp(80px, 12vw, 160px) 0; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 5vw, 4rem); line-height: 1.08; color: var(--ink);
}

/* En voz alta */
.countries { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; margin: clamp(32px, 5vw, 56px) 0; }
.countries li {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(2rem, 6.4vw, 5.2rem); color: var(--ink);
}
.countries li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--pink); }
.js .countries li { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 90ms); }
.js .countries.is-visible li { opacity: 1; transform: none; }
.marquee { background: var(--pink); color: var(--white); overflow: hidden; padding: 1.1rem 0; margin: clamp(40px, 6vw, 72px) 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track span { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.1rem, 2.2vw, 1.6rem); padding: 0 1.2em; white-space: nowrap; }
.marquee-track span::after { content: "·"; margin-left: 2.4em; opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }
.kicker-center { display: flex; justify-content: center; margin: clamp(48px, 7vw, 80px) 0 1.6rem; }
.events { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.event { padding: 1.5rem; border-top: 3px solid var(--pink); background: var(--soft); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.event h3 { font-size: 1rem; line-height: 1.35; }
.event p { font-size: .88rem; color: var(--muted); margin: 0; }

/* Reconocimientos */
.awards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.4rem; }
.award { padding: 2rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.award p { font-size: .93rem; margin-bottom: .6rem; }
.award-label { display: block; font-family: var(--font-alt); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: 1rem; font-variant-numeric: lining-nums; }
.award--featured { background: linear-gradient(150deg, var(--obsidian), var(--indigo)); border: 0; color: rgba(255,255,255,.8); }
.award--featured h3 { color: var(--white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.award .award-org { font-size: .8rem; color: var(--cyan); margin: 1rem 0 0; }
.award .acronyms { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; color: var(--ink); line-height: 1.1; margin-bottom: 1rem; }
.acronyms span { color: var(--pink); }
.triad { margin: clamp(40px, 6vw, 64px) 0 0; text-align: center; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.9rem, 1.6vw, 1.1rem); color: var(--ink); }
.triad span { color: var(--pink); margin: 0 .5em; }

/* Notas al margen */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.note { position: relative; overflow: hidden; border-radius: 22px; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; transition: transform .25s, box-shadow .25s; }
.note:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.note-word {
  position: absolute; top: .6rem; left: 1.2rem; font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; pointer-events: none;
}
.note-body { position: relative; }
.note time { font-family: var(--font-alt); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.note h3 { font-size: 1.2rem; line-height: 1.3; margin: .5rem 0 .6rem; }
.note h3 a { color: inherit; }
.note p { font-size: .9rem; margin-bottom: 1rem; }
.note--pink { background: var(--pink); color: var(--white); }
.note--pink .note-word { color: rgba(255,255,255,.2); }
.note--pink h3, .note--pink .link-arrow, .note--pink .link-arrow:hover { color: var(--white); }
.note--lavender {
  background: radial-gradient(circle at 1px 1px, rgba(123,131,235,.3) 1px, transparent 1.5px) 0 0 / 16px 16px, linear-gradient(145deg, var(--lavender-50), var(--pink-50));
  color: var(--text);
}
.note--lavender .note-word { color: transparent; -webkit-text-stroke: 1.5px var(--lavender); opacity: .7; }
.note--lavender h3 { color: var(--ink); }
.note--lavender time { color: var(--pink); }
.note--dark { background: linear-gradient(160deg, var(--obsidian), var(--indigo)); color: rgba(255,255,255,.8); }
.note--dark .note-word { color: rgba(0,240,255,.14); }
.note--dark h3 { color: var(--white); }
.note--dark time, .note--dark .link-arrow { color: var(--cyan); }

/* Cierre */
.closing { min-height: 92vh; display: flex; align-items: center; padding: clamp(96px, 14vw, 180px) 0; background: radial-gradient(900px 520px at 90% 100%, rgba(228,11,124,.10), transparent 60%), var(--white); }
.closing-title { font-weight: 800; font-size: clamp(3rem, 10vw, 8.5rem); line-height: .98; letter-spacing: -.045em; text-transform: uppercase; max-width: 12ch; margin-bottom: .35em; }
.closing-sub { font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--pink); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 1.2rem; }
.closing-text { max-width: 36em; font-size: 1.1rem; color: var(--muted); }
.closing-cta {
  display: inline-flex; align-items: center; gap: .4em; margin-top: 1.6rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(2.2rem, 6vw, 4.6rem);
  color: var(--ink); border-bottom: 6px solid var(--pink); line-height: 1.1;
}
.closing-cta span { color: var(--pink); transition: transform .25s; }
.closing-cta:hover { color: var(--pink); }
.closing-cta:hover span { transform: translateX(10px); }
.closing-social { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: clamp(48px, 7vw, 72px); }
.closing-social a { font-weight: 600; color: var(--ink); font-size: 1rem; }
.closing-social a:hover { color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .data-rain span, .flow::before { animation: none; }
  .js .big-quote .w, .js .countries li { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .about-grid, .idea-row { grid-template-columns: 1fr; }
  .events { grid-template-columns: 1fr 1fr; }
  .awards { grid-template-columns: 1fr 1fr; }
  .award--featured { grid-column: 1 / -1; }
  .notes { grid-template-columns: 1fr 1fr; }
  .note:last-child { grid-column: 1 / -1; min-height: 280px; }
  .site-nav ul { gap: 1.2rem; }
  .site-nav ul a { font-size: .88rem; }
}
@media (max-width: 860px) {
  .book, .book--reverse { grid-template-columns: 1fr; }
  .book--reverse .book-cover { order: 0; }
  .book .book-cover { max-width: 260px; }
  .site-nav ul { gap: 0; }
}
@media (max-width: 640px) {
  .quote-break { min-height: 72vh; }
  .idea-grid, .events, .awards, .notes { grid-template-columns: 1fr; }
  .note:last-child { grid-column: auto; }
  .note { min-height: 300px; }
  .flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .flow::before { display: none; }
  .flow-step svg { width: 88px; height: 88px; padding: 16px; }
  .countries li { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .data-rain span:nth-child(n+7) { display: none; }
}

/* Cifras + formación dentro del hero: en línea, sin cajas */
.hero-panel { margin: 1.8rem 0 2.2rem; }
.hero-stats { display: flex; flex-wrap: nowrap; margin: 0; }
.hs { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.1rem; }
.hs:first-child { padding-left: 0; }
.hs + .hs { border-left: 1px solid var(--line); }
.hs-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: .55rem; }
.hs-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--pink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hs dt, .hs dd { order: 1; }
.hs .hs-icon { order: 0; }
.hs dt { font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hs dt em { font-style: normal; color: var(--pink); }
.hs dd { margin: .35rem 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); max-width: 8.5em; }
.hero-degrees { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: 1.3rem; }
.hero-degrees li { position: relative; font-size: .76rem; color: var(--text); white-space: nowrap; }
.hero-degrees li strong { color: var(--pink); font-weight: 700; margin-right: .2em; }
.hero-degrees li + li::before {
  content: ""; position: absolute; left: -.6rem; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--titanium); transform: translateY(-50%);
}
@media (max-width: 480px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 0; }
  .hs:nth-child(3) { border-left: 0; }
}

/* Animaciones de entrada de los iconos del hero */
.hs-icon svg { overflow: visible; }
.hs-icon svg * { transform-box: view-box; }
.js .ch-b1 { transform-origin: 4px 14px; animation: popIn .45s .3s cubic-bezier(.3,1.6,.5,1) both; }
.js .ch-line { stroke-dasharray: 6; animation: typeLine .5s .8s ease-out both; }
.js .ch-b2 { transform-origin: 20px 19px; animation: popIn .45s 1.3s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes typeLine { from { stroke-dashoffset: 6; } to { stroke-dashoffset: 0; } }

.js .rk { animation: launch 2.2s .4s ease-in-out both; }
.rk-flame { opacity: 0; }
.js .rk-flame { transform-origin: 12px 18.5px; animation: flame 2.2s .4s ease-in-out both; }
@keyframes launch {
  0% { transform: translateY(0); }
  8%, 16%, 24% { transform: translate(-.6px, 0); }
  12%, 20%, 28% { transform: translate(.6px, 0); }
  50% { transform: translateY(-30px); opacity: 0; }
  51% { transform: translateY(26px); opacity: 0; }
  80% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes flame {
  0%, 6% { opacity: 0; transform: scaleY(.3); }
  15%, 45% { opacity: 1; transform: scaleY(1.2); }
  30% { transform: scaleY(.8); }
  50%, 100% { opacity: 0; }
}

.bk-page, .bk-left, .bk-right { fill: var(--white); }
.bk-page { opacity: 0; }
.js .bk-left { transform-origin: 12px 12px; animation: bookOpen .7s .3s ease-out both; }
.js .bk-page { transform-origin: 12px 12px; animation: pageFlip .6s ease-in-out both; }
.js .bk-page.p1 { animation-delay: 1.05s; }
.js .bk-page.p2 { animation-delay: 1.4s; }
.js .bk-page.p3 { animation-delay: 1.75s; }
@keyframes bookOpen { from { transform: scaleX(-1); } to { transform: scaleX(1); } }
@keyframes pageFlip {
  0% { opacity: 1; transform: scaleX(1); }
  99% { opacity: 1; transform: scaleX(-1); }
  100% { opacity: 0; transform: scaleX(-1); }
}

.js .earth-land { animation: spin 3s .3s cubic-bezier(.45,0,.25,1) both; }
@keyframes spin { from { transform: translateX(0); } to { transform: translateX(-20px); } }

@media (prefers-reduced-motion: reduce) {
  .js .ch-b1, .js .ch-b2, .js .ch-line, .js .rk, .js .rk-flame, .js .bk-left, .js .bk-page, .js .earth-land { animation: none; }
}
@media (max-width: 640px) { .br-lg { display: none; } }
.hero .hero-name .h1-first { display: block; font-size: 1.35em; line-height: 1; }
.hero .hero-name .h1-last { display: block; letter-spacing: -.01em; margin-top: -.2em; }

/* Foto: contorno fino desplazado + resplandor suave */
.hero-grid { align-items: start; }
.hero-visual { margin-top: 2.6rem; }
.portrait { isolation: isolate; }
.portrait::before { display: none; }
.portrait img { box-shadow: 0 40px 70px -30px rgba(20,23,58,.55), 0 18px 36px -18px rgba(228,11,124,.28); }
.portrait::after {
  content: ""; position: absolute; inset: -18% -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(228,11,124,.16), rgba(123,131,235,.10) 55%, transparent 100%);
}
@media (max-width: 1024px) { .hero-visual { margin-top: 1rem; } }

/* Más aire en la columna del hero */
.hero-panel { margin: 2rem 0 2.8rem; }
.hero-degrees { margin-top: 1.5rem; }
.hero-degrees li { font-size: .72rem; }
.hero .hero-name { margin-bottom: .02em; }
.hero .hero-name .h1-last { line-height: 1.05; }
.hero-visual { margin-top: .6rem; }
@media (max-width: 1024px) { .hero-visual { margin-top: 1rem; } }
:root { --section-y: clamp(56px, 7vw, 96px); }
.hero { padding-bottom: clamp(32px, 4vw, 56px); }
#sobre-mi { padding-top: clamp(40px, 5vw, 64px); }

/* Sobre mí: formato centrado */
.about { max-width: 820px; }
.about-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.kicker-center-line { justify-content: center; }
.kicker-center-line::after { content: ""; width: 28px; height: 2px; background: currentColor; }
.about-copy { text-align: left; }
.about-copy p { font-size: 1.05rem; }
.about-quote { margin: clamp(40px, 6vw, 64px) auto 0; max-width: 640px; text-align: center; }
.about-quote-mark {
  display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: clamp(5rem, 9vw, 7rem); line-height: .7; color: var(--pink); margin-bottom: .1em;
}
.about-quote p {
  margin: 0; font-family: var(--font-alt); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--ink);
}
/* Sobre mí: espaciado más compacto */
.about-head { margin-bottom: 1.2rem; }
.about-head .kicker { margin-bottom: .5rem; }
.about-head h2 { margin-bottom: 0; }
.about-copy p { margin-bottom: .8em; }
.about-quote { margin-top: 1.6rem; }
.about-quote-mark { line-height: .55; margin-bottom: -.05em; font-size: clamp(4.5rem, 8vw, 6rem); }
.em-pink { color: var(--pink); font-weight: 700; }
.about-quote-mark { font-size: clamp(5.5rem, 10vw, 7.5rem); }
.about-quote-strong { font-weight: 700; }
:root { --section-y: clamp(28px, 3.5vw, 48px); }
.hero { padding-bottom: clamp(16px, 2vw, 28px); }
#sobre-mi { padding-top: clamp(20px, 2.5vw, 32px); }
.about-quote-strong { color: var(--pink); }
.about-quote-mark { line-height: .5; height: .42em; margin-bottom: 0; }
.about-quote-mark { height: .3em; }
/* Leer el cambio: texto + flujo a la derecha */
.change-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.change-grid .section-head { margin-bottom: 0; }
.flow--compact { margin-top: 0; gap: 1rem; }
.flow--compact::before { top: 40px; }
.flow--compact .flow-step svg { width: 80px; height: 80px; padding: 16px; border-radius: 22px; }
.flow--compact .flow-step span { font-size: clamp(.95rem, 1.4vw, 1.15rem); }
@media (max-width: 1024px) { .change-grid { grid-template-columns: 1fr; } }
/* Contexto: lupa que revela conexiones · Decisiones: dardo en el centro */
.fs-faint circle { opacity: .45; }
.fs-lens { fill: rgba(123,131,235,.08); stroke: var(--obsidian); stroke-width: 3; }
.fs-handle { stroke: var(--obsidian); stroke-width: 5; stroke-linecap: round; }
.fs-dart-shaft { stroke: var(--white); stroke-width: 3; stroke-linecap: round; }
.fs-dart-tip { fill: var(--white); }
.fs-dart-fletch { stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: .9; }
.js .fs-dart { opacity: 0; transform: translate(16px, -16px); }
.js .flow.is-visible .fs-dart { animation: dartIn .55s .9s cubic-bezier(.2,.8,.3,1.2) forwards; }
@keyframes dartIn {
  0% { opacity: 0; transform: translate(16px, -16px); }
  70% { opacity: 1; transform: translate(-1px, 1px); }
  85% { transform: translate(1px, -1px); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .js .fs-dart { opacity: 1; transform: none; animation: none; } }
/* Flujo con ilustraciones provistas */
.flow-img { display: block; width: 104px; height: auto; mix-blend-mode: multiply; }
.flow--compact::before { top: 50px; left: 20%; right: 20%; }
@media (max-width: 640px) { .flow-img { width: 96px; } }
.flow-img { mix-blend-mode: normal; border-radius: 20px; box-shadow: 0 16px 30px -14px rgba(20,23,58,.28); }
.flow-step--final .flow-img { box-shadow: 0 16px 30px -12px rgba(228,11,124,.5); }
.flow-step { z-index: 1; }
.flow--compact::before { top: 51px; z-index: 0; }
.kicker-bold { font-weight: 700; }
.h2-strong { font-weight: 800; }
/* Flujo más compacto */
.flow--compact { gap: .6rem; }
.flow--compact .flow-img { width: 84px; border-radius: 17px; }
.flow--compact .flow-step { gap: .8rem; }
.flow--compact .flow-step span { font-size: clamp(.8rem, 1.1vw, .95rem); }
.flow--compact::before { top: 41px; }
.change-grid .kicker { margin-bottom: .4rem; }
.change-grid h2 { margin-bottom: .3em; line-height: 1.05; }
/* Cortes de cita más compactos */
.quote-break { min-height: 0; padding: clamp(64px, 8vw, 110px) 0; }
@media (max-width: 640px) { .quote-break { min-height: 0; padding: 56px 0; } }
/* IA: evolución en tres etapas */
.ai-title { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; margin: 0 auto clamp(32px, 5vw, 56px); }
.ai-title .hl { font-weight: 800; }
.eras { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.eras::before {
  content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--line), var(--pink-100) 45%, var(--pink));
}
.era { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .6rem; }
.era-icon {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--line); box-shadow: 0 10px 24px -14px rgba(20,23,58,.3); margin-bottom: 1rem;
}
.era-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--royal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.era-label { font-family: var(--font-alt); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--titanium); margin-bottom: .3rem; }
.era h4 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 .35rem; }
.era p { font-size: .95rem; color: var(--muted); margin: 0; max-width: 17em; }
.era p strong { color: var(--ink); font-weight: 600; }
.era--now .era-icon { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 0 8px var(--pink-50), var(--shadow-pink); }
.era--now .era-icon svg { stroke: var(--white); }
.era--now .era-label { color: var(--pink); }
.era--now h4 { color: var(--pink); }
.era--now p strong { color: var(--pink); font-weight: 700; }
.ai-note { text-align: center; margin: clamp(32px, 5vw, 52px) auto 0; font-family: var(--font-alt); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--text); }
.ai-note strong { color: var(--pink); font-weight: 700; }
@media (max-width: 760px) {
  .eras { grid-template-columns: 1fr; gap: 1.8rem; }
  .eras::before { top: 34px; bottom: 34px; left: 50%; right: auto; width: 2px; height: auto; background: linear-gradient(var(--line), var(--pink)); }
  .era { background: var(--white); padding: 0 0 .4rem; }
}
.ai-title { max-width: none; }
.eras::before { left: calc(100% / 6); right: calc(100% / 6); }
.era-img { display: block; width: 104px; height: 104px; margin-bottom: .4rem; mix-blend-mode: multiply; }
.eras::before { top: 52px; }
.era-img { mix-blend-mode: normal; }
.era p { max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .era p { white-space: normal; } }
.ai-quote { margin-top: clamp(36px, 5vw, 56px); }
.ai-quote { max-width: 760px; }
/* Línea de las etapas: se dibuja al aparecer y la recorre un pulso luminoso */
.eras::before { transform-origin: left center; }
.js .eras::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65,0,.35,1) .3s; }
.js .eras.is-visible::before { transform: scaleX(1); }
.eras::after {
  content: ""; position: absolute; z-index: 0; top: 49px; left: calc(100% / 6);
  width: 90px; height: 8px; border-radius: 999px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(228,11,124,.35) 40%, var(--pink) 85%, #fff 100%);
  filter: drop-shadow(0 0 6px rgba(228,11,124,.8));
}
.eras.is-visible::after { animation: eraPulse 3.2s cubic-bezier(.45,0,.55,1) 1.8s infinite; }
@keyframes eraPulse {
  0% { opacity: 0; left: calc(100% / 6 - 45px); }
  6% { opacity: 1; }
  32% { left: calc(50% - 70px); }
  58% { opacity: 1; }
  64% { opacity: 0; left: calc(100% * 5 / 6 - 60px); }
  100% { opacity: 0; left: calc(100% * 5 / 6 - 60px); }
}
.eras::after { height: 3px; top: 51.5px; filter: drop-shadow(0 0 3px rgba(228,11,124,.7)); animation-timing-function: linear !important; }
@media (max-width: 760px) { .eras::after { display: none; } .js .eras::before { transform: none; } }
@media (prefers-reduced-motion: reduce) { .eras::after { display: none; } .js .eras::before { transform: none; transition: none; } }
/* Sección IA con el formato de "Leer el cambio": texto a la izquierda, etapas a la derecha */
.ai-grid { align-items: center; }
.ai-grid .ai-quote { text-align: left; margin: 1.4rem 0 0; max-width: none; }
.ai-grid .ai-quote p { font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.ai-grid .about-quote-mark { font-size: clamp(4rem, 6vw, 5rem); }

.eras--v { grid-template-columns: 1fr; gap: 1.3rem; max-width: 460px; justify-self: center; }
.eras--v .era { display: grid; grid-template-columns: 76px 1fr; column-gap: 1.1rem; align-items: center; text-align: left; padding: 0; }
.eras--v .era-img { grid-row: 1 / 4; width: 76px; height: 76px; margin: 0; }
.eras--v .era-label { margin: 0; font-size: .66rem; }
.eras--v .era h4 { font-size: 1.05rem; margin: .1rem 0 .15rem; }
.eras--v .era p { font-size: .85rem; line-height: 1.45; }
.eras--v::before {
  top: 38px; bottom: 38px; left: 37px; right: auto; width: 2px; height: auto;
  background: linear-gradient(180deg, var(--line), var(--pink-100) 45%, var(--pink));
  transform-origin: top center;
}
.js .eras--v::before { transform: scaleY(0); }
.js .eras--v.is-visible::before { transform: scaleY(1); }
.eras--v::after {
  left: 37.5px; top: 38px; width: 3px; height: 56px;
  background: linear-gradient(180deg, transparent, rgba(228,11,124,.35) 40%, var(--pink) 85%, #fff 100%);
}
.eras--v.is-visible::after { animation-name: eraPulseV; }
@keyframes eraPulseV {
  0% { opacity: 0; top: 10px; }
  6% { opacity: 1; }
  32% { top: calc(50% - 50px); }
  58% { opacity: 1; }
  64% { opacity: 0; top: calc(100% - 94px); }
  100% { opacity: 0; top: calc(100% - 94px); }
}
@media (max-width: 760px) {
  .eras--v::after { display: block; }
  .eras--v .era { background: none; }
  .eras--v .era p { white-space: normal; }
}
.ai-grid h2 { font-size: clamp(1.8rem, 3.2vw, 2.45rem); }
.ai-grid { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 1024px) { .ai-grid { grid-template-columns: 1fr; } }
/* IA: etapas horizontales a la izquierda, título a la derecha, cita centrada abajo */
.ai-grid2 { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.ai-grid2 .section-head { margin-bottom: 0; }
.ai-grid2 h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0; line-height: 1.08; }
.ai-grid2 .kicker { margin-bottom: .4rem; }
.eras--compact { gap: .6rem; }
.eras--compact .era-img { width: 84px; height: 84px; margin-bottom: .3rem; }
.eras--compact::before { top: 42px; }
.eras--compact::after { top: 40.5px; }
.eras--compact .era h4 { font-size: 1rem; }
.eras--compact .era-label { font-size: .64rem; }
.eras--compact .era p { font-size: .76rem; line-height: 1.45; }
.ai-shift .ai-quote { text-align: center; margin: clamp(40px, 5vw, 60px) auto 0; max-width: 760px; }
.ai-shift .ai-quote p { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.ai-shift .about-quote-mark { font-size: clamp(5.5rem, 10vw, 7.5rem); }
@media (max-width: 1024px) {
  .ai-grid2 { grid-template-columns: 1fr; }
  .ai-grid2 .section-head { order: -1; }
}
.ai-grid2 { grid-template-columns: 1.15fr .85fr; }
.ai-grid2 h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); }
@media (max-width: 1024px) { .ai-grid2 { grid-template-columns: 1fr; } }
.eras--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.eras--compact .era h4 { font-size: 1.08rem; }
.eras--compact .era-label { font-size: .7rem; }
.eras--compact .era p { font-size: .84rem; }
.ai-grid2 { grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 4vw, 48px); }
.ai-grid2 h2 { font-size: clamp(1.6rem, 2.5vw, 2.05rem); }
@media (max-width: 1024px) { .ai-grid2 { grid-template-columns: 1fr; } }
.ai-shift .ai-quote { margin-top: 1.4rem; }
.ai-shift .ai-quote { margin-top: 2.2rem; }
/* Red de nodos del hero: los puntos grandes se encienden en secuencia */
.hero-network { opacity: .75; }
.net-nodes .lit { transform-box: fill-box; transform-origin: center; animation: nodeLit 4.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes nodeLit {
  0%, 60%, 100% { fill: var(--titanium); transform: scale(1); filter: none; }
  15%, 35% { fill: var(--c); transform: scale(1.5); filter: drop-shadow(0 0 6px var(--c)); }
}
@media (prefers-reduced-motion: reduce) { .net-nodes .lit { animation: none; } }
/* Orden de aparición del hero: foto → red que se construye → nodos que se encienden */
.js .portrait { animation: photoIn 1s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes photoIn { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }

.js .net-lines line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: netLine .5s ease-out forwards; animation-delay: calc(1.1s + var(--i) * .1s); }
@keyframes netLine { to { stroke-dashoffset: 0; } }

.js .net-nodes circle { transform-box: fill-box; transform-origin: center; animation: nodeIn .4s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(1.05s + var(--n) * .11s); }
@keyframes nodeIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.js .net-nodes .lit {
  animation: nodeIn .4s cubic-bezier(.3,1.6,.5,1) both, nodeLit 4.5s ease-in-out infinite;
  animation-delay: calc(1.05s + var(--n) * .11s), calc(2.9s + var(--d));
}
@media (prefers-reduced-motion: reduce) {
  .js .portrait, .js .net-lines line, .js .net-nodes circle, .js .net-nodes .lit { animation: none; stroke-dashoffset: 0; opacity: 1; }
}