/* Hoja de estilos de siaingenieros.com · portada simple y limpia, con un ejemplo de automatización en marcha (07/10/2026).
   Índice: 1 Tipografías · 2 Colores y medidas · 3 Base · 4 Botones y enlaces · 5 Cabecera y menú
   6 Portada y automatización · 7 Dibujos e iconos · 8 Secciones · 9 Mapas de los servicios (para sus páginas)
   10 Pie · 11 Barra fija del móvil · 12 Página 404 · 13 Apertura de la portada · 14 Reducir movimiento.
   Los colores son los de herramientas/comprobar-contraste.mjs («Consultora (colores del logo)»):
   si cambias uno, cámbialo allí y comprueba. El logo sale de marca/ con herramientas/preparar-marca.mjs. */

/* ---------- 1 · Tipografías (alojadas en la propia web; licencias en /fuentes/) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fuentes/schibsted-grotesk.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fuentes/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2 · Colores y medidas ---------- */
:root {
  --blanco: #FFFFFF;
  --gris-claro: #F3F5F7;
  --linea: #DCE1E7;
  --borde-campo: #737D88;
  --tinta: #131A22;
  --texto-2: #4A5563;
  --marino: #0F2A44;
  --marino-oscuro: #081A2C;
  --gris-dibujo: #A3ACB7;
  --trayectoria: #2F80ED;
  /* Naranja de taller: solo como trazo, para lo que hace perder horas (tachado y lo manual en los mapas) */
  --naranja: #E2620C;
  /* Fondos suaves de los iconos (tarjeta de automatización y compromisos) */
  --naranja-suave: #FCEBDD;
  --naranja-oscuro: #B04A08;
  --azul-suave: #E3EEFC;
  --enlace: #2463B4;
  --enlace-pulsado: #1A4A88;
  --texto-sobre-marino: #C3CFDC;
  --linea-sobre-marino: rgba(255, 255, 255, 0.18);
  --error: #A91D1A;
  /* Rayado de sección, como en un plano: una baldosa de 6 px, así todas las rayas pesan lo mismo */
  --rayado-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 6L6 0M-1 1L1 -1M5 7L7 5' stroke='%23131A22'/%3E%3C/svg%3E");
  --rayado-naranja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 6L6 0M-1 1L1 -1M5 7L7 5' stroke='%23E2620C'/%3E%3C/svg%3E");
  --rayado-azul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 6L6 0M-1 1L1 -1M5 7L7 5' stroke='%232F80ED'/%3E%3C/svg%3E");

  --letra-titulo: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --letra-texto: "Atkinson Hyperlegible Next", Verdana, sans-serif;

  --radio: 10px;
  --radio-tarjeta: 16px;
  --margen: 16px;
  --ancho: 1200px;
  --seccion: 56px;
  --hueco: 16px;

  /* Curvas de movimiento (skill de Emil Kowalski): salida fuerte y desplazamiento en pantalla */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
  interpolate-size: allow-keywords;
}
@media (min-width: 640px) { :root { --margen: 24px; --seccion: 72px; --hueco: 24px; } }
@media (min-width: 960px) { :root { --margen: 40px; --seccion: 96px; --hueco: 32px; } }

/* ---------- 3 · Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--borde-campo) var(--gris-claro);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 959.98px) { html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 17px/1.55 var(--letra-texto);
  caret-color: var(--marino);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 960px) { body { font-size: 18px; } }
::selection { background: var(--marino); color: var(--blanco); }
.sobre-marino ::selection { background: var(--blanco); color: var(--marino); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--letra-titulo);
  font-weight: 700;
  text-wrap: balance;
}
/* En el móvil, los titulares encogen lo justo para que quepa su trozo más largo sin partirlo (12 veces el tamaño de
   la letra en el ancho de la pantalla menos 16 px a cada lado; Marcos, 18/10/2026: «que no queden líneas cortadas a
   mitad de frase»), y los h2 bajan a 26 px para seguir por debajo */
h1 { font-size: min(clamp(40px, calc(1.1rem + 4vw), 76px), calc((100vw - 32px) / 12)); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(26px, calc(1rem + 2.4vw), 52px); line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: 23px; line-height: 1.15; letter-spacing: -0.015em; }
@media (min-width: 960px) { h3 { font-size: 28px; } }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }

a { color: var(--enlace); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:active { color: var(--enlace-pulsado); }
.sobre-marino a:not(.boton) { color: var(--blanco); }

:focus-visible { outline: 2px solid var(--enlace); outline-offset: 3px; border-radius: 1px; }
.sobre-marino :focus-visible { outline-color: var(--blanco); }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--seccion); }
.fondo-gris { background: var(--gris-claro); }
.sobre-marino { background: var(--marino); color: var(--blanco); }
/* Dos secciones blancas seguidas: la primera no deja hueco abajo, para no sumar dos márgenes */
.sin-pie { padding-bottom: 0; }

/* Retícula de 12 columnas para el ordenador; en el móvil, una sola columna */
.reticula { display: grid; gap: 28px var(--hueco); }
@media (min-width: 960px) { .reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--margen); top: -200px; z-index: 100;
  padding: 12px 16px; background: var(--blanco); color: var(--marino);
  border: 2px solid var(--marino); border-radius: var(--radio); font-weight: 700;
}
.saltar:focus { top: 8px; }

.icono { flex: none; width: 22px; height: 22px; }

/* ---------- 4 · Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: var(--radio);
  background: var(--marino); color: var(--blanco);
  font: 700 18px/1.2 var(--letra-texto); text-decoration: none; text-align: center;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.boton:active { transform: scale(0.97); color: var(--blanco); }
.boton-claro { background: var(--blanco); color: var(--marino); }
.boton-claro:active { color: var(--marino); }
.boton-ancho { width: 100%; }
.boton .icono { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--marino-oscuro); }
  .boton-claro:hover { background: var(--gris-claro); }
  .boton:hover .icono { transform: translateX(3px); }
}

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; touch-action: manipulation;
}
.enlace-flecha .icono { width: 20px; height: 20px; transition: transform 200ms var(--ease-out); }
.sobre-marino .enlace-flecha:active { color: var(--texto-sobre-marino); }
@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover { text-decoration-thickness: 2.5px; }
  .enlace-flecha:hover .icono { transform: translateX(3px); }
}

/* ---------- 5 · Cabecera y menú: marino, con el logotipo original (letras blancas) ---------- */
.cabecera { position: relative; z-index: 20; }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 72px; }
.marca { display: inline-flex; align-items: center; min-height: 56px; }
.marca img { height: 44px; width: auto; }
.boton-menu {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radio); background: transparent; color: var(--blanco);
  font: 700 17px/1 var(--letra-texto); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out);
}
.boton-menu:active { transform: scale(0.97); }
.boton-menu .icono-cerrar, .boton-menu[aria-expanded="true"] .icono-abrir { display: none; }
.boton-menu[aria-expanded="true"] .icono-cerrar { display: block; }
.js .boton-menu { display: inline-flex; }

.navegacion { width: 100%; }
.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; padding-bottom: 12px; }
.menu a:not(.boton) {
  display: flex; align-items: center; min-height: 48px;
  color: var(--blanco); font-weight: 700; text-decoration: none;
}
.menu .boton { margin-top: 8px; }

/* Con JavaScript, en el móvil el menú se abre como una hoja marino bajo la cabecera */
@media (max-width: 959.98px) {
  .js .navegacion { position: absolute; inset-inline: 0; top: 100%; }
  .js .menu { display: none; flex-direction: column; padding: 4px var(--margen) 20px; }
  .js .menu.abierto {
    display: flex; transform-origin: top right;
    background: var(--marino); border-top: 1px solid var(--linea-sobre-marino);
    box-shadow: 0 18px 28px -14px rgba(8, 26, 44, 0.65);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(-6px) scale(0.98); }
  }
  .js .menu a:not(.boton) { min-height: 56px; font-size: 19px; border-bottom: 1px solid var(--linea-sobre-marino); }
  .js .menu a:not(.boton):active { color: var(--texto-sobre-marino); }
  .js .menu .boton { width: 100%; margin-top: 16px; }
}
@media (min-width: 960px) {
  .cabecera-fila { flex-wrap: nowrap; min-height: 96px; }
  .marca img { height: 56px; }
  .js .boton-menu { display: none; }
  .navegacion { width: auto; }
  .menu { flex-wrap: nowrap; align-items: center; gap: 30px; padding: 0; }
  .menu a:not(.boton) {
    min-height: 44px; font-size: 17px;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
    transition: text-decoration-color 200ms ease;
  }
  .menu .boton { margin: 0 0 0 6px; min-height: 48px; padding: 0 20px; font-size: 17px; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .menu a:not(.boton):hover { text-decoration-color: currentColor; }
}

/* ---------- 6 · Portada: titular centrado, la acción y un ejemplo de automatización en marcha ---------- */
.portada { padding-block: 48px 64px; overflow: clip; }
.portada-centro { display: grid; justify-items: center; text-align: center; }
/* El titular va en cuatro trozos que no se parten (Marcos, 18/10/2026: «que no queden líneas cortadas a mitad de
   frase»): en el móvil, la letra encoge lo justo para que quepa el más largo, «y más contratos ganados.» (11,5 veces el
   tamaño de la letra), en el ancho de la pantalla menos los 16 px de cada lado */
.portada h1 {
  max-width: 24ch; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  font-size: min(clamp(38px, calc(1rem + 3.6vw), 68px), calc((100vw - 32px) / 11.85));
}
.entradilla { font-size: 19px; line-height: 1.5; max-width: 46ch; }
.portada .entradilla { margin-top: 20px; max-width: 50ch; color: var(--texto-sobre-marino); }
.portada-accion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 28px; }
.nota { font-size: 16px; color: var(--texto-2); }
.sobre-marino .nota { color: var(--texto-sobre-marino); }

/* «horas perdidas» tachado en naranja y «contratos ganados» subrayado en azul trayectoria, los dos rectos
   (14/10/2026: el subrayado ya no imita la curva del logo viejo). Son fondos (no adornos aparte) para que
   sigan a las palabras aunque partan de línea */
.tachado, .subrayado {
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tachado {
  color: var(--texto-sobre-marino);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect width='10' height='10' fill='%23E2620C'/%3E%3C/svg%3E");
  background-size: 100% 0.075em; background-position: 0 60%;
}
.subrayado {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect width='10' height='10' fill='%232F80ED'/%3E%3C/svg%3E");
  background-size: 100% 0.1em; background-position: 0 100%; padding-bottom: 0.06em;
}

/* Ejemplo de automatización (técnica «animated beam» de Magic UI, hecha sin librerías): una tarjeta blanca con lo
   que entra a mano (naranja), SIA Ingenieros en el centro y lo que sale hecho (azul). Las líneas están dibujadas sobre
   una caja de la MISMA proporción que el lienzo, así que no se deforman; los nodos van en % de esa caja */
.automatizacion { width: 100%; max-width: 1040px; margin: 48px 0 0; }
.automatizacion-lienzo {
  position: relative; aspect-ratio: 360 / 360;
  background: var(--blanco); border-radius: 20px; color: var(--tinta);
}
.automatizacion-lineas { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }
.lineas-ancho { display: none; }
.linea { fill: none; stroke: var(--linea); stroke-width: 2; }
.rayo { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.24 2; stroke-dashoffset: 0.24; }
.rayo-entrada { stroke: var(--naranja); }
.rayo-salida { stroke: var(--trayectoria); }
.auto-nodos { list-style: none; }
.auto-nodo {
  position: absolute; left: calc(var(--nx) * 1%); top: calc(var(--ny) * 1%); transform: translate(-50%, -50%);
  width: 28%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font: 600 16px/1.2 var(--letra-titulo); letter-spacing: -0.01em;
}
.auto-entrada .auto-nodo { --ny: 3; transform: translate(-50%, 0); }
.auto-salida .auto-nodo { --ny: 71.1; transform: translate(-50%, 0); }
.auto-1 { --nx: 16.667; }
.auto-2 { --nx: 50; }
.auto-3 { --nx: 83.333; }
.auto-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.auto-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auto-entrada .auto-icono { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.auto-salida .auto-icono { background: var(--azul-suave); color: var(--enlace); }
/* En el centro, el logotipo completo (blanco sobre marino), en una pieza marino: decisión del 06/10/2026, solo el logotipo completo */
.nucleo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 104px; height: 76px; border-radius: 14px; background: var(--marino);
}
.nucleo img { width: 74px; height: auto; }

@media (min-width: 640px) {
  .automatizacion-lienzo { aspect-ratio: 1000 / 320; }
  .lineas-ancho { display: block; }
  .lineas-estrecho { display: none; }
  .auto-nodo {
    width: 23%; flex-direction: row; gap: 12px; padding: 10px 12px; text-align: left;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(19, 26, 34, 0.06);
  }
  .auto-icono { flex: none; width: 36px; height: 36px; }
  .auto-nodos .auto-nodo { transform: translate(-50%, -50%); }
  .auto-entrada .auto-nodo { --nx: 15; }
  .auto-salida .auto-nodo { --nx: 85; }
  .auto-nodos .auto-1 { --ny: 18.75; }
  .auto-nodos .auto-2 { --ny: 50; }
  .auto-nodos .auto-3 { --ny: 81.25; }
  .nucleo { width: 132px; height: 96px; border-radius: 16px; }
  .nucleo img { width: 92px; }
}
@media (min-width: 960px) {
  .portada { padding-block: 40px 88px; }
  .portada .entradilla { font-size: 21px; }
  .nota { font-size: 17px; }
  .automatizacion { margin-top: 48px; }
}

/* Nuestros compromisos: una franja bajo la portada */
.garantias { border-bottom: 1px solid var(--linea); }
.garantias-lista { list-style: none; display: grid; gap: 14px var(--hueco); padding-block: 28px; }
.garantias-lista li { display: flex; align-items: center; gap: 12px; font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -0.01em; }
.garantia-icono {
  flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: var(--azul-suave); color: var(--enlace); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 640px) { .garantias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .garantias-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 32px; } }

/* Cabecera de cada sección: el título a la izquierda y su entradilla a la derecha */
.cabeza-seccion { display: grid; gap: 16px var(--hueco); margin-bottom: 32px; }
@media (min-width: 960px) {
  .cabeza-seccion { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-bottom: 48px; }
  .cabeza-seccion h2 { grid-column: 1 / span 6; }
  .cabeza-seccion .entradilla { grid-column: 8 / -1; }
}

/* Las dos áreas de actuación: título, «Para cuando…», lo que incluye y el enlace */
.areas { list-style: none; display: grid; gap: 16px; }
.area {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 28px 24px; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco);
}
.area h3 { font-size: 28px; }
.area-cuando { font-weight: 700; color: var(--marino); }
.area .incluye { margin-top: 4px; }
.area .enlace-flecha { margin-top: auto; padding-top: 8px; }
.areas-cierre { margin-top: 28px; font: 600 19px/1.35 var(--letra-titulo); letter-spacing: -0.01em; color: var(--marino); max-width: 52ch; }
@media (min-width: 960px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .area { padding: 40px; }
  .area h3 { font-size: 32px; }
  .areas-cierre { margin-top: 36px; font-size: 21px; }
}

/* ---------- 7 · Dibujos de los papeles (símbolos del principio de cada página) ---------- */
.dibujos { position: absolute; width: 0; height: 0; overflow: hidden; }
/* En los mapas: hojas blancas con trazo de tinta */
.mapa {
  --papel: var(--blanco); --trazo: var(--tinta); --trazo-suave: var(--gris-dibujo);
  --titulo: var(--tinta); --acento: var(--trayectoria); --banda: var(--gris-claro);
}
.d-papel { fill: var(--papel); stroke: var(--trazo); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.d-linea { fill: none; stroke: var(--trazo); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.d-texto { fill: none; stroke: var(--trazo-suave); stroke-width: 3.2; stroke-linecap: round; }
.d-acento { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-acento-fino { fill: none; stroke: var(--acento); stroke-width: 1.2; }
.d-firma { fill: none; stroke: var(--trazo); stroke-width: 2; stroke-linecap: round; }
.d-relleno { fill: var(--trazo-suave); }
.d-banda { fill: var(--banda); }
.d-titulo { fill: var(--titulo); font-family: var(--letra-titulo); font-weight: 700; letter-spacing: 0.06em; }

/* ---------- 8 · Secciones de la portada ---------- */
.titulo-seccion { max-width: 18ch; }

/* ¿Te suena? · el título y su cierre a la izquierda; la lista, a la derecha, separada por filetes */
.te-suena-cabeza { display: grid; gap: 20px; align-content: start; }
.problemas { list-style: none; border-top: 1px solid var(--tinta); }
/* Las seis frases van en la letra de los titulares: son afirmaciones, no letra pequeña */
.problemas li {
  padding-block: 16px; border-bottom: 1px solid var(--linea);
  font: 500 21px/1.3 var(--letra-titulo); letter-spacing: -0.012em;
}
.cierre-problemas { font: 700 21px/1.3 var(--letra-titulo); letter-spacing: -0.015em; color: var(--marino); max-width: 30ch; }
/* Enlaces a la calculadora (18/10/2026): bajo «¿Te suena?» y en el área de procesos de la portada, antes de «Ver más» */
.te-suena-cabeza .enlace-flecha { justify-self: start; margin-top: -8px; }
.area-calculo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.area .area-calculo .enlace-flecha { margin-top: 0; padding-top: 0; }
@media (min-width: 960px) {
  .te-suena-cabeza { grid-column: 1 / span 5; gap: 28px; align-self: start; position: sticky; top: 32px; }
  .te-suena .problemas { grid-column: 7 / -1; }
  .problemas li { font-size: 25px; padding-block: 20px; }
  .cierre-problemas { font-size: 25px; }
}

/* Servicios · cabecera en dos columnas y, en cada servicio, el texto con lo que incluye a la izquierda y su mapa a la derecha */
.servicios-cabeza { margin-bottom: 32px; align-items: end; }
.servicios { list-style: none; border-top: 1px solid var(--tinta); }
.servicio { display: grid; gap: 32px var(--hueco); padding-block: 32px 40px; border-bottom: 1px solid var(--linea); }
.servicio-texto { display: grid; gap: 12px; justify-items: start; align-content: start; }
.servicio-texto p { max-width: 46ch; }
.incluye-titulo { margin-top: 8px; font-weight: 700; font-size: 16px; }
.incluye { list-style: none; display: grid; gap: 8px; max-width: 46ch; }
.incluye li { position: relative; padding-left: 24px; }
.incluye li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 12px; height: 2px; background: var(--trayectoria); }
.servicio-texto .enlace-flecha { margin-top: 4px; }
/* El cierre de servicios ocupa la fila entera: la frase a la izquierda y la acción a la derecha */
.servicios-cierre { display: grid; gap: 12px var(--hueco); justify-items: start; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--tinta); }
.servicios-cierre p { font: 700 21px/1.3 var(--letra-titulo); letter-spacing: -0.015em; color: var(--marino); max-width: 40ch; }
@media (min-width: 960px) {
  .servicios-cabeza { margin-bottom: 48px; }
  .servicios-cabeza .titulo-seccion { grid-column: 1 / span 6; }
  .servicios-cabeza .entradilla { grid-column: 8 / -1; }
  .servicio { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 48px 56px; }
  .servicio-texto { grid-column: 1 / span 5; gap: 14px; }
  .servicio .mapa { grid-column: 7 / -1; }
  .servicios-cierre { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-top: 40px; }
  .servicios-cierre p { grid-column: 1 / span 8; font-size: 25px; }
  .servicios-cierre .enlace-flecha { grid-column: 10 / -1; justify-self: end; }
}

/* Método · cuatro pasos sobre gris claro. Los números sí llevan información: es el orden de los pasos */
.pasos { list-style: none; display: grid; gap: 0; position: relative; }
.paso { display: grid; align-content: start; gap: 8px; padding-block: 20px; border-top: 1px solid var(--linea); }
.paso-numero {
  font: 700 44px/1 var(--letra-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--enlace); margin-bottom: 6px;
}
.paso h3 { font-size: 23px; }
.paso p { color: var(--texto-2); max-width: 36ch; }
@media (min-width: 960px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
  .paso { border-top: 0; padding-top: 32px; }
  .paso-numero { font-size: 56px; }
  .paso h3 { font-size: 26px; }
  /* La línea azul recorre los cuatro pasos al verlos */
  .pasos::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--trayectoria);
    transform-origin: left center;
  }
  .js .pasos:not(.en-vista)::before { transform: scaleX(0); }
  .js .pasos.en-vista::before { transform: scaleX(1); transition: transform 1100ms var(--ease-in-out); }
}

/* Preguntas frecuentes · el título a la izquierda y las preguntas a la derecha; se despliegan al tocarlas */
.preguntas-cabeza { display: grid; gap: 16px; justify-items: start; align-content: start; }
.preguntas-cabeza p { max-width: 34ch; }
.preguntas { border-top: 1px solid var(--tinta); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-block: 14px; cursor: pointer;
  font: 700 21px/1.3 var(--letra-titulo); letter-spacing: -0.012em; touch-action: manipulation;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .icono { width: 24px; height: 24px; color: var(--enlace); transition: transform 200ms var(--ease-out); }
.preguntas details[open] summary .icono { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 20px; max-width: 64ch; }
.preguntas summary:active { color: var(--enlace-pulsado); }
@media (hover: hover) and (pointer: fine) { .preguntas summary:hover { color: var(--enlace); } }
@supports selector(::details-content) {
  .preguntas details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size 220ms var(--ease-out), content-visibility 220ms allow-discrete;
  }
  .preguntas details[open]::details-content { block-size: auto; }
}
@media (min-width: 960px) {
  .preguntas-cabeza { grid-column: 1 / span 4; align-self: start; position: sticky; top: 32px; }
  .preguntas { grid-column: 6 / -1; }
  .preguntas summary { font-size: 22px; min-height: 72px; }
}

/* Cómo empezamos · la tarjeta final, en marino */
.empezar-tarjeta { padding: 32px 24px; border-radius: 24px; }
.empezar-tarjeta h2 { margin-bottom: 24px; }
.empezar-pasos { list-style: none; display: grid; }
.empezar-pasos li { position: relative; display: grid; gap: 8px; align-content: start; padding-block: 24px 20px; border-top: 1px solid var(--linea-sobre-marino); }
.empezar-pasos li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 3px; background: var(--trayectoria); }
.empezar-pasos h3 { font-size: 23px; }
.empezar-pasos p { color: var(--texto-sobre-marino); max-width: 38ch; }
.empezar-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
@media (max-width: 639.98px) { .empezar-accion .boton { width: 100%; } }
@media (min-width: 960px) {
  .empezar-tarjeta { padding: 64px; }
  .empezar-tarjeta h2 { margin-bottom: 40px; }
  .empezar-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
  .empezar-pasos li { padding-top: 28px; }
  .empezar-pasos h3 { font-size: 26px; }
  .empezar-accion { margin-top: 44px; }
}

/* ---------- 9 · Mapas de los servicios: ejemplos dibujados, sin cifras ---------- */
.mapa { display: grid; gap: 20px; align-content: start; }
.mapa-rotulo { font-weight: 700; font-size: 16px; color: var(--tinta); }
.mapa figcaption { padding-top: 12px; border-top: 1px solid var(--linea); font-size: 16px; color: var(--texto-2); }

/* Mapa 1 · El tiempo de cada paso: barras rayadas sobre una regla; las de la nota (donde se pierden horas), en naranja */
.tiempos { list-style: none; display: grid; gap: 16px; }
.tiempos li { display: grid; gap: 6px; }
.tiempo-paso { font: 600 17px/1.25 var(--letra-titulo); letter-spacing: -0.01em; }
.tiempo-pista {
  position: relative; height: 20px; border-left: 1px solid var(--tinta); border-right: 1px solid var(--linea);
  background: repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 10%);
}
.tiempo-barra {
  position: absolute; left: 0; top: 4px; height: 12px; width: calc(var(--t) * 100%);
  border: 1px solid var(--tinta);
  background: var(--rayado-tinta);
  transform-origin: left center;
  transition: transform 850ms var(--ease-out);
}
.con-nota .tiempo-barra { border-color: var(--naranja); background-image: var(--rayado-naranja); }
.tiempo-nota { font-size: 16px; color: var(--texto-2); transition: opacity 300ms ease 700ms; }
.tiempo-nota::before {
  content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 8px;
  background: var(--naranja); vertical-align: middle;
}
.tiempos li:nth-child(2) .tiempo-barra { transition-delay: 70ms; }
.tiempos li:nth-child(3) .tiempo-barra { transition-delay: 140ms; }
.tiempos li:nth-child(4) .tiempo-barra { transition-delay: 210ms; }
.tiempos li:nth-child(5) .tiempo-barra { transition-delay: 280ms; }
@media (min-width: 640px) {
  .tiempos li { grid-template-columns: 10.5rem minmax(0, 1fr) 13.5rem; align-items: center; gap: 0 16px; }
  .tiempo-nota::before { display: none; }
  /* Línea de llamada: del final de la barra a su nota, como en un plano */
  .con-nota .tiempo-barra::after {
    content: ""; position: absolute; left: 100%; top: 50%;
    width: calc((1 - var(--t)) / var(--t) * 100% + 16px); border-top: 1px solid var(--naranja);
  }
}
.js .mapa-tiempos:not(.en-vista) .tiempo-barra { transform: scaleX(0); }
.js .mapa-tiempos:not(.en-vista) .tiempo-nota { opacity: 0; }

/* Mapas 2 y 3 · Nodos dibujados unidos por flechas. Hacia abajo en el móvil; a la derecha desde 640 px */
.mapa-flujo { gap: 28px; }
.flujo-fila { display: grid; gap: 14px; }
.automatico .mapa-rotulo { color: var(--marino); }
.flujo { list-style: none; display: grid; }
.nodo { display: flex; align-items: center; gap: 14px; font: 600 17px/1.25 var(--letra-titulo); letter-spacing: -0.01em; }
/* Cada figura mide 62 px en el móvil, con el dibujo centrado: todas empiezan en el margen y las flechas bajan por el mismo eje.
   La capa de datos (fila automática) va encima del dibujo, en la misma celda */
.nodo-figura { flex: none; display: grid; width: 62px; justify-items: center; align-items: center; }
.nodo-figura > svg { grid-area: 1 / 1; }
.nodo-dibujo { width: 44px; height: 62px; }
.nodo-ancho .nodo-dibujo { width: 62px; height: 44px; }
.d-dato { fill: rgba(47, 128, 237, 0.16); stroke: var(--trayectoria); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.nodo-dato { transition: opacity 350ms ease; }
.automatico .nodo:nth-child(3) .nodo-dato { transition-delay: 450ms; }
.automatico .nodo:nth-child(5) .nodo-dato { transition-delay: 800ms; }
.js .mapa-flujo:not(.en-vista) .nodo-dato { opacity: 0; }
.conector {
  position: relative; display: flex; align-items: center; min-height: 56px; padding: 4px 0 12px 76px;
  font-size: 16px; color: var(--texto-2);
}
/* La línea y su punta de flecha. Lo manual, discontinuo y naranja; lo automático, continuo y azul (no solo por el color) */
.conector::before { content: ""; position: absolute; left: 30px; top: 4px; bottom: 8px; border-left: 2px dashed var(--naranja); }
.conector::after {
  content: ""; position: absolute; left: 26px; bottom: 7px; width: 10px; height: 10px;
  border-right: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(45deg);
}
.automatico .conector { color: var(--tinta); font-weight: 700; }
.automatico .conector::before { border-left-style: solid; border-left-color: var(--trayectoria); transform-origin: top; transition: transform 600ms var(--ease-out); }
.automatico .conector::after { border-color: var(--trayectoria); transition: opacity 200ms ease; }
.conector-mudo { min-height: 36px; }
.flujo-licitacion .conector::before { border-left-style: solid; border-left-color: var(--tinta); }
.flujo-licitacion .conector::after { border-color: var(--tinta); }
.automatico .conector:nth-child(4)::before, .automatico .conector:nth-child(4)::after { transition-delay: 350ms; }
.automatico .conector:nth-child(2)::after { transition-delay: 450ms; }
.automatico .conector:nth-child(4)::after { transition-delay: 800ms; }
.js .mapa-flujo:not(.en-vista) .automatico .conector::before { transform: scaleY(0); }
.js .mapa-flujo:not(.en-vista) .automatico .conector::after { opacity: 0; }

@media (min-width: 640px) {
  .flujo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); align-items: start; }
  .nodo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nodo-figura { width: auto; height: 84px; justify-items: start; align-items: end; }
  .nodo-dibujo { width: 60px; height: 84px; }
  .nodo-ancho .nodo-dibujo { width: 90px; height: 64px; }
  .conector { min-height: 84px; display: block; padding: 52px 8px 0; text-align: center; }
  .conector::before { left: 6px; right: 12px; top: 42px; bottom: auto; border-left: 0; border-top: 2px dashed var(--naranja); }
  .conector::after { left: auto; right: 11px; top: 37px; bottom: auto; transform: rotate(-45deg); }
  .automatico .conector::before { border-top-style: solid; border-top-color: var(--trayectoria); transform-origin: left center; }
  .flujo-licitacion { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr) minmax(0, 1fr) minmax(0, 0.42fr) minmax(0, 1fr) minmax(0, 0.42fr) minmax(0, 1fr); }
  .flujo-licitacion .conector::before { border-top-style: solid; border-top-color: var(--tinta); }
  .conector-mudo { min-height: 84px; padding: 0; }
  .js .mapa-flujo:not(.en-vista) .automatico .conector::before { transform: scaleX(0); }
}

/* Mapa 3 · Cada certificado: el vigente (rayado en tinta) y el renovado (en azul), con el aviso antes de caducar */
.mapa-licitacion { gap: 32px; }
.vigencias { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--linea); }
.vigencias-lista { list-style: none; display: grid; gap: 14px; }
.vigencias-lista li { display: grid; gap: 6px; }
.vigencia-nombre { font: 600 17px/1.25 var(--letra-titulo); letter-spacing: -0.01em; }
.vigencia-pista { display: flex; gap: 4px; height: 14px; }
.tramo {
  position: relative; flex: 0 0 calc(var(--a) * 100% - 4px);
  border: 1px solid var(--tinta);
  background: var(--rayado-tinta);
  transform-origin: left center; transition: transform 700ms var(--ease-out);
}
.tramo-nuevo {
  flex: 1 1 auto; border-color: var(--trayectoria);
  background-image: var(--rayado-azul);
  transition-delay: 500ms;
}
/* El aviso: una marca azul antes del final del certificado vigente */
.tramo:first-child::after {
  content: ""; position: absolute; right: 14%; top: -6px; bottom: -6px;
  border-left: 2px solid var(--trayectoria); transition: opacity 250ms ease 750ms;
}
/* Leyendas de los mapas: cada muestra es un trozo de lo que explica */
.mapa-clave { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; color: var(--texto-2); }
.mapa-clave li { display: flex; align-items: center; gap: 10px; }
.clave-muestra { position: relative; flex: none; width: 32px; height: 14px; border: 1px solid var(--tinta); }
.clave-tinta, .clave-aviso { background: var(--rayado-tinta); }
.clave-azul { border-color: var(--trayectoria); background: var(--rayado-azul); }
.clave-naranja { border-color: var(--naranja); background: var(--rayado-naranja); }
.clave-linea { flex: none; width: 32px; height: 0; }
.clave-manual { border-top: 2px dashed var(--naranja); }
.clave-aviso::after { content: ""; position: absolute; right: 6px; top: -6px; bottom: -6px; border-left: 2px solid var(--trayectoria); }
.clave-dato { border: 2px solid var(--trayectoria); background: rgba(47, 128, 237, 0.16); }
.vigencias-lista li:nth-child(2) .tramo { transition-delay: 90ms; }
.vigencias-lista li:nth-child(2) .tramo-nuevo { transition-delay: 590ms; }
.vigencias-lista li:nth-child(3) .tramo { transition-delay: 180ms; }
.vigencias-lista li:nth-child(3) .tramo-nuevo { transition-delay: 680ms; }
.js .mapa-licitacion:not(.en-vista) .tramo { transform: scaleX(0); }
.js .mapa-licitacion:not(.en-vista) .tramo:first-child::after { opacity: 0; }
@media (min-width: 640px) {
  .vigencias-lista li { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; gap: 0 16px; }
}

/* ---------- 10 · Pie: marino, con el logotipo en negativo ---------- */
.pie { padding-block: 56px 28px; font-size: 17px; color: var(--texto-sobre-marino); }
.pie-rejilla { display: grid; gap: 32px var(--hueco); }
.pie-marca img { height: 72px; width: auto; margin-bottom: 16px; }
.pie-titulo { color: var(--blanco); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.pie ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.pie ul a, .pie p a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.pie a:active { color: var(--texto-sobre-marino); }
.pie-final { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea-sobre-marino); font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { text-decoration-thickness: 2.5px; } }
@media (min-width: 640px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .pie { padding-top: 80px; }
  .pie-rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / span 4; }
  .pie-contacto { grid-column: 6 / span 3; }
  .pie-redes { grid-column: 9 / span 4; }
  .pie-legal { grid-column: 6 / span 3; }
  .pie-marca img { height: 88px; }
}

/* ---------- 11 · Barra fija del móvil ---------- */
.barra-fija {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--blanco); border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 24px -12px rgba(19, 26, 34, 0.3);
  transform: translateY(100%); visibility: hidden;
  transition: transform 250ms var(--ease-out), visibility 0s linear 250ms;
}
.barra-fija.visible { transform: none; visibility: visible; transition: transform 250ms var(--ease-out), visibility 0s; }
@media (min-width: 960px) { .barra-fija { display: none; } }

/* ---------- 12 · Página 404 ---------- */
.no-existe { display: grid; gap: 24px; justify-items: start; padding-block: 24px var(--seccion); }
.no-existe .enlaces { list-style: none; display: flex; flex-wrap: wrap; gap: 0 28px; }

/* ---------- 13 · La apertura de la portada (solo si el sistema no pide reducir el movimiento) ----------
   El texto sale entero desde el primer momento. Se tachan y subrayan las palabras, entra la tarjeta, aparecen los
   nodos y las líneas y, después, los datos viajan: entran en naranja y salen en azul, en bucle (se para fuera de
   pantalla, web.js). Sin JavaScript también funciona. */
@media (prefers-reduced-motion: no-preference) {
  .portada .tachado { animation: tachar 520ms var(--ease-out) 250ms backwards; }
  .portada .subrayado { animation: subrayar 700ms var(--ease-out) 650ms backwards; }
  .automatizacion-lienzo { animation: subir 700ms var(--ease-out) 150ms backwards; }
  .auto-nodo, .nucleo { animation: aparecer 420ms var(--ease-out) backwards; }
  .auto-entrada .auto-1 { animation-delay: 500ms; }
  .auto-entrada .auto-2 { animation-delay: 570ms; }
  .auto-entrada .auto-3 { animation-delay: 640ms; }
  .nucleo { animation-delay: 820ms; }
  .auto-salida .auto-1 { animation-delay: 1000ms; }
  .auto-salida .auto-2 { animation-delay: 1070ms; }
  .auto-salida .auto-3 { animation-delay: 1140ms; }
  .linea { animation: fundir 500ms ease 700ms backwards; }
  .rayo { animation: rayo 3200ms var(--ease-in-out) infinite; }
  .rayo-entrada.rayo-1 { animation-delay: 1400ms; }
  .rayo-entrada.rayo-2 { animation-delay: 1550ms; }
  .rayo-entrada.rayo-3 { animation-delay: 1700ms; }
  .rayo-salida.rayo-1 { animation-delay: 3320ms; }
  .rayo-salida.rayo-2 { animation-delay: 3470ms; }
  .rayo-salida.rayo-3 { animation-delay: 3620ms; }
  .auto-salida .auto-icono { animation: recibir 3200ms var(--ease-out) infinite; }
  .auto-salida .auto-1 .auto-icono { animation-delay: 3320ms; }
  .auto-salida .auto-2 .auto-icono { animation-delay: 3470ms; }
  .auto-salida .auto-3 .auto-icono { animation-delay: 3620ms; }
  .en-pausa .rayo, .en-pausa .auto-icono { animation-play-state: paused; }
}
@keyframes tachar { from { background-size: 0% 0.075em; color: var(--blanco); } }
@keyframes subrayar { from { background-size: 0% 0.1em; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
@keyframes aparecer { from { opacity: 0; translate: 0 8px; } }
@keyframes fundir { from { opacity: 0; } }
@keyframes rayo { 0% { stroke-dashoffset: 0.24; } 60%, 100% { stroke-dashoffset: -1; } }
/* Cada salida «recibe» su dato: un golpe corto cuando llega el trazo azul (el 60 % del ciclo, como el rayo) */
@keyframes recibir { 0%, 56%, 76%, 100% { scale: 1; } 62% { scale: 1.14; } }

/* ---------- 14 · Reducir movimiento: todo quieto y completo desde el principio ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .pasos:not(.en-vista)::before, .js .pasos.en-vista::before { transform: none; transition: none; }
  .boton, .boton .icono, .enlace-flecha .icono, .boton-menu, .preguntas summary .icono { transition: none; }
  .boton:active, .boton-menu:active { transform: none; }
  .js .menu.abierto { transition: opacity 150ms ease; @starting-style { opacity: 0; transform: none; } }
  .barra-fija, .barra-fija.visible { transition: opacity 150ms ease, visibility 0s linear 150ms; transform: none; opacity: 0; }
  .barra-fija.visible { opacity: 1; transition: opacity 150ms ease, visibility 0s; }
  .preguntas details::details-content { transition: none; }
  /* Los mapas salen ya dibujados: sin desplazamientos, solo un fundido corto */
  .tiempo-barra, .tramo, .automatico .conector::before { transition: none; }
  .js .mapa-tiempos:not(.en-vista) .tiempo-barra,
  .js .mapa-licitacion:not(.en-vista) .tramo,
  .js .mapa-flujo:not(.en-vista) .automatico .conector::before { transform: none; }
  .tiempo-nota, .tramo:first-child::after, .automatico .conector::after, .nodo-dato { transition-duration: 200ms; transition-delay: 0ms; }
}