/* ==========================================================
   scrapenvases.com — portal del sector
   Portada oscura con el logo en 3D sobre envases profesionales; el resto,
   luminoso: fotografía protagonista, tipografía negra grande y píldoras.
   El negro se reserva para la portada, las herramientas, la banda final y el pie.
   El movimiento acompaña al scroll (portada, palabras que se encienden,
   fotos que se abren); con "reducir movimiento" todo queda estático.
   ========================================================== */

:root {
  --paper: #f3f5f7;
  --white: #ffffff;
  --ink: #0b0c0e;
  --ink-2: #6f7881;         /* segundo tono de los titulares */
  --ink-soft: #464e56;
  --ink-faint: #69727b;
  --line: #dde2e7;
  --line-soft: #e9edf0;
  --field-line: #7d878f;
  --off: #c3c9cf;           /* palabras aún sin "encender" */

  --black: #0a0b0d;
  --black-2: #15171a;
  --on-black: #f4f5f6;
  --on-black-soft: #a4abb2;
  --black-line: rgba(255, 255, 255, .13);

  --sky-top: #2f6290;
  --sky-mid: #6f9cc2;
  --sky-low: #dfe9f2;

  /* Logotipo */
  --blue: #0075a8;
  --teal: #00988c;
  --teal-ink: #00776e;

  /* Herramientas */
  --c-probatus: #217a5b;
  --c-inprogest: #0075a8;
  --c-scrapp: #b25600;

  --ok: #1f7a45;  --ok-bg: #e5f4ea;
  --err: #a8321f; --err-bg: #fbeae6;

  --f-head: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(11, 12, 14, .05), 0 24px 48px -28px rgba(11, 12, 14, .35);
  --wrap: 1280px;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: #9aa3ab var(--paper);
  background: var(--black);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  caret-color: var(--ink);
}
::selection { background: #cfe3f2; color: var(--ink); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-soft); }
h1, h2, h3 { font-family: var(--f-head); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.wrap--narrow { max-width: 900px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }
.ico { width: 24px; height: 24px; flex: none; }

/* Etiqueta pequeña sobre los titulares (texto de los documentos de copy) */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 .9rem/1.4 var(--f-body);
  letter-spacing: 0;
  color: var(--ink-faint);
}
.kicker::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hl { color: var(--ink-2); }

/* ---------- Botones píldora ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 .98rem/1 var(--f-body);
  padding: 15px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--ease);
}
.btn::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease);
}
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #2a2d31; color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .6); color: var(--ink); border-color: rgba(11, 12, 14, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: rgba(11, 12, 14, .3); }
.btn--sm { padding: 10px 16px; font-size: .86rem; }
.btn--sm::after { display: none; }

/* Sobre fondo oscuro o foto, la píldora principal se invierte */
:is(.band-wrap, .sec--dark, .foot, .stage, .phero) .btn--primary { background: #fff; color: var(--ink); }
:is(.band-wrap, .sec--dark, .foot, .stage, .phero) .btn--primary:hover { background: #e9edf0; color: var(--ink); }
:is(.band-wrap, .sec--dark, .stage, .phero) .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4); }
:is(.band-wrap, .sec--dark, .stage, .phero) .btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: #fff; }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 245, 247, .78);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
          backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(11, 12, 14, .06);
  transition: background-color .35s, border-color .35s;
}
.nav__in { display: flex; align-items: center; gap: 24px; min-height: var(--nav-h); }
.nav__logo { flex: none; }
.nav__logo img { width: 196px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 18px; flex: 1; }
.nav__menu ul { list-style: none; display: flex; gap: 2px; margin: 0 auto; padding: 0; }
.nav__menu ul a {
  display: block; padding: 8px 12px; border-radius: 999px;
  font: 500 .9rem/1.2 var(--f-body);
  color: var(--ink-soft); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav__menu ul a:hover { color: var(--ink); background: rgba(11, 12, 14, .05); }
.nav__menu ul a[aria-current="page"] { color: var(--ink); background: rgba(11, 12, 14, .07); }
.nav__cta { padding: 11px 18px; font-size: .9rem; }
.nav__cta::after { display: none; }
.nav__toggle {
  display: none; margin-left: auto; width: 46px; height: 46px;
  border: 1px solid rgba(11, 12, 14, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .6); cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink); margin: 0 auto; position: relative; transition: transform .3s var(--ease), background-color .2s; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }
.nav--open .nav__bars { background: transparent; }
.nav--open .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Portada y páginas de perfil: la barra flota transparente sobre la escena oscura hasta dejarla atrás */
.top-dark .nav { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.top-dark .nav:not(.nav--solid) .nav__menu ul a { color: rgba(255, 255, 255, .88); }
.top-dark .nav:not(.nav--solid) .nav__menu ul a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.top-dark .nav:not(.nav--solid) .nav__menu ul a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .16); }
.top-dark .nav:not(.nav--solid) .nav__cta { background: #fff; color: var(--ink); }
.top-dark .nav:not(.nav--solid) .nav__toggle { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.top-dark .nav:not(.nav--solid) .nav__bars,
.top-dark .nav:not(.nav--solid) .nav__bars::before,
.top-dark .nav:not(.nav--solid) .nav__bars::after { background: #fff; }
.top-dark .nav:not(.nav--solid).nav--open .nav__bars { background: transparent; }
.top-dark .nav--solid { background: rgba(243, 245, 247, .82); border-bottom-color: rgba(11, 12, 14, .06); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.nav__logo .logo--light { display: none; }
.top-dark .nav:not(.nav--solid):not(.nav--open) .logo--dark { display: none; }
.top-dark .nav:not(.nav--solid):not(.nav--open) .logo--light { display: block; }

@media (max-width: 1100px) {
  .nav__toggle { display: block; }
  .nav__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 12px 40px 24px;
    box-shadow: 0 24px 40px -20px rgba(11, 12, 14, .25);
  }
  .nav--open { background: var(--paper) !important; }
  .nav--open .nav__menu { display: flex; }
  .nav__menu ul { flex-direction: column; margin: 0; }
  .nav__menu ul a, .top-dark .nav .nav__menu ul a { padding: 13px 14px; font-size: 1.05rem; color: var(--ink-soft); }
  .top-dark .nav .nav__menu ul a[aria-current="page"] { color: var(--ink); background: rgba(11, 12, 14, .07); }
  .nav--open .nav__cta { background: var(--ink) !important; color: #fff !important; align-self: flex-start; }
}

/* ---------- Portada: logo 3D sobre envases profesionales ----------
   Sin WebGL o con "reducir movimiento": logo plano, titular y core en HTML.
   Con la escena 3D (hero3d.js añade .is-3d): escenario fijo durante el scroll; --p (0 → 1)
   lo calcula site.js; las etiquetas del core las coloca hero3d.js bajo cada placa. */
.hero--home { position: relative; background: #07090c; color: #fff; }
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--nav-h) + 72px) 0 104px;
}
.stage__bg { position: absolute; inset: 0; z-index: -3; }
.stage__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.stage__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(62% 58% at 50% 46%, rgba(7, 9, 12, .1), rgba(7, 9, 12, .72) 100%),
    linear-gradient(180deg, rgba(7, 9, 12, .6) 0%, transparent 24%, transparent 68%, rgba(7, 9, 12, .9) 100%);
}
.stage__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.stage__logo { width: min(760px, 88vw); height: auto; margin: 0 auto 44px; }
.stage__txt { position: relative; z-index: 2; text-align: center; }
.stage__txt .kicker { color: rgba(255, 255, 255, .78); }
.stage__txt h1 {
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  letter-spacing: -.045em; line-height: 1;
  margin: 18px auto 22px; max-width: 22ch;
  color: #fff;
}
.stage__txt h1 .hl { color: rgba(255, 255, 255, .6); }
/* Titular de portada en dos voces, como el cierre "Trazabilidad total": Archivo expandida en
   mayúsculas y la cursiva de Instrument Serif con los tres colores del core */
.stage__txt .stage__title { display: flex; flex-direction: column; align-items: center; max-width: none; margin: 0 auto 22px; letter-spacing: 0; line-height: 1; text-wrap: initial; }
.stage__title-a {
  display: block; overflow: hidden; padding: 0 .08em .06em;
  font: 800 clamp(1.45rem, 3.8vw, 4rem)/1.05 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.stage__word { display: inline-block; white-space: nowrap; }
.stage__title-a i { display: inline-block; font-style: normal; }
.stage__title-b {
  display: block; margin-top: .02em; padding: 0 .12em .12em;
  font: italic 400 clamp(2.6rem, 6vw, 6.4rem)/.98 "Instrument Serif", Georgia, serif;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #45d69e 0%, #3cc4f2 38%, #ffa25a 70%, #45d69e 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(60, 196, 242, .3));
}
@media (prefers-reduced-motion: no-preference) {
  /* con la escena 3D, el titular entra al llegar a él (txt-on, en site.js) */
  .is-3d .stage__title-a { letter-spacing: .18em; transition: letter-spacing 1.4s var(--ease) .05s; }
  .is-3d .stage__title-a i { transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .5s; transition-delay: calc(.1s + var(--i) * 32ms); }
  .is-3d .stage__title-b { opacity: 0; filter: blur(16px) drop-shadow(0 0 26px rgba(60, 196, 242, .3)); transform: scale(1.12) translateY(10px); transition: opacity 1s var(--ease) .5s, filter 1.2s var(--ease) .5s, transform 1.4s var(--ease) .5s; }
  .is-3d.txt-on .stage__title-a { letter-spacing: .04em; }
  .is-3d.txt-on .stage__title-a i { transform: none; opacity: 1; }
  .is-3d.txt-on .stage__title-b { opacity: 1; filter: blur(0) drop-shadow(0 0 26px rgba(60, 196, 242, .3)); transform: none; animation: end-flow 6s linear 1.8s infinite; }
}
.stage__txt .hero__sub { margin: 0 auto; max-width: 62ch; color: rgba(255, 255, 255, .84); }
.stage__txt .hero__ctas { justify-content: center; }
.stage__core { position: relative; z-index: 2; width: 100%; margin-top: 72px; padding: 0 40px; }
.stage__cue { display: none; }

/* Escena 3D activa */
.hero--home.is-3d { height: 250vh; }
.is-3d .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; }
.is-3d .stage__logo { display: none; }
.is-3d .stage__bg img { transform: scale(calc(1.04 + var(--p, 0) * .1)); transform-origin: 50% 62%; }
.is-3d .stage__shade::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 40% at 50% 52%, rgba(7, 9, 12, .78), transparent 100%);
  opacity: clamp(0, calc((var(--p, 0) - .15) * 3), 1);
}
.is-3d .stage__txt {
  position: absolute; left: 0; right: 0; top: 52%;
  opacity: clamp(0, calc((var(--p, 0) - .22) * 3.6), 1);
  transform: translateY(calc(-50% + (1 - clamp(0, calc((var(--p, 0) - .22) * 3.6), 1)) * 44px));
  pointer-events: none;
}
.is-3d.txt-on .stage__txt { pointer-events: auto; }
.is-3d .stage__txt:focus-within { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.is-3d .stage__core { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
.is-3d .core-diagram { position: static; display: block; max-width: none; margin: 0; padding: 0; }
.is-3d .core-diagram__wire { display: none; }
.is-3d .core-diagram__label { display: none; }
.is-3d .core-diagram__piece {
  position: absolute; left: 0; top: 0; display: block;
  padding: 0; border-radius: 16px;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff; pointer-events: auto; transition: none;
}
.is-3d:not(.core-on) .core-diagram__piece { pointer-events: none; }
.is-3d .core-diagram__piece::before { display: none; }
.is-3d .core-diagram__piece > .tlogo { opacity: 0; }
.is-3d .core-diagram__piece > span {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  margin-top: 18px; width: max-content; max-width: 240px;
  text-align: center; font: 500 .98rem/1.3 var(--f-body);
  color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
  opacity: var(--on, 0);
}
.is-3d .core-diagram__piece:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.is-3d .stage__cue {
  display: block; position: absolute; left: 50%; bottom: 30px; z-index: 3;
  width: 24px; height: 38px; margin-left: -12px;
  border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 14px;
  opacity: 0; transition: opacity .8s var(--ease);
}
.is-3d.intro-done .stage__cue { opacity: clamp(0, calc(1 - var(--p, 0) * 10), 1); }
.stage__cue::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: #fff;
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* El core (versión HTML): píldora y tres piezas colgadas de un hilo fino */
.core-diagram {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 860px; margin: 0 auto;
  padding-top: 88px;
}
.core-diagram__label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 999px;
  font: 600 .95rem/1 var(--f-body); color: var(--ink); white-space: nowrap;
  background: #fff;
  box-shadow: var(--shadow);
}
.core-diagram__wire {
  position: absolute; top: 52px; left: calc((100% - 32px) / 6); right: calc((100% - 32px) / 6); height: 24px;
  border: 1px solid rgba(255, 255, 255, .4); border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.core-diagram__wire::before {
  content: ""; position: absolute; left: 50%; top: -18px; width: 1px; height: 42px;
  background: rgba(255, 255, 255, .4);
}
.core-diagram__piece {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 16px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  text-align: center; text-decoration: none;
  font: 500 .98rem/1.3 var(--f-body); color: var(--ink);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.core-diagram__piece::before {
  content: ""; position: absolute; left: 50%; top: -13px; width: 7px; height: 7px; transform: translateX(-50%);
  border-radius: 50%; background: #fff;
}
.core-diagram__piece:hover { color: var(--ink); transform: translateY(-4px); }
.core-diagram__piece .tlogo { width: 100%; height: 50px; object-fit: contain; object-position: center; }
.core-diagram__piece .tlogo--txt { justify-content: center; font-size: 1.15rem; }

/* ---------- Logos de herramienta ---------- */
.tlogo { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.tlogo--txt {
  display: inline-flex; align-items: center;
  font: 700 1.35rem/1 var(--f-head); letter-spacing: -.02em;
  color: var(--c-inprogest);
}
.tlogo--txt b { font-weight: 700; color: var(--ink); }

/* ---------- Página 404 ---------- */
.hero { padding: 140px 0; background: var(--paper); }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: 22px 0 26px; }
.hero--center { text-align: center; }
.hero--center .hero__txt, .hero--center .hero__sub { margin: 0 auto; }
.hero--center .hero__ctas { justify-content: center; }

/* ---------- Texto de cabecera (portada) ---------- */
.hero__txt { max-width: 900px; }
.hero__sub { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- Cabecera de las páginas interiores ----------
   Como la portada: su foto a pantalla completa, oscurecida, la barra transparente encima y el
   titular en dos voces. Cada perfil lleva el color de su panel en "Elige tu papel"
   (--acc sobre oscuro, --acc-ink sobre blanco); Normativa y Contacto, los tres colores del
   core como la portada (--acc-grad, --hl-grad y --glow). La foto se asienta al cargar y se
   acerca al bajar (--p, en site.js); con "reducir movimiento", quieta. */
.p-para-tu-scrap { --acc: #45d69e; --acc-pale: #d4fbe7; --acc-ink: #13865d; }
.p-gestores      { --acc: #3cc4f2; --acc-pale: #d8f4ff; --acc-ink: #0a7fb5; }
.p-poseedores    { --acc: #ffa25a; --acc-pale: #ffe7cc; --acc-ink: #cc5410; }
.p-normativa {
  --acc: #3cc4f2; --acc-pale: #d8f4ff; --acc-ink: #0a7fb5;
  --acc-grad: linear-gradient(100deg, #45d69e 0%, #3cc4f2 38%, #ffa25a 70%, #45d69e 100%);
  --hl-grad: linear-gradient(100deg, #1f9a6e, #0a86c0 50%, #f06a1a);
  --glow:
    radial-gradient(40% 60% at 18% 30%, rgba(69, 214, 158, .08), transparent 70%),
    radial-gradient(40% 60% at 55% 20%, rgba(60, 196, 242, .07), transparent 70%),
    radial-gradient(40% 60% at 88% 35%, rgba(255, 162, 90, .07), transparent 70%);
}
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 64px) 0 128px;
  background: #07090c; color: #fff; text-align: center;
}
.phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: brightness(.82) saturate(.9);
  transform: scale(calc(1.04 + var(--p, 0) * .14)) translateY(calc(var(--p, 0) * 5%));
  transform-origin: 50% 60%;
}
.phero::before {   /* sombra para leer el titular y, al pie, la luz del color del perfil */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 42% at 50% 110%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 72%),
    radial-gradient(62% 60% at 50% 50%, rgba(7, 9, 12, .62), rgba(7, 9, 12, .86) 100%),
    linear-gradient(180deg, rgba(7, 9, 12, .55) 0%, transparent 24%, transparent 70%, rgba(7, 9, 12, .9) 100%);
}
.phero__txt {
  position: relative; display: flex; flex-direction: column; align-items: center;
  opacity: clamp(0, calc(1 - var(--p, 0) * 1.5), 1);
  transform: translateY(calc(var(--p, 0) * -64px));
}
.phero.is-tall .phero__txt { opacity: 1; transform: none; }
.phero__title { display: flex; flex-direction: column; align-items: center; margin: 0 0 28px; letter-spacing: 0; line-height: 1; text-wrap: initial; }
.phero__a {
  display: block; overflow: hidden; padding: 0 .08em .06em;
  font: 800 clamp(1.45rem, 3.8vw, 4rem)/1.08 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.phero__word { display: inline-block; white-space: nowrap; }
.phero__a i { display: inline-block; font-style: normal; }
.phero__b {
  display: block; max-width: 14em; margin-top: .04em; padding: 0 .12em .12em;
  font: italic 400 clamp(2.6rem, 6vw, 6.2rem)/1 "Instrument Serif", Georgia, serif;
  letter-spacing: -.015em; text-wrap: balance;
  background: var(--acc-grad, linear-gradient(100deg, var(--acc) 0%, var(--acc-pale) 45%, var(--acc) 100%)) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 34%, transparent));
}
.phero__sub { max-width: 62ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.phero__cta { margin-top: 36px; }
.phero :focus-visible { outline-color: #fff; }
.phero__cue {
  position: absolute; left: 50%; bottom: 30px;
  width: 24px; height: 38px; margin-left: -12px;
  border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 14px;
  opacity: clamp(0, calc(1 - var(--p, 0) * 8), 1);
}
.phero__cue::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: #fff;
  animation: cue 1.8s var(--ease) infinite;
}
@media (prefers-reduced-motion: no-preference) {
  /* entrada al cargar (is-anim → is-on, en site.js): la foto se asienta, las letras suben y
     la cursiva se enfoca; después, la cursiva corre en sus colores como en la portada */
  .phero.is-anim .phero__media { transform: scale(1.12); filter: brightness(.35); transition: transform 2.8s var(--ease), filter 1.8s var(--ease); }
  .phero.is-anim .phero__a { letter-spacing: .18em; transition: letter-spacing 1.4s var(--ease) .15s; }
  .phero.is-anim .phero__a i { transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .5s; transition-delay: calc(.25s + var(--i) * 30ms); }
  .phero.is-anim .phero__b { opacity: 0; filter: blur(16px) drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 34%, transparent)); transform: scale(1.1) translateY(10px); transition: opacity 1s var(--ease) .65s, filter 1.2s var(--ease) .65s, transform 1.4s var(--ease) .65s; }
  .phero.is-anim :is(.phero__sub, .phero__cta, .phero__extra) { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .25s, color .25s; }
  .phero.is-anim .phero__sub { transition-delay: 1.05s, 1.05s, 0s, 0s; }
  .phero.is-anim .phero__cta { transition-delay: 1.2s, 1.2s, 0s, 0s; }
  .phero.is-anim .phero__extra { transition-delay: 1.4s, 1.4s, 0s, 0s; }
  .phero.is-on .phero__media { transform: none; filter: none; }
  .phero.is-on .phero__a { letter-spacing: .04em; }
  .phero.is-on .phero__a i { transform: none; opacity: 1; }
  .phero.is-on .phero__b { opacity: 1; filter: blur(0) drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 34%, transparent)); transform: none; animation: end-flow 6s linear 2.2s infinite; }
  .phero.is-on :is(.phero__sub, .phero__cta, .phero__extra) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phero__img { transform: none; }
  .phero__txt { opacity: 1; transform: none; }
  .phero__cue::after { animation: none; }
}
@media (max-width: 640px) {
  .phero { padding: calc(var(--nav-h) + 40px) 0 104px; }
  .phero__title { margin: 0 0 22px; }
  .phero__b { max-width: 11em; }
}

/* ---------- "No venimos a sustituir tus sistemas" (portada) ----------
   La idea del vídeo de lanzamiento, justo bajo la escena inicial: el panel de red de tus
   sistemas, con sus cables de siempre y los tres de las herramientas conectados entre ellos
   (media/sistemas/, IA de Freepik), cada uno en su color. Con sistemas.js (.is-seq) la escena
   queda fija y una cámara suavizada avanza con el scroll: el panel se enciende, el dato sube por
   los tres cables y cada puerto se valida; los textos entran por pasos (data-step 1 → 3), a la
   izquierda en pantalla ancha y abajo en vertical. Sin él o con "reducir movimiento": la foto
   con todos los textos. */
.feed { position: relative; background: #05090b; color: #fff; }
.feed__stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 48px) 0 80px;
}
.feed__cam { position: absolute; inset: 0; z-index: -3; }
.feed__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 55%; }
.feed__dim, .feed__glow, .feed__seal { display: none; }
.feed__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 9, 11, .95) 0%, rgba(5, 9, 11, .78) 55%, rgba(5, 9, 11, .45) 100%);
}
.feed__txt { display: flex; flex-direction: column; align-items: center; gap: 44px; text-align: center; }
/* las dos voces de la portada */
.feed__title, .feed__end { display: flex; flex-direction: column; align-items: center; letter-spacing: 0; line-height: 1; text-wrap: initial; }
.feed__a, .feed__end-a {
  display: block; padding: 0 .08em .08em;
  font: 800 clamp(1.1rem, 2.45vw, 2.5rem)/1.12 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; text-wrap: balance;
}
.feed__b, .feed__end-b {
  display: block; margin-top: .06em; padding: 0 .12em .12em;
  font: italic 400 clamp(2.5rem, 5.8vw, 6rem)/1 "Instrument Serif", Georgia, serif;
  letter-spacing: -.015em; text-wrap: balance;
  background: linear-gradient(100deg, #45d69e 0%, #3cc4f2 38%, #ffa25a 70%, #45d69e 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(60, 196, 242, .3));
}
/* tres herramientas: fichas blancas con su logo y lo que hacen con el dato, en su color */
.feed__tools { display: flex; flex-direction: column; align-items: center; }
.feed__lead {
  font: 800 clamp(.95rem, 1.6vw, 1.45rem)/1.2 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.feed__list { display: flex; justify-content: center; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.feed__tool {
  --ink: #13865d;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: clamp(150px, 13vw, 190px); padding: 16px 16px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .75);
}
.feed__tool--scrapp { --ink: #c4570f; }
.feed__tool--probatus { --ink: #13865d; }
.feed__tool--inprogest { --ink: #0a7fb5; }
.feed__logo { display: grid; place-items: center; width: 100%; height: 58px; padding: 7px 12px; border-radius: 12px; background: #fff; }
.feed__logo .tlogo { height: 30px; max-width: 100%; object-position: center; }
.feed__tool--scrapp .tlogo { height: 44px; }   /* su logo es casi cuadrado */
.feed__logo .tlogo--txt { font-size: 1.05rem; }
.feed__logo.is-3d { position: relative; isolation: isolate; height: 74px; padding: 0; border-radius: 0; background: none; }
.feed__logo.is-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.feed__logo.is-3d .tlogo { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.feed__verb { font: italic 400 clamp(1.5rem, 2.2vw, 2.1rem)/1 "Instrument Serif", Georgia, serif; color: var(--ink); }
.feed__what { margin-top: 22px; font: italic 400 clamp(1.5rem, 2.6vw, 2.5rem)/1.1 "Instrument Serif", Georgia, serif; color: rgba(255, 255, 255, .92); }

/* escena fija: la cámara (sistemas.js) mueve la foto */
.feed.is-seq { height: 380vh; }
.feed.is-seq .feed__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0; display: block; }
.feed.is-seq .feed__cam { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.feed.is-seq.is-tall .feed__cam {   /* en vertical la foto no llena la pantalla: sus bordes se funden con el fondo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}
.feed.is-seq .feed__img { object-fit: fill; }
/* el panel se enciende: baja la penumbra y brillan los tres conectores */
.feed.is-seq .feed__dim { display: block; position: absolute; inset: 0; background: #05090b; opacity: calc((1 - var(--lit, 0)) * .55); }
.feed.is-seq .feed__glow {
  --c: #45d69e;
  display: block; position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 62%);
  mix-blend-mode: screen; opacity: calc(var(--lit, 0) * .7);
}
.feed__glow--scrapp { --c: #ffa25a; }
.feed__glow--inprogest { --c: #3cc4f2; }
.feed.is-seq:is([data-step="2"], [data-step="3"]) .feed__glow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .feed.is-seq[data-step="2"] .feed__glow { animation: plug-pulse 1.6s ease-in-out infinite; }
  .feed.is-seq[data-step="2"] .feed__glow--probatus { animation-delay: .25s; }
  .feed.is-seq[data-step="2"] .feed__glow--inprogest { animation-delay: .5s; }
}
@keyframes plug-pulse { 50% { opacity: .55; } }
.feed__flow { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
/* el sello de validado sobre cada puerto; no crece con la cámara (--s) */
.feed.is-seq .feed__seal {
  display: grid; place-items: center;
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7af0c4, #22b98a 70%);
  box-shadow: 0 0 0 6px rgba(69, 214, 158, .22), 0 0 40px rgba(69, 214, 158, .7);
  opacity: 0; transform: scale(calc(.3 / var(--s, 1)));
  transition: opacity .4s var(--ease), transform .7s cubic-bezier(.3, 1.6, .5, 1);
}
.feed__seal svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.feed.is-seq[data-step="3"] .feed__seal { opacity: 1; transform: scale(calc(1 / var(--s, 1))); }
.feed.is-seq[data-step="3"] .feed__seal:nth-of-type(2) { transition-delay: .18s; }
.feed.is-seq[data-step="3"] .feed__seal:nth-of-type(3) { transition-delay: .36s; }
/* textos uno sobre otro, entrando por pasos: en pantalla ancha, columna a la izquierda */
.feed.is-seq .feed__shade { background: linear-gradient(90deg, rgba(5, 9, 11, .94) 0%, rgba(5, 9, 11, .78) 30%, rgba(5, 9, 11, .2) 52%, rgba(5, 9, 11, 0) 64%); }
.feed.is-seq .feed__txt {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  display: grid; align-items: center; justify-items: start; gap: 0; text-align: left;
}
.feed.is-seq .feed__txt > * { grid-area: 1 / 1; max-width: min(660px, 48vw); }
.feed.is-seq:not(.is-tall) :is(.feed__a, .feed__end-a) { font-size: clamp(1rem, 1.85vw, 2rem); }
.feed.is-seq :is(.feed__title, .feed__end) { align-items: flex-start; }
.feed.is-seq .feed__tools { align-items: flex-start; }
.feed.is-seq .feed__list { justify-content: flex-start; }
.feed.is-seq.is-tall .feed__shade { background: linear-gradient(0deg, rgba(5, 9, 11, .95) 0%, rgba(5, 9, 11, .75) 34%, rgba(5, 9, 11, 0) 56%); }
.feed.is-seq.is-tall .feed__txt { top: auto; bottom: 6vh; transform: none; justify-items: center; align-items: end; text-align: center; }
.feed.is-seq.is-tall .feed__txt > * { max-width: none; }
.feed.is-seq.is-tall :is(.feed__title, .feed__end, .feed__tools) { align-items: center; }
.feed.is-seq.is-tall .feed__list { justify-content: center; }
.feed.is-seq :is(.feed__title, .feed__tools, .feed__end) {
  opacity: 0; transform: translateY(28px); pointer-events: none;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.feed.is-seq[data-step="1"] .feed__title,
.feed.is-seq[data-step="2"] .feed__tools,
.feed.is-seq[data-step="3"] .feed__end { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.feed.is-seq:is([data-step="2"], [data-step="3"]) .feed__title,
.feed.is-seq[data-step="3"] .feed__tools { transform: translateY(-28px); }
/* "venimos a alimentarlos" llega cuando se enciende el panel */
.feed.is-seq .feed__b { opacity: 0; filter: blur(14px) drop-shadow(0 0 26px rgba(60, 196, 242, .3)); transform: scale(1.08) translateY(8px); transform-origin: left center; transition: opacity .9s var(--ease), filter 1.1s var(--ease), transform 1.2s var(--ease); }
.feed.is-seq.is-lit .feed__b { opacity: 1; filter: blur(0) drop-shadow(0 0 26px rgba(60, 196, 242, .3)); transform: none; animation: end-flow 6s linear 1.2s infinite; }
.feed.is-seq[data-step="3"] .feed__end-b { animation: end-flow 6s linear 1s infinite; }
/* las tres fichas entran una tras otra */
.feed.is-seq .feed__tool { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.feed.is-seq[data-step="2"] .feed__tool { opacity: 1; transform: none; }
.feed.is-seq[data-step="2"] .feed__tool:nth-child(1) { transition-delay: .25s; }
.feed.is-seq[data-step="2"] .feed__tool:nth-child(2) { transition-delay: .4s; }
.feed.is-seq[data-step="2"] .feed__tool:nth-child(3) { transition-delay: .55s; }
@media (max-width: 640px) {
  .feed__txt { gap: 40px; }
  .feed.is-seq .feed__seal { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .feed__tools, .feed__list { width: 100%; }
  .feed__list { gap: 8px; margin-top: 18px; }
  .feed__tool { width: auto; flex: 1 1 0; min-width: 0; padding: 12px 8px 12px; gap: 10px; border-radius: 16px; }
  .feed__logo { height: 44px; padding: 5px 8px; border-radius: 10px; }
  .feed__logo .tlogo { height: 20px; }
  .feed__tool--scrapp .tlogo { height: 34px; }
  .feed__logo .tlogo--txt { font-size: .8rem; }
  .feed__logo.is-3d { height: 54px; }
  .feed__verb { font-size: clamp(1rem, 4.6vw, 1.25rem); }
  .feed__what { margin-top: 16px; }
}

/* ---------- Franja de contexto: el texto se enciende al leerlo ---------- */
.strip { padding: 128px 0 112px; background: var(--paper); }
.strip p {
  font: 500 clamp(1.45rem, 2.5vw, 2.3rem)/1.22 var(--f-head);
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 31em;
}
.strip strong { font-weight: 600; }
.js [data-reveal].is-split .w { color: var(--off); transition: color .45s var(--ease); }
.js [data-reveal].is-split .w.on { color: var(--ink); }
.strip__panel { position: relative; }

/* Banda de fotos en forma de flecha (portada), se desplaza con el scroll */
.chevrons { overflow: hidden; padding: 8px 0 128px; background: var(--paper); }
.chevrons__track {
  display: flex; width: max-content;
  transform: translateX(calc(4vw - var(--p, .5) * 26vw));
  will-change: transform;
}
.chevron {
  flex: none; width: 34vw; aspect-ratio: 16 / 10; margin-right: -6vw;
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%, 24% 50%);
  overflow: hidden;
}
.chevron img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Secciones ---------- */
.sec { padding: 128px 0; }
.sec--alt { background: var(--white); }
.sec__head { max-width: 860px; margin-bottom: 64px; }
.sec__head h2 { font-size: clamp(2.1rem, 4.3vw, 3.8rem); }
.sec__head p { margin-top: 22px; font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Herramientas: un apartado para cada una ----------
   Cada apartado usa los colores de su herramienta y muestra su pantalla real
   (fragmento del vídeo de lanzamiento). Dos opciones de fondo/animación para comparar:
   data-opcion="1" "Mundo del vídeo" (oscuro) · data-opcion="2" "Luz de marca" (claro).
   --p (0 → 1, paso del apartado por la pantalla) lo calcula site.js.
   Cada herramienta ocupa la pantalla entera: con movimiento, site.js añade .is-stacked y
   cada apartado se queda fijo mientras el siguiente sube por encima (--stick, --cover). */
.core-apps__head { position: relative; isolation: isolate; padding-bottom: 72px; background: var(--paper); }
.core-apps__head .sec__head { margin-inline: auto; margin-bottom: 0; text-align: center; }
.core-apps__head .sec__head p { margin-inline: auto; }
[data-opcion="1"] .core-apps__head { background: var(--black); color: var(--on-black); }
[data-opcion="1"] .core-apps__head h2 { color: #fff; }
[data-opcion="1"] .core-apps__head p { color: var(--on-black-soft); }

.app {
  --k: clamp(0, calc((var(--p, 1) - .08) * 3.2), 1);   /* entrada de la pantalla */
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 56px) 0 72px;
}
.app--probatus  { --c: #1f775a; --c-ink: #1f775a; --c-deep: #041f16; --c-mid: #0b4733; --c-glow: #45d69e; --c-tint: #eaf4ef; }
.app--inprogest { --c: #0075a8; --c-ink: #0075a8; --c-deep: #021725; --c-mid: #054466; --c-glow: #3cc4f2; --c-tint: #e8f2f8; }
.app--scrapp    { --c: #ff751f; --c-ink: #b4500f; --c-deep: #1f0c02; --c-mid: #6a2a05; --c-glow: #ffa25a; --c-tint: #fff2e8; --c-2: #007858; }
.app__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.app__in {
  max-width: 1440px;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
  gap: clamp(48px, 5vw, 96px); align-items: center;
}
.app--inprogest .app__in { grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); }
.app__txt { container-type: inline-size; }
.app--inprogest .app__txt { order: 2; }
.app__logo {
  display: inline-flex; align-items: center;
  height: 58px; padding: 11px 16px; border-radius: 14px;
  background: #fff; text-decoration: none;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .5);
}
.app__logo .tlogo { height: 100%; width: auto; max-width: 170px; object-position: left center; }
.app__logo .tlogo--txt { font-size: 1.15rem; }
.app__name {
  margin-top: 14px; letter-spacing: -.05em; line-height: .92; overflow-wrap: normal; word-break: keep-all;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-size: clamp(2.4rem, 15.5cqi, 5.4rem);   /* el nombre llena su columna sin partirse (INPROGEST, el más largo) */
}
/* Descripción en la Archivo expandida del titular de portada ("LA RAP DE ENVASES"), en
   minúsculas y semi negrita para que se lea de corrido */
.app__desc {
  margin-top: 28px; max-width: 24ch;
  font: 600 clamp(1.3rem, 1.65vw, 1.8rem)/1.3 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .005em; text-wrap: pretty;
}
.app__link {
  display: inline-flex; align-items: center; margin-top: 32px;
  padding: 13px 20px; border-radius: 999px;
  font: 500 .92rem/1 var(--f-mono); text-decoration: none;
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.app__link:hover { transform: translateX(4px); }
.app__screen {
  position: relative; margin: 0;
  border-radius: 18px; overflow: hidden;
  background: #fff;
  will-change: transform;
}
.app__bar { display: flex; gap: 7px; padding: 11px 14px; background: #f1f3f5; border-bottom: 1px solid #e2e6ea; }
.app__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d8dd; }
.app__screen video { display: block; width: 100%; height: auto; aspect-ratio: 2.1 / 1; object-fit: cover; background: #fff; }
.app :focus-visible { outline-color: currentColor; }

/* ----- Pila: cada apartado se queda fijo y el siguiente sube por encima ----- */
.core-apps.is-stacked > * { position: sticky; top: var(--stick, 0px); }
.core-apps.is-stacked > * + * {
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0;
  box-shadow: 0 -28px 70px -24px rgba(0, 0, 0, .55);
}
.core-apps.is-stacked > *::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: #000; opacity: calc(var(--cover, 0) * var(--dim, .62));
}
.core-apps.is-stacked > * > .wrap {
  transform: translateY(calc(var(--cover, 0) * -5vh)) scale(calc(1 - var(--cover, 0) * .06));
  transform-origin: 50% 0;
}
/* el texto entra escalonado cuando el apartado llega */
@media (prefers-reduced-motion: no-preference) {
  .js .app__txt > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .app.is-in .app__txt > * { opacity: 1; transform: none; }
  .js .app.is-in .app__txt > :nth-child(2) { transition-delay: .08s; }
  .js .app.is-in .app__txt > :nth-child(3) { transition-delay: .16s; }
  .js .app.is-in .app__txt > :nth-child(4) { transition-delay: .24s; }
  .js .app__txt > .app__link { transform: none; transition: opacity .9s var(--ease) .32s, background-color .3s, color .3s, transform .4s var(--ease); }
  .js .app.is-in .app__txt > .app__link:hover { transform: translateX(4px); }
}

/* ----- Opción 1 · Mundo del vídeo: oscuro con el motivo de cada herramienta ----- */
[data-opcion="1"] .app {
  background: radial-gradient(85% 75% at 72% 42%, var(--c-mid), var(--c-deep) 72%);
  color: #fff;
}
[data-opcion="1"] .app--inprogest { background: radial-gradient(85% 75% at 28% 42%, var(--c-mid), var(--c-deep) 72%); }
[data-opcion="1"] .app__name { color: #fff; }
[data-opcion="1"] .app__desc { color: rgba(255, 255, 255, .84); }
[data-opcion="1"] .app__link { background: #fff; color: var(--ink); }
[data-opcion="1"] .app__link:hover { background: var(--c-glow); color: var(--ink); }
[data-opcion="1"] .app__screen {
  transform: perspective(1600px)
    rotateY(calc((1 - var(--k)) * -20deg)) rotateX(calc((1 - var(--k)) * 10deg))
    scale(calc(.88 + var(--k) * .12));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 90px -24px var(--c-glow);
}
[data-opcion="1"] .app--inprogest .app__screen { transform: perspective(1600px) rotateY(calc((1 - var(--k)) * 20deg)) rotateX(calc((1 - var(--k)) * 10deg)) scale(calc(.88 + var(--k) * .12)); }
[data-opcion="1"] .app__aurora, [data-opcion="1"] .app__word { display: none; }
[data-opcion="1"] .app__logo.is-3d { margin-left: -2px; }

/* Fondo: degradado de marca, oscurecido hacia el lado del texto */
[data-opcion="1"] .app__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-deep) 88%, transparent) 0%, color-mix(in srgb, var(--c-deep) 55%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb, var(--c-deep) 70%, transparent), transparent 34%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c-deep) 55%, transparent), transparent 22%),
    linear-gradient(color-mix(in srgb, var(--c-deep) 30%, transparent), color-mix(in srgb, var(--c-deep) 30%, transparent));
}
[data-opcion="1"] .app--inprogest .app__bg::after {
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--c-deep) 88%, transparent) 0%, color-mix(in srgb, var(--c-deep) 55%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb, var(--c-deep) 70%, transparent), transparent 34%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c-deep) 55%, transparent), transparent 22%),
    linear-gradient(color-mix(in srgb, var(--c-deep) 30%, transparent), color-mix(in srgb, var(--c-deep) 30%, transparent));
}

/* Logo 3D (apps3d.js): el logo extruido flota sobre un foco de luz suave de su color;
   el logo plano sigue dentro del enlace, invisible, como texto alternativo */
.app__logo.is-3d {
  display: block; position: relative; isolation: isolate;
  width: min(100%, 440px); height: auto; aspect-ratio: 3.4 / 1;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.app__logo.is-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.app__logo.is-3d .tlogo { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.app--probatus  { --logo-w: 67%; }
.app--inprogest { --logo-w: 90%; }
.app--scrapp    { --logo-w: 74%; }
:is([data-opcion="1"], .is-journey) .app__logo.is-3d::before {
  content: ""; position: absolute; z-index: -1;
  left: -8%; top: -12%; bottom: -34%; width: calc(var(--logo-w) + 16%);
  background: radial-gradient(closest-side, color-mix(in srgb, #fff 78%, var(--c-glow)) 0%, color-mix(in srgb, #fff 34%, transparent) 55%, transparent 100%);
  filter: blur(6px);
  opacity: .92;
}
.app__logo.is-3d:focus-visible { outline-offset: 6px; border-radius: 12px; }

/* ----- Opción 2 · Luz de marca: claro, aurora de color y nombre gigante en contorno ----- */
[data-opcion="2"] .app { --dim: .3; background: var(--c-tint); color: var(--ink); }
[data-opcion="2"] .app__name { color: var(--c-ink); }
[data-opcion="2"] .app__desc { color: var(--ink-soft); }
[data-opcion="2"] .app__link { background: var(--c-ink); color: #fff; }
[data-opcion="2"] .app__link:hover { background: var(--ink); color: #fff; }
[data-opcion="2"] .app__screen {
  transform: translateY(calc((1 - var(--k)) * 90px)) scale(calc(.92 + var(--k) * .08));
  box-shadow: 0 0 0 1px rgba(11, 12, 14, .06), 0 50px 90px -46px color-mix(in srgb, var(--c) 70%, #000);
}
.app__aurora {
  position: absolute; inset: -25%;
  background:
    radial-gradient(34% 30% at 28% 32%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
    radial-gradient(30% 28% at 74% 66%, color-mix(in srgb, var(--c-glow) 34%, transparent), transparent 70%),
    radial-gradient(26% 24% at 60% 20%, color-mix(in srgb, var(--c-2, var(--c)) 18%, transparent), transparent 70%);
  filter: blur(24px);
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate(6%, -5%) rotate(10deg) scale(1.1); } }
.app__word { position: absolute; inset: 0; }
.app__word::before {
  content: attr(data-word);
  position: absolute; left: 0; top: 50%;
  font: 800 23vw/1 var(--f-head); letter-spacing: -.06em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 26%, transparent);
  transform: translate(calc(8vw - var(--p, .5) * 46vw), -50%);
}

/* ---------- El viaje del core (journey.js) ----------
   Escenas reales fijas mientras se recorre .journey con el scroll. Cada foto va en una caja
   (.jr-cam) con su proporción que cubre la pantalla; journey.js la mueve como una cámara y
   encaja la pantalla de cada herramienta en el portátil de la foto. La cabecera y los tres
   apartados se colocan encima como capas que se encienden en su parada. */
.core-apps.is-journey { background: #07090b; }
.journey { position: relative; height: 666vh; }   /* journey.js: SPAN (0,98) × 680vh */
.journey__stage {
  position: sticky; top: 0; overflow: hidden; isolation: isolate;
  height: 100vh; height: 100svh;
  background: #07090b; color: #fff;
}
.jr-scene, .jr-route { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.jr-route { width: 100%; height: 100%; display: block; }
.jr-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.jr-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jr-scene::after {   /* viñeta suave para que se lea como una toma de cine */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .45));
}

/* La pantalla de la herramienta, encajada en el portátil (matrix3d desde journey.js) */
.jr-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #f3f5f7; }
.core-apps.is-journey .jr-screen .app__screen {
  position: static; display: flex; flex-direction: column;
  width: 100%; height: 100%; margin: 0; border-radius: 0;
  opacity: 1; overflow: hidden; transform: none; box-shadow: none; background: #f3f5f7;
}
.core-apps.is-journey .jr-screen .app__bar { flex: none; padding: 14px 20px; gap: 10px; }
.core-apps.is-journey .jr-screen .app__bar i { width: 14px; height: 14px; }
.core-apps.is-journey .jr-screen video { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; flex: none; }
.jr-screen__gloss {   /* brillo del cristal de la pantalla */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .1) 100%);
}

/* Mapa: la red de la RAP y sus tres paradas */
.jr-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr-map__route, .jr-map__lit { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jr-map__route { stroke: rgba(255, 255, 255, .5); stroke-width: 2.4; stroke-dasharray: 2 7; }
.jr-map__lit {
  stroke: #fff; stroke-width: 3.2; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(120, 220, 255, .6));
}
.jr-map__dot { fill: var(--c); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px var(--c)); }
.jr-map__pulse { fill: none; stroke: var(--c); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: jr-pulse 2.4s ease-out infinite; }
@keyframes jr-pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* Sellos de homologado, haz que recorre la planta, documentos y validación de la bala */
.jr-seal {
  position: absolute; width: 2.4%; aspect-ratio: 1; border-radius: 50%;
  background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062b1f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 22px var(--c);
  transform: translate(-50%, -50%) scale(0);
}
.jr-seal--big { width: 3.4%; }
.jr-scan {
  position: absolute; top: 2%; height: 60%; width: 2px; margin-left: -1px; opacity: 0;
  background: linear-gradient(to bottom, transparent, #45d69e 18%, #45d69e 82%, transparent);
  box-shadow: 0 0 18px 4px rgba(69, 214, 158, .55);
}
.jr-doc {
  position: absolute; width: 2.1%; aspect-ratio: 3 / 4; border-radius: 3px;
  background:
    linear-gradient(#0075a8, #0075a8) 18% 14% / 50% 8% no-repeat,
    linear-gradient(#c9d3dc, #c9d3dc) 18% 36% / 66% 5% no-repeat,
    linear-gradient(#c9d3dc, #c9d3dc) 18% 52% / 56% 5% no-repeat,
    linear-gradient(#c9d3dc, #c9d3dc) 18% 68% / 62% 5% no-repeat,
    #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 14px rgba(60, 196, 242, .55);
  transform: translate(-50%, -50%) scale(0);
}
.jr-ripple {
  position: absolute; width: 5%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  border: 2px solid #45d69e; box-shadow: 0 0 20px rgba(69, 214, 158, .6), inset 0 0 14px rgba(69, 214, 158, .4);
  transform: translate(-50%, -50%) scale(.4);
}

.journey__shade { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none; }
.journey__shade--c { background: radial-gradient(62% 58% at 50% 52%, rgba(4, 6, 8, .74), rgba(4, 6, 8, .32) 60%, transparent 80%); }
.journey__shade--l { background: linear-gradient(90deg, rgba(4, 6, 8, .86) 0%, rgba(4, 6, 8, .58) 30%, rgba(4, 6, 8, 0) 54%); }
.journey__shade--r { background: linear-gradient(270deg, rgba(4, 6, 8, .86) 0%, rgba(4, 6, 8, .58) 30%, rgba(4, 6, 8, 0) 54%); }
.journey__flash { position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none; background: #f4f6f8; }
.journey__rail {
  position: absolute; z-index: 10; right: 32px; top: 50%;
  width: 2px; height: min(220px, 34vh); transform: translateY(-50%);
  background: rgba(255, 255, 255, .16); border-radius: 2px; opacity: 0;
}
.journey__rail i { position: absolute; inset: 0; background: #fff; border-radius: 2px; transform-origin: 50% 0; transform: scaleY(0); }
.journey__rail b {
  position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #07090b; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  transition: background-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.journey__rail b.is-on { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, .6); transform: scale(1.25); }

/* Titular del core en dos voces, como la portada y el cierre: mayúsculas expandidas y la
   cursiva con los colores del core */
.core-head__title { display: flex; flex-direction: column; align-items: center; letter-spacing: 0; line-height: 1; text-wrap: initial; }
.core-head__a {
  display: block; overflow: hidden; padding: 0 .08em .06em;
  font: 800 clamp(1.35rem, 3.2vw, 3.3rem)/1.05 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .05em; text-transform: uppercase; color: inherit;
}
.core-head__word { display: inline-block; white-space: nowrap; }
.core-head__a i { display: inline-block; font-style: normal; }
.core-head__b {
  display: block; max-width: 17em; margin-top: .06em; padding: 0 .12em .12em;
  font: italic 400 clamp(2.3rem, 5vw, 5.2rem)/1 "Instrument Serif", Georgia, serif;
  letter-spacing: -.012em; text-wrap: balance;
  background: linear-gradient(100deg, #45d69e 0%, #3cc4f2 38%, #ffa25a 70%, #45d69e 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(60, 196, 242, .3));
}
@media (prefers-reduced-motion: no-preference) {
  .is-journey .core-head__a { letter-spacing: .2em; transition: letter-spacing 1.4s var(--ease) .05s; }
  .is-journey .core-head__a i { transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .5s; transition-delay: calc(.1s + var(--i) * 40ms); }
  .is-journey .core-head__b { opacity: 0; filter: blur(16px) drop-shadow(0 0 24px rgba(60, 196, 242, .3)); transform: scale(1.1) translateY(10px); transition: opacity 1s var(--ease) .45s, filter 1.2s var(--ease) .45s, transform 1.4s var(--ease) .45s; }
  .is-journey .core-apps__head p { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) 1s, transform .9s var(--ease) 1s; }
  .is-journey .core-apps__head.is-on .core-head__a { letter-spacing: .05em; }
  .is-journey .core-apps__head.is-on .core-head__a i { transform: none; opacity: 1; }
  .is-journey .core-apps__head.is-on .core-head__b { opacity: 1; filter: blur(0) drop-shadow(0 0 24px rgba(60, 196, 242, .3)); transform: none; animation: end-flow 6s linear 1.8s infinite; }
  .is-journey .core-apps__head.is-on p { opacity: 1; transform: none; }
}

/* Cierre "Trazabilidad total": banda oscura bajo los apartados y, en el viaje, centrado sobre el
   mapa final iluminado. "TRAZABILIDAD" en Archivo expandida y "total" en Instrument Serif cursiva,
   rellena con los tres colores del core (PROBATUS, INPROGEST, SCRAPP). */
.core-apps__end { padding: 128px 0; background: #07090b; color: #fff; text-align: center; }
.core-apps__end .wrap { display: flex; flex-direction: column; align-items: center; }
.core-end__title {
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin: 0; letter-spacing: 0; line-height: 1; text-wrap: initial;
}
.core-end__a {
  display: block; overflow: hidden; padding: 0 .1em .06em;
  font: 800 clamp(1.7rem, 6.4vw, 6.2rem)/1 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.core-end__a i { display: inline-block; font-style: normal; }
.core-end__b {
  display: block; margin-top: -.08em; padding: 0 .12em .1em;
  font: italic 400 clamp(4.6rem, 15vw, 14rem)/.9 "Instrument Serif", Georgia, serif;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #45d69e 0%, #3cc4f2 38%, #ffa25a 70%, #45d69e 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(60, 196, 242, .35));
}
.core-end__title::after {   /* destello que recorre el titular, como el pulso de la red */
  content: ""; position: absolute; left: 50%; top: 46%; width: min(80vw, 980px); height: 2px;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 255, 255, .6);
  transform: translateX(-50%) scaleX(0); opacity: 0; pointer-events: none;
}
.core-end__sub { margin-top: 26px; max-width: 40ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.core-apps.is-journey .core-apps__end {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  padding: var(--nav-h) 0 0; background: none; opacity: 0; pointer-events: none;
}

/* Entrada en el viaje: las letras suben y se juntan, "total" pasa de
   borroso a nítido, un destello cruza y el texto final aparece; el degradado sigue fluyendo */
@media (prefers-reduced-motion: no-preference) {
  .is-journey .core-end__a { letter-spacing: .5em; transition: letter-spacing 1.4s var(--ease) .1s; }
  .is-journey .core-end__a i { transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .5s; transition-delay: calc(.15s + var(--i) * 45ms); }
  .is-journey .core-end__b { opacity: 0; filter: blur(18px) drop-shadow(0 0 28px rgba(60, 196, 242, .35)); transform: scale(1.18) translateY(10px); transition: opacity 1s var(--ease) .55s, filter 1.2s var(--ease) .55s, transform 1.4s var(--ease) .55s; }
  .is-journey .core-end__sub { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) 1.15s, transform .9s var(--ease) 1.15s; }
  .is-journey .core-apps__end.is-on .core-end__a { letter-spacing: .04em; }
  .is-journey .core-apps__end.is-on .core-end__a i { transform: none; opacity: 1; }
  .is-journey .core-apps__end.is-on .core-end__b {
    opacity: 1; filter: blur(0) drop-shadow(0 0 28px rgba(60, 196, 242, .35)); transform: none;
    animation: end-flow 6s linear 1.8s infinite;
  }
  .is-journey .core-apps__end.is-on .core-end__title::after { animation: end-sweep 1.6s var(--ease) .9s both; }
  .is-journey .core-apps__end.is-on .core-end__sub { opacity: 1; transform: none; }
}
@keyframes end-flow { to { background-position: -220% 0; } }
@keyframes end-sweep {
  0% { transform: translateX(-50%) scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}
.jr-map__flow { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #7fe3ff); transition: opacity .6s; }
.jr-map.is-live .jr-map__flow { opacity: 1; }

/* Cabecera del core sobre el mapa inicial */
.core-apps.is-journey .core-apps__head {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  padding: var(--nav-h) 0 0; background: none; opacity: 0; pointer-events: none;
}
.core-apps.is-journey .core-apps__head h2 { color: #fff; }
.core-apps.is-journey .core-apps__head p { color: rgba(255, 255, 255, .78); }

/* Cada apartado: solo su texto, encima de la escena (la pantalla va dentro del portátil 3D) */
.core-apps.is-journey .app {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center;
  min-height: 0; padding: var(--nav-h) 0 0; overflow: visible;
  background: none; color: #fff; opacity: 0; pointer-events: none;
}
.core-apps.is-journey .app__bg { display: none; }
.core-apps.is-journey .app__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr); }
.core-apps.is-journey .app--inprogest .app__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, .82fr); }
.core-apps.is-journey .app__txt { grid-column: 1; }
.core-apps.is-journey .app--inprogest .app__txt { grid-column: 2; }
.core-apps.is-journey .app.is-live .app__txt { pointer-events: auto; }
.core-apps.is-journey .app__name { color: #fff; }
.core-apps.is-journey .app__desc { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.core-apps.is-journey .app__link { background: #fff; color: var(--ink); }
.core-apps.is-journey .app__link:hover { background: var(--c-glow); color: var(--ink); }
.core-apps.is-journey .app__aurora, .core-apps.is-journey .app__word { display: none; }

/* ---------- Tu papel en el sistema: paneles de foto ----------
   Fondo blanco, "tu papel" en la cursiva del cierre con los colores del core y tres paneles
   altos e iguales; el que se señala se ensancha y los demás se ajustan.
   Todos muestran siempre su texto. Cada papel lleva su acento (--c). */
.sec--roles { position: relative; isolation: isolate; overflow: hidden; background: #fff; color: var(--ink); padding: 140px 0 150px; }
.sec--roles::before {   /* luz suave de los tres colores, como la red del mapa */
  content: ""; position: absolute; inset: -20% -10% auto; height: 70%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 30%, rgba(69, 214, 158, .08), transparent 70%),
    radial-gradient(40% 60% at 55% 20%, rgba(60, 196, 242, .07), transparent 70%),
    radial-gradient(40% 60% at 88% 35%, rgba(255, 162, 90, .07), transparent 70%);
}
.sec--roles .sec__head { margin-bottom: 56px; }
.sec--roles .sec__head h2 { color: var(--ink); font-size: clamp(2.4rem, 5.2vw, 4.8rem); letter-spacing: -.045em; }
.sec--roles .sec__head .hl {
  font: italic 400 1.12em/1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; padding-right: .06em;
  background: linear-gradient(100deg, #1f9a6e, #0a86c0 50%, #f06a1a);   /* tonos de marca que se leen sobre blanco */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roles { display: flex; gap: 16px; height: clamp(540px, 72vh, 760px); }
.role {
  --c: #45d69e;
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 34px;
  border-radius: 26px;
  background: #0d1013;
  color: #fff; text-decoration: none;
  box-shadow: 0 30px 60px -36px rgba(10, 20, 30, .45);
  transition: flex-grow .9s var(--ease), box-shadow .5s;
}
.role:hover, .role:focus-visible { flex-grow: 1.55; }
.role:hover, .role:focus-visible { box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--c) 75%, rgba(10, 20, 30, .6)); }
.role__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) brightness(.9);
  transform: scale(1.04);
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}
.role:hover .role__img, .role:focus-visible .role__img { transform: scale(1.1); filter: saturate(1) brightness(1); }
.role::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 55% at 50% 110%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(7, 9, 11, .2) 0%, rgba(7, 9, 11, 0) 30%, rgba(7, 9, 11, .62) 60%, rgba(7, 9, 11, .94) 100%);
}
.role:hover { color: #fff; }
.role h3 { font-size: clamp(2rem, 3.2vw, 3.2rem); letter-spacing: -.045em; color: #fff; }
.role h3::before {   /* acento del papel, crece al señalarlo */
  content: ""; display: block; width: 34px; height: 3px; margin-bottom: 18px; border-radius: 3px;
  background: var(--c); box-shadow: 0 0 14px var(--c);
  transition: width .8s var(--ease);
}
.role:hover h3::before, .role:focus-visible h3::before { width: 76px; }
.role p { color: rgba(255, 255, 255, .86); max-width: 38ch; }
.role__go {
  align-self: flex-start; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 .92rem/1 var(--f-body); color: #fff; white-space: nowrap;
  transition: background-color .35s, color .35s, box-shadow .35s;
}
.role:hover .role__go, .role:focus-visible .role__go { background: var(--c); color: #07090b; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); }
.role:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-roles] .role { opacity: 0; transform: translateY(60px); transition: flex-grow .9s var(--ease), box-shadow .5s, opacity 1s var(--ease), transform 1.2s var(--ease); }
  .js [data-roles].is-in .role { opacity: 1; transform: none; }
  .js [data-roles].is-in .role:nth-child(2) { transition-delay: 0s, 0s, .12s, .12s; }
  .js [data-roles].is-in .role:nth-child(3) { transition-delay: 0s, 0s, .24s, .24s; }
}

/* ---------- Secciones blancas de las páginas interiores ----------
   Como "Elige tu papel" en la portada: fondo blanco, una luz suave del color de la página
   arriba y la parte resaltada de cada titular en la cursiva de Instrument Serif, en color. */
:is(.sec--needs, .sec--light) { position: relative; isolation: isolate; background: #fff; }
:is(.sec--needs, .sec--light)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none;
  background: var(--glow,
    radial-gradient(45% 70% at 15% 0%, color-mix(in srgb, var(--acc, #45d69e) 13%, transparent), transparent 70%),
    radial-gradient(40% 60% at 85% 10%, color-mix(in srgb, var(--acc, #45d69e) 8%, transparent), transparent 70%));
}
:is(.p-para-tu-scrap, .p-poseedores, .p-gestores, .p-normativa) .sec h2 .hl {
  font: italic 400 1.12em/1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; padding-right: .06em;
  background: var(--hl-grad, linear-gradient(100deg, var(--acc-ink, #13865d), color-mix(in srgb, var(--acc-ink, #13865d) 55%, #0b0c0e)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec--light .kicker { font: 500 .76rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sec--light .kicker::before { width: 7px; height: 7px; background: var(--acc-ink, var(--ink)); }
.sec--light .faq__item { background: var(--paper); box-shadow: none; }
.sec--light .faq__item[open] { background: #fff; box-shadow: var(--shadow); }

/* ---------- Necesidad → solución (páginas de perfil) ----------
   Fondo blanco, como "Elige tu papel". Cada necesidad es un panel de foto oscura (la escena de
   su herramienta con su pantalla en el portátil, como en el viaje de la portada) con el texto
   encima, alternando de lado. En pantalla ancha se quedan fijos y cada uno sube sobre el
   anterior, que se aleja un poco (--cover, en site.js). Cada panel lleva el color de su
   herramienta (--c, la versión luminosa sobre oscuro). */
.sec--needs { padding: 140px 0 150px; }
.sec--needs .sec__head { margin-bottom: 56px; }
.sec--needs .sec__head h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); letter-spacing: -.045em; }
.needs { display: flex; flex-direction: column; gap: 28px; }
.need {
  --c: #45d69e;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, calc(100vh - var(--nav-h) - 72px), 760px);
  padding: 64px;
  border-radius: 28px;
  background: #0b0d10; color: #fff;
  box-shadow: 0 40px 80px -44px rgba(10, 20, 30, .55);
}
.need--probatus { --c: #45d69e; }
.need--inprogest { --c: #3cc4f2; }
.need--scrapp { --c: #ffa25a; }
.need__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.8s var(--ease); }
.need__img:not([src*="/perfil/"]) { filter: brightness(.72) saturate(.9); }   /* las fotos de día, al tono de las escenas del viaje */
.need::before {   /* sombra del lado del texto y luz del color de la herramienta al pie */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 0% 105%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(7, 9, 11, .95) 0%, rgba(7, 9, 11, .86) 36%, rgba(7, 9, 11, .3) 64%, rgba(7, 9, 11, .06) 100%);
}
.need:nth-child(even) { justify-content: flex-end; }
.need:nth-child(even)::before {
  background:
    radial-gradient(55% 70% at 100% 105%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
    linear-gradient(270deg, rgba(7, 9, 11, .95) 0%, rgba(7, 9, 11, .86) 36%, rgba(7, 9, 11, .3) 64%, rgba(7, 9, 11, .06) 100%);
}
.need__in { position: relative; z-index: 1; width: min(100%, 520px); }
.need__title { font-size: clamp(2rem, 3vw, 2.9rem); letter-spacing: -.04em; color: #fff; }
.need__role { margin-top: 14px; font: 500 .78rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.need__ctx { margin-top: 22px; font-size: 1.04rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.need__ctx strong { color: #fff; }
.need .dato { background: rgba(255, 255, 255, .14); color: #fff; }
.need__sol {
  position: relative; margin-top: 40px; padding: 36px 28px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.need__arrow {   /* de la necesidad a la solución */
  position: absolute; left: 26px; top: -22px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c); color: #07090b;
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}
.need__arrow .ico { width: 20px; height: 20px; transform: rotate(90deg); }
/* la solución, en la Archivo expandida de las descripciones de las herramientas en la portada */
.need__sol p {
  font: 600 clamp(1.04rem, 1.25vw, 1.2rem)/1.42 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: -.005em; color: #fff;
}
.need__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.need__sol a {
  display: inline-flex; align-items: center;
  padding: 10px 15px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
  font: 500 .84rem/1 var(--f-mono); color: #fff; text-decoration: none;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.need__sol a:hover { background: var(--c); color: #07090b; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
.need :focus-visible { outline-color: var(--c); }
@media (min-width: 961px) and (min-height: 720px) {
  .need { position: sticky; top: calc(var(--nav-h) + 24px); }
  .need:nth-child(2) { top: calc(var(--nav-h) + 38px); }
  .need:nth-child(3) { top: calc(var(--nav-h) + 52px); }
}
@media (min-width: 961px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .need { transform: scale(calc(1 - var(--cover, 0) * .06)); transform-origin: 50% 0; }
  .need::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #07090b; opacity: calc(var(--cover, 0) * .6); }
}
@media (prefers-reduced-motion: no-preference) {
  /* al llegar el panel, su foto se asienta y el texto sube escalonado */
  .js .need .need__in > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
  .js .need .need__in > :nth-child(2) { transition-delay: .12s; }
  .js .need .need__in > :nth-child(3) { transition-delay: .26s; }
  .js .need.is-in .need__in > * { opacity: 1; transform: none; }
  .js .need .need__img { transform: scale(1.08); }
  .js .need.is-in .need__img { transform: none; }
}
@media (max-width: 960px) {
  .sec--needs { padding: 96px 0 104px; }
  .needs { gap: 18px; }
  .need, .need:nth-child(even) { display: block; min-height: 0; padding: 0; border-radius: 22px; }
  .need__img {
    position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 10;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .need::before, .need:nth-child(even)::before { background: radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }
  .need__in { width: auto; margin-top: -40px; padding: 0 28px 30px; }
}
@media (max-width: 640px) {
  .need__in { padding: 0 20px 24px; }
  .need__title { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .need__sol { padding: 34px 20px 22px; }
  .need__arrow { left: 20px; }
}
.dato { font-family: var(--f-mono); font-weight: 500; color: var(--ink); background: #e5eaee; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }

/* ---------- Banda OTS: el equipo de la OTS asesorando, al atardecer ---------- */
.band-wrap {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--black);
  padding: 168px 0;
  color: #fff;
  text-align: center;
}
.band-wrap__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.band-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 11, 13, .55), rgba(10, 11, 13, .72));
}
.band { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.band__txt { max-width: 860px; min-width: 0; overflow-wrap: anywhere; }
.band h2 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); color: #fff; }
.band p { margin: 22px auto 0; color: rgba(255, 255, 255, .88); font-size: 1.15rem; max-width: 58ch; }
.band .band__lead { margin-top: 18px; font: italic 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.15 "Instrument Serif", Georgia, serif; color: #fff; max-width: 44ch; }
.band .band__lead + p { margin-top: 16px; }
.band :focus-visible { outline-color: #fff; }

/* ---------- FAQ / acordeón ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.faq__item {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 12, 14, .04);
  transition: box-shadow .4s var(--ease);
}
.sec--alt .faq__item { background: var(--paper); box-shadow: none; }
.faq__item[open] { box-shadow: var(--shadow); }
.sec--alt .faq__item[open] { background: var(--white); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 22px 26px;
  font: 500 1.12rem/1.35 var(--f-head); letter-spacing: -.015em; color: var(--ink);
  border-radius: 20px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 12px 1.5px no-repeat,
    linear-gradient(#fff, #fff) center / 1.5px 12px no-repeat,
    var(--ink);
  transition: transform .45s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item > :not(summary) { padding: 0 26px; color: var(--ink-soft); }
.faq__item > :last-child { padding-bottom: 24px; }
.faq__item ul { margin: 10px 0 0; padding-left: 46px; }
.faq__item li { margin: 6px 0; }
.faq__more { display: inline-flex; margin-top: 14px; font: 500 .88rem/1 var(--f-mono); text-decoration: none; }
.faq__more:hover { text-decoration: underline; }

/* ---------- Normativa ----------
   Las tres claves van en la cabecera, bajo el botón del BOE: cristal oscuro sobre la foto,
   cada una con su color. */
.phero__extra { width: 100%; margin-top: 64px; text-align: left; }
.phero:has(.phero__extra) { padding-bottom: 104px; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.key {
  --c: #45d69e;
  position: relative; overflow: hidden;
  padding: 36px 32px 32px;
  border-radius: 22px;
  background: radial-gradient(90% 70% at 0% 110%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), rgba(10, 12, 15, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.key:nth-child(2) { --c: #3cc4f2; }
.key:nth-child(3) { --c: #ffa25a; }
.key::before {   /* el hilo del color de cada clave */
  content: ""; position: absolute; left: 34px; top: 0; width: 56px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c); box-shadow: 0 0 16px var(--c);
}
.key p:not(.key__dato) { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
/* el dato, en la Archivo expandida de los titulares de portada */
.key__dato {
  font: 800 clamp(1.9rem, 3vw, 2.8rem)/1 var(--f-head); font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: -.01em; color: var(--c);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px !important;
}
/* marco normativo: título a la izquierda y su texto a la derecha, separado del catálogo por una línea */
.marco {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start;
  padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--line);
}
.marco h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); letter-spacing: -.045em; }
.marco__txt p { font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.marco__txt p + p { margin-top: 18px; }
.norm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.norm h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 14px 0 14px; }
.norm h2 + .ler { margin-top: 28px; }
.norm__sub { color: var(--ink-soft); margin-bottom: 28px; }
.ler {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .97rem;
}
.ler th {
  text-align: left; padding: 16px 20px;
  background: var(--black); color: var(--on-black-soft);
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
}
.ler td { overflow-wrap: anywhere; padding: 14px 20px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-soft); }
.ler tbody tr { transition: background-color .15s; }
.ler tbody tr:hover { background: var(--paper); }
.ler td:first-child { font: 500 .95rem/1.5 var(--f-mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ler--pel { background: #fdf5f3; }
.ler tbody .ler--pel:hover { background: #fbece8; }
.ler--pel td:first-child { color: var(--err); }
.norm__foot { margin-top: 14px; font-size: .9rem; color: var(--ink-faint); }

/* ---------- Legal ---------- */
.legal { padding-top: 96px; padding-bottom: 128px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.045em; margin: 18px 0 30px; }
.legal h2 { font-size: 1.45rem; letter-spacing: -.025em; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }

/* ---------- Pie ----------
   Banda oscura y compacta, rematada arriba por un hilo con los tres colores del core: marca a
   la izquierda y tres columnas de enlaces, cada una con el punto de su color; las herramientas,
   con el suyo. */
.foot {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: 64px;
  background:
    radial-gradient(40% 120% at 12% 0%, rgba(69, 214, 158, .07), transparent 70%),
    radial-gradient(40% 120% at 50% 0%, rgba(60, 196, 242, .06), transparent 70%),
    radial-gradient(40% 120% at 88% 0%, rgba(255, 162, 90, .06), transparent 70%),
    #07090c;
  color: var(--on-black-soft);
}
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #45d69e 22%, #3cc4f2 50%, #ffa25a 78%, transparent);
  opacity: .75;
}
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 64px; align-items: start; }
.foot__brand img { width: 184px; }
.foot__brand p { margin-top: 16px; max-width: 32ch; color: var(--on-black-soft); font-size: .95rem; line-height: 1.55; }
/* correo de la OTS (texto, sin enlace), con el sobre en el hilo de colores del core */
.foot__brand .foot__mail {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font: 500 .95rem/1.3 var(--f-body); color: #fff;
}
.foot__mail::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: linear-gradient(90deg, #45d69e, #3cc4f2, #ffa25a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foot__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__col { --c: #45d69e; display: flex; flex-direction: column; align-items: flex-start; }
.foot__col--tools { --c: #3cc4f2; }
.foot__col--legal { --c: #ffa25a; }
.foot__col h2 {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8a929a;
}
.foot__col h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.foot__col a {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 0;
  font: 500 .95rem/1.3 var(--f-body); color: rgba(255, 255, 255, .84); text-decoration: none;
  transition: color .2s, transform .35s var(--ease);
}
.foot__col a:hover { color: #fff; transform: translateX(3px); }
.foot__tool::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--t); }
.foot__tool--probatus { --t: #45d69e; }
.foot__tool--inprogest { --t: #3cc4f2; }
.foot__tool--scrapp { --t: #ffa25a; }
.foot :focus-visible { outline-color: #fff; }
.foot__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px;
  margin-top: 52px; padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font: 500 .7rem/1.5 var(--f-mono); letter-spacing: .04em; color: #7d858c;
}

/* ---------- Pantallas táctiles: zonas de pulsación de 44 px ---------- */
@media (pointer: coarse) {
  .faq__more { display: inline-flex; align-items: center; min-height: 44px; }
  .need__sol a { min-height: 44px; }
  .foot__col a { min-height: 44px; padding: 0; }
}

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .role:hover .role__img, .role:focus-visible .role__img, .core-diagram__piece:hover { transform: scale(1.04); }
  .role { transition: none; }
  .chevrons__track { transform: translateX(-6vw); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .roles { flex-wrap: wrap; height: auto; }
  .role { flex: 1 1 40%; min-height: 460px; }
  .role--main, .roles:not(:hover):not(:focus-within) .role--main, .role:hover, .role:focus-visible { flex: 1 1 100%; }
  .role ~ .role:hover, .role ~ .role:focus-visible { flex: 1 1 40%; }
}
@media (max-width: 960px) {
  :root { --nav-h: 68px; }
  .wrap { padding: 0 28px; }
  .stage__core { padding: 0 28px; }
  .app { padding: calc(var(--nav-h) + 48px) 0 64px; }
  .app__in, .app--inprogest .app__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .app--inprogest .app__txt { order: 0; }
  .app__name { font-size: clamp(2.4rem, 13.5cqi, 4.4rem); }
  .journey { height: 550vh; }
  .journey__rail { right: 14px; }
  .journey__shade--l { background: linear-gradient(180deg, rgba(4, 6, 8, .88) 0%, rgba(4, 6, 8, .6) 42%, rgba(4, 6, 8, 0) 64%); }
  .core-apps.is-journey .app { align-items: flex-start; padding-top: calc(var(--nav-h) + 22px); }
  .core-apps__end { padding: 96px 0; }
  .core-apps.is-journey .app__in, .core-apps.is-journey .app--inprogest .app__in { grid-template-columns: minmax(0, 1fr); }
  .core-apps.is-journey .app--inprogest .app__txt { grid-column: 1; }
  .core-apps.is-journey .app__logo.is-3d { width: min(72%, 300px); }
  .core-apps.is-journey .app__desc { margin-top: 18px; font-size: clamp(1.1rem, 4.8vw, 1.4rem); max-width: 26ch; }
  .core-apps.is-journey .app__link { margin-top: 18px; }
  [data-opcion="1"] .app__bg::after, [data-opcion="1"] .app--inprogest .app__bg::after {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--c-deep) 82%, transparent) 0%, color-mix(in srgb, var(--c-deep) 60%, transparent) 50%, color-mix(in srgb, var(--c-deep) 35%, transparent) 100%);
  }
  .norm, .marco { grid-template-columns: minmax(0, 1fr); }
  .marco { gap: 20px; padding-bottom: 48px; margin-bottom: 48px; }
  .keys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .phero__extra { margin-top: 48px; }
  .chevron { width: 52vw; margin-right: -9vw; }
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .nav__logo img { width: 172px; }
  .nav__menu { padding: 8px 18px 22px; }
  .stage { padding: calc(var(--nav-h) + 48px) 0 80px; }
  .stage__logo { margin-bottom: 32px; }
  .stage__txt h1 { margin: 18px auto 18px; }
  .stage__core { margin-top: 56px; padding: 0 18px; }
  .is-3d .core-diagram__piece > span { margin-top: 10px; font-size: .9rem; }
  .core-diagram { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 0; }
  .core-diagram__label { position: static; transform: none; justify-self: center; margin-bottom: 6px; }
  .core-diagram__wire, .core-diagram__piece::before { display: none; }
  .core-diagram__piece { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 12px 18px 12px 12px; text-align: left; }
  .core-diagram__piece .tlogo { width: 110px; height: 46px; flex: none; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .strip { padding: 88px 0 80px; }
  .chevrons { padding-bottom: 88px; }
  .chevron { width: 70vw; margin-right: -12vw; }
  .sec { padding: 88px 0; }
  .sec__head { margin-bottom: 44px; }
  .app { padding: calc(var(--nav-h) + 36px) 0 56px; }
  .app__in, .app--inprogest .app__in { gap: 40px; }
  .app__logo { height: 52px; }
  .journey__rail { display: none; }
  .app__bar { padding: 9px 12px; }
  .app__bar i { width: 8px; height: 8px; }
  .sec--roles { padding: 96px 0 104px; }
  .sec--roles .sec__head { margin-bottom: 36px; }
  .roles { flex-direction: column; gap: 14px; }
  .role, .role--main, .role ~ .role:hover, .role ~ .role:focus-visible { flex: none; min-height: 440px; padding: 26px 22px; border-radius: 20px; }
  .band-wrap { padding: 112px 0; }
  .band .btn { width: 100%; }
  .key { padding: 32px 22px 28px; }
  .key::before { left: 22px; }
  .ler { table-layout: fixed; }
  .ler td:first-child { white-space: normal; }
  .ler th, .ler td { padding: 12px 12px; overflow-wrap: anywhere; }
  .ler th:first-child { width: 36%; }
  .legal { padding-top: 64px; padding-bottom: 88px; }
  .foot { padding-top: 52px; }
  .foot__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .foot__col--legal { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; justify-items: start; }
  .foot__col--legal h2 { grid-column: 1 / -1; }
  .foot__legal { margin-top: 40px; }
}