/* ==========================================================================
   AVANTGARD ROBOTICS · Sistema visual "Manifiesto de misión"
   Paleta y tipografía según el Manual de Marca (sustitutos web libres):
   - Nevis Bold            -> Sora (700)
   - Maison Neue Extended  -> Archivo (eje de ancho 112–125)
   ========================================================================== */

/* ---------- Fuentes (auto-hospedadas) ---------- */
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-wdth-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("../assets/fonts/shippori-mincho-subset.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
/* Banderas del selector de código de país: Windows no dibuja los emojis de bandera. Twemoji (CC-BY 4.0) */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../assets/fonts/twemoji-flags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --rhodonite: #38374c;
  --rhodonite-950: #1c1b26;
  --rhodonite-900: #23222f;
  --rhodonite-800: #2c2b3b;
  --rhodonite-700: #414058;
  --rhodonite-400: #7f7d96;
  --coral: #e58554;
  --poppy: #e3713d;
  --red: #c52938;
  --red-deep: #a51f2d;
  --rhubarb: #6f1f33;
  --putty: #d3c8b7;
  --snow: #d3c7b4;

  /* Derivados */
  --paper: #f4f0e9;
  --paper-2: #ebe5da;
  --paper-3: #e0d8ca;
  --ink: var(--rhodonite);
  --ink-soft: #55546b;
  --on-dark: #f1ece4;
  --on-dark-soft: #bdb9cf;
  --rule: rgba(56, 55, 76, 0.18);
  --rule-dark: rgba(241, 236, 228, 0.16);

  --burn: linear-gradient(90deg, var(--poppy) 0%, var(--red) 55%, var(--rhubarb) 100%);
  --burn-diag: linear-gradient(135deg, var(--poppy) 0%, var(--red) 52%, var(--rhubarb) 100%);

  /* Tipografía */
  --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.22rem + 0.85vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.6vw, 2.85rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.8vw, 4.1rem);
  --step-5: clamp(2.7rem, 1.8rem + 4.4vw, 5.6rem);

  /* Espaciado */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --maxw: 1240px;
  --radius: 2px;
  --chamfer: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: 0 1px 2px rgba(28, 27, 38, 0.08), 0 8px 24px -8px rgba(28, 27, 38, 0.18);
  --shadow-2: 0 2px 6px rgba(28, 27, 38, 0.12), 0 24px 60px -20px rgba(28, 27, 38, 0.45);
  --header-h: 88px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-stretch: 112%;
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.4rem); }
h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 650; }
::selection { background: var(--coral); color: var(--rhodonite-950); }

:focus-visible { outline: 2px solid var(--poppy); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--red); color: #fff; padding: 0.75rem 1rem; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; font-stretch: 118%; font-weight: 350; }
.dark .lead, .lead--dark { color: var(--on-dark-soft); }

/* Datos técnicos: etiquetas de manifiesto (solo para datos, nunca como antetítulo) */
.data {
  font-family: var(--font-text);
  font-stretch: 100%;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Superficies ---------- */
.dark { background: var(--rhodonite-900); color: var(--on-dark); }
.dark--deep { background: var(--rhodonite-950); }
.dark--mid { background: var(--rhodonite); }
.rhodonite { background: var(--rhodonite); color: var(--on-dark); }
.paper-2 { background: var(--paper-2); }
.burn-field { background: var(--burn-diag); color: #fff; }
.burn-rule { height: 6px; background: var(--burn); border: 0; margin: 0; }

/* Corte diagonal a 45° que repite la geometría del logotipo */
.cut-top { clip-path: polygon(0 var(--cut, 56px), var(--cut, 56px) 0, 100% 0, 100% 100%, 0 100%); }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut, 56px)), calc(100% - var(--cut, 56px)) 100%, 0 100%); }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--red); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.8em 1.4em 0.8em 1.25em;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-stretch: 108%; font-weight: 650; font-size: 0.98rem; letter-spacing: 0.01em;
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.3s var(--ease-out); }
.btn:hover { --bg: var(--rhubarb); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--light { --bg: var(--on-dark); --fg: var(--rhodonite-900); }
.btn--light:hover { --bg: #fff; }
.btn--ink { --bg: var(--rhodonite); --fg: var(--on-dark); }
.btn--ink:hover { --bg: var(--rhodonite-950); }
.btn--ghost {
  --bg: transparent; --fg: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
  clip-path: none;
}
.btn--ghost:hover { --bg: rgba(127, 125, 150, 0.14); }
.btn[disabled], .btn[aria-disabled="true"] { --bg: var(--paper-3); --fg: var(--ink-soft); cursor: not-allowed; }
.dark .btn[disabled] { --bg: var(--rhodonite-700); --fg: var(--on-dark-soft); }
.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn.is-loading::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em; font-weight: 650; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
.text-red { color: var(--red); }
.dark .text-accent { color: var(--coral); }

/* ---------- Encabezado ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  color: var(--on-dark);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.site-header::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--burn);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out);
}
.site-header.is-solid, .site-header--solid {
  background: rgba(28, 27, 38, 0.94);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
@supports (backdrop-filter: blur(10px)) {
  .site-header.is-solid, .site-header--solid { background: rgba(28, 27, 38, 0.82); backdrop-filter: blur(14px) saturate(1.2); }
}

/* Con el menú abierto no se desenfoca el encabezado. Un filtro convierte a sus
   hijos "fixed" en hijos suyos: en los navegadores móviles el panel del menú se
   recortaba a la altura de la barra y por debajo se veía el video del hero. */
body.nav-open .site-header { background: var(--rhodonite-950); backdrop-filter: none; }
.site-header.is-solid::after, .site-header--solid::after { transform: scaleX(1); }
/* Paginas sin portada oscura (404): el encabezado necesita fondo propio desde el
   primer momento, o el menu queda ilegible sobre el papel claro. */
.pagina-simple .site-header { background: rgba(28, 27, 38, 0.94); }
.pagina-simple .site-header::after { transform: scaleX(1); }
.pagina-simple main { padding-top: var(--header-h); }
/* Paginas de texto legal: una sola columna, ancho de lectura comodo. */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.legal .checklist { margin-bottom: 1em; }

.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 66px; width: auto; }
@media (max-width: 600px) { :root { --header-h: 76px; } .brand img { height: 54px; } }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 1.35rem; }
.nav__list a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500; font-stretch: 105%;
  padding-block: 0.4rem; position: relative; color: var(--on-dark);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--coral);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { min-height: 42px; padding: 0.55em 1.1em; font-size: 0.9rem; }
/* Inscripciones: llamada a la acción en rojo dentro de la navegación */
.nav__cta a {
  background: var(--red); color: #fff; padding: 0.4rem 0.85em; display: inline-flex; align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
  transition: background-color 0.25s var(--ease-out);
}
.nav__cta a:hover { background: var(--rhubarb); }
.nav__cta a::after { display: none; }
.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; color: var(--on-dark);
  position: relative;
}
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 29px; right: 20px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); right: 12px; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; flex-direction: column; align-items: stretch;
    gap: clamp(0.5rem, 2vh, 2rem);
    padding: clamp(0.75rem, 2.5vh, 2rem) var(--gutter) clamp(1rem, 3vh, 3rem);
    background: var(--rhodonite-950); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s 0.3s;
  }
  .nav { z-index: 2; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
    /* Las ocho secciones tienen que caber sin desplazar: el tamaño sigue al alto. */
    font-size: clamp(1.05rem, 3.1vh, 1.6rem);
    padding: clamp(0.3rem, 1.1vh, 0.7rem) 0; border-bottom: 1px solid var(--rule-dark);
  }
  .nav__list a::after { display: none; }
  .nav__list a[aria-current="page"] { color: var(--coral); }
  .nav__cta a { justify-content: flex-start; margin-top: clamp(0.5rem, 1.5vh, 1rem); padding: 0.7rem 1.1em; border-bottom: 0; color: #fff; }
  .nav__cta a[aria-current="page"] { color: #fff; }
  .nav .btn { min-height: clamp(42px, 6vh, 52px); font-size: clamp(0.9rem, 2.2vh, 1rem); }
  @supports (height: 100dvh) {
    .nav { max-height: calc(100dvh - var(--header-h)); }
  }
  body.nav-open { overflow: hidden; }
}

/* ---------- Hero (video del sitio actual) ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  color: var(--on-dark); background: var(--rhodonite-950); overflow: hidden; isolation: isolate;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(28, 27, 38, 0.6) 0%, rgba(28, 27, 38, 0.15) 28%, rgba(28, 27, 38, 0.45) 62%, rgba(28, 27, 38, 0.9) 100%),
    linear-gradient(90deg, rgba(28, 27, 38, 0.78) 0%, rgba(28, 27, 38, 0.2) 70%);
}
.hero__inner { padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(4rem, 12vh, 8rem); }
.hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); max-width: 18ch; margin-bottom: 0.45em; }
.hero h1 .line { display: block; }
.hero__lead { font-size: var(--step-1); color: var(--on-dark); max-width: 44ch; margin-bottom: 0; font-weight: 350; font-stretch: 118%; }
.hero .btn-row { margin-top: 2.25rem; }
.video-toggle {
  position: absolute; right: var(--gutter); bottom: clamp(1.25rem, 3vw, 2rem); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(28, 27, 38, 0.55); color: var(--on-dark);
  border: 1px solid var(--rule-dark); padding: 0.45rem 0.8rem; min-height: 40px; cursor: pointer; font-size: 0.8rem;
}
.video-toggle svg { width: 14px; height: 14px; }

/* Encabezado de páginas internas */
.page-hero {
  position: relative; color: var(--on-dark); background: var(--rhodonite-950);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem)); padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden; isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img, .page-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(28, 27, 38, 0.95) 0%, rgba(28, 27, 38, 0.78) 45%, rgba(28, 27, 38, 0.35) 100%);
}
.page-hero h1 { font-size: var(--step-5); max-width: 16ch; }
.page-hero .lead { color: var(--on-dark-soft); }
.page-hero .btn-row { margin-top: 1.75rem; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; color: var(--on-dark-soft); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--on-dark); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); color: var(--on-dark-soft); }
.page-hero__meta b { color: var(--on-dark); font-weight: 600; }

/* ---------- Encabezados de sección ---------- */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); max-width: 46rem; }
.section-head h2 { margin: 0 0 0.6rem; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: var(--step-1); font-weight: 350; font-stretch: 115%; }
.dark .section-head p { color: var(--on-dark-soft); }

/* ---------- Parches de misión ---------- */
.patch { width: 100%; height: auto; overflow: visible; }
.patch text { font-family: var(--font-text); font-stretch: 100%; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Manifiesto de lanzamiento ---------- */
.manifest { width: 100%; border-collapse: collapse; }
.manifest caption { text-align: left; padding-bottom: 1rem; color: var(--ink-soft); }
.manifest th {
  text-align: left; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1.5px solid currentColor;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 100%;
  color: var(--ink-soft); white-space: nowrap;
}
.manifest td { padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.manifest tr:last-child td { border-bottom: 0; }
.manifest__patch { width: 76px; }
.manifest__patch .patch { width: 60px; height: 60px; }
.manifest__code { font-stretch: 100%; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manifest__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.01em; display: block; }
.manifest__sub { color: var(--ink-soft); font-size: 0.92rem; }
.manifest__date { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.manifest__t { display: block; color: var(--ink-soft); font-weight: 500; font-size: 0.85rem; }
.manifest__action { text-align: right; white-space: nowrap; }
.manifest__action .btn { min-height: 44px; font-size: 0.9rem; }
.status {
  display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.82rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.status::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: currentColor; flex: none; }
.status--go { color: #1f7a4d; }
.status--hold { color: var(--red); }
.status--soon { color: var(--ink-soft); }
.dark .manifest th { color: var(--on-dark-soft); }
.dark .manifest td { border-color: var(--rule-dark); }
.dark .manifest__sub, .dark .manifest__t { color: var(--on-dark-soft); }
.dark .status--go { color: #6fd3a0; }
.dark .status--hold { color: var(--coral); }
.dark .status--soon { color: var(--on-dark-soft); }
@media (max-width: 860px) {
  .manifest thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .manifest, .manifest tbody, .manifest tr, .manifest td { display: block; width: 100%; }
  .manifest tr {
    display: grid; grid-template-columns: 64px 1fr; gap: 0.35rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule);
  }
  .dark .manifest tr { border-color: var(--rule-dark); }
  .manifest td { padding: 0; border: 0; }
  .manifest__patch { grid-row: span 4; width: auto; }
  .manifest__patch .patch { width: 56px; height: 56px; }
  .manifest__action { text-align: left; margin-top: 0.6rem; }
  .manifest__date { white-space: normal; }
}

/* ---------- Programas abiertos ---------- */
.programs { list-style: none; border-top: 1.5px solid currentColor; }
.program { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 1rem 2rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.program .patch { width: 56px; height: 56px; }
.program__logo { width: 56px; height: auto; }
.program h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); margin: 0 0 0.25rem; }
.program h3 a { text-decoration: none; }
.program h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }
.program p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.program__t { color: var(--red); white-space: nowrap; grid-column: 4; min-width: 132px; }
.program .btn { min-width: 132px; grid-column: 4; }
.program .offer__estado { grid-column: 4; text-align: right; font-size: 0.85rem; }
@media (max-width: 760px) {
  .program .offer__estado { grid-column: 2; text-align: left; margin-top: 0.5rem; }
  .program { grid-template-columns: 48px 1fr; gap: 0.5rem 1rem; align-items: start; }
  .program .patch { width: 48px; height: 48px; grid-row: span 3; }
  .program__logo { width: 48px; grid-row: span 3; }
  .program__t, .program .btn { grid-column: 2; justify-self: start; }
  .program .btn { margin-top: 0.5rem; }
}

/* ---------- Compuertas (ciclo de revisión NASA SE) ---------- */
.gates { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: relative; counter-reset: gate; }
.gates::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--rule); }
.dark .gates::before { background: var(--rule-dark); }
.gates::after {
  content: ""; position: absolute; left: 0; top: 11px; height: 2px; width: 100%; background: var(--burn);
  transform: scaleX(var(--progress, 1)); transform-origin: left; transition: transform 1.6s var(--ease-out);
}
.gate { position: relative; padding: 2.75rem 2rem 0 0; }
.gate::before {
  content: ""; position: absolute; left: 1px; top: 2px; width: 18px; height: 18px; transform: rotate(45deg);
  background: var(--paper); border: 2px solid var(--red); z-index: 1;
}
.dark .gate::before { background: var(--rhodonite-900); border-color: var(--coral); }
.dark--mid .gate::before { background: var(--rhodonite); }
.gate--milestone::before { background: var(--red); }
.dark .gate--milestone::before { background: var(--coral); }
.gate__code { display: block; color: var(--red); margin-bottom: 0.35rem; }
.dark .gate__code { color: #ec9a70; } /* coral aclarado: el coral puro no llega a 4.5:1 sobre rhodonite */
.gate h3, .gate h4 { font-size: 1.2rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.gate p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.dark .gate p { color: var(--on-dark-soft); }
.gate ul { list-style: none; margin-top: 0.75rem; display: grid; gap: 0.25rem; font-size: 0.86rem; color: var(--ink-soft); }
.dark .gate ul { color: var(--on-dark-soft); }
@media (max-width: 900px) {
  .gates { grid-template-columns: 1fr; gap: 0; }
  .gates::before, .gates::after { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: 100%; }
  .gates::after { transform: scaleY(var(--progress, 1)); transform-origin: top; }
  .gate { padding: 0 0 2rem 2.75rem; }
  .gate::before { top: 3px; left: 1px; }
}

/* ---------- Divisiones editoriales ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.split__media { grid-column: 1 / span 6; position: relative; }
.split__body { grid-column: 8 / span 5; }
.split--flip .split__media { grid-column: 7 / span 6; order: 2; }
.split--flip .split__body { grid-column: 1 / span 5; }
.split--wide .split__media { grid-column: 1 / span 7; }
.split--wide .split__body { grid-column: 8 / span 5; }
.split--flip.split--wide .split__media { grid-column: 6 / span 7; }
.split--flip.split--wide .split__body { grid-column: 1 / span 5; }
.split--even { align-items: start; }
.split--even .split__media { grid-column: 1 / span 5; }
.split--even .split__body { grid-column: 7 / span 6; }
@media (max-width: 900px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split__media, .split__body, .split--even .split__media, .split--even .split__body, .split--flip .split__media, .split--flip .split__body, .split--wide .split__media, .split--wide .split__body, .split--flip.split--wide .split__media, .split--flip.split--wide .split__body { grid-column: auto; order: 0; }
}
.frame { margin: 0; position: relative; overflow: hidden; background: var(--rhodonite-800); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); aspect-ratio: var(--ratio, 4 / 3); }
.frame figcaption, .caption { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; font-stretch: 100%; }
.dark .caption { color: var(--on-dark-soft); }

.checklist { list-style: none; display: grid; gap: 0.6rem; margin: 1.25rem 0 0; }
.checklist li { display: grid; grid-template-columns: 14px 1fr; gap: 0.75rem; align-items: baseline; }
.checklist li::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg) translateY(-2px); background: var(--red); }
.dark .checklist li::before { background: var(--coral); }

/* ---------- Registro técnico (hojas de especificación) ---------- */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 190px)), 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); border-top: 1.5px solid currentColor; margin: 0; }
.spec > div { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.dark .spec > div { border-color: var(--rule-dark); }
.spec dt { color: var(--ink-soft); margin-bottom: 0.25rem; }
.dark .spec dt { color: var(--on-dark-soft); }
.spec dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.spec--stack { --min: 100%; }

/* ---------- Sede en Japón (logotipo ODP) ---------- */
.sede { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.sede a { flex: none; }
.sede img { display: block; width: clamp(150px, 16vw, 210px); height: auto; mix-blend-mode: multiply; }
.sede p { margin: 0; flex: 1 1 16rem; color: var(--ink-soft); font-size: var(--step-1); }
.sede .data { display: block; margin-bottom: 0.4rem; }
.sede b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.4rem; }

/* ---------- Rutas de colaboración (índice de misiones) ---------- */
.routes { border-top: 1.5px solid currentColor; }
.route {
  display: grid; grid-template-columns: 80px minmax(180px, 16rem) minmax(0, 1fr) auto; gap: 1rem 2.5rem; align-items: center;
  padding: 1.75rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; position: relative;
}
.dark .route { border-color: var(--rule-dark); }
.route .patch { width: 64px; height: 64px; transition: transform 0.5s var(--ease-out); }
.route__logo { width: 64px; height: auto; }
.route h3 { margin: 0; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
.route p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.dark .route p { color: var(--on-dark-soft); }
.route__go { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1.5px solid currentColor; transition: background-color 0.3s, color 0.3s; }
.route__go svg { width: 20px; height: 20px; }
.route:hover .patch { transform: rotate(-12deg) scale(1.04); }
.route:hover .route__go { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 760px) {
  .route { grid-template-columns: 52px 1fr; gap: 0.25rem 1rem; padding: 1.25rem 0; align-items: start; }
  .route .patch { width: 52px; height: 52px; grid-row: span 2; }
  .route__logo { width: 52px; grid-row: span 2; }
  .route p { grid-column: 2; }
  .route__go { display: none; }
}

/* ---------- Mosaico de capacidades (índice numerado solo donde la secuencia informa) ---------- */
.pillars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.pillar { background: var(--rhodonite-900); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.75rem; grid-column: span 2; min-height: 100%; }
.pillar--wide { grid-column: span 3; }
.pillar h3 { margin: 0; font-size: 1.4rem; }
.pillar p { margin: 0; color: var(--on-dark-soft); font-size: 0.97rem; }
.pillar .checklist { font-size: 0.92rem; color: var(--on-dark-soft); margin-top: auto; padding-top: 0.75rem; }
.pillar__icon { width: 44px; height: 44px; color: var(--coral); }
.pillar--media { padding: 0; position: relative; overflow: hidden; }
.pillar--media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar, .pillar--wide { grid-column: span 1; }
}
@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
}

/* Íconos de trazo propio */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Beneficios en columnas con regla ---------- */
.ledger { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.ledger__item { border-top: 1.5px solid currentColor; padding-top: 1.25rem; padding-bottom: 2rem; }
.ledger__item h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.ledger__item p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.dark .ledger__item p { color: var(--on-dark-soft); }
.ledger__item .checklist { font-size: 0.93rem; color: var(--ink-soft); }
.dark .ledger__item .checklist { color: var(--on-dark-soft); }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ledger { grid-template-columns: 1fr; } }

/* ---------- Pruebas (credenciales verificables) ---------- */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1.5px solid currentColor; }
.proof__item { padding: 1.4rem 1.25rem 1.4rem 0; }
.proof__item + .proof__item { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.dark .proof__item + .proof__item { border-color: var(--rule-dark); }
.proof__value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1; display: block; margin-bottom: 0.4rem; }
.proof__label { font-size: 0.92rem; color: var(--ink-soft); display: block; max-width: 24ch; }
.dark .proof__label { color: var(--on-dark-soft); }
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof__item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* ---------- Galería de franja ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.strip figcaption { font-size: 0.85rem; margin-top: 0.5rem; color: var(--ink-soft); }
.dark .strip figcaption { color: var(--on-dark-soft); }
@media (max-width: 700px) { .strip { grid-auto-columns: 82%; } }

/* ---------- Tarjeta de producto (tienda) ---------- */
.offer { display: grid; grid-template-columns: 120px 1fr auto; gap: 1.25rem 2rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.offer .patch { width: 104px; height: 104px; }
.offer__logo { width: 104px; height: auto; }
.offer h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.offer p { color: var(--ink-soft); margin-bottom: 0.75rem; }
.offer__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--ink-soft); }
.offer__buy { text-align: right; min-width: 230px; }
.offer__price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1; display: block; }
.offer__price--texto { font-size: var(--step-2); letter-spacing: -0.02em; }
.offer__tax { display: block; font-size: 0.85rem; color: var(--ink-soft); margin: 0.35rem 0 1rem; }
.offer__estado { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.offer__estado b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; color: var(--red); }
.offer__estado--oscuro { font-size: 1rem; color: var(--on-dark-soft); }
.offer__estado--oscuro b { font-size: var(--step-2); color: var(--coral); }
.offer__estado + .btn { margin-top: 1rem; }
.offer__note { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; max-width: 30ch; margin-left: auto; }
.qty { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.qty input { width: 4.5rem; min-height: 44px; padding: 0.4rem 0.6rem; border: 1.5px solid var(--rule); background: #fff; }
@media (max-width: 760px) {
  .offer { grid-template-columns: 72px 1fr; }
  .offer .patch { width: 72px; height: 72px; }
  .offer__logo { width: 72px; }
  .offer__buy { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .offer__note { margin-left: 0; }
}

/* ---------- Formularios ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label, .field legend { font-size: 0.9rem; font-weight: 600; font-stretch: 105%; }
.field .hint { font-size: 0.82rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 0.9rem; border: 1.5px solid rgba(56, 55, 76, 0.35); background: #fff; border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s; font-stretch: 105%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field .input--code { width: 8rem; max-width: 100%; font-family: "Twemoji Country Flags", var(--font-text); font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--rhodonite); box-shadow: 0 0 0 3px rgba(227, 113, 61, 0.35); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field .error { color: var(--red); font-size: 0.85rem; font-weight: 600; }
.dark .field input, .dark .field select, .dark .field textarea { background: var(--rhodonite-800); border-color: rgba(241, 236, 228, 0.28); color: var(--on-dark); }
.dark .field input:focus, .dark .field select:focus, .dark .field textarea:focus { border-color: var(--coral); }
.dark .field .hint { color: var(--on-dark-soft); }
.dark .field .error { color: #ff9a8a; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; border: 1.5px solid rgba(56, 55, 76, 0.35); font-size: 0.92rem; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.choice input:checked + span { background: var(--rhodonite); color: var(--on-dark); border-color: var(--rhodonite); }
.choice input:focus-visible + span { outline: 2px solid var(--poppy); outline-offset: 2px; }
.dark .choice span { border-color: rgba(241, 236, 228, 0.3); }
.dark .choice input:checked + span { background: var(--coral); color: var(--rhodonite-950); border-color: var(--coral); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; font-size: 0.88rem; align-items: start; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; padding: 1rem 1.25rem; font-weight: 500; display: none; }
.form-status.is-ok { display: block; background: #e3f3ea; color: #174d33; }
.form-status.is-error { display: block; background: #fbe4e4; color: #7c1822; }
.dark .form-status.is-ok { background: #183a2b; color: #bff0d5; }
.dark .form-status.is-error { background: #4a1a22; color: #ffd4d4; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* ---------- Preguntas frecuentes ---------- */
.faq { border-top: 1.5px solid currentColor; }
.faq details { border-bottom: 1px solid var(--rule); }
.dark .faq details { border-color: var(--rule-dark); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 3rem 1.25rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .faq__a { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 72ch; }
.dark .faq .faq__a { color: var(--on-dark-soft); }

/* ---------- Llamado final ---------- */
.close-call { position: relative; overflow: hidden; }
.close-call__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.close-call h2 { margin: 0; max-width: 16ch; }
.close-call p { color: rgba(255, 255, 255, 0.92); }
.close-call__mark { position: absolute; right: -4%; bottom: -18%; width: min(560px, 55vw); opacity: 0.16; pointer-events: none; }
.burn-field .btn { --bg: var(--rhodonite-950); --fg: #fff; }
.burn-field .btn:hover { --bg: #000; }
.burn-field .btn--ghost { --bg: transparent; --fg: #fff; }
.burn-field .btn--ghost:hover { --bg: rgba(255, 255, 255, 0.12); }
@media (max-width: 860px) { .close-call__grid { grid-template-columns: 1fr; } }

/* ---------- Pie de página ---------- */
.site-footer { background: var(--rhodonite-950); color: var(--on-dark-soft); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size: 0.93rem; }
/* Sección del inicio que enlaza al sitio de la empresa japonesa */
.gk-logo { display: block; height: 56px; width: auto; margin-bottom: 1.5rem; }
#japon .data { display: block; margin-bottom: 0.6rem; }
#japon .lead [lang="ja"] { font-stretch: 100%; font-weight: 400; }
.sede--texto { margin-top: 0; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); }
.sede--texto img { width: clamp(180px, 20vw, 260px); }
.sede--texto > div { flex: 1 1 22rem; max-width: 62ch; }
.sede--texto h2 { font-size: var(--step-3); margin-bottom: 0.9rem; }
.sede--texto p { flex: none; font-size: inherit; margin: 0 0 0.9rem; }
.sede--texto p:last-child { margin-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; }
.footer-grid h2 { font-size: 0.8rem; font-family: var(--font-text); font-stretch: 100%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 1rem; }
.footer-grid ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand img { height: 64px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p { max-width: 36ch; }
.footer-sede a { display: block; max-width: 168px; margin-bottom: 0.75rem; }
.footer-sede img { display: block; width: 100%; height: auto; padding: 10px 12px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.footer-sites { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.footer-sites b { color: var(--on-dark); font-weight: 600; display: block; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule-dark); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.85rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--on-dark); }
.social { display: flex; gap: 0.5rem; }
.social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-dark); }
.social a:hover { background: var(--rhodonite-800); color: var(--on-dark); }
.social svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Pie: botón con aspecto de enlace (preferencias de cookies) */
.link-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Banner de consentimiento de cookies */
.cookies {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 95;
  max-width: 640px; margin-inline: auto; padding: 1.1rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem;
  background: var(--rhodonite-950); color: var(--on-dark); border: 1px solid var(--rule-dark);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.cookies p { flex: 1 1 280px; margin: 0; font-size: 0.92rem; color: var(--on-dark-soft); }
.cookies a { color: var(--on-dark); }
.cookies__acciones { display: flex; gap: 0.6rem; }
.cookies .btn { min-height: 44px; font-size: 0.9rem; }
.cookies .btn--ghost { color: var(--on-dark); }

/* Barra fija móvil para acción institucional */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 0.5rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(28, 27, 38, 0.96); border-top: 1px solid var(--rule-dark);
  transform: translateY(110%); transition: transform 0.4s var(--ease-out);
}
.dock .btn { flex: 1; min-height: 46px; font-size: 0.9rem; padding-inline: 0.8rem; }
.dock.is-visible { transform: none; }
.dock .btn--ghost { color: var(--on-dark); }
@media (max-width: 760px) { .dock { display: flex; } body.has-dock .site-footer { padding-bottom: 6rem; } }

/* ---------- Movimiento: ignición (un solo momento autoral) ---------- */
.js .ignite .line { overflow: hidden; }
.js .ignite .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.js .ignite.is-lit .line > span { transform: none; }
.js .ignite.is-lit .line:nth-child(2) > span { transition-delay: 0.12s; }
.js .ignite.is-lit .line:nth-child(3) > span { transition-delay: 0.24s; }
.ignite-rule { height: 3px; background: var(--burn); transform-origin: left; margin-top: 1.25rem; width: min(420px, 60%); }
.js .ignite-rule { transform: scaleX(0); transition: transform 1.6s 0.35s var(--ease-out); }
.js .is-lit .ignite-rule, .js .ignite.is-lit ~ .ignite-rule { transform: scaleX(1); }
.js [data-gates] .gates { --progress: 0; }
.js [data-gates].is-in .gates { --progress: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .ignite .line > span { transform: none; }
  .js .ignite-rule { transform: none; }
  .js [data-gates] .gates { --progress: 1; }
}

/* ---------- Bloques de contenido adicionales ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; }
.trio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.1rem; }
.trio h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.trio p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.dark .trio p { color: var(--on-dark-soft); }
.trio .data { display: block; color: var(--red); margin-bottom: 0.35rem; }
.dark .trio .data { color: var(--coral); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 2.5rem; } }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.duo h2, .duo h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.duo p { color: var(--ink-soft); }
.academy-logo { display: block; width: 100%; max-width: 500px; height: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Etiqueta japonesa breve, en la tipografía Mincho del sistema */
.jp-eyebrow {
  display: block; font-family: var(--font-jp); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.3em; color: var(--red); margin-bottom: 0.7rem;
}
.dark .jp-eyebrow { color: var(--coral); }
.paper-2 .jp-eyebrow, .paper-2 .jp-gloss { color: var(--red-deep); }

/* Tarjetas de Academy: el enlace queda al pie, alineado entre columnas */
.academy-card { display: flex; flex-direction: column; height: 100%; }
.academy-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.1rem; }
.academy-card__cta { margin-top: auto; padding-top: 1.25rem; min-height: 3.15rem; display: flex; align-items: center; }
.academy-card__cta.offer__estado { display: block; }
.academy-card__cta.offer__estado b { font-size: var(--step-1); }
.dark .duo p { color: var(--on-dark-soft); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

.route--static { cursor: default; grid-template-columns: 80px minmax(180px, 16rem) minmax(0, 1fr); }
.route--static:hover .patch { transform: none; }
@media (max-width: 760px) { .route--static { grid-template-columns: 52px 1fr; } }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-band h2 { font-size: var(--step-3); margin: 0 0 0.4rem; }
.cta-band p { margin: 0; color: var(--ink-soft); }
.dark .cta-band p, .burn-field .cta-band p { color: inherit; opacity: 0.9; }

.temario { margin-top: 1.25rem; }
.temario summary { cursor: pointer; font-weight: 650; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.temario ol { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; color: var(--ink-soft); }
.temario ol b { color: var(--ink); font-weight: 600; }
.req { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 70ch; }

.page-hero--plain { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Utilidades ---------- */
.mt-0 { margin-top: 0; }
.pt-0 { padding-top: clamp(1.5rem, 3vw, 3rem); }
.h-md { font-size: var(--step-3); }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.note { font-size: 0.88rem; color: var(--ink-soft); }
.dark .note { color: var(--on-dark-soft); }
.pill-pending { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.55rem; background: var(--paper-3); color: var(--ink-soft); }
.legal { max-width: 78ch; }
.legal h2 { font-size: var(--step-2); margin-top: 2.5em; }
.legal h3 { font-size: var(--step-1); margin-top: 1.75em; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1em; }
.legal li { margin-bottom: 0.4em; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal th { border-bottom: 1.5px solid currentColor; }

/* ==========================================================================
   MUNDO IKEBANA · Avantgard Pioneers (Osaka)
   Yeso pálido como fondo, líneas de pino (Rhodonite), tres acentos (Chinese Red)
   y el vacío activo (ma) como material de composición.
   ========================================================================== */
.ikebana {
  --plaster: #efe9df;
  --plaster-2: #e6ded1;
  --pine: #4b4a5e;
  --bronze: #3a2a2c;
  --iris: var(--red);
  background: var(--plaster);
  color: var(--rhodonite);
}
.ikebana .site-header:not(.is-solid) { color: var(--rhodonite); }
.ikebana .site-header:not(.is-solid) .nav__list a,
.ikebana .site-header:not(.is-solid) .nav-toggle { color: var(--rhodonite); }
/* El botón rojo conserva su texto blanco también sobre el encabezado claro */
.ikebana .site-header:not(.is-solid) .nav__cta a { color: #fff; }
.ikebana .site-header:not(.is-solid) .brand .logo-light { display: none; }
.ikebana .site-header:not(.is-solid) .brand .logo-dark { display: block; }
.brand .logo-dark { display: none; }
@media (max-width: 1080px) {
  .ikebana .nav .nav__list a { color: var(--on-dark); }
}

/* Encabezado tokonoma: el video es la pieza central de la alcoba */
.tokonoma {
  position: relative; max-width: 1440px; margin-inline: auto;
  padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.tokonoma__crumb { color: var(--ink-soft); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.alcove { display: grid; grid-template-columns: clamp(90px, 10%, 160px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(1rem, 3vw, 3rem); }
.alcove__side { grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 0.5rem; }
.alcove__side .tategaki { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); }
.hanko {
  font-family: var(--font-jp); font-weight: 500; font-size: 1.35rem; line-height: 1;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  color: #f7efe6; background: var(--iris); border-radius: 3px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(247, 239, 230, 0.35);
}
.branch { width: 100%; max-width: 120px; height: auto; margin-top: auto; overflow: visible; pointer-events: none; }
.branch__line { fill: none; stroke: var(--pine); stroke-width: 3.2; stroke-linecap: round; }
.branch__line--thin { stroke-width: 1.8; }
.branch__bloom { fill: var(--iris); }
/* Kakejiku tecnológico: silueta de rollo colgante japonés con materiales de misión */
.kakejiku { grid-column: 2; grid-row: 1; margin: 0; position: relative; padding-top: clamp(26px, 3vw, 40px); filter: drop-shadow(0 26px 30px rgba(28, 27, 38, 0.3)); }
/* Cable de suspensión con nodo luminoso */
.kakejiku__hang { position: absolute; top: 0; left: 30%; width: 40%; height: clamp(26px, 3vw, 40px); overflow: visible; }
.kakejiku__hang path { fill: none; stroke: var(--rhodonite-400); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kakejiku__node {
  position: absolute; top: 0; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -30%) rotate(45deg);
  background: var(--coral); box-shadow: 0 0 0 4px rgba(229, 133, 84, 0.18), 0 0 14px rgba(229, 133, 84, 0.6);
}
/* Montaje: seda Rhodonite con olas seigaiha trazadas como circuito */
.kakejiku__mount {
  position: relative;
  padding: clamp(40px, 5.5vw, 76px) clamp(14px, 2.2vw, 30px) clamp(34px, 4vw, 54px);
  background-color: #2a2939;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23e58554' stroke-opacity='.13' stroke-width='.7'%3E%3Cpath d='M0 14a14 14 0 0 1 28 0M5 14a9 9 0 0 1 18 0M10 14a4 4 0 0 1 8 0'/%3E%3Cpath d='M-14 7a14 14 0 0 1 28 0M-9 7a9 9 0 0 1 18 0M-4 7a4 4 0 0 1 8 0M14 7a14 14 0 0 1 28 0M19 7a9 9 0 0 1 18 0M24 7a4 4 0 0 1 8 0'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 0 0 1px rgba(241, 236, 228, 0.08);
}
/* Barra superior metálica */
.kakejiku__mount::before { content: ""; position: absolute; left: -4px; right: -4px; top: -5px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #b9b7c9, #5a5970 55%, #2c2b3b); }
/* Tiras colgantes como barras de LED */
.kakejiku__futai {
  position: absolute; top: 3px; left: 26%; width: clamp(8px, 0.9vw, 12px); height: clamp(30px, 4.6vw, 62px);
  background: repeating-linear-gradient(180deg, var(--coral) 0 3px, transparent 3px 6px);
  opacity: 0.85; box-shadow: 0 0 10px rgba(229, 133, 84, 0.35);
}
.kakejiku__futai--right { left: auto; right: 26%; }
/* Ichimonji reinterpretado: franjas con el degradado de ignición y esquinas de visor */
.kakejiku__panel { position: relative; padding: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-image: var(--burn) 1; }
.kakejiku__panel::before {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  --c: rgba(241, 236, 228, 0.75); --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px var(--l) no-repeat;
}
/* Rodillo de aluminio con remates anodizados */
.kakejiku__sheet { position: relative; margin-bottom: clamp(12px, 1.3vw, 18px); }
.kakejiku__roller { display: block; position: absolute; left: -1px; right: -1px; top: 100%; height: clamp(12px, 1.3vw, 18px); border-radius: 3px; background: linear-gradient(180deg, #c6c4d4 0%, #6d6b85 45%, #2c2b3b 100%); z-index: 1; }
.kakejiku__roller::before, .kakejiku__roller::after {
  content: ""; position: absolute; top: 50%; width: clamp(18px, 2vw, 26px); height: clamp(18px, 2vw, 26px); border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, #1c1b26 0 22%, var(--red) 24% 58%, var(--rhubarb) 60%);
  box-shadow: 0 0 0 1.5px #c6c4d4, 0 2px 4px rgba(0, 0, 0, 0.35);
}
.kakejiku__roller::before { left: calc(-1 * clamp(14px, 1.6vw, 20px)); }
.kakejiku__roller::after { right: calc(-1 * clamp(14px, 1.6vw, 20px)); }

.alcove__video { display: block; width: 100%; height: auto; aspect-ratio: 864 / 496; object-fit: contain; background: #2b1f21; }
.tokonoma__text {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-left: calc(clamp(90px, 10%, 160px) + clamp(1rem, 3vw, 3rem));
}
.tokonoma__text h1 { font-size: var(--step-5); margin: 0; max-width: 10ch; }
.tokonoma__text .lead { margin-bottom: 0; }
.tokonoma__season { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; color: var(--ink-soft); margin: 1.25rem 0 1.75rem; }
.tokonoma__season b { color: var(--rhodonite); }
.tategaki {
  writing-mode: vertical-rl; font-family: var(--font-jp); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: 0.35em; color: var(--rhodonite); line-height: 1; margin: 0;
}
.tategaki small { font-size: 0.42em; letter-spacing: 0.3em; color: var(--ink-soft); margin-top: 1.5em; display: inline-block; }

/* Movimiento: la rama crece una vez y el video emerge de la penumbra */
.js .branch__line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: grow 2.4s 0.3s var(--ease-out) forwards; }
.js .branch__bloom { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); animation: bloom 0.8s var(--ease-out) forwards; }
.js .branch__bloom:nth-of-type(1) { animation-delay: 1.8s; }
.js .branch__bloom:nth-of-type(2) { animation-delay: 2.1s; }
.js .branch__bloom:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes bloom { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .alcove { grid-template-columns: 1fr; }
  .alcove__side { display: none; }
  .kakejiku { grid-column: 1; }
  .tokonoma__text { grid-template-columns: 1fr; padding-left: 0; }
}

/* Despliegue del pergamino al cargar: la hoja se desenrolla con el peso del rodillo */
.kakejiku { --unroll: 2.1s; --unroll-ease: cubic-bezier(0.65, 0, 0.25, 1); transform-origin: 50% 0; }
.kakejiku__mount { clip-path: inset(-14px -14px -14px -14px); transition: clip-path var(--unroll) var(--unroll-ease); }
.kakejiku__roller { transition: top var(--unroll) var(--unroll-ease); }
.js .kakejiku:not(.is-open) .kakejiku__mount { clip-path: inset(-14px -14px 100% -14px); }
.js .kakejiku:not(.is-open) .kakejiku__roller { top: 4px; }
.js .kakejiku:not(.is-open) .alcove__video { opacity: 0; }
.alcove__video { transition: opacity 1.2s 0.6s var(--ease-out); }
.kakejiku.is-open { animation: sway 1.8s var(--unroll) ease-out; }
@keyframes sway { 0% { transform: rotate(0); } 30% { transform: rotate(0.45deg); } 60% { transform: rotate(-0.25deg); } 85% { transform: rotate(0.08deg); } 100% { transform: rotate(0); } }

/* Olas seigaiha muy tenues: aura oriental sin ruido visual */
.seigaiha {
  background-color: var(--plaster);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%234b4a5e' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
}
.seigaiha--deep { background-color: var(--plaster-2); }

/* Tres tallos: principal (shin), secundario (soe), de apoyo (hikae) */
.stems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2vw, 2rem); align-items: start; }
.stem { position: relative; }
.stem img { --ch: clamp(22px, 2.6vw, 36px); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%); }
.stem h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.stem p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
@media (max-width: 900px) {
  .stems { grid-template-columns: 1fr; }
}

.ma { padding-block: clamp(6rem, 12vw, 12rem); }
.ma__quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ma__quote p { grid-column: 6 / span 6; font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.025em; max-width: 22ch; margin: 0; }
.ma__quote .tategaki { grid-column: 3; justify-self: end; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); color: var(--iris); }
@media (max-width: 760px) { .ma__quote p { grid-column: 1 / -1; } .ma__quote .tategaki { grid-column: 1; grid-row: 1; justify-self: start; } }

/* Estaciones: semanas como crecimiento de la rama */
.seasons { position: relative; list-style: none; }
.season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem clamp(1rem, 2vw, 2rem); padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid rgba(58, 42, 44, 0.2); align-items: center; }
.season__when { grid-column: 1 / span 3; }
.season__when .data { color: var(--iris); display: block; margin-bottom: 0.3rem; }
.season__when b { font-family: var(--font-display); font-size: 1.05rem; }
.season__body { grid-column: 4 / span 5; }
.season__body h3 { margin-bottom: 0.4rem; }
.season__body p { color: var(--ink-soft); margin: 0; }
.season__img { grid-column: 10 / span 3; }
.season__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.season:nth-child(even) .season__img img { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); }
@media (max-width: 860px) {
  .season { grid-template-columns: 1fr 96px; }
  .season__when, .season__body { grid-column: 1; }
  .season__img { grid-column: 2; grid-row: 1 / span 2; }
}

.ikebana .ledger__item { border-top-color: var(--bronze); }
.ikebana .checklist li::before { background: var(--iris); border-radius: 50%; transform: none; }
.ikebana .field input, .ikebana .field select, .ikebana .field textarea { background: #fbf8f3; }
.ikebana .suiban { background: var(--bronze); color: #f3ede4; }
.ikebana .suiban .lead, .ikebana .suiban .note { color: #d6cbc4; }
.ikebana .suiban .field input, .ikebana .suiban .field select, .ikebana .suiban .field textarea { background: #4a3739; border-color: rgba(243, 237, 228, 0.3); color: #f3ede4; }
.ikebana .suiban .choice span { border-color: rgba(243, 237, 228, 0.35); }
.ikebana .suiban .choice input:checked + span { background: #f3ede4; color: var(--bronze); }
.ikebana .suiban .field .hint { color: #d6cbc4; }
.ikebana .suiban .form-status.is-ok { background: #203a2c; color: #c8f0d8; }
.ikebana .suiban .form-status.is-error { background: #5a1f27; color: #ffd6d6; }
.ikebana .site-footer { background: var(--rhodonite-950); }

/* ---------- Impresión ---------- */
@media print {
  .site-header, .dock, .video-toggle, .nav-toggle, .site-footer .social, form { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .rhodonite, .burn-field, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .hero__video, .page-hero__media { display: none; }
}

/* ==========================================================================
   Aplicación a Pioneers (formulario por pasos, mundo Ikebana)
   ========================================================================== */
.apply-hero { padding: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(2rem, 4vw, 3rem); }
.apply-hero .breadcrumb { color: var(--ink-soft); }
.apply-hero h1 { font-size: var(--step-4); max-width: 18ch; margin-bottom: 0.4em; }
.apply { padding-top: clamp(2.5rem, 5vw, 4rem); }
.wizard, .wizard__done { max-width: 860px; margin-inline: auto; background: #fbf8f3; padding: clamp(1.5rem, 4vw, 3.5rem); box-shadow: 0 30px 60px -40px rgba(58, 42, 44, 0.45); position: relative; }
.wizard::before, .wizard__done::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--burn); }
.wizard__steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; font-size: 0.82rem; color: var(--ink-soft); }
.wizard__steps li { display: flex; align-items: center; gap: 0.45rem; }
.wizard__steps .data { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1.5px solid currentColor; border-radius: 50%; flex: none; letter-spacing: 0; }
.wizard__steps li.is-current { color: var(--rhodonite); font-weight: 650; }
.wizard__steps li.is-current .data { background: var(--iris); border-color: var(--iris); color: #fff; }
.wizard__steps li.is-done .data { background: var(--rhodonite); border-color: var(--rhodonite); color: #fff; }
.wizard__progress { height: 3px; background: var(--paper-3); margin-bottom: clamp(2rem, 4vw, 2.75rem); overflow: hidden; }
.wizard__progress span { display: block; height: 100%; background: var(--burn); transform-origin: left; transform: scaleX(0.2); transition: transform 0.6s var(--ease-out); }
.wizard__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard__step + .wizard__step { margin-top: 3rem; }
.wizard.is-enhanced .wizard__step + .wizard__step { margin-top: 0; }
.wizard__legend { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; padding: 0; margin-bottom: 1.5rem; display: grid; gap: 0.35rem; outline: none; }
.wizard__legend .data { color: var(--iris); font-family: var(--font-text); font-size: var(--step--1); }
.wizard .field legend { font-size: 0.9rem; font-weight: 600; font-stretch: 105%; margin-bottom: 0.5rem; padding: 0; }
.wizard fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard .field:empty { display: block; }
.wizard .reveal { margin-top: -0.25rem; }
.wizard__nav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.wizard__nav [data-next], .wizard__nav [data-submit] { margin-left: auto; }
.wizard:not(.is-enhanced) [data-prev], .wizard:not(.is-enhanced) [data-next], .wizard:not(.is-enhanced) .wizard__steps, .wizard:not(.is-enhanced) .wizard__progress { display: none; }
.wizard__draft { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.wizard__draft button { background: none; border: 0; border-bottom: 1.5px solid currentColor; padding: 0; cursor: pointer; font-weight: 650; }
.wizard__done { text-align: center; display: grid; justify-items: center; gap: 1rem; outline: none; }
.wizard__done h2 { font-size: var(--step-3); margin: 0.5rem 0 0; }
.wizard__done .lead { margin: 0 auto 0.5rem; }
@media (max-width: 700px) {
  .wizard__steps { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .wizard__steps li { font-size: 0; gap: 0; }
  .wizard__steps .data { font-size: 0.75rem; }
  .wizard .field:empty { display: none; }
}

/* Recuadro de Pioneers: encabezado grande y un solo botón hacia la aplicación */
.apply-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(6rem, 13vw, 11rem);
  background-color: var(--bronze);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23f3ede4' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M24 12a24 24 0 0 1 48 0M32 12a16 16 0 0 1 32 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 120%, rgba(197, 41, 56, 0.45), transparent 60%);
}
.apply-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--burn); }
.apply-cta__inner { display: grid; justify-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.25rem); }
.apply-cta h2 { font-size: clamp(2.4rem, 1.6rem + 3.8vw, 5rem); color: #f7f1e8; margin: 0; max-width: 14ch; }
.apply-cta__seal { width: 3rem; height: 3rem; font-size: 1.8rem; }
.apply-cta__estado { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); letter-spacing: -0.01em; color: var(--coral); }
.apply-cta__btn { min-height: 60px; font-size: 1.1rem; padding-inline: 2rem 2.2rem; }

/* Aviso visible mientras el formulario está en modo de prueba */

/* Adjuntar archivo (CV) */
.file { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 0.5rem; border: 1.5px dashed rgba(56, 55, 76, 0.35); background: #fff; transition: border-color 0.2s, background-color 0.2s; }
.file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file__btn { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; background: var(--rhodonite); color: var(--on-dark); font-weight: 650; font-size: 0.9rem; }
.file__name { color: var(--ink-soft); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file:hover { border-color: var(--rhodonite); }
.file:focus-within { outline: 2px solid var(--poppy); outline-offset: 3px; }
.file.has-file { border-style: solid; border-color: #1f7a4d; background: #f1faf5; }
.file.has-file .file__name { color: #174d33; font-weight: 600; }
.file:has(input[aria-invalid="true"]) { border-color: var(--red); }
.apply-cta__btn:hover { --bg: var(--red-deep); }

/* ==========================================================================
   CARRUSEL DESTACADO — banda a sangre bajo las credenciales.
   El botón queda fijo; solo cambian la imagen y su texto.
   ========================================================================== */
.ros2-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 48vw, 580px);
  overflow: hidden;
  background-color: var(--rhodonite);
  color: var(--on-dark);
}

/* Imágenes */
.ros2-banner-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.ros2-banner-slide.is-activa { z-index: 1; opacity: 1; }

.ros2-banner-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.03);
  transition: transform 1s var(--ease-out);
}

/* Velo: legibilidad del texto sobre cualquier imagen */
.ros2-banner-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top,
      rgba(28, 27, 38, 0.94) 0%,
      rgba(28, 27, 38, 0.78) 32%,
      rgba(28, 27, 38, 0.34) 64%,
      rgba(28, 27, 38, 0.12) 100%),
    linear-gradient(to right,
      rgba(56, 55, 76, 0.72) 0%,
      rgba(56, 55, 76, 0.18) 55%,
      rgba(56, 55, 76, 0) 100%);
}

/* Capa que hace clicable toda la imagen (el CTA es el enlace accesible) */
.ros2-banner-capa { position: absolute; inset: 0; z-index: 3; }

/* Texto */
.ros2-banner-texto {
  position: relative;
  z-index: 4;
  max-width: 780px;
  padding: 0 var(--gutter) clamp(2.5rem, 5vw, 3.75rem);
  pointer-events: none;
}

/* Las dos fichas ocupan la misma celda: la más alta fija la altura,
   así el botón de abajo nunca se mueve al cambiar de imagen */
.ros2-banner-pila { display: grid; }

.ros2-banner-info {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.ros2-banner-info.is-activa { opacity: 1; transform: none; }

.ros2-banner-titulo {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 0.5em;
  text-wrap: balance;
}

.ros2-banner-descripcion {
  display: block;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--putty);
  max-width: 56ch;
  margin-bottom: 1.75rem;
}

/* El bloque de texto ignora el ratón; el CTA sí lo recibe */
.ros2-banner-accion { pointer-events: auto; }

/* Leyenda que sustituye al botón cuando la diapositiva aún no tiene destino.
   Misma altura que el botón, para que el bloque de texto no se mueva. */
.ros2-banner-proximamente {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  min-height: 48px;
  padding: 0.8em 1.4em;
  border: 1px solid rgba(241, 236, 228, 0.45);
  background-color: rgba(28, 27, 38, 0.35);
  backdrop-filter: blur(6px);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-stretch: 108%;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: default;
  /* Es seguro: mientras se muestra, la capa-enlace de la imagen está oculta */
  pointer-events: auto;
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    background-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

/* Franja de luz que cruza la píldora de izquierda a derecha */
.ros2-banner-proximamente::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  transform: translateX(-180%) skewX(-20deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

@media (hover: hover) {
  .ros2-banner-proximamente:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 133, 84, 0.85);
    background-color: rgba(28, 27, 38, 0.55);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(229, 133, 84, 0.35),
      0 0 22px rgba(229, 133, 84, 0.28);
  }
  .ros2-banner-proximamente:hover::after {
    animation: ros2-destello 0.9s var(--ease-out);
  }
  .ros2-banner:hover .ros2-banner-slide.is-activa .ros2-banner-imagen {
    transform: scale(1.09);
  }
  .ros2-banner:hover .ros2-banner-accion svg { transform: translateX(3px); }
}

@keyframes ros2-destello {
  from { transform: translateX(-180%) skewX(-20deg); }
  to   { transform: translateX(320%) skewX(-20deg); }
}

/* Controles */
.ros2-banner-controles {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 5vw, 3.75rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ros2-banner-flecha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(241, 236, 228, 0.35);
  border-radius: 50%;
  background-color: rgba(28, 27, 38, 0.45);
  backdrop-filter: blur(6px);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.ros2-banner-flecha-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ros2-banner-flecha-btn:hover {
  background-color: var(--red);
  border-color: var(--red);
}
.ros2-banner-flecha-btn:focus-visible,
.ros2-banner-punto:focus-visible,
.ros2-banner-accion:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.ros2-banner-puntos { display: flex; align-items: center; gap: 4px; }

.ros2-banner-punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ros2-banner-punto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(241, 236, 228, 0.45);
  transition: background-color 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
.ros2-banner-punto:hover::before { background-color: rgba(241, 236, 228, 0.8); }
.ros2-banner-punto[aria-current="true"]::before {
  width: 26px;
  background-color: var(--coral);
}

@media (max-width: 767px) {
  .ros2-banner { min-height: 480px; }
  .ros2-banner-titulo { font-size: var(--step-3); }
  .ros2-banner-accion { width: 100%; }
  /* Los controles suben para no estorbar al botón a ancho completo */
  .ros2-banner-controles {
    top: 20px;
    right: var(--gutter);
    bottom: auto;
    gap: 8px;
  }
  .ros2-banner-flecha-btn { width: 44px; height: 44px; }
  .ros2-banner-punto { width: 30px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ros2-banner-slide,
  .ros2-banner-info,
  .ros2-banner-imagen { transition: none; }
  .ros2-banner-info { transform: none; }
  .ros2-banner:hover .ros2-banner-slide.is-activa .ros2-banner-imagen { transform: scale(1.03); }
  .ros2-banner-proximamente:hover::after { animation: none; }
}

/* Infraestructura internacional: glosas en japonés junto a cada dato */
.jp-gloss { font-family: var(--font-jp); font-weight: 500; letter-spacing: 0.15em; color: var(--red); margin-left: 0.35em; text-transform: none; }
.dark .jp-gloss { color: var(--coral); }

/* ---------- Carrusel de galería (Nosotros) ---------- */
.carrusel { position: relative; }
/* La galería ocupa todo el ancho de la banda y acerca lo que viene debajo */
.seccion-galeria { padding-block: calc(var(--section) * 0.45) 0; }
.seccion-galeria + .section { padding-top: clamp(3rem, 6vw, 5rem); }
/* La proporción sigue a las fotos de la galería, casi todas panorámicas */
.carrusel__pista { position: relative; width: 100%; aspect-ratio: 12 / 5; max-height: min(70vh, 640px); background: var(--rhodonite-800); }
.carrusel .carrusel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.carrusel__slide.is-activa { opacity: 1; }
.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; cursor: pointer; background: rgba(56, 55, 76, 0.7); color: #fff;
  font-size: 1.9rem; line-height: 1; transition: background-color 0.25s var(--ease-out);
}
.carrusel__flecha:hover { background: rgba(56, 55, 76, 0.95); }
.carrusel__flecha--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.carrusel__flecha--next { right: clamp(0.5rem, 2vw, 1.25rem); }
.carrusel__puntos { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 2; display: flex; gap: 0.6rem; }
.carrusel__punto {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.5); transition: background-color 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
.carrusel__punto:hover { background: rgba(255, 255, 255, 0.85); }
.carrusel__punto.is-activa { background: var(--coral); width: 30px; }
@media (max-width: 700px) { .carrusel__pista { aspect-ratio: 3 / 2; } .carrusel__flecha { width: 40px; height: 40px; font-size: 1.5rem; } }

/* ---------- Banda de video a todo el ancho (Pioneers) ---------- */
.banda-video { padding-bottom: 0; }
.banda-video .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* La banda toma la proporción exacta del video para no recortarlo */
.video-banda {
  display: block; width: 100%; aspect-ratio: 1280 / 498;
  object-fit: cover; background: var(--rhodonite-800);
}
.banda-video + .section { padding-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 700px) { .video-banda { aspect-ratio: 16 / 9; object-fit: cover; } }

/* ---------- Aval del patrocinador de seguros ---------- */
.aval {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem); padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--rhodonite-900); color: var(--on-dark);
  --chamfer: clamp(22px, 3.5vw, 36px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.aval__rol { color: var(--on-dark-soft); margin: 0 0 0.3rem; }
.aval__leyenda { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.3; }
/* El logotipo del patrocinador va en su color original, por eso el fondo oscuro */
.aval__enlace { flex: none; display: block; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.aval__enlace:hover { opacity: 0.85; transform: translateY(-2px); }
.aval__logo { display: block; width: auto; height: clamp(88px, 11vw, 124px); }

/* Una nota al pie de una lista necesita aire para no leerse como un renglón más */
.checklist + .note { margin-top: 0.9rem; }

/* Los nombres en japonés no se parten a media palabra (la tategaki va aparte, es vertical) */
span[lang="ja"]:not(.tategaki), i[lang="ja"] { white-space: nowrap; }

/* Capturas del simulador: se ven completas, sin recorte, sobre fondo oscuro */
.demo-video video { object-fit: contain; background: var(--rhodonite-950); }
.demo-video figcaption { margin-top: 0.75rem; }
.demo-video figcaption b { color: var(--ink); font-weight: 600; }

/* Sobre el degradado de marca todo el texto hereda el blanco de la sección */
.burn-field .section-head p, .burn-field .ledger__item p, .burn-field .ledger__item .checklist { color: inherit; }
.burn-field .ledger__item { border-top-color: rgba(255, 255, 255, 0.55); }

/* Entregable de cada semana del temario, al pie de su tarjeta */
.entregable { margin: 1rem 0 0; font-size: 0.93rem; }
.entregable .data { display: block; color: var(--ink-soft); margin-bottom: 0.2rem; }
.dark .entregable .data { color: var(--on-dark-soft); }

/* Precio del programa */
.precio { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.precio b { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1; }
.precio span { color: var(--on-dark-soft); font-size: var(--step-1); }

/* Aviso de disponibilidad. Lleva data-expires, así que se oculta solo al vencer */
.urgencia {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  color: var(--red-deep); font-weight: 600; font-size: 0.95rem; line-height: 1.35;
}
.urgencia::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--red); }
.ledger + .urgencia { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* El cuadro de la nota es clicable: la foto lleva al medio que la publicó */
.nota-foto { margin-bottom: clamp(2rem, 4vw, 3rem); }
.nota-foto figcaption { margin-top: 0.75rem; color: var(--on-dark-soft); }
.frame__enlace { display: block; }
.frame__enlace img { transition: transform 0.6s var(--ease-out); }
.frame__enlace:hover img, .frame__enlace:focus-visible img { transform: scale(1.03); }

/* Párrafo que rompe el ritmo del cuerpo de texto para destacar una idea */
p.contrasta {
  margin: 1.5rem 0; padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 3px solid var(--red);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
}

/* La sección del patrocinador cierra más corta para no dejar un hueco debajo del cuadro */
.section--cierre-corto { padding-bottom: calc(var(--section) * 0.4); }
.aval + .note { margin-top: 1rem; }

/* ---------- Identidad de Pioneers: título y mascota guía ---------- */
.titulo-letras { max-width: none; }
.titulo-letras img { display: block; width: min(100%, 22rem); height: auto; }

/* Orbi acompaña la lectura: aparece en el margen, nunca sobre el texto */
.orbi-guia {
  /* El margen del contenedor centrado, para que Orbi quede alineado con el texto */
  --margen: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  position: absolute; right: var(--margen); width: clamp(76px, 9vw, 128px); height: auto; z-index: 1;
  pointer-events: none; user-select: none;
}
.js .orbi-guia { animation: orbi-flota 6s ease-in-out infinite; }
@keyframes orbi-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.orbi-guia--saludo { position: static; display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.orbi-guia--proyecto { top: clamp(1.5rem, 4vw, 3.5rem); transform: scaleX(-1); }
.js .orbi-guia--proyecto { animation-name: orbi-flota-espejo; }
@keyframes orbi-flota-espejo { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-10px); } }
.orbi-guia--familias { top: clamp(1.5rem, 4vw, 3.5rem); }
.orbi-guia--cierre { width: clamp(64px, 7vw, 110px); bottom: clamp(0.75rem, 2vw, 2rem); }
@media (prefers-reduced-motion: reduce) { .js .orbi-guia { animation: none; } }
@media (max-width: 860px) { .orbi-guia--proyecto, .orbi-guia--familias, .orbi-guia--saludo { display: none; } }

/* Visitas técnicas: cuatro clips cortos, en silencio y en bucle */
.visitas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.visita { margin: 0; }
.visita__video {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--rhodonite-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.visita figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }
/* Los dos primeros clips son verticales: el encuadre sube para centrar al robot */
.visita--alto .visita__video { object-position: center 25%; }
@media (max-width: 760px) { .visitas { grid-template-columns: 1fr; } }

/* Foto de la ciudad en el bloque para familias */
.fam-foto { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fam-foto figcaption { margin-top: 0.75rem; }

/* ---------- Academy: visión y ventanas de programa ---------- */
.vision { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.vision__logo { width: 100%; max-width: 460px; height: auto; justify-self: center; }
.vision--solo { margin-bottom: 0; }
.vision__texto h2 { margin-bottom: 1rem; }
.vision__texto .lead { color: var(--ink); margin-bottom: 1.25rem; }
.vision__texto p:not(.lead) { color: var(--ink-soft); }
.vision__principios strong { display: block; margin-top: 0.6rem; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .vision { grid-template-columns: 1fr; }
  .vision__logo { max-width: 320px; justify-self: start; }
}

/* Cada programa es una ventana entera clicable: imagen, insignia y ficha */
.ventanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.ventana {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); box-shadow: var(--shadow-1);
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.ventana__media { display: block; border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rhodonite-800); }
.ventana__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.ventana .patch {
  width: 88px; height: 88px; margin: -44px 0 0 clamp(1.25rem, 3vw, 2rem); position: relative; z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(28, 27, 38, 0.35)); transition: transform 0.5s var(--ease-out);
}
.ventana__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.25rem clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 3vw, 2.25rem); }
.ventana__meta { color: var(--ink-soft); margin-bottom: 0.6rem; }
.ventana h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin: 0 0 0.75rem; }
.ventana__texto { color: var(--ink-soft); margin: 0 0 1.75rem; }
.ventana__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.ventana__estado { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); }
.ventana__estado::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; }
.ventana__estado--abierto { color: var(--red-deep); font-weight: 600; }
.ventana__estado--abierto::before { background: var(--red); border-color: var(--red); }
.ventana__ir { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; }
.ventana__ir svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease-out); }
.ventana:hover, .ventana:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ventana:hover .ventana__media img, .ventana:focus-visible .ventana__media img { transform: scale(1.04); }
.ventana:hover .patch { transform: rotate(-12deg) scale(1.04); }
.ventana:hover .ventana__ir { color: var(--red-deep); }
.ventana:hover .ventana__ir svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .ventana, .ventana__media img, .ventana .patch { transition: none; }
  .ventana:hover, .ventana:focus-visible { transform: none; }
}
@media (max-width: 760px) { .ventanas { grid-template-columns: 1fr; } .ventana .patch { width: 72px; height: 72px; margin-top: -36px; } }

/* ---------- Cuenta regresiva (webinar) ---------- */
.cuenta { margin-top: 1.75rem; }
.cuenta[hidden], .cuenta__cifras[hidden] { display: none; }
.cuenta__titulo { margin: 0 0 0.6rem; color: var(--coral); }
.cuenta__cifras { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1.5vw, 0.85rem); }
.cuenta__cifras > span {
  display: flex; flex-direction: column; align-items: center; min-width: 4.4rem;
  padding: 0.7rem 0.6rem 0.55rem; border: 1px solid var(--rule-dark); background: rgba(28, 27, 38, 0.6);
}
.cuenta__cifras b {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.cuenta__cifras i { font-style: normal; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); }
.cuenta + .btn-row { margin-top: 1.5rem; }
.aviso-webinar[hidden] { display: none; }
.aviso-webinar .duo { align-items: center; }
.aviso-webinar__meta { margin: 0 0 0.75rem; color: var(--coral); }
.aviso-webinar .cuenta { margin-top: 0; }
.dark .link-arrow { color: var(--on-dark); }

/* ---------- Ponente (webinar) ---------- */
.ponente { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.ponente h3 { margin-bottom: 0.3rem; }
.ponente__foto {
  --cut: clamp(18px, 2.4vw, 28px);
  flex: none; width: clamp(130px, 30vw, 200px); aspect-ratio: 4 / 5; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.ponente__foto--vacia {
  display: grid; place-items: center; background: var(--rhodonite); color: var(--coral);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.02em;
}
.ponente__cargo { margin: 0; color: var(--red-deep); }