/* PWM Posicionamiento Web Murcia
   Sistema sobrio: blanco, niebla y tinta (azul marino del logo).
   Los cuatro colores del pin solo aparecen en el logo, el pin animado y puntos pequeños
   que identifican cada servicio. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-normal-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --tinta: #0e2747;
  --tinta-2: #3b5373;
  --tinta-3: #5d7290;
  --azul-marca: #2578bc;
  --celeste: #6cc1e6;
  --celeste-claro: #dff1fa;
  --niebla: #f4f6f9;
  --linea: #e1e6ed;
  --blanco: #ffffff;

  --coral: #f0503f;
  --verde: #86c440;
  --rosa: #e8458f;
  --azul: #3a9bdc;
  --coral-claro: var(--niebla);
  --verde-claro: var(--niebla);
  --rosa-claro: var(--niebla);
  --azul-claro: var(--niebla);

  --error: #c2321f;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 77.5rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --bloque: clamp(4.5rem, 9vw, 8rem);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 20px;

  --sombra-s: 0 1px 2px rgb(14 39 71 / 0.08), 0 2px 6px -2px rgb(14 39 71 / 0.1);
  --sombra-m: 0 1px 2px rgb(14 39 71 / 0.08), 0 14px 32px -12px rgb(14 39 71 / 0.28);
  --sombra-l: 0 2px 4px rgb(14 39 71 / 0.06), 0 30px 60px -20px rgb(14 39 71 / 0.38);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--celeste); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #a9c4d8 transparent; }

.sr { 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: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--tinta); color: var(--blanco); border-radius: var(--r-s); transition: top 160ms var(--ease-out); }
.saltar:focus { top: 1rem; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Tipografía ---------- */
.titulo-1, .portada__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 94%;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.022em;
  line-height: 1;
}
.titulo-1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); max-width: 17ch; }
.titulo-2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 95%;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 20ch;
}
.titulo-3 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ---------- Botones y enlaces ---------- */
.boton {
  --boton-fondo: var(--tinta);
  --boton-texto: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.boton:active { transform: scale(0.97); }
.boton .ico { width: 1.15em; height: 1.15em; }
.boton--grande { min-height: 3.25rem; padding: 0.8rem 1.5rem; font-size: 1.0625rem; }
.boton--tinta { --boton-fondo: var(--tinta); --boton-texto: var(--blanco); }
.boton--blanco { --boton-fondo: var(--blanco); --boton-texto: var(--tinta); box-shadow: var(--sombra-s); }
.boton--claro { --boton-fondo: var(--celeste-claro); --boton-texto: var(--tinta); }
.boton--celeste { --boton-fondo: var(--celeste); --boton-texto: var(--tinta); }
.boton--fantasma { --boton-fondo: transparent; --boton-texto: var(--blanco); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
@media (hover: hover) and (pointer: fine) {
  .boton--tinta:hover { --boton-fondo: #183a63; }
  .boton--blanco:hover { box-shadow: var(--sombra-m); }
  .boton--celeste:hover { --boton-fondo: #86cdec; }
  .boton--fantasma:hover { --boton-fondo: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
  .boton .ico:last-child:not(:first-child) { transition: transform 200ms var(--ease-out); }
  .boton:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }
}

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 650;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--celeste);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 200ms ease;
}
.enlace .ico { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .enlace:hover { text-decoration-color: var(--tinta); }
  .enlace:hover .ico { transform: translateX(3px); }
}

.punto { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; background: var(--c, var(--celeste)); }
.punto--coral { --c: var(--coral); }
.punto--verde { --c: var(--verde); }
.punto--rosa { --c: var(--rosa); }
.punto--azul { --c: var(--azul); }

/* ---------- Cabecera ---------- */
.cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  transition: box-shadow 200ms ease;
}
.cab[data-scroll] { box-shadow: 0 1px 0 var(--linea), 0 8px 24px -16px rgb(14 39 71 / 0.25); }
.cab__in { display: flex; align-items: center; gap: 1.25rem; min-height: 4.75rem; }
.cab__logo { display: block; margin-right: auto; padding-block: 0.4rem; }
.cab__logo img { width: 8.5rem; height: auto; }
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: 0.25rem; }
.nav__item { position: relative; }
.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.nav__boton { background: none; border: 0; cursor: pointer; }
.nav__boton .ico { width: 1rem; height: 1rem; transition: transform 200ms var(--ease-out); }
.nav__boton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__enlace[aria-current="page"], .nav__boton[data-actual] { background: #e9edf2; }
@media (hover: hover) and (pointer: fine) { .nav__enlace:hover { background: var(--niebla); } }

.desplegable {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.5rem;
  width: 23rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: var(--blanco);
  box-shadow: 0 0 0 1px rgb(14 39 71 / 0.06), var(--sombra-l);
  transform-origin: 2.5rem top;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s linear 120ms;
}
.desplegable[data-abierto] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 200ms var(--ease-out), visibility 0s;
}
.desplegable__enlace {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.desplegable__enlace .punto { margin-top: 0.35rem; }
.desplegable__enlace strong { display: block; font-weight: 650; }
.desplegable__enlace small { display: block; color: var(--tinta-2); font-size: 0.875rem; line-height: 1.4; }
.desplegable__enlace:hover, .desplegable__enlace[aria-current="page"] { background: var(--niebla); }

.cab__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-radius: 999px;
}
.cab__tel span { display: none; }
.cab__cta { display: none; }
.cab__menu {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--niebla);
  cursor: pointer;
}
.cab__menu-ico { display: grid; }
.cab__menu-ico .ico { grid-area: 1 / 1; width: 1.4rem; height: 1.4rem; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1); }
.cab__menu .ico--cerrar { opacity: 0; transform: scale(0.25); filter: blur(4px); }
.cab__menu[aria-expanded="true"] .ico--abrir { opacity: 0; transform: scale(0.25); filter: blur(4px); }
.cab__menu[aria-expanded="true"] .ico--cerrar { opacity: 1; transform: none; filter: none; }

.movil {
  position: fixed;
  inset: 4.75rem 0 0 0;
  overflow-y: auto;
  background: var(--blanco);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 240ms var(--ease-cajon), visibility 0s linear 240ms;
}
.movil[data-abierto] { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 320ms var(--ease-cajon), visibility 0s; }
.movil__in { display: grid; gap: 1.75rem; padding-block: 1.5rem 2.5rem; }
.movil__serv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.movil__serv a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-m);
  background: var(--niebla);
  font-weight: 650;
  text-decoration: none;
  line-height: 1.2;
}
.movil__lista a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.movil__lista a[aria-current="page"] { color: var(--azul-marca); }
.movil__contacto { display: grid; gap: 0.6rem; }

@media (min-width: 40em) {
  .cab__tel span { display: inline; }
  .cab__cta { display: inline-flex; }
}
@media (min-width: 64em) {
  .nav { display: block; }
  .cab__menu, .movil { display: none; }
  .cab__logo { margin-right: 1rem; }
  .cab__logo img { width: 9.75rem; }
  .nav { margin-right: auto; }
}

/* ---------- Ventana de navegador ---------- */
.ventana {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--blanco);
  box-shadow: var(--sombra-m);
}
.ventana__barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 2rem;
  padding-inline: 0.75rem;
  background: #eef2f6;
  color: var(--tinta-3);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.ventana__barra .ico { width: 0.8rem; height: 0.8rem; }
.ventana__barra span { overflow: hidden; text-overflow: ellipsis; }
.ventana img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  outline: 1px solid rgb(0 0 0 / 0.1);
  outline-offset: -1px;
}

.pieza { display: block; text-decoration: none; }
.pieza .ventana { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.pieza__nombre {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.pieza__nombre .ico { width: 1rem; height: 1rem; color: var(--tinta-3); transition: transform 200ms var(--ease-out), color 200ms ease; }
.pieza__tipo { display: block; margin-top: 0.15rem; color: var(--tinta-2); font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .pieza:hover .ventana { transform: translateY(-4px); box-shadow: var(--sombra-l); }
  .pieza:hover .pieza__nombre .ico { transform: translate(2px, -2px); color: var(--tinta); }
}

/* ---------- Franja de servicios: barra blanca, un punto de color por servicio ---------- */
.franja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: 0 0 0 1px var(--linea), var(--sombra-m);
}
.franja__seg {
  --c: var(--celeste);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: -1px -1px 0 var(--linea);
  transition: background-color 200ms ease;
}
.franja__seg::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--c); flex: none; }
.franja__seg--coral { --c: var(--coral); }
.franja__seg--verde { --c: var(--verde); }
.franja__seg--rosa { --c: var(--rosa); }
.franja__seg--azul { --c: var(--azul); }
.franja__seg .ico { width: 1.2rem; height: 1.2rem; margin-left: auto; color: var(--tinta-3); transition: transform 220ms var(--ease-out), color 200ms ease; }
.franja__seg[aria-current="page"] { background: var(--niebla); }
@media (max-width: 51.99em) { .franja__seg .ico { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .franja__seg:hover { background: var(--niebla); }
  .franja__seg:hover .ico { transform: translateX(4px); color: var(--tinta); }
}
@media (min-width: 52em) {
  .franja { grid-template-columns: repeat(4, 1fr); }
  .franja__seg { min-height: 5.25rem; padding-inline: 1.5rem; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  isolation: isolate;
  background: var(--tinta);
  color: var(--blanco);
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
.portada__orbita {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 0.1);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.portada__in { display: grid; gap: 3rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.portada__titulo { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.portada__titulo span { display: block; }
.portada__lead { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: #c3d3e4; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.portada__whatsapp { margin-top: 1.1rem; }
.portada__whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.3em;
  color: #dbe6f1;
}
.portada__ventanas { position: relative; min-height: 19rem; }
.portada__ventanas .ventana { position: absolute; width: 78%; box-shadow: var(--sombra-l); }
.ventana--1 { left: 0; bottom: 0; z-index: 3; }
.ventana--2 { right: 0; top: 0; z-index: 2; }
.ventana--3 { display: none; }
.portada .franja { position: relative; z-index: 4; margin-bottom: -2.75rem; }

@media (min-width: 40em) {
  .portada__ventanas { min-height: 26rem; }
}
@media (min-width: 64em) {
  .portada__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  .portada__ventanas { min-height: 34rem; }
  .portada__ventanas .ventana { width: 82%; }
  .ventana--1 { left: 0; bottom: 1rem; }
  .ventana--2 { right: 0; top: 5.5rem; }
  .ventana--3 { display: block; right: 9%; top: 0; z-index: 1; width: 64% !important; opacity: 0.9; }
}

/* ---------- Bloques ---------- */
.bloque { padding-block: var(--bloque); }
.bloque--niebla { background: var(--niebla); }
.bloque--corto { padding-block: clamp(3rem, 6vw, 4.5rem); }
.bloque--pegado { padding-top: clamp(2.5rem, 5vw, 4rem); }
.p-inicio .servicios { padding-top: calc(var(--bloque) + 2.75rem); }

.cabeza { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cabeza__texto { max-width: 38rem; color: var(--tinta-2); font-size: 1.125rem; }
.cabeza--fila { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 52em) {
  .cabeza { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 3rem; }
  .cabeza--fila { grid-template-columns: 1fr auto; }
  .cabeza:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }
}

/* Servicios con el pin animado */
.servicios__in { display: grid; gap: 2.5rem; }
.servicios__intro { display: grid; gap: 1rem; align-content: start; }
/* El vídeo es cuadrado y el pin ocupa su franja central: se recorta a esa franja
   y se centra en la columna. */
.pin-video { --alto: 15rem; width: calc(var(--alto) * 0.56); height: var(--alto); margin: calc(var(--alto) * -0.02) auto 0; overflow: hidden; }
.pin-video video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.035) saturate(1.06); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
@media (min-width: 64em) {
  .servicios__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
  .servicios__intro { position: sticky; top: 7rem; }
  .pin-video { --alto: 19rem; }
  .servicios .fila__enlace { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca nombre ir" "marca texto ir"; column-gap: 1.5rem; }
  .servicios .fila__texto { margin-top: 0.35rem; }
}

/* Filas de servicios */
.filas { border-top: 1px solid var(--linea); }
.fila { border-bottom: 1px solid var(--linea); }
.fila--coral { --c: var(--coral); --c-claro: var(--coral-claro); }
.fila--verde { --c: var(--verde); --c-claro: var(--verde-claro); }
.fila--rosa { --c: var(--rosa); --c-claro: var(--rosa-claro); }
.fila--azul { --c: var(--azul); --c-claro: var(--azul-claro); }
.fila__enlace {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca nombre ir" "marca texto ir";
  column-gap: 1rem;
  align-items: center;
  padding: 1.5rem 0.25rem;
  text-decoration: none;
  transition: background-color 220ms ease;
}
.fila__marca { grid-area: marca; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--c); }
.fila__nombre {
  grid-area: nombre;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 95%;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  transition: transform 260ms var(--ease-out);
}
.fila__texto { grid-area: texto; margin-top: 0.35rem; color: var(--tinta-2); }
.fila__ir {
  grid-area: ir;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--niebla);
  transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--ease-out);
}
.fila__ir .ico { width: 1.3rem; height: 1.3rem; }
@media (min-width: 52em) {
  .fila__enlace {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "marca nombre texto ir";
    column-gap: 2rem;
    padding: 2rem 1rem;
  }
  .fila__texto { margin-top: 0; font-size: 1.125rem; }
}
@media (hover: hover) and (pointer: fine) {
  .fila__enlace:hover { background: var(--c-claro); }
  .fila__enlace:hover .fila__nombre { transform: translateX(6px); }
  .fila__enlace:hover .fila__ir { background: var(--tinta); color: var(--blanco); transform: translateX(-4px); }
}

/* Carril horizontal de trabajos */
.cabeza__acciones { display: flex; align-items: center; gap: 1.25rem; }
.carril__botones { display: none; gap: 0.5rem; }
.carril__boton {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--niebla);
  box-shadow: inset 0 0 0 1px var(--linea);
  cursor: pointer;
  transition: background-color 160ms ease, opacity 160ms ease, transform 160ms var(--ease-out);
}
.carril__boton:active { transform: scale(0.96); }
.carril__boton:disabled { opacity: 0.4; cursor: default; }
.carril__boton--atras .ico { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .carril__botones { display: flex; }
  .carril__boton:not(:disabled):hover { background: #e9edf2; }
}
.carril__lista {
  --hueco: max(var(--margen), calc((100vw - var(--ancho)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 27rem);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hueco);
  padding: 0.5rem var(--hueco) 1.5rem;
  scrollbar-width: thin;
}
.carril__item { scroll-snap-align: start; }
.carril__lista:focus-visible { outline-offset: -3px; }

/* Casas rurales */
.rural { background: var(--verde-claro); }
.rural__in { display: grid; gap: 3rem; }
.rural__texto { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.rural__texto p { max-width: 34rem; color: #2f4a33; font-size: 1.125rem; }
.rural__texto p { color: var(--tinta-2); }
.rural__lista { display: grid; gap: 2rem; }
@media (min-width: 40em) {
  .rural__lista { grid-template-columns: 1fr 1fr; }
  .rural__lista li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .rural__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
  .rural__texto { position: sticky; top: 7rem; }
}

/* Pasos */
.pasos { background: var(--blanco); border-top: 1px solid var(--linea); }
.pasos__lista { display: grid; gap: 2.5rem; counter-reset: paso; }
.paso { counter-increment: paso; display: grid; gap: 0.6rem; align-content: start; }
.paso::before {
  content: "0" counter(paso);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  color: var(--tinta);
}
.paso__titulo { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; }
.paso p { color: var(--tinta-2); }
@media (min-width: 40em) { .pasos__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) {
  .pasos__lista { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .paso { padding-top: 1.5rem; border-top: 1px solid var(--linea); }
}

/* Casa */
.casa__in { display: grid; gap: 2rem; }
.casa__texto { display: grid; gap: 1.5rem; justify-items: start; max-width: 40rem; }
.casa__texto > p { font-size: 1.1875rem; color: var(--tinta-2); }
.lista-ok { display: grid; gap: 0.85rem; }
.lista-ok li { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 500; }
.lista-ok .ico { margin-top: 0.15rem; color: var(--tinta); stroke-width: 2.25; }
@media (min-width: 64em) { .casa__in { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Llamada final */
.llamada { background: var(--tinta); color: var(--blanco); padding-block: var(--bloque); overflow: hidden; }
.llamada__in { position: relative; }
.llamada__pin { display: none; }
@media (min-width: 80em) {
  .llamada__pin { display: block; position: absolute; right: var(--margen); top: -0.5rem; width: 14rem; rotate: 10deg; pointer-events: none; }
}
.llamada__in { display: grid; gap: 1.5rem; }
.llamada__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 94%;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.022em;
  line-height: 1;
}
.llamada__texto { max-width: 38rem; color: #c3d3e4; font-size: 1.125rem; }
.llamada__numeros { display: grid; gap: 1.25rem; margin-top: 1rem; }
.llamada__num { display: grid; gap: 0.15rem; text-decoration: none; justify-self: start; }
.llamada__etq { color: var(--celeste); font-weight: 600; font-size: 0.95rem; }
.llamada__cifra {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .llamada__num:hover .llamada__cifra { color: var(--celeste); } }
.llamada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1rem; }
.enlace-claro { color: var(--blanco); font-weight: 600; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: 0.3em; }
@media (min-width: 52em) { .llamada__numeros { grid-template-columns: auto auto; justify-content: start; gap: 4rem; } }

/* Pie */
.pie { background: var(--niebla); padding-top: clamp(3.5rem, 6vw, 5rem); font-size: 0.975rem; }
.pie__in { display: grid; gap: 2.5rem; }
.pie__marca { display: grid; gap: 1rem; justify-items: start; max-width: 22rem; }
.pie__marca img { width: 9rem; }
.pie__marca p { color: var(--tinta-2); }
.pie__redes { display: flex; gap: 0.25rem; margin-left: -0.6rem; }
.pie__redes a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; transition: background-color 160ms ease; }
.pie__redes a:hover { background: #e9edf2; }
.pie__titulo { margin-bottom: 0.85rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.pie__col ul { display: grid; gap: 0.15rem; }
.pie__col li a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.25rem; text-decoration: none; }
.pie__col li a:hover { text-decoration: underline; }
.pie__col address { line-height: 1.9; color: var(--tinta-2); }
.pie__col address a { text-decoration: none; }
.pie__col address a:hover { text-decoration: underline; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-3);
  font-size: 0.9rem;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.pie__legal a { text-decoration: none; }
.pie__legal a:hover { text-decoration: underline; }
@media (min-width: 52em) { .pie__in { grid-template-columns: 1.4fr 1fr 0.8fr 1.3fr; gap: 2rem; } }

/* ---------- Cabecera de páginas interiores ---------- */
.cabecera-pag {
  --fondo: var(--niebla);
  background: var(--fondo);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.cabecera-pag--coral { --fondo: var(--coral-claro); --c: var(--coral); }
.cabecera-pag--verde { --fondo: var(--verde-claro); --c: var(--verde); }
.cabecera-pag--rosa { --fondo: var(--rosa-claro); --c: var(--rosa); }
.cabecera-pag--azul { --fondo: var(--azul-claro); --c: var(--azul); }
.cabecera-pag__in { display: grid; gap: 3rem; align-items: center; }
.cabecera-pag__texto { display: grid; justify-items: start; }
.cabecera-pag__lead { margin-top: 1.25rem; max-width: 38rem; color: var(--tinta-2); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.migas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; color: var(--tinta-3); font-size: 0.95rem; }
.migas a { color: var(--tinta-2); }
.cabecera-pag--simple .titulo-1 { max-width: 22ch; }
@media (min-width: 64em) { .cabecera-pag__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }

/* Visual: dispositivos */
.dispositivos { position: relative; padding: 0 12% 3.5rem 0; }
.dispositivos__pc { box-shadow: var(--sombra-l); }
.movil-marco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  margin: 0;
  padding: 6px;
  border-radius: 26px;
  background: var(--tinta);
  box-shadow: var(--sombra-l);
}
.movil-marco img { border-radius: 20px; aspect-ratio: 520 / 885; object-fit: cover; object-position: top; }

/* Visual: buscador */
.buscador {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: var(--sombra-l);
}
.buscador__caja {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--linea), var(--sombra-s);
  color: var(--tinta);
  font-weight: 500;
}
.buscador__caja .ico { color: var(--tinta-3); }
.buscador__resultado { display: grid; gap: 0.3rem; padding: 0.25rem 0.5rem; }
.buscador__resultado--activo {
  padding: 1rem;
  border-radius: var(--r-m);
  background: var(--verde-claro);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.buscador__url { color: var(--tinta-2); font-size: 0.85rem; }
.buscador__titulo { color: #1a4fa0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.buscador__desc { color: var(--tinta-2); font-size: 0.925rem; line-height: 1.45; }
.buscador__linea { display: block; width: 45%; height: 0.6rem; border-radius: 99px; background: #e6edf3; }
.buscador__linea--larga { width: 90%; }
.buscador__nota { color: var(--tinta-3); font-size: 0.8rem; }

/* Visual: redes */
.redes-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.redes-visual__item {
  display: grid;
  gap: 1.25rem;
  align-content: space-between;
  min-height: 9rem;
  padding: 1.25rem;
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: var(--sombra-m);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}
.redes-visual__item .ico { width: 2.25rem; height: 2.25rem; color: var(--tinta); }
.redes-visual__item:nth-child(even) { transform: translateY(1.5rem); }

/* Visual: ficha de hosting */
.ficha {
  margin: 0;
  padding: 0.5rem clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: var(--sombra-l);
}
.ficha div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { color: var(--tinta-3); font-size: 0.9rem; font-weight: 600; padding-top: 0.15rem; }
.ficha dd { margin: 0; font-family: var(--display); font-weight: 650; font-size: 1.2rem; letter-spacing: -0.01em; }

/* Qué incluye */
.incluye { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.incluye--coral { --c: var(--coral); }
.incluye--verde { --c: var(--verde); }
.incluye--rosa { --c: var(--rosa); }
.incluye--azul { --c: var(--azul); }
.incluye__item { display: grid; gap: 0.4rem; padding-block: 1.5rem; border-bottom: 1px solid var(--linea); }
.incluye__titulo { display: flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; }
.incluye__titulo::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--c); flex: none; }
.incluye__item p { color: var(--tinta-2); padding-left: 1.4rem; }
@media (min-width: 52em) {
  .incluye { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .incluye__item { padding-block: 2rem; }
}

/* Rejilla de trabajos */
.rejilla-trabajos { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 40em) { .rejilla-trabajos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .rejilla-trabajos { grid-template-columns: repeat(3, 1fr); } }
.rejilla-trabajos [hidden] { display: none; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--niebla);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.filtro:active { transform: scale(0.97); }
.filtro__n { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); box-shadow: none; }
.filtro[aria-pressed="true"] .filtro__n { color: var(--celeste); }
@media (hover: hover) and (pointer: fine) { .filtro[aria-pressed="false"]:hover { background: #e9edf2; } }

::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }

/* Preguntas */
.preguntas { display: grid; gap: 2rem; }
.preguntas__lista { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 3rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__signo { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--niebla); }
.pregunta__signo::before, .pregunta__signo::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.85rem;
  height: 2px;
  margin: -1px 0 0 -0.425rem;
  border-radius: 2px;
  background: var(--tinta);
  transition: transform 220ms var(--ease-out);
}
.pregunta__signo::after { transform: rotate(90deg); }
.pregunta[open] .pregunta__signo::after { transform: rotate(0deg); }
.pregunta__resp { padding: 0 3.5rem 1.5rem 0; color: var(--tinta-2); }
.pregunta__resp a { color: var(--tinta); }
@supports (interpolate-size: allow-keywords) {
  .pregunta { interpolate-size: allow-keywords; }
  .pregunta::details-content { height: 0; overflow: clip; opacity: 0; transition: height 260ms var(--ease-out), opacity 200ms ease, content-visibility 260ms allow-discrete; }
  .pregunta[open]::details-content { height: auto; opacity: 1; }
}
@media (min-width: 64em) { .preguntas { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }

/* Otros servicios */
.franja--pagina { margin-top: 1.5rem; }

/* ---------- Empresa ---------- */
.texto-largo { display: grid; gap: 3rem; }
.texto-largo__col { display: grid; gap: 1.1rem; max-width: 40rem; font-size: 1.125rem; }
.texto-largo__col .titulo-3 { margin-top: 1.5rem; }
.texto-largo__col .titulo-3:first-child { margin-top: 0; }
.texto-largo__col p { color: var(--tinta-2); }
.tarjeta-datos {
  align-self: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-l);
  background: var(--niebla);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.tarjeta-datos__nombre { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.015em; }
.tarjeta-datos dl { margin: 1rem 0 0; display: grid; }
.tarjeta-datos div { padding-block: 0.85rem; border-top: 1px solid var(--linea); }
.tarjeta-datos dt { font-size: 0.875rem; font-weight: 600; color: var(--tinta-3); }
.tarjeta-datos dd { margin: 0.15rem 0 0; font-weight: 600; }
.tarjeta-datos a { text-decoration-color: rgb(14 39 71 / 0.35); }
@media (min-width: 64em) {
  .texto-largo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 5rem; }
  .tarjeta-datos { position: sticky; top: 7rem; }
}

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 3rem; padding-bottom: var(--bloque); }
.contacto__vias { display: grid; gap: 0.75rem; align-content: start; }
.via {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-l);
  background: var(--niebla);
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.via:active { transform: scale(0.98); }
.via > .ico { width: 1.5rem; height: 1.5rem; color: var(--tinta); }
.via__etq { display: block; color: var(--tinta-3); font-size: 0.875rem; font-weight: 600; }
.via__dato { display: block; font-weight: 650; font-size: 1.1rem; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .via:hover { background: #e9edf2; } }

.formulario { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 24px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), var(--sombra-m); }
.campo { display: grid; gap: 0.4rem; align-content: start; }
.campo label { font-weight: 600; }
.opcional { color: var(--tinta-3); font-weight: 400; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #b9cbdb;
  border-radius: var(--r-m);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  caret-color: var(--azul-marca);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul-marca); box-shadow: 0 0 0 4px rgb(108 193 230 / 0.45); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { display: none; color: var(--error); font-size: 0.925rem; font-weight: 500; }
.campo[data-invalido] .campo__error { display: block; }
.campo-doble { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .campo-doble { grid-template-columns: 1fr 1fr; } }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.codigo { display: flex; align-items: center; gap: 0.5rem; }
.codigo img { width: 90px; height: 40px; border-radius: var(--r-s); outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px; }
.codigo input { max-width: 9rem; }
.codigo__nuevo { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 0; border-radius: 999px; background: var(--niebla); cursor: pointer; }
.codigo__nuevo .ico { width: 1.1rem; height: 1.1rem; }
.campo--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.campo--check input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--tinta); cursor: pointer; }
.campo--check label { font-weight: 500; cursor: pointer; }
.campo--check .campo__error { grid-column: 2; }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formulario__enviar { position: relative; }
.enviar__carga { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 160ms ease; }
.enviar__carga::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 99px; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: var(--blanco); animation: girar 0.7s linear infinite; }
.enviar__texto { transition: opacity 160ms ease, filter 160ms ease; }
.formulario[data-enviando] .enviar__texto { opacity: 0; filter: blur(2px); }
.formulario[data-enviando] .enviar__carga { opacity: 1; }
.formulario[data-enviando] .formulario__enviar { pointer-events: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.formulario__estado { font-weight: 600; }
.formulario__estado[data-tipo="ok"] { color: #2e6b12; }
.formulario__estado[data-tipo="error"] { color: var(--error); }
.formulario__hecho {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.5rem;
  border-radius: var(--r-l);
  background: var(--verde-claro);
}
.formulario__hecho .titulo-3 { display: flex; align-items: center; gap: 0.6rem; }
.formulario__hecho .ico { color: #3f7a1a; stroke-width: 2.5; }
.rgpd { color: var(--tinta-3); font-size: 0.8125rem; line-height: 1.5; }
.rgpd a { color: var(--tinta-2); }
@media (min-width: 64em) { .contacto { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 4rem; } .contacto__vias { position: sticky; top: 7rem; } }

/* ---------- Legal ---------- */
.legal h2 { margin: 2.5rem 0 0.75rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--tinta); }
.legal h3 { margin: 1.75rem 0 0.5rem; font-family: var(--display); font-weight: 650; font-size: 1.2rem; color: var(--tinta); }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--tinta); }
.legal__fecha { color: var(--tinta-3); font-size: 0.95rem; }
.datos-legales { display: grid; margin: 0 0 1.25rem; border-top: 1px solid var(--linea); }
.datos-legales div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--linea); }
.datos-legales dt { color: var(--tinta-3); font-weight: 600; }
.datos-legales dd { margin: 0; color: var(--tinta); }
@media (max-width: 40em) { .datos-legales div { grid-template-columns: 1fr; gap: 0.1rem; } }
.legal__tabla { overflow-x: auto; }
.legal th { padding: 0.75rem; text-align: left; background: var(--niebla); color: var(--tinta); font-size: 0.9rem; }
.legal { max-width: 52rem; padding-bottom: var(--bloque); color: var(--tinta-2); }
.legal h4 { margin: 0 0 0.5rem; font-family: var(--display); font-size: 1.35rem; color: var(--tinta); }
.legal hr { border: 0; border-top: 1px solid var(--linea); margin: 0 0 1rem; }
.legal p { margin: 0 0 1.25rem; text-align: left !important; }
.legal strong { color: var(--tinta); }
.legal center { display: block; overflow-x: auto; }
.legal table { width: 100% !important; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 0.95rem; }
.legal td { padding: 0.75rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal tr[bgcolor] { background: var(--niebla) !important; }
.legal td p { margin: 0; }

.error-404 .franja { margin-top: 3rem; }

/* ---------- Movimiento ---------- */
/* Entrada única al cargar: titular, texto y ventanas de la portada. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-entrada] { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  .js .portada__titulo[data-entrada] { opacity: 1; transform: none; filter: none; }
  .js .portada__titulo span { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  .js .portada__ventanas .ventana { opacity: 0; translate: 0 2.5rem; rotate: 2deg; }
  .js .ventana--3 { rotate: -2deg; }

  .listo [data-entrada], .listo .portada__titulo span {
    opacity: 1; transform: none; filter: none;
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), filter 600ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .listo .portada__ventanas .ventana {
    opacity: 1; translate: 0 0; rotate: 0deg;
    transition: opacity 500ms ease, translate 900ms var(--ease-out), rotate 900ms var(--ease-out), transform 260ms var(--ease-out);
    transition-delay: calc(240ms + var(--i, 0) * 110ms);
  }
  .listo .ventana--3 { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-entrada], .js .portada__ventanas .ventana { opacity: 0; }
  .listo [data-entrada], .listo .portada__ventanas .ventana { opacity: 1; transition: opacity 300ms ease; }
  .listo .ventana--3 { opacity: 0.9; }
  .desplegable, .movil, .cab__menu-ico .ico { transition-duration: 0s !important; }
  ::view-transition-group(*) { animation: none; }
}