/* =========================================================================
   Consultores De la Torre Villarreal y Asociados
   Dirección: editorial, con un azul eléctrico como color de marca.

   Reglas de la casa, en orden de importancia:
   1. Un solo color, usado en grande. Azul eléctrico en bloques enteros, no
      en detalles decorativos. El naranja aparece en dosis mínimas.
   2. No hay esquinas redondeadas, sombras ni degradados. La jerarquía se
      construye con reglas de 1px, escala y espacio.
   3. La fotografía va a color, con un empuje leve de contraste y saturación.
   4. Todo color vive como token aquí. Nunca un hex dentro de un componente.
   ========================================================================= */

:root {
  /* --- Color ------------------------------------------------------------ */
  --ink:        #101010;
  --ink-soft:   #3A3A38;
  --muted:      #56564F;
  --paper:      #F1EFE9;
  --paper-2:    #E7E4DC;
  --white:      #FFFFFF;

  /* Azul eléctrico: blanco encima da 7.2:1. Es el color de marca del sitio,
     no el azul corporativo lavado de la categoría. */
  --brand:      #2440E0;
  --brand-dk:   #1A2FA8;
  --brand-lt:   #7C93FF;   /* para texto sobre fondos oscuros (6.4:1) */
  --brand-tint: #E4E7FC;

  /* Naranja: sólo como marca gráfica o relleno. Nunca texto sobre papel. */
  --accent:     #FF6A2B;

  --rule:       #101010;
  --rule-soft:  rgba(16, 16, 16, .16);
  --rule-inv:   rgba(255, 255, 255, .22);

  --on-ink:     #FFFFFF;
  --on-ink-mut: rgba(255, 255, 255, .66);

  --focus:      #2440E0;
  --focus-inv:  #FFFFFF;

  /* --- Tipografía ------------------------------------------------------- */
  --f-display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --f-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display:  clamp(2.875rem, 1.1rem + 7.4vw, 7rem);
  --fs-display-s: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
  --fs-big:      clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  --fs-body:     1rem;
  --fs-small:    .875rem;
  --fs-kicker:   .75rem;

  /* --- Espaciado -------------------------------------------------------- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;

  --band-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3.5rem);
  --wrap: 1360px;

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --t-fast: 140ms;
  --t-base: 300ms;

  --z-sticky: 40;
  --z-float: 60;
  --z-nav: 80;
  --z-skip: 100;

  color-scheme: light;
}

/* =========================================================================
   Reset
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, dd, dl { margin: 0; }
ul, ol, dl { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.invert :where(a, button):focus-visible,
.ft :where(a, button):focus-visible { outline-color: var(--focus-inv); }

::selection { background: var(--brand); color: var(--white); }

.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* =========================================================================
   Tipografía
   ========================================================================= */

.display, .display-sm {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: .9;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); }
.display-sm { font-size: var(--fs-display-s); line-height: .94; }

.kicker {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
}
.kicker-inv { color: var(--brand-lt); }

/* Una palabra de la frase va en color: el titular carga el acento, no un
   adorno suelto. */
.display em, .display-sm em { font-style: normal; color: var(--brand); }
.invert .display em { color: var(--brand-lt); }

.big-text {
  font-size: var(--fs-big);
  line-height: 1.5;
  letter-spacing: -.01em;
}
.big-text strong { font-weight: 700; }

/* =========================================================================
   Fotografía — a color, con un empuje leve
   ========================================================================= */

.hero-fig img,
.col-fig img,
.invert-fig img,
.profiles img {
  filter: contrast(1.06) saturate(1.08);
  width: 100%;
  object-fit: cover;
}

/* =========================================================================
   Botones — rectángulos, sin radio
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid var(--brand);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn-solid { background: var(--brand); color: var(--on-ink); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--brand); border-color: var(--brand); color: var(--on-ink); }

.btn-solid-inv {
  background: var(--brand);
  color: var(--on-ink);
  border-color: var(--brand);
}
.btn-solid-inv:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
.btn-wide { display: flex; width: 100%; }

/* =========================================================================
   Iconos
   El glifo de WhatsApp es un logotipo: va relleno, nunca como trazo. A 17px
   un contorno de 1.8 se convierte en mancha.
   ========================================================================= */

.ico-wa { fill: currentColor; stroke: none; width: 16px; height: 16px; flex: none; }
.wa .ico-wa { width: 22px; height: 22px; }

/* =========================================================================
   Header
   ========================================================================= */

.hd {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hd-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  min-height: 74px;
}

.hd-brand { display: flex; align-items: center; gap: var(--sp-3); }

/* El original es un JPEG con fondo blanco: `multiply` funde ese blanco con el
   papel en lugar de dejar un recuadro flotando. */
.brand-img {
  height: 44px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  flex: none;
  mix-blend-mode: multiply;
}
.hd-name {
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rule-soft);
}

.hd-nav { display: none; }
.hd-nav a {
  position: relative;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-block: var(--sp-2);
}
.hd-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.hd-nav a:hover::after, .hd-nav a.is-active::after { transform: scaleX(1); }

.hd-act { display: flex; align-items: center; gap: var(--sp-3); }
.hd-cta { display: none; }

.hd-tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-right: -10px;
  cursor: pointer;
  touch-action: manipulation;
}
.hd-tog span { display: block; width: 24px; }
.hd-tog i {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.hd-tog i + i { margin-top: 5px; }
.hd-tog[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-tog[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hd-tog[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

@media (max-width: 979px) {
  .hd-nav {
    position: fixed;
    inset: 74px 0 0;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    padding: var(--sp-5) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
    overflow-y: auto;
  }
  .hd-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .hd-nav a {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
    letter-spacing: -.02em;
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--rule);
  }
  .hd-nav a::after { display: none; }
}

@media (min-width: 980px) {
  .hd-nav { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.5vw, 2rem); }
  .hd-cta { display: inline-flex; }
  .hd-tog { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero { border-bottom: 1px solid var(--rule); }

.hero-in {
  display: grid;
  max-width: var(--wrap);
  margin-inline: auto;
}

.hero-copy {
  padding: clamp(2.5rem, 1.4rem + 4.4vw, 5rem) var(--gutter) clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.hero-copy h1 { margin-bottom: var(--sp-6); }
.hero-lede {
  max-width: 44ch;
  font-size: var(--fs-big);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--sp-7);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero-fig { margin: 0; border-top: 1px solid var(--rule); }
.hero-fig img { aspect-ratio: 16 / 10; object-position: 56% 50%; }

@media (min-width: 980px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: stretch; }
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--rule);
    padding-block: clamp(3rem, 1rem + 5vw, 6rem);
  }
  .hero-fig { border-top: 0; display: flex; }
  .hero-fig img { aspect-ratio: auto; height: 100%; min-height: 34rem; }
}

/* Franja de metadatos bajo el hero */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wrap);
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.meta-strip li {
  padding: var(--sp-4) var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.meta-strip li + li { border-left: 1px solid var(--rule-soft); }
.meta-strip span {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.meta-strip b {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

@media (min-width: 760px) {
  .meta-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meta-strip li { border-bottom: 0; }
}

/* =========================================================================
   Cifras
   ========================================================================= */

/* El bloque de cifras es la entrada de color: azul entero, a sangre. */
.figures {
  background: var(--brand);
  color: var(--on-ink);
}
.figures ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wrap);
  margin-inline: auto;
}
.figures li {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--gutter);
  border-bottom: 1px solid var(--rule-inv);
}
.figures li:nth-child(odd) { border-right: 1px solid var(--rule-inv); }
.figures b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}
.figures span {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--on-ink-mut);
  max-width: 22ch;
}

@media (min-width: 900px) {
  .figures ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figures li { border-bottom: 0; border-right: 1px solid var(--rule-inv); }
  .figures li:last-child { border-right: 0; }
}

/* =========================================================================
   Bandas de contenido
   ========================================================================= */

.band {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: var(--band-y);
  border-bottom: 1px solid var(--rule);
}
.band:last-of-type { border-bottom: 0; }
.band-tight { padding-block: clamp(3rem, 1.8rem + 4.4vw, 5.5rem); }

.band-head {
  padding-inline: var(--gutter);
  margin-bottom: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
}
.band-head .kicker { margin-bottom: var(--sp-5); }
.band-lede {
  margin-top: var(--sp-5);
  max-width: 44ch;
  font-size: var(--fs-big);
  color: var(--ink-soft);
}

.band-body { padding-inline: var(--gutter); }

.band-note {
  padding-inline: var(--gutter);
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--muted);
}
.band-note a {
  color: var(--brand);
  font-weight: 700;
  border-bottom: 2px solid var(--brand);
}

/* --- Dos columnas ------------------------------------------------------- */

.two-col { display: grid; gap: clamp(2rem, 1.2rem + 3.2vw, 4rem); align-items: start; }
.col-text > * + * { margin-top: var(--sp-5); }
.col-text p { color: var(--ink-soft); max-width: 54ch; }
.col-text .big-text { color: var(--ink); }
.col-text .display-sm { margin-block: var(--sp-4) var(--sp-2); }
.col-fig { margin: 0; }
.col-fig img { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .two-col-rev .col-fig { order: 2; }
}

.rule-list { border-top: 1px solid var(--rule); margin-top: var(--sp-6); }
.rule-list li {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9375rem;
  font-weight: 500;
}
.rule-list li::before {
  content: "—";
  flex: none;
  color: var(--brand);
}

/* --- Retícula dura de coberturas ---------------------------------------- */

.grid-hard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
  margin-inline: var(--gutter);
}
.grid-hard li {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.grid-hard .num {
  display: block;
  font-family: var(--f-display);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--brand);
  margin-bottom: var(--sp-4);
}
.grid-hard h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: var(--sp-3);
}
.grid-hard p { font-size: .9375rem; color: var(--ink-soft); max-width: 40ch; }

@media (min-width: 700px) {
  .grid-hard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-hard li { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; }
  .grid-hard li:nth-child(2n) { padding-left: var(--sp-6); border-left: 1px solid var(--rule-soft); padding-right: 0; }
}
@media (min-width: 1040px) {
  .grid-hard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-hard li { padding: var(--sp-7) var(--sp-6) var(--sp-7) 0; border-left: 0; }
  .grid-hard li:nth-child(3n+2),
  .grid-hard li:nth-child(3n+3) { padding-left: var(--sp-6); border-left: 1px solid var(--rule-soft); }
  .grid-hard li:nth-child(3n+3) { padding-right: 0; }
}

/* =========================================================================
   Sección invertida — colectividades
   ========================================================================= */

.invert {
  display: grid;
  background: var(--ink);
  color: var(--on-ink);
}
.invert-in {
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter);
  max-width: 46rem;
  margin-inline: auto;
  width: 100%;
}
.invert-copy .kicker { margin-bottom: var(--sp-5); }
/* "COLECTIVIDADES." son 15 caracteres en Archivo Black: a la escala del hero
   se sale de la columna y cae sobre la foto. Escala propia, más contenida. */
.invert-copy h2 {
  font-size: clamp(2rem, .9rem + 3.9vw, 4.25rem);
  margin-bottom: var(--sp-6);
}
.invert-copy .big-text { color: var(--on-ink-mut); max-width: 46ch; }
.invert-copy .big-text strong { color: var(--on-ink); }

.steps-inv {
  border-top: 1px solid var(--rule-inv);
  margin-block: var(--sp-7);
}
.steps-inv li {
  display: flex;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--rule-inv);
}
.steps-inv span {
  flex: none;
  font-family: var(--f-display);
  font-size: .8125rem;
  color: var(--brand-lt);
  padding-top: 3px;
}
.steps-inv p { font-size: .9375rem; color: var(--on-ink-mut); }

.invert-fig { margin: 0; }
.invert-fig img { aspect-ratio: 16 / 10; }

@media (min-width: 980px) {
  .invert { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .invert-in { margin: 0; max-width: none; padding-right: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .invert-fig { display: flex; }
  .invert-fig img { aspect-ratio: auto; height: 100%; }
}

/* =========================================================================
   Perfiles
   ========================================================================= */

.profiles {
  display: grid;
  gap: 0;
  margin-inline: var(--gutter);
  border-top: 1px solid var(--rule);
}
.profiles li { padding-block: var(--sp-6); border-bottom: 1px solid var(--rule-soft); }
.profiles figure { margin: 0 0 var(--sp-5); }
.profiles img { aspect-ratio: 3 / 2; }
.profiles h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: var(--sp-3);
}
.profiles p { font-size: .9375rem; color: var(--ink-soft); }

@media (min-width: 840px) {
  .profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profiles li { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; border-bottom: 0; }
  .profiles li + li { padding-left: var(--sp-5); border-left: 1px solid var(--rule-soft); }
  .profiles li:last-child { padding-right: 0; }
}

/* =========================================================================
   Proceso — filas tipo tabla
   ========================================================================= */

.table-steps {
  margin-inline: var(--gutter);
  border-top: 1px solid var(--rule);
}
.table-steps li {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule-soft);
}
.ts-n {
  font-family: var(--f-display);
  font-size: .8125rem;
  color: var(--brand);
  letter-spacing: .04em;
}
.table-steps h3 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.018em;
}
.table-steps p { font-size: .9375rem; color: var(--ink-soft); max-width: 52ch; }

@media (min-width: 860px) {
  .table-steps li {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: baseline;
    padding-block: var(--sp-7);
  }
}

/* =========================================================================
   Contacto
   ========================================================================= */

.contact {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-inline: var(--gutter);
}

.contact-dl { border-top: 1px solid var(--rule); }
.contact-dl > div {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule-soft);
}
.contact-dl dt {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-dl dd { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.contact-dl a {
  color: var(--brand);
  border-bottom: 1.5px solid var(--brand-tint);
  transition: border-color var(--t-fast) var(--ease);
  display: inline-block;
  padding-block: 3px;
}
.contact-dl a:hover { border-color: var(--brand); }

@media (min-width: 720px) {
  .contact-dl > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-5); align-items: baseline; }
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.contact-side { display: grid; gap: var(--sp-4); align-content: start; }

.map {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  min-height: 22rem;
}
.map iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
}
/* Si el navegador bloquea el iframe, el panel sigue diciendo algo útil. */
.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--sp-5);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--muted);
}
.map-link {
  position: absolute;
  z-index: 2;
  left: 0; bottom: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  background: var(--brand);
  color: var(--on-ink);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.map-link:hover { background: var(--ink); }

/* =========================================================================
   Footer
   ========================================================================= */

.ft {
  background: var(--ink);
  color: var(--on-ink-mut);
  padding-block: var(--sp-8) calc(var(--sp-7) + env(safe-area-inset-bottom));
  font-size: var(--fs-small);
}
.ft-in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.ft-top {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--rule-inv);
}
/* El logotipo es arte negro sobre blanco: invertido y en `screen` se integra
   al fondo negro sin recuadro. */
.ft-logo {
  height: 56px;
  width: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}
.ft-name {
  font-family: var(--f-display);
  font-size: 1.125rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--on-ink);
}
.ft-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.ft-nav a {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-block: var(--sp-2);
  transition: color var(--t-fast) var(--ease);
}
.ft-nav a:hover { color: var(--brand-lt); }

.ft-meta { display: grid; gap: var(--sp-2); padding-block: var(--sp-6); }
.ft-meta a { border-bottom: 1px solid var(--rule-inv); }
.ft-meta a:hover { color: var(--brand-lt); border-color: currentColor; }

.ft-legal { font-size: .75rem; max-width: 64ch; opacity: .74; }
.ft-copy { margin-top: var(--sp-4); font-size: .75rem; opacity: .6; }

@media (min-width: 900px) {
  .ft-top { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); }
  .ft-nav { justify-content: flex-end; }
}

/* =========================================================================
   WhatsApp flotante — rectángulo negro, coherente con el resto
   ========================================================================= */

.wa {
  position: fixed;
  right: 0;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand);
  color: var(--on-ink);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1.5px solid var(--brand);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.wa:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 599px) {
  .wa { padding: var(--sp-3); width: 56px; justify-content: center; }
  .wa-t {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* =========================================================================
   Entrada
   Sobria a propósito: en un sistema de reglas duras, el movimiento grande
   delata la plantilla. Sólo un desvanecido corto.
   ========================================================================= */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.no-js .reveal { opacity: 1; transform: none; }

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

[id] { scroll-margin-top: 90px; }

/* =========================================================================
   Impresión
   ========================================================================= */

@media print {
  .hd, .wa, .map, .hero-fig, .col-fig, .invert-fig, .profiles figure { display: none !important; }
  body { background: #fff; color: #000; }
  .figures, .invert, .ft { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1; transform: none; }
}