/* ==========================================================================
   site.css — PMUS Digital · bloques específicos (BEM). Mundo v2 «Escenas de ciudad».
   Suelo claro, fotografía a sangre en paneles con margen, capítulos marinos,
   titulares enormes a dos tonos, tarjetas que se apilan. Solo consume tokens.
   ========================================================================== */

/* ---------- Intro de marca ---------- */
.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center; background: var(--brand-navy); color: var(--brand-aqua); }

.is-settled .intro, .no-js .intro { display: none; }

/* ---------- Cabecera: dos píldoras dentro del panel ----------
   Como en kora.framer.media: la navegación y la llamada a la acción son dos píldoras
   independientes, alineadas con el lienzo y separadas 10 px del borde interior del panel.
   Ninguna ocupa todo el ancho ni se sale del panel. */
.header { position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-header); padding-top: calc(var(--frame) + 10px); pointer-events: none; }
.header__inner {
  width: min(100% - 2 * var(--frame) - 20px, calc(var(--canvas-max) - 20px));
  margin-inline: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
}
.header__pill {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-5);
  min-height: 60px; padding: 0 24px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .94); color: var(--brand-navy);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--motion-base), background var(--motion-base);
}
.header.is-scrolled .header__pill, .header.is-scrolled .header__cta { box-shadow: var(--shadow-md); }
.header.is-scrolled .header__pill { background: rgba(255, 255, 255, .97); }
.header__cta {
  pointer-events: auto; flex: none; min-height: 60px; padding: 0 26px; border-radius: var(--radius-full);
  background: var(--brand-navy); color: var(--brand-aqua); border: 0; box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-decoration: none;
  display: inline-flex; align-items: center;
}
.header__cta:hover { background: #232A5E; color: var(--brand-aqua); }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.brand__logo { display: block; width: auto; height: 34px; }
.intro .brand__logo { height: 64px; }
.footer .brand__logo { height: 40px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav__link { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-ink-2); text-decoration: none; padding: 9px 14px; border-radius: var(--radius-full); transition: background var(--motion-fast), color var(--motion-fast); }
.nav__link:hover { color: var(--brand-navy); background: rgba(23, 28, 66, .06); }
.nav__link[aria-current="page"] { color: var(--brand-navy); background: rgba(23, 28, 66, .08); }
.nav .nav__cta { display: none; }
.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.nav__toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--brand-navy); transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-fast); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .header__pill { flex: 1; justify-content: space-between; padding: 0 18px; }
  .header__cta { display: none; }
  .nav__toggle { display: flex; }
  .brand__logo { height: 30px; }
  .nav {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-3);
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), visibility 0s var(--motion-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
  .nav__link { padding: 14px 16px; font-size: var(--font-size-base); border-radius: var(--radius-md); }
  .nav .nav__cta { display: inline-flex; justify-content: center; margin-top: var(--space-3); width: 100%; background: var(--brand-navy); color: var(--brand-aqua); }
  .header__inner { width: min(100% - 2 * var(--frame) - 12px, calc(var(--canvas-max) - 20px)); position: relative; }
}

/* ---------- Escena 1: hero que escala hasta salirse de pantalla + manifiesto ----------
   Mecanismo tomado de kora.framer.media: el panel arranca con margen y radio grande, y al hacer
   scroll escala desde el centro hasta desbordar el viewport. Sin desenfoque: solo transform. */
/* La escena queda en la capa de fondo: el panel del hero escala más allá de sus límites y,
   al ser un elemento posicionado, se pintaría sobre el capítulo siguiente. El contenido que
   viene después va en la capa de encima y con fondo opaco, así que recorta ese excedente. */
.scene { position: relative; z-index: 0; height: 220vh; }
main > *:not(.scene) { position: relative; z-index: 1; }
/* La barra de anclas es hija directa de main: la regla anterior le pisaba el sticky y el z-index,
   así que se iba con el scroll y quedaba por debajo de las secciones. Aquí se le devuelven los dos. */
main > .anchors { position: sticky; z-index: calc(var(--z-header) - 1); }
.chapter { background: var(--color-bg); }
.hero { position: sticky; top: 0; height: 100vh; }
.hero__panel { position: absolute; top: var(--frame); bottom: var(--frame); left: max(var(--frame), (100% - var(--canvas-max)) / 2); right: max(var(--frame), (100% - var(--canvas-max)) / 2); border-radius: var(--radius-hero); overflow: hidden; background: var(--brand-navy); box-shadow: var(--shadow-panel); transform-origin: 50% 50%; will-change: transform; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 46% 42%; }
@media (min-width: 901px) { .hero--home .hero__media img { width: 148%; left: 0; object-position: 50% 38%; } } /* la persona queda a la derecha del titular */
.hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 78, .1) 0%, rgba(16, 26, 78, .3) 55%, rgba(16, 26, 78, .8) 100%); }
.hero__grad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16, 26, 78, .82) 0%, rgba(16, 26, 78, .55) 38%, rgba(16, 26, 78, .05) 68%, transparent 100%); }
.hero__shade { position: absolute; inset: 0; background: var(--brand-navy); opacity: 0; }
.hero__layer { position: absolute; top: var(--frame); bottom: var(--frame); left: max(var(--frame), (100% - var(--canvas-max)) / 2); right: max(var(--frame), (100% - var(--canvas-max)) / 2); pointer-events: none; }
.has-motion [data-hero-item] { opacity: 0; } /* la cascada los revela tras la entrada del panel */
.hero__layer > * { pointer-events: auto; }
.hero__content { position: absolute; left: clamp(24px, 5vw, 80px); top: 45%; transform: translateY(-50%); width: min(820px, 72%); color: var(--panel-ink); }
.hero__title { color: #fff; max-width: 14ch; margin: 0 0 var(--space-5); }
.hero__accent { color: var(--brand-aqua); }
.hero__lede { color: rgba(255, 255, 255, .82); max-width: 46ch; font-size: var(--font-size-lg); margin: 0 0 var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero__actions .ui-btn--primary { background: var(--brand-aqua); color: var(--brand-navy); box-shadow: none; }
.hero__actions .ui-btn--primary:hover { background: var(--brand-aqua-light); color: var(--brand-navy); }
.hero__link { color: #fff; font-weight: var(--font-weight-medium); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 2px; }
.hero__link:hover { border-color: #fff; color: #fff; }
.hero__verbs { position: absolute; left: clamp(24px, 5vw, 80px); bottom: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: rgba(255, 255, 255, .9); }
.hero__verbs li { display: flex; align-items: center; gap: 10px; }
.hero__verbs .station { width: 14px; height: 14px; border-width: 3px; background: transparent; border-color: var(--brand-aqua); }
.hero__card { position: absolute; right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); width: min(320px, 40%); padding: 18px 18px 16px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .94); color: var(--brand-navy); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__card-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.hero__card strong { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); line-height: 1.2; }
.hero__card span { display: block; font-size: var(--font-size-xs); color: var(--color-ink-2); margin-top: 4px; }
.hero__card-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-line); font-size: var(--font-size-xs); color: var(--color-ink-2); display: flex; justify-content: space-between; gap: 8px; }
.hero__card-foot b { color: var(--brand-navy); font-weight: 600; }
.manifesto { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 clamp(24px, 8vw, 120px); opacity: 0; pointer-events: none; }
.manifesto p { max-width: 22ch; margin: 0; text-align: center; color: #fff; font-size: clamp(1.75rem, 1rem + 3.6vw, 4rem); font-weight: var(--font-weight-light); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.manifesto .w { opacity: .18; display: inline-block; }
.manifesto .w--accent { color: var(--brand-aqua); }
/* Sin movimiento: la escena se aplana y el manifiesto se lee debajo del hero */
.is-settled .scene, .no-js .scene { height: auto; }
.is-settled .hero, .no-js .hero { position: relative; height: auto; padding: var(--frame) 0; }
.is-settled .hero__panel, .no-js .hero__panel { position: relative; inset: auto; min-height: 100vh; width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; }
.is-settled .hero__layer, .no-js .hero__layer { top: var(--frame); bottom: var(--frame); left: max(var(--frame), (100% - var(--canvas-max)) / 2); right: max(var(--frame), (100% - var(--canvas-max)) / 2); }
.is-settled .manifesto, .no-js .manifesto { position: relative; opacity: 1; pointer-events: auto; padding: 80px clamp(24px, 8vw, 120px); margin: var(--frame); border-radius: var(--radius-hero); background: var(--brand-navy); }
.is-settled .manifesto .w, .no-js .manifesto .w { opacity: 1; }
@media (max-width: 900px) {
  /* En móvil no hay escalado ni fijado: el panel es una pantalla y el contenido fluye dentro de él,
     de arriba abajo. El manifiesto pasa a ser el bloque siguiente. */
  .scene, .is-settled .scene, .no-js .scene { height: auto; }
  .hero, .is-settled .hero, .no-js .hero { position: relative; height: auto; padding: var(--frame) 0; }
  /* El panel es el fondo y la capa de contenido manda en la altura: así nada se comprime
     cuando el titular crece o la pantalla es corta. */
  .hero__panel, .is-settled .hero__panel, .no-js .hero__panel { position: absolute; inset: var(--frame); min-height: 0; }
  .hero__layer, .is-settled .hero__layer, .no-js .hero__layer {
    position: relative; inset: auto; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-5);
    padding: calc(var(--header-height) + 16px) 20px 20px;
  }
  .hero__layer > * { flex: none; }
  .hero__content, .hero__verbs, .hero__card,
  .is-settled .hero__content, .is-settled .hero__verbs, .is-settled .hero__card,
  .no-js .hero__content, .no-js .hero__verbs, .no-js .hero__card {
    position: static; inset: auto; transform: none; width: auto; max-width: none; margin: 0; padding: 0;
  }
  .hero__content { margin-bottom: auto; }
  .hero__title { max-width: none; }
  .hero__lede { margin-bottom: var(--space-5); }
  .hero__actions { gap: var(--space-3); }
  .hero__card { padding: 16px; }
  .hero__card-row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .manifesto, .is-settled .manifesto, .no-js .manifesto {
    position: relative; opacity: 1; pointer-events: auto; padding: 56px 20px;
    width: min(100% - 2 * var(--frame), var(--canvas-max)); margin: var(--frame) auto 0; border-radius: var(--radius-hero); background: var(--brand-navy);
  }
  .manifesto .w { opacity: 1; }
}

/* ---------- Mini Ciclo dentro de la tarjeta del hero (de la línea al círculo) ---------- */
.ciclo-hero { display: block; width: 100%; height: auto; overflow: visible; --station-fill: #fff; }
.ciclo-hero__node { transform: translate(var(--rx), var(--ry)); transition: transform var(--motion-ciclo) var(--ease-in-out); }
.ciclo-hero__node circle { fill: var(--station-fill); stroke: var(--verb); stroke-width: 5; transition: stroke .6s var(--ease-out); }
.ciclo-hero__seg { stroke: var(--state-off); stroke-width: 8; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.ciclo-hero__end { stroke: var(--state-off); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.ciclo-hero__arc { fill: none; stroke: var(--verb); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out); }
.ciclo-hero.is-cycle .ciclo-hero__arc:nth-child(1) { transition-delay: .85s; }
.ciclo-hero.is-cycle .ciclo-hero__arc:nth-child(2) { transition-delay: 1s; }
.ciclo-hero.is-cycle .ciclo-hero__arc:nth-child(3) { transition-delay: 1.15s; }
.ciclo-hero.is-cycle .ciclo-hero__arc:nth-child(4) { transition-delay: 1.3s; }
.js .ciclo-hero:not(.is-cycle) .ciclo-hero__node { transform: translate(var(--lx), var(--ly)); transition: none; }
.js .ciclo-hero:not(.is-cycle) .ciclo-hero__node circle { stroke: var(--state-off); transition: none; }
.js .ciclo-hero:not(.is-cycle) .ciclo-hero__seg, .js .ciclo-hero:not(.is-cycle) .ciclo-hero__end { opacity: 1; transition: none; }
.js .ciclo-hero:not(.is-cycle) .ciclo-hero__arc { stroke-dashoffset: 100; transition: none; }
@media (prefers-reduced-motion: reduce) { .ciclo-hero * { transition: none !important; } }

/* ---------- Capítulos claros ---------- */
.chapter { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.chapter + .chapter { padding-top: 0; } /* dos capítulos claros seguidos no acumulan aire */
.chapter__head { max-width: 60ch; margin-bottom: var(--space-7); }
.chapter__head .ui-lede { margin-top: var(--space-3); }
.two-tone .muted { color: var(--color-ink-3); font-weight: var(--font-weight-light); }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .chapter__grid { grid-template-columns: 1fr; } }

/* Fotografías de capítulo */
.media { position: relative; overflow: hidden; border-radius: var(--radius-panel); background: var(--brand-navy); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; transform: scale(1.12); }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 9; }
.media--photo { aspect-ratio: 4 / 3; }
.media--capture { aspect-ratio: 16 / 10; display: grid; align-content: end; gap: 14px; padding: 18px; background: linear-gradient(160deg, var(--panel-bg-2), var(--brand-navy)); color: var(--panel-ink); }
/* Captura real de la plataforma: la interfaz se ve entera, sin recortar, y la nota sigue
   debajo. Se mantiene la proporción del recuadro para que al cambiar de pestaña no salte el alto. */
/* Sin pestañas que igualar, cada recuadro toma la proporción de su captura: así la interfaz
   llena el marco y no quedan franjas del fondo a los lados. */
.media--shot { display: block; padding: 0; aspect-ratio: auto; }
.media--shot img { width: 100%; height: auto; object-fit: contain; transform: none; will-change: auto; }
/* Fuera del recuadro la nota se lee sobre el suelo claro, y la captura se queda con todo el alto. */
.media--capture + .media__note { margin: var(--space-3) 0 0; color: var(--color-ink-2); font-size: var(--font-size-sm); }

.mock { align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); }
.mock__head { display: flex; gap: 8px; }
.mock__head span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.mock__head span:nth-child(1) { width: 68px; background: var(--verb); opacity: .9; }
.mock__head span:nth-child(2) { width: 34px; }
.mock__head span:nth-child(3) { width: 22px; }
.mock__rows { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.mock__row { display: flex; align-items: center; gap: 10px; }
.mock__row .station { flex: none; background: transparent; border-color: var(--verb); }
.mock__row .station--off { border-color: var(--panel-state-off); }
.mock__row b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.mock__row:nth-child(odd) b { background: rgba(255, 255, 255, .2); }
.media--capture .media__chip { position: static; align-self: start; justify-self: start; }
.media__note { margin: 0; max-width: 32ch; color: var(--panel-ink-2); font-size: var(--font-size-sm); }
.media__chip { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); color: var(--brand-navy); font-size: var(--font-size-sm); font-weight: 600; }
.media__chip .station { width: 12px; height: 12px; border-width: 3px; }
.media__quote { position: absolute; right: 18px; bottom: 18px; max-width: 280px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(16, 26, 78, .78); color: #fff; font-size: var(--font-size-sm); line-height: 1.4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.media__quote b { display: block; font-weight: 600; color: var(--brand-aqua); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- Tarjetas que se apilan ---------- */
.stack { position: relative; }
.stack__card { position: sticky; top: calc(var(--header-height) + 12px); margin-bottom: var(--space-5); border-radius: var(--radius-panel); padding: clamp(28px, 4vw, 56px); overflow: hidden; transform-origin: 50% 0; will-change: transform; box-shadow: var(--shadow-md); }
.stack__card:last-child { margin-bottom: 0; }
.stack__card--cream { background: var(--color-surface-2); color: var(--brand-navy); }
.stack__card--navy { background: var(--brand-navy); color: var(--panel-ink); }
.stack__card--white { background: #fff; color: var(--brand-navy); }
.stack__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: min(62vh, 560px); }
.stack__mark { display: block; width: 18px; height: 18px; border-width: 4px; margin: 0 0 var(--space-5); }
.station[data-light] { border-color: var(--state-off); transition: border-color var(--motion-slow) var(--ease-expo), box-shadow var(--motion-slow) var(--ease-expo); }
.station[data-light].is-lit, .is-settled .station[data-light], .no-js .station[data-light] { border-color: var(--verb, var(--color-ink)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verb, var(--color-ink)) 18%, transparent); }
.station--off[data-light].is-lit { border-color: var(--state-off); box-shadow: none; }
.stack__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-display); line-height: var(--line-tight); margin: 0 0 var(--space-5); max-width: 16ch; }
.stack__text { max-width: 46ch; font-size: var(--font-size-lg); color: var(--color-ink-2); }
.stack__card--navy .stack__text { color: var(--panel-ink-2); }
.stack__list { display: grid; gap: 10px; list-style: none; margin: var(--space-5) 0 0; padding: 0; font-size: var(--font-size-base); }
.stack__list li { display: flex; align-items: center; gap: 12px; }
.stack__list .station { width: 14px; height: 14px; border-width: 3px; flex: none; }
.stack__media { min-height: 300px; height: 100%; }
.stack__media .media { height: 100%; min-height: 300px; aspect-ratio: auto; }
.stack__media .media img { position: absolute; inset: 0; }
/* Antes / después: diagramas de línea y de círculo */
.linea { position: relative; padding: 0; }
.linea__stops { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0 28px 0 0; position: relative; }
.linea__stops::before { content: ""; position: absolute; left: 10px; right: 30px; top: 9px; height: 6px; border-radius: var(--radius-xs); background: var(--state-off); opacity: .5; }
.linea__stops::after { content: ""; position: absolute; right: 22px; top: -1px; width: 6px; height: 26px; border-radius: var(--radius-xs); background: var(--state-off); opacity: .6; }
.linea__stops li { display: grid; justify-items: center; gap: 12px; color: var(--color-ink-2); font-size: var(--font-size-sm); font-weight: 500; position: relative; }
.linea__stops .station { border-color: var(--state-off); background: var(--color-surface-2); }
.ring { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.ring__arc { fill: none; stroke: var(--verb); stroke-width: 14; stroke-linecap: round; }
.ring__node { fill: var(--brand-navy); stroke: var(--verb); stroke-width: 6; }
.ring__label { font-size: var(--font-size-sm); font-weight: 600; fill: #fff; }
.ring__center { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--brand-aqua); }
@media (prefers-reduced-motion: no-preference) { .ring--spin .ring__spin { animation: ring-spin 60s linear infinite; transform-origin: 160px 160px; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .stack__card { position: relative; top: auto; }
  .stack__grid { grid-template-columns: 1fr; min-height: 0; }
  .stack__media { min-height: 240px; }
  .stack__media .media { min-height: 240px; }
  .stack__title { max-width: none; }
}

/* ---------- Empieza desde donde estés ---------- */
.situacion__foot { margin-top: var(--space-6); }
.situacion__foot .ui-text { max-width: 62ch; margin-bottom: var(--space-5); }
.situacion .ui-stops { grid-template-columns: 1fr; gap: 4px; }
.situacion .ui-stop { border-color: transparent; background: transparent; padding: 14px 16px 14px 12px; }
.situacion .ui-stop:hover { background: color-mix(in srgb, var(--brand-navy) 5%, transparent); }
.panel .ui-stop { border-color: transparent; background: transparent; color: var(--panel-ink); padding: 14px 16px 14px 12px; }
.panel .ui-stop .ui-stop__d { color: var(--panel-ink-2); }
.panel .ui-stop .station { background: transparent; border-color: var(--panel-state-off); }
.panel .ui-stop:hover { background: rgba(255, 255, 255, .06); }

/* ---------- El Camino (capítulo marino) ---------- */
.camino-chapter { width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; border-radius: var(--radius-panel); padding: var(--section-gap) 0; }
.phases { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.phases::before { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 6px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--brand-aqua), var(--brand-purple-3)); opacity: .9; }
.phase { position: relative; padding: var(--space-6) var(--space-5) 0 0; }
.phase__mark { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-width: 5px; --station-fill: var(--brand-navy); }
.phase__t { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); margin: 0 0 6px; }
.phase__s { color: var(--panel-ink-2); margin: 0 0 var(--space-4); font-weight: 500; }
.phase__d { color: var(--panel-ink-2); font-size: var(--font-size-sm); margin: 0; }
.camino__band { max-width: 62ch; margin: var(--space-7) 0 0; color: var(--panel-ink-2); font-size: var(--font-size-base); }
.camino__band strong { color: var(--brand-aqua); font-weight: 600; }
.camino__personal { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgba(169, 239, 241, .1); color: var(--brand-aqua); font-weight: 500; border: 1px solid rgba(169, 239, 241, .2); }
@media (max-width: 860px) { .phases { grid-template-columns: 1fr; gap: var(--space-5); } .phases::before { left: 9px; right: auto; top: 9px; bottom: 9px; width: 6px; height: auto; background: linear-gradient(180deg, var(--brand-aqua), var(--brand-purple-3)); } .phase { padding: 0 0 0 40px; } }

/* ---------- Bloque de vídeo-dossier ---------- */
.video { position: relative; width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; border-radius: var(--radius-panel); overflow: hidden; background: var(--brand-navy); min-height: min(70vh, 640px); display: flex; align-items: flex-end; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 78, .1), rgba(16, 26, 78, .8)); }
.video__body { position: relative; padding: clamp(28px, 5vw, 64px); color: #fff; max-width: 60ch; }
.video__chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-4); }
.video__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-aqua); }
.video__t { font-size: var(--font-size-2xl); font-weight: var(--font-weight-light); letter-spacing: var(--tracking-display); line-height: 1.1; margin: 0 0 var(--space-3); }
.video__body p { color: rgba(255, 255, 255, .8); margin: 0; }

/* ---------- Ecosistema: cinta de partners ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); margin-top: var(--space-6); }
.is-settled .marquee, .no-js .marquee { -webkit-mask-image: none; mask-image: none; padding-left: var(--site-padding-x); }
.marquee__track { display: flex; gap: var(--space-8); width: max-content; padding: var(--space-2) 0; }
/* La banda muestra solo logos: cada uno en una caja igual, así ninguno domina la fila. */
.marquee__track li { display: grid; place-items: center; width: 172px; height: 76px; }
/* La caja del logo es menor que su celda: así el ajuste óptico de los verticales cabe sin recortarse. */
.marquee__logo { max-width: 140px; max-height: 52px; width: auto; height: auto; object-fit: contain; transform: scale(var(--escala, 1)); }

/* Peso óptico por logo: se calibra una vez y sirve tanto en la parrilla como en la banda.
   Los muy apaisados llenan por ancho y marcan la referencia; los verticales necesitan crecer. */
img[src$="citybrain.svg"] { --escala: .92; }
img[src$="gagoh.svg"] { --escala: .78; }
img[src$="inysur.svg"] { --escala: 1.15; }
img[src$="smart-consultory.svg"] { --escala: 1.25; }
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee 40s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cierre fotográfico ---------- */
.cierre { position: relative; width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; border-radius: var(--radius-panel); overflow: hidden; background: var(--brand-navy); color: #fff; padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px); }
.cierre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.cierre__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 78, .2), rgba(16, 26, 78, .85)); }
.cierre__body { position: relative; max-width: 760px; }
.cierre__body .ui-lede { color: rgba(255, 255, 255, .82); }
.cierre__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cierre .ui-btn--primary { background: var(--brand-aqua); color: var(--brand-navy); box-shadow: none; }
.cierre .ui-btn--primary:hover { background: var(--brand-aqua-light); color: var(--brand-navy); }
.cierre .ui-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cierre .ui-btn--secondary:hover { border-color: #fff; color: #fff; }

/* ---------- Pie ---------- */
.footer { margin-top: var(--space-6); padding: 0 0 var(--frame); }
.footer__stripe { width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; height: 6px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: linear-gradient(90deg, #fff 0 20%, var(--brand-aqua) 20% 40%, var(--brand-green) 40% 60%, var(--brand-purple) 60% 80%, var(--brand-navy) 80% 100%); }
.footer__body { width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; border-radius: 0 0 var(--radius-panel) var(--radius-panel); padding: var(--space-8) 0 var(--space-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer .brand { color: var(--brand-aqua); }
.footer__about p { margin-top: var(--space-4); max-width: 36ch; color: var(--panel-ink-2); font-size: var(--font-size-sm); }
.footer__h { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-variation-settings: "wdth" var(--wdth-wide); color: var(--brand-aqua); margin: 0 0 var(--space-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--font-size-sm); }
.footer a { color: var(--panel-ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: var(--brand-aqua); }
.footer__role { display: block; color: var(--panel-ink-2); font-size: var(--font-size-xs); }
.footer__contacto { display: grid; gap: var(--space-3); }
.footer__direccion { margin-top: var(--space-4); font-style: normal; color: var(--panel-ink-2); font-size: var(--font-size-xs); line-height: 1.6; }
.footer__enlace { margin-top: var(--space-4); font-size: var(--font-size-sm); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--panel-line); font-size: var(--font-size-sm); color: var(--panel-ink-2); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__bottom p { margin: 0; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Páginas interiores: hero fotográfico bajo ---------- */
.hero--page { position: relative; height: auto; padding: var(--frame) 0; }
.hero--page .hero__panel { position: relative; inset: auto; }
.hero--page .hero__panel { min-height: min(72vh, 680px); display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.is-settled .hero--page .hero__panel, .no-js .hero--page .hero__panel { min-height: min(72vh, 680px); }
.is-settled .hero--page .hero__content, .no-js .hero--page .hero__content { margin-left: 0; padding: calc(var(--header-height) + 48px) clamp(24px, 5vw, 80px) clamp(32px, 5vw, 64px); }
.hero--page .hero__content { position: relative; top: auto; transform: none; width: min(880px, 100%); padding: calc(var(--header-height) + 48px) clamp(24px, 5vw, 80px) clamp(32px, 5vw, 64px); }
.hero--page .hero__title { max-width: 16ch; font-size: var(--font-size-3xl); }
.hero--page .hero__lede { margin-bottom: var(--space-5); }
@media (max-width: 900px) { .hero--page .hero__content { padding-left: 20px; padding-right: 20px; } }

/* Barra de anclas: se pega bajo la cabecera y el contenido pasa por debajo.
   Fondo opaco, no translúcido con desenfoque: sobre una sección marina el blur deja ver
   el contenido moviéndose detrás de los chips y en móvil cuesta caro. */
.anchors { position: sticky; top: calc(var(--header-bottom) + 6px); z-index: calc(var(--z-header) - 1); padding: var(--space-2) 0; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
/* Cuando está pegada, el fondo sube hasta el borde superior y cierra la franja
   donde flota la píldora del menú. Se enciende con .is-stuck (main.js). */
.anchors::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--header-bottom) + 6px); background: var(--color-bg); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out); }
.anchors.is-stuck::before { opacity: 1; }
.anchors.is-stuck { box-shadow: 0 6px 20px -18px rgba(0, 0, 0, .5); }
.anchors__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.anchors__list::-webkit-scrollbar { display: none; }
.anchors__link { text-decoration: none; }
/* El relleno del chip activo se oscurece lo justo para que el texto blanco cumpla AA
   con los verbos más luminosos (Comunica en celeste y el morado medio). El color del
   verbo sigue reconociéndose y el punto interior marca el estado. */
.anchors__link.is-active { background: color-mix(in srgb, var(--verb, var(--color-ink)) 72%, #0C1233); border-color: transparent; color: #fff; }
.anchors__link.is-active::before { background: #fff; box-shadow: none; }
/* En móvil la tira desborda siempre: se desvanece por el lado que tiene más contenido. */
@media (max-width: 900px) {
  .anchors__list {
    --fade-l: 28px; --fade-r: 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .anchors__list.is-start { --fade-l: 0px; }
  .anchors__list.is-end { --fade-r: 0px; }
}

.feature { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.feature + .feature { border-top: 1px solid var(--color-line); }
.feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.feature--alt .feature__text { order: 2; }
.feature__text .ui-title { margin-bottom: var(--space-3); }
.feature__text .ui-lede { margin-bottom: var(--space-4); }
.valor__grid > div > .media { margin-bottom: 0; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; list-style: none; margin: var(--space-4) 0; padding: 0; }
.chain li { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: 500; }
.chain li span { padding: 6px 12px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--color-line); }
.chain li + li::before { content: ""; width: 14px; height: 4px; border-radius: var(--radius-xs); background: var(--verb-plan); opacity: .5; }
.follow { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; font-size: var(--font-size-sm); color: var(--color-ink-2); }
.follow li + li::before { content: "·"; margin-right: 14px; color: var(--color-ink-3); }
.timeline { list-style: none; margin: var(--space-4) 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: var(--space-4); }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 4px; border-radius: var(--radius-xs); background: var(--verb-act); opacity: .5; }
.timeline li { position: relative; font-size: var(--font-size-sm); color: var(--color-ink-2); }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--verb-act); }
.timeline li strong { font-weight: 600; color: var(--color-ink); }
.feature__media .media--photo { margin-bottom: var(--space-5); }
.timeline__loop::before { border-color: var(--verb-plan); }
@media (max-width: 860px) { .feature__grid { grid-template-columns: 1fr; } .feature--alt .feature__text { order: 0; } }

.capa { width: min(100% - 2 * var(--frame), var(--canvas-max)); margin-inline: auto; border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.capa__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.capa__head { max-width: 46ch; margin-bottom: 0; }
.capa__head .ui-lede { margin-top: var(--space-3); }
.capa__key {
  max-width: 24ch; margin: var(--space-7) 0 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-light);
  line-height: var(--line-snug); letter-spacing: var(--tracking-display); color: var(--brand-aqua); text-wrap: balance;
}

/* Diagrama de convergencia: las fuentes de la ciudad alimentan el Ciclo del Plan.
   Dibuja el mecanismo, no lo ilustra: cada fuente es un punto del que sale una línea
   que termina en el anillo. Sin cajas: agrupa por luz y espacio. */
.flujo { position: relative; }
.flujo__svg { display: block; width: 100%; height: auto; }
.flujo__linea { fill: none; stroke: var(--brand-aqua); stroke-width: 1.5; opacity: .5; }
.flujo__punto { fill: var(--panel-bg); stroke: var(--brand-aqua); stroke-width: 2.5; }
.flujo__txt { fill: var(--panel-ink); font-family: var(--font-sans); font-size: 19px; font-weight: var(--font-weight-medium); }
.flujo__arco { fill: none; stroke: var(--verb); stroke-width: 12; stroke-linecap: round; }
.flujo__nodo { fill: var(--panel-bg); stroke: var(--verb); stroke-width: 4; }
.flujo__centro { fill: #fff; font-family: var(--font-sans); font-size: 24px; font-weight: var(--font-weight-medium); letter-spacing: -.01em; }
.flujo__sub { fill: var(--panel-ink-2); font-family: var(--font-sans); font-size: 13px; }
/* La lista es la versión accesible y la que se ve en móvil */
.flujo__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .has-motion .flujo__linea { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .has-motion .flujo__punto, .has-motion .flujo__txt { opacity: 0; }
  .has-motion .flujo__anillo { opacity: 0; }
}
@media (max-width: 900px) {
  .capa__grid { grid-template-columns: 1fr; }
  .flujo__svg { display: none; }
  .flujo__texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .flujo__k { font-size: var(--font-size-sm); color: var(--panel-ink-2); margin: 0 0 var(--space-4); }
  .flujo__k--fin { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--panel-line); }
  .flujo__fuentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .flujo__fuentes li { display: flex; align-items: center; gap: 12px; color: var(--panel-ink); }
  .capa__key { margin-top: var(--space-7); font-size: var(--font-size-xl); }
}


.baseprem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.baseprem__col { padding: 0; }
.baseprem__list { margin: var(--space-3) 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--color-ink-2); }
.baseprem__pending { list-style: none; margin-left: -20px; color: var(--color-ink-3); font-style: italic; }
.baseprem__col .linechips { margin-top: var(--space-3); }
@media (max-width: 760px) { .baseprem__grid { grid-template-columns: 1fr; } }

.valor { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.valor + .valor { border-top: 1px solid var(--color-line); }
.valor__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.valor__grid > div:last-child { display: flex; flex-direction: column; }
.valor__grid > div:last-child > .media { flex: 1; aspect-ratio: auto; min-height: 420px; }
.valor--comunica .valor__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.lecturas { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; }
.lecturas__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; max-width: 52ch; }
.lecturas__item .station { margin-top: 5px; }
.lecturas__item strong { font-weight: 600; color: var(--color-ink); }
.formats { --verb: var(--verb-com); position: relative; list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.formats::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: var(--radius-xs); background: var(--verb); opacity: .35; }
.formats li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 14px; align-items: start; font-size: var(--font-size-sm); }
.formats li .station { margin-top: 3px; }
.formats li strong { display: block; font-weight: 600; color: var(--color-ink); font-size: var(--font-size-base); }
.formats li small { display: block; color: var(--color-ink-2); }
.faq__list { max-width: 760px; }
@media (max-width: 860px) { .valor__grid, .valor--comunica .valor__grid { grid-template-columns: 1fr; } }

.cadena__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--space-5); position: relative; }
.cadena__row::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--brand-aqua), var(--brand-purple)); opacity: .35; }
.cadena__node { position: relative; appearance: none; min-height: 92px; padding: 12px 10px; border-radius: var(--radius-lg); border: 1.5px solid var(--color-line); background: #fff; cursor: pointer; text-wrap: balance; font-weight: 600; font-size: var(--font-size-sm); line-height: 1.2; color: var(--color-ink-2); transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.cadena__node:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.cadena__node[aria-selected="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--brand-aqua); }
.cadena__node--pmus { border-color: var(--brand-purple); color: var(--brand-purple); }
.cadena__node--pmus[aria-selected="true"] { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.cadena__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: #fff; }
.cadena__panel p { margin: 0; }
.cadena__panel strong { font-weight: 600; }
@media (max-width: 900px) { .cadena__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cadena__row::before { display: none; } }
@media (max-width: 560px) { .cadena__row { grid-template-columns: 1fr; } .cadena__node { min-height: 0; } .cadena__panel { grid-template-columns: 1fr; } }

.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 64px); }
.grupo .ui-title .station { vertical-align: middle; margin-right: 10px; position: relative; top: -2px; }
.grupo__actors { font-weight: 500; color: var(--color-ink-2); font-size: var(--font-size-sm); margin: var(--space-2) 0 var(--space-4); }
.grupo__close { margin-top: var(--space-4); color: var(--brand-purple); font-weight: 500; }
@media (max-width: 760px) { .grupos { grid-template-columns: 1fr; } }

.partners__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-5); }
/* Filas centradas con tarjetas de ancho igual: así la última fila nunca queda descolgada
   a la izquierda, sea cual sea el número de partners, que va creciendo. */
.partners__grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-5); list-style: none; margin: 0; padding: 0; }
/* Cada partner dibuja su propio tramo de línea, del color de su grupo, y lo prolonga por el
   hueco hasta la siguiente tarjeta. Así la línea acompaña a cualquier número de filas: con un
   único trazo sobre la rejilla, la segunda fila se quedaba con las estaciones sueltas. */
.partner { position: relative; flex: 0 1 clamp(220px, 24vw, 300px); padding-top: var(--space-6); }
.partner::before { content: ""; position: absolute; left: 11px; right: 0; top: 8px; height: 6px; border-radius: var(--radius-xs); background: var(--verb, var(--color-ink)); opacity: .35; }
.partner .station { position: absolute; left: 0; top: 0; z-index: 1; }
/* Sin logo, el marco discontinuo dice «pendiente» y lleva el nombre. Con logo, caja limpia. */
.partner__logo { display: grid; place-items: center; aspect-ratio: 3 / 1.3; margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1.5px dashed var(--color-line-strong); font-weight: 700; font-size: var(--font-size-lg); text-align: center; color: var(--color-ink); }
/* La imagen se posiciona sobre la caja en vez de ocuparla como contenido: si no, un logo
   alto (Inysur es casi cuadrado) empuja el alto y esa tarjeta crece más que las demás. */
.partner__logo--img { position: relative; overflow: hidden; border: 1px solid var(--color-line); background: var(--color-surface); padding: 0; }
/* object-fit lo hace caber conservando su proporción; --escala iguala después el peso
   óptico entre logos de formas distintas, que es lo que descuadra estas parrillas. */
.partner__logo--img img { position: absolute; inset: var(--space-4); width: calc(100% - 2 * var(--space-4)); height: calc(100% - 2 * var(--space-4)); object-fit: contain; transform: scale(var(--escala, 1)); }
.partner__role { font-weight: 600; margin: 0; }
.partner__group { font-size: var(--font-size-sm); color: var(--color-ink-2); margin: 2px 0 var(--space-2); }
.partner__desc { font-size: var(--font-size-sm); color: var(--color-ink-3); margin: 0; font-style: italic; }
/* En móvil una por fila y a todo el ancho: con tarjetas estrechas y centradas se desperdicia pantalla. */
@media (max-width: 600px) { .partner { flex: 1 1 100%; } }

.contacto { padding-top: calc(var(--header-height) + 40px); padding-bottom: 0; }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contacto__aside { position: sticky; top: calc(var(--header-height) + 24px); }
.contacto__steps { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.contacto__steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--font-size-sm); color: var(--color-ink-2); }
.contacto__steps .station { margin-top: 1px; }
/* Contacto directo: para quien no quiere rellenar un formulario. Cada dato con su parada,
   como el resto de listas del sitio, y la dirección postal en un address de verdad. */
.contacto__directo { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.contacto__datos { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.contacto__datos li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contacto__datos .station { flex: none; }
.contacto__datos a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--color-accent-2); }
.contacto__datos a:hover { text-decoration-color: var(--color-ink); }
.contacto__datos-rol { color: var(--color-ink-3); font-size: var(--font-size-sm); }
.contacto__direccion { margin: var(--space-4) 0 0 34px; font-style: normal; color: var(--color-ink-2); font-size: var(--font-size-sm); line-height: 1.5; }
.contacto__panel { margin-top: var(--space-7); padding: var(--space-6); border-radius: var(--radius-panel); display: grid; gap: var(--space-4); justify-items: center; }
.contacto__panel .ring { width: min(200px, 60%); }
.contacto__panel p { margin: 0; text-align: center; color: var(--panel-ink-2); font-size: var(--font-size-sm); max-width: 30ch; }
@media (max-width: 900px) { .contacto__panel { display: none; } }
.contacto__form { padding: var(--space-6); border-radius: var(--radius-panel); background: #fff; box-shadow: var(--shadow-md); }
.intent { margin-bottom: var(--space-6); }
.intent .ui-stops { grid-template-columns: 1fr; gap: 4px; }
.intent .ui-stop { border-color: transparent; background: transparent; padding: 12px 16px 12px 12px; }
.intent .ui-stop:hover { background: color-mix(in srgb, var(--brand-navy) 5%, transparent); }
.intent .ui-stop:has(input:checked) { background: var(--brand-navy); border-color: var(--brand-navy); }
.contacto__status { min-height: 1.5em; font-size: var(--font-size-sm); color: var(--color-error); margin: var(--space-3) 0 0; }
.contacto__success { padding: var(--space-6); border-radius: var(--radius-panel); }
.contacto__success h2 { margin-bottom: var(--space-3); outline: none; }
.contacto__success-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 900px) { .contacto__grid { grid-template-columns: 1fr; } .contacto__aside { position: static; } .intent .ui-stops { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 560px) { .contacto__form { padding: var(--space-5) var(--space-4); } }

/* ---------- Páginas legales ---------- */
.legal { padding-top: calc(var(--header-height) + 64px); padding-bottom: var(--section-gap); }
.legal .ui-lede { margin-bottom: var(--space-6); }
.legal .ui-title--sm { margin-top: var(--space-7); }
.legal__aviso { max-width: 62ch; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.legal__aviso p { margin: 0; }
.legal__lista { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 64ch; }
.legal__lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--color-ink-2); }
.legal__lista .station { margin-top: 5px; }