/* ==========================================================================
   LIMPATEX — Sistema de diseño
   Registro editorial: lienzo cálido, serif de titulares, color casi ausente,
   un único azul de acento y bordes de un píxel.
   ========================================================================== */

:root {
  /* Escala corporativa — los cinco tonos del logotipo, muestreados del original */
  --brand-gris: #d9d9d9;
  --brand-lila: #bdaccb;
  --brand-morado: #7a699d;
  --brand-violeta: #310984;
  --brand-tinta: #04002d;

  /* Superficies del sistema: vellum de lienzo, blanco de tarjeta, carbon para lo
     oscuro y onyx como cierre. La jerarquía es tonal, nunca por sombra. */
  --color-parchment: #fdfcff;
  --color-paper: #ffffff;
  --color-linen: #f7f6fb;
  --color-carbon: #211c30;
  --color-onyx: #04002d;
  --color-mercury: #8b8794;

  /* Texto y bordes. Nunca negro puro: se calienta a carbon o se enfría a onyx. */
  --color-graphite: #211c30;
  --color-charcoal: #423d53;
  --color-ash: #686375;
  --color-fog: #b3b0bc;
  --color-mist: #e2dee9;
  --color-twilight: #211838;
  --color-dusk: #140b28;

  /* El único color del sistema. Se reserva para la acción principal: en una paleta
     sin acentos, un solo tono saturado señala dónde hay que pulsar. */
  --color-accent: #3f13a5;
  --color-accent-wash: rgba(63, 19, 165, 0.07);
  --color-violeta: var(--brand-violeta);

  --surface-canvas: var(--color-parchment);
  --surface-card: var(--color-paper);
  --surface-wash: var(--color-linen);
  --surface-vivid: var(--brand-violeta);

  /* Tipografía: una sola familia en todo el sitio. El peso 300 en los titulares es
     la firma del sistema — hace que un titular grande se lea como una especificación
     técnica y no como un grito. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  --font-weight-light: 400;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-logo: 800;

  /* Escala tipográfica. El tracking es positivo, al contrario que en un sistema
     editorial: el peso ligero necesita aire para no verse apretado. */
  --text-label: 13px;
  --leading-label: 1.35;
  --tracking-label: -0.01em;

  --text-caption: 13px;
  --leading-caption: 1.35;
  --tracking-caption: -0.01em;

  --text-body-sm: 15px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.01em;

  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.01em;

  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.012em;

  --text-heading-sm: 27px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.03em;

  --text-heading: 40px;
  --leading-heading: 1.1;
  --tracking-heading: -0.02em;

  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.02em;

  --text-display: 54px;
  --leading-display: 1.05;
  --tracking-display: -0.02em;

  --leading-flat: 1;

  /* Espaciado */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Forma. El radio generoso es estructural: nada baja de 8 px, las imágenes van a
     80 px y todo lo pulsable es una píldora de 100 px. */
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-pill: 100px;

  --radius-nav: 16px;
  --radius-button: 100px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-surface: 80px;
  --radius-imagen: 80px;

  /* Sin elevación. La jerarquía se construye apilando tonos —vellum, blanco,
     carbon, onyx—, nunca con sombras: eso mantiene la interfaz plana y de
     instrumento en lugar de aplicación. */
  --shadow-sm: none;
  --shadow-subtle: none;
  --shadow-sm-2: none;
  --shadow-atmos: none;

  /* Layout */
  --page-max-width: 1200px;
  --gutter: 24px;
  --section-pad: clamp(48px, 7vw, 96px);
  --section-pad-tight: clamp(36px, 5vw, 60px);
  --card-padding: 22px;
}

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

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

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

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  color: var(--color-graphite);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.1;
  margin: 0;
}

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

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

button { font: inherit; cursor: pointer; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--spacing-8);
  background: var(--surface-card);
  border: 1px solid var(--color-twilight);
  border-radius: var(--radius-button);
  padding: var(--spacing-8) var(--spacing-16);
  z-index: 200;
  font-size: var(--text-body-sm);
}
.skip-link:focus { left: var(--spacing-16); }

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

/* --------------------------------------------------------------------------
   Tipografía de escala
   -------------------------------------------------------------------------- */

.display,
.heading-lg,
.heading,
.heading-sm {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  color: var(--color-graphite);
}

/* Los titulares son fluidos: el token marca el tamaño máximo, en pantalla
   pequeña bajan solos. Por eso el tracking va en em. */
.display {
  font-size: clamp(34px, 5.4vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.heading-lg {
  font-size: clamp(28px, 4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.heading {
  font-size: clamp(24px, 3.2vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.heading-sm {
  font-weight: var(--font-weight-regular);
  font-size: clamp(19px, 2.2vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
.subheading {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-graphite);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(17px, 2vw, var(--text-subheading));
  line-height: 1.45;
  letter-spacing: var(--tracking-subheading);
  color: var(--color-charcoal);
}
.body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-charcoal);
}
.muted { color: var(--color-ash); }
.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}
/* El cuadrado macizo de 4 px que precede a cada etiqueta es el gesto distintivo
   del sistema: sustituye al punto o al icono y le da un aire de indicador de
   instrumento. Sin él las etiquetas pierden la mitad de su carácter. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--spacing-24);
}
.eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--color-carbon);
  flex: 0 0 4px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--paper { background: var(--surface-card); }
.section--tight { padding-block: var(--section-pad-tight); }

.section-head { max-width: 720px; margin-bottom: var(--spacing-48); }
.section-head p { margin-top: var(--spacing-16); }

.grid { display: grid; gap: var(--spacing-24); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.stack-8  > * + * { margin-top: var(--spacing-8); }
.stack-12 > * + * { margin-top: var(--spacing-12); }
.stack-16 > * + * { margin-top: var(--spacing-16); }
.stack-24 > * + * { margin-top: var(--spacing-24); }
.stack-32 > * + * { margin-top: var(--spacing-32); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Navegación — píldora esmerilada flotante
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: var(--spacing-16);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - var(--spacing-32));
  max-width: var(--page-max-width);
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-24);
  border: 0;
  border-radius: var(--radius-nav);
  /* Sin desenfoque ni sombra: el contraste tonal contra el lienzo vellum basta para
     separar la barra del contenido, y es lo que mantiene la interfaz plana. */
  background: var(--color-carbon);
  color: #ffffff;
}
.nav.is-solid { background: var(--color-carbon); color: #ffffff; }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  flex-shrink: 0;
}
.nav__word {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-logo);
  font-size: 18px;
  letter-spacing: -0.035em;
  color: currentColor;
}

/* La marca son las cuatro barras del logotipo. Sobre el hero ilustrado van en
   blanco escalonado; en cuanto la píldora se vuelve opaca, recuperan su color. */
.nav__mark { width: 20px; height: 17.6px; flex-shrink: 0; }
/* La escala del logotipo se mantiene sobre el carbon: es el único punto donde la
   marca conserva su color completo. */
.nav__mark rect:nth-of-type(1) { fill: var(--brand-gris); }
.nav__mark rect:nth-of-type(2) { fill: var(--brand-lila); }
.nav__mark rect:nth-of-type(3) { fill: var(--brand-morado); }
.nav__mark rect:nth-of-type(4) { fill: #6b4fd0; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-left: auto;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-flat);
}
/* El enlace se apoya sobre una pastilla tenue al pasar por encima. Sobre una
   barra oscura funciona mejor que un subrayado: no añade una línea nueva a un
   sitio que ya va lleno de reglas de un píxel, y de paso da un área de pulsación
   de verdad en lugar de obligar a acertar sobre el texto. */
.nav__links a {
  padding: 6px 12px;
  border-radius: var(--radius-nav);
  color: currentColor;
  opacity: 0.72;
  background: transparent;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.nav__links a:hover,
.nav__links a:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
/* La página actual lleva la pastilla puesta. Va al doble de intensidad que el
   estado de paso: si se parecen, deja de saberse en qué página estás. */
.nav__links a[aria-current="page"] {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
}

.nav__cta { flex-shrink: 0; }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: var(--radius-nav);
  padding: 6px 14px;
  font-size: var(--text-body-sm);
  font-weight: 500;
}

/* Menú desplegable de servicios */
.nav__group { position: relative; }
.nav__group > button {
  background: transparent; border: 0; color: currentColor;
  font-size: var(--text-body-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-nav);
  opacity: 0.72;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.nav__group > button:hover,
.nav__group > button:focus-visible,
.nav__group.is-open > button {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
/* El galón gira: no es adorno, indica si el menú está abierto */
.nav__group > button span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.nav__group.is-open > button span { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav__group.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__menu a {
  display: block;
  padding: 9px var(--spacing-12);
  border-radius: var(--radius-button);
  color: var(--color-charcoal);
  font-size: var(--text-body-sm);
  opacity: 1;
}
.nav__menu a:hover { background: var(--surface-wash); }
.nav__menu { border-radius: var(--radius-card); }

@media (max-width: 940px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-block; }
}

/* Panel móvil */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--surface-canvas);
  padding: 88px var(--gutter) var(--spacing-32);
  overflow-y: auto;
  display: none;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-mist);
  font-size: var(--text-subheading);
  color: var(--color-graphite);
}
.mobile-menu .mobile-menu__sub a {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  padding-left: var(--spacing-16);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-body-sm);
  border-radius: var(--radius-button);
  padding: 7px 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.btn__arrow {
  width: 17px; height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; flex-shrink: 0;
}

/* Relleno macizo: en una paleta sin acentos, el único tono saturado del sistema
   señala sin ambigüedad dónde está la acción principal. */
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}
.btn--primary:hover { background: #24066a; border-color: #24066a; }

.btn--secondary { border-color: var(--color-carbon); color: var(--color-carbon); }
.btn--secondary:hover { background: rgba(50, 45, 42, 0.07); }

.btn--filled {
  background: var(--color-carbon);
  border-color: var(--color-carbon);
  color: #ffffff;
  padding: 16px 24px;
}
.btn--filled:hover { background: #1f1b19; }

.btn--light { border-color: rgba(255, 255, 255, 0.7); color: #ffffff; }
.btn--light:hover { background: rgba(255, 255, 255, 0.12); }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-carbon);
  transition: gap 0.2s ease;
}
.link:hover { gap: 12px; }
/* Enlace de acción: entra dentro de la excepción del violeta */
.link--blue { color: var(--color-accent); }

/* El botón principal es una píldora violeta maciza, así que se sostiene igual sobre
   el lienzo vellum que sobre una fotografía: no hace falta invertirlo. */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-twilight);
}
.hero--compact { min-height: min(62vh, 560px); }

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* --------------------------------------------------------------------------
   Hero con marco que se expande al hacer scroll — solo la portada.

   Adaptación a JavaScript plano del componente ScrollExpand de React Bits: misma
   lógica de progreso y las mismas curvas, sin React ni empaquetador. El marco parte
   de un recuadro centrado y se abre a pantalla completa; el titular se eleva y se
   desvanece, y el párrafo con los botones aparece al final.

   El marco no contiene una imagen suelta sino toda la pila que ya existía —las dos
   capas de fotografía con su fundido horario, las de vídeo y la luz ambiental—, así
   que el sistema de día, atardecer y noche sigue funcionando dentro.
   -------------------------------------------------------------------------- */

.hero--expand {
  /* El `overflow: hidden` heredado de .hero rompería el `position: sticky` de la
     escena. El recorte pasa a hacerlo la propia escena. */
  overflow: visible;
  display: block;
  min-height: 0;
  align-items: initial;
}

.hero__pista {
  position: relative;
  width: 100%;
}

.hero__escena {
  position: sticky;
  top: 0;
  width: 100%;
  overflow: hidden;
  --titulo-tam: 4rem;
}

.hero__marco {
  position: absolute;
  inset: 0;
  /* Valor de reposo; a partir de aquí lo gobierna el guion */
  clip-path: inset(21% 29% 21% 29% round 80px);
  will-change: clip-path;
}

.hero__medios {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: center;
}

/* Velo del componente: se funde para que el contenido revelado se lea */
.hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Más peso en el tercio inferior, que es donde se revelan el párrafo y los botones */
  background: linear-gradient(
    to top,
    rgba(4, 0, 45, 0.84) 0%,
    rgba(4, 0, 45, 0.58) 26%,
    rgba(4, 0, 45, 0.12) 62%,
    rgba(4, 0, 45, 0.34) 100%
  );
  opacity: 0;
}

.hero__titulo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--titulo-tam);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(4, 0, 45, 0.45);
  pointer-events: none;
  will-change: opacity, transform;
}

.hero__desliza {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-24);
  /* En móvil el botón flotante de llamada ocupa esa esquina */
}
@media (max-width: 700px) {
  .hero__desliza { bottom: 78px; }
}
.hero__desliza {
  text-align: center;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  will-change: opacity, transform;
}

.hero__revelado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(48px, 8vh, 96px);
  opacity: 0;
  will-change: opacity, transform;
}
.hero__revelado .lead {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
}
.hero__revelado .hero__actions { margin-top: var(--spacing-24); }

/* Sin movimiento el marco arranca abierto y la pista se queda en una pantalla:
   obligar a recorrer dos pantallas a quien ha pedido menos animación sería peor
   que no tener el efecto. */
@media (prefers-reduced-motion: reduce) {
  .hero__marco { clip-path: inset(0 round 0); }
  .hero__medios { transform: none; }
  .hero__titulo, .hero__desliza { display: none; }
  .hero__revelado { opacity: 1; }
  .hero__velo { opacity: 0.45; }
}

/* Fondo por hora del día — solo la portada.
   Dos capas superpuestas: la A lleva la imagen de partida y siempre es opaca; la B
   lleva la de destino y JavaScript le calcula la opacidad. El resultado es un
   fundido continuo en vez de un salto de imagen.
   Fuera de las franjas de transición ambas capas apuntan al mismo archivo, así que
   el navegador descarga una sola imagen. */
.hero__capas {
  position: absolute;
  /* Sangra 16 px por fuera del hero. El zoom y el desplazamiento son pequeños, pero
     sin este margen asomaría el borde del hero al moverse. */
  inset: -16px;
  pointer-events: none;
  will-change: transform;
  animation: hero-respiracion 32s ease-in-out infinite;
}

/* Respiración del fondo: un zoom de un 2,5 % y una deriva de siete píxeles, ida y
   vuelta en 32 segundos. A esa velocidad no se percibe como movimiento sino como
   profundidad; si se nota, está mal calibrado. */
@keyframes hero-respiracion {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  50% { transform: scale(1.025) translate3d(-7px, -5px, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}
.hero__capa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero__capa--b { opacity: 0; }

/* La transición se activa después del primer cálculo: si no, al cargar se vería
   entrar la imagen desde cero. */
.hero--foto.is-listo .hero__capa { transition: opacity 1.2s linear; }

/* La fotografía de día es mucho más luminosa que la ilustración para la que se
   calculó el velo original, y el texto blanco se perdía. */
.hero--foto /* Vídeo de fondo — solo la portada, por encima de las fotografías.
   Es una mejora progresiva: si no hay archivos, si el navegador no puede
   reproducirlos o si el visitante llega con datos limitados, las capas de fotografía
   siguen debajo intactas y no se nota nada. El vídeo nunca es imprescindible. */
.hero__peliculas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__pelicula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* Con el vídeo en marcha sobra la respiración sintética del fondo: ya hay
   movimiento real y dos movimientos superpuestos se estorban. */
.hero--foto.con-video .hero__capas { animation: none; }

/* Luz ambiental — solo la portada, entre la fotografía y el velo.
   Va debajo del velo a propósito: así la atenúa igual que a la foto y queda dentro
   de la escena en lugar de superpuesta. */
.hero__ambiente {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Reflejo que recorre las fachadas de la derecha de vez en cuando.
   La caja recorta lo que sobresale, así que el reflejo no puede invadir la columna
   del texto por mucho que se desplace. Empieza en el 58 % porque la tarjeta llega
   al 55,3 % en el peor caso de los anchos en que este efecto está activo. */
.hero__destello {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  right: 0;
  overflow: hidden;
  mix-blend-mode: screen;
}
.hero__destello::before {
  content: "";
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 55%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 35%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(8px);
  opacity: 0;
  animation: hero-destello 38s ease-in-out infinite;
}
/* Dos tercios del ciclo sin nada: el reflejo tiene que ser ocasional, no un vaivén */
@keyframes hero-destello {
  0%, 66% { transform: translate3d(-70%, 0, 0); opacity: 0; }
  74% { opacity: 0.6; }
  92% { opacity: 0.6; }
  100% { transform: translate3d(260%, 0, 0); opacity: 0; }
}

/* Rescoldo cálido sobre las plantas iluminadas. Solo de noche: el JavaScript que ya
   calcula la franja horaria marca el hero con la clase, no se añade lógica nueva. */
.hero__resplandor {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 2.5s ease;
}
.hero--foto.es-noche .hero__resplandor { opacity: 1; }
.hero__resplandor::before,
.hero__resplandor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 224, 168, 0.2), rgba(255, 224, 168, 0) 72%);
}
.hero__resplandor::before {
  left: 62%; top: 24%; width: 24%; height: 36%;
  animation: hero-rescoldo-a 26s ease-in-out infinite;
}
.hero__resplandor::after {
  left: 82%; top: 42%; width: 20%; height: 30%;
  animation: hero-rescoldo-b 34s ease-in-out infinite;
}
/* Desfasados y sin llegar nunca a cero: es un rescoldo que respira, no un parpadeo */
@keyframes hero-rescoldo-a {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}
@keyframes hero-rescoldo-b {
  0%, 100% { opacity: 0.85; }
  55% { opacity: 0.35; }
}

/* Por debajo de 1200 px la tarjeta se ensancha en proporción hasta ocupar el 86 %
   a 768 px, así que no queda fachada libre por la que pasar sin cruzar el texto:
   ahí el reflejo se desactiva. */
@media (max-width: 1200px) {
  .hero__destello { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__capas,
  .hero__destello::before,
  .hero__resplandor::before,
  .hero__resplandor::after {
    animation: none;
  }
  .hero__destello::before { opacity: 0; }
}

.hero__scrim {
  background: linear-gradient(
    to top,
    rgba(10, 6, 26, 0.82) 0%,
    rgba(10, 6, 26, 0.55) 40%,
    rgba(10, 6, 26, 0.34) 70%,
    rgba(10, 6, 26, 0.46) 100%
  );
}

/* Vídeo de fondo. Comparte encuadre con la ilustración: la única diferencia es
   que el cartel se ve hasta que el guion decide cargar el clip, y se queda como
   imagen fija en móvil y con animaciones reducidas. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  background: var(--color-twilight);
  /* El clip es muy claro —escalera blanca a plena luz— y el texto de la tarjeta
     va en blanco. Sin bajarle la luz, el subtítulo se lee mal en las zonas más
     brillantes del plano. */
  filter: brightness(0.78) saturate(0.92);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 34, 0.62) 0%, rgba(20, 24, 34, 0.18) 45%, rgba(20, 24, 34, 0.3) 100%);
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(32px, 6vw, 64px);
}

.hero__card {
  max-width: 640px;
  border-radius: var(--radius-surface);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: clamp(24px, 4vw, 40px);
  color: #ffffff;
}
.hero__card h1 { color: #ffffff; }
.hero__card p { color: rgba(255, 255, 255, 0.88); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-24);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.card:hover { border-color: var(--color-carbon); }

.card__icon {
  width: 34px; height: 34px;
  margin-bottom: var(--spacing-20);
  color: var(--color-twilight);
}
.card h3 { margin-bottom: var(--spacing-8); }
.card p {
  color: var(--color-ash);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.card__foot { margin-top: auto; padding-top: var(--spacing-20); }

.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card--media .card__body { padding: var(--spacing-24); }

/* Tarjeta atmosférica (única superficie saturada del sistema) */
.atmos {
  border-radius: var(--radius-card-lg);
  background: var(--surface-vivid);
  color: #ffffff;
  padding: clamp(36px, 6vw, 60px);
  position: relative;
  overflow: hidden;
}
.atmos h2, .atmos h3 { color: #ffffff; }
.atmos p { color: rgba(255, 255, 255, 0.9); }
.atmos__art {
  position: absolute;
  right: -40px; bottom: -30px;
  width: 380px; opacity: 0.35; pointer-events: none;
}
.atmos__inner { position: relative; max-width: 640px; }

/* Nota lateral: el servicio secundario que no compite con la rejilla principal */
.aside-note {
  margin-top: var(--spacing-24);
  padding: var(--spacing-20) var(--spacing-24);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  background: var(--surface-wash);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  flex-wrap: wrap;
}
.aside-note p { color: var(--color-charcoal); font-size: var(--text-body-sm); max-width: 62ch; }
.aside-note strong { color: var(--color-graphite); font-weight: var(--font-weight-semibold); }

/* Tarjeta de diagrama */
.diagram-card {
  border-radius: var(--radius-card);
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  padding: var(--spacing-12);
}
.diagram-card svg { width: 100%; height: auto; }

/* Galería en acordeón.

   Versión en CSS del componente AccordionGallery de React Bits. El original usa
   React y gsap para animar `flex-grow`, pero eso lo hace una transición de CSS
   sin ayuda: el panel bajo el ratón crece y los demás se encogen, se apagan a
   gris y se inclinan un poco. Sin JavaScript, salvo el toque en pantallas
   táctiles, donde no hay ratón que seguir. */
.acordeon {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 460px;
  perspective: 1400px;
}

.acordeon__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card-lg);
  cursor: pointer;
  background: var(--color-twilight);
  transform-style: preserve-3d;
  transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Con tres paneles y algo más de la mitad para el abierto, el que crece se
   lleva 2,17 partes y los otros una cada uno. */
.acordeon__panel.es-inicial,
.acordeon__panel:hover,
.acordeon__panel:focus-visible,
.acordeon__panel.es-activo { flex-grow: 2.17; }

/* En cuanto el ratón entra en la galería manda el panel que toca, no el inicial */
.acordeon:hover .acordeon__panel.es-inicial:not(:hover),
.acordeon:focus-within .acordeon__panel.es-inicial:not(:focus-visible):not(:hover) { flex-grow: 1; }

/* Los paneles cerrados se inclinan; el abierto vuelve a plano */
.acordeon__panel:first-child { transform: rotateY(-8deg); }
.acordeon__panel:last-child { transform: rotateY(8deg); }
.acordeon__panel.es-inicial,
.acordeon__panel:hover,
.acordeon__panel:focus-visible,
.acordeon__panel.es-activo { transform: rotateY(0); }
.acordeon:hover .acordeon__panel.es-inicial:not(:hover):first-child { transform: rotateY(-8deg); }
.acordeon:hover .acordeon__panel.es-inicial:not(:hover):last-child { transform: rotateY(8deg); }

.acordeon__marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.acordeon__foto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: none;
  height: 100%;
  object-fit: cover;
  user-select: none;
  /* Apagados en gris: el que se abre recupera el color, y esa es la señal */
  filter: grayscale(1);
  transition: filter 0.6s ease;
}
.acordeon__panel:hover .acordeon__foto,
.acordeon__panel:focus-visible .acordeon__foto,
.acordeon__panel.es-inicial .acordeon__foto,
.acordeon__panel.es-activo .acordeon__foto { filter: grayscale(0); }
.acordeon:hover .acordeon__panel.es-inicial:not(:hover) .acordeon__foto { filter: grayscale(1); }

.acordeon__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 0, 45, 0.72) 100%),
    rgba(4, 0, 45, 0.34);
  transition: background 0.6s ease;
}
.acordeon__panel:hover .acordeon__velo,
.acordeon__panel:focus-visible .acordeon__velo,
.acordeon__panel.es-inicial .acordeon__velo,
.acordeon__panel.es-activo .acordeon__velo {
  background: linear-gradient(180deg, transparent 45%, rgba(4, 0, 45, 0.72) 100%);
}
.acordeon:hover .acordeon__panel.es-inicial:not(:hover) .acordeon__velo {
  background: linear-gradient(180deg, transparent 45%, rgba(4, 0, 45, 0.72) 100%),
    rgba(4, 0, 45, 0.34);
}

/* El rótulo solo aparece en el panel abierto: en uno estrecho no cabría */
.acordeon__rotulo {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.acordeon__barra {
  flex: 0 0 auto;
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: #ffffff;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.acordeon__texto {
  color: #ffffff;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-10px);
  /* El texto entra un pelo después que la barra: leído, no soltado de golpe */
  transition: opacity 0.45s ease 0.06s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}
.acordeon__panel:hover .acordeon__barra,
.acordeon__panel:hover .acordeon__texto,
.acordeon__panel:focus-visible .acordeon__barra,
.acordeon__panel:focus-visible .acordeon__texto,
.acordeon__panel.es-inicial .acordeon__barra,
.acordeon__panel.es-inicial .acordeon__texto,
.acordeon__panel.es-activo .acordeon__barra,
.acordeon__panel.es-activo .acordeon__texto { opacity: 1; transform: translateX(0); }
.acordeon:hover .acordeon__panel.es-inicial:not(:hover) .acordeon__barra,
.acordeon:hover .acordeon__panel.es-inicial:not(:hover) .acordeon__texto {
  opacity: 0;
  transform: translateX(-10px);
}

/* Apilado en móvil: en vertical no hay sitio para tres columnas */
@media (max-width: 620px) {
  .acordeon {
    flex-direction: column;
    height: auto;
    perspective: none;
  }
  /* En columna hay que soltar el reparto flexible: con base cero y altura
     automática del contenedor, los paneles se quedan sin altura y desaparecen.
     Aquí manda la altura declarada, no el crecimiento. */
  .acordeon__panel {
    flex: 0 0 auto;
    height: 110px;
    transform: none !important;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .acordeon__panel.es-inicial,
  .acordeon__panel.es-activo,
  .acordeon__panel:focus-visible {
    flex: 0 0 auto;
    height: 260px;
  }
  .acordeon__foto { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .acordeon__panel { transform: none !important; }
}

/* Ilustración de sección a sangre completa */
.figure-lg {
  border-radius: var(--radius-imagen);
  overflow: hidden;
}
.figure-lg img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   Listas y detalles
   -------------------------------------------------------------------------- */

.checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--spacing-12);
  font-size: var(--text-body);
  color: var(--color-charcoal);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 4px; height: 4px;
  background: var(--color-carbon);
}

.rule { height: 1px; background: var(--color-mist); border: 0; margin: 0; }

.stat { border-top: 1px solid var(--color-carbon); padding-top: var(--spacing-16); }
.stat__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: clamp(28px, 3.2vw, var(--text-heading));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-graphite);
  display: block;
}
.stat__label { font-size: var(--text-caption); color: var(--color-ash); margin-top: var(--spacing-8); display: block; }

/* --------------------------------------------------------------------------
   Tira de clientes

   Cada logotipo va dentro de una tarjeta idéntica, con el mismo borde de un
   píxel que el resto del sitio. Es lo que los integra: los logotipos de nueve
   marcas distintas no comparten proporción, ni peso, ni color, y sueltos sobre
   el fondo se ven como recortes pegados. Dentro de una retícula de contenedores
   iguales, las diferencias dejan de importar.

   El carrusel avanza solo, muy despacio, y se detiene al pasar el ratón. Los
   degradados de los extremos evitan que ningún logotipo aparezca cortado contra
   el borde: entran y salen difuminados.
   -------------------------------------------------------------------------- */

.clients {
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-8);
  /* Sin máscara los logotipos se cortarían en seco contra el borde */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clients__track {
  display: flex;
  gap: var(--spacing-16);
  width: max-content;
  animation: clients-scroll 64s linear infinite;
}
.clients:hover .clients__track,
.clients:focus-within .clients__track { animation-play-state: paused; }

@keyframes clients-scroll {
  /* La mitad exacta: en ese punto la segunda copia ocupa el lugar de la primera */
  to { transform: translateX(calc(-50% - var(--spacing-8))); }
}

.client {
  flex: 0 0 auto;
  width: 196px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--spacing-16);
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Al reposo van desaturados, no en gris. Tres de estas marcas traen el color de
   fondo incrustado en su logotipo, y en escala de grises se convertían en ladrillos
   sin identidad; bajando la saturación se sigue reconociendo de quién es cada uno.
   Al pasar el ratón recuperan el color entero. */
.client img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: saturate(0.35) contrast(0.92);
  opacity: 0.72;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.client:hover {
  border-color: var(--color-fog);
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}
.client:hover img { filter: none; opacity: 1; }

/* Reserva mientras no exista el archivo del logotipo */
.client__name {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ash);
  text-align: center;
}

@media (max-width: 600px) {
  .client { width: 164px; height: 84px; padding: var(--spacing-12); }
}

/* Sin movimiento: el carrusel se convierte en una retícula estática y la segunda
   copia de la lista, que solo servía para el bucle, desaparece. */
@media (prefers-reduced-motion: reduce) {
  .clients {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .clients__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: var(--gutter);
  }
  .clients__track .client[aria-hidden="true"] { display: none; }
}

/* Pasos numerados */
.steps { counter-reset: step; }
.step {
  border-top: 1px solid var(--color-mist);
  padding: var(--spacing-24) 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--spacing-16);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: var(--text-subheading);
  color: var(--color-mercury);
}

/* Acordeón de preguntas */
.faq { border-top: 1px solid var(--color-carbon); }
.faq details { border-bottom: 1px solid var(--color-carbon); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-24) 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-subheading);
  color: var(--color-graphite);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-16);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-button);
  background: var(--surface-card);
  color: var(--color-carbon);
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-light);
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq details[open] summary::after { content: "–"; background: var(--color-carbon); color: #ffffff; }
.faq summary { align-items: center; }
.faq summary:hover::after { background: var(--color-carbon); color: #ffffff; }
.faq details p { padding-bottom: var(--spacing-20); color: var(--color-ash); max-width: 70ch; }

/* Tabla de precios / servicios */
.plan { display: flex; flex-direction: column; height: 100%; }
.plan__price {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  color: var(--color-graphite);
  display: block;
  margin: var(--spacing-8) 0 var(--spacing-16);
}
.plan__price span { font-family: var(--font-sans); font-size: var(--text-caption); color: var(--color-ash); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--spacing-20); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-20); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field { display: block; }
.field > span {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-ash);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-charcoal);
  border-radius: 0;
  background: var(--surface-wash);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  padding: 11px var(--spacing-12);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
  background: #ffffff;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input[type="file"] { padding: 9px var(--spacing-12); font-size: var(--text-body-sm); }

.consent { display: flex; gap: var(--spacing-12); align-items: flex-start; }
/* El señuelo se saca de la pantalla, no se oculta con display:none — hay robots
   que ignoran los campos ocultos pero rellenan los que están fuera de vista. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--color-accent); flex-shrink: 0; }
.consent span { font-size: var(--text-caption); color: var(--color-ash); }
.consent a { text-decoration: underline; }

.form__status {
  font-size: var(--text-body-sm);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-button);
  border: 1px solid var(--color-mist);
  background: var(--surface-wash);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-error { border-color: #d8b4b4; color: #8c3a3a; }

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

.office { border-top: 1px solid var(--color-mist); padding-top: var(--spacing-16); }
.office h3 { font-size: var(--text-subheading); margin-bottom: var(--spacing-8); }
.office p, .office a { font-size: var(--text-body-sm); color: var(--color-ash); display: block; }
.office a:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-onyx);
  border-top: 0;
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(60px, 8vw, 96px) var(--spacing-36);
}
.footer .heading, .footer h4 { color: #ffffff; }
.footer li a, .footer .caption { color: rgba(255, 255, 255, 0.72); }
.footer li a:hover { color: #ffffff; }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.16); }
.footer .btn--primary { background: #ffffff; border-color: #ffffff; color: var(--color-onyx); }
.footer .btn--primary:hover { background: var(--color-linen); border-color: var(--color-linen); }
.footer__statement { max-width: 18ch; margin-bottom: var(--spacing-48); }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--spacing-32); }
@media (max-width: 820px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer__cols { grid-template-columns: 1fr; } }
/* Sobre el pie onyx el nombre del logotipo original, en tinta casi negra, se
   pierde: se recompone con las barras de la marca y el nombre en blanco. */
.footer__lockup { width: 132px; margin-bottom: var(--spacing-24); }
.footer__lockup img { width: 100%; height: auto; }
.footer__lockup span {
  display: block;
  margin-top: 7px;
  font-weight: var(--font-weight-logo);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #ffffff;
}

.footer h4 {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--spacing-16);
}
.footer li { margin-bottom: var(--spacing-8); }
.footer li a { font-size: var(--text-body-sm); }
.footer__bottom {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-mist);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

/* --------------------------------------------------------------------------
   Banda de cookies
   -------------------------------------------------------------------------- */

.cookies {
  position: fixed;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  z-index: 120;
  max-width: 380px;
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-16);
  font-size: var(--text-caption);
  color: var(--color-ash);
  display: none;
}
.cookies.is-visible { display: block; }
.cookies__actions {
  margin-top: var(--spacing-12);
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
.cookies__actions button {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-twilight);
}
.cookies__actions button:last-child { color: var(--color-accent); }
.cookies__divider { width: 1px; height: 13px; background: var(--color-mist); }

/* --------------------------------------------------------------------------
   Teléfono flotante (móvil)
   -------------------------------------------------------------------------- */

.call-fab {
  position: fixed;
  left: var(--spacing-16);
  bottom: var(--spacing-16);
  z-index: 110;
  background: var(--color-dusk);
  color: #ffffff;
  border: 1px solid var(--color-twilight);
  border-radius: var(--radius-nav);
  padding: 11px 18px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  display: none;
}
@media (max-width: 700px) { .call-fab { display: inline-flex; align-items: center; gap: 8px; } }
/* Con el menú desplegado el botón flotante sobra: está por encima del panel y
   se comía la última entrada de la lista. */
body.menu-abierto .call-fab { display: none; }

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

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Contenido legal
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-heading-sm); margin: var(--spacing-40) 0 var(--spacing-12); }
.prose h3 { font-size: var(--text-subheading); margin: var(--spacing-24) 0 var(--spacing-8); }
.prose p, .prose li { color: var(--color-charcoal); margin-bottom: var(--spacing-12); }
.prose ul { list-style: disc; padding-left: 20px; }
.prose a { color: var(--color-accent); text-decoration: underline; }

/* Cabecera de página interior */
.page-head { padding-top: 128px; padding-bottom: var(--spacing-48); }
.page-head .display, .page-head .heading-lg { max-width: 20ch; }
.page-head p { margin-top: var(--spacing-20); max-width: 62ch; }

.breadcrumb { font-size: var(--text-caption); color: var(--color-ash); margin-bottom: var(--spacing-24); }
.breadcrumb a:hover { color: var(--color-accent); }