/* ============================================================
   Origen Genetics · Hoja principal
   1 Reset · 2 Base · 3 Utilidades · 4 Movimiento · 5 Media
   6 Botones · 7 Cabecera · 8 Héroe · 9 Manifiesto · 10 Áreas
   11 Razones · 12 Proyectos · 13 La prueba · 14 Contacto · 15 Pie
   Escrita para portarse a WordPress: cada bloque es autónomo,
   sin selectores que dependan del orden de la página.
   ============================================================ */

/* ---------- 1. Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 2. Base --------------------------------------- */
body {
  background: var(--og-plano-0);
  color: var(--og-texto);
  font-family: var(--og-fuente-texto);
  font-size: var(--og-t-base);
  font-weight: var(--og-peso-light);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--og-fuente-titulo);
  font-weight: var(--og-peso-medium);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--og-azul);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--og-morado); color: var(--og-blanco); }

.og-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--og-blanco); color: var(--og-negro);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--og-radio) 0;
  font-family: var(--og-fuente-titulo); font-weight: var(--og-peso-medium);
}
.og-skip:focus { left: 0; }

.og-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Grano. Una capa fija de ruido muy tenue sobre todo el documento:
   quita el plano plano del negro puro y da textura de impresión. */
.og-grano {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Utilidades --------------------------------- */
.og-contenedor {
  width: 100%; max-width: var(--og-ancho);
  margin-inline: auto; padding-inline: var(--og-margen);
}

.og-seccion { position: relative; padding-block: var(--og-seccion); }
/* El contenido va siempre por delante de la firma de fondo. Se
   nombra el contenedor y no un selector universal: con `> *` la
   especificidad empata con la de los elementos posicionados y les
   devuelve position:relative. */
.og-seccion > .og-contenedor,
.og-portada > .og-contenedor { position: relative; z-index: 1; }
/* La cabecera es fija: los anclajes deben parar por debajo de ella. */
:target, [id] { scroll-margin-top: 96px; }
.og-seccion--p1  { background: var(--og-plano-1); }
.og-seccion--p2  { background: var(--og-plano-2); }
.og-seccion--linea { border-top: 1px solid var(--og-borde); }

/* Morado corporativo plano, para destacar sin degradado. */
.og-morado { color: var(--og-morado); }

.og-grad {
  background: var(--og-gradiente-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.og-titular { font-size: var(--og-t-h2); }

.og-nota { font-size: var(--og-t-peq); color: var(--og-texto-tenue); max-width: 56ch; }

/* ---------- 4. Movimiento --------------------------------- */
/* Revelado al entrar en pantalla. Sin JS el contenido se ve igual:
   la clase de partida solo se aplica si el script arranca. */
.js .og-rev { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.js .og-rev.esta-dentro {
  opacity: 1; transform: none; filter: none;
  transition: opacity var(--og-dur-lenta) var(--og-ease-salida),
              transform var(--og-dur-lenta) var(--og-ease-salida),
              filter var(--og-dur-lenta) var(--og-ease-salida);
  transition-delay: var(--og-retardo, 0ms);
}

/* Revelado del titular del héroe, línea a línea tras una máscara. */
/* Entrada por palabras. Cada palabra sube desde detrás de una
   máscara, encadenada. El relleno inferior evita que la máscara
   corte los trazos descendentes de g, j, p, q, y. */
.og-palabra {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.js .og-palabra > span { display: inline-block; transform: translateY(108%); }
.js .og-rev-titulo.esta-dentro .og-palabra > span {
  transform: none;
  transition: transform 820ms var(--og-ease-salida);
  transition-delay: var(--og-retardo, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .og-palabra > span { transform: none; }
}

.og-linea { display: block; overflow: hidden; }
.og-linea > span { display: block; }
.js .og-linea > span { transform: translateY(105%); }
.js .cargado .og-linea > span {
  transform: none;
  transition: transform 1s var(--og-ease-salida);
  transition-delay: var(--og-retardo, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .og-rev, .js .og-linea > span { opacity: 1; transform: none; filter: none; }
}


/* ---------- 5. Media (duotono) ---------------------------- */
/* Las fotografías del sector son intercambiables entre marcas.
   El duotono las devuelve al universo de color de Origen y las
   convierte en material propio en lugar de banco de imágenes. */
.og-media { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); }
.og-media img, .og-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.2) contrast(1.03) brightness(1.02) saturate(1.1);
  transform: scale(1.03);
  transition: transform 900ms var(--og-ease-salida), filter var(--og-dur-media) var(--og-ease-inter);
}
.og-media__duo {
  position: absolute; inset: 0; z-index: 1;
  background: var(--og-gradiente-texto);
  mix-blend-mode: color; opacity: 0.34;
}
.og-media__velo {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(5, 5, 8, 0.9) 0%, rgba(5, 5, 8, 0.55) 34%,
    rgba(5, 5, 8, 0.06) 70%, rgba(5, 5, 8, 0.16) 100%);
}

/* Firma de sección. Bases que mutan cambiando de opacidad, sin
   destellos de color. Cada sección recibe una forma distinta a la
   de la anterior: escuadra, columna lateral, banda superior o
   bloques dispersos por el centro. Se salen del borde a propósito:
   el recorte las convierte en textura de fondo. */
.og-firma {
  position: absolute; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column;
  gap: 0.2em;
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.4375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: var(--og-peso-medium);
  letter-spacing: 0.01em; line-height: 1;
}
.og-firma__fila { display: flex; gap: 0.08em; }
.og-firma b {
  font-weight: inherit;
  color: rgba(253, 253, 253, 0.14);
  transition: opacity 420ms var(--og-ease-inter);
}
.og-firma b[data-muta="true"] { opacity: 0.06; transition-duration: 130ms; }
.og-firma__hueco { width: 0.55em; }
/* Cada fila pesa menos que la anterior. */
.og-firma__fila:nth-child(2) b { color: rgba(253, 253, 253, 0.115); }
.og-firma__fila:nth-child(3) b { color: rgba(253, 253, 253, 0.09); }
.og-firma__fila:nth-child(n+4) b { color: rgba(253, 253, 253, 0.07); }
.og-prueba .og-firma b { color: rgba(253, 253, 253, 0.26); }

/* --- Formas --------------------------------------------- */
/* Escuadra: se apoya en la esquina superior derecha. */
.og-firma--escuadra { top: 0; right: -1.1em; align-items: flex-end; }
/* Columna: una tira estrecha que baja por el costado derecho. */
.og-firma--columna { top: 16%; right: -1.1em; align-items: flex-end; gap: 0.3em; }
/* Banda: un solo renglón largo cruzando la parte alta. */
.og-firma--banda { top: 0; right: -1.1em; align-items: flex-end; }
/* Dispersa: bloques discontinuos hacia el centro del bloque. */
.og-firma--dispersa {
  top: 30%; right: auto; left: 34%; align-items: flex-start; gap: 0.9em;
}
/* Escuadra invertida, apoyada en la esquina superior izquierda. */
.og-firma--izquierda { top: 0; left: -1.1em; align-items: flex-start; }
/* Pie derecho, para bloques altos. */
.og-firma--pie { bottom: 0; right: -1.1em; align-items: flex-end; }

@media (max-width: 860px) { .og-firma { display: none; } }

/* ---------- 6. Botones ------------------------------------ */
.og-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: calc(0.95rem - 1px) 1.7rem; border-radius: var(--og-radio);
  border: 2px solid transparent;
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-peq); font-weight: var(--og-peso-medium);
  text-decoration: none; cursor: pointer;
  transition: background var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter),
              color var(--og-dur-rapida) var(--og-ease-inter),
              transform var(--og-dur-rapida) var(--og-ease-inter);
}
/* El degradado de marca se cuela por debajo del texto al pasar
   el cursor. Va en una capa aparte porque los degradados no
   admiten transición sobre la propiedad background. */
.og-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--og-gradiente-texto);
  opacity: 0; transition: opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-btn:hover::before, .og-btn:focus-visible::before { opacity: 1; }

.og-btn--solido { background: var(--og-blanco); color: var(--og-negro); }
/* El fondo blanco se apaga a la vez que entra el degradado: si no,
   el borde transparente deja ver un filo blanco alrededor. */
.og-btn--solido:hover, .og-btn--solido:focus-visible {
  background-color: transparent; border-color: transparent; color: var(--og-negro);
}
.og-btn--linea { border-color: var(--og-borde-fuerte); color: var(--og-texto); }
.og-btn--linea:hover, .og-btn--linea:focus-visible {
  border-color: transparent; color: var(--og-negro);
}

/* Las flechas del carrusel siguen la misma regla. */
.og-carrusel__btn { position: relative; isolation: isolate; overflow: hidden; }
.og-carrusel__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--og-gradiente-texto);
  opacity: 0; transition: opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-carrusel__btn:hover:not(:disabled)::before,
.og-carrusel__btn:focus-visible:not(:disabled)::before { opacity: 1; }

.og-enlace {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-peq); font-weight: var(--og-peso-medium);
  color: var(--og-azul); text-decoration: none;
}
.og-enlace span { transition: transform var(--og-dur-rapida) var(--og-ease-inter); }
.og-enlace:hover span { transform: translateX(5px); }

/* ---------- 7. Cabecera ----------------------------------- */
.og-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(6, 6, 10, 0.15);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: background var(--og-dur-media) var(--og-ease-inter);
}
.og-header[data-fijo="true"] {
  background: rgba(6, 6, 10, 0.55);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.og-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 56px;
}

.og-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.og-logo img { filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.4)); }
.og-logo img {
  width: auto; height: 26px;
  transition: opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-logo:hover img { opacity: 0.82; }

.og-nav { display: flex; align-items: center; gap: 1.75rem; }
.og-nav__lista { display: flex; align-items: center; gap: 1.75rem; }
.og-nav__enlace {
  position: relative;
  display: inline-flex; align-items: center; height: 56px;
  font-family: var(--og-fuente-titulo);
  font-size: 1rem; font-weight: var(--og-peso-regular); line-height: 1.5;
  letter-spacing: 0; color: var(--og-blanco); text-decoration: none;
  /* Con la cabecera al 15 % el blanco se queda corto de contraste
     sobre una fotografía clara. Un solo halo difuso y sin
     desplazamiento lo separa del fondo sin llegar a dibujarse. */
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.42);
}
.og-nav__enlace::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--og-blanco);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--og-dur-media) var(--og-ease-salida);
  z-index: 1;
}
/* Al pasar el cursor, el texto y la línea toman el degradado. La
   sombra se retira: con el texto recortado sobre el fondo, se vería
   a través de las letras. */
.og-nav__enlace:hover {
  background: var(--og-gradiente-texto);
  background-size: 120% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none;
}
.og-nav__enlace:hover::after { background: var(--og-gradiente-texto); }
.og-nav__enlace:hover::after, .og-nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
/* Con el desplegable abierto sobra el subrayado: la barra del
   panel ya hace de línea y juntas se veían dos. */
.og-nav__item:has(.og-sub):hover > .og-nav__enlace::after,
.og-nav__item:has(.og-sub):focus-within > .og-nav__enlace::after { transform: scaleX(0); }

.og-idioma {
  display: flex; align-items: center; gap: 0.5rem;
  padding-left: 1.5rem; border-left: 1px solid var(--og-borde);
  font-family: var(--og-fuente-titulo); font-size: var(--og-t-peq);
}
.og-idioma__activo { font-weight: var(--og-peso-medium); color: var(--og-blanco); }
.og-idioma { text-shadow: 0 0 12px rgba(0, 0, 0, 0.42); }
.og-idioma__inactivo { color: var(--og-texto-tenue); opacity: 0.5; cursor: default; }

/* Submenú de áreas. Se abre al pasar el cursor y también al
   entrar con el tabulador, sin depender de JavaScript. */
.og-nav__item { position: relative; }
@media (min-width: 961px) { .og-nav__item { position: static; } }
.og-sub {
  /* El enlace mide los 56 px de la cabecera, así que su 100% es
     justo el borde inferior: el panel arranca ahí y no flotando
     por debajo. */
  position: absolute; top: 100%; left: 50%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(48rem, calc(100vw - 2 * var(--og-margen)));
  padding: 0.5rem;
  background: rgba(8, 8, 12, 0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--og-borde);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity var(--og-dur-rapida) var(--og-ease-inter),
              transform var(--og-dur-rapida) var(--og-ease-inter),
              visibility var(--og-dur-rapida);
}
.og-sub::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--og-gradiente-texto);
}
.og-nav__item:hover > .og-sub,
.og-nav__item:focus-within > .og-sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.og-sub a {
  display: block; height: 100%; padding: 0.8rem 1rem;
  font-family: var(--og-fuente-titulo);
  font-size: 1rem; font-weight: var(--og-peso-regular); line-height: 1.5;
  color: var(--og-blanco); text-decoration: none;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              background var(--og-dur-rapida) var(--og-ease-inter);
}
.og-sub a:hover { background: rgba(255, 255, 255, 0.05); }
.og-sub a:hover {
  background-image: var(--og-gradiente-texto);
  background-size: 120% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* El fondo del enlace se recorta al texto, así que el realce de la
   fila pasa al <li>, que no está recortado. */
.og-sub > li:hover { background: rgba(255, 255, 255, 0.05); }
.og-sub__descriptor {
  display: block; margin-top: 0.3rem;
  font-family: var(--og-fuente-texto); font-size: 0.8125rem;
  font-weight: var(--og-peso-light); line-height: 1.45;
  color: var(--og-texto-tenue); text-wrap: pretty;
}

/* Hamburguesa: tres trazos que se cruzan al abrir. */
.og-menu-btn {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--og-borde-fuerte);
  border-radius: var(--og-radio-pill);
  cursor: pointer; color: var(--og-texto);
}
.og-menu-btn svg { width: 20px; height: 20px; margin: 0 auto; }
.og-menu-btn line {
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  transition: transform var(--og-dur-media) var(--og-ease-salida),
              opacity var(--og-dur-rapida) var(--og-ease-inter);
  transform-origin: center;
}
.og-menu-btn[aria-expanded="true"] line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.og-menu-btn[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.og-menu-btn[aria-expanded="true"] line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .og-menu-btn { display: block; }
  .og-nav {
    position: absolute; inset: 100% 0 auto 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--og-plano-1); border-bottom: 1px solid var(--og-borde);
    padding: 0.5rem var(--og-margen) 1.5rem;
  }
  .og-nav[data-abierto="true"] { display: flex; }
  .og-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  /* En el desplegable el enlace vuelve a fluir: la altura fija es
     solo para poder apoyar el subrayado en el borde de la cabecera. */
  .og-nav__enlace {
    display: block; height: auto; padding: 0.9rem 0;
    border-bottom: 1px solid var(--og-borde); font-size: 1.0625rem; opacity: 1;
  }
  .og-nav__enlace::after { display: none; }
  .og-nav__enlace::after { display: none; }
  .og-sub {
    position: static; display: block; width: auto; padding: 0 0 0.5rem 0;
    transform: none;
    background: none; border: 0; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .og-sub::before { display: none; }
  .og-sub a { padding: 0.6rem 0 0.6rem 1rem; border-left: 1px solid var(--og-borde); }
  .og-sub__descriptor { display: none; }
  .og-idioma { padding: 1rem 0 0; border-left: 0; }
}

/* ---------- 8. Héroe -------------------------------------- */
.og-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: calc(56px + clamp(5rem, 2.5rem + 11vw, 11rem)) clamp(5rem, 3rem + 9vw, 9.5rem);
}
.og-hero__fondo {
  position: absolute; inset: 0; z-index: -2;
}
/* El vídeo apenas se desatura: es el plano principal, no un fondo. */
.og-hero__fondo video { filter: grayscale(0.1) contrast(1.02) brightness(1.12) saturate(1.06); }
.og-hero__fondo .og-media__duo { opacity: 0.18; }
.og-hero__fondo .og-media__velo {
  background:
    radial-gradient(82% 80% at 2% 56%, rgba(10, 7, 34, 0.7) 0%,
                                        rgba(8, 7, 26, 0.34) 44%, transparent 76%),
    linear-gradient(to top, rgba(5, 5, 8, 0.46) 0%, rgba(5, 5, 8, 0.06) 44%, transparent 68%);
}
.og-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(72ch 56ch at 78% 12%, rgba(100, 64, 243, 0.20), transparent 66%),
    radial-gradient(62ch 46ch at 4% 96%, rgba(74, 185, 254, 0.10), transparent 64%);
}
.og-hero > .og-contenedor { position: relative; z-index: 1; }

.og-hero__titulo {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  font-weight: var(--og-peso-medium);
  max-width: 20ch; letter-spacing: -0.038em;
}
/* El claim pasa a segunda línea de lectura: sigue estando, pero
   deja que la marca y la categoría entren primero. */
.og-hero__claim {
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: var(--og-peso-regular);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--og-texto);
  max-width: 44ch;
}
/* Invitación a bajar: un ratón dibujado a línea con la rueda
   descendiendo en bucle. Sin etiqueta: la forma ya lo dice. */
.og-raton {
  position: absolute; z-index: 2;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  display: inline-block;
  color: rgba(253, 253, 253, 0.72);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  transition: color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-raton:hover { color: var(--og-blanco); }
.og-raton svg { width: 26px; height: auto; display: block; }
.og-raton__cuerpo { stroke: currentColor; }
.og-raton__rueda { fill: currentColor; animation: og-rueda 2.2s var(--og-ease-inter) infinite; }
@keyframes og-rueda {
  0%   { transform: translateY(0);     opacity: 0; }
  18%  { opacity: 1; }
  62%  { transform: translateY(11px);  opacity: 1; }
  100% { transform: translateY(13px);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .og-raton__rueda { animation: none; opacity: 1; }
}

/* ---------- 9. Manifiesto --------------------------------- */
.og-manifiesto { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .og-manifiesto { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); align-items: start; }
}
.og-manifiesto__texto {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.3125rem, 1.05rem + 1.15vw, 2rem);
  font-weight: var(--og-peso-light); line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--og-texto-medio); max-width: 44ch;
}
.og-manifiesto__texto strong { font-weight: var(--og-peso-medium); color: var(--og-texto); }

/* Separación de secciones por luz, no por línea. Un degradado
   muy tenue de la marca en un borde: distingue el bloque sin
   meter una imagen detrás del texto. */
.og-seccion--halo-sup, .og-seccion--halo-inf { isolation: isolate; }
.og-seccion--halo-sup::before,
.og-seccion--halo-inf::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1;
  height: clamp(9rem, 20vh, 16rem); pointer-events: none;
}
.og-seccion--halo-sup::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(100, 64, 243, 0.17), transparent 100%);
}
.og-seccion--halo-inf::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(74, 185, 254, 0.13), transparent 100%);
}

/* ---------- 10. Áreas de capacidad ------------------------ */
.og-areas {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
@media (min-width: 860px) { .og-areas { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

.og-area {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(21rem, 16rem + 14vw, 28rem);
  padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  overflow: hidden; isolation: isolate;
  text-decoration: none; border: 1px solid var(--og-borde);
  transition: border-color var(--og-dur-media) var(--og-ease-inter),
              transform var(--og-dur-media) var(--og-ease-salida);
}
.og-area:hover { border-color: var(--og-borde-fuerte); transform: translateY(-4px); }
.og-area:hover .og-media img { transform: scale(1.09); filter: grayscale(0.1) contrast(1.03) brightness(1.08) saturate(1.14); }

.og-area .og-media { position: absolute; inset: 0; z-index: -1; }
/* El degradado de marca no se repite igual en las cuatro: cada
   área ocupa un tramo distinto de la rampa, de verde a morado.
   Vistas juntas, las cuatro recorren el degradado completo. */
.og-area .og-media__duo { opacity: 0.28; }
.og-areas > :nth-child(1) .og-media__duo { background: linear-gradient(140deg, #45EC42 0%, #02CBC7 100%); }
.og-areas > :nth-child(2) .og-media__duo { background: linear-gradient(140deg, #02CBC7 0%, #4AB9FE 100%); }
.og-areas > :nth-child(3) .og-media__duo { background: linear-gradient(140deg, #4AB9FE 0%, #715BE7 100%); }
.og-areas > :nth-child(4) .og-media__duo { background: linear-gradient(140deg, #715BE7 0%, #6440F3 100%); }

/* Línea de marca al pie de cada área, siempre visible. Recorre
   la rampa completa, verde a morado, y engrosa al pasar. */
.og-area::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 3;
  background: var(--og-gradiente-texto);
  transition: height var(--og-dur-media) var(--og-ease-salida);
}
.og-area:hover::before { height: 5px; }

.og-area__marca {
  position: absolute; top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  left: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); z-index: 3;
  font-family: var(--og-fuente-titulo); font-size: var(--og-t-cejilla);
  font-weight: var(--og-peso-medium); letter-spacing: 0.2em;
  color: rgba(253, 253, 253, 0.62);
  font-variant-numeric: tabular-nums;
}
.og-area__flecha {
  position: absolute; top: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  right: clamp(1.5rem, 1.25rem + 1.4vw, 2.25rem); z-index: 3;
  width: clamp(26px, 22px + 0.6vw, 34px); height: auto;
  color: rgba(253, 253, 253, 0.55);
  transition: transform var(--og-dur-media) var(--og-ease-salida), color var(--og-dur-media);
}
.og-area__flecha path { stroke: currentColor; stroke-width: 1.4; }
.og-area:hover .og-area__flecha { color: var(--og-blanco); transform: translate(4px, -4px); }

.og-area__nombre {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: var(--og-peso-medium); line-height: 1.14; letter-spacing: -0.025em;
  max-width: 15ch;
}
.og-area__claim {
  margin-top: 1.1rem; font-size: var(--og-t-peq);
  color: var(--og-texto-medio); max-width: 40ch;
}

/* ---------- 11. Razones ----------------------------------- */
.og-razones {
  display: grid; gap: 0; grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px solid var(--og-borde);
}
@media (min-width: 900px) {
  .og-razones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

.og-razon {
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--og-borde);
}
@media (min-width: 900px) {
  .og-razon { padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: 0; }
  .og-razon + .og-razon { border-left: 1px solid var(--og-borde); }
  .og-razon:first-child { padding-left: 0; }
  .og-razon:last-child { padding-right: 0; }
}
.og-razon__titulo {
  font-size: 1.375rem; line-height: 1.22; margin-bottom: 1rem;
  padding-top: 1rem; border-top: 2px solid transparent;
  border-image: var(--og-gradiente-texto) 1;
  border-image-slice: 1; border-width: 2px 0 0 0;
  max-width: 20ch;
}
.og-razon__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); }
.og-razon .og-enlace { margin-top: auto; padding-top: 1.75rem; }

/* ---------- 12. Proyectos (carrusel) ---------------------- */
/* Pista horizontal con anclaje. Se desplaza con el dedo, con la
   rueda, con las flechas del teclado o con los botones. Sangra
   por la derecha hasta el borde de la pantalla: así se ve que
   hay más y no hace falta contarlo. */
.og-carrusel {
  position: relative; margin-top: clamp(2rem, 1.25rem + 3vw, 3rem);
  --og-difuminado: clamp(2rem, 6vw, 7rem);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--og-difuminado),
                              #000 calc(100% - var(--og-difuminado)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--og-difuminado),
                              #000 calc(100% - var(--og-difuminado)), transparent 100%);
}
/* El mando queda fuera del difuminado. */
.og-carrusel__mando { mask-image: none; -webkit-mask-image: none; }

.og-carrusel__pista {
  display: flex; gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* La primera tarjeta se alinea con el texto de la sección;
     la última respira contra el borde derecho. */
  padding-bottom: 0.5rem;
  /* El bucle solo es continuo si el patrón se repite exacto:
     cualquier relleno lateral rompería la costura. */
  padding-inline: 0;
  /* html lleva scroll-behavior: smooth y aquí estorbaba: cada
     fotograma se animaba por su cuenta y el avance salía a
     tirones. La suavidad la ponen los botones cuando toca. */
  scroll-behavior: auto;
  scrollbar-width: none;
}
.og-carrusel__pista::-webkit-scrollbar { display: none; }
.og-carrusel__pista:focus-visible { outline-offset: -2px; }

.og-tarjeta {
  flex: 0 0 clamp(16rem, 74vw, 21rem);
  display: flex; flex-direction: column;
  background: var(--og-plano-1);
  border: 1px solid var(--og-borde);
  overflow: hidden;
  transition: border-color var(--og-dur-media) var(--og-ease-inter),
              transform var(--og-dur-media) var(--og-ease-salida);
}
.og-tarjeta:hover { border-color: var(--og-borde-fuerte); transform: translateY(-4px); }
.og-tarjeta:hover .og-media img { transform: scale(1.07); }

.og-tarjeta .og-media { aspect-ratio: 4 / 3; }
.og-tarjeta .og-media__duo { opacity: 0.2; }
.og-tarjeta:nth-child(3n+1) .og-media__duo { background: linear-gradient(140deg, #45EC42 0%, #02CBC7 100%); }
.og-tarjeta:nth-child(3n+2) .og-media__duo { background: linear-gradient(140deg, #02CBC7 0%, #4AB9FE 100%); }
.og-tarjeta:nth-child(3n+3) .og-media__duo { background: linear-gradient(140deg, #4AB9FE 0%, #715BE7 100%); }
/* Encuadres y luz distintos para que una misma foto repetida no
   se lea como la misma imagen. */
.og-tarjeta:nth-child(2n) .og-media img { object-position: 70% 40%; filter: grayscale(0.08) contrast(1.06) brightness(1.06) saturate(1.07); }
.og-tarjeta:nth-child(3n) .og-media img { object-position: 30% 60%; filter: grayscale(0.22) contrast(1.02) brightness(0.98) saturate(1.16); }
.og-tarjeta .og-media__velo {
  background: linear-gradient(to top, rgba(8, 8, 12, 0.82) 0%, rgba(8, 8, 12, 0.1) 60%, transparent 100%);
}

.og-tarjeta__cuerpo {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
}
/* La tarjeta dejó de encabezarse con el nombre del cliente: ahora el
   título del proyecto es el elemento principal, y el cliente va dentro
   del propio título cuando procede mostrarlo. */
.og-tarjeta__proyecto {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  font-weight: var(--og-peso-medium); line-height: 1.24;
  letter-spacing: -0.02em; color: var(--og-texto);
  flex: 1; text-wrap: pretty;
}
.og-tarjeta__pie {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.35rem; padding-top: 1rem;
  border-top: 1px solid var(--og-borde);
}
.og-tarjeta__anios {
  margin-left: auto;
  font-family: var(--og-fuente-titulo); font-size: 0.6875rem;
  letter-spacing: 0.14em; color: var(--og-texto-tenue);
  font-variant-numeric: tabular-nums;
}

.og-etiqueta {
  display: inline-block; padding: 0.28rem 0.7rem;
  border: 1px solid var(--og-borde-fuerte); border-radius: var(--og-radio-pill);
  font-family: var(--og-fuente-titulo); font-size: 0.6875rem;
  font-weight: var(--og-peso-medium); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--og-texto-medio); white-space: nowrap;
}

/* Mando: barra de avance con el degradado corporativo y dos
   botones. La barra dice cuánto queda sin necesidad de puntos. */
.og-carrusel__mando {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.og-carrusel__barra {
  position: relative; flex: 1; height: 2px;
  background: var(--og-borde); border-radius: 2px; overflow: hidden;
}
.og-carrusel__avance {
  position: absolute; inset: 0 auto 0 0;
  width: 20%;
  background: var(--og-gradiente-texto); border-radius: 2px;
  transition: transform 140ms linear;
}
.og-carrusel__botones { display: flex; gap: 0.6rem; flex-shrink: 0; }
.og-carrusel__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--og-borde-fuerte);
  color: var(--og-texto); font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: background var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter),
              opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-carrusel__btn:hover:not(:disabled) { border-color: transparent; }
.og-carrusel__btn:disabled { opacity: 0.3; cursor: default; }

/* ---------- 13. La prueba (campo de color) ---------------- */
/* El contraste no viene de invertir a blanco, que rompía la
   página, sino de saturar: fotografía en duotono bajo un lavado
   del degradado corporativo. Es el único plano de color pleno. */
.og-prueba { position: relative; overflow: hidden; isolation: isolate; }
.og-prueba .og-media { position: absolute; inset: 0; z-index: -2; }
.og-prueba .og-media img { filter: grayscale(1) contrast(1.15) brightness(0.46); }
.og-prueba .og-media__duo { opacity: 0.5; }
.og-prueba .og-media__velo { display: none; }

.og-prueba__lavado {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80ch 60ch at 82% 8%, rgba(100, 64, 243, 0.55), transparent 64%),
    linear-gradient(118deg, rgba(4, 20, 54, 0.94) 0%, rgba(30, 16, 88, 0.93) 46%,
                            rgba(46, 24, 128, 0.9) 100%);
}

.og-prueba__titular {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  letter-spacing: -0.03em; max-width: 20ch;
}

.og-cifras {
  display: grid; gap: 0; grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
@media (min-width: 640px)  { .og-cifras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .og-cifras { grid-template-columns: repeat(4, 1fr); } }

.og-cifra {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
@media (min-width: 640px) {
  .og-cifra:nth-child(odd) { padding-left: 0; }
  .og-cifra + .og-cifra { border-left: 1px solid rgba(255, 255, 255, 0.22); }
}
@media (min-width: 1040px) {
  .og-cifra:nth-child(odd) { padding-left: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); }
  .og-cifra:first-child { padding-left: 0; }
  .og-cifra:last-child { padding-right: 0; }
}
.og-cifra__valor {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: var(--og-peso-medium); line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; margin-bottom: 0.5rem;
}
.og-cifra__unidad {
  display: block; font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); font-weight: var(--og-peso-medium);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(253, 253, 253, 0.62); margin-bottom: 0.9rem;
}
.og-cifra__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); }

/* Muro de clientes. El volumen de referencias es el argumento:
   se compone como un muro de nombres, nunca como logotipos. */
.og-muro {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0; align-items: baseline;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.og-muro__nombre {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: var(--og-peso-medium); letter-spacing: -0.015em;
  color: rgba(253, 253, 253, 0.92);
}
.og-muro__sep {
  color: rgba(253, 253, 253, 0.32); padding-inline: 0.7rem;
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem);
}
.og-prueba__pie {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  margin-top: clamp(2rem, 1.25rem + 2vw, 2.75rem);
  font-size: var(--og-t-peq); color: var(--og-texto-medio);
}
.og-prueba .og-enlace { color: var(--og-blanco); }

/* ---------- 14. Contacto ---------------------------------- */
.og-contacto { position: relative; overflow: hidden; }
.og-contacto::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(68ch 48ch at 86% 46%, rgba(100, 64, 243, 0.26), transparent 62%);
}
.og-contacto > .og-contenedor { position: relative; z-index: 1; }

.og-contacto__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .og-contacto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.og-datos { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.og-dato__etiqueta {
  display: block; font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--og-texto-tenue); margin-bottom: 0.3rem;
}
.og-dato__valor { font-size: var(--og-t-peq); color: var(--og-texto); text-decoration: none; }
a.og-dato__valor:hover { color: var(--og-azul); }

.og-form { display: grid; gap: 1.25rem; }
.og-campo { position: relative; display: grid; gap: 0.5rem; }

.og-campo__etiqueta {
  font-family: var(--og-fuente-titulo); font-size: var(--og-t-cejilla);
  font-weight: var(--og-peso-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--og-blanco);
}
.og-campo__control {
  width: 100%; background: rgba(255, 255, 255, 0.075);
  border: 2px solid var(--og-borde-fuerte); border-radius: var(--og-radio);
  padding: calc(0.95rem - 1px) calc(1.05rem - 1px);
  font-family: var(--og-fuente-texto); font-size: var(--og-t-peq);
  font-weight: var(--og-peso-light); color: var(--og-texto);
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter),
              background var(--og-dur-rapida) var(--og-ease-inter);
}
.og-campo__control::placeholder { color: rgba(253, 253, 253, 0.3); }
.og-campo__control:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); }
/* En foco el borde toma el degradado. El relleno se compone sobre el
   negro de la página porque tiene que ser opaco: si fuera translúcido
   dejaría ver el degradado también por dentro de la caja. */
.og-campo__control:focus {
  border-color: transparent;
  background-image:
    linear-gradient(rgb(28, 28, 32), rgb(28, 28, 32)),
    var(--og-gradiente-texto);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.og-campo__control:focus,
.og-campo__control:focus-visible { outline: none; }
textarea.og-campo__control { min-height: 8rem; resize: vertical; }

.og-form__legal { font-size: 0.8125rem; color: var(--og-texto-tenue); }
.og-form__legal a { color: var(--og-texto-medio); }

/* ---------- 15. Pie --------------------------------------- */
.og-footer {
  border-top: 1px solid var(--og-borde); background: var(--og-negro);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
}
.og-footer__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .og-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .og-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.og-footer__titulo {
  font-family: var(--og-fuente-titulo); font-size: 1.25rem;
  font-weight: var(--og-peso-regular); line-height: 1.3;
  letter-spacing: normal; text-transform: none;
  color: var(--og-blanco); margin-bottom: 1.1rem;
}
.og-footer__lista { display: grid; gap: 0.7rem; }
.og-footer__lista a, .og-footer__lista span {
  font-family: var(--og-fuente-titulo);
  font-size: 1rem; font-weight: var(--og-peso-regular); line-height: 1.15;
  letter-spacing: -0.024em; color: rgba(253, 253, 253, 0.75); text-decoration: none;
}
.og-footer__lista a:hover { color: var(--og-texto); }

.og-footer__cierre {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1.75rem; border-top: 1px solid var(--og-borde);
  font-family: var(--og-fuente-titulo);
  font-size: 1rem; line-height: 1.15; letter-spacing: -0.024em;
  color: rgba(253, 253, 253, 0.55);
}
.og-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.og-footer__legal a { text-decoration: none; }
.og-footer__legal a:hover { color: var(--og-texto-medio); }

/* ============================================================
   16. Páginas interiores
   Portada de página, rejilla de capacidades, panel destacado,
   rejilla de proyectos y salto a las otras áreas.
   ============================================================ */

/* ---------- Portada de página ----------------------------- */
.og-portada {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(26rem, 19rem + 25vw, 38rem);
  padding-block: calc(56px + clamp(4rem, 3rem + 6.5vw, 7.5rem)) clamp(3.25rem, 2.5rem + 4.5vw, 5.25rem);
}
.og-portada .og-media { position: absolute; inset: 0; z-index: -1; }
.og-portada .og-media img { filter: grayscale(0.12) contrast(1.02) brightness(1.16) saturate(1.1); }
.og-portada .og-media__velo {
  background: linear-gradient(to top,
    rgba(5, 5, 8, 0.82) 0%, rgba(5, 5, 8, 0.38) 42%,
    rgba(5, 5, 8, 0.04) 78%, rgba(5, 5, 8, 0.18) 100%);
}
/* Misma línea de marca que cierra las tarjetas de área. */
.og-portada::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 2;
  background: var(--og-gradiente-texto);
}
.og-portada__marca {
  display: block;
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); font-weight: var(--og-peso-medium);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--og-texto-tenue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.25rem;
}
.og-portada__titulo {
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
  font-weight: var(--og-peso-medium);
  letter-spacing: -0.035em; max-width: 16ch;
}
.og-portada__lead {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-lead); font-weight: var(--og-peso-regular);
  line-height: 1.42; letter-spacing: -0.015em;
  color: var(--og-texto-medio); max-width: 46ch;
}

/* ---------- Rejilla de capacidades ------------------------ */
/* Cada celda cuelga de su propio filete. Sirve igual para tres
   servicios que para cinco verticales, sin recalcular márgenes. */
.og-rejilla {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
@media (min-width: 760px)  { .og-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .og-rejilla[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .og-rejilla[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  .og-rejilla[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}
.og-celda { padding-top: 1.35rem; border-top: 1px solid var(--og-borde-fuerte); }
.og-celda__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: 1.125rem; font-weight: var(--og-peso-medium);
  line-height: 1.28; letter-spacing: -0.015em;
  margin-bottom: 0.75rem; max-width: 24ch;
}
.og-celda__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); }

/* ---------- Panel destacado ------------------------------- */
.og-destacado {
  position: relative;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background: var(--og-plano-1);
  border: 1px solid var(--og-borde);
}
.og-destacado::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--og-gradiente-texto);
}
.og-destacado__titulo {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  letter-spacing: -0.025em; margin-bottom: 1.1rem; max-width: 24ch;
}
.og-destacado__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); max-width: 62ch; }
.og-destacado__texto + .og-destacado__texto { margin-top: 1rem; }

/* ---------- Rejilla de proyectos -------------------------- */
/* Reutiliza la tarjeta del carrusel, sin pista ni autoavance:
   en una página de área los proyectos son pocos y caben todos. */
.og-tarjetas {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
@media (min-width: 700px)  { .og-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .og-tarjetas { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.og-tarjetas .og-tarjeta { flex: initial; }

/* ---------- Salto a las otras áreas ----------------------- */
.og-saltos {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--og-borde);
}
@media (min-width: 860px) { .og-saltos { grid-template-columns: repeat(3, 1fr); } }
.og-salto {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--og-fuente-titulo);
  font-size: 1.0625rem; font-weight: var(--og-peso-medium);
  letter-spacing: -0.015em; text-decoration: none;
  color: var(--og-texto-medio);
  transition: color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-salto:hover { color: var(--og-texto); }
.og-salto span { transition: transform var(--og-dur-rapida) var(--og-ease-inter); }
.og-salto:hover span { transform: translateX(4px); }

/* ---------- Cierre de página ------------------------------ */
.og-cierre__titulo {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em; max-width: 22ch;
}
.og-cierre__texto {
  margin-top: 1.25rem; font-size: var(--og-t-peq);
  color: var(--og-texto-medio); max-width: 58ch;
}
.og-cierre__acciones { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

/* ============================================================
   17. Bloques de página interior
   Tres formas distintas para que no se sucedan rejillas iguales:
   declaración asimétrica, listado con título fijo y banda a
   sangre. Se alternan para que ninguna vaya seguida de otra igual.
   ============================================================ */

/* ---------- Declaración ----------------------------------- */
/* El título se queda quieto a la izquierda mientras el texto
   pasa por delante. Rompe la lectura en columna única. */
.og-declaracion {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .og-declaracion { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); }
  .og-declaracion__titulo { position: sticky; top: 7rem; align-self: start; }
}
.og-declaracion__titulo {
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  letter-spacing: -0.03em;
}
.og-declaracion__texto {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.875rem);
  font-weight: var(--og-peso-light); line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--og-texto-medio); max-width: 40ch;
}
.og-declaracion__texto strong { font-weight: var(--og-peso-medium); color: var(--og-texto); }

/* ---------- Listado con título fijo ----------------------- */
.og-listado {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .og-listado { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); }
  .og-listado__titulo { position: sticky; top: 7rem; align-self: start; }
}
.og-listado__titulo {
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  letter-spacing: -0.03em;
}
.og-listado__filas { border-top: 1px solid var(--og-borde); }

.og-punto {
  display: grid; gap: 0.4rem 1.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  border-bottom: 1px solid var(--og-borde);
}
.og-punto__marca {
  grid-row: span 2; padding-top: 0.4rem;
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); font-weight: var(--og-peso-medium);
  letter-spacing: 0.16em; color: var(--og-texto-tenue);
  font-variant-numeric: tabular-nums;
}
/* Sin orden que informe, la marca es un trazo, no un número. */
.og-punto__marca--trazo {
  width: 1.75rem; height: 2px; margin-top: 0.95rem;
  background: var(--og-gradiente-texto); border-radius: 2px;
}
.og-punto__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  font-weight: var(--og-peso-medium); letter-spacing: -0.02em;
  line-height: 1.3;
}
.og-punto__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); max-width: 58ch; }

/* ---------- Banda a sangre -------------------------------- */
.og-banda {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
}
.og-banda > .og-media { position: absolute; inset: 0; z-index: -1; }
.og-banda > .og-contenedor { position: relative; z-index: 1; }
.og-banda .og-media__duo { background: var(--og-gradiente-texto); opacity: 0.34; }
.og-banda .og-media__velo {
  background:
    linear-gradient(95deg, rgba(5,5,8,0.9) 0%, rgba(5,5,8,0.7) 46%, rgba(5,5,8,0.32) 100%),
    linear-gradient(to bottom, rgba(5,5,8,0.5) 0%, rgba(5,5,8,0.22) 40%, rgba(5,5,8,0.62) 100%);
}
.og-banda::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 2;
  background: var(--og-gradiente-texto);
}
.og-banda__titulo {
  font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3.125rem);
  letter-spacing: -0.03em; max-width: 22ch;
}
.og-banda__texto {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--og-t-lead); line-height: 1.5;
  color: var(--og-texto-medio); max-width: 56ch;
}
.og-banda__texto + .og-banda__texto { margin-top: 1rem; }

/* ============================================================
   18. Equipo, casos y ficha
   ============================================================ */

/* ---------- Equipo ---------------------------------------- */
.og-equipo {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}
/* Dos filas de cuatro, que es el orden que se acordó para el equipo. */
@media (min-width: 900px) { .og-equipo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.og-perfil { display: flex; flex-direction: column; }
.og-perfil .og-media { aspect-ratio: 1 / 1; }
.og-perfil .og-media img { filter: grayscale(0.5) contrast(1.04) brightness(1.02); }
.og-perfil .og-media__duo { background: var(--og-gradiente-texto); opacity: 0.16; }
.og-perfil .og-media__velo {
  background: linear-gradient(to top, rgba(5,5,8,0.42) 0%, transparent 58%);
}
.og-perfil:hover .og-media img { filter: grayscale(0) contrast(1.04) brightness(1); }
.og-perfil__nombre {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 2px solid transparent;
  background: var(--og-gradiente-texto) top left / 2.25rem 2px no-repeat;
  font-family: var(--og-fuente-titulo);
  font-size: 1.0625rem; font-weight: var(--og-peso-medium);
  letter-spacing: -0.015em; line-height: 1.25;
}
.og-perfil__cargo {
  margin-top: 0.35rem; font-size: 0.9375rem; color: var(--og-texto-tenue);
}

/* ---------- Filtros de casos ------------------------------ */
.og-filtros {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  border-bottom: 1px solid var(--og-borde);
}
.og-filtro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 0.75rem; }
.og-filtro__nombre {
  flex: 0 0 auto; min-width: 9rem;
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); font-weight: var(--og-peso-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--og-texto-tenue);
}
.og-pastilla {
  padding: 0.4rem 0.9rem; border-radius: var(--og-radio-pill);
  border: 1px solid var(--og-borde); background: none;
  font-family: var(--og-fuente-titulo); font-size: 0.9375rem;
  color: var(--og-texto-medio); cursor: pointer;
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter),
              color var(--og-dur-rapida) var(--og-ease-inter),
              background var(--og-dur-rapida) var(--og-ease-inter);
}
.og-pastilla:hover { border-color: var(--og-borde-fuerte); color: var(--og-texto); }
.og-pastilla[aria-pressed="true"] {
  background: var(--og-blanco); border-color: var(--og-blanco); color: var(--og-negro);
}
.og-recuento {
  font-size: var(--og-t-peq); color: var(--og-texto-tenue);
  margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.og-tarjeta[hidden] { display: none; }
a.og-tarjeta { text-decoration: none; }

/* ---------- Ficha de caso --------------------------------- */
.og-ficha__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Claves: lo que el lector se lleva aunque no siga leyendo. */
.og-claves {
  display: grid; gap: 0; grid-template-columns: 1fr;
  border-top: 1px solid var(--og-borde);
}
@media (min-width: 640px)  { .og-claves { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .og-claves { grid-template-columns: repeat(4, 1fr); } }

.og-clave {
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  border-bottom: 1px solid var(--og-borde);
}
@media (min-width: 640px) {
  .og-clave:nth-child(odd) { padding-left: 0; }
  .og-clave + .og-clave { border-left: 1px solid var(--og-borde); }
}
@media (min-width: 1040px) {
  .og-clave:nth-child(odd) { padding-left: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); }
  .og-clave:first-child { padding-left: 0; }
  .og-clave:last-child { padding-right: 0; }
}
.og-clave__valor {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  font-weight: var(--og-peso-medium); line-height: 1;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  background: var(--og-gradiente-texto);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.6rem;
}
.og-clave__texto {
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-peq); font-weight: var(--og-peso-regular);
  color: var(--og-texto-medio); max-width: 22ch;
}

/* Relato: título fijo a un lado, texto grande al otro. */
.og-relato {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .og-relato { grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); }
  .og-relato > .og-ficha__meta.og-rev { grid-column: 1 / -1; grid-row: 1; }
  .og-relato__titulo { grid-column: 1; grid-row: 2; position: sticky; top: 7rem; align-self: start; }
  .og-relato > .og-rev { grid-column: 2; grid-row: 2; }
}
.og-relato__titulo {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  letter-spacing: -0.03em;
}
.og-relato__texto {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6; color: var(--og-texto-medio); max-width: 62ch;
}
.og-relato__texto + .og-relato__texto { margin-top: 1.25rem; }

/* Quién lo hizo: perfiles del equipo, sin foto, en fila. */
.og-perfiles {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.og-rol { padding-top: 1.1rem; border-top: 2px solid transparent;
  background: var(--og-gradiente-texto) top left / 2.25rem 2px no-repeat; }
.og-rol__cargo {
  font-family: var(--og-fuente-titulo);
  font-size: 1.0625rem; font-weight: var(--og-peso-medium);
  letter-spacing: -0.015em; margin-bottom: 0.4rem;
}
.og-rol__texto { font-size: var(--og-t-peq); color: var(--og-texto-tenue); }

/* Nota al pie de la ficha: adjudicación, expediente y similares. */
.og-nota-ficha {
  margin-top: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-top: 1px solid var(--og-borde);
  font-size: var(--og-t-peq); color: var(--og-texto-tenue); max-width: 62ch;
}

/* Estructura pendiente, para las fichas aún sin redactar. */
.og-ficha__bloques { border-top: 1px solid var(--og-borde); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.og-ficha__bloque {
  display: grid; gap: 0.75rem 3rem; grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-bottom: 1px solid var(--og-borde);
}
@media (min-width: 900px) {
  .og-ficha__bloque { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); }
}
.og-ficha__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: var(--og-t-cejilla); font-weight: var(--og-peso-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--og-texto-tenue);
  padding-top: 0.35rem;
}
.og-ficha__texto { font-size: var(--og-t-base); color: var(--og-texto-medio); max-width: 62ch; }
.og-ficha__texto + .og-ficha__texto { margin-top: 1rem; }
.og-pendiente {
  display: inline-block; margin-bottom: 0.6rem;
  padding: 0.25rem 0.6rem; border: 1px dashed var(--og-borde-fuerte);
  font-family: var(--og-fuente-titulo); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-texto-tenue);
}

/* ---------- Selectores del formulario largo --------------- */
select.og-campo__control { appearance: none; cursor: pointer; }
select.og-campo__control option { background: var(--og-plano-1); color: var(--og-texto); }
.og-form--largo { display: grid; gap: 1.25rem; }
@media (min-width: 700px) {
  .og-form--largo { grid-template-columns: repeat(2, 1fr); }
  .og-form--largo .og-campo--ancho, .og-form--largo > p { grid-column: 1 / -1; }
}

/* Aviso de contenido inventado. Tiene que cantar: es una ficha de
   un cliente público real con narrativa de ejemplo. */
.og-aviso-ejemplo {
  display: block; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding: 1rem 1.25rem;
  border: 1px dashed var(--og-verde);
  border-radius: var(--og-radio);
  background: rgba(82, 219, 112, 0.06);
  font-size: var(--og-t-peq); color: var(--og-texto-medio);
  max-width: 70ch;
}
.og-aviso-ejemplo strong { color: var(--og-verde); font-weight: var(--og-peso-semibold); }

/* Tres bloques en lugar de cuatro: la capa de problemas de salud
   reutiliza la tarjeta de área. */
@media (min-width: 900px) {
  .og-areas--tres { grid-template-columns: repeat(3, 1fr); }
}
.og-areas--tres .og-area { min-height: clamp(19rem, 15rem + 12vw, 25rem); }
a.og-celda { display: block; transition: border-color var(--og-dur-rapida) var(--og-ease-inter); }
a.og-celda:hover { border-top-color: var(--og-blanco); }

/* Cierre de bloque: la frase que resume lo que las piezas de
   arriba tienen en común. Cuelga de un filete de marca. */
.og-remate {
  margin-top: clamp(1.75rem, 1.25rem + 1.75vw, 2.75rem);
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.125rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: var(--og-peso-light);
  line-height: 1.42; letter-spacing: -0.02em;
  color: var(--og-texto-medio);
  max-width: 58ch;
}
.og-remate strong { font-weight: var(--og-peso-medium); color: var(--og-texto); }

/* ---------- 19. Contraste del héroe en pantalla estrecha --------
   El velo del héroe está pensado en diagonal, para dejar la derecha
   del plano a la vista. En móvil el titular ocupa todo el ancho y esa
   diagonal ya no lo cubre: aquí se sustituye por un velo plano. */
@media (max-width: 768px) {
  .og-hero__fondo .og-media__velo {
    background:
      linear-gradient(to bottom, rgba(10, 7, 36, 0.4) 0%, rgba(8, 7, 28, 0.46) 42%,
                                 rgba(5, 5, 8, 0.56) 100%);
  }
  .og-hero__fondo video { filter: grayscale(0.1) contrast(1.02) brightness(1.04) saturate(1.05); }
}

/* ---------- 20. Aurora de sección -------------------------------
   Manchas de color muy difusas sobre el negro, en lugar de un plano
   liso. Van al fondo (z-index 0) y sin capturar el ratón; el
   contenedor de cada sección ya se eleva a z-index 1. */
.og-seccion--aurora { position: relative; isolation: isolate; overflow: hidden; }
.og-seccion--aurora::before,
.og-seccion--aurora::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
}
/* Un brillo centrado en el borde superior, como si la luz del bloque
   anterior se derramara sobre este. El morado lleva el peso y el verde
   y el azul solo lo tiñen por los lados. Sutil, pero tiene que verse:
   por debajo de 0.2 de opacidad desaparece en pantallas calibradas. */
/* El inset no puede ser negativo hacia arriba: `overflow: hidden`
   recortaba justo la parte donde nace el brillo y no se veía nada.
   Los pseudo-elementos arrancan en el borde superior visible. */
.og-seccion--aurora::before {
  inset: 0 0 auto 0; height: clamp(15rem, 26vw, 26rem);
  background: radial-gradient(44% 92% at 50% 0%, rgba(100, 64, 243, 0.52) 0%,
                              rgba(100, 64, 243, 0.2) 40%, transparent 72%);
  filter: blur(18px);
}
.og-seccion--aurora::after {
  inset: 0 0 auto 0; height: clamp(11rem, 19vw, 19rem);
  background:
    radial-gradient(30% 78% at 24% 0%, rgba(79, 205, 161, 0.2) 0%, transparent 74%),
    radial-gradient(30% 78% at 76% 0%, rgba(75, 181, 254, 0.22) 0%, transparent 74%);
  filter: blur(22px);
}

/* ---------- 21. Formulario a dos columnas -----------------------
   Con siete campos, una sola columna alargaba demasiado el bloque de
   contacto. Los pares entran a media anchura desde tablet; el
   comentario, el botón y los avisos siguen ocupando la fila entera.
   El select ya heredaba .og-campo__control, así que solo le falta
   la flecha: appearance:none la quita y se repone con un SVG en
   línea, que no depende de ningún archivo externo. */
@media (min-width: 620px) {
  .og-form { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; }
  .og-form > .og-campo--mitad { grid-column: span 2; }
  .og-form > .og-campo:not(.og-campo--mitad) { grid-column: 1 / -1; }
  .og-form > p { grid-column: 1 / -1; }

  .og-form > p:has(.og-btn) {
    order: 2; grid-column: 4; justify-self: end; align-self: center;
  }
  .og-form > .og-form__legal:not([data-form-aviso]) {
    order: 1; grid-column: 1 / span 3; align-self: center; margin: 0;
  }
  .og-form > .og-form__legal[data-form-aviso] { order: 3; }
}
.og-campo__opcional {
  letter-spacing: 0.04em; text-transform: none; color: var(--og-texto-tenue);
  opacity: 0.72;
}
select.og-campo__control {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fdfdfd' stroke-opacity='.55' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

/* ---------- 22. Refuerzo tecnológico del grupo ------------------
   Cierra la rejilla de equipo explicando de dónde sale la capacidad
   técnica, en lugar de añadir fichas de perfiles que no son de
   Origen Genetics. */
.og-refuerzo {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border: 1px solid var(--og-borde);
  border-radius: var(--og-radio);
  background:
    radial-gradient(90% 140% at 4% 6%, rgba(79, 205, 161, 0.09) 0%, transparent 62%),
    radial-gradient(80% 130% at 96% 96%, rgba(98, 73, 244, 0.14) 0%, transparent 64%),
    var(--og-plano-1);
  max-width: 72ch;
}
.og-refuerzo__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: var(--og-peso-medium); letter-spacing: -0.015em;
}
.og-refuerzo__texto {
  margin-top: 0.875rem; font-size: var(--og-t-peq);
  color: var(--og-texto-medio); line-height: 1.6;
}
.og-refuerzo__texto strong { color: var(--og-texto); font-weight: var(--og-peso-medium); }
.og-refuerzo .og-enlace { display: inline-flex; margin-top: 1.25rem; }

/* ---------- 23. Filtro de proyectos ------------------------------
   Pastillas en una fila que envuelve. El estado activo se marca con
   el degradado de marca, no con un color plano, para que el filtro
   pertenezca al mismo sistema que los titulares. */
.og-filtros {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}
.og-filtro {
  position: relative; isolation: isolate;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--og-borde); border-radius: 999px;
  background: transparent; color: var(--og-texto-medio);
  font-family: var(--og-fuente-titulo); font-size: var(--og-t-peq);
  font-weight: var(--og-peso-medium); letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-filtro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--og-gris);
  opacity: 0; transition: opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-filtro:not(.og-filtro--activo):hover { color: var(--og-texto); border-color: var(--og-borde-fuerte); }
.og-filtro--activo, .og-filtro--activo:hover {
  color: var(--og-negro); border-color: transparent;
  font-weight: var(--og-peso-medium);
}
.og-filtro--activo::before { opacity: 1; }

/* ---------- 24. Migas de pan de la ficha ------------------------
   Una sola línea que devuelve al listado. Con trece proyectos y
   cuatro áreas, orientarse importa más que en la versión anterior. */
.og-migas {
  padding-block: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-bottom: 1px solid var(--og-borde);
  font-family: var(--og-fuente-titulo); font-size: var(--og-t-cejilla);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--og-texto-tenue);
}
.og-migas a { color: var(--og-texto-medio); text-decoration: none; }
.og-migas a:hover { color: var(--og-texto); }
.og-migas span[aria-hidden] { opacity: 0.4; margin-inline: 0.4rem; }

/* ---------- 25. Paginación de proyectos -------------------------
   Numeración clásica con primera, anterior, siguiente y última. La
   página activa usa la misma pastilla clara que el filtro, para que
   los dos controles de la página se lean como un mismo sistema. */
.og-paginacion {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.og-pag {
  min-width: 2.5rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--og-borde); border-radius: var(--og-radio-peq, 8px);
  background: transparent; color: var(--og-texto-medio);
  font-family: var(--og-fuente-titulo); font-size: 1rem;
  font-weight: var(--og-peso-regular); line-height: 1.2;
  cursor: pointer;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter),
              background-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-pag:hover:not(:disabled) { color: var(--og-texto); border-color: var(--og-borde-fuerte); }
.og-pag:disabled { opacity: 0.32; cursor: default; }
.og-pag--activa {
  background: var(--og-blanco); border-color: var(--og-blanco); color: var(--og-negro);
}

/* ---------- 26. Bloque de título y texto ------------------------
   La maquetación que usa origen.bio para sus bloques de discurso:
   un titular de 34 px donde la primera parte va en degradado y la
   segunda en blanco, y debajo el párrafo, ambos alineados a la
   izquierda y con la medida corta. */
.og-bloque { max-width: 60ch; }
.og-bloque__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.125rem);
  font-weight: var(--og-peso-medium); line-height: 1.18;
  letter-spacing: -0.028em; text-wrap: balance;
}
.og-bloque__texto {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--og-t-base); line-height: 1.62;
  color: var(--og-texto-medio);
}
.og-bloque__remate {
  margin-top: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: var(--og-peso-medium); line-height: 1.4;
  letter-spacing: -0.015em; color: var(--og-texto);
}

/* El bloque de refuerzo adopta el mismo titular: el grupo se presenta
   con el mismo tono con el que se presenta el equipo. */
.og-refuerzo__titulo {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);
  line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance;
}

/* El primer bloque tras el héroe arranca antes: el aire de encima
   separaba demasiado la fotografía del primer texto y la portada
   empezaba en negro. */
.og-hero + .og-seccion { padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4rem); }

/* ---------- 27. Enlace con degradado ----------------------------
   Variante del enlace para los remates de sección: más cuerpo y el
   degradado corporativo sobre el texto. El fondo se estira por encima
   del ancho del enlace para que la flecha siga dentro del degradado
   cuando se desplaza al pasar el cursor. */
.og-enlace--grad {
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  font-weight: var(--og-peso-medium); letter-spacing: -0.015em;
  background: var(--og-gradiente-texto);
  background-size: 140% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- 28. Flechas entre los pasos del método --------------
   Una flecha entre bloque y bloque, dibujada sobre la línea que ya
   los separa: marca que los tres se leen en orden. Solo aparece en
   la disposición de tres columnas; apilados, el orden vertical ya
   se entiende solo. */
@media (min-width: 900px) {
  .og-razon + .og-razon { position: relative; }
  .og-razon + .og-razon::before {
    content: ""; position: absolute; z-index: 1;
    top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); left: -7px;
    width: 14px; height: 14px;
    background: var(--og-plano-0);
    /* la punta se dibuja con dos trazos girados 45 grados */
    border-top: 1.5px solid var(--og-azul);
    border-right: 1.5px solid var(--og-azul);
    transform: rotate(45deg);
    opacity: 0.55;
  }
}

/* ---------- 29. Etiquetas de área en la ficha -------------------
   Con varias áreas por proyecto, el pie de la tarjeta y la cabecera
   de la ficha pasan a ser una fila que envuelve. En la ficha las
   etiquetas llevan al área, así que se comportan como enlaces. */
.og-tarjeta__pie { flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.og-ficha__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.og-etiqueta--periodo { color: var(--og-texto-medio); }
.og-etiqueta--enlace {
  text-decoration: none;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-etiqueta--enlace:hover { color: var(--og-texto); border-color: var(--og-borde-fuerte); }

/* Los enlaces dentro del relato se distinguen sin subrayado continuo:
   con trece fichas llenas de menciones a áreas, subrayarlas todas
   convertía el párrafo en una maraña. */
.og-relato__texto a {
  color: var(--og-azul-txt); text-decoration: none;
  background-image: linear-gradient(var(--og-azul-txt), var(--og-azul-txt));
  background-size: 100% 1px; background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--og-dur-rapida) var(--og-ease-inter);
}
.og-relato__texto a:hover { background-size: 100% 2px; }