/* ============================================================
   AQUASURV · hoja de estilo única
   Base: Ocean Infinity (oceaninfinity.com/what-we-do), por
   decisión de Franz del 23-sep-2026. Se toma de ahí:
     · el fondo oscuro de todo el sitio,
     · el entregable a todo el ancho como imagen de marca,
     · la rejilla de servicios con ícono, nombre en versalitas y
       una sola frase,
     · «dónde trabajamos» separado de «qué hacemos»,
     · el bloque partido imagen/declaración,
     · la franja de contacto y el «explorar» numerado del final.

   Lo que NO se toma: el texto sobre fotografía. La regla de
   composición que Franz aprobó el 7-sep sigue en pie — el
   entregable va crudo, nunca de fondo y nunca con texto encima.
   El efecto inmersivo se consigue de otra manera: los renders de
   nube LiDAR y multihaz traen fondo negro de «sin dato», que se
   rellena con el color de fondo del sitio (ver `FONDO` en
   `_imagenes.py`) y el entregable se funde con la página.

   Paleta: marca 2026, muestreada del logotipo de las láminas de
   julio de 2026 — azul #0493DD, gris #5F666B.
   ============================================================ */

/* --- 1. Fichas de color -------------------------------------
   Todos los pares de texto están medidos, no estimados:
     texto    sobre fondo      16,4:1   sobre superficie 14,7:1
     texto-2  sobre fondo       9,6:1   sobre superficie  8,6:1
     texto-3  sobre fondo       7,2:1   sobre superficie  6,4:1
     azul     sobre fondo       5,6:1   sobre superficie  5,0:1
   El gris de la marca (#5F666B) da 3,2:1 sobre fondo: no es texto.
------------------------------------------------------------- */
:root {
  --fondo:       #07131C;   /* = FONDO en _imagenes.py */
  --superficie:  #0E1F2B;
  --superficie-2:#132836;
  --linea:       #1F3542;
  --linea-fuerte:#2E4757;
  --texto:       #EAF1F4;
  --texto-2:     #A9BCC6;
  --texto-3:     #8FA3AE;
  --azul:        #0493DD;
  --azul-claro:  #3FB0EC;
  --gris-marca:  #5F666B;
  --alerta:      #F08A7E;

  --col:     1280px;
  --lectura: 64ch;

  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem;  --s7: 7rem;

  --fam:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fam-est:'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;

  color-scheme: dark;
}

/* --- 2. Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fam);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--azul); color: var(--fondo); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--azul); color: var(--fondo);
  padding: var(--s2) var(--s3); z-index: 200; text-decoration: none; font-weight: 600;
}
.saltar:focus { left: var(--s3); top: var(--s3); }

/* --- 3. Retícula -------------------------------------------- */
.col { width: min(100% - 2.5rem, var(--col)); margin-inline: auto; }
@media (max-width: 640px) { .col { width: calc(100% - 2rem); } }

.seccion { padding-block: var(--s6); }
.seccion + .seccion { padding-top: 0; }
@media (min-width: 900px) { .seccion { padding-block: var(--s7); } }

/* Ocean Infinity alterna dos tonos de azul noche entre bloques en vez
   de alternar claro y oscuro. La «franja oscura» de antes pasa a ser
   ese segundo tono. */
.franja-oscura { background: var(--superficie); }
.franja-oscura + .seccion,
.seccion + .franja-oscura { padding-top: var(--s6); }
@media (min-width: 900px) {
  .franja-oscura + .seccion,
  .seccion + .franja-oscura { padding-top: var(--s7); }
}

/* --- 4. Tipografía ------------------------------------------
   De Ocean Infinity: títulos grandes de peso ligero, y nombres en
   versalitas condensadas con tracking. IBM Plex se mantiene: es la
   familia que ya identifica al sitio frente a la Archivo del de
   tierra.
------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--texto);
}

h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem); font-weight: 300; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); font-weight: 300; }
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); font-weight: 500; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s3); max-width: var(--lectura); color: var(--texto-2); }
p:last-child { margin-bottom: 0; }

.entrada {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto-2);
}

/* Versalitas técnicas: el «SEABED MAPPING» de Ocean Infinity. */
.versal {
  font-family: var(--fam-est);
  font-size: .86rem; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--texto);
}

/* Rótulo técnico: condensado y tabular, como las sondas de una carta. */
.rotulo {
  font-family: var(--fam-est);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

a.enlace {
  color: var(--azul-claro); font-weight: 500;
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--azul) 55%, transparent);
  transition: border-color .2s ease;
}
a.enlace:hover { border-bottom-color: var(--azul-claro); }

/* --- 5. El haz ----------------------------------------------
   El signo del sitio: el abanico del multihaz del logotipo, en
   puntos como en la versión 2026 de la marca.
------------------------------------------------------------- */
.haz {
  width: 14px; height: 14px; flex: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, var(--azul) 0 1px, transparent 1.3px) 0 0 / 3.5px 3.5px;
}

.tit-seccion {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4);
}
.tit-seccion::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--linea); }

/* --- 6. Cabecera -------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 78px;
}
.cabecera__logo { display: inline-flex; align-items: center; }
.cabecera__logo img { height: 38px; width: auto; }
@media (min-width: 900px) { .cabecera__logo img { height: 44px; } }

.menu { display: flex; align-items: center; gap: var(--s4); }
.menu a {
  text-decoration: none; font-size: .93rem; font-weight: 500;
  color: var(--texto-2);
  padding-block: 4px; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.menu a:hover { color: var(--texto); }
.menu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--azul); }

.idioma {
  font-family: var(--fam-est); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em;
  border: 1px solid var(--linea-fuerte) !important; border-radius: 3px;
  padding: .28rem .55rem !important; text-decoration: none;
}

.menu-boton {
  display: none; background: none; border: 1px solid var(--linea-fuerte);
  border-radius: 3px; padding: 9px 11px; cursor: pointer; color: var(--texto);
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.menu-boton svg { display: block; }

@media (max-width: 1020px) {
  .menu-boton { display: inline-flex; }
  .menu {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo); border-bottom: 1px solid var(--linea);
    padding: var(--s2) 1.25rem var(--s3);
  }
  .menu[hidden] { display: none; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 1.05rem; color: var(--texto); }
  .menu a[aria-current="page"] { border-bottom-color: var(--linea); color: var(--azul-claro); }
  .menu .boton { margin-top: var(--s2); justify-content: center; border-bottom: 0; }
  .menu .idioma { margin-top: var(--s2); text-align: center; }
}

/* --- 7. Botones ---------------------------------------------
   El azul de la marca con texto blanco da 3,4:1 y no llega. Con
   el texto en el color de fondo da 5,6:1.
------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.35rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--azul); border-radius: 3px;
  background: var(--azul); color: var(--fondo);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.boton:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.menu .boton { color: var(--fondo); padding-block: .55rem; min-height: 42px; }

.boton--claro { background: none; color: var(--texto); border-color: var(--linea-fuerte); }
.boton--claro:hover { background: none; border-color: var(--texto); color: var(--texto); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- 8. La lámina -------------------------------------------
   Regla de Franz del 7-sep: el entregable va crudo, enmarcado,
   sin texto encima. El dato vive en el pie.
------------------------------------------------------------- */
.lamina { margin: 0; background: var(--superficie); border: 1px solid var(--linea); }
.lamina__marco { position: relative; background: var(--fondo); }
.lamina__marco picture { display: block; }
.lamina__marco img { width: 100%; height: auto; }
/* 28-sep: clips en bucle dentro de la lámina (mudos, sin texto encima). */
.lamina__video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fondo); }
.lamina__video--169 { aspect-ratio: 16 / 9; object-fit: contain; }
.recorridos { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 980px) { .recorridos { grid-template-columns: 1fr 1fr; gap: var(--s3); } }

.lamina__marco::before,
.lamina__marco::after {
  content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none;
  border-color: rgba(234, 241, 244, .7); border-style: solid; border-width: 0;
}
.lamina__marco::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.lamina__marco::after { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.lamina__pie {
  display: flex; flex-wrap: wrap; gap: .35rem var(--s3); align-items: baseline;
  padding: .75rem var(--s2);
  border-top: 1px solid var(--linea);
  font-family: var(--fam-est);
  font-size: .8rem; line-height: 1.45;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.lamina__pie b { color: var(--texto); font-weight: 600; }
.lamina__pie span { white-space: nowrap; }
.lamina__pie em { font-style: normal; flex-basis: 100%; color: var(--texto-2); }

/* --- 9. Cabecera de las páginas interiores -------------------- */
.portada { padding-block: var(--s5) var(--s6); border-bottom: 1px solid var(--linea); }
.portada__caja { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 980px) {
  .portada { padding-block: var(--s6) var(--s6); }
  .portada__caja { grid-template-columns: 6fr 6fr; gap: var(--s5); align-items: center; }
}
.portada h1 { margin-bottom: var(--s3); }
.portada .entrada { margin-bottom: var(--s4); }
.portada .rotulo { display: block; margin-bottom: var(--s3); }

.cifras {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--linea);
}
@media (min-width: 560px) { .cifras { grid-template-columns: repeat(4, 1fr); gap: var(--s3); } }
.cifras div { min-width: 0; }
.cifras b {
  display: block; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--texto);
}
.cifras .rotulo { display: block; margin-top: .35rem; text-transform: none; letter-spacing: .02em; }

/* ============================================================
   10. Portada al modo de Ocean Infinity
   ============================================================ */

/* 10a. Apertura: rótulo, titular y, debajo, el entregable a todo el
   ancho. En Ocean Infinity el titular va sobre la foto; aquí va
   encima de la imagen, no sobre ella. */
.oi-apertura { padding-block: var(--s6) 0; }
@media (min-width: 900px) { .oi-apertura { padding-block: var(--s7) 0; } }
.oi-apertura__texto { max-width: 60rem; }
.oi-apertura .rotulo { display: block; margin-bottom: var(--s3); color: var(--azul-claro); }
.oi-apertura h1 { margin-bottom: var(--s3); }
.oi-apertura .entrada { max-width: 46rem; margin-bottom: var(--s4); }

.oi-render { margin: var(--s5) 0 0; }
.oi-render img { width: 100%; height: auto; }
.oi-render figcaption {
  display: flex; flex-wrap: wrap; gap: .35rem var(--s3); align-items: baseline;
  padding-block: var(--s2) var(--s5);
  font-family: var(--fam-est); font-size: .8rem; color: var(--texto-3);
  border-bottom: 1px solid var(--linea);
}
.oi-render figcaption b { color: var(--texto); font-weight: 600; }

/* 10a'. Apertura con video de fondo ---------------------------
   Pedido por Franz el 26-sep-2026, con el sitio de ASINGTOPO como
   precedente: video mudo en bucle DETRÁS del titular.

   El velo sigue la lección que dejó ese sitio: no se ajusta a ojo,
   se mide contra el percentil alto de los píxeles reales del video
   (ver `_origen/_contraste_video.py`). Y es LATERAL y de arriba
   abajo: oscurece la columna del texto y el cielo vacío del visor,
   y deja a la vista la franja de abajo, donde están la marina y el
   abanico multihaz — que es lo que hay que enseñar. Si se cambian
   estas paradas, se cambian también en el script y se vuelve a medir.
------------------------------------------------------------- */
.oi-video {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(86vh, 800px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--s6) var(--s7);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
}
.oi-video__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 70%;
}
.oi-video::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--fondo) 0, rgba(7, 19, 28, 0) 22%),
    /* lateral: denso hasta el 58 %, que es donde termina la entrada; la
       primera versión caía a 0,46 ahí y medía 3,8:1 con los yates blancos
       del segundo 6,5 detrás. */
    linear-gradient(to right, rgba(7, 19, 28, .90) 0%, rgba(7, 19, 28, .82) 40%,
                              rgba(7, 19, 28, .68) 58%, rgba(7, 19, 28, .25) 80%,
                              rgba(7, 19, 28, 0) 100%),
    linear-gradient(to bottom, rgba(7, 19, 28, .55) 0%, rgba(7, 19, 28, 0) 58%);
}
.oi-video__caja { position: relative; }
.oi-video .rotulo { display: block; margin-bottom: var(--s3); color: var(--azul-claro); }
.oi-video h1 { margin-bottom: var(--s3); max-width: 17ch; }
/* Sobre video la entrada sube a --texto, como en el sitio de tierra:
   el gris secundario no aguanta el peor cuadro. */
.oi-video .entrada { color: var(--texto); max-width: 46rem; margin-bottom: var(--s4); }

/* El pie dice qué se está viendo. Sin él, el video es decoración; con
   él, es una prueba de trabajo. */
.oi-video__pie {
  position: absolute; bottom: var(--s3);
  right: max(1.25rem, calc((100% - var(--col)) / 2));
  margin: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: flex-end;
  font-family: var(--fam-est); font-size: .8rem; color: var(--texto-2);
}
.oi-video__pie b { color: var(--texto); font-weight: 600; }

/* En vertical el video queda detrás de todo el texto: el velo pasa a ser
   parejo y más denso, y el pie deja de ser absoluto — si no, se monta
   sobre los botones (el mismo fallo que apareció en ASINGTOPO). */
@media (max-width: 700px) {
  .oi-video { display: block; min-height: 0; padding-block: var(--s5) var(--s5); }
  .oi-video::before {
    background: linear-gradient(to top, rgba(7, 19, 28, .96) 0%, rgba(7, 19, 28, .86) 45%,
                                rgba(7, 19, 28, .76) 100%);
  }
  .oi-video__pie {
    position: static; justify-content: flex-start;
    width: min(100% - 2rem, var(--col)); margin: var(--s4) auto 0;
  }
}

/* 10b. Servicios: ícono, nombre en versalitas y una frase. */
.oi-cab { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
@media (min-width: 900px) {
  .oi-cab { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: end; }
}
.oi-cab p { margin: 0; }

.oi-servicios { display: grid; gap: var(--s5) var(--s4); }
@media (min-width: 640px) { .oi-servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .oi-servicios { grid-template-columns: repeat(3, 1fr); } }

.oi-serv { display: flex; flex-direction: column; gap: var(--s2); }
.oi-serv svg { width: 64px; height: 64px; flex: none; }
.oi-serv h3 { margin-top: var(--s1); }
.oi-serv p { margin: 0; font-size: .97rem; }
.oi-serv a.enlace { align-self: flex-start; font-size: .9rem; margin-top: auto; }

/* 10c. Bloque partido: el entregable a un lado, la declaración al
   otro. Es el «Faster, safer, cleaner» de Ocean Infinity. */
.oi-partido { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .oi-partido { grid-template-columns: 5fr 7fr; gap: var(--s6); } }
.oi-partido__img { margin: 0; }
.oi-partido__img img { width: 100%; height: auto; max-height: 720px; object-fit: contain; }
.oi-partido__img figcaption {
  margin-top: var(--s2); font-family: var(--fam-est); font-size: .8rem; color: var(--texto-3);
}
.oi-partido__img figcaption b { color: var(--texto); font-weight: 600; }
/* Solo el antetítulo va en azul; los rótulos de las cifras no. */
.oi-partido > div > .rotulo { display: block; margin-bottom: var(--s3); color: var(--azul-claro); }
.oi-partido h2 { margin-bottom: var(--s3); }

/* 10d. En acción: un caso con nombre, como el «Needlefish USV in
   Kuwait» de Ocean Infinity. */
.oi-accion { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .oi-accion { grid-template-columns: 7fr 5fr; gap: var(--s6); } }
.oi-accion > div > .rotulo { display: block; margin-bottom: var(--s3); color: var(--azul-claro); }
.oi-accion h2 { margin-bottom: var(--s3); }
.oi-accion .datos {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-block: var(--s3);
  font-family: var(--fam-est); font-size: .86rem; color: var(--texto-3);
}
.oi-accion .datos b { color: var(--texto); font-weight: 600; }

/* 10e. Dónde trabajamos: tarjetas con foto arriba. */
.oi-sectores { display: grid; gap: var(--s4) var(--s3); }
@media (min-width: 640px) { .oi-sectores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .oi-sectores { grid-template-columns: repeat(4, 1fr); } }
.oi-sector { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.oi-sector__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); }
.oi-sector__img img { width: 100%; height: 100%; object-fit: cover; }
.oi-sector h3 { margin-top: var(--s1); }
.oi-sector p { margin: 0; font-size: .95rem; }

/* 10f. Clientes: una línea por tipo, sin logos. */
.oi-clientes { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.oi-clientes div {
  display: grid; gap: .25rem var(--s4); padding-block: var(--s3);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 760px) { .oi-clientes div { grid-template-columns: 18rem 1fr; align-items: baseline; } }
.oi-clientes p { margin: 0; color: var(--texto); font-size: 1.05rem; max-width: none; }

/* 10g. Contacto: la franja «Get in touch with us». */
.oi-contacto {
  display: grid; gap: var(--s4); align-items: end;
  padding: var(--s5) var(--s4);
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
}
@media (min-width: 900px) { .oi-contacto { grid-template-columns: 1fr auto; padding: var(--s6) var(--s5); } }
.oi-contacto h2 { margin-bottom: var(--s2); }
.oi-contacto p { margin: 0; }

/* 10h. Explorar: los siguientes pasos, numerados como en Ocean Infinity. */
.oi-explorar { display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .oi-explorar { grid-template-columns: repeat(3, 1fr); } }
.oi-explorar a {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s4) var(--s2) var(--s4) 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none; color: var(--texto);
  transition: color .2s ease;
}
@media (min-width: 900px) {
  .oi-explorar a { border-bottom: 0; border-right: 1px solid var(--linea); padding-left: var(--s3); }
  .oi-explorar a:first-child { padding-left: 0; }
  .oi-explorar a:last-child { border-right: 0; }
}
.oi-explorar a:hover { color: var(--azul-claro); }
.oi-explorar .num { font-family: var(--fam-est); font-size: .85rem; font-weight: 600; color: var(--azul-claro); }
.oi-explorar .txt { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 300; }

/* --- 11. Servicios en su página ----------------------------- */
.servicios { border-top: 1px solid var(--linea); }
.servicio { border-bottom: 1px solid var(--linea); padding-block: var(--s4); display: grid; gap: var(--s2); }
@media (min-width: 860px) {
  .servicio { grid-template-columns: 4.5fr 7.5fr; gap: var(--s4); align-items: start; }
}
.servicio h3 { margin: 0; }
.servicio p { margin: 0; }
.servicio__extra { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.servicio__extra span {
  font-family: var(--fam-est); font-size: .8rem; color: var(--texto-2);
  border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: .12rem .5rem;
}

.ficha { display: grid; border: 1px solid var(--linea); background: var(--superficie); }
.franja-oscura .ficha { background: var(--fondo); }
.ficha__fila { display: grid; gap: .2rem; padding: var(--s3); border-bottom: 1px solid var(--linea); }
.ficha__fila:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .ficha__fila { grid-template-columns: 15rem 1fr; gap: var(--s4); align-items: baseline; }
}
.ficha__fila p { margin: 0; max-width: none; font-size: .97rem; }
.ficha__fila p.rotulo { font-size: .78rem; }

/* --- 12. Figuras -------------------------------------------- */
.figuras { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .figuras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .figuras { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }
.figuras .lamina { display: flex; flex-direction: column; }
.figuras .lamina__marco { aspect-ratio: 4 / 3; }
.figuras .lamina__marco picture { display: block; height: 100%; }
.figuras .lamina__marco img { height: 100%; object-fit: cover; }
.figuras .lamina__pie { margin-top: auto; }

/* --- 13. El caso -------------------------------------------- */
.caso { border-top: 2px solid var(--azul); padding-top: var(--s3); }
.caso + .caso { margin-top: var(--s5); }
.caso__cab { display: flex; flex-wrap: wrap; gap: .3rem var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.caso h3 { margin: 0; }
.caso__rejilla { display: grid; gap: var(--s3) var(--s5); }
@media (min-width: 860px) { .caso__rejilla { grid-template-columns: repeat(2, 1fr); } }
.caso__rejilla > div > .rotulo { display: block; margin-bottom: .25rem; }
.caso__rejilla p { margin: 0; font-size: .97rem; }
/* Caso ilustrado (29-sep-2026): imagen o recorrido a la izquierda, los
   cuatro bloques en una columna a la derecha. */
.caso__cuerpo { display: grid; gap: var(--s4); }
@media (min-width: 980px) {
  .caso__cuerpo { grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; }
  .caso--ilustrado .caso__rejilla { grid-template-columns: 1fr; }
}
.caso__media .lamina { margin: 0; }

/* --- 14. Sectores en su página ------------------------------ */
.sectores { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 760px) { .sectores { grid-template-columns: repeat(2, 1fr); } }
.sector { background: var(--superficie); padding: var(--s4) var(--s3); }
.franja-oscura .sector { background: var(--fondo); }
.sector h3 { margin-bottom: var(--s2); }
.sector p { font-size: .96rem; }
.sector ul { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.sector li {
  font-size: .95rem; color: var(--texto-2);
  padding: .28rem 0 .28rem 1.05rem; position: relative;
}
.sector li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: 6px; height: 1px; background: var(--azul);
}

/* --- 15. Tabla técnica -------------------------------------- */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); background: var(--superficie); }
.franja-oscura .tabla-caja { background: var(--fondo); }
table.tecnica { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 34rem; color: var(--texto-2); }
table.tecnica th, table.tecnica td { padding: .75rem var(--s2); text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.tecnica thead th {
  font-family: var(--fam-est); font-size: .76rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3);
  background: var(--superficie-2); white-space: nowrap;
}
table.tecnica tbody tr:last-child td { border-bottom: 0; }
table.tecnica td b { font-weight: 600; color: var(--texto); }

.estado {
  font-family: var(--fam-est); font-size: .74rem; font-weight: 600;
  letter-spacing: .05em; white-space: nowrap; text-transform: uppercase;
  border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: .1rem .45rem;
  color: var(--texto-2);
}
.estado[data-e="propio"]    { border-color: var(--azul); color: var(--azul-claro); }
.estado[data-e="acuerdo"]   { border-color: var(--texto-3); color: var(--texto-2); }
.estado[data-e="pendiente"] { border-color: var(--alerta); color: var(--alerta); }

/* --- 16. Contacto ------------------------------------------- */
.contacto-caja { display: grid; gap: var(--s5); }
@media (min-width: 980px) { .contacto-caja { grid-template-columns: 5fr 7fr; gap: var(--s6); } }

.vias { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.vias li { padding-block: .4rem; border-bottom: 1px solid var(--linea); }
.vias a {
  text-decoration: none; font-weight: 500; font-size: 1.05rem; color: var(--texto);
  display: flex; align-items: center; min-height: 44px;
}
.vias a:hover { color: var(--azul-claro); }
.vias .rotulo { display: block; margin-top: .35rem; }

.campo { margin-bottom: var(--s3); }
.campo label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: .35rem; color: var(--texto); }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .68rem .8rem; min-height: 46px;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linea-fuerte); border-radius: 3px;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--azul); outline: none; }
.campo .ayuda { display: block; margin-top: .3rem; font-size: .84rem; color: var(--texto-3); }
.campo .error { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; color: var(--alerta); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--alerta); }
.dos-campos { display: grid; gap: 0 var(--s3); }
@media (min-width: 620px) { .dos-campos { grid-template-columns: 1fr 1fr; } }

/* --- 17. Pie: el cajetín ------------------------------------ */
.pie { background: var(--fondo); border-top: 1px solid var(--linea); padding-block: var(--s6) var(--s4); }
.pie a { color: var(--texto-2); }
.pie__rejilla { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.pie__logo img { height: 44px; width: auto; margin-bottom: var(--s3); }
.pie h4 {
  font-family: var(--fam-est); font-size: .76rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: var(--s2);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding-block: .28rem; font-size: .93rem; color: var(--texto-2); }
.pie li a { text-decoration: none; }
.pie li a:hover { color: var(--texto); }
.pie p { font-size: .93rem; }

.cajetin {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: .4rem var(--s4);
  font-family: var(--fam-est); font-size: .8rem; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* --- 18. Utilidades ----------------------------------------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.aviso {
  padding: var(--s3); border: 1px solid var(--linea);
  border-left: 3px solid var(--azul);
  background: var(--superficie); font-size: .95rem; color: var(--texto-2);
}
.franja-oscura .aviso { background: var(--fondo); }
.aviso p { max-width: none; }
.aviso b { color: var(--texto); }

.nota-pie {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--linea);
  font-size: .88rem; color: var(--texto-3); max-width: 86ch;
}
.nota-pie b { color: var(--texto-2); }

/* --- 19. Movimiento -----------------------------------------
   Un solo momento: la apertura entra al cargar. Nada más se mueve
   solo.
------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .7s cubic-bezier(.2,.7,.3,1) both; }
  .oi-render { animation: entra-render 1.1s cubic-bezier(.2,.7,.3,1) .15s both; }
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes entra-render { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --- 19b. Carrusel de clientes -----------------------------
   El mismo carrusel del sitio de ASINGTOPO (27-sep-2026): dos pistas
   iguales, la segunda oculta a lectores de pantalla, pausa al pasar el
   ratón y fila quieta para quien pide menos movimiento. Aquí los logos
   van en blanco sobre el fondo noche (los genera `_logos.py`).
------------------------------------------------------------- */
.carrusel {
  display: flex; overflow: hidden;
  border-block: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.carrusel__pista {
  display: flex; flex: none; align-items: center;
  list-style: none; margin: 0; padding: 0;
  /* 10 marcas × 240 px a ~45 px/s */
  animation: carrusel 55s linear infinite;
}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista { animation-play-state: paused; }
@keyframes carrusel { to { transform: translateX(-100%); } }
.carrusel__marca {
  flex: none; width: 240px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem 1.6rem;
  border-right: 1px solid var(--linea);
}
.carrusel__marca img { width: 100%; height: 100%; object-fit: contain; opacity: .88; }
.carrusel__marca--texto span {
  font-weight: 600; font-size: 1.15rem; line-height: 1.15; letter-spacing: .02em;
  text-transform: uppercase; text-align: center; color: var(--texto); opacity: .88;
}
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .carrusel__pista { animation: none; }
  .carrusel__pista[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) {
  .carrusel__marca { width: 180px; height: 96px; padding: .9rem 1.1rem; }
}

/* --- 20. Impresión ------------------------------------------ */
@media print {
  .cabecera, .menu-boton, .acciones, .saltar, form, .oi-explorar { display: none !important; }
  body, .franja-oscura, .pie, .ficha, .tabla-caja, .sector, .aviso, .lamina { background: #fff !important; color: #000 !important; }
  h1, h2, h3, h4, p, td, th, .rotulo, .entrada, .cajetin, .nota-pie { color: #000 !important; }
  .lamina, .caso, table.tecnica tr { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}