/* =========================================================================
   Naturus Corporate Network · Portada v2 · "Señalética"
   Base: fuentes, tokens, reinicio, tipografía, contenedores y átomos
   (botones, botones redondos, píldoras, etiquetas, paneles).
   Las secciones van debajo, cada una con su propio bloque de clases.
   ========================================================================= */

/* ---- Fuentes ----------------------------------------------------------- */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Arial ajustada a las métricas de Onest: el texto no salta cuando llega la fuente. */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 104.6%;
  ascent-override: 92.7%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;

  --ground: #f1f4f6;        /* fondo de la página */
  --surface: #ffffff;       /* paneles */
  --ink: #12202b;           /* texto principal, botones oscuros */
  --ink-2: #3d4b57;         /* texto de párrafo */
  --muted: #5a6874;         /* texto secundario */
  --line: #d8dfe5;          /* filetes y bordes */
  --cyan: #13a5de;          /* rellenos y marcas; el texto encima va en --ink */
  --cyan-ink: #0a6c94;      /* texto pequeño y enlaces en cian sobre blanco o --ground */
  --scrim: #0e151b;         /* veladuras sobre fotos */
  --on-dark: #dce5eb;       /* texto de párrafo sobre fondos oscuros */
  --on-dark-muted: #aebbc5; /* texto secundario sobre fondos oscuros */

  --font: "Onest", "Onest Fallback", "Helvetica Neue", Arial, sans-serif;

  --edge: clamp(12px, 3vw, 40px);       /* margen lateral de los paneles */
  --edge-text: clamp(20px, 3vw, 40px);  /* margen lateral del texto sobre --ground (alineado con los paneles desde 667 px) */
  --max: 1320px;
  --section: clamp(72px, 9vw, 140px);   /* espacio entre secciones */
  --panel-pad: clamp(24px, 4.5vw, 64px);

  --r-hero: 28px;
  --r-panel: clamp(20px, 2.4vw, 32px);
  --r-photo: clamp(16px, 2vw, 24px);
  --r-sign: 22px;

  --shadow-float: 0 10px 30px rgba(18, 32, 43, 0.16);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);     /* botones, giros, rodillos */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entradas */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* hoja del menú y ventanas */

  --header-space: 96px; /* altura que ocupa el menú flotante, para los anclas */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-space);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

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

[hidden] { display: none !important; }

::selection { background: var(--cyan); color: var(--ink); }

:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #ffffff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---- Iconos (símbolos del sprite en el <body>) --------------------------- */
.i { width: 18px; height: 18px; flex: none; }
.i--sm { width: 16px; height: 16px; }

/* ---- Tipografía -------------------------------------------------------- */
.t-h1 {
  font-size: clamp(40px, 5.8vw, 82px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.t-h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.t-h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.t-statement {
  font-size: clamp(22px, 2.3vw, 31px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.t-lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.45; text-wrap: pretty; }
.t-body { font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.t-small { font-size: 15px; line-height: 1.5; color: var(--muted); }
.t-meta { font-size: 14px; line-height: 1.4; color: var(--muted); }
.t-label { font-size: 15px; font-weight: 500; line-height: 1.2; }
.t-num { font-variant-numeric: tabular-nums; }

/* ---- Contenedores y secciones -------------------------------------------- */
.wrap { width: min(var(--max), 100% - 2 * var(--edge)); margin-inline: auto; }
.wrap-text { width: min(var(--max), 100% - 2 * var(--edge-text)); margin-inline: auto; }
.section { padding-top: var(--section); }

.panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: var(--panel-pad);
}

/* ---- Botón en píldora: etiqueta que rueda + flecha en círculo ------------ */
/* Marcado:
   <a class="btn btn--dark" href="…">
     <span class="btn__label"><span class="btn__roll"><span>Texto</span><span aria-hidden="true">Texto</span></span></span>
     <span class="btn__icon"><svg class="i" aria-hidden="true" focusable="false"><use href="#i-arrow"/></svg></span>
   </a>
   Tamaños: .btn--sm (44 px), por defecto (52 px), .btn--lg (56 px).
   Colores: .btn--dark, .btn--cyan, .btn--light. Sin icono: omite .btn__icon y usa .btn--plain. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #ffffff;
  --btn-icon-bg: #ffffff;
  --btn-icon-fg: var(--ink);
  --btn-icon: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 8px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn--sm { height: 44px; padding: 0 6px 0 20px; gap: 12px; font-size: 15px; --btn-icon: 32px; }
.btn--lg { height: 56px; padding: 0 8px 0 26px; gap: 16px; --btn-icon: 40px; }
.btn--plain { padding: 0 24px; }
.btn--sm.btn--plain { padding: 0 20px; }
.btn--dark  { --btn-bg: var(--ink);  --btn-fg: #ffffff;    --btn-icon-bg: #ffffff;    --btn-icon-fg: var(--ink); }
.btn--cyan  { --btn-bg: var(--cyan); --btn-fg: var(--ink); --btn-icon-bg: #ffffff;    --btn-icon-fg: var(--ink); }
.btn--light { --btn-bg: #ffffff;     --btn-fg: var(--ink); --btn-icon-bg: var(--ink); --btn-icon-fg: #ffffff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }

.btn__label { display: block; height: 1.3em; line-height: 1.3; overflow: hidden; }
.btn__roll { display: block; }
.btn__roll > span { display: block; }
.btn__icon {
  flex: none;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-icon-bg);
  color: var(--btn-icon-fg);
}
.btn:focus-visible .btn__roll { transform: translateY(-50%); }
.btn:focus-visible .btn__icon .i { transform: rotate(-45deg); }
/* Los efectos de :hover solo con puntero real: en una pantalla táctil se quedarían pegados
   después del toque. */
@media (hover: hover) {
  .btn:hover .btn__roll { transform: translateY(-50%); }
  .btn:hover .btn__icon .i { transform: rotate(-45deg); }
  .btn--outline-light:hover { --btn-bg: #ffffff; --btn-fg: var(--ink); }
}
.btn:active { transform: scale(0.97); }

/* ---- Botón redondo (solo icono) ------------------------------------------ */
/* <button class="icon-btn icon-btn--line" type="button" aria-label="Siguiente"><svg class="i" …><use href="#i-arrow"/></svg></button>
   Tamaños: 44 px por defecto, .icon-btn--52, .icon-btn--64.
   Colores: --line (blanco con borde), --dark, --cyan, --glass (sobre foto). */
.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn--52 { width: 52px; height: 52px; }
.icon-btn--64 { width: 64px; height: 64px; }
.icon-btn--line { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn--dark { background: var(--ink); color: #ffffff; }
.icon-btn--cyan { background: var(--cyan); color: var(--ink); }
.icon-btn--glass { background: rgba(255, 255, 255, 0.16); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
@media (hover: hover) {
  .icon-btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .icon-btn--dark:hover { background: #1d3140; }
  .icon-btn--glass:hover { background: rgba(255, 255, 255, 0.26); }
}
.icon-btn:active { transform: scale(0.95); }
.icon-btn[disabled], .icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* ---- Píldora con contador (pestañas y filtros) ----------------------------- */
/* <button class="chip" type="button" aria-pressed="true">Construcción <span class="chip__count">5</span></button>
   Activa: aria-pressed="true" o aria-current="true". Sobre fondo blanco usa .chip--on-white. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 16px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip--on-white { background: var(--ground); }
@media (hover: hover) {
  .chip:hover { background: #e3e9ee; }
  .chip--on-white:hover { background: #e3e9ee; }
}
.chip__count {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chip--on-white .chip__count { background: #ffffff; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--ink); color: #ffffff; }
.chip[aria-pressed="true"] .chip__count, .chip[aria-current="true"] .chip__count { background: var(--cyan); color: var(--ink); }

/* Alto contraste de Windows: el sistema quita los fondos, así que la píldora elegida se marca
   con los colores de selección del sistema y las demás llevan contorno. */
@media (forced-colors: active) {
  .chip { outline: 1px solid ButtonText; outline-offset: -1px; }
  .chip[aria-pressed="true"], .chip[aria-current="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    outline-color: Highlight;
  }
  .chip[aria-pressed="true"] .chip__count, .chip[aria-current="true"] .chip__count {
    background: HighlightText;
    color: Highlight;
  }
}

/* ---- Etiqueta pequeña sobre fotos ----------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.tag--cyan { background: var(--cyan); }

/* ---- Movimiento ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn__roll, .btn__icon .i { transition: transform 500ms var(--ease); }
  .btn, .icon-btn, .chip { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms ease; }
  .skip-link { transition: transform 200ms var(--ease-out); }
}

/* =========================================================================
   Tramo 1 · Menú flotante y hoja del menú en el celular
   La píldora blanca queda fija donde la dibuja la maqueta (26 px arriba,
   centrada) y no cambia al desplazar la página: nada salta.
   ========================================================================= */

/* ---- Menú flotante ----------------------------------------------------- */
.site-header {
  position: fixed;
  top: 26px;                         /* 12 px de margen de la página + 14 px dentro del slider */
  left: 0;
  right: 0;
  z-index: 50;
  width: min(1180px, 100% - 52px);
  margin-inline: auto;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

/* Logo y botón reparten el espacio por igual: los enlaces quedan al centro. */
.nav-pill__start,
.nav-pill__end {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}
.nav-pill__end { justify-content: flex-end; }

.nav-pill__logo {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 8px;
}
.nav-pill__logo img { width: auto; height: 40px; }

.nav-pill__links {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav-pill__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
/* Sección que se está leyendo: una píldora discreta del color del fondo. */
.nav-pill__link[aria-current="true"] { background: var(--ground); }

.nav-pill__cta { display: none; }

/* El icono del botón Menú no gira como la flecha de los demás botones. */
.nav-pill__menu:hover .btn__icon .i,
.nav-pill__menu:focus-visible .btn__icon .i { transform: none; }

@media (hover: hover) {
  .nav-pill__link:hover { background: var(--ground); }
}

@media (min-width: 48em) {
  .nav-pill__links { display: flex; }
  .nav-pill__cta { display: inline-flex; }
  .nav-pill__menu { display: none; }
}

/* ---- Hoja del menú (celular) ------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 21, 27, 0.6);   /* --scrim al 60 % */
  opacity: 0;
  touch-action: none;
}

.sheet__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  max-height: calc(100% - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  color: var(--ink);
  transform: translateY(100%);
}

/* Abierta: con JavaScript por la clase; sin JavaScript por :target (#menu). El respaldo con
   :target sigue vivo hasta que el script del menú arranca y pone .menu-listo: así "Menú" abre
   la hoja aunque se toque antes de que termine de cargar main.js. */
.sheet.is-open,
:root:not(.menu-listo) .sheet:target { visibility: visible; }
.sheet.is-open .sheet__backdrop,
:root:not(.menu-listo) .sheet:target .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel,
:root:not(.menu-listo) .sheet:target .sheet__panel { transform: none; }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sheet__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}

.sheet__links { margin-top: 8px; }
.sheet__links li + li { border-top: 1px solid var(--line); }

.sheet__link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* Sección que se está leyendo: el punto cian de la señalética. */
.sheet__link[aria-current="true"]::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
}

.sheet__cta {
  width: 100%;
  justify-content: space-between;
  margin-top: 24px;
}

.sheet__mail {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

@media (hover: hover) {
  .sheet__link:hover { color: var(--cyan-ink); }
}

/* En pantallas anchas los enlaces están en la píldora: la hoja no existe. */
@media (min-width: 48em) {
  .sheet { display: none; }
}

/* ---- Alto contraste de Windows: la sección actual se subraya ----------------- */
@media (forced-colors: active) {
  .nav-pill__link[aria-current="true"],
  .sheet__link[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; }
  .sheet__panel { border: 1px solid CanvasText; border-bottom: 0; }
}

/* ---- Movimiento ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .nav-pill__link { transition: background-color 200ms var(--ease); }
  .sheet__link { transition: color 200ms var(--ease); }

  /* Sube en 500 ms y baja algo más rápido; la veladura aparece en 300 ms. */
  .sheet { transition: visibility 0s linear 320ms; }
  .sheet__backdrop { transition: opacity 240ms var(--ease); }
  .sheet__panel { transition: transform 320ms var(--ease-sheet); }

  .sheet.is-open,
  :root:not(.menu-listo) .sheet:target { transition-delay: 0s; }
  .sheet.is-open .sheet__backdrop,
  :root:not(.menu-listo) .sheet:target .sheet__backdrop { transition-duration: 300ms; }
  .sheet.is-open .sheet__panel,
  :root:not(.menu-listo) .sheet:target .sheet__panel { transition-duration: 500ms; }
}

/* =========================================================================
   Tramo 1 · Slider principal
   Bloque oscuro con 12 px de margen y 28 px de radio. La foto cubre todo el
   bloque; el título, los botones y el letrero blanco van abajo. Entre fotos,
   el "vidrio acanalado": la nueva aparece a través de franjas verticales.
   ========================================================================= */

/* Avance de las franjas: 0 = foto nueva oculta, 1 = completa. Se registra para poder animarla. */
@property --reveal {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* ---- Bloque ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;               /* las fotos (z-index -1) quedan dentro del bloque */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;        /* el texto y el letrero van abajo */
  min-height: clamp(620px, 58vw, 840px);
  margin: 12px 12px 0;
  padding-top: 74px;                /* lugar del menú flotante: 14 px + 60 px de píldora */
  border-radius: var(--r-hero);
  overflow: hidden;
  background: var(--scrim);
  color: #ffffff;
}

/* Contenido con la veladura inferior como fondo: transparente arriba y casi
   opaca al pie, para que el texto blanco se lea sobre cualquier foto.
   Los colores son --scrim (#0e151b) con transparencia. */
.hero__inner {
  padding:
    clamp(110px, 13vw, 190px)
    max(clamp(24px, 3.34vw, 48px), (100% - var(--max)) / 2)
    clamp(24px, 3.34vw, 48px);
  background: linear-gradient(180deg,
    rgba(14, 21, 27, 0) 0,
    rgba(14, 21, 27, 0.62) 110px,
    rgba(14, 21, 27, 0.88) 230px,
    rgba(14, 21, 27, 0.95) 100%);
}

.hero__title {
  color: #ffffff;
  line-height: 1.02;
}

.hero__lede {
  margin-top: 22px;
  max-width: 31em;
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.45;
  color: var(--on-dark);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 30px;
}

.hero__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 4px;               /* para el anillo de foco */
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (hover: hover) {
  .hero__link:hover { text-underline-offset: 3px; }
}

/* ---- Fotos ----------------------------------------------------------------- */
/* La capa de fotos está dentro del carrusel (para la accesibilidad) pero se coloca
   respecto al bloque entero, por detrás de la veladura y del texto. */
.slider__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--scrim);
}

/* Veladuras sobre la foto: arriba (bajo el menú) y a la izquierda (bajo el texto). */
.slider__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(14, 21, 27, 0.6) 0, rgba(14, 21, 27, 0) 200px),
    linear-gradient(90deg, rgba(14, 21, 27, 0.66) 0%, rgba(14, 21, 27, 0.34) 42%, rgba(14, 21, 27, 0) 70%);
  pointer-events: none;
}

.slider__slide {
  --flute: clamp(40px, 4.6vw, 72px);  /* ancho de cada franja del vidrio acanalado */
  position: absolute;
  inset: 0;
}
/* Sin JavaScript solo se ve la primera obra (las demás ni se descargan). */
.slider__slide:not(:first-child) { display: none; }

.slider__slide picture { height: 100%; }

.slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-v, 50% 50%);
  filter: saturate(1.14) contrast(1.06);
}

/* Con JavaScript: visible la foto activa y, durante el cambio, la que se va. */
.js .slider__slide { display: none; }
.js .slider__slide.is-active,
.js .slider__slide.is-leaving { display: block; }
.js .slider__slide.is-active { z-index: 2; }
.js .slider__slide.is-leaving { z-index: 1; }

/* El gesto horizontal cambia de obra; el vertical sigue desplazando la página. */
.js .hero { touch-action: pan-y pinch-zoom; }

/* ---- Letrero: directorio de las obras ---------------------------------------- */
.slider { margin-top: 28px; }

.sign {
  padding: 8px;
  border-radius: var(--r-sign);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

/* Fila cerrada: 44 px. Fila activa: 70 px, fondo --ground, número cian y segunda línea.
   El número va fuera del flujo para que la altura dependa solo del texto: así la fila
   que se abre y la que se cierra suman siempre lo mismo y el letrero no se mueve. */
.sign__row {
  position: relative;
  display: block;
  width: 100%;
  padding: 10.75px 14px 10.75px 56px;   /* (44 - 22.5) / 2 arriba y abajo */
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.sign__num {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* El nombre se compone a 18 px y en las filas cerradas se reduce a 15.5 px con
   transform: el cambio de tamaño es suave y no mueve el renglón. */
.sign__name {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transform-origin: 0 50%;
}
.js .sign__name { transform: scale(0.8611); }

/* La segunda línea se abre de 0 a su altura con una fila de rejilla (0fr → 1fr). Solo se
   pliega con JavaScript: sin él, el letrero es una lista con las cinco segundas líneas. */
.sign__more {
  display: grid;
  grid-template-rows: 1fr;
}
.js .sign__more { grid-template-rows: 0fr; }

.sign__line {
  min-height: 0;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--muted);
}
.js .sign__line {
  opacity: 0;
  visibility: hidden;
}
.sign__line > span { display: block; padding-top: 2px; }

.sign__item.is-active .sign__row {
  padding-top: 13px;
  padding-bottom: 13px;
  border-radius: 16px;
  background: var(--ground);
  color: var(--ink);
}
.sign__item.is-active .sign__num {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--ink);
}
.sign__item.is-active .sign__name { transform: none; }
.sign__item.is-active .sign__more { grid-template-rows: 1fr; }
.sign__item.is-active .sign__line {
  opacity: 1;
  visibility: inherit;
}

@media (hover: hover) {
  .js .sign__row:hover { background: var(--ground); }
}

/* ---- Letrero: contador, progreso y botones ---------------------------------- */
.sign__controls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 7.5vw - 15px, 14px);   /* 14 px desde 390 px; menos en celulares angostos */
  margin-top: 6px;
  padding: 8px 4px 0 14px;
  border-top: 1px solid var(--line);
}

/* Con JavaScript en camino, los controles ya ocupan su lugar (invisibles) mientras el
   script arranca: así el bloque no crece ni empuja la página cuando aparecen. */
.js .sign__controls[hidden] {
  display: flex !important;
  visibility: hidden;
}

.sign__count {
  flex: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

.sign__track {
  flex: 1 1 0;
  min-width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

/* --progress fija el avance cuando no hay animación (movimiento reducido: la posición). */
.sign__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--cyan);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* El círculo de la pausa no tiene borde: se le recorta el margen para que el icono
   quede a la misma distancia de la barra y de las flechas (y la barra no se acorte tanto). */
.sign__pause { margin-inline: -10px; }

.sign__arrows {
  flex: none;
  display: flex;
  gap: 6px;
}

@media (hover: hover) {
  .sign__pause:hover { background: var(--ground); }
}

/* ---- Escritorio: texto a la izquierda, letrero a la derecha ------------------- */
@media (min-width: 48em) {
  .hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 48px;
    background: linear-gradient(180deg,
      rgba(14, 21, 27, 0) 0,
      rgba(14, 21, 27, 0.42) clamp(110px, 13vw, 190px),
      rgba(14, 21, 27, 0.82) calc(clamp(110px, 13vw, 190px) + 200px),
      rgba(14, 21, 27, 0.94) 100%);
  }

  .hero__text {
    flex: 20 1 320px;
    min-width: 0;
    max-width: 860px;
  }

  .slider {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 348px;
    margin-top: 0;
  }

  .slider__img { object-position: var(--pos, 50% 50%); }
}

/* ---- Celular con JavaScript: el letrero muestra solo la obra activa -----------
   Las cinco filas se apilan en la misma celda con el aspecto de fila activa; la
   celda mide lo que la más alta, así el bloque no cambia de altura entre obras. */
@media (max-width: 47.99em) {
  .js .sign__list { display: grid; }
  .js .sign__item {
    grid-area: 1 / 1;
    display: grid;
  }
  .js .sign__item:not(.is-active) {
    visibility: hidden;
    opacity: 0;
  }
  .js .sign__row {
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 16px;
    background: var(--ground);
    color: var(--ink);
  }
  .js .sign__num {
    border-color: var(--cyan);
    background: var(--cyan);
    color: var(--ink);
  }
  .js .sign__name { transform: none; }
  .js .sign__more { grid-template-rows: 1fr; }
  .js .sign__line {
    opacity: 1;
    visibility: inherit;
  }
}

/* ---- Alto contraste de Windows: los fondos desaparecen, se marca con bordes ------ */
@media (forced-colors: active) {
  .sign__item.is-active .sign__row { outline: 2px solid CanvasText; outline-offset: -2px; }
  .sign__fill { background: Highlight; }
}

/* ---- Movimiento ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Vidrio acanalado: la foto nueva se descubre por franjas mientras se asienta
     (escala y corrimiento leves); la que se va se acerca apenas. 900 ms. */
  .slider--flutes .slider__slide.is-entering {
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(var(--reveal) * var(--flute)), transparent calc(var(--reveal) * var(--flute)), transparent var(--flute));
    mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(var(--reveal) * var(--flute)), transparent calc(var(--reveal) * var(--flute)), transparent var(--flute));
    animation: slider-flutes 900ms var(--ease-out) both;
  }
  .slider--flutes .slider__slide.is-entering .slider__img { animation: slider-settle 900ms var(--ease-out) both; }
  .slider--flutes .slider__slide.is-leaving .slider__img { animation: slider-drift 900ms var(--ease-out) both; }

  /* Navegadores sin máscaras animables: fundido de 400 ms. */
  .slider--fade .slider__slide.is-entering { animation: slider-fade 400ms var(--ease-out) both; }

  @keyframes slider-flutes {
    from { --reveal: 0; }
    to { --reveal: 1; }
  }
  @keyframes slider-settle {
    from { transform: scale(1.04) translateX(1.5%); }
    to { transform: none; }
  }
  @keyframes slider-drift {
    from { transform: none; }
    to { transform: scale(1.02); }
  }
  @keyframes slider-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Letrero: la fila que se abre y la que se cierra cambian de alto a la vez;
     la segunda línea se desvanece en 200 ms. */
  .js .sign__row {
    transition:
      padding 400ms var(--ease-out),
      border-radius 400ms var(--ease-out),
      background-color 200ms var(--ease),
      color 200ms var(--ease);
  }
  .js .sign__num { transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
  .js .sign__name { transition: transform 400ms var(--ease-out); }
  .js .sign__more { transition: grid-template-rows 400ms var(--ease-out); }
  .js .sign__line { transition: opacity 120ms var(--ease), visibility 0s linear 120ms; }
  .js .sign__item.is-active .sign__line { transition: opacity 200ms var(--ease) 120ms, visibility 0s; }

  /* Barra de progreso: es el reloj del carrusel (6.5 s por obra). */
  .sign__fill.is-running { animation: sign-progress 6500ms linear both; }
  .slider.is-paused .sign__fill { animation-play-state: paused; }

  @keyframes sign-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .hero__link { transition: text-underline-offset 200ms var(--ease); }
}

/* Celular: el texto del letrero cambia con un fundido corto (sale en 150 ms, entra en 200 ms). */
@media (max-width: 47.99em) and (prefers-reduced-motion: no-preference) {
  .js .sign__item { transition: opacity 150ms var(--ease), visibility 0s linear 150ms; }
  .js .sign__item.is-active { transition: opacity 200ms var(--ease) 100ms, visibility 0s; }
}

/* =========================================================================
   Qué hacemos · carrusel de los quince servicios
   Panel blanco: encabezado con píldoras de familia, pista horizontal con
   desplazamiento nativo e imán, y la fila de avance con los botones.
   ========================================================================= */

/* Esta sección queda más cerca del slider que las demás (maqueta). */
.services { padding-top: clamp(40px, 5vw, 72px); }

/* Relleno lateral de la maqueta: 24 px en el teléfono (la base da 28), así las
   cuatro píldoras caben en dos filas. La pista usa el mismo valor para salir al borde. */
.services__panel {
  --pad-x: clamp(24px, 4.5vw, 64px);
  padding-inline: var(--pad-x);
}

/* ---- Encabezado: título, entrada y píldoras --------------------------------- */
.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}
.services__lede {
  margin-top: 12px;
  max-width: 18em;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
}
.services__families {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Aquí las píldoras son enlaces (sin subrayado); relleno y cifra como en la maqueta. */
.services__families .chip { padding-left: 16px; text-decoration: none; }
.services__families .chip__count { font-weight: 600; }

/* ---- Pista ----------------------------------------------------------------- */
/* La pista sale hasta el borde del panel (--bleed) para que las tarjetas
   entren y salgan por debajo de él; el imán las alinea con el texto. */
.carousel {
  --svc-size: clamp(184px, 14.2vw, 204px); /* diámetro de los círculos */
  --bleed: var(--pad-x, var(--panel-pad)); /* igual al relleno lateral del panel */
  --svc-gap: var(--bleed);                 /* en el teléfono: la tarjeta anterior queda justo fuera */
  --ring-room: 10px;                       /* aire para el anillo del círculo activo */
}
.carousel__viewport {
  position: relative;
  margin: calc(clamp(32px, 4vw, 56px) - var(--ring-room)) calc(-1 * var(--bleed)) 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bleed);
}
.carousel__viewport:focus-visible { outline-offset: -3px; border-radius: 20px; }
/* Doble clase: el reinicio de listas de la base (ul[class]) quitaría el relleno. */
.carousel .carousel__track {
  display: flex;
  gap: var(--svc-gap);
  width: max-content;
  padding: var(--ring-room) var(--bleed);
}

/* Con JavaScript la barra nativa se esconde: la reemplazan los botones, el
   arrastre y la barra de avance. Sin él queda visible para el ratón. */
.js .carousel__viewport { scrollbar-width: none; }
.js .carousel__viewport::-webkit-scrollbar { display: none; }

/* Mientras se arrastra con el ratón, sin imán ni selección de texto. */
.carousel__viewport.is-dragging { scroll-snap-type: none; }
@media (hover: hover) and (pointer: fine) {
  .js .carousel__viewport { cursor: grab; }
  .js .carousel__viewport.is-dragging { cursor: grabbing; }
  .js .carousel__track { -webkit-user-select: none; user-select: none; }
}

/* ---- Tarjeta de servicio: círculo, familia y nombre ------------------------- */
.svc {
  flex: 0 0 var(--svc-size);
  min-width: 0; /* todas iguales aunque el nombre sea más ancho que el círculo */
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.svc__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate; /* recorta bien la foto ampliada en Safari */
  background: var(--line);
  outline: 3px solid transparent;
  outline-offset: 1px;
}
.svc__media picture,
.svc__img { width: 100%; height: 100%; }
.svc__img { object-fit: cover; }

/* Servicios sin foto: pictograma de línea sobre un disco celeste pálido. */
.svc__media--picto {
  display: grid;
  place-items: center;
  background: #dff1f9;
}
.svc__media--picto::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.svc__picto {
  position: relative;
  width: 42%; /* dibujo de 64 a 72 px en el círculo de 204 */
  height: auto;
  color: var(--ink);
}
.svc__picto * { vector-effect: non-scaling-stroke; } /* trazo de 2 px a cualquier tamaño */

/* En el HTML el nombre va antes que la familia (se lee primero); aquí se ordena como en la maqueta. */
.svc__family {
  order: 1;
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cyan-ink);
}
/* 18 px desde 1440; más angosto baja hasta 16 px para que los nombres largos
   ("Mantenimiento de espacios") sigan en una línea sin tocar al vecino. */
.svc__name {
  order: 2;
  display: flex; /* centra el nombre aunque sea más ancho que el círculo */
  justify-content: center;
  margin-top: 4px;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Anillo cian y acercamiento de la foto al pasar el ratón (no mientras se arrastra). */
@media (hover: hover) and (pointer: fine) {
  .carousel__viewport:not(.is-dragging) .svc:hover .svc__media { outline-color: var(--cyan); outline-offset: 5px; }
  .carousel__viewport:not(.is-dragging) .svc:hover .svc__img,
  .carousel__viewport:not(.is-dragging) .svc:hover .svc__picto { transform: scale(1.05); }
}

/* ---- Avance, lectura y botones (solo con JavaScript) ------------------------- */
.carousel__controls { display: none; }
.js .carousel__controls {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: calc(40px - var(--ring-room));
}
.carousel__progress {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line);
}
.carousel__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--cyan);
  transform: translateX(-66.667%); /* 5 de 15 visibles; el script lo ajusta */
}
.carousel__status {
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.carousel__buttons {
  flex: none;
  display: flex;
  gap: 8px;
}
/* En los extremos el botón se apaga (base: opacidad 0.4) y no reacciona. */
.carousel__btn[aria-disabled="true"] { transform: none; }
.icon-btn--line.carousel__btn[aria-disabled="true"] { box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn--dark.carousel__btn[aria-disabled="true"] { background: var(--ink); }

/* ---- Tableta y escritorio ------------------------------------------------------ */
@media (min-width: 48em) {
  .carousel { --svc-gap: clamp(20px, 2vw, 28px); }
  /* Ancho de la lectura más larga ("10 a 14 de 15"): la barra no cambia de largo al avanzar. */
  .carousel__status { min-width: 5.9em; }
}

/* ---- Colores forzados (alto contraste de Windows): la barra sigue visible ------ */
@media (forced-colors: active) {
  .carousel__progress { outline: 1px solid CanvasText; }
  .carousel__fill { forced-color-adjust: none; background: Highlight; }
  .svc__picto { color: CanvasText; }
  .services__families .chip[aria-current="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---- Movimiento ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .svc__img,
  .svc__picto { transition: transform 500ms var(--ease); }
  .svc__media { transition: outline-color 300ms ease, outline-offset 300ms var(--ease); }
}

/* =========================================================================
   Quiénes somos · presentación, directorio y Misión, Visión y Objetivo
   Texto sobre el fondo de la página; el directorio va en su propio panel.
   ========================================================================= */

/* ---- Presentación: texto y dos fotos alineados abajo ------------------------ */
/* Dos columnas que se apilan solas cuando no caben (bases de la maqueta). */
.about__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(36px, 5vw, 72px);
}
.about__text {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.about__statement { margin-top: 22px; font-weight: 400; }
.about__body { margin-top: 22px; max-width: 31em; }
.about__cta { margin-top: auto; padding-top: 30px; } /* el botón baja hasta el pie de las fotos */

.about__photos {
  flex: 1.55 1 480px;
  min-width: 0;
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
}
.about__photo {
  position: relative;
  min-width: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--line);
}
.about__photo picture,
.about__photo img { width: 100%; height: 100%; }
.about__photo img { object-fit: cover; }
.about__photo--small {
  flex: 0 0 34%;
  align-self: flex-end;
  margin-top: clamp(40px, 9vw, 120px);
  aspect-ratio: 4 / 5;
}
.about__photo--large {
  flex: 1 1 0;
  align-self: stretch;
  min-height: clamp(180px, 26vw, 380px);
}
.about__photo--large picture { position: absolute; inset: 0; }
.about__photo--large img { object-position: 92% 50%; } /* el letrero de Cinépolis queda a la vista */

/* ---- Directorio: mapa y cifras ---------------------------------------------- */
.directory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: clamp(22px, 2.6vw, 28px);
  background: var(--surface);
}
.directory__map {
  flex: 1.1 1 360px;
  min-width: 0;
}
.directory__map img { width: 100%; }
.directory__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
.directory__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
}

.directory__list {
  flex: 1 1 360px;
  min-width: 0;
}
.directory__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.directory__row:first-child { padding-top: 0; border-top: 0; }
.directory__row:last-child { padding-bottom: 0; }
.directory__term {
  min-width: 0;
  color: var(--ink-2);
}
.directory__value {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* las cifras no bailan mientras cuentan */
}

/* Cuenta: el número vivo ocupa el ancho del valor final (copia invisible
   en la misma celda), así el signo y la unidad no se mueven. */
.directory__digits {
  display: inline-grid;
  justify-items: end;
}
.directory__ghost,
.directory__live { grid-area: 1 / 1; }
.directory__ghost { visibility: hidden; }

/* ---- Misión, Visión y Objetivo ------------------------------------------------ */
.mvo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 72px);
}
.mvo__item {
  padding-top: 22px;
  border-top: 1px solid #c6cfd7; /* filete un poco más oscuro que --line: va sobre el fondo gris */
}
.mvo__text {
  margin-top: 10px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 48em) {
  .mvo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Colores forzados (alto contraste de Windows): el punto de la leyenda sigue visible. */
@media (forced-colors: active) {
  .directory__dot { forced-color-adjust: none; background: Highlight; }
}

/* =========================================================================
   Llave en mano · las diez partidas y el antes y después de Portal D10
   Panel blanco: texto con la ruta numerada a la izquierda, par de fotos a
   la derecha (se apilan cuando no caben).
   ========================================================================= */

.turnkey__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 64px);
  padding-inline: clamp(24px, 4.5vw, 64px); /* relleno lateral de la maqueta (24 px en el teléfono) */
}
.turnkey__text {
  flex: 1 1 440px;
  min-width: 0;
}
.turnkey__lede {
  margin-top: 12px;
  max-width: 21.5em;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
}
.turnkey__keep { white-space: nowrap; }

/* ---- Ruta de partidas: señales redondas unidas por un filete ----------------- */
.steps {
  --step: 44px;   /* diámetro de cada señal */
  --rule: 1.5px;  /* grosor del filete y del borde */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 36px;
}
.steps__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
}
/* Filete vertical que baja del centro de la señal hasta la siguiente. */
.steps__item::before {
  content: "";
  position: absolute;
  left: calc((var(--step) - var(--rule)) / 2);
  top: var(--step);
  bottom: 0;
  width: var(--rule);
  background: var(--ink);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__item:last-child::before { content: none; }
.steps__num {
  flex: none;
  width: var(--step);
  height: var(--step);
  border: var(--rule) solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.steps__label {
  display: flex;
  align-items: center;
  min-height: var(--step);
  font-size: 16px;
  line-height: 1.3;
}
/* La última partida, los acabados, cierra la ruta en cian. */
.steps__item:last-child .steps__num { border-color: var(--cyan); background: var(--cyan); }
.steps__item:last-child .steps__label { font-weight: 500; }

/* ---- Antes y después ---------------------------------------------------------- */
.pair {
  flex: 1 1 480px;
  min-width: 0;
}
.pair__photos {
  position: relative;
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
}
.pair__photo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  max-height: clamp(280px, 40vw, 460px);
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--line);
}
.pair__photo picture,
.pair__photo img { width: 100%; height: 100%; }
.pair__photo img { object-fit: cover; }
.pair__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
}
/* Flecha decorativa entre las dos fotos. */
.pair__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pair__caption {
  margin-top: 16px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- Colores forzados (alto contraste de Windows): el filete sigue visible ------ */
@media (forced-colors: active) {
  .steps__item::before { forced-color-adjust: none; background: CanvasText; }
}

/* ---- Tableta y escritorio: la ruta en dos columnas de cinco ------------------- */
@media (min-width: 48em) {
  .steps {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }
  .steps__item:nth-child(5)::before { content: none; } /* la quinta cierra la primera columna */
}

/* =========================================================================
   Proyectos: filtro por sector, tarjetas y ventana del proyecto
   (el HTML lo escribe build/generar-proyectos.py a partir del catálogo)
   ========================================================================= */

/* ---- Filtro por sector --------------------------------------------------- */
/* Sin JavaScript no filtra nada, así que no se muestra. En el teléfono es una tira que se
   desliza de lado y llega hasta el borde de la pantalla; el relleno de 6 px deja ver el foco. */
.filter { display: none; }

.js .filter {
  display: flex;
  gap: 8px;
  margin: clamp(20px, 2.4vw, 32px) calc(-1 * var(--edge-text)) -6px -6px;
  padding: 6px var(--edge-text) 6px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
}
.js .filter::-webkit-scrollbar { display: none; }

/* Las píldoras de proyectos son un poco más compactas que las de servicios (maqueta).
   position: relative contiene el texto oculto ("proyectos") dentro de la tira que se desliza;
   sin ella ese texto escaparía del recorte y ensancharía la página en el teléfono. */
.filter__chip {
  position: relative;
  flex: none;
  height: 44px;
  padding: 0 7px 0 16px;
  gap: 8px;
}
.filter__chip .chip__count { font-size: 13.5px; font-weight: 600; }
.filter__chip[aria-pressed="false"] .chip__count { color: var(--ink-2); }

@media (min-width: 48em) {
  .js .filter {
    flex-wrap: wrap;
    margin: clamp(20px, 2.4vw, 32px) 0 0;
    padding: 0;
    overflow: visible;
  }
}

/* ---- Retícula de tarjetas ---------------------------------------------------- */
/* Una sola lista en 12 columnas. Las tarjetas chicas van de una en una, de dos en dos cuando la
   lista mide 480 px o más y de cuatro en cuatro desde 880 px (los mismos cortes de la maqueta).
   Los dos destacados ocupan 5 y 7 columnas; el margen de un sexto de la separación hace que sus
   anchos sean exactamente los del 5fr / 7fr de la maqueta. */
.projects__list {
  --gap-x: clamp(20px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 36px var(--gap-x);
  margin-top: clamp(28px, 3.4vw, 48px);
  container-type: inline-size;
}

.projects__item {
  grid-column: span 12;
  min-width: 0;
}
@container (min-width: 480px) {
  .projects__item { grid-column: span 6; }
}
@container (min-width: 880px) {
  .projects__item { grid-column: span 3; }
}

/* Destacados: uno sobre otro en el teléfono; lado a lado desde 48em, con más aire debajo. */
.projects__item.projects__item--lead { grid-column: span 12; }

@media (min-width: 48em) {
  .projects__item--lead { margin-bottom: calc(clamp(36px, 3.6vw, 52px) - 36px); }
  .projects__item--lead:first-child {
    grid-column: span 5;
    margin-right: calc(var(--gap-x) / -6);
  }
  .projects__item--lead + .projects__item--lead {
    grid-column: span 7;
    margin-left: calc(var(--gap-x) / 6);
  }
}

/* Con JavaScript: "Todos" esconde las tarjetas de más hasta pulsar "Ver los N proyectos"
   y el filtro esconde las de otros sectores. */
.js .projects__item--mas,
.js .projects__item.is-oculto { display: none; }

.projects__more {
  display: none;
  justify-content: flex-end;
  margin-top: clamp(32px, 4vw, 56px);
}
.js .projects__more { display: flex; }

/* ---- Tarjeta ------------------------------------------------------------------ */
/* En el HTML el título va primero (así lo leen los lectores de pantalla) y la foto se dibuja
   arriba con order. El botón cubre la foto; con JavaScript toda la tarjeta abre la ventana. */
.card {
  display: flex;
  flex-direction: column;
}

.card__media {
  position: relative;
  order: -1;
}

.card__picture {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-photo);
  clip-path: inset(0 round var(--r-photo));
  background: var(--line);
}
.projects__item--lead .card__picture { aspect-ratio: 16 / 10; }

.card__img {
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.card__title {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.projects__item--lead .card__title {
  margin-top: 18px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.card__meta {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

.card__summary {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 48em) {
  .projects__item--lead .card__picture {
    aspect-ratio: auto;
    height: clamp(250px, 30vw, 430px);
  }
}

/* Botón que cubre la foto, con la píldora blanca que se abre para decir "Ver proyecto". */
.card__open {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-photo);
  background: transparent;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.js .card__open { display: block; }
.js .projects:not(.sin-ventana) .card { cursor: pointer; }
.sin-ventana .card__open { display: none; }

.card__ver {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  white-space: nowrap;
  clip-path: inset(0 calc(100% - 44px) 0 0 round 22px);
}
.card__ver-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card__ver-text {
  padding-right: 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

/* Con foco: la foto se acerca, la píldora se abre y la flecha gira (como al pasar el puntero). */
.card__open:focus-visible .card__ver { clip-path: inset(0 round 22px); }
.card__open:focus-visible .card__ver-icon .i { transform: rotate(-45deg); }
.card:has(.card__open:focus-visible) .card__img { transform: scale(1.03); }

@media (hover: hover) {
  .js .card:hover .card__ver { clip-path: inset(0 round 22px); }
  .js .card:hover .card__ver-icon .i { transform: rotate(-45deg); }
  .js .card:hover .card__img { transform: scale(1.03); }
}

/* Ficha en la tarjeta. Sin JavaScript es un desplegable nativo con las fotos, la ficha y el
   alcance; con JavaScript se oculta (la ventana del proyecto copia su contenido). */
.card__more { margin-top: 10px; }
.js .card__more { display: none; }

.card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.card__more-toggle::-webkit-details-marker { display: none; }
.card__more-toggle::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg);
}
.card__more[open] .card__more-toggle::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.card__detail { padding-bottom: 8px; }
.card__detail .pdialog__summary { display: none; }      /* ya está en la tarjeta */
.card__detail .pdialog__ficha { margin-top: 8px; }
.card__detail .pdialog__subtitle { margin-top: 20px; }
/* Fotos de la ficha sin JavaScript: una cuadrícula de dos columnas, todas 4:3. */
.card__detail .pdialog__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.card__detail .pdialog__slide picture {
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}
.card__detail .pdialog__slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---- Ventana del proyecto (<dialog class="pdialog">) -------------------------- */
/* El <dialog> cubre toda la pantalla y es transparente: el velo es su ::backdrop y el panel
   blanco va dentro, así un clic fuera del panel cae en el propio <dialog> y lo cierra.
   Teléfono: hoja que sube desde abajo. Desde 48em: panel centrado. Desde 64em: galería a la
   izquierda y ficha a la derecha. */
.pdialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.pdialog[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pdialog::backdrop { background: rgba(14, 21, 27, 0.6); }

.pdialog__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bar" "gallery" "info";
  align-content: start;
  width: 100%;
  max-height: calc(100% - 24px);
  padding: 0 12px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-hero) var(--r-hero) 0 0;
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* Barra: posición en la lista filtrada, proyecto anterior y siguiente, cerrar. */
.pdialog__bar {
  grid-area: bar;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  background: var(--surface);
}
.pdialog__pos {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 12px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--muted);
}
.pdialog__nav { display: flex; gap: 6px; }
.pdialog__close { margin-left: 6px; }

/* Galería: pista deslizable (una foto a la vez), contador, flechas y miniaturas. */
.pdialog__gallery {
  grid-area: gallery;
  min-width: 0;
}
.pdialog__stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ground);
}
.pdialog__track {
  display: flex;
  aspect-ratio: 4 / 3;
  max-height: 62vh;                 /* teléfono acostado: la foto deja ver flechas y ficha */
  max-height: 62dvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pdialog__track::-webkit-scrollbar { display: none; }
.pdialog__track:focus-visible { outline-offset: -3px; }

@supports selector(:has(*)) {
  .pdialog__track:focus-visible { outline: 0; }
  .pdialog__stage:has(.pdialog__track:focus-visible) {
    outline: 2px solid var(--cyan-ink);
    outline-offset: 3px;
  }
}

.pdialog__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* La foto entera sobre el fondo gris. Las fotos chicas del material traen su ancho en --ancho
   y no se agrandan más de 1.5 veces: quedan al centro, nítidas, en vez de borrosas. */
.pdialog__slide picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.pdialog__slide img {
  height: 100%;
  max-width: calc(var(--ancho, 100vw) * 1.5);
  object-fit: contain;
}

.pdialog__count {
  position: absolute;
  left: 12px;
  top: 12px;
  pointer-events: none;
}
.pdialog__arrows {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}
.pdialog__arrows .icon-btn { box-shadow: var(--shadow-float); }
/* Sobre una foto el foco lleva dos tonos para verse en cualquier fondo. */
.pdialog__arrows .icon-btn:focus-visible {
  outline-color: #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}

/* .pdialog delante: el reinicio ul[class] de la base pesa más que una sola clase.
   El relleno de 8 px deja ver el anillo de la miniatura activa y el del foco. */
.pdialog .pdialog__thumbs {
  display: flex;
  gap: 8px;
  margin: 4px -8px -8px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdialog__thumbs::-webkit-scrollbar { display: none; }
.pdialog__thumbs li { flex: none; }
.pdialog__thumb {
  display: block;
  width: 72px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line);
  opacity: 0.6;
  -webkit-tap-highlight-color: transparent;
}
.pdialog__thumb picture { height: 100%; }
.pdialog__thumb img {
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .pdialog__thumb:hover { opacity: 1; }
}
.pdialog__thumb[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}
.pdialog__thumb:focus-visible { outline-offset: 5px; }

/* Ficha: título, resumen, filas con filete (como el directorio de Nosotros) y alcance. */
.pdialog__info {
  grid-area: info;
  min-width: 0;
  padding: 24px 12px 0;
}
.pdialog__title {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.pdialog__summary {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pdialog__ficha {
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}
.pdialog__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.pdialog__row dt {
  flex: none;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.pdialog__row dd {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}
.pdialog__subtitle {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cyan-ink);
}
.pdialog__scope {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.pdialog__scope li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.pdialog__scope li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(0.75em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}
.pdialog__mail { margin-top: 28px; }

@media (min-width: 48em) {
  .pdialog[open] {
    align-items: center;
    padding: 24px;
  }
  .pdialog__panel {
    width: min(760px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    padding: 0 12px 28px;
    border-radius: var(--r-hero);
    box-shadow: var(--shadow-float);
  }
  .pdialog__info { padding: 28px 20px 0; }
}

/* Escritorio: la galería queda fija a la izquierda y solo la ficha se desplaza si es larga. */
@media (min-width: 64em) {
  .pdialog__panel {
    width: min(1100px, 100%);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "gallery bar" "gallery info";
    padding: 12px;
    overflow: hidden;
  }
  .pdialog__gallery { align-self: start; }
  .pdialog__track { max-height: calc(90dvh - 112px); }
  .pdialog__bar {
    position: static;
    padding: 0 0 0 28px;
  }
  .pdialog__pos { padding-left: 0; }
  .pdialog__info {
    padding: 20px 16px 16px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  /* Si la ficha no cabe, un velo abajo avisa que sigue (el JS pone la clase mientras haya más). */
  .pdialog__info.is-desborda {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  }
  .pdialog__thumb { width: 80px; }
}

/* ---- Movimiento --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .card__img,
  .card__ver-icon .i { transition: transform 500ms var(--ease); }
  .card__ver { transition: clip-path 500ms var(--ease); }
  .pdialog__thumb { transition: opacity 200ms ease, box-shadow 200ms ease; }

  /* Tarjetas que aparecen al filtrar o al pulsar "Ver los N proyectos". */
  .projects__item.is-nueva {
    animation: projects-aparece 200ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }

  /* Ventana: la hoja sube en el teléfono; desde 48em el panel aparece y crece un poco. */
  .pdialog[open]::backdrop { animation: pdialog-velo 300ms var(--ease-out); }
  .pdialog[open] .pdialog__panel { animation: pdialog-sube 500ms var(--ease-sheet); }
  .pdialog.is-cerrando::backdrop { animation: pdialog-velo-sale 240ms ease forwards; }
  .pdialog.is-cerrando .pdialog__panel { animation: pdialog-baja 240ms var(--ease-out) forwards; }

  /* Cambio de proyecto dentro de la ventana. */
  .pdialog__panel.is-cambio .pdialog__gallery,
  .pdialog__panel.is-cambio .pdialog__info { animation: pdialog-cambio 220ms var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
  .pdialog[open] .pdialog__panel { animation: pdialog-entra 300ms var(--ease-out); }
  .pdialog.is-cerrando .pdialog__panel { animation: pdialog-sale 160ms ease forwards; }
}

/* ---- Alto contraste de Windows: bordes que el sistema no quita ------------------ */
@media (forced-colors: active) {
  .pdialog__panel { border: 1px solid CanvasText; }
  .pdialog__thumb[aria-current="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}

@keyframes projects-aparece { from { opacity: 0; } }
@keyframes pdialog-velo { from { opacity: 0; } }
@keyframes pdialog-velo-sale { to { opacity: 0; } }
@keyframes pdialog-sube { from { transform: translateY(100%); } }
@keyframes pdialog-baja { to { transform: translateY(100%); } }
@keyframes pdialog-entra { from { opacity: 0; transform: scale(0.98); } }
@keyframes pdialog-sale { to { opacity: 0; transform: scale(0.98); } }
@keyframes pdialog-cambio { from { opacity: 0; } }

/* =========================================================================
   Clientes: panel blanco con dos grupos de nombres en columnas
   (escritorio: 3 + 1 columnas; teléfono: 2)
   ========================================================================= */
.clients__lead {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
}

/* El sector privado crece tres veces más que gobierno; si no caben juntos, se apilan. */
.clients__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 4vw, 56px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.clients__group {
  flex: 1 1 200px;
  min-width: 0;
}
.clients__group--privado { flex: 3 1 460px; }

.clients__head {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cyan-ink);
}

/* .clients delante: el reinicio ul[class] de la base pesa más que una sola clase. */
.clients .clients__names {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: 16px;
  font-size: clamp(15px, 0.38vw + 13.5px, 19px);
  line-height: 1.3;
}
.clients__names li {
  padding: 7px 0;
  break-inside: avoid;
}

/* Desde 48em: columnas de 200 px como mínimo y hasta tres, según el ancho del grupo. */
@media (min-width: 48em) {
  .clients .clients__names {
    columns: 3 200px;
    column-gap: 24px;
  }
}

/* =========================================================================
   Pie: panel marino con el contacto (titular, correo, copiar) y la fila final
   ========================================================================= */
/* Los márgenes laterales del panel alinean su contenido con el de los paneles de arriba. */
.site-footer {
  --footer-link: #c9d4db;
  margin: clamp(40px, 5vw, 72px) 12px 12px;
  padding: clamp(40px, 7vw, 104px) calc(var(--edge) + var(--panel-pad) - 12px) clamp(24px, 3vw, 40px);
  border-radius: var(--r-hero);
  background: var(--ink);
  color: #ffffff;
}
.site-footer__inner {
  max-width: 1192px;
  margin-inline: auto;
}

/* ---- Contacto ------------------------------------------------------------- */
.contact__title {
  max-width: 17em;
  font-size: clamp(32px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

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

/* Píldora grande del correo: el .btn de la base con las medidas de la maqueta. */
.contact__mail {
  --btn-icon: clamp(48px, 4.5vw, 64px);
  height: auto;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(8px, 0.7vw, 10px) clamp(8px, 0.7vw, 10px) clamp(8px, 0.7vw, 10px) clamp(22px, 2.6vw, 36px);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.contact__arrow {
  width: 22px;
  height: 22px;
}

/* "Copiar correo": los dos textos ocupan la misma celda, así el botón no cambia de ancho
   cuando dice "Copiado". El que no se usa queda con visibility: hidden (fuera de su nombre). */
.contact__copy {
  padding: 0 18px;
  font-weight: 500;
}
.contact__copy-labels { display: grid; }
.contact__copy-labels > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.contact__copy-done,
.contact__copy.is-copiado .contact__copy-idle { visibility: hidden; }
.contact__copy.is-copiado .contact__copy-done { visibility: visible; }

/* Aviso para lectores de pantalla; se ve solo si copiar falla. */
.contact__status {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--on-dark);
}

/* ---- Fila final: logo, enlaces y aviso legal --------------------------------- */
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer__logo {
  width: auto;
  height: 48px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 2vw, 28px);
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  color: var(--footer-link);
  font-size: 15px;
  text-decoration: none;
}
@media (hover: hover) {
  .site-footer__link:hover { color: #ffffff; }
}
.site-footer__legal {
  font-size: 14px;
  line-height: 1.4;
  color: var(--on-dark-muted);
}

/* ---- Movimiento --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .site-footer__link { transition: color 200ms ease; }

  /* El texto que sale se desvanece hacia arriba y el que entra sube; visibility cambia al final. */
  .contact__copy-labels > span { transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; }
  .contact__copy-done { opacity: 0; transform: translateY(30%); }
  .contact__copy.is-copiado .contact__copy-idle { opacity: 0; transform: translateY(-30%); }
  .contact__copy.is-copiado .contact__copy-done,
  .contact__copy:not(.is-copiado) .contact__copy-idle {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}