/* ==========================================================================
   Aluminios Bertrán — sistema de diseño
   CSS puro, sin frameworks. Archivo único: public/global.css
   Concepto: hoja de plano técnico. Retícula, filetes, monoespaciada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paletas
   Cinco sistemas de color completos, y cinco familias distintas entre sí:
   no son cinco tintes del mismo beige, cada una cambia de estructura.

   Pizarra  monocromo de grafito frío con un pop de azul eléctrico
   Granate  vino profundo sobre papel frío, con la franja de contacto tintada
   Arcilla  papel de arcilla cálido con coral vivo
   Tiza     tiza clara, titulares casi negros y naranja quemado
   Bosque   verde profundo invertido, con lima: la única que invierte el valor

   Se activan con el atributo data-palette en <html>. Todas las combinaciones
   pasan el contraste WCAG AA (tools/paletas-contraste.mjs y tools/audit.mjs).
   -------------------------------------------------------------------------- */

:root {
  /* Pizarra (por defecto): grafito frío, titulares casi negros, azul eléctrico. */
  --bg: #e6e6e9;
  --bg-alt: #dbdbdf;
  --surface: #f6f6f8;
  --heading: #17171b;
  --ink: #17171b;
  --ink-soft: #4b4b55;
  --ink-faint: #63636e;
  --line: #cbcbd2;
  --line-soft: #e2e2e7;
  --accent: #1d4ed8;
  --accent-ink: #1739a6;
  --accent-soft: #dde4fb;
  --on-accent: #ffffff;
  --band: #16161b;
  --band-ink: #f2f2f4;
  --band-soft: #8d8d99;
  --band-line: #2a2a32;
  --band-accent: #7aa2ff;

  /* Tipografía */
  --font-display: 'Archivo', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Retícula */
  --content: min(1240px, calc(100vw - 48px));
  --content-narrow: min(880px, calc(100vw - 48px));
  --gutter: 24px;
  --band-y: clamp(64px, 8vw, 116px);

  /* Ritmo */
  --r: 0px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Granate: vino profundo sobre papel frío. La franja de contacto va tintada. */
:root[data-palette='granate'] {
  --bg: #edeef1;
  --bg-alt: #e3e5ea;
  --surface: #f8f8fa;
  --heading: #6a0f2e;
  --ink: #18191d;
  --ink-soft: #4b4d56;
  --ink-faint: #6a6c76;
  --line: #d3d5dc;
  --line-soft: #e6e8ed;
  --accent: #a4133c;
  --accent-ink: #7d0f2d;
  --accent-soft: #f8e2e9;
  --on-accent: #ffffff;
  --band: #3a0a1c;
  --band-ink: #fbeef2;
  --band-soft: #c9a3b0;
  --band-line: #5c1730;
  --band-accent: #ff9ab8;
}

/* Arcilla: papel de arcilla cálido, titulares oxblood y coral vivo. */
:root[data-palette='arcilla'] {
  --bg: #f2ece7;
  --bg-alt: #e8e0d9;
  --surface: #fbf7f4;
  --heading: #7a2412;
  --ink: #1f1a17;
  --ink-soft: #584d47;
  --ink-faint: #6e625b;
  --line: #e1d6ce;
  --line-soft: #ece4dd;
  --accent: #bb3318;
  --accent-ink: #a52e16;
  --accent-soft: #f9e2da;
  --on-accent: #ffffff;
  --band: #20150f;
  --band-ink: #f6ece6;
  --band-soft: #a89a92;
  --band-line: #35251c;
  --band-accent: #f5917a;
}

/* Tiza: tiza clara y neutra, titulares casi negros, naranja quemado. */
:root[data-palette='tiza'] {
  --bg: #f7f7f5;
  --bg-alt: #eeeeeb;
  --surface: #fdfdfc;
  --heading: #171717;
  --ink: #171717;
  --ink-soft: #4d4d4d;
  --ink-faint: #6b6b6b;
  --line: #e2e2df;
  --line-soft: #eeeeec;
  --accent: #c2410c;
  --accent-ink: #9a3412;
  --accent-soft: #fbe6d9;
  --on-accent: #ffffff;
  --band: #1b1b1b;
  --band-ink: #f6f6f5;
  --band-soft: #969691;
  --band-line: #2f2f2e;
  --band-accent: #fb923c;
}

/* Bosque: verde profundo invertido con lima. Invierte la estructura de valor. */
:root[data-palette='bosque'] {
  --bg: #11180f;
  --bg-alt: #161e13;
  --surface: #1d2718;
  --heading: #b9dc82;
  --ink: #e9f0e2;
  --ink-soft: #b0bda6;
  --ink-faint: #88957f;
  --line: #2a3626;
  --line-soft: #212b1e;
  --accent: #a8d94f;
  --accent-ink: #c2ea7d;
  --accent-soft: #22301a;
  --on-accent: #16210d;
  --band: #0a1008;
  --band-ink: #e9f0e2;
  --band-soft: #88957f;
  --band-line: #1f2a1c;
  --band-accent: #b9e366;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e12;
    --bg-alt: #141419;
    --surface: #1a1a20;
    --heading: #f0f0f3;
    --ink: #ededf1;
    --ink-soft: #a9a9b4;
    --ink-faint: #82828d;
    --line: #2a2a33;
    --line-soft: #212129;
    --accent: #7aa2ff;
    --accent-ink: #a3c0ff;
    --accent-soft: #171a2b;
    --on-accent: #0c0f1c;
    --band: #08080b;
    --band-ink: #ededf1;
    --band-soft: #82828d;
    --band-line: #23232b;
    --band-accent: #7aa2ff;
  }

  :root[data-palette='granate'] {
    --bg: #150a10;
    --bg-alt: #1c0e16;
    --surface: #24131c;
    --heading: #f4a8bd;
    --ink: #f6eef1;
    --ink-soft: #c3aab3;
    --ink-faint: #9d838d;
    --line: #3a1f2b;
    --line-soft: #2b1720;
    --accent: #f2708f;
    --accent-ink: #ff9ab4;
    --accent-soft: #33121f;
    --on-accent: #24060f;
    --band: #0d0508;
    --band-ink: #f6eef1;
    --band-soft: #9d838d;
    --band-line: #291522;
    --band-accent: #f2708f;
  }

  :root[data-palette='arcilla'] {
    --bg: #17110e;
    --bg-alt: #1e1713;
    --surface: #261d18;
    --heading: #f0a184;
    --ink: #f7efe9;
    --ink-soft: #c2b3aa;
    --ink-faint: #9c8b81;
    --line: #372a23;
    --line-soft: #2c211b;
    --accent: #f2795c;
    --accent-ink: #ffa389;
    --accent-soft: #33190f;
    --on-accent: #1d0c06;
    --band: #0f0a08;
    --band-ink: #f7efe9;
    --band-soft: #9c8b81;
    --band-line: #2b1f19;
    --band-accent: #f2795c;
  }

  :root[data-palette='tiza'] {
    --bg: #121212;
    --bg-alt: #181818;
    --surface: #1e1e1e;
    --heading: #fafaf8;
    --ink: #f2f2f0;
    --ink-soft: #adada9;
    --ink-faint: #868682;
    --line: #2b2b2a;
    --line-soft: #212120;
    --accent: #fb923c;
    --accent-ink: #fdba74;
    --accent-soft: #2e1a0c;
    --on-accent: #1c0f04;
    --band: #0b0b0b;
    --band-ink: #f2f2f0;
    --band-soft: #868682;
    --band-line: #242423;
    --band-accent: #fb923c;
  }

  :root[data-palette='bosque'] {
    --bg: #0b1008;
    --bg-alt: #10160c;
    --surface: #161d10;
    --heading: #c6e793;
    --ink: #eef3e8;
    --ink-soft: #b6c2ad;
    --ink-faint: #8e9b85;
    --line: #26301f;
    --line-soft: #1d2618;
    --accent: #b9e366;
    --accent-ink: #cdee90;
    --accent-soft: #1f2a15;
    --on-accent: #12190a;
    --band: #070b05;
    --band-ink: #eef3e8;
    --band-soft: #8e9b85;
    --band-line: #1c2517;
    --band-accent: #c6e793;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Sin esto, el atributo height del HTML impone la altura y anula el aspect-ratio */
img {
  height: auto;
}

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

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   Tipografía base
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--heading);
}

h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
}

h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

p {
  max-width: 62ch;
}

.lede {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.mono--accent {
  color: var(--accent);
}

.section-intro {
  max-width: 58ch;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Retícula
   -------------------------------------------------------------------------- */

.shell {
  width: var(--content);
  margin-inline: auto;
}

.shell--narrow {
  width: var(--content-narrow);
}

.section {
  padding-block: var(--band-y);
}

.section--alt {
  background: var(--bg-alt);
}

.section__head {
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.section__head--center {
  text-align: center;
}

.section__head--center .lede,
.section__head--center p {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.28s var(--ease),
    color 0.28s var(--ease),
    border-color 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--accent);
  color: var(--on-accent);
}

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

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--accent:hover {
  background: var(--accent-ink);
  color: var(--on-accent);
}

.btn--band {
  background: var(--band-ink);
  color: var(--band);
}

.btn--band:hover {
  background: var(--band-accent);
  color: var(--band);
}

.btn__arrow {
  transition: transform 0.28s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.brand__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-block: 6px;
  transition: color 0.25s var(--ease);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a:hover::after {
  transform: scaleX(1);
}

/* El CTA del menú solo aparece cuando la cabecera lo esconde (móvil). */
.nav__cta {
  display: none;
}

/* --------------------------------------------------------------------------
   Selector de idioma
   -------------------------------------------------------------------------- */

.lang {
  position: relative;
  flex-shrink: 0;
}

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.lang__toggle:hover,
.lang__toggle[aria-expanded='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lang__toggle:hover .lang__code,
.lang__toggle[aria-expanded='true'] .lang__code {
  color: var(--accent);
}

/* La bandera necesita un marco: sin él, la de Rusia (blanco arriba) se
   pierde sobre el papel. El sombra va por dentro para no alterar el
   tamaño del dibujo. */
.lang__flagbox {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.lang__flag {
  width: 24px;
  height: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.lang__caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink-faint);
  transition:
    transform 0.25s var(--ease),
    color 0.25s var(--ease);
}

.lang__toggle[aria-expanded='true'] .lang__caret {
  transform: rotate(180deg);
  color: var(--accent);
}

.lang__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 226px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 10px 34px rgba(20, 23, 26, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.lang:hover .lang__panel,
.lang:focus-within .lang__panel,
.lang.is-open .lang__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Puente invisible sobre el hueco entre el panel y el botón, para que el
   ratón pueda cruzar sin que el panel se cierre. */
.lang__panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* Estado de "cerrado a propósito": gana al hover, para que el clic pueda
   cerrar el panel aunque el ratón siga encima. */
.lang.is-collapsed .lang__panel {
  opacity: 0;
  pointer-events: none;
}

.lang__option {
  display: grid;
  grid-template-columns: 21px 26px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  text-decoration: none;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.lang__option .lang__flag {
  width: 21px;
  height: 14px;
}

.lang__option:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

.lang__option[aria-current='true'] {
  background: var(--accent-soft);
  color: var(--ink);
}

.lang__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}

.lang__toggle .lang__code {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
}

.lang__option[aria-current='true'] .lang__code {
  color: var(--accent);
}

.lang__check {
  display: inline-flex;
  color: var(--accent);
  opacity: 0;
}

.lang__check svg {
  width: 12px;
  height: 12px;
}

.lang__option[aria-current='true'] .lang__check {
  opacity: 1;
}

.header__cta {
  padding: 12px 20px;
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: transform 0.3s var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.75px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

/* Las dos barras salen de la línea central: así la X se cruza en el centro
   y no queda desplazada al abrir el menú. */
.nav-toggle span::before {
  transform: translateY(-6px);
}

.nav-toggle span::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded='true'] span {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span::before {
  transform: rotate(-90deg);
}

.nav-toggle[aria-expanded='true'] span::after {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(40px, 5.5vw, 72px) clamp(56px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero__eyebrow {
  margin-bottom: 22px;
}

.hero__title {
  margin-bottom: 22px;
}

.hero__sub {
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__media {
  position: relative;
}

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-alt);
}

.hero__caption {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.hero__caption-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Tira de datos
   -------------------------------------------------------------------------- */

.stats {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 34px 28px 34px 0;
}

.stat + .stat {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.stat__label {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Servicios
   -------------------------------------------------------------------------- */

.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service {
  background: var(--bg);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 92px;
}

.service__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service__media {
  overflow: hidden;
  background: var(--bg-alt);
}

.service__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.service:hover .service__media img {
  transform: scale(1.035);
}

.service__code {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service__code::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.service__title {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

.service__text {
  color: var(--ink-soft);
  font-size: 0.99rem;
  line-height: 1.58;
  max-width: 44ch;
}

.service--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
}

.service--wide .service__media img {
  aspect-ratio: 16 / 9;
}

.service--wide .service__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.services__cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Proceso
   -------------------------------------------------------------------------- */

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  padding: 30px 28px 30px 0;
  position: relative;
}

.step + .step {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--accent);
}

.step__title {
  margin: 14px 0 10px;
}

.step__text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Materiales
   -------------------------------------------------------------------------- */

.materials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  border-top: 2px solid var(--ink);
  padding-top: 30px;
}

.material-group + .material-group {
  border-left: 1px solid var(--line);
  padding-left: clamp(24px, 3vw, 48px);
}

.material-group__title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 20px;
}

.material-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.material-group li {
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.material-group li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.material-group strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Zonas
   -------------------------------------------------------------------------- */

.zones__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.zone-group {
  padding: 28px 30px 0 0;
}

.zone-group + .zone-group {
  border-left: 1px solid var(--line);
  padding-left: 30px;
}

.zone-group__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.zone-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.zone {
  padding: 10px 0;
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.012em;
}

/* --------------------------------------------------------------------------
   Obra
   -------------------------------------------------------------------------- */

.works__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

.works__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}

.work {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.work img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  flex: 1;
  object-fit: cover;
  background: var(--bg-alt);
}

.work figcaption {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.work__name {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */

.voices__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.voice--lead blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin: 0 0 26px;
}

.voices__side {
  display: grid;
  gap: 34px;
}

.voice blockquote {
  margin: 0 0 16px;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink);
}

.voice figcaption {
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.voice figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color 0.25s var(--ease);
}

.faq__question:hover {
  color: var(--accent);
}

.faq__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}

.faq__icon::before {
  left: 3px;
  right: 3px;
  top: 12px;
  height: 1.5px;
}

.faq__icon::after {
  top: 3px;
  bottom: 3px;
  left: 12px;
  width: 1.5px;
}

.faq__item.is-open .faq__icon::after {
  transform: scaleY(0);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer > div {
  overflow: hidden;
}

.faq__answer p {
  padding-bottom: 26px;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contact {
  background: var(--band);
  color: var(--band-ink);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.contact h2 {
  color: var(--band-ink);
}

.contact__text {
  color: var(--band-soft);
  margin-top: 20px;
}

.contact__list {
  list-style: none;
  margin-top: 38px;
  border-top: 1px solid var(--band-line);
}

.contact__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--band-line);
  font-size: 0.98rem;
}

.contact__list .mono {
  color: var(--band-soft);
}

.contact__list a {
  color: var(--band-ink);
  transition: color 0.25s var(--ease);
}

.contact__list a:hover {
  color: var(--band-accent);
}

.form {
  background: var(--band);
  border: 1px solid var(--band-line);
  padding: clamp(24px, 3vw, 40px);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form__field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-soft);
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 1px solid var(--band-line);
  border-radius: var(--r);
  color: var(--band-ink);
  font-size: 0.98rem;
  transition: border-color 0.25s var(--ease);
}

.form__field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}

.form__field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--band-soft) 50%),
    linear-gradient(135deg, var(--band-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.form__field select option {
  background: #14171a;
  color: #f2f2ef;
}

.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--band-soft);
  opacity: 0.85;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--band-accent);
  outline: 2px solid var(--band-accent);
  outline-offset: 1px;
}

.form__error {
  font-size: 0.84rem;
  color: #ff9f8a;
  min-height: 1.2em;
}

.form__note {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--band-soft);
  margin-top: 16px;
}

.form__status {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--band-accent);
  color: var(--band-ink);
  font-size: 0.92rem;
  line-height: 1.5;
  display: none;
}

.form__status.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--band);
  color: var(--band-ink);
  border-top: 1px solid var(--band-line);
  padding-block: 52px 40px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: 40px;
}

.site-footer .brand__mark {
  background: var(--band-ink);
  color: var(--band);
}

.site-footer .brand__sub {
  color: var(--band-soft);
}

.site-footer p {
  color: var(--band-soft);
  font-size: 0.92rem;
  margin-top: 18px;
  max-width: 34ch;
}

.site-footer__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--band-soft);
  margin-bottom: 18px;
}

.site-footer__list {
  list-style: none;
  display: grid;
  gap: 11px;
}

.site-footer__list a {
  font-size: 0.94rem;
  color: var(--band-soft);
  transition: color 0.25s var(--ease);
}

.site-footer__list a:hover {
  color: var(--band-accent);
}

.site-footer__bottom {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--band-line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--band-soft);
}

.site-footer__bottom p {
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Aparición al hacer scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Selector de paleta
   -------------------------------------------------------------------------- */

.palette {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
}

.palette__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(20, 23, 26, 0.12);
  transition:
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.palette__toggle:hover {
  border-color: var(--accent);
}

.palette__toggle:active {
  transform: translateY(1px);
}

/* Cinco muestras: cada barra lleva el fondo de su paleta y el acento en la
   punta. Con el acento a secas las cinco parecian oscuras, porque cuatro de
   los cinco acentos son profundos. */
.palette__icon {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.palette__icon i {
  display: block;
  position: relative;
  width: 15px;
  height: 4px;
  background: var(--c-base);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}

.palette__icon i::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--c);
  opacity: 0.45;
  transition: opacity 0.22s var(--ease);
}

.palette__icon i.is-active::after {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .palette__icon i::after {
    background: var(--c-dark);
  }
}

.palette__toggle-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.palette__toggle:hover .palette__toggle-label {
  color: var(--accent);
}

.palette__panel {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 10px 34px rgba(20, 23, 26, 0.16);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.palette:hover .palette__panel,
.palette:focus-within .palette__panel,
.palette.is-open .palette__panel {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* Puente invisible sobre el hueco entre el panel y el botón. Sin esto, al
   cruzar el hueco con el ratón se sale del contenedor y el panel se cierra
   antes de llegar a las opciones. */
.palette__panel::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 0;
  bottom: 0;
  width: 11px;
}

/* Estado de "cerrado a propósito": gana al hover, para que el clic pueda
   cerrar el panel aunque el ratón siga encima. */
.palette.is-collapsed .palette__panel {
  opacity: 0;
  pointer-events: none;
}

.palette__option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 214px;
  padding: 9px 10px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.palette__option:hover {
  background: var(--bg-alt);
}

.palette__option[aria-pressed='true'] {
  background: var(--accent-soft);
}

/* La muestra es la paleta entera: fondo arriba, acento abajo. Cuatro de las
   cinco paletas son de fondo claro y solo Bosque es oscura. */
.palette__chip {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--swatch-base);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.palette__chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--swatch);
}

.palette__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.palette__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.palette__hint {
  font-size: 0.74rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 95;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 24px rgba(20, 23, 26, 0.18);
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.whatsapp-float:active {
  transform: translateY(0);
}

.whatsapp-float__icon {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* Etiqueta que sale al pasar por encima */
.whatsapp-float__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--ink);
  color: var(--bg);
  padding: 9px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.whatsapp-float:hover .whatsapp-float__label,
.whatsapp-float:focus-visible .whatsapp-float__label {
  opacity: 1;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  :root {
    --content: min(1240px, calc(100vw - 40px));
    --gutter: 20px;
  }

  /* El menú pasa a ser una hoja a pantalla completa: antes el hero asomaba
     por debajo y sus botones parecían parte del menú.
     Ojo: la cabecera tiene backdrop-filter, así que es el bloque contenedor
     de sus hijos fijos. Por eso el menú se posiciona respecto a la cabecera
     (top: 100%) y no con inset respecto a la ventana. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px calc(32px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }

  .nav.is-open {
    display: flex;
  }

  /* Con el menú abierto, la página de detrás no se desplaza. */
  body.is-nav-open {
    overflow: hidden;
  }

  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.02rem;
  }

  .nav a::after {
    display: none;
  }

  /* El CTA vive dentro del menú, que en móvil es donde se busca.
     Selector específico: si no, hereda el color de los enlaces del menú. */
  .nav a.nav__cta {
    display: flex;
    width: 100%;
    margin-top: 24px;
    justify-content: center;
    padding: 14px 20px;
    border-bottom: 0;
    font-size: 0.95rem;
    color: var(--bg);
  }

  .nav-toggle {
    display: grid;
  }

  .header__cta {
    display: none;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero__media img {
    aspect-ratio: 16 / 10;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(odd) {
    padding-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .stat:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .service--wide {
    grid-template-columns: 1fr;
  }

  .process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step:nth-child(odd) {
    padding-left: 0;
  }

  .step:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .step:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .materials__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .material-group + .material-group {
    border-left: 0;
    padding-left: 0;
  }

  .zones__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }

  /* Los pueblos van a dos columnas: en una sola, la sección se alargaba
     demasiado y había que recorrerla entera para leerla. */
  .zone-group ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .zone-group:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
    padding-right: 24px;
  }

  .zone-group:nth-child(even) {
    padding-left: 24px;
  }

  .works__grid {
    grid-template-columns: 1fr;
  }

  .works__side {
    grid-template-rows: auto;
  }

  .work img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .voices__grid {
    grid-template-columns: 1fr;
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  :root {
    --content: min(1240px, calc(100vw - 32px));
  }

  body {
    font-size: 16px;
  }

  .brand__sub {
    display: none;
  }

  .site-header__inner {
    gap: 14px;
  }

  .lang__toggle {
    height: 42px;
    padding: 0 10px;
    gap: 7px;
  }

  .lang__toggle .lang__flag {
    width: 21px;
    height: 14px;
  }

  .lang__panel {
    min-width: 214px;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service--wide {
    grid-column: span 1;
  }

  /* Cuatro cifras en 2x2 en vez de cuatro filas: la mitad de scroll. */
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat,
  .stat:nth-child(even),
  .stat:nth-child(odd) {
    padding: 20px 0;
    border-left: 0;
  }

  .stat:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: 20px;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .stat__value {
    font-size: clamp(1.75rem, 8vw, 2.1rem);
  }

  /* La lista de contacto se apila: en una fila los valores largos rozaban
     el borde de la pantalla. */
  .contact__list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
  }

  .contact__list {
    margin-top: 28px;
  }

  .contact__list a {
    display: inline-block;
    padding: 8px 0;
  }

  /* Enlaces del pie con altura suficiente para el dedo. */
  .site-footer__list a {
    display: inline-block;
    padding: 8px 0;
  }

  .site-footer__list--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .site-footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  /* El aviso legal no pasa por debajo de los flotantes. */
  .site-footer__bottom {
    padding-right: 64px;
  }

  .process__steps {
    grid-template-columns: 1fr;
  }

  .step,
  .step:nth-child(even),
  .step:nth-child(odd) {
    padding: 24px 0;
    border-left: 0;
  }

  .step:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }

  .zones__grid {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }

  .zone-group,
  .zone-group:nth-child(even),
  .zone-group:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__caption {
    flex-direction: column;
    gap: 6px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Los flotantes se compactan: en móvil tapaban el texto de la página. */
  .palette {
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    right: 12px;
    transform: none;
    align-items: flex-end;
  }

  /* Sin el rótulo "Color": en pantalla pequeña solo queda el muestrario. */
  .palette__toggle {
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .palette__toggle-label {
    display: none;
  }

  .palette__icon i {
    width: 13px;
    height: 3px;
  }

  .palette__panel {
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
    width: min(272px, calc(100vw - 24px));
    transform: translateY(10px);
  }

  /* El hueco aquí es vertical: el puente va arriba */
  .palette__panel::after {
    right: 0;
    left: 0;
    top: -11px;
    bottom: auto;
    width: auto;
    height: 11px;
  }

  .palette:hover .palette__panel,
  .palette:focus-within .palette__panel,
  .palette.is-open .palette__panel {
    transform: none;
  }

  .palette__option {
    min-width: 0;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 13px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */

/* El fondo de la muestra no cambia con el modo: forma parte de la
   identidad de la paleta (cuatro son claras y Bosque es oscura). Solo el
   acento se adapta, para que siga leyéndose en oscuro. */
@media (prefers-color-scheme: dark) {
  .palette__chip::after {
    background: var(--swatch-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .service:hover .service__media img {
    transform: none;
  }
}

@media print {
  .site-header,
  .contact,
  .site-footer {
    display: none;
  }
}