/* ==========================================================================
   ARQUELORA — el sistema. Una sola lengua para las treinta y siete páginas.

   Esta web había acumulado TREINTA hojas de estilo encadenadas por @import —
   `styles.css`, `experience-v55`, quince capas `identity-v6*`, siete `v66*`,
   `identity-v7-index` y `likova-theme` — y cada una corregía a la anterior en
   vez de sustituirla. El resultado no es una cuestión de gusto: medido a 1440
   sobre las 37 páginas, **1.079 textos quedaban por debajo del mínimo legible**,
   y la mayoría por la misma razón. Las capas antiguas escriben en tinta blanca
   porque su fondo era oscuro; la capa V10 puso el fondo claro. Blanco sobre
   blanco, y ninguna de las dos tenía por qué saber de la otra.

   Así que aquí no se corrige otra vez: se decide. Esta hoja carga la última en
   todas las páginas y fija lo único que no puede ser opinable —

     · UN SUELO. Hielo (#f4f7f7) con placas blancas. Nada más.
     · UNA TINTA. Azul de la casa (#071a38), su versión suave y su apagada.
     · UNA ESCALA. Titulares en la condensada, todo lo demás en la de texto,
       rótulos en monoespaciada a 10-11px con caja alta y interletraje ancho.
     · UNA REGLA DE CONTRASTE. En fondo claro se escribe en tinta; en fondo
       oscuro, en blanco. Nunca al revés, y no hay una tercera opción.

   Lo que NO hace: tocar la composición del héroe ni de los capítulos. Eso ya
   está en su sitio; esto es lo que hace que el resto de la web hable igual.
   ========================================================================== */

:root {
  /* El suelo y las placas */
  --arq-ground: #f4f7f7;
  --arq-plate: #ffffff;
  --arq-deep: #08121f;

  /* La tinta */
  --arq-ink: #071a38;
  --arq-ink-soft: #223550;
  --arq-ink-muted: #5c6b7e;
  --arq-on-dark: #f2f6fa;
  --arq-on-dark-soft: rgba(242, 246, 250, .82);
  --arq-on-dark-muted: rgba(242, 246, 250, .64);

  /* Las líneas y el acento */
  --arq-line: rgba(7, 26, 56, .14);
  --arq-line-strong: rgba(7, 26, 56, .30);
  --arq-line-dark: rgba(242, 246, 250, .20);
  --arq-accent: #1f4f7a;
}

/* --------------------------------------------------------------------------
   1. La tinta por defecto.

   `:where()` mantiene la especificidad en cero, así que cualquier regla con
   nombre propio sigue mandando sobre esto; lo que no sigue mandando es una
   capa que pintaba de blanco sin saber sobre qué. Se marca `!important`
   porque eso es exactamente lo que hacen las quince capas que hay debajo.
   -------------------------------------------------------------------------- */
body :where(p, li, dd, dt, small, span, strong, em, blockquote, figcaption, label, td, th) {
  color: var(--arq-ink-soft) !important;
}
body :where(h1, h2, h3, h4, h5, h6) { color: var(--arq-ink) !important; }
body :where(a) { color: inherit; }

/* --------------------------------------------------------------------------
   2. Y sobre fondo oscuro, lo contrario.

   `data-ground="dark"` lo estampa `likova-theme.js` midiendo el fondo que hay
   DETRÁS de cada bloque, no adivinándolo: un elemento cuyo fondo pintado tiene
   luminancia baja recibe la marca, y con ella la tinta clara. Es la misma idea
   que la red de seguridad del revelado — el contenido no puede perder.
   -------------------------------------------------------------------------- */
[data-ground="dark"],
[data-ground="dark"] :where(p, li, dd, dt, small, span, strong, em, blockquote, figcaption, label, td, th) {
  color: var(--arq-on-dark-soft) !important;
}
[data-ground="dark"] :where(h1, h2, h3, h4, h5, h6) { color: var(--arq-on-dark) !important; }
[data-ground="dark"] :where(hr) { border-color: var(--arq-line-dark) !important; }

/* El héroe y el plano del índice son oscuros por diseño y ya tienen su tinta:
   se quedan fuera para que nada de arriba los toque. */
.lk-hero :where(h1, p, span, small, a, b),
.arq-index :where(h1, h2, h3, p, span, small, a, li) { color: inherit !important; }
.lk-hero-copy h1, .lk-hero-copy p, .lk-hero-tagline p, .lk-scroll-cue { color: #fff !important; }
.lk-hero-tagline small { color: rgba(255, 255, 255, .86) !important; }

/* --------------------------------------------------------------------------
   3. Los papeles del texto, con un solo nombre para cada uno.

   Los rótulos de sección, los números y los pies de figura eran la mitad de los
   fallos: escritos en blanco translúcido sobre hielo, o en gris hueso sobre
   blanco. Un rótulo es una etiqueta técnica y se escribe como tal.
   -------------------------------------------------------------------------- */
body :where(figcaption) {
  color: var(--arq-ink) !important;
  font-family: ArqInter, Inter, system-ui, sans-serif;
}
body :where(figcaption span, figcaption small) { color: var(--arq-ink-muted) !important; }
[data-ground="dark"] :where(figcaption) { color: var(--arq-on-dark) !important; }
[data-ground="dark"] :where(figcaption span, figcaption small) { color: var(--arq-on-dark-muted) !important; }

/* El pie de página: una sola pieza, no tres capas discutiendo. */
.arq-footer-v65 :where(a, span, small, li, p) { color: var(--arq-ink-soft) !important; }
.arq-footer-v65__legal :where(a) { color: var(--arq-ink-muted) !important; }
.arq-footer-v65__statement :where(span) { color: var(--arq-ink) !important; }
[data-ground="dark"].arq-footer-v65 :where(a, span, small, li, p) { color: var(--arq-on-dark-soft) !important; }

/* Las pastillas de ciudad y los números de paso: tinta sobre hielo. */
.city-pill, .city-pill :where(small, span) { color: var(--arq-ink) !important; }
.city-pill :where(small) { color: var(--arq-ink-muted) !important; }

/* --------------------------------------------------------------------------
   4. Los controles.

   Dos formas y ninguna más: la sólida para la acción principal, el contorno
   para todo lo demás. Sin píldoras, sin degradados, sin sombras de colores.
   -------------------------------------------------------------------------- */
body :where(.btn, .button, [class*="cta"], .nav-contact, .arq-bar-contact) {
  border-radius: 0 !important;
  font-family: ArqInter, Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body :where(.btn-primary, .btn--primary, .cta-primary) {
  background: var(--arq-ink) !important;
  color: #fff !important;
  border: 1px solid var(--arq-ink) !important;
}
body :where(.btn-secondary, .btn--ghost, .cta-secondary) {
  background: transparent !important;
  color: var(--arq-ink) !important;
  border: 1px solid var(--arq-line-strong) !important;
}
[data-ground="dark"] :where(.btn-secondary, .btn--ghost, .cta-secondary) {
  color: var(--arq-on-dark) !important;
  border-color: var(--arq-line-dark) !important;
}

/* --------------------------------------------------------------------------
   5. La última red: nada se queda en blanco sobre blanco.

   `data-ink="flip"` lo pone el guardián de `likova-theme.js` cuando mide un
   texto concreto por debajo del mínimo AA contra el fondo que de verdad tiene
   detrás. Es el caso que ninguna regla por nombre puede prever, porque nace de
   la combinación de dos capas que no se conocen.
   -------------------------------------------------------------------------- */
[data-ink="dark"] { color: var(--arq-ink) !important; }
[data-ink="light"] { color: var(--arq-on-dark) !important; }

/* ==========================================================================
   6. Una sola voz tipográfica y una sola paleta.

   Medido en /reformas-integrales, que es la página que el dueño señaló: CINCO
   familias tipográficas, 16 variantes de texto, 12 de rótulo, 7 tintas y 8
   fondos. En una sola página. Eso no es un ajuste de gusto, es la web hablando
   cinco idiomas a la vez.

   Lo que había, y lo que queda:

   · `ui-monospace` en diecisiete rótulos. Es la monoespaciada DEL SISTEMA
     OPERATIVO: cada visitante veía una letra distinta justo en el sitio donde
     esta web es más ella misma. Fuera. Los rótulos son la misma grotesca en
     caja alta con interletraje ancho, como en el héroe.
   · "Arquelora Sans" y "Arquelora Display" son alias del MISMO fichero que
     ArqInter y ArqTight — dos nombres para una letra. Se unifican para que no
     haya dos maneras de pedir lo mismo.
   · Dos tintas cálidas heredadas de una paleta anterior (#3f403a, #5a5c53) en
     una web cuyo azul es #071a38. Se mapean.
   · Dos negros casi iguales (#08090c y #0e0f0b) y un azul pálido suelto. Un
     oscuro, un hielo, una placa blanca.
   ========================================================================== */

/* Las dos familias, y solo dos. */
body :where(h1, h2, h3, h4, h5, h6, .display, [class*="display"]) {
  font-family: ArqTight, "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
body :where(p, li, span, small, strong, em, a, dd, dt, label, input, select, textarea, button, td, th, figcaption, blockquote) {
  font-family: ArqInter, Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* Los rótulos: la misma grotesca, en caja alta, con aire entre letras. Nunca la
   monoespaciada del sistema, que no es nuestra y no es la misma en dos sitios. */
body :where(.lk-kicker, .lk-number, .eyebrow, [class*="eyebrow"], [class*="kicker"], [class*="label"], .breadcrumbs, .scroll-label) {
  font-family: ArqInter, Inter, "Helvetica Neue", Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* La paleta de tinta, sin las dos cálidas heredadas. */
body :where([style*="rgb(63, 64, 58)"], [style*="rgb(90, 92, 83)"]) { color: var(--arq-ink-soft) !important; }

/* Un solo oscuro. Dos negros distintos a un pixel de diferencia no son una
   decisión, son dos capas que no se hablaron. */
body :where([class*="-v64"], [class*="v64-"]) { --v64-ink: var(--arq-deep); }

/* Un solo oscuro y un solo hielo, por nombre.

   `#08090c` (el grafito de identity-v6) y `#0e0f0b` conviven con el azul profundo
   de la casa; y `#dce6ea` es un azul pálido suelto que no es ni el hielo ni una
   placa. Se reconducen los tres al sistema: el oscuro al azul profundo, el pálido
   al hielo. Es la diferencia entre una web con dos negros y una web con uno. */
body :where(.v5-projects, .v5-projects *, [class*="-v64"], [class*="v64-"], [class*="v66-"]) {
  --v6-graphite: var(--arq-deep);
  --v6-paper: var(--arq-deep);
}
.v5-projects,
.v5-projects .v5-project-sequence,
.detail-scale-v64, .detail-decision-v64, .detail-faq-v64,
[class*="-v64"][style*="background"] { background-color: var(--arq-deep) !important; }
/* NO se toca el fondo de `.v5-hero`: ese azul pálido va emparejado con un titular en
   blanco sobre la fotografía del héroe, y llevarlo al hielo dejó veinticuatro textos
   blancos sobre claro en seis páginas. Medido en producción y revertido en el acto: un
   suelo y su tinta son una sola decisión, y no se cambia la mitad. */
.lk-realwork-grid img, .lk-contact { background-color: var(--arq-ground) !important; }

/* Final layout contracts: shared by ES/CA, independent of legacy page themes. */
html { scroll-padding-top: 88px; }
#main { --arq-space: clamp(64px, 8vw, 120px); padding-top: 0 !important; }
#main :is(h1,h2,h3) { text-wrap: balance; }
#main :is(p,li) { text-wrap: pretty; }
#main :is(.container, figure, article) { min-width: 0; }

/* A stable paper navigation on every route, including over photography. */
html body header#site-header.site-header,
html body.home-v4 header#site-header.site-header.home-header,
html body.home-v4 header#site-header.site-header.home-header.is-scrolled {
  background: #fff !important; color: var(--arq-ink) !important;
  border-bottom: 1px solid var(--arq-line) !important;
  backdrop-filter: none !important; box-shadow: none !important;
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
}
html body header#site-header.site-header :is(.logo,.logo span,.logo small,.lang a,.menu-toggle,.nav__links > a,.arq-bar-contact) {
  color: var(--arq-ink) !important; text-shadow: none !important;
}
html body header#site-header.site-header .logo-mark { color: var(--arq-ink) !important; }
html body header#site-header.site-header .nav { min-height: 76px !important; }
html body header#site-header.site-header .nav::before,
html body header#site-header.site-header .nav::after { display: none !important; }
html body header#site-header.site-header .arq-bar-contact {
  border: 1px solid var(--arq-line-strong) !important; border-radius: 0 !important;
  background: transparent !important; padding: 12px 16px !important;
}
html body header#site-header.site-header .lang a { background: transparent !important; border-radius: 0 !important; }
html body header#site-header.site-header .lang a::before { display: none !important; }
html body header#site-header.site-header .lang a.active { border-bottom: 1px solid currentColor !important; }
html body header#site-header.site-header .menu-toggle {
  color: var(--arq-ink) !important; border-color: transparent !important;
  background-color: transparent !important; backdrop-filter: none !important;
  margin: 0 16px !important; flex: 0 0 44px;
}
html body.menu-open header#site-header.site-header .menu-toggle {
  background-image: none !important;
}
html body.menu-open header#site-header.site-header .menu-toggle::before,
html body.menu-open header#site-header.site-header .menu-toggle::after {
  display: block !important; left: 11px; width: 22px; top: 21px;
}
html body header#site-header.site-header :is(a,button):focus-visible,
#main :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid #3476ad !important; outline-offset: 5px;
}

/* The hero's wordmark, copy and photograph occupy separate grid rows. */
#main .lk-hero {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  grid-template-rows: auto 1fr; gap: 56px 32px;
  min-height: max(720px, 100svh) !important;
  padding: 132px var(--lk-pad) 64px !important;
  background: var(--arq-deep) !important; isolation: isolate;
}
#main .lk-hero-brand {
  position: relative !important; inset: auto !important; grid-column: 1 / -1;
  width: fit-content !important; max-width: 100% !important; height: auto !important;
  padding: 24px 32px !important; align-self: start; overflow: hidden !important;
}
#main .lk-hero-brand span {
  color: var(--arq-ink) !important; font-size: clamp(42px, 8.5vw, 140px) !important;
  line-height: .9 !important; letter-spacing: .06em !important;
}
#main .lk-hero-brand i { display: none; }
#main .lk-hero-copy {
  position: relative !important; inset: auto !important; grid-column: 1; grid-row: 2;
  align-self: end; width: 100% !important; padding: 0 !important; background: none !important;
  display: block !important;
}
#main .lk-hero-copy h1 {
  font-size: clamp(40px, 4.8vw, 76px) !important; line-height: 1 !important;
  max-width: 17ch !important; margin: 0 0 24px !important; color: #fff !important;
}
#main .lk-hero-copy p { max-width: 50ch !important; font-size: 16px !important; line-height: 1.65 !important; color: #fff !important; }
#main .lk-hero-copy a { color: #fff !important; }
#main .lk-hero-tagline {
  position: relative !important; inset: auto !important; grid-column: 2; grid-row: 2;
  align-self: start; width: 100% !important; padding: 0 !important;
}
#main .lk-hero-tagline :is(p,small) { color: #fff !important; }
#main .lk-hero-overlay { background: linear-gradient(180deg,rgba(4,16,30,.2),rgba(4,16,30,.16) 32%,rgba(4,16,30,.72)) !important; }
#main .lk-scroll-cue { color: #fff !important; right: var(--lk-pad); bottom: 40px; }

/* Shared opening scale. Utility pages have a compact editorial opening. */
#main > .page-hero { min-height: 0 !important; padding: 170px 0 72px !important; background: var(--arq-ground) !important; }
#main > .page-hero :is(h1,p,.eyebrow,.kicker,.breadcrumbs,a,span) { color: var(--arq-ink) !important; text-shadow: none !important; }
#main > .page-hero .container { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .65fr) !important; gap: 24px 56px !important; align-items: end !important; padding-block: 0 !important; min-height: 0 !important; }
#main > .page-hero h1 { grid-column: 1 !important; grid-row: 2 !important; }
#main > .page-hero p { grid-column: 2 !important; grid-row: 2 !important; }
#main > .page-hero .container::before, #main > .page-hero .container::after { display: none !important; }
#main > .page-hero :is(.eyebrow,.kicker,.breadcrumbs) { grid-column: 1 / -1; margin: 0 !important; }
#main > .page-hero h1 { font-size: clamp(40px, 5.3vw, 80px) !important; line-height: 1.02 !important; max-width: 19ch !important; margin: 0 !important; }
#main > .page-hero p { max-width: 40ch !important; margin: 0 !important; font-size: 16px !important; line-height: 1.65 !important; }
#main > .page-hero::before, #main > .page-hero::after { display: none !important; }
#main .v5-hero { min-height: 0 !important; background: var(--arq-deep) !important; }
#main .v5-hero-content {
  min-height: max(640px, 85svh) !important; padding-top: 154px !important; padding-bottom: 56px !important;
  display: flex !important; gap: 28px; justify-content: flex-end !important;
}
#main .v5-hero h1 { font-size: clamp(44px, 6.2vw, 96px) !important; line-height: .98 !important; max-width: 18ch !important; margin: 0 !important; }
#main .v5-hero .eyebrow { position: static !important; margin: 0 !important; }
#main .v5-hero-bottom { display: flex !important; justify-content: space-between; align-items: end !important; gap: 32px !important; width: 100% !important; margin: 0 !important; }
#main .v5-hero-bottom p { max-width: 53ch !important; margin: 0 !important; }
#main .v5-hero-bottom > * { position: static !important; background: none !important; backdrop-filter: none !important; }
#main .v5-hero-shade { background: linear-gradient(180deg,rgba(4,16,30,.12),rgba(4,16,30,.7)) !important; }
#main .v5-round-link { flex-shrink: 0; }
#main .detail-hero-v64 h1 { font-size: clamp(42px, 4.8vw, 76px) !important; line-height: 1.03 !important; max-width: 18ch !important; font-weight: 500 !important; letter-spacing: -.045em !important; }
#main .v53-services-hero { padding-top: 140px !important; padding-bottom: 64px !important; }
#main .v53-hero-shell { align-items: center !important; }
#main .v53-hero-copy h1 { font-size: clamp(42px, 5.4vw, 80px) !important; line-height: 1.02 !important; }
#main .v53-hero-media { min-height: 0 !important; height: clamp(360px, 45vw, 620px) !important; }
#main .v53-hero-main { inset: 0 !important; margin: 0 !important; height: 100% !important; }
#main .v53-hero-main img { display: block !important; opacity: 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#main .v53-action { background: transparent !important; color: var(--arq-on-dark) !important; border: 1px solid var(--arq-line-dark) !important; }

/* Inner galleries previously had no layout and used images' intrinsic heights. */
#main .lk-inner-gallery { padding: var(--arq-space) 0 !important; background: var(--arq-ground) !important; overflow: hidden; }
#main .lk-inner-gallery__head { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: start; margin-bottom: 40px; }
#main .lk-inner-gallery__head h2 { font-size: clamp(32px, 4vw, 60px) !important; line-height: 1.05 !important; margin: 0 !important; max-width: 23ch; }
#main .lk-inner-gallery__rail {
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 0 var(--lk-pad) 24px; scrollbar-width: thin;
  scrollbar-color: var(--arq-ink-muted) transparent;
}
#main .lk-inner-gallery__item { flex: 0 0 clamp(280px, 39vw, 640px); margin: 0; scroll-snap-align: center; }
#main .lk-inner-gallery__item img {
  display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3;
  object-fit: cover; max-height: 480px; border-radius: 0;
}
#main .lk-inner-gallery__item figcaption { display: flex; gap: 24px; padding: 16px 0; font-size: 12px !important; line-height: 1.5; border-bottom: 1px solid var(--arq-line); }
#main .lk-inner-gallery__item figcaption span { color: var(--arq-ink-muted) !important; }
#main :is(.need-map-v6,.scope-spectrum-v6,.decision-system-v6,.contact-brief-v6,.detail-register-v64,.detail-scale-v64,.detail-decision-v64,.detail-faq-v64,.detail-contact-v64) { padding-block: var(--arq-space) !important; }
#main :is(.need-map-v6__head,.scope-spectrum-v6__head,.decision-system-v6__head) h2 { font-size: clamp(32px, 4.1vw, 64px) !important; line-height: 1.08 !important; }
#main .scope-card-v6 img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
#main .scope-card-v6 figcaption { padding: 24px !important; }
#main .scope-card-v6 figcaption :is(strong,small,span) { color: var(--arq-ink) !important; }
#main .contact-brief-v6 h2 { font-size: clamp(34px, 4.3vw, 64px) !important; line-height: 1.05 !important; }
#main .editorial-btn { text-transform: uppercase; letter-spacing: .08em; }
#main .v5-hero :is(h1,p,a,.eyebrow,.kicker,span),
#main .detail-hero-v64 :is(h1,p,a,.kicker,.breadcrumbs,span,strong) { color: #fff !important; }
#main .lk-inner-gallery :is(h2,figcaption,.lk-kicker) { color: var(--arq-ink) !important; }
#main .detail-hero-v64 { min-height: 0 !important; background: var(--arq-deep) !important; }
#main .detail-hero-v64::before { display: none !important; }
#main .detail-hero-v64__inner {
  min-height: 760px !important; display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr) !important;
  gap: 28px 64px !important; padding-top: 112px !important; padding-bottom: 48px !important;
}
#main .detail-hero-v64 .breadcrumbs { grid-column: 1 / -1 !important; align-self: start !important; }
#main .detail-hero-v64__copy { grid-column: 1 !important; align-self: center; }
#main .detail-hero-v64__media { inset: 0 0 0 51% !important; }
#main .detail-hero-v64__media::after { background: linear-gradient(90deg,var(--arq-deep),rgba(8,18,31,.08) 60%) !important; }
#main .detail-hero-v64__facts {
  grid-column: 1 / -1 !important; display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 24px !important;
  border-top: 1px solid var(--arq-line-dark); padding-top: 24px; align-self: end;
  background: var(--arq-deep);
}
#main .detail-hero-v64__facts > div { padding: 0 !important; border: 0 !important; }
#main .detail-hero-v64__facts span { display: block; font-size: 10px !important; letter-spacing: .12em; margin-bottom: 10px; }
#main .detail-hero-v64__facts strong { font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; }
#main .detail-scale-v64__item { min-height: 300px !important; padding: 28px !important; }
#main .detail-scale-v64__item h3 { font-size: clamp(24px,2.5vw,36px) !important; line-height: 1.08 !important; }
#main .detail-register-v64__head h2,
#main .detail-scale-v64__head h2,
#main .detail-decision-v64 h2,
#main .detail-faq-v64 h2 { font-size: clamp(34px,4vw,60px) !important; line-height: 1.06 !important; }
#main .detail-register-v64__row { padding-block: 28px !important; }
#main .detail-hero-v64__copy .kicker { margin: 0 0 24px !important; }
#main .detail-hero-v64__copy h1 { margin: 0 0 24px !important; }
#main .detail-hero-v64__copy p { margin: 0 !important; }
#main .detail-hero-v64__actions { margin-top: 24px !important; }
#main .detail-hero-v64__actions .btn { font-size: 10px !important; letter-spacing: .05em !important; padding: 14px !important; }
#main #solicitud { padding: 64px 0 !important; }
#main #solicitud .contact-info { transform: none !important; margin-top: 0 !important; padding: 32px !important; }
#main #solicitud .contact-info h2 { font-size: clamp(28px,3vw,42px) !important; line-height: 1.12 !important; }
#main .detail-register-v64__row h3 { font-size: clamp(22px,2.1vw,30px) !important; line-height: 1.15 !important; }
#main .detail-visual-v64 img { height: auto !important; width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; }
#main .lk-atlas-head { grid-template-columns: repeat(12,minmax(0,1fr)); }
#main .lk-atlas-head h2 { grid-column: 4 / 10; }
#main .lk-atlas-head p { grid-column: 10 / 13; }

/* Native gallery without JS; pinned horizontal passage only when motion is armed. */
#main .lk-gallery { overflow: clip !important; }
#main .lk-gallery-viewport { height: auto; overflow-x: auto; }
#main .lk-gallery-track { height: min(70svh,720px); }
#main .lk-gallery-viewport.lk-horizontal { overflow: clip; }
#main .lk-horizontal .lk-gallery-track { position: sticky; top: 76px; height: calc(100svh - 100px); }
#main .lk-gallery-viewport:not(.lk-horizontal) { scroll-snap-type: x mandatory; }
#main .lk-gallery-viewport:not(.lk-horizontal) .lk-shot { scroll-snap-align: start; }
#main .lk-inner-gallery__rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

@media (max-width: 900px) {
  #main .detail-hero-v64__inner { grid-template-columns: 1fr !important; gap: 32px !important; padding-top: 104px !important; }
  #main .detail-hero-v64__media { inset: 0 !important; opacity: .32; }
  #main .detail-hero-v64__media::after { background: linear-gradient(0deg,var(--arq-deep),transparent) !important; }
  #main .detail-hero-v64__facts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #main .detail-scale-v64__grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #main .lk-hero { grid-template-columns: 1fr; min-height: max(760px,100svh) !important; gap: 48px; padding: 112px var(--lk-pad) 88px !important; }
  #main .lk-hero-brand { padding: 20px !important; }
  #main .lk-hero-brand span { font-size: 9.8vw !important; }
  #main .lk-hero-tagline { display: none !important; }
  #main .lk-hero-copy { grid-column: 1; }
  #main .lk-hero-copy h1 { max-width: 17ch !important; font-size: clamp(38px,6.4vw,58px) !important; }
  #main .lk-scroll-cue { display: none !important; }
  #main > .page-hero { padding: 128px 0 56px !important; }
  #main > .page-hero .container { grid-template-columns: 1fr !important; gap: 24px !important; }
  #main > .page-hero p { grid-column: 1 !important; grid-row: 3 !important; }
  #main > .page-hero h1 { max-width: 20ch !important; }
  #main .v5-hero-content { min-height: 680px !important; padding-top: 136px !important; }
  #main .v5-hero-bottom { flex-direction: column; align-items: flex-start !important; gap: 24px !important; }
  #main .v5-hero h1 { font-size: clamp(40px,7.5vw,68px) !important; }
  #main .lk-inner-gallery__head { grid-template-columns: 1fr; }
  #main .lk-inner-gallery__item { flex-basis: 76vw; }
  #main .lk-atlas-head { display: flex !important; flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 600px) {
  html body header#site-header.site-header .nav { gap: 12px !important; }
  html body header#site-header.site-header .arq-bar-actions { gap: 6px !important; margin-left: auto !important; }
  html body header#site-header.site-header .logo { gap: 8px !important; }
  html body header#site-header.site-header .logo > span:last-child { font-size: 11px !important; letter-spacing: .12em !important; }
  html body header#site-header.site-header .logo-mark { width: 24px !important; }
  html body header#site-header.site-header .lang { gap: 4px !important; margin: 0 !important; }
  html body header#site-header.site-header .lang a { padding: 6px 3px !important; }
  html body header#site-header.site-header .menu-toggle { flex-basis: 32px !important; width: 32px !important; margin: 0 !important; }
  #main .detail-scale-v64__grid { grid-template-columns: 1fr !important; }
  #main .detail-scale-v64__item { min-height: 0 !important; gap: 20px; padding: 28px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--arq-line-dark) !important; }
  #main .detail-hero-v64__facts { gap: 24px 16px !important; }
  html body header#site-header.site-header .nav { min-height: 64px !important; }
  html body header#site-header.site-header .logo small { display: none !important; }
  html body header#site-header.site-header .logo { font-size: 12px !important; }
  html body header#site-header.site-header .arq-bar-contact { padding: 10px !important; font-size: 10px !important; }
  html body header#site-header.site-header .menu-toggle { margin: 0 4px !important; }
  #main .lk-hero { min-height: max(700px,100svh) !important; padding-top: 104px !important; padding-bottom: 96px !important; }
  #main .lk-hero-brand { padding: 18px 14px !important; }
  #main .lk-hero-brand span { font-size: 10vw !important; letter-spacing: .045em !important; }
  #main .lk-hero-copy h1 { font-size: clamp(36px,10vw,48px) !important; }
  #main .lk-hero-copy p { font-size: 15px !important; }
  #main .v5-hero-content { min-height: 660px !important; padding-top: 120px !important; padding-bottom: 56px !important; }
  #main .v5-hero h1 { font-size: clamp(36px,10.5vw,52px) !important; }
  #main .detail-hero-v64 h1 { font-size: clamp(36px,10vw,48px) !important; }
  #main .lk-inner-gallery__rail { gap: 16px; }
  #main .lk-inner-gallery__item { flex-basis: 84vw; }
  #main .lk-inner-gallery__head h2 { font-size: 32px !important; }
  #main .v53-services-hero { padding-top: 108px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #main *, #main *::before, #main *::after { animation: none !important; transition: none !important; }
  #main .reveal, #main .lk-hero-brand, #main .lk-hero-brand span, #main .lk-hero-copy > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* ==========================================================================
   7. Tres textos que la pasada anterior no alcanzó.

   La sección 6 unificó tinta y fondo por familias de elemento, pero se le
   escaparon los que heredan de un COMPONENTE y no del cuerpo. Medido en
   producción el 13-09-2026 con un navegador real, a 360, 430, 768, 1024, 1280
   y 1920 px:

   · La flecha de los botones: `↗` en #223550 sobre el azul del botón #071a38.
     **1,39:1**. El mínimo legible es 4,5. La flecha estaba, pero no se veía:
     el `<span>` cogía la tinta del cuerpo en lugar de la del botón.
   · La etiqueta de las filas de `need-map-v6` («Selección», «Cocina»,
     «Reforma integral»): #223550 sobre el azul profundo #08121f de la sección
     del inicio. **1,52:1**. Invisible.
   · La flecha de esas mismas filas: #c8a97e —el dorado de una paleta
     anterior— **2,23:1** sobre el azul profundo, y no mucho mejor sobre el
     blanco de /servicios.

   Los tres tienen la misma causa y el mismo arreglo: son partes de una pieza,
   no textos sueltos, así que su tinta es la de la pieza. `inherit` los ata al
   color que el sistema ya calcula bien para cada fondo —claro sobre oscuro,
   oscuro sobre claro— en vez de fijar un color que solo acierta en la mitad de
   las páginas.
   ========================================================================== */

/* La flecha y el signo de un botón son el botón. */
body :where(.editorial-btn, .btn, .btn-primary, .cta-primary, .v53-action,
            .arq-tnd-bag__pay, .arq-tnd-card__add, .arq-tnd-card__go,
            .arq-tnd-bar__go) :where(span, i, b, small) {
  color: inherit !important;
}

/* La etiqueta y la flecha de una fila son la fila.

   Con `:where()` esto no funcionaba: `:where()` vale CERO de especificidad, y
   enfrente hay `.need-row-v6 b{color:#3f403a!important}` y, solo en el inicio,
   `.home-v4 .need-row-v6 .arrow{...}`. Medido tras desplegar: la etiqueta
   seguia en 1,52:1. Aqui hace falta peso de verdad, no elegancia. */
html body .need-map-v6 .need-row-v6 b,
html body .need-map-v6 .need-row-v6 .arrow,
html body .need-map-v6 .need-row-v6 > span,
html body .need-row-v6 b,
html body .need-row-v6 .arrow {
  color: inherit !important;
}

/* La fila del inicio hereda una tinta con alfa .82; la etiqueta es el dato que
   se busca de un vistazo y quiere el contraste entero. */
html body .need-row-v6 b { opacity: 1; font-weight: 600; }

/* ==========================================================================
   8. Lo que hay que poder tocar con un dedo.

   Medido con un movil emulado de 390 px: los tres enlaces de la tarjeta de
   contacto del inicio —telefono, WhatsApp y correo, que son las tres puertas
   por las que entra el trabajo— median **10 px de alto**. Los avisos legales
   del pie, 14. Y dos llamadas a la accion, 18 y 25.

   La referencia habitual son 44 px: menos que eso no es un boton, es una
   apuesta. Se resuelve con alto minimo y centrado, sin tocar la composicion de
   escritorio ni el tamano de la letra, y sin meterse con los enlaces que van
   DENTRO de una frase, que se tocan por su linea y no por su caja.
   ========================================================================== */
@media (max-width: 700px) {
  html body :is(.lk-contact-meta,
                .lk-range-copy,
                .scope-spectrum-v6__foot,
                .arq-footer-v65__legal,
                .arq-footer-v65__links > div,
                .footer-v4__links > div) > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
