/* AL³ Ingenieros · estilos de la web */

/* ---------- Paleta y medidas ---------- */
:root {
  /* Paleta base: 5 colores en el orden de Coolors (1 principal · 2 acento · 3 fondo · 4 texto · 5 apoyo).
     Elegida en la iteración 12 (favorito 1 del generador); el fondo, en la 17, vuelve al blanco grisáceo de antes */
  --c-principal: #0B2545;
  --c-acento: #E30613;
  --c-fondo: #F4F5F8;
  --c-texto: #0B2545;
  --c-apoyo: #717A90;
  /* Texto legible encima de principal y acento (el probador de paleta los recalcula) */
  --c-sobre-principal: #FFFFFF;
  --c-sobre-acento: #FFFFFF;

  /* Derivados de la paleta: no se tocan a mano */
  --c-superficie: color-mix(in oklab, var(--c-fondo) 25%, #fff);
  --c-linea: color-mix(in oklab, var(--c-texto) 13%, var(--c-fondo));
  --c-texto-suave: color-mix(in oklab, var(--c-texto) 72%, var(--c-fondo));
  --c-principal-hondo: color-mix(in oklab, var(--c-principal) 72%, #000);
  /* Cabecera y pie: el principal, más hondo (elegido en la iteración 12) */
  --c-hondo: color-mix(in oklab, var(--c-principal) 58%, #000);
  --c-principal-claro: color-mix(in oklab, var(--c-principal) 9%, var(--c-fondo));
  --c-oscuro-suave: color-mix(in oklab, var(--c-sobre-principal) 74%, var(--c-principal));
  --c-oscuro-linea: color-mix(in oklab, var(--c-sobre-principal) 16%, var(--c-principal));
  --c-oscuro-campo: color-mix(in oklab, var(--c-sobre-principal) 7%, var(--c-principal));

  --f-titulos: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --margen: clamp(1.25rem, 5vw, 6rem);
  --cabecera-alto: 88px;
  --radio: 6px;
  --sombra: 0 1px 2px color-mix(in oklab, var(--c-principal) 8%, transparent), 0 12px 32px color-mix(in oklab, var(--c-principal) 12%, transparent);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --transicion: 220ms var(--curva);
}
/* Acento: el rojo AL³ del ³ del logo (elegido en la iteración 43, entre los de las iteraciones 39, 41 y 42) */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-alto) + 1rem); }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-texto);
  background: var(--c-fondo);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulos); font-weight: 600; line-height: 1.06; letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 3px; }
::selection { background: var(--c-principal); color: var(--c-sobre-principal); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .6rem 1rem;
  background: var(--c-principal); color: var(--c-sobre-principal); border-radius: var(--radio);
}
.saltar:focus { top: 1rem; }
/* Las secciones ocupan todo el ancho de la pantalla, con un margen lateral proporcional */
.contenedor { width: 100%; padding-inline: var(--margen); }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.seccion { padding-block: clamp(4rem, 9vw, 7rem); }
.seccion--compacta { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* Etiqueta técnica con el cuadradito rojo */
.etiqueta {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-texto-suave);
}
.etiqueta::before { content: ""; width: .55rem; height: .55rem; background: var(--c-acento); }
.etiqueta--clara { color: var(--c-oscuro-suave); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .8rem 1.45rem;
  border: 1px solid transparent; border-radius: var(--radio);
  font-family: var(--f-titulos); font-size: 1.08rem; font-weight: 600; letter-spacing: .03em; text-decoration: none;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton .icono { transition: transform var(--transicion); }
.boton:hover .icono { transform: translateX(4px); }
.boton--claro { background: var(--c-sobre-principal); color: var(--c-principal); }
.boton--claro:hover { background: color-mix(in oklab, var(--c-sobre-principal) 86%, var(--c-principal)); }
.boton--contorno { border-color: color-mix(in oklab, var(--c-sobre-principal) 40%, transparent); color: var(--c-sobre-principal); }
.boton--contorno:hover { border-color: var(--c-sobre-principal); background: color-mix(in oklab, var(--c-sobre-principal) 8%, transparent); }
.boton--principal { background: var(--c-principal); color: var(--c-sobre-principal); }
.boton--principal:hover { background: var(--c-principal-hondo); }
.boton--ancho { width: 100%; }
.boton--texto {
  min-height: 0; padding: .2rem 0; border: 0; background: none; color: inherit;
  text-decoration: underline; text-decoration-color: var(--c-acento); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.boton[disabled] { opacity: .75; cursor: progress; }

/* ---------- Cabecera ---------- */
/* Cabecera y pie en el principal más hondo (--c-hondo), con el logo en blanco y el ³ rojo */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  color: var(--c-sobre-principal);
  background: color-mix(in oklab, var(--c-hondo) 96%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-oscuro-linea);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cabecera.con-sombra { box-shadow: 0 6px 24px color-mix(in oklab, var(--c-principal-hondo) 35%, transparent); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--cabecera-alto); transition: height var(--transicion); }
.cabecera.con-sombra .cabecera__fila { height: 70px; }
.cabecera__logo { flex: none; }
.cabecera__logo img { width: auto; height: 64px; transition: height var(--transicion); }
.cabecera.con-sombra .cabecera__logo img { height: 50px; }

.menu { display: flex; align-items: center; gap: clamp(1.5rem, 3.5vw, 3rem); }
.menu__lista { display: flex; gap: clamp(1.5rem, 3.5vw, 3rem); }
.menu__enlace {
  position: relative; display: inline-block; padding: .4rem 0;
  font-family: var(--f-titulos); font-size: 1.02rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--c-sobre-principal);
}
.menu__enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-acento);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transicion);
}
.menu__enlace:hover::after, .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
.idiomas { display: flex; align-items: center; gap: .3rem; padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--c-oscuro-linea); font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: var(--c-oscuro-suave); }
.idiomas a { padding: .25rem; text-decoration: none; }
.idiomas a:hover { color: var(--c-sobre-principal); }
.idiomas__actual { padding: .25rem; color: var(--c-sobre-principal); font-weight: 500; }
.idiomas__barra { opacity: .5; }
.cabecera__boton-menu { display: none; }
/* El nombre en grande en el hueco de la cabecera (iteración 19): en blanco, con un cuadrito rojo entre las dos palabras,
   tras una línea fina que lo separa del logo. Se encoge con la cabecera al bajar */
.cabecera__marca {
  display: flex; align-items: center; gap: .5em; margin: 0 auto 0 0; padding-left: clamp(1.25rem, 2.2vw, 2.25rem);
  border-left: 1px solid var(--c-oscuro-linea);
  font-family: var(--f-titulos); font-size: clamp(1.35rem, 2.05vw, 2.1rem); line-height: 1; text-transform: uppercase; white-space: nowrap;
  color: var(--c-sobre-principal); transition: font-size var(--transicion);
}
.cabecera__marca-nombre { font-weight: 700; letter-spacing: .07em; }
.cabecera__marca i { flex: none; width: .28em; height: .28em; background: var(--c-acento); }
.cabecera__marca-oficio { font-weight: 400; letter-spacing: .26em; color: color-mix(in oklab, var(--c-sobre-principal) 80%, transparent); }
.cabecera.con-sombra .cabecera__marca { font-size: clamp(1.2rem, 1.75vw, 1.8rem); }
/* Sin sitio junto al menú en las pantallas medianas */
@media (min-width: 901px) and (max-width: 1180px) { .cabecera__marca { display: none; } }

/* ---------- Inicio: portada ---------- */
/* A la izquierda, el texto; a la derecha, el montaje: paneles de fotos sobre una rejilla de ejes de plano que se recolocan */
/* Iteración 36: columna más ancha para que «Cálculo de estructuras» quepa en una línea y la portada en la primera pantalla */
.hero {
  --ancho-texto: min(46rem, 50vw);
  position: relative; background: var(--c-principal); color: var(--c-sobre-principal);
}
.hero__marco {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--cabecera-alto));
}
.hero__contenido { position: relative; z-index: 3; flex: 1; display: flex; align-items: center; padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.hero__texto { max-width: var(--ancho-texto); }
.hero__titulo { margin-bottom: 1.4rem; font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -0.015em; }
.hero__titulo em { font-style: normal; color: var(--c-acento); }
.hero__lead { margin-bottom: 1.6rem; font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--c-oscuro-suave); }
.hero__especialidades {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem;
  margin-bottom: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--c-oscuro-linea);
}
.hero__especialidades a { display: inline-flex; align-items: center; gap: .65rem; font-size: .98rem; font-weight: 500; text-decoration: none; }
.hero__especialidades a::before { content: ""; flex: none; width: .45rem; height: .45rem; background: var(--c-acento); }
.hero__especialidades a:hover { text-decoration: underline; text-decoration-color: var(--c-acento); text-underline-offset: 4px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__escribenos { margin-top: 1.5rem; font-size: .95rem; color: var(--c-oscuro-suave); }
.hero__escribenos a {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: .25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--c-sobre-principal) 35%, transparent);
  color: var(--c-sobre-principal); font-weight: 500; text-decoration: none;
  transition: border-color var(--transicion);
}
.hero__escribenos a:hover { border-bottom-color: var(--c-acento); }
.hero__escribenos .icono { width: 1.05em; height: 1.05em; }

/* Banda de cifras: va de lado a lado, translúcida, y su borde es la línea de cota con una marca por cifra */
.hero__pie {
  position: relative; z-index: 4;
  border-top: 1px solid color-mix(in oklab, var(--c-sobre-principal) 22%, transparent);
  background: color-mix(in oklab, var(--c-principal) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.cifra { position: relative; padding: 1.3rem 1.25rem 1.45rem; border-left: 1px solid var(--c-oscuro-linea); }
.cifra::before {
  content: ""; position: absolute; top: -6px; left: -1px; width: 1px; height: 11px;
  background: color-mix(in oklab, var(--c-sobre-principal) 75%, transparent);
}
.cifra__valor { margin-bottom: .3rem; font-family: var(--f-titulos); font-size: clamp(1.9rem, 2.9vw, 2.6rem); font-weight: 600; line-height: 1; }
.cifra__texto { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--c-oscuro-suave); }

/* Montaje: ocupa todo el hueco a la derecha del texto, de arriba hasta la banda de cifras */
.montaje { position: absolute; inset: 0; z-index: 0; }
.montaje__plano {
  --linea: color-mix(in oklab, var(--c-sobre-principal) 14%, transparent);
  position: absolute;
  top: clamp(3.4rem, 7vh, 4.5rem); bottom: calc(var(--alto-pie, 8rem) + clamp(1.25rem, 3vh, 2rem));
  left: calc(var(--margen) + var(--ancho-texto) + clamp(4rem, 6vw, 7rem)); right: var(--margen);
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  container-type: size; /* las piezas pueden medirse por vanos (cqw / cqh) */
  background:
    linear-gradient(90deg, var(--linea) 1px, transparent 1px) 0 0 / calc(100% / var(--columnas)) 100%,
    linear-gradient(var(--linea) 1px, transparent 1px) 0 0 / 100% calc(100% / var(--filas));
}
.montaje__eje {
  position: absolute; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border: 1px solid color-mix(in oklab, var(--c-sobre-principal) 35%, transparent); border-radius: 50%;
  font-family: var(--f-mono); font-size: .66rem; color: var(--c-oscuro-suave);
}
.montaje__eje::after { content: ""; position: absolute; background: var(--linea); }
.montaje__eje--x { top: -2.6rem; left: calc(var(--c) * 100% / var(--columnas)); transform: translateX(-50%); }
.montaje__eje--x::after { top: 100%; left: 50%; width: 1px; height: 1rem; }
.montaje__eje--y { left: -2.6rem; top: calc(var(--r) * 100% / var(--filas)); transform: translateY(-50%); }
.montaje__eje--y::after { left: 100%; top: 50%; width: 1rem; height: 1px; }
.pieza {
  --dura: 1.1s;
  position: absolute; padding: 5px;
  left: calc(var(--c) * 100% / var(--columnas)); top: calc(var(--r) * 100% / var(--filas));
  width: calc(var(--w) * 100% / var(--columnas)); height: calc(var(--h) * 100% / var(--filas));
  transition: left var(--dura) var(--curva), top var(--dura) var(--curva), width var(--dura) var(--curva), height var(--dura) var(--curva), opacity .8s, transform .8s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.montaje:not(.montado) .pieza { opacity: 0; transform: scale(.9); }
.pieza__marco {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: var(--c-principal-hondo);
  outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .4s;
}
.pieza.moviendo .pieza__marco { outline-color: var(--c-acento); }
.pieza__marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.95); transition: opacity .9s, filter .35s;
}
.pieza__marco img + img { opacity: 0; }
.pieza.alterna .pieza__marco img:first-child { opacity: 0; }
.pieza.alterna .pieza__marco img + img { opacity: 1; }
.pieza:hover .pieza__marco img { filter: none; }
/* La pieza del logo: cada vez que el montaje se recoloca pasa a otra variante del logo, sobre fondo azul o claro.
   El logo mide siempre lo mismo (un vano), aunque la pieza crezca: así no se redibuja mientras se mueve y el fundido es suave.
   Las variantes ocultas no se pintan (visibility) y solo se anima la opacidad. */
.pieza--logo .pieza__marco {
  border: 1px solid var(--c-oscuro-linea); background-color: color-mix(in oklab, var(--c-sobre-principal) 6%, var(--c-principal));
  transition: background-color 1.2s ease-in-out, outline-color .4s;
}
.pieza--logo[data-fondo="claro"] .pieza__marco { background-color: var(--c-superficie); }
.pieza--logo .pieza__marco .pieza__logo {
  inset: 0; margin: auto; object-fit: contain; filter: none;
  width: calc(100cqw / var(--columnas) * .72); height: calc(100cqh / var(--filas) * .6);
  opacity: 0; visibility: hidden; will-change: opacity;
  transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s;
}
.pieza--logo .pieza__marco .pieza__logo.activo { opacity: 1; visibility: visible; transition: opacity 1.2s ease-in-out, visibility 0s; }

/* ---------- Inicio: sobre nosotros y cómo trabajamos ---------- */
.nosotros__cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: stretch; }
.nosotros__lado { display: flex; flex-direction: column; gap: .5rem; }
/* Modelos 3D de estructuras singulares (modo incrustado, fondo transparente): giran solos, se pueden arrastrar y van
   saliendo de uno en uno (js/modelos.js). El visor se sale hasta el borde de la página y funde sus bordes, para que los
   modelos no se corten en seco al girar; las flechas van fuera de la máscara para que no se desvanezcan */
.nosotros__visor {
  position: relative; flex: 1; min-height: clamp(260px, 25vw, 400px);
  margin-inline: calc(-1 * var(--margen)) calc(-.6 * clamp(2rem, 5vw, 5rem));
}
.nosotros__modelo {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.nosotros__modelo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity .7s ease; }
/* El modelo nuevo aparece con un fundido sobre el anterior */
.nosotros__modelo iframe.entrando, .nosotros__modelo iframe.saliendo { opacity: 0; }
/* Flechas para cambiar de modelo: discretas y semitransparentes hasta que se pasa el ratón */
.nosotros__flecha {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  border: 1px solid color-mix(in oklab, var(--c-principal) 20%, transparent); border-radius: 50%;
  background: color-mix(in oklab, var(--c-superficie) 50%, transparent); color: var(--c-principal);
  opacity: .4; translate: 0 -50%; backdrop-filter: blur(3px);
  transition: opacity var(--transicion), background var(--transicion), border-color var(--transicion);
}
.nosotros__flecha:hover, .nosotros__flecha:focus-visible { opacity: 1; border-color: var(--c-principal); background: var(--c-superficie); }
.nosotros__flecha .icono { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.nosotros__flecha--anterior { left: var(--margen); }
.nosotros__flecha--siguiente { right: calc(.6 * clamp(2rem, 5vw, 5rem)); }
.nosotros__texto { display: flow-root; container-type: inline-size; --titulo-em: 13; }
/* Lo que mide en em la línea más larga del título (la segunda), para que llegue justo hasta el sello */
:lang(en) .nosotros__texto { --titulo-em: 16.3; }
/* Como un sello, metido en la esquina (se sale hacia el margen y hacia arriba); recto, sin inclinar */
.nosotros__sello { float: right; margin: calc(-1 * clamp(1.5rem, 3.5vw, 3.25rem)) calc(-.55 * var(--margen)) .75rem clamp(1rem, 2vw, 2rem); }
.nosotros__intro + .nosotros__intro { margin-top: 1rem; }
.nosotros__pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); clear: both; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.nosotros__pilares li { padding-top: 1rem; border-top: 2px solid var(--c-principal); }
.nosotros__pilares span { font-family: var(--f-mono); font-size: .75rem; color: var(--c-acento); }
.nosotros__pilares h3 { margin: .3rem 0 .4rem; font-size: 1.4rem; color: var(--c-principal); }
.nosotros__pilares p { font-size: .98rem; color: var(--c-texto-suave); }
/* Sello: el logo en círculo con un rótulo que gira despacio alrededor */
.sello { position: relative; width: clamp(130px, 11vw, 180px); aspect-ratio: 1; color: var(--c-principal); }
.sello__rotulo { position: absolute; inset: 0; width: 100%; height: 100%; animation: sello-gira 40s linear infinite; }
.sello__rotulo text { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; fill: currentColor; }
.sello__logo { position: absolute; inset: 15%; width: 70%; height: 70%; }
@keyframes sello-gira { to { transform: rotate(360deg); } }
/* Título (iteración 42): dos líneas y lo último en rojo; la segunda llena el hueco hasta el sello: el tamaño sale del
   ancho de la columna (cqi) menos lo que ocupa el sello con sus márgenes, entre lo que mide esa línea (--titulo-em) */
.nosotros__texto h2 {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.02; color: var(--c-principal);
  font-size: clamp(2.3rem, calc((100cqi - clamp(130px, 11vw, 180px) - clamp(1rem, 2vw, 2rem) + .55 * var(--margen)) / var(--titulo-em)), 4.75rem);
}
.nosotros__texto h2 em { font-style: normal; color: var(--c-acento); }
.nosotros__intro { font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--c-texto-suave); }

/* Línea de pasos: el paso activo late y el tramo hasta el siguiente se va rellenando */
.proceso { margin-top: clamp(3rem, 6vw, 5rem); }
.proceso__titulo {
  margin-bottom: 1.6rem;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-texto-suave);
}
.proceso__pasos { --hueco: clamp(1.25rem, 2.5vw, 2.5rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hueco); }
.paso { position: relative; padding-top: 2.5rem; cursor: pointer; }
.paso::before, .paso__tramo {
  content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--hueco)); height: 1px;
  background: var(--c-linea);
}
.paso__tramo { top: 6.5px; height: 2px; background: var(--c-acento); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva); }
.paso:last-child::before, .paso:last-child .paso__tramo { right: 0; }
.paso.hecho .paso__tramo { transform: scaleX(1); }
.proceso.en-marcha .paso.activo .paso__tramo { transform: scaleX(1); transition: transform var(--espera, 4.2s) linear; }
.paso__punto {
  position: absolute; top: 0; left: 0; z-index: 1; width: 16px; height: 16px;
  border: 2px solid var(--c-acento); border-radius: 50%; background: var(--c-fondo);
  transition: background var(--transicion);
}
.paso.hecho .paso__punto, .paso.activo .paso__punto { background: var(--c-acento); }
.paso.activo .paso__punto { animation: latido 1.8s ease-out infinite; }
@keyframes latido {
  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-acento) 45%, transparent); }
  to { box-shadow: 0 0 0 14px transparent; }
}
.paso__titulo { margin-bottom: .6rem; font-size: 1.32rem; color: var(--c-texto-suave); transition: color var(--transicion); }
.paso.activo .paso__titulo { color: var(--c-principal); }
.paso p { font-size: .98rem; color: var(--c-texto-suave); }

/* ---------- Cabecera de páginas interiores ---------- */
.cabecera-pagina {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6.5vw, 5rem);
  background: var(--c-principal); color: var(--c-sobre-principal);
}
.cabecera-pagina__lineas {
  position: absolute; inset: 0 0 0 28%; z-index: -1; opacity: .26;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.cabecera-pagina h1 { margin-bottom: 1rem; font-size: clamp(2.7rem, 5.6vw, 4.6rem); }
.cabecera-pagina__texto { max-width: 36rem; font-size: clamp(1.1rem, 1.45vw, 1.28rem); color: var(--c-oscuro-suave); }

/* Página de error 404 (iteración 45): la cabecera azul de las interiores, alta, con dos botones */
.pagina-error { display: flex; flex-direction: column; min-height: 100svh; }
.pagina-error main { display: flex; flex: 1; }
.pagina-error__cabecera { display: flex; flex: 1; align-items: center; }
.pagina-error__cabecera .contenedor { width: 100%; }
.pagina-error__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- Servicios (cuadrícula, elegida en la iteración 19) ---------- */
/* Los siete a la vista: cada ficha con la imagen fija de su modelo, siempre sobre claro, y la «regla» de burbujas 1–7 que
   marca la señalada. La octava casilla invita a escribir. Iteración 31: fondo oscuro con la cuadrícula de plano y fichas
   claras. Iteración 32: de sus tres versiones, el «foco»: fichas blancas, redondeadas y sin borde, que flotan con un halo
   claro. Iteración 33: la llamada a la acción del final, en el mismo plano («continuo»). Iteración 34: el fondo, en el azul
   de la portada. Iteración 35: fuera el brillo que seguía al ratón. Los colores de las fichas, y de la ficha en grande, van
   en las variables --ficha-* */
.servicios {
  --ficha-fondo: #fff;
  --ficha-borde: transparent;
  --ficha-texto: var(--c-principal);
  --ficha-suave: var(--c-texto-suave);
  --ficha-linea: var(--c-linea);
  --ficha-sombra: 0 30px 70px -26px color-mix(in oklab, var(--c-acento) 55%, transparent);
  --ficha-radio: 12px;
  position: relative; isolation: isolate;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 4.5vw, 4rem);
  color: var(--c-sobre-principal);
}
/* El fondo, en main (para que siga por debajo de la llamada a la acción del final): el azul principal, el de la portada,
   con la cuadrícula de plano tenue en todo él (sin el brillo que seguía al ratón: fuera en la iteración 35) */
.pagina-servicios main {
  --cuad: color-mix(in oklab, var(--c-sobre-principal) 3%, transparent);
  --cuad-fuerte: color-mix(in oklab, var(--c-sobre-principal) 6%, transparent);
  position: relative; isolation: isolate;
  background: var(--c-principal);
}
.pagina-servicios main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px;
}
/* Encabezado (iteraciones 42–43, el elegido: «cifra»): título y entradilla a la izquierda y un «07» enorme en hueco, como
   los números de las fichas, que cuenta del 00 al 07 al llegar (con @property; donde no la haya, sale el 07 sin contar).
   Sin líneas que se confundan con la cuadrícula. Para que el texto llene el hueco hasta la cifra, el título crece con el
   ancho del encabezado (cqi; su segunda línea mide unos 14,5 em) y la entradilla va en dos columnas en pantalla ancha */
.servicios__encabezado { --enc-entra: encabezado-entra .9s var(--curva) both; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.servicios__textos {
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(2rem, 4cqi, 5rem); align-items: end;
}
.servicios__titulo, .servicios__intro, .servicios__cifra { animation: var(--enc-entra); }
.servicios__intro { animation-delay: .12s; }
.servicios__cifra { animation-delay: .2s; }
@keyframes encabezado-entra { from { opacity: 0; transform: translateY(18px); } }
.servicios__encabezado .etiqueta { margin: 0 0 1rem; color: var(--c-oscuro-suave); }
.servicios__encabezado h1 { font-size: clamp(2.1rem, calc(5.5cqi - 1rem), 5.6rem); line-height: 1.02; letter-spacing: -.005em; color: var(--c-sobre-principal); }
.servicios__encabezado h1 em { font-style: normal; color: var(--c-acento); }
.servicios__intro {
  grid-column: 1; margin: clamp(1.1rem, 1.8vw, 1.6rem) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em clamp(2rem, 3.5cqi, 4rem);
  font-size: clamp(1.02rem, 1.12cqi, 1.3rem); line-height: 1.6; color: var(--c-oscuro-suave); text-wrap: pretty;
}
.servicios__cifra {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.6rem); margin: 0;
}
@property --cifra { syntax: "<integer>"; initial-value: 0; inherits: false; }
.servicios__cifra-n { font-size: 0; }
.servicios__cifra-n::before {
  --cifra: var(--total);
  counter-reset: cifra var(--cifra); content: counter(cifra, decimal-leading-zero);
  font-family: var(--f-titulos); font-size: clamp(7rem, 11cqi, 15rem); font-weight: 600; line-height: .78; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--c-acento);
  animation: cifra-cuenta 1.3s cubic-bezier(.3, .6, .3, 1) .35s both;
}
@keyframes cifra-cuenta { from { --cifra: 0; } }
.servicios__cifra-texto {
  width: 13.5rem; padding-top: .7rem; border-top: 3px solid var(--c-acento);
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-oscuro-suave);
}
/* Un párrafo en cada columna (iteración 44: la segunda empieza en «Cada estructura»), solo si quedan holgadas; si no,
   uno debajo de otro */
.servicios__intro p { margin: 0; }
@container (max-width: 1250px) {
  .servicios__intro { grid-template-columns: minmax(0, 1fr); }
}
/* Por debajo de 1080 px no caben al lado: la cifra, más pequeña, encima; la entradilla en una columna */
@media (max-width: 1080px) {
  .servicios__textos { grid-template-columns: minmax(0, 1fr); }
  .servicios__cifra { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 1.25rem; }
  .servicios__cifra-n::before { font-size: 5.5rem; }
  .servicios__intro { max-width: 70ch; }
}
@media (max-width: 900px) {
  .servicios__encabezado h1 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .servicios__titulo, .servicios__intro, .servicios__cifra, .servicios__cifra-n::before { animation: none; }
}

/* La cinta «del diseño a la obra» (iteración 40; la «línea», elegida en la 41): seis pasos con iconos grandes unidos por
   una línea que recorre una raya roja y enciende cada paso. En pantalla ancha, de lado a lado como la regla de debajo:
   el primer icono a ras de la izquierda y el último a ras de la derecha (sus textos se alinean con ellos) */
.flujo { --flujo-icono: clamp(4rem, 5.5vw, 5.5rem); --flujo-linea: color-mix(in oklab, var(--c-sobre-principal) 26%, transparent); margin-block: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem); color: var(--c-sobre-principal); }
.flujo__pasos { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.flujo__paso { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; gap: .3rem; width: var(--flujo-icono); text-align: center; }
.flujo__paso:first-child { align-items: flex-start; text-align: left; }
.flujo__paso:last-child { align-items: flex-end; text-align: right; }
.flujo__paso > :not(.flujo__icono) { width: max-content; max-width: 13rem; }
.flujo__icono {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--flujo-icono); aspect-ratio: 1;
  border: 1.5px solid color-mix(in oklab, var(--c-sobre-principal) 40%, transparent); border-radius: 50%; background: var(--c-principal);
  transition: border-color var(--transicion), background var(--transicion);
  animation: flujo-luz 9s ease-out infinite; animation-delay: calc(var(--i) * 1.2s);
}
.flujo__icono .icono { width: 46%; height: 46%; stroke-width: 1.4; }
.flujo__paso:hover .flujo__icono { border-color: var(--c-acento); }
.flujo__n { margin-top: .55rem; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; color: var(--c-acento); }
.flujo__nombre { font-family: var(--f-titulos); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 600; line-height: 1.1; }
.flujo__texto { font-size: .86rem; line-height: 1.35; color: var(--c-oscuro-suave); }
.flujo__paso .flujo__texto { max-width: clamp(8rem, 11vw, 11.5rem); }

/* La línea que une los iconos por el centro, del primero al último, y la raya roja que la recorre */
.flujo__pasos::before,
.flujo__pasos::after {
  content: ""; position: absolute; top: calc(var(--flujo-icono) / 2 - 1px); left: calc(var(--flujo-icono) / 2); right: calc(var(--flujo-icono) / 2);
  height: 2px; background: var(--flujo-linea);
}
.flujo__pasos::after { background: var(--c-acento); transform: scaleX(0); transform-origin: left; animation: flujo-avance 9s linear infinite; }
@keyframes flujo-avance { 0% { transform: scaleX(0); opacity: 1; } 66.6% { transform: scaleX(1); opacity: 1; } 90% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes flujo-luz {
  0% { border-color: var(--c-acento); background: var(--c-acento); box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-acento) 60%, transparent); }
  12% { border-color: var(--c-acento); background: var(--c-acento); box-shadow: 0 0 0 16px color-mix(in oklab, var(--c-acento) 0%, transparent); }
  24%, 100% { border-color: color-mix(in oklab, var(--c-sobre-principal) 40%, transparent); background: var(--c-principal); box-shadow: none; }
}

/* Tableta: de tres en tres y centrados, sin la línea (no puede seguir de una fila a otra); móvil: en vertical, con la
   línea a la izquierda */
@media (max-width: 900px) {
  .flujo { --flujo-icono: 3.6rem; }
  .flujo__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .flujo__paso, .flujo__paso:first-child, .flujo__paso:last-child { width: auto; min-width: 0; align-items: center; text-align: center; }
  .flujo__paso > :not(.flujo__icono) { width: auto; }
  .flujo__pasos::before, .flujo__pasos::after { display: none; }
}
@media (max-width: 640px) {
  .flujo { --flujo-icono: 3.2rem; margin-top: 1.5rem; }
  .flujo__pasos { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .flujo__paso, .flujo__paso:first-child, .flujo__paso:last-child {
    display: grid; grid-template-columns: var(--flujo-icono) minmax(0, 1fr); column-gap: 1rem; row-gap: .1rem; align-items: center; text-align: left;
  }
  .flujo__icono { grid-row: 1 / span 3; }
  .flujo__paso :is(.flujo__n, .flujo__nombre, .flujo__texto) { grid-column: 2; max-width: none; margin: 0; }
  .flujo__pasos::before,
  .flujo__pasos::after {
    display: block; top: calc(var(--flujo-icono) / 2); bottom: calc(var(--flujo-icono) / 2); left: calc(var(--flujo-icono) / 2 - 1px); right: auto;
    width: 2px; height: auto;
  }
  .flujo__pasos::after { transform: scaleY(0); transform-origin: top; animation-name: flujo-avance-v; }
}
@keyframes flujo-avance-v { 0% { transform: scaleY(0); opacity: 1; } 66.6% { transform: scaleY(1); opacity: 1; } 90% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .flujo__pasos::after, .flujo__icono { animation: none !important; }
  .flujo__pasos::after { transform: none; }
}

/* La regla: burbujas con el nombre al lado sobre una línea; la roja avanza hasta la burbuja señalada (--avance, en px) */
.regla { position: relative; margin-bottom: clamp(1rem, 1.8vw, 1.4rem); padding-bottom: .85rem; border-bottom: 1px solid var(--c-oscuro-linea); }
.regla__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; }
.regla li { min-width: 0; }
.regla button {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font-size: .9rem; font-weight: 500; color: var(--c-oscuro-suave); transition: color var(--transicion);
}
.regla button:hover, .regla li.activo button { color: var(--c-sobre-principal); }
.regla__burbuja {
  position: relative; display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem;
  border: 1px solid color-mix(in oklab, var(--c-sobre-principal) 35%, transparent); border-radius: 50%; background: var(--c-principal);
  font-family: var(--f-mono); font-size: .66rem; font-weight: 500;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.regla li.activo .regla__burbuja { border-color: var(--c-acento); background: var(--c-acento); color: var(--c-sobre-acento); }
.regla li.activo .regla__burbuja::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; animation: latido 1.8s ease-out infinite; }
.regla__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regla__avance { position: absolute; left: 0; bottom: -1px; width: var(--avance, 0px); height: 2px; background: var(--c-acento); transition: width .6s var(--curva); }

/* Las fichas, de cuatro en cuatro: la imagen fija del modelo arriba, sobre claro, y debajo número en hueco, título,
   lema, qué incluye y normativa. Toda la ficha se pulsa (una capa-botón encima) para verla en grande. Entran de una en una
   al cargar la página (--orden). Al pasar el ratón (y cuando la señala la regla): sube, se enmarca en rojo, brilla y late
   con dos ondas que salen por turnos; un brillo cruza la imagen, aparecen escuadras rojas en sus esquinas, una raya roja
   recorre el borde de arriba del texto, el número se rellena de rojo y la raya del lema se alarga */
.servicios__fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sv-ficha {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--ficha-radio); cursor: pointer;
  border: 1px solid var(--ficha-borde); background: var(--ficha-fondo); color: var(--ficha-texto);
  box-shadow: 0 26px 60px -34px color-mix(in oklab, var(--c-sobre-principal) 45%, transparent);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s, background .4s;
  animation: ficha-entra .8s var(--curva) backwards; animation-delay: calc(var(--orden, 0) * 75ms);
}
/* «backwards»: al acabar no deja nada fijado, para que el ratón pueda subir la ficha */
@keyframes ficha-entra { from { opacity: 0; transform: translateY(28px) scale(.97); } }
.sv-ficha::before, .sv-ficha::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.sv-ficha:is(:hover, :focus-within, .latiendo) { transform: translateY(-6px); border-color: var(--c-acento); box-shadow: var(--ficha-sombra); }
.sv-ficha:is(:hover, :focus-within, .latiendo)::before { animation: pulso-ficha 1.6s ease-out infinite; }
.sv-ficha:is(:hover, :focus-within, .latiendo)::after { animation: pulso-ficha 1.6s ease-out .8s infinite; }
@keyframes pulso-ficha {
  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-acento) 65%, transparent); }
  to { box-shadow: 0 0 0 18px color-mix(in oklab, var(--c-acento) 0%, transparent); }
}
.sv-ficha__imagen {
  position: relative; flex: none; overflow: hidden; aspect-ratio: 16 / 11;
  border-radius: max(var(--ficha-radio) - 1px, 0px) max(var(--ficha-radio) - 1px, 0px) 0 0;
  background: radial-gradient(ellipse 80% 75% at 50% 55%, #fff, var(--c-superficie) 60%, color-mix(in oklab, var(--c-fondo) 85%, var(--c-principal)));
}
.sv-ficha__imagen img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--curva); }
.sv-ficha:hover .sv-ficha__imagen img { transform: scale(1.05); }
/* El brillo que cruza la imagen (vuelve a su sitio sin verse) y las escuadras de las esquinas */
.sv-ficha__imagen::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .75) 47%, rgb(255 255 255 / .75) 53%, transparent 70%);
  transform: translateX(-110%);
}
.sv-ficha:is(:hover, :focus-within, .latiendo) .sv-ficha__imagen::before { transform: translateX(110%); transition: transform 1.1s var(--curva); }
.sv-ficha__imagen::after {
  --e: var(--c-acento);
  --l: 1.15rem;
  content: ""; position: absolute; inset: .75rem; z-index: 1; pointer-events: none; opacity: 0; transform: scale(1.1);
  background:
    linear-gradient(var(--e) 0 0) left top / var(--l) 2px, linear-gradient(var(--e) 0 0) left top / 2px var(--l),
    linear-gradient(var(--e) 0 0) right top / var(--l) 2px, linear-gradient(var(--e) 0 0) right top / 2px var(--l),
    linear-gradient(var(--e) 0 0) left bottom / var(--l) 2px, linear-gradient(var(--e) 0 0) left bottom / 2px var(--l),
    linear-gradient(var(--e) 0 0) right bottom / var(--l) 2px, linear-gradient(var(--e) 0 0) right bottom / 2px var(--l);
  background-repeat: no-repeat;
  transition: opacity .35s ease, transform .55s var(--curva);
}
.sv-ficha:is(:hover, :focus-within, .latiendo) .sv-ficha__imagen::after { opacity: 1; transform: none; }
.sv-ficha__cuerpo {
  position: relative; display: flex; flex: 1; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem 1.2rem 1.2rem;
  background: linear-gradient(var(--c-acento) 0 0) 0 0 / 2.5rem 3px no-repeat; transition: background-size .6s var(--curva);
}
.sv-ficha:is(:hover, :focus-within, .latiendo) .sv-ficha__cuerpo { background-size: 100% 3px; }
/* La capa-botón que cubre la ficha, con el icono de ampliar arriba a la derecha (se ve al pasar el ratón) */
.sv-ficha__abrir { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.sv-ficha__abrir:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 3px; }
.sv-ficha__ampliar {
  position: absolute; top: .65rem; right: .65rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--c-principal); color: var(--c-sobre-principal); opacity: 0; transform: scale(.8);
  transition: opacity var(--transicion), transform var(--transicion);
}
.sv-ficha__ampliar .icono { width: 1.05rem; height: 1.05rem; stroke-width: 2; }
.sv-ficha:hover .sv-ficha__ampliar, .sv-ficha__abrir:focus-visible .sv-ficha__ampliar { opacity: 1; transform: none; }
/* Número en hueco, en el acento (se rellena al pasar el ratón) */
.sv-n {
  font-family: var(--f-titulos); font-size: clamp(2rem, 2.6vw, 2.7rem); font-weight: 600; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--c-acento); transition: color .45s ease;
}
.sv-ficha:is(:hover, :focus-within, .latiendo) .sv-n { color: var(--c-acento); }
.sv-titulo { font-size: clamp(1.3rem, 1.6vw, 1.65rem); line-height: 1.08; color: var(--ficha-texto); }
.sv-lema {
  position: relative; padding-left: 1.4rem; font-family: var(--f-titulos); font-size: clamp(1rem, 1.1vw, 1.1rem); font-weight: 500;
  line-height: 1.22; color: var(--ficha-texto);
}
.sv-lema::before { content: ""; position: absolute; left: 0; top: .6em; width: .85rem; height: 2px; background: var(--c-acento); transition: width .45s var(--curva); }
.sv-ficha:is(:hover, :focus-within, .latiendo) .sv-lema::before { width: 1.15rem; }
/* El resumen del servicio (iteración 36), entre el lema y «Qué incluye» */
.sv-texto { margin-bottom: .1rem; font-size: .92rem; line-height: 1.42; color: var(--ficha-suave); }
.sv-lista { display: grid; gap: .3rem; margin-top: .25rem; font-size: .9rem; line-height: 1.35; color: var(--ficha-suave); }
.sv-lista li { position: relative; padding-left: .95rem; }
.sv-lista li::before { content: ""; position: absolute; left: 0; top: .52em; width: .32rem; height: .32rem; background: var(--c-acento); }
.sv-normas { margin-top: .2rem; font-family: var(--f-mono); font-size: .68rem; line-height: 1.55; letter-spacing: .02em; color: var(--ficha-suave); }
.sv-normas span { margin-right: .3rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

/* La octava casilla (iteración 34): una ficha más, con la misma forma que las demás (lleva también sus clases sv-ficha,
   sv-ficha__imagen, sv-ficha__cuerpo y sv-n, y con ellas sus efectos), pero con el hueco de la imagen vacío: una hoja en
   blanco con su cuadrícula, un marco discontinuo y el «+» en un círculo rojo del que sale una onda de vez en cuando; en
   el sitio del número, un «?». Toda ella es un enlace a Contacto; el botón queda abajo, a ras del final de las otras */
.servicios__otro { color: var(--ficha-texto); text-decoration: none; }
.servicios__otro:focus-visible { outline: 2px solid var(--c-sobre-principal); outline-offset: 4px; }
.servicios__otro-hueco {
  --cuad-hoja: color-mix(in oklab, var(--c-principal) 6%, transparent);
  display: block;
  background:
    linear-gradient(var(--cuad-hoja) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--cuad-hoja) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(ellipse 80% 75% at 50% 55%, #fff, var(--c-superficie) 60%, color-mix(in oklab, var(--c-fondo) 85%, var(--c-principal)));
}
.servicios__otro-marco {
  position: absolute; inset: 1.1rem; display: grid; place-items: center;
  border: 1.5px dashed color-mix(in oklab, var(--c-principal) 40%, transparent); border-radius: 8px;
  transition: border-color .4s ease;
}
.servicios__otro:is(:hover, :focus-visible) .servicios__otro-marco { border-color: var(--c-acento); }
.servicios__otro-mas {
  position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--c-acento); color: var(--c-sobre-acento); box-shadow: 0 10px 22px -10px var(--c-acento);
  transition: transform .6s var(--curva);
}
.servicios__otro-mas .icono { width: 48%; height: 48%; stroke-width: 2.4; }
.servicios__otro-mas::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--c-acento); border-radius: 50%; pointer-events: none;
  animation: otro-onda 3.2s var(--curva) infinite;
}
@keyframes otro-onda { from { opacity: .7; transform: scale(1); } 60%, to { opacity: 0; transform: scale(1.8); } }
.servicios__otro:is(:hover, :focus-visible) .servicios__otro-mas { transform: rotate(90deg); }
.servicios__otro-texto { font-size: .95rem; line-height: 1.45; color: var(--ficha-suave); }
.servicios__otro-boton { align-self: flex-start; margin-top: auto; background: var(--c-acento); color: var(--c-sobre-acento); }
.servicios__otro:is(:hover, :focus-visible) .servicios__otro-boton .icono { transform: translateX(4px); }

/* La llamada a la acción del final (iteración 33, «continuo»): sin fondo propio, en el mismo plano que las fichas (la
   cuadrícula sigue por debajo de ella); las separa una línea fina que se desvanece en los extremos */
.pagina-servicios .llamada { background: none; }
.pagina-servicios .llamada::before {
  inset: 0 var(--margen) auto; height: 1px; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--c-sobre-principal) 22%, transparent) 15%, color-mix(in oklab, var(--c-sobre-principal) 22%, transparent) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .sv-ficha, .servicios__otro-mas::after { animation: none; }
  .servicios__otro-mas::after { opacity: 0; }
  .sv-ficha__imagen::before { display: none; }
}

/* La ficha en grande (iteración 20): crece desde la ficha hasta casi toda la pantalla (js/servicios.js anima su posición y
   su tamaño); a la izquierda el modelo, sobre claro, con su animación; a la derecha, la ficha completa sobre oscuro */
.ficha-grande {
  position: fixed; inset: auto; margin: 0; padding: 0; max-width: none; max-height: none; overflow: hidden;
  display: none; grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
  border: 1px solid var(--c-acento); border-radius: 6px; background: var(--ficha-fondo); color: var(--ficha-texto);
  box-shadow: 0 40px 120px rgb(0 0 0 / .45);
  transition: left .55s var(--curva), top .55s var(--curva), width .55s var(--curva), height .55s var(--curva), border-color .4s;
}
.ficha-grande[open] { display: grid; }
.ficha-grande::backdrop { background: color-mix(in oklab, var(--c-hondo) 72%, transparent); backdrop-filter: blur(4px); animation: aparecer .45s ease; }
@keyframes aparecer { from { opacity: 0; } }
.con-ficha-grande { overflow: hidden; }
/* El modelo: la imagen fija, del tamaño de la ficha al principio, y encima el 3D cuando carga */
.ficha-grande__modelo {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 75% at 50% 52%, #fff, var(--c-superficie) 55%, color-mix(in oklab, var(--c-fondo) 85%, var(--c-principal)));
}
.ficha-grande__modelo::before {
  --cuad: color-mix(in oklab, var(--c-principal) 5%, transparent);
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--cuad) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--cuad) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
}
.ficha-grande__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.ficha-grande__modelo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s ease; }
.ficha-grande__modelo.vivo iframe { opacity: 1; }
.ficha-grande__modelo.vivo .ficha-grande__imagen { opacity: 0; }
.ficha-grande__pie {
  position: absolute; left: 1.25rem; bottom: 1rem; max-width: calc(100% - 2.5rem);
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texto-suave);
}
/* La ficha completa: aparece cuando la ventana ha crecido */
.ficha-grande__cuerpo {
  display: flex; flex-direction: column; gap: .85rem; min-width: 0; min-height: 0; overflow-y: auto;
  padding: clamp(3.75rem, 7vh, 4.75rem) clamp(1.5rem, 2.8vw, 2.75rem) clamp(1.5rem, 3vh, 2.25rem);
  border-left: 1px solid var(--ficha-linea); transition: opacity .35s ease, transform .45s var(--curva);
}
.ficha-grande.creciendo .ficha-grande__cuerpo, .ficha-grande.cambiando .ficha-grande__cuerpo { opacity: 0; transform: translateY(10px); }
.ficha-grande .sv-n { font-size: clamp(2.6rem, 4vw, 3.6rem); }
.ficha-grande__titulo { font-size: clamp(2rem, 3vw, 3rem); color: var(--ficha-texto); }
.ficha-grande .sv-lema { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.ficha-grande__texto { font-size: 1.02rem; color: var(--ficha-suave); }
.ficha-grande__bloque { padding-top: .8rem; border-top: 1px solid var(--ficha-linea); }
.ficha-grande__rotulo { margin-bottom: .55rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ficha-suave); }
.ficha-grande .sv-lista { margin: 0; font-size: .98rem; color: var(--ficha-texto); }
.ficha-grande__normas { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha-grande__normas li {
  padding: .28rem .6rem; border: 1px solid var(--ficha-linea); border-radius: 3px;
  font-family: var(--f-mono); font-size: .72rem; color: var(--ficha-texto);
}
.ficha-grande__consultar { align-self: flex-start; margin-top: .4rem; background: var(--c-acento); color: var(--c-sobre-acento); }
.ficha-grande__consultar:hover { background: var(--ficha-texto); color: var(--ficha-fondo); }
/* Anterior, siguiente y cerrar, arriba a la derecha */
.ficha-grande__botones { position: absolute; top: .9rem; right: .9rem; z-index: 2; display: flex; gap: .4rem; transition: opacity .3s; }
.ficha-grande.creciendo .ficha-grande__botones { opacity: 0; }
.ficha-grande__botones button {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--ficha-linea); border-radius: 50%;
  background: color-mix(in oklab, var(--ficha-fondo) 85%, transparent); color: var(--ficha-texto);
  transition: background var(--transicion), border-color var(--transicion);
}
.ficha-grande__botones button:hover { border-color: var(--c-acento); background: var(--c-acento); color: var(--c-sobre-acento); }
.ficha-grande__botones .icono { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) {
  .ficha-grande, .ficha-grande::backdrop, .ficha-grande__cuerpo { transition: none; animation: none; }
  .sv-ficha::before, .sv-ficha::after { animation: none !important; }
}

/* ---------- Proyectos ---------- */
.proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.proyecto {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 2;
  border-radius: var(--radio); background: var(--c-principal); color: var(--c-sobre-principal);
}
.proyecto__imagen { position: absolute; inset: 0; z-index: -2; margin: 0; }
.proyecto__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.proyecto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 38%, color-mix(in oklab, var(--c-principal-hondo) 90%, transparent));
}
.proyecto:hover .proyecto__imagen img { transform: scale(1.05); }
.proyecto__info { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.5rem; }
.proyecto__tipo {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--c-sobre-principal) 82%, transparent);
}
.proyecto__tipo::before { content: ""; width: .45rem; height: .45rem; background: var(--c-acento); }
.proyecto__titulo { margin-bottom: .3rem; font-size: 1.5rem; }
.proyecto__meta { font-size: .95rem; color: color-mix(in oklab, var(--c-sobre-principal) 80%, transparent); }

/* ---------- Formularios ---------- */
.formulario { position: relative; }
.formulario__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.campo { display: flex; flex-direction: column; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo legend, .campo__titulo { font-size: .93rem; font-weight: 500; }
.campo legend { margin-bottom: .65rem; padding: 0; }
.campo input:not([type="checkbox"]):not([type="file"]), .campo textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--borde-campo); border-radius: var(--radio); background: var(--fondo-campo);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--foco-campo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--foco-campo) 22%, transparent); }
.campo ::placeholder { color: var(--placeholder-campo); opacity: 1; }
.campo__error { font-size: .86rem; color: var(--error-campo); }
.campo__error:empty { display: none; }
.campo.con-error input, .campo.con-error textarea { border-color: var(--error-campo); }
.campo--casilla { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .7rem; }
.campo--casilla input { flex: none; width: 1.15rem; height: 1.15rem; margin: .22rem 0 0; accent-color: var(--c-acento); }
.campo--casilla label { flex: 1; font-size: .93rem; font-weight: 400; }
.campo--casilla .campo__error { flex-basis: 100%; }
.campo--casilla a { text-underline-offset: 3px; }
/* Capa básica de información sobre protección de datos (AEPD), en letra pequeña bajo el botón de enviar */
.formulario__informacion { grid-column: 1 / -1; max-width: 62rem; margin: 0; font-size: .74rem; line-height: 1.5; color: color-mix(in oklab, var(--c-texto) 62%, var(--c-fondo)); }
.formulario__informacion strong { font-weight: 600; }
.formulario__informacion a { color: inherit; text-underline-offset: 2px; }
.cierre__formulario .formulario__informacion { color: var(--suave); opacity: .85; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem;
  border: 1px solid var(--c-linea); border-radius: 999px; background: var(--c-superficie);
  font-size: .93rem; cursor: pointer; user-select: none;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.chip span .icono { width: 0; opacity: 0; transition: width var(--transicion), opacity var(--transicion); }
.chip span:hover { border-color: var(--c-principal); }
.chip input:checked + span { border-color: var(--c-principal); background: var(--c-principal); color: var(--c-sobre-principal); }
.chip input:checked + span .icono { width: 1em; opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--c-acento); outline-offset: 2px; }

.adjuntos {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  border: 1.5px dashed color-mix(in oklab, var(--c-texto) 22%, var(--c-fondo)); border-radius: var(--radio);
  background: var(--c-fondo); cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.adjuntos__textos { display: flex; flex-direction: column; gap: .1rem; }
.adjuntos:hover, .adjuntos.arrastrando { border-color: var(--c-principal); background: var(--c-principal-claro); }
.adjuntos:focus-within { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.adjuntos__icono { color: var(--c-principal); }
.adjuntos__icono .icono { width: 1.6rem; height: 1.6rem; }
.adjuntos__texto { font-weight: 500; }
.adjuntos__formatos { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em; color: var(--c-texto-suave); }
.adjuntos__lista { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.adjuntos__lista:empty { display: none; }
.adjuntos__lista li { padding: .3rem .75rem; border-radius: 999px; background: var(--c-principal-claro); font-size: .85rem; }

.formulario__exito {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem;
  padding: 2rem; text-align: center; border-radius: inherit; background: inherit;
}
.formulario__exito[hidden] { display: none; }
.formulario__exito:focus { outline: none; }
.formulario__exito-icono { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--c-acento); color: var(--c-sobre-acento); }
.formulario__exito-icono .icono { width: 1.8rem; height: 1.8rem; stroke-width: 2.2; }
.formulario__exito h2 { font-size: 1.9rem; }
.formulario__exito p { max-width: 26rem; }
.formulario.enviado .formulario__campos, .formulario.enviado [data-enviar] { visibility: hidden; }

/* ---------- Formulario del final de las páginas (elegido en la iteración 12) ---------- */
/* Cinta grande arriba y de palabras sueltas abajo, fondo de cuadrícula, la nave 3D a la izquierda y, a la derecha,
   el formulario en un panel más hondo que el fondo, con escuadras rojas en las esquinas y una cota encima. */
.cierre {
  --suave: var(--c-oscuro-suave);
  --cuad: color-mix(in oklab, var(--c-sobre-principal) 5%, transparent);
  --cuad-fuerte: color-mix(in oklab, var(--c-sobre-principal) 10%, transparent);
  --mascara-cuad: radial-gradient(ellipse 85% 90% at 55% 50%, #000 35%, transparent 92%);
  --marco: color-mix(in oklab, var(--c-sobre-principal) 30%, transparent);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-principal); color: var(--c-sobre-principal);
}
/* Fondo de cuadrícula: retícula fina cada 24 px y otra más marcada cada 120 px, que se desvanece hacia los bordes */
.cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: var(--mascara-cuad); mask-image: var(--mascara-cuad);
}
.cierre__dos {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center;
  padding-block: clamp(3.25rem, 4.5vw, 4.25rem);
}
/* La nave 3D (incrustada, estilo acero, sin sombra y con fondo transparente): sin caja, se funde con la cuadrícula.
   Su hueco se sale un poco por arriba, por abajo y hacia el margen, para que la nave salga grande. La ventana del modelo
   (el iframe) es aún más ancha, hasta el borde de la pantalla y por debajo del panel, y nunca más alta que ancha (centrada
   en el hueco): la cámara encuadra por la altura y, en una ventana alta, la nave se cortaba por los lados al girar */
.cierre__modelo { position: relative; align-self: stretch; min-height: 26rem; margin: -3rem -2rem -3rem 0; container-type: size; }
.cierre__modelo iframe {
  --ancho-nave: calc(100cqw + var(--margen) + 5rem);
  position: absolute; top: 50%; left: calc(-1 * var(--margen)); translate: 0 -50%;
  width: var(--ancho-nave); max-width: none; height: min(100cqh, var(--ancho-nave) * .9); border: 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 68%, transparent 100%);
}

/* El panel: más hondo que el fondo (degradado del principal hacia el negro), con borde fino, luz arriba y sombra
   larga, para que se despegue de la cuadrícula. Al rellenarlo, las escuadras crecen y la cota se enciende */
.cierre__bloque {
  --hondo-1: color-mix(in oklab, var(--c-principal) 84%, #000);
  --hondo-2: color-mix(in oklab, var(--c-principal) 62%, #000);
  position: relative; padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border: 1px solid color-mix(in oklab, var(--c-sobre-principal) 14%, transparent); border-radius: 4px;
  background: linear-gradient(165deg, var(--hondo-1), var(--hondo-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--c-sobre-principal) 12%, transparent),
    0 2px 0 color-mix(in oklab, var(--c-principal) 40%, #000),
    0 50px 100px -30px rgb(0 0 0 / .6);
}
.esquina {
  position: absolute; width: 1.5rem; height: 1.5rem; border: 0 solid var(--c-acento); pointer-events: none;
  transition: width .45s var(--curva), height .45s var(--curva);
}
.esquina--1 { top: -.65rem; left: -.65rem; border-top-width: 2px; border-left-width: 2px; }
.esquina--2 { top: -.65rem; right: -.65rem; border-top-width: 2px; border-right-width: 2px; }
.esquina--3 { bottom: -.65rem; left: -.65rem; border-bottom-width: 2px; border-left-width: 2px; }
.esquina--4 { bottom: -.65rem; right: -.65rem; border-bottom-width: 2px; border-right-width: 2px; }
.cierre__bloque:focus-within .esquina { width: 2.6rem; height: 2.6rem; }
.cierre__cota {
  position: absolute; left: 0; right: 0; top: -2.2rem; display: flex; align-items: center; gap: .8rem; height: .8rem;
  border-inline: 1px solid var(--marco);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave);
  transition: color var(--transicion);
}
.cierre__cota::before, .cierre__cota::after { content: ""; flex: 1; height: 1px; background: var(--marco); transition: background var(--transicion); }
.cierre__bloque:focus-within .cierre__cota { color: var(--c-acento); }
.cierre__bloque:focus-within .cierre__cota::before, .cierre__bloque:focus-within .cierre__cota::after { background: color-mix(in oklab, var(--c-acento) 60%, transparent); }
.cierre__intro { margin-bottom: 1.25rem; }
.cierre__intro .etiqueta { margin-bottom: .7rem; }
.cierre__intro :is(h1, h2) { margin-bottom: .5rem; font-size: clamp(1.9rem, 2.8vw, 2.7rem); }
.cierre__texto { max-width: 34rem; font-size: 1.08rem; color: var(--suave); }

/* El formulario: campos un punto más claros que el panel, rótulos técnicos, botón y nota de a dónde llega */
.cierre__formulario {
  --fondo-campo: color-mix(in oklab, var(--c-sobre-principal) 8%, var(--hondo-2)); --borde-campo: color-mix(in oklab, var(--c-sobre-principal) 16%, transparent);
  --foco-campo: var(--c-sobre-principal); --error-campo: #FF9B9B;
  --placeholder-campo: color-mix(in oklab, var(--c-sobre-principal) 42%, var(--hondo-2));
}
.cierre__formulario .formulario__campos { gap: .9rem 1.1rem; margin-bottom: 0; }
.cierre__formulario .campo { gap: .35rem; }
.cierre__formulario .campo input:not([type="checkbox"]), .cierre__formulario .campo textarea { padding: .7rem .95rem; }
.cierre__formulario .campo textarea { min-height: 4.6rem; }
.cierre__formulario .campo:not(.campo--casilla) > label {
  font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--suave);
  transition: color var(--transicion);
}
.cierre__formulario .campo:focus-within > label { color: var(--c-sobre-principal); }
.cierre__formulario .campo--casilla label { font-size: .9rem; color: var(--suave); }
.cierre__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.cierre__enviar { background: var(--c-sobre-principal); color: var(--c-principal); }
.cierre__enviar:hover { background: var(--c-acento); color: var(--c-sobre-acento); }
.cierre__nota { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--suave); }
.cierre__nota .icono { width: 1.1rem; height: 1.1rem; color: var(--c-acento); }
.cierre__nota a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
/* Si el envío falla (iteración 45) */
.formulario__fallo { grid-column: 1 / -1; padding: .7rem .95rem; border-left: 3px solid var(--c-acento); border-radius: var(--radio); background: color-mix(in oklab, var(--c-acento) 14%, transparent); font-size: .92rem; }
.formulario__fallo[hidden] { display: none; }
.formulario__fallo a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* ---------- Cintas de letras ---------- */
.cinta {
  --cinta-tam: clamp(2.2rem, 4.3vw, 4.3rem);
  --cinta-color: var(--c-sobre-principal);
  --cinta-hueco: color-mix(in oklab, var(--cinta-color) 70%, transparent);
  --cinta-linea: var(--c-oscuro-linea);
  --cinta-fundido: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  position: relative; overflow: hidden; padding-block: clamp(.9rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--cinta-linea);
  -webkit-mask-image: var(--cinta-fundido); mask-image: var(--cinta-fundido);
}
.cinta__pista {
  display: flex; align-items: center; width: max-content;
  font-family: var(--f-titulos); font-size: var(--cinta-tam); font-weight: 500; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; color: var(--cinta-color);
  animation: cinta 70s linear infinite;
}
.cinta__pista > * { flex: none; margin-inline-end: .5em; }
.cinta__pista i { width: .16em; height: .16em; background: var(--c-acento); }
.cinta__hueca { color: transparent; -webkit-text-stroke: 1px var(--cinta-hueco); }
.cinta--inversa .cinta__pista { animation-direction: reverse; }
@keyframes cinta { to { transform: translateX(-50%); } }
/* Regla: marcas cada 16 px y más largas cada 80 px en el borde de abajo, como la escala de un plano */
.cinta--regla::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; pointer-events: none;
  --regla: color-mix(in oklab, var(--cinta-color) 35%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--regla) 0 1px, transparent 1px 80px) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--regla) 0 1px, transparent 1px 16px) left bottom / 100% 5px no-repeat;
}
/* Menor: palabras sueltas en letra de máquina, pequeñas y muy espaciadas */
.cinta--menor { --cinta-tam: .9rem; padding-block: 1.05rem; border-top: 1px solid var(--cinta-linea); border-bottom: 0; }
.cinta--menor .cinta__pista { font-family: var(--f-mono); font-weight: 500; letter-spacing: .32em; color: var(--c-oscuro-suave); animation-duration: 50s; }
.cinta--menor .cinta__pista > * { margin-inline-end: 1.6em; }
.cinta--menor .cinta__pista i { width: .45em; height: .45em; }

/* ---------- Llamada a la acción del final de las páginas (iteraciones 25–29, «franja») ---------- */
/* En todas menos Contacto (que es el formulario) y las legales: banda en azul con la cuadrícula de plano; a la izquierda
   la pregunta, grande; a la derecha el botón «Pide presupuesto» y los símbolos de WhatsApp, email y teléfono, en rojo */
.llamada {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-principal); color: var(--c-sobre-principal);
}
.llamada::before {
  --cuad: color-mix(in oklab, var(--c-sobre-principal) 5%, transparent);
  --cuad-fuerte: color-mix(in oklab, var(--c-sobre-principal) 10%, transparent);
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--cuad-fuerte) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cuad) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 140% at 75% 50%, #000 25%, transparent 90%);
  mask-image: radial-gradient(ellipse 60% 140% at 75% 50%, #000 25%, transparent 90%);
}
.llamada__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 4rem;
  padding-block: clamp(1.75rem, 2.5vw, 2.5rem);
}
.llamada__titulo { font-size: clamp(2.2rem, 3.8vw, 4rem); line-height: 1; }
.llamada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 2.4vw, 2.5rem); }
/* «Pide presupuesto» (iteración 29): a Contacto; rectangular, en rojo y del alto de los círculos, con su brillo y su onda */
.llamada__boton {
  --alto: clamp(4.25rem, 4.8vw, 5.25rem);
  position: relative; display: inline-flex; align-items: center; gap: .75em; min-height: var(--alto); padding: 0 1.6em;
  font-family: var(--f-titulos); font-size: clamp(1.15rem, 1.45vw, 1.45rem); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  background: var(--c-acento); color: var(--c-sobre-acento);
  box-shadow: 0 18px 44px -14px var(--c-acento), inset 0 1px 0 rgb(255 255 255 / .25);
  transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
.llamada__boton .icono { width: 1.15em; height: 1.15em; stroke-width: 2; transition: transform var(--transicion); }
.llamada__boton::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--c-acento); pointer-events: none;
  animation: llamada-onda-boton 3s var(--curva) infinite;
}
.llamada__boton:hover, .llamada__boton:focus-visible {
  transform: translateY(-4px); background: color-mix(in oklab, var(--c-acento) 85%, #fff);
  box-shadow: 0 26px 54px -14px var(--c-acento), inset 0 1px 0 rgb(255 255 255 / .3);
}
.llamada__boton:hover .icono, .llamada__boton:focus-visible .icono { transform: translateX(.3em); }
.llamada__boton:focus-visible { outline: 2px solid var(--c-sobre-principal); outline-offset: 4px; }
@keyframes llamada-onda-boton { from { opacity: .8; transform: scale(1); } 75%, to { opacity: 0; transform: scale(1.08, 1.4); } }
/* WhatsApp, email y teléfono (iteración 27): solo los símbolos, grandes, en círculos rojos con brillo; de cada uno sale una
   onda por turnos para llamar la atención y, al pasar el ratón, sube, crece y se aclara */
.llamada__directos { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); }
.llamada__directos a {
  position: relative; display: grid; place-items: center; width: clamp(4.25rem, 4.8vw, 5.25rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-acento); color: var(--c-sobre-acento);
  box-shadow: 0 18px 44px -14px var(--c-acento), inset 0 1px 0 rgb(255 255 255 / .25);
  transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
.llamada__directos .icono { width: 44%; height: 44%; stroke-width: 1.9; }
.llamada__directos a::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--c-acento); border-radius: 50%; pointer-events: none;
  animation: llamada-onda 3s var(--curva) infinite;
}
.llamada__directos li:nth-child(1) a::after { animation-delay: .5s; }
.llamada__directos li:nth-child(2) a::after { animation-delay: 1s; }
.llamada__directos li:nth-child(3) a::after { animation-delay: 1.5s; }
.llamada__directos a:hover, .llamada__directos a:focus-visible {
  transform: translateY(-4px) scale(1.07); background: color-mix(in oklab, var(--c-acento) 85%, #fff);
  box-shadow: 0 26px 54px -14px var(--c-acento), inset 0 1px 0 rgb(255 255 255 / .3);
}
.llamada__directos a:focus-visible { outline: 2px solid var(--c-sobre-principal); outline-offset: 4px; }
@keyframes llamada-onda { from { opacity: .8; transform: scale(1); } 75%, to { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .llamada__directos a::after, .llamada__boton::after { animation: none; opacity: 0; } }

/* ---------- Contacto (iteración 22): la sección del formulario del final, a pantalla completa ---------- */
/* Las cintas quedan arriba y abajo y la nave y el formulario, centrados en el hueco que dejan */
.cierre--pagina { display: flex; flex-direction: column; min-height: calc(100svh - var(--cabecera-alto)); }
/* La rejilla no se estira: se centra en el alto que sobra, para que la fila de los datos acabe a ras del panel */
.cierre--pagina .cierre__dos { margin-block: auto; grid-template-rows: minmax(0, 1fr) auto; row-gap: 1.25rem; }
.cierre--pagina .cierre__modelo { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.cierre--pagina .cierre__bloque { grid-column: 2; grid-row: 1 / 3; }
/* Bajo la nave, los datos de contacto en una sola línea (iteraciones 23 y 24), a ras de la parte de abajo del panel.
   Se meten un poco en el margen y en el hueco entre columnas, y la letra crece con su ancho (unidades cqw) para llenarlo;
   por debajo de unos 1300 px pasan a dos líneas */
.cierre__datos {
  grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 1; container-type: inline-size;
  margin-inline: calc(-.5 * var(--margen)) -3.25rem; display: flex; flex-wrap: wrap; justify-content: center; row-gap: .5rem;
}
/* El hueco entre datos, en cada uno (en la lista, cqw no mediría su propio ancho sino el de la pantalla) */
.cierre__datos > li { padding-inline: .9cqw; font-size: clamp(.7rem, 2cqw, 1.25rem); }
.cierre__datos a, .cierre__datos span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; color: inherit; text-decoration: none; }
.cierre__datos span { color: var(--suave); }
.cierre__datos .icono { flex: none; width: 1.15em; height: 1.15em; color: var(--c-acento); }
.cierre__datos a:hover { text-decoration: underline; text-decoration-color: var(--c-acento); text-underline-offset: 4px; }

/* ---------- Pie ---------- */
/* En el principal más hondo, como la cabecera, para que no se confunda con el formulario del final */
.pie {
  --pie-texto: var(--c-sobre-principal);
  --pie-suave: color-mix(in oklab, var(--pie-texto) 68%, var(--c-hondo));
  --pie-linea: color-mix(in oklab, var(--pie-texto) 14%, var(--c-hondo));
  border-top: 1px solid var(--pie-linea); background: var(--c-hondo); color: var(--pie-suave); font-size: .94rem;
}
/* Logo a la izquierda, menú centrado en la pantalla y contacto a la derecha */
.pie__fila { display: grid; grid-template-columns: minmax(max-content, 1fr) max-content minmax(max-content, 1fr); align-items: center; gap: .8rem 2.5rem; padding-block: .9rem; }
.pie__marca { justify-self: start; }
.pie__logo { display: inline-block; vertical-align: top; }
.pie__logo img { width: auto; height: 40px; }
/* Lema bajo el logo (iteración 36), en dos líneas parecidas */
.pie__lema { max-width: 19rem; margin-top: .4rem; font-size: .8rem; line-height: 1.35; text-wrap: balance; color: var(--pie-suave); }
.pie__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.pie__enlaces a, .pie__contacto a, .pie__contacto span { display: inline-flex; align-items: center; gap: .5rem; color: var(--pie-texto); text-decoration: none; }
.pie__enlaces a:hover, .pie__contacto a:hover { text-decoration: underline; text-decoration-color: var(--c-acento); text-underline-offset: 4px; }
/* Email y teléfono arriba; ciudad y horario debajo, más suaves */
.pie__contacto { justify-self: end; display: grid; grid-template-columns: auto auto; gap: .3rem 1.75rem; }
.pie__contacto span { color: var(--pie-suave); font-size: .9rem; }
.pie__contacto .icono { color: var(--pie-suave); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: .7rem; border-top: 1px solid var(--pie-linea); font-size: .84rem; color: var(--pie-suave); }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pie__legal a { text-decoration: none; }
.pie__legal a:hover, .pie__legal a[aria-current] { color: var(--pie-texto); }

/* Botón de WhatsApp flotante (elegido en la iteración 15): siempre a mano, abajo a la derecha de todas las páginas */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-acento); color: var(--c-sobre-acento);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--c-principal) 30%, transparent);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp-flotante:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 28px color-mix(in oklab, var(--c-acento) 40%, transparent); }
.whatsapp-flotante .icono { width: 28px; height: 28px; stroke-width: 1.6; }

/* ---------- Aviso de cookies (iteración 45) ---------- */
/* Abajo a la izquierda (a la derecha está el botón de WhatsApp), en el azul de la cabecera y el pie, con los dos botones
   iguales: aceptar no puede destacar más que rechazar (criterio de la AEPD). */
.aviso-cookies {
  position: fixed; left: 20px; bottom: 20px; z-index: 70; display: grid; gap: 1rem; width: min(29rem, calc(100% - 40px));
  padding: 1.2rem 1.3rem 1.3rem; border-top: 3px solid var(--c-acento); border-radius: var(--radio);
  background: var(--c-hondo); color: var(--c-sobre-principal);
  box-shadow: 0 14px 40px color-mix(in oklab, #000 35%, transparent);
  opacity: 0; transform: translateY(14px); transition: opacity .35s var(--curva), transform .35s var(--curva);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies.visible { opacity: 1; transform: none; }
.aviso-cookies__texto { font-size: .92rem; line-height: 1.55; color: var(--c-oscuro-suave); }
.aviso-cookies__texto strong { display: block; margin-bottom: .25rem; font-family: var(--f-titulos); font-size: 1.2rem; font-weight: 600; color: var(--c-sobre-principal); }
.aviso-cookies__texto a { color: var(--c-sobre-principal); text-decoration-color: var(--c-acento); text-underline-offset: 3px; }
.aviso-cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.aviso-cookies__boton { min-height: 2.75rem; padding: .55rem 1rem; background: var(--c-sobre-principal); color: var(--c-principal); }
.aviso-cookies__boton:hover { background: var(--c-acento); color: var(--c-sobre-acento); }
@media (prefers-reduced-motion: reduce) { .aviso-cookies { transition: none; } }

/* ---------- Páginas legales ---------- */
.legal { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 46rem); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal__indice nav { position: sticky; top: calc(var(--cabecera-alto) + 1.5rem); }
.legal__otras { margin-bottom: .8rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texto-suave); }
.legal__indice ul { display: grid; gap: .2rem; border-left: 1px solid var(--c-linea); }
.legal__indice a { display: block; margin-left: -1px; padding: .35rem 0 .35rem 1rem; border-left: 2px solid transparent; color: var(--c-texto-suave); text-decoration: none; }
.legal__indice a:hover { color: var(--c-texto); }
.legal__indice a[aria-current] { border-left-color: var(--c-acento); color: var(--c-texto); font-weight: 600; }
.legal__cabecera { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--c-linea); }
.legal__cabecera h1 { margin-bottom: .8rem; font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.legal__entradilla { font-size: 1.2rem; color: var(--c-texto-suave); }
.legal__fecha { margin-top: 1rem; font-family: var(--f-mono); font-size: .78rem; color: var(--c-texto-suave); }
.legal__texto section + section { margin-top: 2.2rem; }
.legal__texto h2 { margin-bottom: .7rem; font-size: clamp(1.35rem, 2vw, 1.6rem); }
.legal__texto p + p, .legal__texto p + dl, .legal__texto dl + p { margin-top: .8rem; }
.legal__datos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.5rem; margin: 0; padding: 1.2rem 1.4rem;
  border: 1px solid var(--c-linea); border-left: 3px solid var(--c-principal); border-radius: var(--radio); background: var(--c-superficie);
}
.legal__datos dt { font-family: var(--f-mono); font-size: .8rem; line-height: 1.95; color: var(--c-texto-suave); }
.legal__datos dd { margin: 0; overflow-wrap: anywhere; }
/* Datos que faltan: se ven resaltados hasta que se rellenen (antes de publicar) */
.dato-pendiente { padding: 0 .25em; border-radius: 3px; background: color-mix(in oklab, var(--c-acento) 22%, transparent); color: inherit; font-family: var(--f-mono); font-size: .9em; }

/* ---------- Aparición al hacer scroll ---------- */
.js [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: var(--retraso, 0ms); }
.js [data-revelar].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  /* El montaje no se recoloca solo (lo controla portada.js) y el sello no gira */
  .sello__rotulo { animation: none; }
  .cinta__pista { animation: none; }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1080px) {
  .proyectos { grid-template-columns: repeat(2, 1fr); }
}
/* Pie: sin sitio para centrar el menú (con el lema bajo el logo, desde 1180 px), vuelve a la fila que se parte */
@media (max-width: 1180px) {
  .pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; }
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 900px) {
  :root { --cabecera-alto: 70px; }
  .cabecera { backdrop-filter: none; background: var(--c-hondo); }
  .cabecera__logo img, .cabecera.con-sombra .cabecera__logo img { height: 48px; }
  .legal { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal__indice nav { position: static; }
  .legal__indice ul { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; border-left: 0; }
  .legal__indice a { margin: 0; padding: .2rem 0; border-left: 0; border-bottom: 2px solid transparent; }
  .legal__indice a[aria-current] { border-bottom-color: var(--c-acento); }
  .cabecera.con-sombra .cabecera__fila { height: var(--cabecera-alto); }
  .cabecera__boton-menu {
    position: relative; z-index: 2; display: inline-grid; place-items: center; width: 46px; height: 46px; margin-right: -10px;
    border: 0; background: none; color: var(--c-sobre-principal);
  }
  .cabecera__hamburguesa { position: relative; width: 26px; height: 12px; }
  .cabecera__hamburguesa::before, .cabecera__hamburguesa::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
    transition: transform var(--transicion), top var(--transicion);
  }
  .cabecera__hamburguesa::before { top: 0; }
  .cabecera__hamburguesa::after { top: 10px; }
  .menu-abierto .cabecera__hamburguesa::before { top: 5px; transform: rotate(45deg); }
  .menu-abierto .cabecera__hamburguesa::after { top: 5px; transform: rotate(-45deg); }
  .menu {
    position: fixed; inset: var(--cabecera-alto) 0 0 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2rem;
    padding: 2.5rem var(--margen) 3rem;
    background: var(--c-hondo); color: var(--c-sobre-principal); border-top: 1px solid var(--c-oscuro-linea);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--transicion), transform var(--transicion), visibility 0s linear 220ms;
  }
  .menu-abierto { overflow: hidden; }
  .menu-abierto .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu__lista { flex-direction: column; gap: 1.1rem; }
  .menu__enlace { font-size: 2.3rem; letter-spacing: .05em; color: var(--c-sobre-principal); }
  .idiomas { padding-left: 0; border-left: 0; font-size: 1rem; color: var(--c-oscuro-suave); }
  .idiomas__actual { color: var(--c-sobre-principal); }

  /* El montaje va arriba, para que lo primero que se vea sean las fotos; debajo, el texto */
  .hero { --ancho-texto: 100%; }
  .montaje { position: relative; inset: auto; order: 0; height: min(92vw, 30rem); margin: 1.25rem var(--margen) 0; }
  .hero__contenido { order: 1; padding-block: 2rem 2.5rem; }
  .montaje__plano { inset: 2.6rem 0 .8rem; }
  .montaje__eje--y { display: none; }
  .hero__pie { order: 3; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra { padding: 1rem 1rem 1.1rem; }
  .cifra:nth-child(n + 3) { border-top: 1px solid var(--c-oscuro-linea); }
  .cifra:nth-child(n + 3)::before { display: none; }

  .nosotros__cabecera { grid-template-columns: 1fr; }
  .nosotros__visor { min-height: 300px; }
  .nosotros__sello { margin-top: -.5rem; margin-right: -.25rem; }
  .nosotros__pilares { grid-template-columns: 1fr; }
  .sello { width: 112px; }
  .nosotros__texto h2 { font-size: clamp(1.9rem, calc((100cqi - 112px - clamp(1rem, 2vw, 2rem) + .25rem) / var(--titulo-em)), 3rem); }
  .proceso__pasos { grid-template-columns: 1fr; gap: 0; }
  .paso { padding: 0 0 1.75rem 2.25rem; }
  .paso::before, .paso__tramo { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .paso__tramo { left: 6.5px; width: 2px; transform: scaleY(0); transform-origin: top; }
  .paso:last-child::before, .paso:last-child .paso__tramo { display: none; }
  .paso.hecho .paso__tramo, .proceso.en-marcha .paso.activo .paso__tramo { transform: scaleY(1); }

  .cierre__dos { grid-template-columns: 1fr; }
  .cierre__modelo { min-height: 18rem; margin: -1.5rem calc(-1 * var(--margen)) 0; }
  .cierre__modelo iframe { --ancho-nave: 100cqw; left: 0; height: 100cqh; }
  /* Contacto en una columna: nave, datos (que ya no caben en una línea) y formulario */
  .cierre--pagina .cierre__dos { grid-template-rows: none; }
  .cierre--pagina :is(.cierre__modelo, .cierre__datos, .cierre__bloque) { grid-column: auto; grid-row: auto; }
  .cierre__datos { margin: 0 0 1.5rem; justify-content: flex-start; gap: .5rem 1rem; }
  .cierre__datos > li { padding-inline: 0; font-size: .92rem; }
  .cabecera-pagina__lineas { inset: 0; opacity: .18; }
}

@media (max-width: 640px) {
  .formulario__campos { grid-template-columns: 1fr; }
  /* Sello más pequeño, para que el título de «Sobre nosotros» no se parta en cuatro líneas */
  .sello { width: 96px; }
  .nosotros__texto h2 { font-size: min(2rem, 8.2vw); }
  /* Proyectos en dos columnas, en vertical */
  .proyectos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .proyecto { aspect-ratio: 4 / 5; }
  .proyecto::after { background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--c-principal-hondo) 92%, transparent)); }
  .proyecto__info { padding: .85rem .9rem; }
  .proyecto__tipo { gap: .4rem; margin-bottom: .3rem; font-size: .6rem; letter-spacing: .08em; }
  .proyecto__tipo::before { width: .38rem; height: .38rem; }
  .proyecto__titulo { margin-bottom: .2rem; font-size: 1.12rem; line-height: 1.08; }
  .proyecto__meta { font-size: .8rem; }
  .pie__fila { flex-direction: column; align-items: flex-start; gap: .7rem; padding-block: 1.1rem; }
  .pie__contacto { justify-self: auto; grid-template-columns: 1fr; }
  .pie__enlaces { gap: .45rem 1.25rem; }
  .whatsapp-flotante { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .aviso-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .legal__datos { grid-template-columns: 1fr; gap: 0; }
  .legal__datos dd + dt { margin-top: .6rem; }
  .hero__especialidades { grid-template-columns: 1fr; }
}

/* ---------- Servicios y formulario escueto en pantallas medianas, tableta y móvil ---------- */
@media (max-width: 1180px) {
  .regla__lista { display: flex; justify-content: space-between; }
  .regla__nombre { display: none; }
  .servicios__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* La ficha en grande: el modelo arriba y la ficha debajo, que se desplaza */
  .ficha-grande { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
  .ficha-grande__cuerpo { padding: 1.25rem 1.2rem 1.5rem; border-left: 0; border-top: 1px solid var(--ficha-linea); }
  .ficha-grande__botones { top: .6rem; right: .6rem; }
  .ficha-grande__botones button { width: 2.4rem; height: 2.4rem; }
  .servicios__fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La marca de la cabecera, más pequeña, entre el logo y el botón del menú */
  .cabecera__marca, .cabecera.con-sombra .cabecera__marca { gap: .4em; padding-left: .9rem; font-size: .95rem; }
  .cabecera__marca-oficio { letter-spacing: .16em; }
  .cabecera__fila { gap: 1rem; }
}

@media (max-width: 640px) {
  .regla { margin-bottom: .75rem; }
  /* Fichas compactas (como en la iteración 13): el modelo pequeño a la izquierda y la ficha a la derecha */
  .servicios__fichas { grid-template-columns: 1fr; gap: .6rem; }
  .sv-ficha { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
  .sv-ficha__imagen { aspect-ratio: auto; min-height: 9rem; border-radius: max(var(--ficha-radio) - 1px, 0px) 0 0 max(var(--ficha-radio) - 1px, 0px); }
  .sv-ficha:hover, .sv-ficha:focus-within { transform: none; }
  .sv-ficha__cuerpo { gap: .3rem; padding: .8rem .9rem .9rem; }
  .sv-n { font-size: 1.6rem; }
  .sv-titulo { font-size: 1.15rem; }
  .sv-lema { font-size: .92rem; }
  .sv-texto { font-size: .84rem; line-height: 1.38; }
  .sv-lista { font-size: .82rem; }
  .sv-normas { display: none; }
}

@media (max-width: 350px) {
  .cabecera__marca { display: none; }
}