/* Alliance Bureau — hoja de estilos única.
   Concepto: "libro de mensajes". La red SWIFT se lee como un registro de
   mensajes que entran y salen; los códigos (MT101, pain.001, camt.053)
   aparecen como contenido, en tipografía mono, sobre una retícula sobria. */

:root {
  --paper: #f4f6f9;
  --surface: #ffffff;
  --sunk: #e7edf4;
  --ink: #0b1f3d;
  --muted: #4c5d72;
  --line: #d4dce6;
  --accent: #00748b;
  --accent-soft: #ddf0f3;
  --on-accent: #ffffff;
  --signal: #9a6312;
  --band: #042b60;
  --on-band: #e7eef2;
  --on-band-muted: #a9bdd6;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s-xs: .8125rem;
  --s-sm: .9375rem;
  --s-md: 1.0625rem;
  --s-lg: 1.375rem;
  --s-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --s-2xl: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem);

  --wrap: 72rem;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #08111f;
    --surface: #0e1a2c;
    --sunk: #0b1626;
    --ink: #e5edf2;
    --muted: #9cabb7;
    --line: #20324a;
    --accent: #4dc4d6;
    --accent-soft: #0d2f3a;
    --on-accent: #03222b;
    --signal: #e2a849;
    --band: #04152f;
    --on-band: #e5edf2;
    --on-band-muted: #8d9daa;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #08111f;
  --surface: #0e1a2c;
  --sunk: #0b1626;
  --ink: #e5edf2;
  --muted: #9cabb7;
  --line: #20324a;
  --accent: #4dc4d6;
  --accent-soft: #0d2f3a;
  --on-accent: #03222b;
  --signal: #e2a849;
  --band: #04152f;
  --on-band: #e5edf2;
  --on-band-muted: #8d9daa;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--s-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-stretch: 110%;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--s-2xl); font-weight: 700; }
h2 { font-size: var(--s-xl); font-weight: 700; }
h3 { font-size: var(--s-lg); font-weight: 650; }
h4 { font-size: var(--s-md); font-weight: 650; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--s-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.code {
  font-family: var(--f-mono);
  font-size: .9em;
  color: var(--signal);
  white-space: nowrap;
}
.lede { font-size: var(--s-lg); line-height: 1.5; color: var(--muted); max-width: 40rem; }
.prose { max-width: 42rem; display: grid; gap: 1rem; }

/* ---------- Barra superior y navegación ---------- */
.parent-strip {
  background: var(--band);
  color: var(--on-band-muted);
  font-size: var(--s-xs);
}
.parent-strip .wrap {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  justify-content: space-between; align-items: center;
  padding-block: .45rem;
}
.parent-strip a { color: var(--on-band); text-decoration: none; }
.parent-strip a:hover { text-decoration: underline; }
.parent-strip .siblings { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
}
.brand svg { flex: none; }
.brand-name {
  font-family: var(--f-display); font-stretch: 115%;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1;
}
.brand-name small {
  display: block; margin-top: .2rem;
  font-family: var(--f-mono); font-stretch: 100%; font-weight: 400;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  color: var(--ink); text-decoration: none; font-size: var(--s-sm);
  padding: .45rem .7rem; border-radius: var(--radius);
}
.nav a:hover { background: var(--sunk); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav a.btn { margin-left: .5rem; }

.nav-toggle {
  display: none;
  font: inherit; font-size: var(--s-sm);
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .4rem .75rem; cursor: pointer;
}

@media (max-width: 1120px) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px));
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .75rem .5rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav a.btn { margin: .75rem 0 0; text-align: center; border-bottom: 0; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-body); font-weight: 600; font-size: var(--s-sm);
  text-decoration: none; cursor: pointer;
  padding: .7rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.nav a.btn, .nav a.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--sunk); filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: .75rem; margin-bottom: 2.25rem; max-width: 46rem; }
.band { background: var(--band); color: var(--on-band); }
.band .eyebrow, .band .lede, .band p { color: var(--on-band-muted); }
.band h2, .band h3 { color: var(--on-band); }
.section.band + .section { border-top: 0; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero-grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}
.hero-copy { display: grid; gap: 1.4rem; min-width: 0; }
.hero h1 em { font-style: normal; color: var(--accent); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Registro de mensajes (ilustrativo) */
.ledger {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--f-mono); font-size: .8rem; min-width: 0; overflow: hidden;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(10, 30, 40, .45);
}
.ledger-head {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.ledger-head .live::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem;
  border-radius: 50%; background: var(--accent); vertical-align: .05rem;
}
.ledger ol { list-style: none; margin: 0; padding: .35rem 0; }
.ledger li {
  display: grid; grid-template-columns: 1.4rem 6.2rem minmax(0, 1fr) auto;
  gap: .6rem; align-items: baseline;
  padding: .5rem 1rem; border-bottom: 1px dashed var(--line);
}
.ledger li:last-child { border-bottom: 0; }
.ledger .dir { color: var(--muted); }
.ledger .msg { color: var(--signal); font-weight: 500; }
.ledger .what { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-body); font-size: .82rem; }
.ledger .st { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ledger .st.wait { background: var(--sunk); color: var(--muted); }
.ledger-foot { padding: .6rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
@media screen {
  .ledger li.pulse { animation: pulse 2.4s ease-out 1; }
  @keyframes pulse { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
}
@media (max-width: 480px) {
  .ledger li { grid-template-columns: 1.2rem 5.4rem minmax(0, 1fr); }
  .ledger .st { display: none; }
}

/* ---------- Cifras ---------- */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fact { padding: 1.4rem 1.25rem 1.4rem 0; display: grid; gap: .35rem; align-content: start; }
.fact + .fact { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.fact b {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fact span { color: var(--muted); font-size: var(--s-sm); line-height: 1.4; }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Rejillas y tarjetas ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: grid; gap: .8rem; align-content: start; min-width: 0;
}
.card p { color: var(--muted); font-size: var(--s-sm); }
.card .more { font-size: var(--s-sm); font-weight: 600; text-decoration: none; }
.card .more::after { content: " →"; }
.card-link { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.card-link:hover { border-color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-family: var(--f-mono); font-size: .72rem;
  padding: .15rem .5rem; border-radius: 3px;
  background: var(--sunk); color: var(--muted);
}

/* ---------- Ecosistema Alliance ---------- */
.family { display: grid; gap: 1.5rem; }
.family-parent {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center;
  padding: 1.5rem; border: 1px solid var(--on-band-muted); border-radius: var(--radius);
}
.family-parent h3 { font-size: var(--s-xl); }
.family-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.family-line {
  padding: 1.25rem; border-top: 3px solid var(--on-band-muted);
  background: color-mix(in srgb, var(--on-band) 5%, transparent);
  display: grid; gap: .5rem; align-content: start;
}
.family-line.is-current { border-top-color: var(--accent); }
.family-line a { color: var(--on-band); font-weight: 600; font-size: var(--s-sm); }
.family-line .here { font-family: var(--f-mono); font-size: .72rem; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.band .btn-ghost { color: var(--on-band); border-color: var(--on-band-muted); }
.band .btn-ghost:hover { background: color-mix(in srgb, var(--on-band) 10%, transparent); }
@media (max-width: 760px) {
  .family-parent { grid-template-columns: minmax(0, 1fr); }
  .family-lines { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Diagrama de flujo ---------- */
.flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.flow-step { padding: 1.25rem; display: grid; gap: .5rem; align-content: start; position: relative; min-width: 0; }
.flow-step + .flow-step { border-left: 1px solid var(--line); }
.flow-step .eyebrow { color: var(--accent); }
.flow-step p { color: var(--muted); font-size: var(--s-sm); }
@media (max-width: 800px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Páginas de catálogo ---------- */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 2rem; display: grid; gap: 1.1rem; }
.page-hero .lede { max-width: 46rem; }

.catalog { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.toc {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5.5rem);
  display: grid; gap: .1rem; font-size: var(--s-sm);
}
.toc .eyebrow { margin-bottom: .5rem; }
.toc a { color: var(--muted); text-decoration: none; padding: .35rem 0 .35rem .75rem; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-left-color: var(--accent); }
@media (max-width: 900px) {
  .catalog { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: .4rem; }
  .toc .eyebrow { width: 100%; margin-bottom: 0; }
  .toc a { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .75rem; }
}

.product {
  display: grid; gap: 1.25rem; padding-block: 2.5rem;
  border-top: 1px solid var(--line); scroll-margin-top: 6rem;
}
.product:first-child { border-top: 0; padding-top: 0; }
.product-head { display: grid; gap: .6rem; }
.product-head .kind { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.product-head p { color: var(--muted); max-width: 44rem; }
.product-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
@media (max-width: 720px) { .product-cols { grid-template-columns: minmax(0, 1fr); } }
.product h4 { font-family: var(--f-mono); font-stretch: 100%; font-size: var(--s-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.4rem; font-size: var(--s-sm); line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6rem; height: .35rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600;
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* ---------- Talleres ---------- */
.course { display: grid; gap: .7rem; align-content: start; }
.course-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
.course-meta span::before { content: "· "; color: var(--accent); }
.course-meta span:first-child::before { content: ""; }

/* ---------- Contacto ---------- */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--s-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--s-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #e5484d; box-shadow: 0 0 0 1px #e5484d; }
.form-note { font-size: var(--s-xs); color: var(--muted); }
.form-status { font-size: var(--s-sm); padding: .8rem 1rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); }

/* ---------- CTA y pie ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
@media (max-width: 760px) { .cta { grid-template-columns: minmax(0, 1fr); } }

.site-footer { background: var(--band); color: var(--on-band-muted); font-size: var(--s-sm); }
.site-footer .wrap { padding-block: 3rem 2rem; display: grid; gap: 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.footer-grid h4 { color: var(--on-band); font-family: var(--f-mono); font-stretch: 100%; font-size: var(--s-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-bottom: .75rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer a { color: var(--on-band); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { color: var(--on-band); }
.site-footer .brand-name small { color: var(--on-band-muted); }
.footer-legal { border-top: 1px solid color-mix(in srgb, var(--on-band) 15%, transparent); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: var(--s-xs); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- v2: logo, slogan, WhatsApp, animaciones ---------- */
.logo { display: block; height: 36px; width: auto; }
.slogan {
  font-family: var(--f-display); font-stretch: 105%; font-weight: 500;
  font-size: var(--s-sm); color: var(--muted); line-height: 1.2;
  padding-left: .75rem; border-left: 1px solid var(--line);
}
.site-footer .slogan { color: var(--on-band-muted); border-left-color: color-mix(in srgb, var(--on-band) 25%, transparent); }
.logo-footer { filter: none; }
@media (max-width: 480px) { .site-header .slogan { font-size: .74rem; max-width: 7.5rem; } .site-header .logo { height: 30px; } }

.wa { position: relative; display: inline-block; }
.wa-menu {
  position: absolute; z-index: 40; top: calc(100% + .5rem); left: 0;
  min-width: 18rem; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(10, 30, 40, .45);
  padding: .75rem; display: grid; gap: .35rem;
}
.wa-menu[hidden] { display: none; }
.wa-menu .eyebrow { padding: .2rem .5rem .4rem; }
.wa-menu a, .wa-card {
  display: grid; gap: .1rem; text-decoration: none; color: var(--ink);
  padding: .6rem .75rem; border-radius: var(--radius); border: 1px solid transparent;
}
.wa-menu a:hover, .wa-card:hover { background: var(--accent-soft); border-color: var(--accent); }
.wa-menu a b, .wa-card b { font-size: var(--s-sm); }
.wa-menu a span, .wa-card span { font-family: var(--f-mono); font-size: .78rem; color: var(--accent); }
.band .wa-menu { color: var(--ink); }
.cta .wa-menu { left: auto; right: 0; }
@media (max-width: 760px) { .cta .wa-menu { right: auto; left: 0; } }
.wa-card { border-color: var(--line); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Medidor bajo cada cifra */
.fact { position: relative; }
.meter { display: block; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: .4rem; }
.meter::after { content: ""; display: block; height: 100%; width: calc(var(--v, 1) * 100%); background: var(--accent); transform-origin: left; }

/* Paquete que recorre el flujo */
.flow { position: relative; overflow: hidden; }
.flow-packet {
  position: absolute; top: -1px; left: 0; height: 3px; width: 18%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events: none;
}
.flow-step .eyebrow::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem;
  border-radius: 50%; border: 2px solid var(--accent); vertical-align: -.05rem;
}

/* Línea superior de cada línea de negocio */
.family-line { position: relative; border-top-color: transparent; }
.family-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--on-band-muted); transform-origin: left;
}
.family-line.is-current::before { background: var(--accent); }

@media screen {
  /* Registro: las filas entran una tras otra al cargar */
  .ledger li { animation: rowIn .5s ease-out both; }
  .ledger li:nth-child(2) { animation-delay: .12s; }
  .ledger li:nth-child(3) { animation-delay: .24s; }
  .ledger li:nth-child(4) { animation-delay: .36s; }
  .ledger li:nth-child(5) { animation-delay: .48s; }
  @keyframes rowIn { from { transform: translateY(6px); opacity: .2; } to { transform: none; opacity: 1; } }
  .ledger-head .live::before { animation: blink 1.6s ease-in-out infinite; }
  @keyframes blink { 50% { opacity: .25; } }

  .flow-packet { animation: travel 5s linear infinite; }
  @keyframes travel { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
  .flow-step .eyebrow::before { animation: node 5s linear infinite; }
  .flow-step:nth-of-type(2) .eyebrow::before { animation-delay: 1.25s; }
  .flow-step:nth-of-type(3) .eyebrow::before { animation-delay: 2.5s; }
  .flow-step:nth-of-type(4) .eyebrow::before { animation-delay: 3.75s; }
  @keyframes node { 0%, 18% { background: var(--accent); } 25%, 100% { background: transparent; } }

  .in-view .meter::after { animation: grow 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .in-view .fact:nth-child(2) .meter::after { animation-delay: .1s; }
  .in-view .fact:nth-child(3) .meter::after { animation-delay: .2s; }
  .in-view .fact:nth-child(4) .meter::after { animation-delay: .3s; }
  .in-view .family-line::before { animation: grow 1s cubic-bezier(.2,.7,.2,1) both; }
  .in-view .family-line:nth-child(2)::before { animation-delay: .15s; }
  .in-view .family-line:nth-child(3)::before { animation-delay: .3s; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 800px) {
  .flow-packet { top: 0; left: -1px; width: 3px; height: 18%; background: linear-gradient(180deg, transparent, var(--accent), transparent); animation-name: travelY; }
  @keyframes travelY { from { transform: translateY(-100%); } to { transform: translateY(560%); } }
}

/* Menú Recursos */
.nav-group { position: relative; }
.nav-sub-toggle {
  font: inherit; font-size: var(--s-sm); color: var(--ink); background: transparent; border: 0; cursor: pointer;
  padding: .45rem .7rem; border-radius: var(--radius);
}
.nav-sub-toggle::after { content: ""; display: inline-block; margin-left: .4rem; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15rem) rotate(45deg); }
.nav-sub-toggle:hover { background: var(--sunk); }
.nav-sub {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 11rem; z-index: 45;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(10, 30, 40, .45); padding: .4rem; display: grid;
}
.nav-sub[hidden] { display: none; }
.nav-sub a { padding: .5rem .7rem; }
@media (max-width: 1120px) {
  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-sub-toggle { width: 100%; text-align: left; padding: .75rem .5rem; border-radius: 0; }
  .nav-sub { position: static; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; }
  .nav-sub a { border-bottom: 0; padding: .5rem; }
}

/* Logo oficial: versión de texto; variante clara para fondos oscuros */
.logo-box { display: inline-flex; }
.site-header .logo { height: 26px; width: auto; }
.site-footer .logo { height: 24px; width: auto; }
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-on-light { display: none; } :root:not([data-theme="light"]) .logo-on-dark { display: block; } }
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }
@media (max-width: 520px) {
  .site-header .brand { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .site-header .logo { height: 19px; }
  .site-header .slogan { border-left: 0; padding-left: 0; max-width: none; font-size: .72rem; }
}
.nav a, .nav-sub-toggle, .site-header .slogan { white-space: nowrap; }
/* Logo con anillos en la cabecera */
.site-header .wrap { padding-block: .55rem; }
.site-header .logo { height: 72px; }
@media (max-width: 520px) {
  .site-header .brand { flex-direction: row; align-items: center; gap: .6rem; }
  .site-header .logo { height: 50px; }
  .site-header .slogan { border-left: 1px solid var(--line); padding-left: .6rem; max-width: 7rem; white-space: normal; }
}
/* Móvil: logo de texto en lugar de los anillos (más legible a tamaño pequeño) */
.site-header .logo-text { height: 20px; }
@media (min-width: 521px) { .site-header .logo-text { display: none !important; } }
@media (max-width: 520px) {
  .site-header .logo-rings { display: none !important; }
  .site-header .brand { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .site-header .slogan { border-left: 0; padding-left: 0; max-width: none; white-space: nowrap; font-size: .74rem; }
}

/* =================== Ronda 3 =================== */

/* Indicador de operación en la franja superior */
.status { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-band); font-weight: 500; }
.bulb { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent), 0 0 12px var(--st); }
.status[data-estado="verde"] { --st: #2fbf71; }
.status[data-estado="ambar"] { --st: #f2a516; }
.status[data-estado="rojo"] { --st: #e5484d; }
/* Oculto hasta leer el estado vigente (estado.php), para no mostrar el color del HTML generado */
.status { transition: opacity .25s; }
.status[data-cargando] { opacity: 0; }
@media screen {
  .bulb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--st); animation: bulb 2s ease-out infinite; }
  .status[data-estado="ambar"] .bulb { animation: flicker 1.4s steps(2, jump-none) infinite; }
  .status[data-estado="rojo"] .bulb::after { animation-duration: 1s; }
  @keyframes bulb { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
  @keyframes flicker { 50% { opacity: .45; } }
}

/* Menú: grupo activo */
.nav-sub-toggle.is-current { color: var(--accent); font-weight: 600; }

/* Botón con aspecto de enlace (pie) */
.link-btn { font: inherit; color: var(--on-band); background: none; border: 0; padding: 0; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Pie de página */
.footer-brand { display: grid; gap: 1rem; align-content: start; max-width: 24rem; }
.site-footer .footer-brand .brand { flex-direction: column; align-items: flex-start; gap: .6rem; }
.site-footer .footer-brand .slogan { border-left: 0; padding-left: 0; font-size: var(--s-lg); font-weight: 600; color: var(--on-band); white-space: normal; }
.site-footer .footer-brand .logo { height: 28px; }

/* Panel de cookies */
.cookie-panel {
  position: fixed; z-index: 70; max-width: 26rem;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin-left: max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(4, 20, 50, .5); padding: 1.25rem; display: grid; gap: .8rem;
}
.cookie-panel[hidden] { display: none; }
.cookie-panel p { color: var(--muted); font-size: var(--s-sm); }

/* ---------- Carrusel del inicio ---------- */
.carousel { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) 0; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s linear .6s; }
.slide.is-active { visibility: visible; opacity: 1; transition: opacity .6s ease; }
.hero-title { font-size: var(--s-2xl); font-weight: 700; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-visual { min-width: 0; display: grid; }
@media screen {
  .slide.is-active .hero-copy > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .slide.is-active .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .slide.is-active .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .slide.is-active .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .slide.is-active .hero-visual { animation: rise .8s .1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.carousel-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; align-items: stretch; }
.carousel-nav [role="tab"] {
  position: relative; overflow: hidden; flex: 1 1 9rem; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--s-sm); font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem .9rem;
}
.carousel-nav [role="tab"][aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.carousel-nav .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.carousel-nav [aria-selected="true"] .prog { transform: scaleX(1); }
@media screen {
  .carousel.is-playing .carousel-nav [aria-selected="true"] .prog { animation: prog var(--dur, 8s) linear both; }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.carousel-pause { flex: 0 0 auto; font: inherit; font-size: .75rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 .9rem; cursor: pointer; }

/* ---------- Encabezado de página con ilustración ---------- */
.page-hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.page-hero-copy { display: grid; gap: 1.1rem; min-width: 0; }
.page-hero-visual { min-width: 0; display: grid; }
@media (max-width: 900px) { .page-hero-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ilustraciones ---------- */
.illus { margin: 0; max-width: 100%; min-width: 0; }
.illus svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Red SWIFT */
.illus-net { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; }
.il-orbit { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 7; transform-origin: 240px 170px; }
.il-link { stroke: var(--line); stroke-width: 2; }
.il-packet { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 190; stroke-dashoffset: 200; }
.il-code { font: 500 10.5px var(--f-mono); fill: var(--signal); }
.il-node circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.il-node text { font: 600 9.5px var(--f-body); fill: var(--ink); }
.il-hub { fill: var(--band); }
.il-hub-glow { fill: var(--accent); opacity: .15; transform-origin: 240px 170px; }
.il-hub-t { font: 700 12px var(--f-display); fill: #fff; }
@media screen {
  .il-orbit { animation: spin 60s linear infinite; }
  .il-packet { animation: packet 3.3s linear infinite; }
  .il-node circle { animation: ping 3.3s ease-out infinite; animation-delay: inherit; }
  .il-node { animation-delay: inherit; }
  .il-hub-glow { animation: breathe 3s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes packet { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
  @keyframes ping { 0%, 70% { stroke: var(--ink); } 80% { stroke: var(--accent); stroke-width: 3; } 100% { stroke: var(--ink); } }
  @keyframes breathe { 50% { transform: scale(1.18); opacity: .28; } }
}

/* Taller en curso */
.illus-course { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; display: grid; gap: 1rem; box-shadow: 0 18px 40px -28px rgba(4, 30, 60, .45); }
.course-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.live-dot { font-family: var(--f-mono); font-size: .72rem; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.live-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.illus-course ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.illus-course li { display: flex; align-items: center; gap: .7rem; font-size: var(--s-sm); }
.illus-course li i { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--line); position: relative; background: var(--accent); box-shadow: inset 0 0 0 10px var(--accent); }
.illus-course li i::after { content: ""; position: absolute; left: .3rem; top: .12rem; width: .3rem; height: .55rem; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.course-bar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.course-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }
.course-cert { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--s-sm); }
.course-cert svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media screen {
  .illus-course li i { animation: check 8s calc(var(--i) * 1.2s + .3s) infinite both; }
  .course-bar span { animation: fill 8s .3s infinite both; }
  .course-cert { animation: pop 8s infinite both; }
  .live-dot::before { animation: blink 1.6s ease-in-out infinite; }
  @keyframes check { 0% { box-shadow: inset 0 0 0 0 var(--accent); background: transparent; border-color: var(--line); } 8%, 92% { box-shadow: inset 0 0 0 10px var(--accent); background: var(--accent); border-color: var(--accent); } 100% { box-shadow: inset 0 0 0 0 var(--accent); background: transparent; } }
  @keyframes fill { 0% { transform: scaleX(0); } 65%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes pop { 0%, 64% { opacity: .25; transform: scale(.96); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: .25; } }
}

/* Noticia destacada */
.illus-news { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; box-shadow: 0 18px 40px -28px rgba(4, 30, 60, .45); }
.news-cal { display: grid; text-align: center; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); min-width: 5.5rem; }
.news-cal b { background: var(--accent); color: var(--on-accent); font-family: var(--f-mono); padding: .35rem; letter-spacing: .1em; }
.news-cal span { font-family: var(--f-display); font-weight: 700; font-size: 2rem; padding: .3rem .6rem .5rem; }
.news-body { display: grid; gap: .8rem; justify-items: start; }
.news-body p { font-family: var(--f-display); font-weight: 650; font-size: var(--s-lg); line-height: 1.25; }
.news-lines { display: grid; gap: .45rem; width: 100%; }
.news-lines i { display: block; height: 8px; border-radius: 4px; background: var(--sunk); }
.news-lines i:nth-child(2) { width: 85%; } .news-lines i:nth-child(3) { width: 60%; }
@media screen {
  .news-badge { animation: pulse-b 2s ease-in-out infinite; }
  .news-lines i { background: linear-gradient(90deg, var(--sunk) 30%, var(--accent-soft) 50%, var(--sunk) 70%); background-size: 300% 100%; animation: shimmer 2.4s linear infinite; }
  @keyframes pulse-b { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
@media (max-width: 480px) { .illus-news { grid-template-columns: minmax(0, 1fr); } .news-cal { justify-self: start; } }

/* Transformación de formatos */
.illus-pipe { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; }
.pl-step rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.pl-t { font: 650 13px var(--f-display); fill: var(--ink); }
.pl-s { font: 500 10.5px var(--f-mono); fill: var(--signal); }
.pl-arrow { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-chip { fill: var(--accent); }
.pl-chip-t { font: 500 10.5px var(--f-mono); fill: var(--on-accent); }
.pl-chip, .pl-chip-t { transform: translateX(20px); }
.pl-foot { font: 400 11.5px var(--f-body); fill: var(--muted); }
@media screen {
  .pl-chip, .pl-chip-t { animation: travel-chip 3.6s cubic-bezier(.6,0,.3,1) infinite; }
  .pl-step rect { animation: lit 3.6s infinite; animation-delay: inherit; }
  .pl-step { animation-delay: inherit; }
  @keyframes travel-chip { 0% { transform: translateX(20px); } 25% { transform: translateX(152px); } 50% { transform: translateX(284px); } 75%, 100% { transform: translateX(416px); } }
  @keyframes lit { 0%, 20% { stroke: var(--accent); fill: var(--accent-soft); } 30%, 100% { stroke: var(--line); fill: var(--paper); } }
}

/* Casa matriz */
.illus-about { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; max-width: 100%; }
.illus-about img { width: 58%; height: auto; position: relative; z-index: 1; }
.orbit { position: absolute; inset: 8%; border: 1.5px dashed var(--line); border-radius: 50%; }
.orbit.o2 { inset: 0; } .orbit.o3 { inset: 16%; border-style: solid; border-color: var(--accent-soft); }
.orbit i { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.orbit.o2 i { background: var(--band); } .orbit.o3 i { background: var(--signal); width: 9px; height: 9px; top: -5px; }
.illus-about .logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .illus-about .logo-on-light { display: none; } :root:not([data-theme="light"]) .illus-about .logo-on-dark { display: block; } }
:root[data-theme="dark"] .illus-about .logo-on-light { display: none; }
:root[data-theme="dark"] .illus-about .logo-on-dark { display: block; }
@media screen {
  .orbit { animation: spin 18s linear infinite; }
  .orbit.o2 { animation-duration: 30s; animation-direction: reverse; }
  .orbit.o3 { animation-duration: 12s; }
}

/* Conversación */
.illus-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; display: grid; gap: .6rem; }
.chat-head { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.bubble { max-width: 85%; padding: .6rem .85rem; border-radius: 12px; font-size: var(--s-sm); line-height: 1.4; }
.bubble.in { background: var(--sunk); justify-self: start; border-bottom-left-radius: 3px; }
.bubble.out { background: var(--accent); color: var(--on-accent); justify-self: end; border-bottom-right-radius: 3px; }
.typing { display: inline-flex; gap: .3rem; padding: .6rem .85rem; background: var(--sunk); border-radius: 12px; justify-self: start; }
.typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--muted); }
@media screen {
  .bubble { animation: msg 10s calc(var(--i) * 1.6s) infinite both; }
  .typing i { animation: dots 1.2s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
  @keyframes msg { 0% { opacity: 0; transform: translateY(8px); } 5%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes dots { 50% { transform: translateY(-4px); opacity: .5; } }
}

/* Artículos */
.illus-docs { position: relative; min-height: 15rem; }
.doc { position: absolute; left: calc(var(--i) * 12%); top: calc(var(--i) * 14%); width: 62%; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .5rem; box-shadow: 0 18px 40px -28px rgba(4, 30, 60, .5); }
.doc b { display: block; height: 3.2rem; border-radius: 6px; background: linear-gradient(135deg, var(--band), var(--accent)); }
.doc i { display: block; height: 7px; border-radius: 4px; background: var(--sunk); }
.doc i:last-child { width: 60%; }
@media screen {
  .doc { animation: float 6s ease-in-out calc(var(--i) * -2s) infinite; }
  @keyframes float { 50% { transform: translateY(-8px); } }
}

/* Escudo */
.illus-shield { display: grid; place-items: center; }
.illus-shield svg { max-width: 14rem; }
.sh { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; }
.sh-tick { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; }
@media screen {
  .sh-tick { animation: draw 4s ease-in-out infinite; }
  @keyframes draw { 0% { stroke-dashoffset: 120; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
}

/* Portadas de talleres y artículos */
.cover { border-radius: 6px; overflow: hidden; background: linear-gradient(120deg, #042b60, #063a73 55%, #00748b); aspect-ratio: 8 / 3; margin: -.25rem -.25rem .25rem; }
.cover svg { display: block; width: 100%; height: 100%; }
.cv-grid path { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.cv-icon { fill: none; stroke: #8fe3ef; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cv-code { font: 500 26px var(--f-mono); fill: #ffffff; }
.cv-scan { fill: rgba(143, 227, 239, .10); transform: translateX(-60px); }
@media screen {
  .cv-scan { animation: scan 4.5s ease-in-out var(--d, 0s) infinite; }
  .cv-icon { animation: glow 4.5s ease-in-out var(--d, 0s) infinite; }
  .course:hover .cover, .entry:hover .cover { filter: brightness(1.12); }
  @keyframes scan { 0% { transform: translateX(-60px); } 60%, 100% { transform: translateX(340px); } }
  @keyframes glow { 30% { stroke: #ffffff; } }
}
.course { overflow: hidden; }

/* Blog y noticias */
.entry { overflow: hidden; }
.entry-img { width: calc(100% + .5rem); margin: -.25rem -.25rem .25rem; aspect-ratio: 8 / 3; object-fit: cover; border-radius: 6px; }
.entry-ext { font-size: var(--s-xs); font-family: var(--f-mono); color: var(--accent); }
.article { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); display: grid; gap: 1rem; max-width: 52rem; }
.article .back { font-size: var(--s-sm); text-decoration: none; }
.article h1 { font-size: var(--s-xl); }
.article-cover { margin-block: .5rem 1rem; }
.article-cover .cover { aspect-ratio: 16 / 5; margin: 0; }
.entry-hero-img { width: 100%; border-radius: 8px; }
.article-body { display: grid; gap: 1rem; max-width: 42rem; }
.article-body h2 { font-size: var(--s-lg); margin-top: .75rem; }
.article-body ul, .article-body ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .4rem; }

/* Ajustes ronda 3: título de la noticia en el carrusel y franja superior en móvil */
.slide-news .hero-title { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.parent-strip .wrap { flex-wrap: nowrap; gap: 12px; }
.parent-strip .status { flex-shrink: 0; }
@media (max-width: 560px) { .parent-strip .hide-sm { display: none; } }

/* Fotos: encabezados de página y talleres. Sin animación (solo las gráficas se animan). */
.page-hero-visual .photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--sunk); }
.course-photo { position: relative; margin: -.25rem -.25rem .25rem; border-radius: 6px; overflow: hidden; background: var(--sunk); }
.course-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.course-photo .code { position: absolute; left: .6rem; bottom: .6rem; padding: .2rem .5rem; border-radius: 4px; font-size: .78rem; color: #ffffff; background: rgba(4, 43, 96, .82); }

/* ---------- Ronda 4: logo 10% más grande ---------- */
.site-header .logo { height: 79px; }
.site-header .logo-text { height: 22px; }
@media (max-width: 520px) { .site-header .logo { height: 55px; } .site-header .logo-text { height: 22px; } }

/* ---------- Ronda 4: fondos con degradados fluidos (estáticos) ----------
   Manchas suaves de navy y teal sobre el papel. Se calculan con los tokens,
   así que funcionan en claro y oscuro y no tapan el contraste del texto. */
:root {
  --g-teal: color-mix(in srgb, #00748b 26%, transparent);
  --g-teal-soft: color-mix(in srgb, #00748b 14%, transparent);
  --g-navy: color-mix(in srgb, #042b60 18%, transparent);
  --g-navy-soft: color-mix(in srgb, #042b60 10%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-teal: color-mix(in srgb, #00748b 30%, transparent);
    --g-teal-soft: color-mix(in srgb, #00748b 16%, transparent);
    --g-navy: color-mix(in srgb, #1d5bb0 26%, transparent);
    --g-navy-soft: color-mix(in srgb, #1d5bb0 14%, transparent);
  }
}
:root[data-theme="dark"] {
  --g-teal: color-mix(in srgb, #00748b 30%, transparent);
  --g-teal-soft: color-mix(in srgb, #00748b 16%, transparent);
  --g-navy: color-mix(in srgb, #1d5bb0 26%, transparent);
  --g-navy-soft: color-mix(in srgb, #1d5bb0 14%, transparent);
}
html, body { overflow-x: clip; }

/* Hero del inicio */
.hero {
  background:
    radial-gradient(60% 70% at 88% 18%, var(--g-teal), transparent 70%),
    radial-gradient(55% 65% at 8% 92%, var(--g-navy), transparent 70%),
    radial-gradient(40% 45% at 45% 0%, var(--g-teal-soft), transparent 70%),
    var(--paper);
}
/* Encabezados de las páginas internas: el fondo ocupa todo el ancho */
.page-hero { position: relative; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(45% 80% at 85% 25%, var(--g-teal), transparent 70%),
    radial-gradient(40% 75% at 5% 100%, var(--g-navy), transparent 70%),
    var(--paper);
}
/* Secciones: alternan manchas a la derecha y a la izquierda */
.section:not(.band) {
  background:
    radial-gradient(60% 75% at 100% 0%, var(--g-teal-soft), transparent 72%),
    radial-gradient(55% 70% at 0% 100%, var(--g-navy-soft), transparent 72%);
}
.section:not(.band):nth-of-type(even) {
  background:
    radial-gradient(60% 75% at 0% 10%, var(--g-teal-soft), transparent 72%),
    radial-gradient(60% 75% at 100% 100%, var(--g-navy-soft), transparent 72%),
    color-mix(in srgb, var(--surface) 55%, transparent);
}
.section + .section { border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }
/* Bandas oscuras y pie: navy con un resplandor teal */
.band, .site-footer {
  background:
    radial-gradient(50% 80% at 90% 0%, color-mix(in srgb, #00748b 45%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, #0a4a9c 40%, transparent), transparent 70%),
    var(--band);
}
.parent-strip { background: linear-gradient(90deg, var(--band), color-mix(in srgb, var(--band) 75%, #00748b)); }

/* ---------- Ronda 5 ----------
   Las animaciones decorativas se muestran siempre, también en equipos con
   "reducir movimiento" activo (decisión de Alliance Bureau). Para volver a
   respetar esa preferencia, cambiar "@media screen {" por
   "@media (prefers-reduced-motion: no-preference) {" en este archivo. */

/* Indicador de estado parpadeante: un destello lento (menos de 1 por segundo) */
.bulb { animation: blink 1.6s ease-in-out infinite; }
.status[data-estado="ambar"] .bulb { animation: blink 1.1s ease-in-out infinite; }
.status[data-estado="rojo"] .bulb { animation: blink .8s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; box-shadow: none; } }

/* Red SWIFT del hero: los nodos flotan, los paquetes van y vuelven */
.il-arm { animation: drift 7s ease-in-out infinite; }
@keyframes drift { 50% { transform: translate(var(--fx), var(--fy)); } }
.il-packet.il-back { stroke: var(--signal); }
.il-orbit { animation: spin 40s linear infinite; }
.il-orbit-2 { stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-dasharray: 2 10; animation-direction: reverse; animation-duration: 28s; }
.il-hub-ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 18 14; transform-origin: 240px 170px; animation: spin 10s linear infinite; }

/* Programación anual */
.months .month h3 { margin-bottom: .6rem; }
.windows { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-family: var(--f-mono); font-size: .8rem; }
.windows li { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.windows li i { color: var(--accent); font-style: normal; }
.windows li.is-past { opacity: .45; }
.windows li.is-next { background: var(--accent); color: #fff; }
.windows li.is-next i { color: #fff; }
.next-window { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: 1.5rem; border-left: 4px solid var(--accent); }
.next-window[hidden] { display: none; }
.note { color: var(--muted); font-size: var(--s-sm); margin-top: 1.25rem; }

/* Videos de capacitación */
.video-lib { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.player { position: sticky; top: 7rem; padding: .75rem; }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #04152f; border-radius: 6px; display: block; }
.player-title { margin: .6rem .25rem 0; font-weight: 600; }
.vlist { display: grid; gap: 1rem; max-height: 72vh; overflow: auto; padding-right: .25rem; }
.vmod h3 { font-size: var(--s-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .35rem; }
.vmod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vmod button { width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; display: flex; gap: .6rem; align-items: center; }
.vmod button i { font-style: normal; font-size: .7rem; color: var(--accent); }
.vmod button:hover, .vmod button[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
@media (max-width: 860px) { .video-lib { grid-template-columns: 1fr; } .player { position: static; } .vlist { max-height: none; } }

/* Certificaciones */
.cert { display: grid; gap: .5rem; align-content: start; }
/* Logo al ancho de la tarjeta, sin deformarlo: caja 2:1 y object-fit: contain.
   Los logos horizontales ocupan todo el ancho; los cuadrados quedan limitados por la altura. */
.cert-logo { width: 100%; aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; }
.cert-logo img { width: 100%; height: 100%; object-fit: contain; }
.cert-code { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
.cert-mark { font: 700 1.05rem var(--f-display); letter-spacing: .08em; color: var(--band); border: 2px solid var(--band); border-radius: 6px; padding: .45rem .8rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cert-mark { color: var(--accent); border-color: var(--accent); } }
:root[data-theme="dark"] .cert-mark { color: var(--accent); border-color: var(--accent); }

/* ---------- Ronda 7 ---------- */
/* Borde superior animado en las tarjetas del inicio (igual que "Cómo funciona") */
.edge-run > .card { position: relative; overflow: hidden; }
.edge-run > .card::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 35%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events: none; animation: edgeRun 5s linear infinite;
}
.edge-run > .card:nth-child(2)::before { animation-delay: 1.65s; }
.edge-run > .card:nth-child(3)::before { animation-delay: 3.3s; }
.grid-2.edge-run > .card:nth-child(2)::before { animation-delay: 1.25s; }
.grid-2.edge-run > .card:nth-child(3)::before { animation-delay: 2.5s; }
.grid-2.edge-run > .card:nth-child(4)::before { animation-delay: 3.75s; }
@keyframes edgeRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* Menú: subrayado que crece al pasar el ratón */
.nav > a:not(.btn), .nav-sub-toggle {
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-position: .7rem calc(100% - .2rem); background-size: 0 2px;
  transition: background-size .25s ease, background-color .2s ease, color .2s ease;
}
.nav > a:not(.btn):hover, .nav-sub-toggle:hover, .nav-sub-toggle[aria-expanded="true"] {
  background-image: linear-gradient(var(--accent), var(--accent)); background-color: var(--sunk);
  background-repeat: no-repeat; background-position: .7rem calc(100% - .2rem);
  background-size: calc(100% - 1.4rem) 2px; color: var(--accent);
}
.nav-sub-toggle::after { transition: transform .25s ease; }
.nav-sub-toggle[aria-expanded="true"]::after { transform: translateY(.05rem) rotate(225deg); }
/* Submenú: aparece deslizándose y sus opciones entran una tras otra */
@media (min-width: 1121px) {
  .nav-sub { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
  .nav-sub.is-open { opacity: 1; transform: none; }
  .nav-sub a { opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease, background-color .2s ease, padding-left .2s ease; }
  .nav-sub.is-open a { opacity: 1; transform: none; }
  .nav-sub.is-open a:nth-child(2) { transition-delay: .03s; }
  .nav-sub.is-open a:nth-child(3) { transition-delay: .06s; }
  .nav-sub.is-open a:nth-child(4) { transition-delay: .09s; }
  .nav-sub.is-open a:nth-child(5) { transition-delay: .12s; }
  .nav-sub.is-open a:nth-child(6) { transition-delay: .15s; }
  .nav-sub a:hover { padding-left: 1rem; color: var(--accent); }
}

/* Acceso a los videos */
.access-form { display: grid; gap: .9rem; max-width: 22rem; margin-top: .5rem; }
.form-error { color: #c4302b; font-weight: 600; font-size: var(--s-sm); margin: 0; }
.page-hero .actions form { display: contents; }

/* Cifras: las barras quedan alineadas al pie de cada columna, aunque el texto ocupe más líneas */
.fact { display: flex; flex-direction: column; gap: .35rem; }
.fact .meter { margin-top: auto; }
.fact span { margin-bottom: .4rem; }

/* Grupo Alliance: "Visitar sitio" al fondo de cada tarjeta, a la misma altura */
.family-line { display: flex; flex-direction: column; }
.family-line a { margin-top: auto; align-self: flex-start; }