/* ============================================================
   ARQLON 2026 — hoja única
   Sin framework. Orden: tokens → base → utilidades → bloques.
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */

:root {
  /* Paleta tomada del logotipo: negro, blanco y el naranja de marca.
     El naranja #F16905 es el muestreado del archivo que entregó el despacho. */
  --tinta:      #0b0b0b;
  --tinta-rgb:  11, 11, 11;
  --carbon:     #141414;
  --grafito:    #1f1f1f;
  --humo:       #6e6e6e;
  --arena:      #c8c8c8;
  --arena-rgb:  200, 200, 200;
  /* Gris de los numerales grandes sobre fondo claro. --arena (#c8c8c8) los
     dejaba en 1.6:1, ilegibles; este da 3.05:1, el minimo AA de texto grande,
     y sigue leyendose como dato secundario. */
  --humo-tenue: #8f8f8f;
  --cal:        #f2f2f2;
  --cal-rgb:    242, 242, 242;
  --cal-suave:  #fafafa;
  --blanco:     #ffffff;

  /* Acento. Tres tonos del mismo matiz (25 grados) para no perder contraste:
     --naranja        el de marca; sobre tinta da 6.34:1
     --naranja-claro  hover sobre fondo oscuro
     --naranja-hondo  texto pequeno sobre fondo claro; 5.09:1 sobre blanco (AA) */
  --naranja:       #f16905;
  --naranja-rgb:   241, 105, 5;
  --naranja-claro: #ff8c38;
  --naranja-hondo: #b84e00;

  /* El error no es un color de marca a proposito: no debe leerse como acento */
  --error-rgb:  179, 38, 30;

  --borde:      rgba(var(--tinta-rgb), .12);
  --borde-claro:rgba(242, 242, 242, .16);

  /* Tipografía */
  --sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Escala fluida: de móvil chico a 1440 */
  --t-xs:   clamp(.75rem, .72rem + .12vw, .8125rem);
  --t-sm:   clamp(.8125rem, .78rem + .16vw, .875rem);
  --t-base: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --t-2xl:  clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-3xl:  clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);

  /* Ritmo */
  --gap:    clamp(1rem, .8rem + .8vw, 1.75rem);
  --sec-y:  clamp(4rem, 3rem + 5vw, 8rem);
  --radio:  4px;
  --radio-lg: 8px;

  /* Movimiento */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --ease-io:cubic-bezier(.65, 0, .35, 1);
  --rapido: .22s;
  --medio:  .45s;
  --lento:  .9s;

  --ancho:  1280px;
  --ancho-estrecho: 780px;
  --cabecera-alto: 82px;
}

/* ── 2. Reset y base ───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera-alto) + 20px);
}

body {
  margin: 0;
  background: var(--cal-suave);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--naranja); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-solo {
  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; top: -100px; left: 12px; z-index: 999;
  padding: .7rem 1.2rem; background: var(--tinta); color: var(--cal);
  border-radius: var(--radio); font-size: var(--t-sm); font-weight: 600;
  transition: top var(--rapido) var(--ease);
}
.saltar:focus { top: 12px; }

/* ── 3. Utilidades ─────────────────────────────────────────── */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
@media (min-width: 700px) { .contenedor { width: min(100% - 4rem, var(--ancho)); } }

.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.seccion { padding-block: var(--sec-y); }

.seccion--oscura {
  background: var(--tinta);
  color: var(--cal);
}
.seccion--oscura .seccion__texto,
.seccion--oscura .ficha__resumen { color: var(--arena); }

/* ── Superficies oscuras ───────────────────────────────────────
   Estas secciones invierten el fondo, asi que tres tokens cambian de
   signo dentro de ellas. Redefinirlos aqui evita duplicar una regla por
   cada componente que caiga dentro:

   --humo          gris de apoyo: #6e6e6e cumple AA sobre claro pero da
                   3.6:1 sobre negro; #8f8f8f da 5.8:1
   --naranja-hondo el acento de texto; el tono hondo solo sirve sobre
                   fondo claro, sobre negro toca el claro
   --linea-*       los dos tonos del boton de linea                      */
.barra-top,
.menu-movil,
.hero,
.cifras,
.vr,
.seccion--oscura,
.cierre,
.interno,
.pie,
.valores li {
  --humo: #8f8f8f;
  --naranja-hondo: var(--naranja-claro);
  --linea-txt: var(--cal);
  --linea-inv: var(--tinta);
  --linea-borde: var(--borde-claro);
}

/* Antetítulo con línea */
.ante {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--naranja-hondo);
}
.ante--claro { color: var(--naranja-claro); }
.ante__linea {
  width: 34px; height: 1px; flex: none;
  background: currentColor; opacity: .6;
}

.seccion__cabeza { max-width: 46rem; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.6rem); }
.seccion__titulo { font-size: var(--t-2xl); }
.seccion__texto {
  margin-top: 1.2rem;
  font-size: var(--t-md);
  color: var(--humo);
  line-height: 1.62;
}
.seccion__pie {
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm); color: var(--humo);
}
.seccion__pie a { color: var(--naranja-hondo); font-weight: 600; border-bottom: 1px solid currentColor; }

.ico { flex: none; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: var(--radio);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: background var(--rapido) var(--ease),
              color var(--rapido) var(--ease),
              border-color var(--rapido) var(--ease),
              transform var(--rapido) var(--ease);
  will-change: transform;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton .ico { transition: transform var(--rapido) var(--ease); }
.boton:hover .ico--flecha { transform: translateX(4px); }

.boton--solido { background: var(--naranja); color: var(--tinta); }
.boton--solido:hover { background: var(--naranja-claro); }

/* El boton de linea se dibuja con el color del texto del fondo donde cae.
   Antes era siempre --tinta y desaparecia dentro de las secciones oscuras
   (tinta sobre tinta, 1:1). Ahora los dos tonos son tokens que las
   superficies oscuras invierten mas abajo. */
.boton--linea {
  border-color: var(--linea-borde, var(--borde));
  color: var(--linea-txt, var(--tinta));
}
.boton--linea:hover {
  border-color: var(--linea-txt, var(--tinta));
  background: var(--linea-txt, var(--tinta));
  color: var(--linea-inv, var(--cal));
}

.boton--claro { border-color: var(--borde-claro); color: var(--cal); }
.boton--claro:hover { background: var(--cal); color: var(--tinta); border-color: var(--cal); }

.boton--fantasma {
  border-color: rgba(255,255,255,.4); color: #fff;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.07);
}
.boton--fantasma:hover { background: #fff; color: var(--tinta); border-color: #fff; }


.boton--sm { padding: .68rem 1.15rem; font-size: var(--t-xs); }
.boton--grande { padding: 1.1rem 2rem; font-size: var(--t-base); }
.boton--ancho { width: 100%; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--naranja-hondo);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.enlace-flecha .ico { transition: transform var(--rapido) var(--ease); }
.enlace-flecha:hover .ico { transform: translateX(4px); }

/* ── 4. Animación al hacer scroll ──────────────────────────── */

[data-motion] {
  opacity: 0;
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
  will-change: opacity, transform;
}
[data-motion="subir"]    { transform: translate3d(0, 34px, 0); }
[data-motion="izquierda"]{ transform: translate3d(-40px, 0, 0); }
[data-motion="derecha"]  { transform: translate3d(40px, 0, 0); }

[data-motion].es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 5. Barra superior ─────────────────────────────────────── */

.barra-top {
  background: var(--tinta);
  color: var(--arena);
  font-size: var(--t-xs);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.barra-top__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px;
}
.barra-top__claim {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; letter-spacing: .01em;
}
.barra-top__claim .ico { color: var(--naranja); }
.barra-top__acciones { display: flex; align-items: center; gap: .35rem; }
/* Redes en la barra superior. Octubre de 2026: el despacho las pidió aquí,
   además del pie. */
.barra-top__redes {
  display: flex; align-items: center; gap: .15rem;
  margin: 0 .4rem 0 0; padding: 0; list-style: none;
}
.barra-top__redes a {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--arena);
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.barra-top__redes a:hover { background: var(--naranja); color: var(--tinta); }
@media (max-width: 720px) { .barra-top__redes { display: none; } }

.barra-top__enlace {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: var(--radio);
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.barra-top__enlace:hover { color: var(--blanco); background: rgba(255,255,255,.07); }

.barra-top__wa {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; margin-left: .35rem;
  border-radius: var(--radio);
  background: var(--naranja); color: var(--tinta); font-weight: 700;
  transition: background var(--rapido) var(--ease);
}
.barra-top__wa:hover { background: var(--naranja-claro); }

@media (max-width: 900px) {
  .barra-top__claim span { display: none; }
  .barra-top__enlace--oculto-movil { display: none; }
}

/* ── 6. Cabecera ───────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 250, .88);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--medio) var(--ease), background var(--medio) var(--ease);
}
.cabecera.es-fija { box-shadow: 0 10px 40px -24px rgba(var(--tinta-rgb),.5); }

.cabecera__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--cabecera-alto);
}

.marca { display: flex; align-items: center; margin-right: auto; }
/* El alto manda y el ancho se deduce: el logotipo es un bloque horizontal
   (663x240) y recortarlo o deformarlo rompe el monograma. */
.marca__logo,
.marca .custom-logo {
  display: block;
  height: 52px; width: auto;
  max-width: min(58vw, 260px);
  object-fit: contain;
}
@media (max-width: 600px) {
  .marca__logo,
  .marca .custom-logo { height: 40px; }
}
.custom-logo { max-height: 52px; width: auto; }

.nav { display: none; }
@media (min-width: 1100px) { .nav { display: block; } }

.nav__lista { display: flex; align-items: center; gap: .2rem; }

.nav__item > a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .85rem; border-radius: var(--radio);
  font-size: var(--t-sm); font-weight: 500;
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.nav__item > a:hover { color: var(--naranja-hondo); background: rgba(var(--tinta-rgb),.045); }

.nav__chevron {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition: transform var(--rapido) var(--ease);
}
.nav__item--mega:hover .nav__chevron,
.nav__item--mega.es-abierto .nav__chevron { transform: rotate(-135deg) translate(-2px,-2px); }

/* Menú visual */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cal-suave);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 30px 60px -30px rgba(var(--tinta-rgb),.45);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--medio) var(--ease),
              transform var(--medio) var(--ease),
              visibility var(--medio);
  padding-block: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.nav__item--mega.es-abierto .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.mega__inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,2.1fr); gap: clamp(2rem,1.5rem+2vw,3.5rem); }
.mega__inner--dos { grid-template-columns: minmax(0,.9fr) minmax(0,2fr); }

.mega__intro h2 { font-size: var(--t-xl); margin-bottom: .9rem; }
.mega__intro p { font-size: var(--t-sm); color: var(--humo); margin-bottom: 1.3rem; }

.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.mega__grid a { display: block; }
.mega__foto {
  display: block; overflow: hidden; border-radius: var(--radio);
  aspect-ratio: 16/10; margin-bottom: .8rem;
  background: var(--arena);
}
.mega__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--lento) var(--ease), filter var(--medio) var(--ease);
  filter: grayscale(.35);
}
.mega__grid a:hover .mega__foto img { transform: scale(1.06); filter: grayscale(0); }
.mega__texto strong { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: .25rem; }
.mega__texto em {
  display: block; font-style: normal;
  font-size: var(--t-xs); color: var(--humo); line-height: 1.5;
}

.mega__columnas { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 2.5rem; }
.mega__col h3 {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja-hondo); margin-bottom: 1rem;
}
.mega__lista li + li { margin-top: .1rem; }
.mega__lista--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.mega__lista a {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .6rem; border-radius: var(--radio);
  font-size: var(--t-sm); font-weight: 500;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.mega__lista a:hover { background: rgba(var(--tinta-rgb),.05); color: var(--naranja-hondo); }
.mega__lista .ico { color: var(--humo); }
.mega__contador {
  margin-left: auto; font-size: var(--t-xs); color: var(--humo);
  background: rgba(var(--tinta-rgb),.06); border-radius: 20px; padding: 1px 8px;
}

.cabecera__cta { display: none; }
@media (min-width: 1100px) { .cabecera__cta { display: block; } }

/* Hamburguesa */
.hamburguesa {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  margin-left: auto;
}
@media (min-width: 1100px) { .hamburguesa { display: none; } }
.hamburguesa span {
  display: block; height: 1.5px; background: var(--tinta); border-radius: 2px;
  transition: transform var(--rapido) var(--ease), opacity var(--rapido) var(--ease);
}
.hamburguesa span:nth-child(1) { width: 24px; }
.hamburguesa span:nth-child(2) { width: 18px; }
.hamburguesa span:nth-child(3) { width: 24px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-6.5px) rotate(-45deg); }

/* ── 7. Menú móvil ─────────────────────────────────────────── */

.menu-movil {
  position: fixed; inset: 0; z-index: 99;
  background: var(--tinta); color: var(--cal);
  padding: calc(var(--cabecera-alto) + 60px) 1.5rem 2rem;
  overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.menu-movil[hidden] { display: none; }
.menu-movil__lista > li { border-bottom: 1px solid rgba(255,255,255,.09); }
.menu-movil__lista > li > a,
.menu-movil__titulo {
  display: block; padding: 1rem 0;
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em;
}
.menu-movil__titulo { color: var(--naranja); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; padding-bottom: .4rem; }
.menu-movil__lista ul { padding: 0 0 1rem; }
.menu-movil__lista ul a {
  display: block; padding: .45rem 0;
  font-size: var(--t-base); color: var(--arena);
}
.menu-movil__pie { display: grid; gap: .7rem; }

/* ── 8. Hero panorámico 3D ─────────────────────────────────── */

.hero {
  position: relative;
  height: clamp(560px, 86svh, 900px);
  background: var(--tinta);
  overflow: hidden;
  isolation: isolate;
}

.hero__escenario {
  position: absolute; inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.slide.es-activa { opacity: 1; visibility: visible; }

.slide__capas {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .1s linear;
}

/* Capa lejana: panorámica sobredimensionada para poder desplazarla */
.slide__medio {
  position: absolute; inset: -6%;
  transform: translateZ(-140px) scale(1.16) translateX(var(--px, 0px));
  transition: transform .1s linear;
}
/* En absoluto y no con height:100 %. El porcentaje no resolvía contra una
   caja que a su vez se dimensiona en porcentaje, así que en móvil la foto se
   quedaba a su proporción natural y dejaba 100 px muertos dentro de la banda. */
.slide__medio img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.slide.es-activa .slide__medio img {
  animation: respirar 22s var(--ease-io) infinite alternate;
}
@keyframes respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Velo: degradado que garantiza contraste del texto */
.slide__velo {
  position: absolute; inset: 0;
  transform: translateZ(-40px);
  background:
    linear-gradient(to right, rgba(var(--tinta-rgb),.92) 0%, rgba(var(--tinta-rgb),.72) 34%, rgba(var(--tinta-rgb),.12) 66%, rgba(var(--tinta-rgb),.4) 100%),
    linear-gradient(to top, rgba(var(--tinta-rgb),.85) 0%, transparent 45%);
}

/* Retícula: guiño a la trama del arquitecto, apenas perceptible */
.slide__reticula {
  position: absolute; inset: 0;
  transform: translateZ(-20px);
  opacity: .16;
  background-image:
    linear-gradient(rgba(var(--cal-rgb),.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cal-rgb),.5) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 20%, transparent 78%);
}

/* Capa cercana: el texto */
.slide__frente {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  transform: translateZ(60px) translateX(calc(var(--px, 0px) * -.28));
  transition: transform .1s linear;
  padding-bottom: 90px;
}

.slide__texto { max-width: 40rem; color: #fff; }

.hero__ante {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--naranja-claro); margin-bottom: 1.4rem;
}

.hero__titulo {
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .98;
  margin-bottom: 1.4rem;
}

.hero__parrafo {
  font-size: var(--t-md);
  color: rgba(var(--cal-rgb),.86);
  max-width: 34rem;
  margin-bottom: 2.1rem;
}

.hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Entrada escalonada del texto de cada slide */
.slide.es-activa .hero__ante,
.slide.es-activa .hero__titulo,
.slide.es-activa .hero__parrafo,
.slide.es-activa .hero__botones { animation: entrar .95s var(--ease) both; }
.slide.es-activa .hero__titulo   { animation-delay: .08s; }
.slide.es-activa .hero__parrafo  { animation-delay: .16s; }
.slide.es-activa .hero__botones  { animation-delay: .24s; }

@keyframes entrar {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Controles */
.hero__controles {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding-bottom: 1.6rem;
}
.hero__controles-inner { display: flex; align-items: center; gap: 1rem; }

.hero__flecha {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; color: #fff;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.hero__flecha:hover { background: rgba(255,255,255,.16); border-color: #fff; }

.hero__puntos { display: flex; flex: 1; gap: 1.4rem; }
.hero__puntos li { flex: 1; min-width: 0; }

.hero__punto {
  display: block; width: 100%; text-align: left;
  color: rgba(var(--cal-rgb),.55);
  transition: color var(--rapido) var(--ease);
}
.hero__punto:hover, .hero__punto.es-activo { color: #fff; }

.hero__punto-barra {
  display: block; height: 2px; margin-bottom: .55rem;
  background: rgba(255,255,255,.22); overflow: hidden;
}
.hero__punto-relleno {
  display: block; height: 100%; width: 0;
  background: var(--naranja);
}
.hero__punto.es-activo .hero__punto-relleno {
  animation: avanzar var(--autoplay, 7000ms) linear forwards;
}
.hero.es-pausado .hero__punto-relleno { animation-play-state: paused; }
@keyframes avanzar { from { width: 0; } to { width: 100%; } }

.hero__punto-nombre {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tarjeta de contacto anclada */
.hero__tarjeta {
  position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: 50%; z-index: 3;
  transform: translateY(-50%);
  background: rgba(var(--cal-rgb),.94);
  backdrop-filter: blur(10px);
  border-radius: var(--radio-lg);
  padding: 1.4rem 1.7rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  max-width: 250px;
}
.hero__tarjeta.es-visible { transform: translateY(-50%); }
.hero__tarjeta-ante {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja-hondo); margin-bottom: .5rem;
}
.hero__tarjeta-tel { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
.hero__tarjeta-tel a:hover { color: var(--naranja-hondo); }
.hero__tarjeta-nota { font-size: var(--t-xs); color: var(--humo); line-height: 1.45; margin: 0; }

@media (max-width: 1180px) { .hero__tarjeta { display: none; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 106px; z-index: 3;
  width: 1px; height: 46px; background: rgba(255,255,255,.22);
  overflow: hidden;
}
.hero__scroll span {
  position: absolute; inset: 0;
  background: var(--naranja);
  animation: bajar 2.4s var(--ease-io) infinite;
}
@keyframes bajar {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 760px) { .hero__scroll { display: none; } }

/* En vertical, una panorámica 21:9 recortada a pantalla completa solo deja ver
   una franja estrecha del centro y el resto queda plano. Así que en móvil la
   imagen ocupa una banda superior y el texto vive sobre tinta: se lee mejor y
   la panorámica se ve completa. El paneo lateral del giroscopio se conserva. */
@media (max-width: 760px) {
  .hero { height: clamp(600px, 88svh, 780px); }

  /* La banda toma la proporción del recorte 4:3 que se sirve en móvil, con un
     tope para que en pantallas bajas no se coma el texto. La foto entra
     completa en vez de verse una franja del centro de la panorámica. */
  /* El alto sigue al ancho de pantalla para que la banda conserve la
     proporción del recorte 4:3 que se sirve en móvil, con un tope para que
     nunca se coma el texto. No se usa aspect-ratio: con left y right fijados
     Chrome lo aplica al ancho y la banda se encogía dejando huecos. */
  .slide__medio {
    inset: 0 -9% auto -9%;
    height: min(86vw, 50%);
    transform: translateZ(-90px) scale(1.04) translateX(var(--px, 0px));
  }

  /* La banda superior es la fotografía: va casi limpia, con apenas un velo
     que asiente el color. El degradado sólo cierra donde empieza el texto. */
  .slide__velo {
    background: linear-gradient(to top,
      var(--tinta) 0 52%,
      rgba(var(--tinta-rgb), .78) 56%,
      rgba(var(--tinta-rgb), .12) 68%,
      rgba(var(--tinta-rgb), .12) 100%);
  }

  .slide__reticula {
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 95% 55% at 50% 76%, #000 15%, transparent 82%);
  }

  .slide__frente { padding-bottom: 104px; align-items: flex-end; }
  .hero__ante { margin-bottom: 1rem; }
  .hero__titulo { font-size: clamp(2.15rem, 1.6rem + 3.6vw, 2.9rem); margin-bottom: 1rem; }
  .hero__parrafo { font-size: var(--t-sm); line-height: 1.55; margin-bottom: 1.5rem; }

  .hero__controles { padding-bottom: 1.1rem; }
  .hero__puntos { gap: .6rem; }
  .hero__punto-nombre { display: none; }
  .hero__flecha { width: 40px; height: 40px; }
  .hero__botones .boton { flex: 1; padding-inline: 1rem; }
}

/* ── 9. Cifras ─────────────────────────────────────────────── */

.cifras { background: var(--tinta); color: var(--cal); padding-block: clamp(2.6rem, 2rem + 2vw, 4rem); }
.cifras__lista {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cifras__item { padding-left: 1.3rem; border-left: 1px solid rgba(255,255,255,.14); }
.cifras__valor { margin: 0 0 .3rem; display: flex; align-items: baseline; }
.cifra {
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.cifra__sufijo {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  font-weight: 700; color: var(--naranja); line-height: 1;
}
.cifras__titulo { font-size: var(--t-base); margin-bottom: .35rem; }
.cifras__texto { font-size: var(--t-xs); color: var(--arena); margin: 0; line-height: 1.5; }

/* ── 10. Servicios ─────────────────────────────────────────── */

.servicios {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.servicio__enlace {
  display: flex; flex-direction: column; height: 100%;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--medio) var(--ease),
              box-shadow var(--medio) var(--ease),
              border-color var(--medio) var(--ease);
}
.servicio__enlace:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 30px 60px -34px rgba(var(--tinta-rgb),.5);
}

/* 16:10 en vez de 4:3: es la proporción de la fotografía que ya tiene el
   despacho (832×509), así que el recorte no se come los extremos. */
.servicio__foto { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--arena); }
.servicio__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.03);
  transition: transform var(--lento) var(--ease), filter var(--medio) var(--ease);
}
.servicio__enlace:hover .servicio__foto img { transform: scale(1.07); filter: grayscale(0); }

.servicio__icono {
  position: absolute; left: 1rem; bottom: 1rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--cal-suave); color: var(--naranja-hondo);
  border-radius: var(--radio);
  transition: background var(--medio) var(--ease), color var(--medio) var(--ease);
}
.servicio__enlace:hover .servicio__icono { background: var(--naranja); color: var(--tinta); }

.servicio__cuerpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.servicio__titulo { font-size: var(--t-lg); margin-bottom: .6rem; }
.servicio__gancho {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-md); color: var(--naranja-hondo);
  line-height: 1.4; margin-bottom: .8rem;
}
.servicio__resumen { font-size: var(--t-sm); color: var(--humo); margin-bottom: 1.2rem; }
.servicio__mas {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.servicio__enlace:hover .servicio__mas .ico { transform: translateX(4px); }
.servicio__mas .ico { transition: transform var(--rapido) var(--ease); }

/* ── 11. Portafolio ────────────────────────────────────────── */

.portafolio__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.portafolio__cabeza .seccion__cabeza { margin-bottom: 0; }

.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2.4rem 0 2rem;
}
.filtro {
  padding: .55rem 1.1rem;
  border: 1px solid var(--borde-claro);
  border-radius: 40px;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.filtro:hover { border-color: currentColor; }
.filtro.es-activo { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.filtros--archivo .filtro { border-color: var(--borde); }
.filtros--archivo { margin-top: 0; }

.rejilla {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Seis columnas y dos anchos de ficha: el ritmo es «dos anchas (3+3) + tres
   normales (2+2+2)», que cierra fila exacta cada cinco tarjetas. `dense`
   rellena cualquier hueco si el conteo no es múltiplo de cinco. */
@media (min-width: 900px) {
  .rejilla { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
  .rejilla > .ficha { grid-column: span 2; }
  .rejilla > .ficha--ancha { grid-column: span 3; }
  .rejilla--archivo > .ficha { grid-column: span 2; }
}

.ficha { transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease); }
.ficha.es-oculta { display: none; }

.ficha > a { display: block; height: 100%; }
.ficha__foto {
  position: relative; overflow: hidden;
  border-radius: var(--radio-lg);
  aspect-ratio: 16/10;
  background: var(--grafito);
}
.ficha--ancha .ficha__foto { aspect-ratio: 2/1; }
.ficha__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--tinta-rgb),.55), transparent 55%);
  opacity: 0; transition: opacity var(--medio) var(--ease);
}
.ficha > a:hover .ficha__foto::after { opacity: 1; }
.ficha__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.42);
  transition: transform var(--lento) var(--ease), filter var(--medio) var(--ease);
}
.ficha > a:hover .ficha__foto img { transform: scale(1.06); filter: grayscale(0); }

.ficha__cuerpo { padding-top: 1.1rem; }
.ficha__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-bottom: .55rem;
  font-size: var(--t-xs); letter-spacing: .06em;
}
.ficha__tipo { color: var(--naranja-hondo); font-weight: 700; text-transform: uppercase; }
.ficha__lugar { display: inline-flex; align-items: center; gap: .3rem; color: var(--humo); }
.ficha__titulo { font-size: var(--t-lg); margin-bottom: .45rem; }
.ficha > a:hover .ficha__titulo { color: var(--naranja-hondo); }
.ficha__resumen { font-size: var(--t-sm); color: var(--humo); margin: 0; }

.conteo {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--humo); margin: 1.6rem 0;
}

.ubicaciones-pie { margin-top: clamp(3rem,2rem+3vw,5rem); padding-top: 2rem; border-top: 1px solid var(--borde); }
.ubicaciones-pie h2 { font-size: var(--t-lg); margin-bottom: 1rem; }
.ubicaciones-pie ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.ubicaciones-pie a {
  display: inline-block; padding: .5rem 1rem;
  border: 1px solid var(--borde); border-radius: 40px;
  font-size: var(--t-xs); font-weight: 600;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.ubicaciones-pie a:hover { background: var(--tinta); color: var(--cal); }

.vacio { font-size: var(--t-md); color: var(--humo); }
.vacio a { color: var(--naranja-hondo); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ── 12. Proceso ───────────────────────────────────────────── */

.proceso {
  position: relative;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.proceso__linea {
  display: none;
  position: absolute; left: 0; right: 0; top: 34px; height: 1px;
  background: var(--borde);
}
@media (min-width: 980px) { .proceso__linea { display: block; } }
.proceso__linea-relleno {
  display: block; height: 100%; width: 0;
  background: var(--naranja);
  transition: width .1s linear;
}

.paso { position: relative; padding-top: 0; }
.paso__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
  line-height: 1; color: var(--humo-tenue);
  margin-bottom: .9rem;
}
.paso__icono {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--naranja-hondo);
  background: var(--cal-suave);
  transition: background var(--medio) var(--ease), color var(--medio) var(--ease), border-color var(--medio) var(--ease);
}
.paso:hover .paso__icono { background: var(--tinta); color: var(--naranja); border-color: var(--tinta); }
.paso__titulo { font-size: var(--t-md); margin-bottom: .55rem; }
.paso__texto { font-size: var(--t-sm); color: var(--humo); margin-bottom: .8rem; }
.paso__plazo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja-hondo); margin: 0;
}

/* ── 13. Realidad virtual ──────────────────────────────────── */

.vr {
  position: relative; overflow: hidden;
  background: var(--tinta); color: var(--cal);
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
  isolation: isolate;
}
.vr__fondo { position: absolute; inset: -12% 0; z-index: -1; }
.vr__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: grayscale(.3); }
.vr::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, var(--tinta) 22%, rgba(var(--tinta-rgb),.86) 52%, rgba(var(--tinta-rgb),.5) 100%);
}

.vr__inner { display: grid; }
.vr__texto { max-width: 40rem; }
.vr__texto h2 { font-size: var(--t-2xl); margin-bottom: 1.4rem; }
.vr__parrafo { font-size: var(--t-md); color: var(--arena); }

.vr__lista {
  display: grid; gap: .8rem;
  margin: 2rem 0 2.4rem;
}
.vr__lista li { display: flex; align-items: center; gap: .8rem; font-size: var(--t-sm); }
.vr__lista .ico { color: var(--naranja); }

/* ── 14. Cobertura ─────────────────────────────────────────── */

.ciudades {
  display: grid; gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.ciudad { background: var(--cal-suave); }
.ciudad > a {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.8rem;
  transition: background var(--medio) var(--ease), color var(--medio) var(--ease);
}
.ciudad > a:hover { background: var(--tinta); color: var(--cal); }
.ciudad--principal { background: var(--blanco); }

.ciudad__num {
  font-family: var(--serif);
  font-size: 2.2rem; line-height: 1; color: var(--humo-tenue);
  margin-bottom: .8rem;
}
.ciudad > a:hover .ciudad__num { color: var(--naranja); }
.ciudad__nombre { font-size: var(--t-lg); margin-bottom: .2rem; }
.ciudad__estado {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja-hondo); margin-bottom: .9rem;
}
.ciudad > a:hover .ciudad__estado { color: var(--naranja); }
.ciudad__texto { font-size: var(--t-sm); color: var(--humo); margin-bottom: 1.3rem; }
.ciudad > a:hover .ciudad__texto { color: var(--arena); }
.ciudad__enlace {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.ciudad > a:hover .ciudad__enlace .ico { transform: translateX(4px); }
.ciudad__enlace .ico { transition: transform var(--rapido) var(--ease); }

/* ── 15. Razones ───────────────────────────────────────────── */

.razones {
  display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.razon { padding-top: 1.4rem; border-top: 2px solid var(--tinta); }
.razon__icono { display: block; color: var(--naranja-hondo); margin-bottom: 1rem; }
.razon__titulo { font-size: var(--t-md); margin-bottom: .5rem; }
.razon__texto { font-size: var(--t-sm); color: var(--humo); margin: 0; }

/* ── 16. Testimonios ───────────────────────────────────────── */

.carrusel { position: relative; overflow: hidden; }
.carrusel__pista {
  display: flex;
  transition: transform var(--lento) var(--ease);
}
.testimonio {
  flex: 0 0 100%; margin: 0; padding-right: 2rem;
  max-width: 52rem;
}
.testimonio__comillas {
  display: block; font-family: var(--serif);
  font-size: 5rem; line-height: .5; color: var(--naranja);
  margin-bottom: 1.6rem;
}
.testimonio blockquote { margin: 0; }
.testimonio blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.32; letter-spacing: -.02em;
  color: var(--cal);
}
.testimonio figcaption { margin-top: 1.8rem; font-size: var(--t-sm); }
.testimonio figcaption strong { display: block; color: var(--cal); }
.testimonio figcaption span { color: var(--humo); }

.carrusel__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2.6rem; }
.carrusel__nav button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--borde-claro); border-radius: 50%;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.carrusel__nav button:hover { background: rgba(255,255,255,.12); border-color: var(--cal); }
.carrusel__puntos { display: flex; gap: .5rem; }
.carrusel__puntos button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: background var(--rapido) var(--ease), width var(--rapido) var(--ease);
}
.carrusel__puntos button.es-activo { background: var(--naranja); width: 24px; border-radius: 4px; }

/* ── 17. Blog ──────────────────────────────────────────────── */

.notas {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2.6rem;
}
.notas--archivo { margin-top: 0; }
.nota > a { display: block; height: 100%; }
.nota__foto { overflow: hidden; border-radius: var(--radio-lg); aspect-ratio: 16/10; background: var(--arena); }
.nota__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--ease); }
.nota > a:hover .nota__foto img { transform: scale(1.06); }
.nota__cuerpo { padding-top: 1.1rem; }
.nota__fecha {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--naranja-hondo); margin-bottom: .5rem;
}
.nota__titulo { font-size: var(--t-md); margin-bottom: .55rem; }
.nota > a:hover .nota__titulo { color: var(--naranja-hondo); }
.nota__resumen { font-size: var(--t-sm); color: var(--humo); margin-bottom: .9rem; }
.nota__mas {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.paginacion { margin-top: 3rem; }
.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.paginacion a, .paginacion .current {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 .9rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: var(--t-sm); font-weight: 600;
}
.paginacion .current { background: var(--tinta); color: var(--cal); border-color: var(--tinta); }
.paginacion a:hover { border-color: var(--tinta); }

/* ── 18. FAQ ───────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__pregunta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; cursor: pointer;
  font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.015em;
  list-style: none;
  transition: color var(--rapido) var(--ease);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--naranja-hondo); }
.faq__signo {
  flex: none; color: var(--naranja-hondo);
  transition: transform var(--medio) var(--ease);
}
.faq__item[open] .faq__signo { transform: rotate(45deg); }
.faq__respuesta {
  padding-bottom: 1.6rem; max-width: 60ch;
  font-size: var(--t-base); color: var(--humo);
  animation: desplegar .4s var(--ease);
}
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 19. Cierre y formulario ───────────────────────────────── */

.cierre {
  background: var(--tinta); color: var(--cal);
  padding-block: var(--sec-y);
}
.cierre__inner {
  display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .cierre__inner { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); } }

.cierre__texto h2 { font-size: var(--t-2xl); margin-bottom: 1.3rem; }
.cierre__parrafo { font-size: var(--t-md); color: var(--arena); margin-bottom: 2rem; }

.cierre__datos { display: grid; gap: 1rem; margin-bottom: 2.2rem; }
.cierre__datos li { display: flex; align-items: flex-start; gap: .9rem; font-size: var(--t-sm); }
.cierre__datos .ico { color: var(--naranja); margin-top: 2px; }
.cierre__datos a:hover { color: var(--naranja); }

.cierre__form {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
}
.cierre__form h3 { font-size: var(--t-lg); margin-bottom: .4rem; }
.cierre__form > p { font-size: var(--t-sm); color: var(--arena); margin-bottom: 1.6rem; }

.campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.campo { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: inherit; opacity: .8;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .8rem .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  font-size: var(--t-sm);
  color: inherit;
  transition: border-color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(var(--arena-rgb),.55); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--naranja); background: rgba(255,255,255,.1);
}
.campo select option { color: #14120f; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.formulario__nota { margin-top: 1.1rem; font-size: var(--t-xs); opacity: .7; }
.formulario__nota a { border-bottom: 1px solid currentColor; }

.aviso {
  padding: 1rem 1.2rem; border-radius: var(--radio);
  font-size: var(--t-sm); margin-bottom: 1.4rem;
}
.aviso--ok { background: rgba(37,211,102,.14); border: 1px solid rgba(37,211,102,.4); }
.aviso--error { background: rgba(var(--error-rgb),.14); border: 1px solid rgba(var(--error-rgb),.5); }
.aviso a { font-weight: 600; border-bottom: 1px solid currentColor; }

/* El formulario en fondo claro (página de contacto) */
.contacto__form .campo input,
.contacto__form .campo select,
.contacto__form .campo textarea {
  background: var(--blanco);
  border-color: var(--borde);
}
.contacto__form .campo input::placeholder,
.contacto__form .campo textarea::placeholder { color: rgba(107,100,90,.6); }

/* ── 20. Pie ───────────────────────────────────────────────── */

.pie {
  background: var(--carbon); color: var(--arena);
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) 2rem;
  font-size: var(--t-sm);
}
.pie__top {
  display: grid; gap: clamp(2.4rem, 2rem + 2vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
@media (min-width: 980px) { .pie__top { grid-template-columns: minmax(0,.85fr) minmax(0,2fr); } }

.pie__logo { height: 58px; width: auto; margin-bottom: 1.2rem; }
.pie__slogan {
  font-family: var(--serif); font-size: var(--t-lg);
  color: var(--cal); margin-bottom: .9rem; line-height: 1.24;
}
.pie__desc { color: var(--humo); font-size: var(--t-xs); line-height: 1.66; }

.pie__redes { display: flex; gap: .6rem; margin-top: 1.5rem; }
.pie__redes a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
  transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.pie__redes a:hover { background: var(--naranja); color: var(--tinta); border-color: var(--naranja); }

.pie__cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.pie__col h3 {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: 1rem;
}
.pie__col ul li + li { margin-top: .5rem; }
.pie__col a { font-size: var(--t-xs); transition: color var(--rapido) var(--ease); }
.pie__col a:hover { color: var(--cal); }

.pie__contacto li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-xs); line-height: 1.6; }
.pie__contacto li + li { margin-top: .8rem; }
.pie__contacto .ico { color: var(--naranja); margin-top: 2px; }
.pie__col--contacto .boton { margin-top: 1.4rem; }

.pie__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.8rem;
  font-size: var(--t-xs); color: var(--humo);
}
.pie__legal p { margin: 0; }
.pie__legal-menu { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pie__legal a:hover { color: var(--cal); }
.pie__credito a { color: var(--arena); border-bottom: 1px solid rgba(255,255,255,.24); }

/* ── 21. Flotantes ─────────────────────────────────────────── */

.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.15rem;
  background: var(--naranja); color: var(--tinta);
  border-radius: 40px; font-size: var(--t-sm); font-weight: 700;
  box-shadow: 0 16px 34px -14px rgba(var(--naranja-rgb),.55);
  opacity: 0; visibility: hidden;
  transform: translateY(18px) scale(.94);
  transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility var(--medio);
}
.flotante.es-visible { opacity: 1; visibility: visible; transform: none; }
.flotante:hover { background: var(--naranja-claro); }
@media (max-width: 560px) { .flotante__texto { display: none; } .flotante { padding: .95rem; } }

.arriba {
  position: fixed; right: 18px; bottom: 82px; z-index: 89;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--cal);
  border-radius: 50%;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility var(--medio);
}
.arriba.es-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 560px) { .arriba { display: none; } }


/* ── Código interno del proyecto ───────────────────────────── */
/* El despacho identifica cada obra por número y pidió que se viera en el
   título. Va dentro del propio h3 pero con jerarquía menor, de modo que se
   lea «Proyecto 085 / Edificio Biomed» sin competir con el nombre. */
.ficha__codigo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja-hondo);
  margin-bottom: .3rem;
}
.seccion--portafolio .ficha__codigo,
.seccion--oscura .ficha__codigo { color: var(--naranja-claro); }

/* ── Galería de la ficha de proyecto ───────────────────────── */
.proyecto__resumen {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--tinta);
  margin-bottom: 2.4rem;
}
/* Retícula en columnas (mamposteria), no en cuadrícula.
   Antes era un grid con object-fit: cover, y eso recortaba cada foto a la
   altura de la fila: una foto vertical perdia la mitad. Con columnas, cada
   foto conserva su proporcion y se ve entera; la altura la pone la imagen. */
.galeria {
  columns: 1;
  column-gap: var(--gap);
}
@media (min-width: 720px) {
  .galeria { columns: 2; }
}
.galeria__item {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--arena);
}
.galeria__abrir {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: var(--blanco);
  /* Los saltos de linea del HTML entre la imagen y la lupa generaban cajas de
     linea dentro del boton y dejaban una franja gris bajo cada foto. */
  font-size: 0;
  line-height: 0;
}
.galeria__item img {
  display: block;
  width: 100%;
  height: auto;              /* la foto manda; nada se recorta */
  transition: transform var(--lento) var(--ease);
}
.galeria__abrir:hover img,
.galeria__abrir:focus-visible img { transform: scale(1.02); }

.galeria__lupa {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--tinta-rgb), .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.galeria__abrir:hover .galeria__lupa,
.galeria__abrir:focus-visible .galeria__lupa { opacity: 1; transform: none; }
/* En táctil no hay hover: la lupa se queda puesta. */
@media (hover: none) {
  .galeria__lupa { opacity: 1; transform: none; }
}

/* ── Visor de fotografía a pantalla completa ───────────────── */

.visor {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Casi opaca y con desenfoque: al 96 % se seguia leyendo la pagina detras
     y competia con la fotografia. */
  background: rgba(var(--tinta-rgb), .975);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--rapido) var(--ease), visibility var(--rapido);
}
.visor.es-abierto { opacity: 1; visibility: visible; }
.visor__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.2rem;
  color: var(--arena); font-size: var(--t-sm);
}
/* La foto se posiciona en absoluto dentro del lienzo. Centrada con grid, su
   max-height en porcentaje no resolvia: la altura del lienzo la pone un 1fr y
   para el calculo del porcentaje seguia siendo «auto», asi que una foto
   vertical se salia por abajo y se comia el pie. En absoluto, el porcentaje si
   resuelve contra la caja del lienzo. */
.visor__lienzo {
  position: relative;
  min-height: 0;
}
.visor__lienzo img {
  position: absolute;
  inset: 0;
  margin: auto;              /* centra en los dos ejes */
  max-width: calc(100% - clamp(1.6rem, 9vw, 9rem));
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;       /* la foto entera, siempre */
  border-radius: var(--radio);
}
.visor__pie {
  padding: 1rem 1.2rem 1.4rem;
  text-align: center;
  color: var(--arena); font-size: var(--t-sm);
}
.visor__btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--borde-claro);
  border-radius: 50%;
  background: none; color: var(--cal);
  cursor: pointer;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.visor__btn:hover { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.visor__btn[hidden] { display: none; }
.visor__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 1;
}
.visor__nav--prev { left: clamp(.4rem, 2vw, 1.4rem); }
.visor__nav--sig  { right: clamp(.4rem, 2vw, 1.4rem); }
.visor__nav--prev .ico { transform: rotate(180deg); }
.visor__cargando {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--arena); font-size: var(--t-sm);
  pointer-events: none;
}
body.sin-scroll { overflow: hidden; }

/* ── 22. Páginas internas ──────────────────────────────────── */

.interno {
  position: relative; overflow: hidden;
  background: var(--tinta); color: var(--cal);
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
  isolation: isolate;
}
.interno__fondo { position: absolute; inset: -12% 0; z-index: -1; }
.interno__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.4); }
.interno::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--tinta) 18%, rgba(var(--tinta-rgb),.82) 55%, rgba(var(--tinta-rgb),.45) 100%);
}
.interno__inner { max-width: 48rem; }
.interno__titulo { font-size: var(--t-3xl); letter-spacing: -.04em; line-height: 1; }
.interno__texto { margin-top: 1.3rem; font-size: var(--t-md); color: var(--arena); max-width: 38rem; }

.migas { margin-bottom: 1.6rem; font-size: var(--t-xs); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.migas li + li::before { content: '/'; margin-right: .5rem; opacity: .45; }
.migas a { color: var(--arena); transition: color var(--rapido) var(--ease); }
.migas a:hover { color: var(--naranja); }
.migas [aria-current] { opacity: .65; }

/* Servicios en detalle */
.detalle { padding-block: var(--sec-y); }
.detalle:nth-child(even) { background: var(--blanco); }
.detalle__inner {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .detalle__inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .detalle--invertido .detalle__foto { order: 2; }
}
.detalle__foto { position: relative; border-radius: var(--radio-lg); overflow: hidden; }
.detalle__foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.detalle__icono {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--cal-suave); color: var(--naranja-hondo);
  border-radius: var(--radio);
}
.detalle__titulo { font-size: var(--t-2xl); margin-bottom: 1rem; }
.detalle__gancho {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lg); color: var(--naranja-hondo); margin-bottom: 1.2rem;
}
.detalle__parrafo { font-size: var(--t-base); color: var(--humo); }
.detalle__sub {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); margin: 1.8rem 0 1rem;
}
.detalle__para { font-size: var(--t-sm); color: var(--humo); margin-top: 1.4rem; }
.detalle__para strong { color: var(--tinta); }
.detalle__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.lista-check { display: grid; gap: .6rem; }
.lista-check li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--t-sm); }
.lista-check .ico { color: var(--naranja-hondo); margin-top: 4px; }

.valores { display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radio-lg); overflow: hidden; }
.valores li { background: var(--tinta); padding: 1.7rem; }
.valores h3 { font-size: var(--t-md); margin-bottom: .5rem; color: var(--naranja); }
.valores p { font-size: var(--t-sm); color: var(--arena); margin: 0; }

/* Banda de conversión */
.banda { background: var(--naranja-hondo); color: #fff; padding-block: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); }
.banda__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.banda__titulo { font-size: var(--t-xl); margin-bottom: .5rem; }
.banda__texto { font-size: var(--t-sm); opacity: .9; margin: 0; max-width: 34rem; }
.banda__botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.banda .boton--claro { border-color: rgba(255,255,255,.5); }

/* Contacto */
.contacto__inner {
  display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .contacto__inner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.contacto__datos h2, .contacto__form h2 { font-size: var(--t-xl); margin-bottom: 1.5rem; }
.contacto__lista { display: grid; gap: 1.4rem; margin-bottom: 2.2rem; }
.contacto__lista li { display: flex; gap: 1rem; }
.contacto__ico {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--naranja-hondo);
}
.contacto__lista strong { display: block; font-size: var(--t-sm); margin-bottom: .2rem; }
.contacto__lista a { font-size: var(--t-sm); color: var(--tinta); border-bottom: 1px solid var(--borde); }
.contacto__lista a:hover { color: var(--naranja-hondo); }
.contacto__lista em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--humo); margin-top: .3rem; }
.contacto__mapa { border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--borde); }
.contacto__mapa iframe { display: block; filter: grayscale(.5); }
.contacto__intro { font-size: var(--t-sm); color: var(--humo); margin-bottom: 1.8rem; }

/* Ficha de proyecto */
.proyecto__hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tinta); color: var(--cal);
  padding-block: clamp(5rem, 4rem + 6vw, 9rem);
}
.proyecto__fondo { position: absolute; inset: -12% 0; z-index: -1; }
.proyecto__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.proyecto__hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--tinta) 5%, rgba(var(--tinta-rgb),.6) 55%, rgba(var(--tinta-rgb),.35) 100%);
}
.proyecto__titulo { font-size: var(--t-3xl); letter-spacing: -.04em; }
.proyecto__lugar { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--arena); font-size: var(--t-sm); }

.proyecto__cuerpo {
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .proyecto__cuerpo { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); } }

.proyecto__ficha {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); padding: 1.8rem;
  align-self: start; position: sticky; top: calc(var(--cabecera-alto) + 20px);
}
.proyecto__ficha h2 {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja-hondo); margin-bottom: 1.2rem;
}
.proyecto__ficha dl { margin: 0 0 1.6rem; }
.proyecto__ficha dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.proyecto__ficha dt { font-size: var(--t-xs); color: var(--humo); }
.proyecto__ficha dd { margin: 0; font-size: var(--t-sm); font-weight: 600; text-align: right; }

/* Contenido editorial */
.entrada__cuerpo { font-size: var(--t-md); line-height: 1.75; }
.entrada__cuerpo h2 { font-size: var(--t-xl); margin: 2.4rem 0 1rem; }
.entrada__cuerpo h3 { font-size: var(--t-lg); margin: 2rem 0 .8rem; }
.entrada__cuerpo p { margin-bottom: 1.4em; }
.entrada__cuerpo a { color: var(--naranja-hondo); border-bottom: 1px solid currentColor; }
.entrada__cuerpo ul, .entrada__cuerpo ol { margin: 0 0 1.4em 1.3em; }
.entrada__cuerpo ul li { list-style: disc; margin-bottom: .5em; }
.entrada__cuerpo ol li { list-style: decimal; margin-bottom: .5em; }
.entrada__cuerpo blockquote {
  margin: 2rem 0; padding-left: 1.6rem;
  border-left: 2px solid var(--naranja);
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.4;
}
.entrada__cuerpo img { border-radius: var(--radio-lg); margin: 2rem 0; }
/* Dentro de la galeria el espacio lo pone la propia reticula; ese margen de
   2rem dejaba 32 px de fondo visible arriba y abajo de cada foto. */
.entrada__cuerpo .galeria img { margin: 0; border-radius: 0; }
.entrada__cats { margin-top: 2.5rem; font-size: var(--t-sm); color: var(--humo); }
.entrada__cats a { color: var(--naranja-hondo); }

/* Cierre de artículo: el botón del shortcode [arqlon_wa] respira más que un
   párrafo normal, porque es el final del recorrido de lectura. */
.wa-bloque { margin: 2.4rem 0 0; }
.wa-bloque .boton { text-decoration: none; border-bottom: 0; }

/* Tablas dentro del contenido editorial: el blog vive de comparativas de
   precios y plazos, así que conviene que se lean bien y no rompan en móvil. */
.entrada__cuerpo .wp-block-table { margin: 2rem 0; overflow-x: auto; }
.entrada__cuerpo .wp-block-table table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
}
.entrada__cuerpo .wp-block-table th {
  text-align: left; padding: .8rem 1rem;
  background: var(--tinta); color: var(--cal);
  font-weight: 600; letter-spacing: .02em;
}
.entrada__cuerpo .wp-block-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--borde);
}
.entrada__cuerpo .wp-block-table tr:nth-child(even) td { background: rgba(var(--tinta-rgb),.025); }

/* Buscador */
.buscador { display: flex; gap: .5rem; max-width: 30rem; margin-top: 1.8rem; }
.buscador input {
  flex: 1; padding: .85rem 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--blanco);
}
.buscador button {
  width: 48px; display: grid; place-items: center;
  background: var(--tinta); color: var(--cal); border-radius: var(--radio);
  transition: background var(--rapido) var(--ease);
}
.buscador button:hover { background: var(--naranja-hondo); }

/* 404 */
.error404 {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tinta); color: var(--cal);
  min-height: 70svh; display: flex; align-items: center;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.error404__fondo { position: absolute; inset: 0; z-index: -1; }
.error404__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.error404__inner { max-width: 44rem; }
.error404 h1 { font-size: var(--t-3xl); margin-bottom: 1.3rem; }
.error404__texto { color: var(--arena); font-size: var(--t-md); }
.error404__enlaces { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0; }
.error404__enlaces a {
  display: inline-block; padding: .55rem 1.1rem;
  border: 1px solid var(--borde-claro); border-radius: 40px;
  font-size: var(--t-xs); font-weight: 600;
}
.error404__enlaces a:hover { background: var(--cal); color: var(--tinta); }
.error404 .buscador input { background: rgba(255,255,255,.08); border-color: var(--borde-claro); color: var(--cal); }
.error404 .buscador button { background: var(--naranja); color: var(--tinta); }
.error404__cta { margin-top: 1.8rem; }

/* ── 23. Ajustes finos de impresión ────────────────────────── */

@media print {
  .barra-top, .cabecera, .menu-movil, .flotante, .arriba, .hero__controles, .banda { display: none !important; }
  body { background: #fff; color: #000; }
  .interno, .cierre, .seccion--oscura { background: #fff !important; color: #000 !important; }
}