/* ============================================================
   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;
  /* `clip` y no `hidden`: con hidden el body se convierte en contenedor
     de scroll y el navegador deja de saltar a las anclas (#servicio-…
     desde el menú no hacía nada). `clip` recorta igual sin crear ese
     contenedor. */
  overflow-x: clip;
}

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 ------------------------------------ */
/* Botón según origen.bio: píldora con trazo, fondo transparente con un
   velo apenas perceptible, y al pasar el cursor el trazo se convierte en
   el degradado corporativo y gira. El relleno nunca se pinta: lo que
   cambia es el borde y el texto.

   El giro se consigue animando un ángulo declarado con @property, que es
   lo único que permite interpolar un conic-gradient. Donde no haya
   soporte, el degradado se ve fijo en lugar de girar. */
@property --og-angulo {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
@keyframes og-girar { to { --og-angulo: 360deg; } }

.og-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.7rem 2rem; border-radius: var(--og-radio-pill);
  border: 2px solid var(--og-blanco);
  background: linear-gradient(261deg, rgba(255, 255, 255, 0.2) -293%,
                                      rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--og-blanco);
  font-family: var(--og-fuente-titulo);
  font-size: 0.9375rem; font-weight: var(--og-peso-regular);
  line-height: 1.4; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter),
              color var(--og-dur-rapida) var(--og-ease-inter);
}

/* El anillo de degradado vive en un pseudo-elemento recortado con
   máscara: es la única forma de tener un borde en degradado que
   respete el radio. */
.og-btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--og-angulo),
    var(--og-verde-txt) 0deg, var(--og-azul-txt) 120deg,
    var(--og-morado-txt) 240deg, var(--og-verde-txt) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--og-dur-rapida) var(--og-ease-inter);
}

.og-btn:hover, .og-btn:focus-visible {
  border-color: transparent;
  background-image: var(--og-gradiente-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.og-btn:hover::before, .og-btn:focus-visible::before {
  opacity: 1; animation: og-girar 2s linear infinite;
}

/* Las dos variantes se diferencian por el peso del trazo en reposo: el
   sólido lo lleva a plena opacidad y el de línea, atenuado. */
.og-btn--solido { border-color: var(--og-blanco); }
.og-btn--linea { border-color: rgba(253, 253, 253, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .og-btn:hover::before, .og-btn:focus-visible::before { animation: none; }
}


/* 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);
  text-decoration: none;
  /* El degradado es para el enlace suelto, el que va en su propia
     línea. Dentro de una frase se usa `.og-enlace-texto`: color plano
     y subrayado, porque el degradado repartido entre dos palabras en
     mitad de un párrafo no se lee como enlace ni llega al contraste
     mínimo en el tramo morado. */
  background-image: var(--og-gradiente-texto);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Solo sobre las franjas de color pleno, donde el degradado se pierde
   contra la fotografía en duotono, el enlace vuelve a blanco. Las
   bandas son fondo negro: ahí el degradado se lee. */
.og-prueba .og-enlace {
  background-image: none; color: var(--og-blanco);
  -webkit-text-fill-color: var(--og-blanco);
}
.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);
  will-change: background-color; transform: translateZ(0);
  transition: background-color var(--og-dur-media) var(--og-ease-inter);
}
.og-header[data-fijo="true"] { background: rgba(6, 6, 10, 0.55); }
.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); }
/* El idioma que no se está viendo es un enlace real desde que
   existe /en/: mantiene el peso visual bajo, pero responde. */
.og-idioma__inactivo {
  color: var(--og-texto-tenue); opacity: 0.6;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              opacity var(--og-dur-rapida) var(--og-ease-inter);
}
.og-idioma__inactivo:hover,
.og-idioma__inactivo:focus-visible { color: var(--og-blanco); opacity: 1; }

/* 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);
  /* El origen se fija al centro del viewBox, no al de cada línea:
     con `center` cada trazo giraba sobre su propio eje y la X no
     llegaba a cruzarse en el mismo punto. */
  transform-box: view-box; transform-origin: 12px 12px;
}
/* El orden importa: en CSS la transformación de la derecha se aplica
   primero. Con `translateY(6px) rotate(45deg)` el trazo giraba antes
   de centrarse y las astas salían desiguales. */
.og-menu-btn[aria-expanded="true"] line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.og-menu-btn[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.og-menu-btn[aria-expanded="true"] line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

@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;
    background: none; border: 0; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none;
  }
  /* El panel de escritorio se centra con translate(-50%): esa regla
     lleva :hover, así que pesaba más que la de aquí y al pasar por
     encima la lista se iba media anchura a la izquierda. */
  .og-nav__item:hover > .og-sub,
  .og-nav__item:focus-within > .og-sub { transform: none; }
  .og-sub::before { display: none; }
  /* Sin caja ni filete lateral: la jerarquía la da el tamaño, como en
     el pie. La línea cierra el grupo entero, no cada hijo. */
  .og-nav__item:has(.og-sub) > .og-nav__enlace { border-bottom: 0; padding-bottom: 0.5rem; }
  .og-nav__item:has(.og-sub) { border-bottom: 1px solid var(--og-borde); }
  .og-sub { padding: 0 0 0.85rem 0; }
  .og-sub a {
    display: block; padding: 0.42rem 0 0.42rem 0.9rem;
    border-left: 0; font-size: 0.9375rem;
    color: rgba(253, 253, 253, 0.72);
  }
  /* El realce del panel de escritorio recorta el fondo al texto y lo
     estira al 120 %: en la lista desplegable eso descolocaba la línea
     al pasar por encima. Aquí solo cambia el color. */
  .og-sub a:hover {
    background: none; background-size: auto;
    -webkit-background-clip: border-box; background-clip: border-box;
    color: var(--og-blanco); -webkit-text-fill-color: var(--og-blanco);
  }
  .og-sub > li:hover { background: none; }
  .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;
}

/* La firma de letras del fondo se sale del contenedor a propósito,
   pero en las secciones sin recorte eso abría scroll horizontal en
   toda la página: la tabla de servicios parecía descuadrada porque
   el documento se podía desplazar de lado. */
.og-seccion, .og-footer { overflow-x: clip; }

/* ---------- 11. Razones ----------------------------------- */
/* Sin filete superior ni divisiones verticales: cada columna ya se
   separa por el aire y por la línea de marca que corona su título. */
.og-razones {
  display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
@media (min-width: 900px) {
  .og-razones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

.og-razon { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .og-razones { gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
}
.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%);
}

/* Lifely es otra marca del ecosistema y se presenta con su propia
   fotografía y su azul, el de lifely.bio, para que no se confunda con
   la oferta de Genetics. A diferencia de la franja de Origen, aquí la
   foto se ve: el duotono la borraba, porque son retratos de fondo
   suave sin la estructura que aguanta el tratamiento. El contraste
   del texto lo da un velo lateral, no un velo uniforme. */
.og-prueba--lifely .og-media img {
  filter: saturate(0.72) contrast(1.06) brightness(0.86);
  object-position: 70% 18%;
}
.og-prueba--lifely .og-media__duo { display: none; }
.og-prueba--lifely .og-prueba__lavado {
  background:
    radial-gradient(56ch 44ch at 94% 94%, rgba(0, 210, 255, 0.24), transparent 62%),
    linear-gradient(100deg, rgba(6, 20, 46, 0.96) 0%, rgba(9, 32, 72, 0.9) 34%,
                            rgba(14, 47, 100, 0.5) 66%, rgba(24, 74, 148, 0.22) 100%);
}
.og-prueba--lifely .og-prueba__titular { max-width: 24ch; }
.og-prueba--lifely .og-prueba__texto { max-width: 56ch; }

/* La franja de Origen Corp. enseña ahora las oficinas: el logotipo en
   la pared, el equipo trabajando y el lema. Es la prueba de lo que dice
   el texto, así que tiene que verse. Con el lavado uniforme quedaba un
   morado plano en el que no se reconocía nada, y el duotono terminaba
   de borrarla. Como en Lifely, el contraste lo da un velo lateral:
   opaco donde cae el titular y transparente sobre la oficina. */
.og-prueba--origen .og-media img {
  filter: saturate(0.92) contrast(1.04) brightness(0.9);
}
.og-prueba--origen .og-media__duo { display: none; }
.og-prueba--origen .og-prueba__lavado {
  background:
    radial-gradient(60ch 48ch at 96% 92%, rgba(100, 64, 243, 0.26), transparent 62%),
    linear-gradient(100deg, rgba(6, 12, 40, 0.96) 0%, rgba(16, 14, 66, 0.9) 34%,
                            rgba(30, 18, 96, 0.52) 66%, rgba(46, 24, 128, 0.2) 100%);
}
@media (max-width: 760px) {
  .og-prueba--origen .og-prueba__lavado {
    background:
      radial-gradient(60ch 48ch at 96% 96%, rgba(100, 64, 243, 0.22), transparent 62%),
      linear-gradient(176deg, rgba(6, 12, 40, 0.95) 0%, rgba(16, 14, 66, 0.92) 46%,
                              rgba(30, 18, 96, 0.62) 100%);
  }
}

/* En pantalla estrecha no queda lado libre: el velo pasa a vertical
   para que el texto no caiga sobre la parte clara de la foto. */
@media (max-width: 760px) {
  .og-prueba--lifely .og-prueba__lavado {
    background:
      radial-gradient(56ch 44ch at 94% 96%, rgba(0, 210, 255, 0.2), transparent 62%),
      linear-gradient(176deg, rgba(6, 20, 46, 0.95) 0%, rgba(9, 32, 72, 0.92) 46%,
                              rgba(14, 47, 100, 0.62) 100%);
  }
}

.og-prueba__titular {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  letter-spacing: -0.03em; max-width: 20ch;
}
.og-prueba__texto {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--og-t-base); line-height: 1.62;
  color: rgba(253, 253, 253, 0.86); max-width: 68ch;
}
.og-prueba__texto strong { color: var(--og-blanco); font-weight: var(--og-peso-medium); }

.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: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
  font-weight: var(--og-peso-medium); line-height: 1.2;
  letter-spacing: -0.02em; text-transform: none; text-wrap: balance;
  color: var(--og-blanco); margin-bottom: 0.75rem;
}
.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);
}

/* ---------- 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); } }
/* Cinco columnas desde que Servicios tiene la suya. La primera se
   estrecha: era la más ancha y solo lleva la marca y una línea. */
@media (min-width: 1040px) {
  .og-footer__grid { grid-template-columns: 0.95fr 1.05fr 1fr 0.85fr 1.05fr; }
}

/* La descripción de marca usaba la nota general, más pequeña y de
   otra familia que el resto del pie. */
.og-footer__grid > div:first-child .og-nota {
  font-family: var(--og-fuente-titulo);
  font-size: 1rem; line-height: 1.4;
  color: var(--og-texto-medio); max-width: 26ch;
}

.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: 0.9rem;
}
.og-footer__lista { display: grid; gap: 0.5rem; }
.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.32;
  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: 0.9375rem; 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; }

/* En móvil el pie se alarga mucho: las listas se cierran y los tres
   enlaces legales caben en una línea. */
@media (max-width: 559px) {
  .og-footer { padding-block: 2.5rem 1.5rem; }
  .og-footer__grid { gap: 1.5rem; }
  .og-footer__lista { gap: 0.1rem; }
  .og-footer__lista a, .og-footer__lista span { line-height: 1.15; display: block; }
  .og-footer__lista li { padding: 0.18rem 0; }
  .og-footer__titulo { margin-bottom: 0.55rem; font-size: 1.125rem; }
  .og-footer__grid > div:first-child .og-nota {
    line-height: 1.28; margin-top: 0.9rem; max-width: 34ch;
  }
  .og-footer__cierre {
    font-size: 0.8125rem; gap: 0.45rem 1rem;
    margin-top: 1.75rem; padding-top: 1.25rem;
  }
  .og-footer__legal { gap: 0.65rem; }
}
.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); }
/* Encuadre alto. En las fotos donde las personas ocupan la mitad
   superior, `cover` recorta por el centro y en pantalla apaisada les
   corta la cabeza. Se sube el punto de anclaje. En móvil el contenedor
   es más alto que ancho, la foto sobra por los lados y no por arriba,
   así que esta regla no altera nada allí. */
.og-media img[data-encuadre="alto"] { object-position: 50% 18%; }
.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); }
}
/* Los cuatro servicios son una secuencia, no un catálogo suelto: se
   numeran para que se lean en orden y para distinguirlos de las demás
   rejillas de la página, que sí son catálogos. El número usa el mismo
   tratamiento tipográfico que las fases del método, porque son lo
   mismo visto por tramos contratables. */
.og-servicios { counter-reset: og-servicio; }
/* Sin filete superior en cada tarjeta: con cuatro columnas y la línea
   de sección encima, la rejilla se llenaba de rayas. El número basta
   para separar. En columna estrecha sí vuelve, porque ahí sí hace
   falta algo que corte entre una tarjeta y la siguiente. */
.og-servicio { padding-top: 1.35rem; }
@media (max-width: 759px) {
  .og-servicio + .og-servicio { border-top: 1px solid var(--og-borde); }
}
.og-servicio::before {
  counter-increment: og-servicio;
  content: "0" counter(og-servicio);
  display: block; margin-bottom: 0.85rem;
  font-family: var(--og-fuente-titulo);
  font-size: 0.8125rem; font-weight: var(--og-peso-medium);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--og-texto-tenue);
}
.og-servicio__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;
  color: var(--og-blanco); margin-bottom: 0.7rem; text-wrap: balance;
}
/* En el índice de áreas los cuatro servicios se pintan con los mismos
   colores que la matriz de /servicios/: quien baja de una página a la
   otra reconoce el servicio por el color antes que por el nombre. */
.og-servicios--color .og-servicio {
  padding: 1.35rem 1.15rem 1.5rem;
  border-radius: var(--og-radio-md, 14px);
}
.og-servicios--color .og-servicio:nth-child(1) { background: rgba(79, 205, 161, 0.08); }
.og-servicios--color .og-servicio:nth-child(2) { background: rgba(75, 181, 254, 0.08); }
.og-servicios--color .og-servicio:nth-child(3) { background: rgba(98, 73, 244, 0.11); }
.og-servicios--color .og-servicio:nth-child(4) { background: rgba(75, 181, 254, 0.055); }
.og-servicios--color .og-servicio::before { margin-bottom: 0.7rem; }

.og-servicio__enlace {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-servicio__enlace:hover { border-bottom-color: var(--og-blanco); }
/* El ancla de cada servicio queda bajo la cabecera fija. */
.og-matriz__servicio { scroll-margin-top: 7rem; }

.og-servicio__texto { font-size: var(--og-t-peq); color: var(--og-texto-medio); }

/* La matriz de la página de servicios: el mismo catálogo que las áreas,
   girado. El eje pasa a ser el servicio y las cuatro áreas son las
   columnas, para que se vea de un golpe que el servicio es el mismo y
   lo que cambia es sobre qué se aplica. */
.og-matriz { margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.og-matriz__cabecera { display: none; }

/* En columna estrecha la tabla se deshace, así que el color es lo
   único que dice dónde empieza y acaba cada servicio: cada bloque
   toma su punto del degradado corporativo y se recorta como tal.
   Con eso sobran los filetes de las celdas. */
.og-matriz__grupo + .og-matriz__grupo { margin-top: 1.75rem; }
.og-matriz__grupo {
  padding: 1.5rem 1.25rem 1.6rem;
  border-radius: var(--og-radio-md, 14px);
}
/* Dentro de la caja el contenido va junto: lo que separa un servicio
   del siguiente es el hueco entre cajas, no el aire interior. */
.og-matriz .og-celda__titulo { margin-bottom: 0.35rem; }
.og-matriz .og-celda__texto { font-size: 0.875rem; line-height: 1.45; }
.og-matriz .og-contexto { margin-top: 0.5rem; }
/* Dos columnas ya en móvil grande: los textos de celda son de una o
   dos líneas y en una sola columna la sección se hacía interminable. */
@media (min-width: 560px) {
  .og-matriz .og-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
}
.og-matriz__grupo:nth-child(2) { background: rgba(79, 205, 161, 0.08); }
.og-matriz__grupo:nth-child(3) { background: rgba(75, 181, 254, 0.08); }
.og-matriz__grupo:nth-child(4) { background: rgba(98, 73, 244, 0.11); }
.og-matriz__grupo:nth-child(5) { background: rgba(75, 181, 254, 0.055); }
.og-matriz__grupo .og-celda { border-top: 0; padding-top: 0; }
.og-matriz__grupo .og-rejilla { gap: 1.25rem; margin-top: 0; }

.og-matriz__servicio {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1rem;
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: var(--og-peso-medium); letter-spacing: -0.02em;
  color: var(--og-blanco);
  /* Dentro de la caja de color, una línea fina separa el nombre del
     servicio de sus cuatro áreas. En la tabla de escritorio ese papel
     lo hace la propia rejilla. */
  padding-bottom: 0.9rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(253, 253, 253, 0.16);
}

/* Al llegar desde un enlace con ancla, la fila del servicio se acusa
   un momento: sin eso, el visitante aterriza en mitad de una tabla y
   no sabe cuál de las cuatro filas ha pedido. El realce se desvanece
   solo. `:target` lo cubre sin JavaScript; la clase la pone el script
   para que también funcione al pulsar dos veces el mismo enlace. */
@keyframes og-acusar-fila {
  0%   { background-color: rgba(255, 255, 255, 0.16); }
  100% { background-color: transparent; }
}
.og-matriz__servicio:target,
.og-matriz__servicio.og-acusada,
.og-matriz__grupo:has(.og-matriz__servicio:target) .og-celda,
.og-matriz__grupo:has(.og-matriz__servicio.og-acusada) .og-celda {
  animation: og-acusar-fila 2.4s var(--og-ease-inter);
}
@media (prefers-reduced-motion: reduce) {
  .og-matriz__servicio:target,
  .og-matriz__servicio.og-acusada,
  .og-matriz__grupo:has(.og-matriz__servicio:target) .og-celda,
  .og-matriz__grupo:has(.og-matriz__servicio.og-acusada) .og-celda { animation: none; }
}

/* En pantalla ancha la matriz se lee como lo que es: una tabla de
   cuatro servicios por cuatro áreas. El HTML no cambia — los grupos
   y sus rejillas se disuelven con `display: contents` y sus celdas
   caen en la rejilla de cinco columnas del padre.
   Descartado el giro de la celda: escondería el texto tras una
   interacción que en táctil no existe. Lo que aparece al pasar por
   encima es el enlace, que hasta entonces sumaba dieciséis veces. */
@media (min-width: 1200px) {
  .og-matriz {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) repeat(4, minmax(0, 1fr));
    gap: 0; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  .og-matriz__grupo,
  .og-matriz .og-rejilla { display: contents; }
  .og-matriz__grupo { background: none; padding: 0; }

  .og-matriz__cabecera {
    display: contents;
  }
  .og-matriz__cabecera > span {
    padding: 1.1rem 1.15rem 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--og-fuente-titulo);
    font-size: 1rem; font-weight: var(--og-peso-medium);
    line-height: 1.25; letter-spacing: -0.015em;
    color: var(--og-blanco);
    text-wrap: balance; align-self: stretch;
    display: flex; align-items: flex-end;
  }
  /* la celda vacía de la esquina acompaña a la fila, sin plano */
  .og-matriz__cabecera > span:first-child {
    background: none; border-bottom-color: var(--og-borde);
  }

  .og-matriz__servicio {
    flex-direction: column; align-items: flex-start; gap: 0.25rem;
    padding: 1.4rem 1.4rem 1.4rem 0;
    border-bottom: 1px solid var(--og-borde);
    margin: 0;                       /* el de la versión apilada sobra aquí */
    font-size: 1.0625rem;
  }
  .og-matriz__servicio .og-matriz__fase { font-size: 0.75rem; }
  .og-matriz .og-celda {
    margin: 0; padding: 1.75rem 1.15rem 1.5rem;
    border-radius: 0;
    border-top: 0; border-bottom: 1px solid var(--og-borde);
    transition: background-color var(--og-dur-rapida) var(--og-ease-inter);
  }
  .og-matriz__grupo:last-child .og-matriz__servicio,
  .og-matriz__grupo:last-child .og-celda { border-bottom: 0; }

  /* El área ya la nombra la cabecera de la columna: repetirla en cada
     celda duplicaba el rótulo dieciséis veces. En columna estrecha
     desaparece la cabecera y vuelve el título. */
  .og-matriz .og-celda__titulo { display: none; }
  .og-matriz .og-celda__texto { font-size: 0.8125rem; }

  /* El plano negro se rompe con la propia paleta: cada fila toma un
     punto del degradado corporativo, muy rebajado. */
  .og-matriz__grupo:nth-child(2) .og-celda { background: rgba(79, 205, 161, 0.07); }
  .og-matriz__grupo:nth-child(3) .og-celda { background: rgba(75, 181, 254, 0.07); }
  .og-matriz__grupo:nth-child(4) .og-celda { background: rgba(98, 73, 244, 0.09); }
  .og-matriz__grupo:nth-child(5) .og-celda { background: rgba(75, 181, 254, 0.05); }

  /* Al pasar por encima sube el color de la propia fila, no un gris:
     así la celda sigue diciendo a qué servicio pertenece. El texto
     pasa a blanco para que el contraste acompañe. */
  .og-matriz__grupo:nth-child(2) .og-celda:hover { background: rgba(79, 205, 161, 0.2); }
  .og-matriz__grupo:nth-child(3) .og-celda:hover { background: rgba(75, 181, 254, 0.2); }
  .og-matriz__grupo:nth-child(4) .og-celda:hover { background: rgba(98, 73, 244, 0.26); }
  .og-matriz__grupo:nth-child(5) .og-celda:hover { background: rgba(75, 181, 254, 0.16); }
  .og-matriz .og-celda { transition: background-color var(--og-dur-rapida) var(--og-ease-inter); }
  .og-matriz .og-celda__texto { transition: color var(--og-dur-rapida) var(--og-ease-inter); }
  .og-matriz .og-celda:hover .og-celda__texto { color: var(--og-blanco); }
  .og-matriz .og-celda:hover .og-contexto { color: var(--og-blanco); }

  /* El enlace aparece al acercarse. En táctil no hay hover, así que
     allí se queda visible. */
  .og-matriz .og-contexto {
    opacity: 0; transform: translateY(-3px);
    transition: opacity var(--og-dur-rapida) var(--og-ease-inter),
                transform var(--og-dur-rapida) var(--og-ease-inter);
  }
  .og-matriz .og-celda:hover .og-contexto,
  .og-matriz .og-contexto:focus-visible { opacity: 1; transform: none; }
}
@media (hover: none) {
  .og-matriz .og-contexto { opacity: 1; transform: none; }
}
.og-matriz__fase {
  font-size: var(--og-t-peq); font-weight: var(--og-peso-regular);
  letter-spacing: 0; color: var(--og-texto-tenue);
}
.og-matriz .og-rejilla { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
.og-matriz .og-celda { border-top-color: var(--og-borde); }
/* El contacto desde el cruce servicio × área. Discreto a propósito:
   son dieciséis en la misma página, así que pesa poco hasta que se
   busca. No abre ventana ni cambia de página — lleva al formulario
   que ya está abajo, con el cruce anotado. */
.og-contexto {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  margin-top: 0.85rem;
  font-size: 0.8125rem; line-height: 1.3;
  color: var(--og-texto-tenue); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--og-dur-rapida) var(--og-ease-inter),
              border-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-contexto span { transition: transform var(--og-dur-rapida) var(--og-ease-inter); }
.og-contexto:hover,
.og-contexto:focus-visible { color: var(--og-blanco); border-bottom-color: var(--og-blanco); }
.og-contexto:hover span { transform: translateX(3px); }
.og-servicio .og-contexto { margin-top: 1rem; }

/* Al llegar desde un cruce, el formulario parpadea una vez: es la
   única señal de que la consulta ya lleva contexto, porque el dato
   viaja oculto. */
@keyframes og-acusar {
  0%   { box-shadow: 0 0 0 0 rgba(75, 181, 254, 0); }
  35%  { box-shadow: 0 0 0 3px rgba(75, 181, 254, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(75, 181, 254, 0); }
}
.og-campo__control[data-acusa] { animation: og-acusar 1.6s var(--og-ease-inter); }

/* La pista de la columna izquierda. El cruce servicio × área viaja
   oculto en el envío; esta línea es lo único que lo devuelve visible,
   para que quien escribe vea que su consulta ya llega situada. El
   realce va sobre el color y no sobre el fondo: el párrafo no tiene
   caja y un fondo le dibujaría una que no le corresponde. */
.og-contexto-nota {
  margin-top: 1.25rem; font-size: var(--og-t-peq);
  color: var(--og-texto-tenue); max-width: 52ch; text-wrap: pretty;
}
.og-contexto-nota strong { color: var(--og-blanco); font-weight: inherit; }
@keyframes og-acusar-nota {
  0%   { color: var(--og-blanco); }
  100% { color: var(--og-texto-tenue); }
}
.og-contexto-nota[data-acusa] { animation: og-acusar-nota 2.2s var(--og-ease-inter); }
@media (prefers-reduced-motion: reduce) {
  .og-campo__control[data-acusa] { animation: none; }
  .og-contexto-nota[data-acusa] { animation: none; }
  .og-contexto:hover span { transform: none; }
}

.og-celda__enlace {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter);
}
.og-celda__enlace:hover { border-bottom-color: var(--og-blanco); }

/* El puente al método. Va bajo los servicios en cada área y cierra el
   bloque: dice que los cuatro son tramos del mismo método, y evita que
   «Cómo lo hacemos» y «Método» compitan por explicar lo mismo. */
.og-puente {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.5rem; border-top: 1px solid var(--og-borde);
  font-size: var(--og-t-peq); color: var(--og-texto-medio);
  max-width: 62ch;
}

.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 > .og-listado__titulo { grid-column: 1; grid-row: 1; position: sticky; top: 7rem; align-self: start; }
  .og-listado > .og-lead { grid-column: 2; grid-row: 1; margin-top: 0; }
  .og-listado > .og-listado__filas { grid-column: 2; grid-row: 2; }
  /* Sin entradilla, las filas suben a la primera fila de la rejilla. */
  .og-listado:not(:has(> .og-lead)) > .og-listado__filas { grid-row: 1; }
}
.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 .og-firma { display: none; }
.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 > .og-consent { order: 1; 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__aviso { order: 3; grid-column: 1 / -1; }
  .og-form > .og-form__legal[data-form-aviso] { order: 4; grid-column: 1 / -1; }
}
.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 {
  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--destacado {
  max-width: none;
  border-color: rgba(100, 64, 243, 0.42);
  background:
    radial-gradient(64% 150% at 8% 0%, rgba(100, 64, 243, 0.42) 0%, transparent 66%),
    radial-gradient(52% 130% at 92% 100%, rgba(79, 205, 161, 0.14) 0%, transparent 68%),
    linear-gradient(140deg, rgba(100, 64, 243, 0.16) 0%, rgba(11, 11, 17, 0.9) 58%),
    var(--og-plano-1);
}
.og-refuerzo--destacado .og-refuerzo__texto { max-width: 74ch; }

/* Lifely va debajo, a media anchura: es la marca hermana, no el grupo. */
.og-celda--sola {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  border: 1px solid var(--og-borde); border-radius: var(--og-radio);
  background: var(--og-plano-1);
  max-width: 62ch;
}
.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; }


/* ---------- 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: 50%; margin-top: -7px;
    left: calc(-0.5 * clamp(2rem, 1rem + 2.5vw, 3.5rem) - 7px);
    width: 14px; height: 14px;
    /* 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,
.og-enlace-texto {
  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,
.og-enlace-texto:hover { background-size: 100% 2px; }

/* ---------- 30. Páginas legales ---------------------------------
   Texto largo y seguido: medida corta, jerarquía clara y los datos
   pendientes señalados para que no se publiquen por descuido. */
.og-legal { max-width: 68ch; }
.og-legal__aviso {
  padding: 1rem 1.25rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  border: 1px solid var(--og-borde-fuerte); border-radius: var(--og-radio);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--og-t-peq); color: var(--og-texto-medio);
}
.og-legal__titulo {
  font-family: var(--og-fuente-titulo);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: var(--og-peso-medium); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--og-blanco);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); margin-bottom: 0.75rem;
}
.og-legal__texto {
  font-size: var(--og-t-peq); line-height: 1.68; color: var(--og-texto-medio);
}
.og-legal__texto + .og-legal__texto { margin-top: 1rem; }
.og-legal__texto strong { color: var(--og-texto); font-weight: var(--og-peso-medium); }
.og-legal__texto a { color: var(--og-azul-txt); text-decoration: none;
  border-bottom: 1px solid rgba(75, 181, 254, 0.35); }
.og-legal__texto a:hover { border-bottom-color: var(--og-azul-txt); }
.og-legal__lista { margin-top: 0.75rem; padding-left: 1.1rem; }
.og-legal__lista li {
  font-size: var(--og-t-peq); line-height: 1.68; color: var(--og-texto-medio);
  margin-bottom: 0.5rem; list-style: disc;
}
/* Dato que falta: se marca en pantalla para que no pase inadvertido. */
.og-pendiente-dato {
  background: rgba(255, 196, 0, 0.16); color: #FFD466;
  padding: 0.05em 0.4em; border-radius: 4px;
  font-style: normal; font-weight: var(--og-peso-medium);
}

/* ---------- 31. Consentimientos del formulario ------------------
   Casilla propia: la nativa no se puede teñir del degradado ni
   igualar al resto de controles. La real queda accesible pero
   invisible, y la marca la dibuja el span. */
.og-consent { display: grid; gap: 0.85rem; margin-top: 0.5rem; }
.og-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem;
  align-items: start; cursor: pointer;
}
.og-check input {
  position: absolute; opacity: 0; width: 1.15rem; height: 1.15rem; margin: 0;
}
.og-check__marca {
  width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex-shrink: 0;
  border: 2px solid var(--og-borde-fuerte); border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--og-dur-rapida) var(--og-ease-inter),
              background var(--og-dur-rapida) var(--og-ease-inter);
}
.og-check:hover .og-check__marca { border-color: rgba(255, 255, 255, 0.4); }
.og-check input:checked + .og-check__marca {
  border-color: transparent; background: var(--og-gradiente-texto);
  /* la palomita se dibuja con un SVG en línea, sin archivo externo */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23050508' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.8'/%3E%3C/svg%3E"),
    var(--og-gradiente-texto);
  background-repeat: no-repeat; background-position: center;
  background-size: 11px 9px, 100% 100%;
}
.og-check input:focus-visible + .og-check__marca {
  outline: 2px solid var(--og-azul-txt); outline-offset: 2px;
}
.og-check__texto {
  font-size: 0.875rem; line-height: 1.5; color: var(--og-texto-medio);
}
.og-check__texto a { color: var(--og-azul-txt); text-decoration: none;
  border-bottom: 1px solid rgba(75, 181, 254, 0.35); }
.og-check__texto a:hover { border-bottom-color: var(--og-azul-txt); }
.og-check__obligatorio { color: var(--og-azul-txt); }

/* Aviso de tratamiento: letra pequeña, para leer si se busca. */
.og-form__aviso {
  font-size: 0.75rem; line-height: 1.55; color: var(--og-texto-tenue);
}
.og-form__aviso strong { color: var(--og-texto-medio); font-weight: var(--og-peso-medium); }
.og-form__aviso a { color: var(--og-texto-medio); }