/* =========================================================================
   Estudio Valiant — hoja de estilos única
   Paleta monocroma con acento azul marino. Todo el sitio usa estos tokens.
   ========================================================================= */

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #636363;
  --border: #c4c4c4;
  --card: #f7f7f7;
  --accent: #183275;
  --accent-fg: #ffffff;

  /* Colores derivados. styles.css y effects.css los usan en lugar de valores
     fijos, y son los que redefine assets/css/theme-oscuro.css. */
  --line: rgba(196, 196, 196, 0.6);
  --line-soft: rgba(196, 196, 196, 0.5);
  --line-faint: rgba(196, 196, 196, 0.4);
  --fg-soft: rgba(99, 99, 99, 0.95);
  --fg-muted: rgba(17, 17, 17, 0.8);
  --fg-quiet: rgba(17, 17, 17, 0.9);
  --dim: rgba(99, 99, 99, 0.4);
  --dim-strong: rgba(99, 99, 99, 0.6);
  --dimmer: rgba(99, 99, 99, 0.3);
  --dot-hover: rgba(17, 17, 17, 0.6);
  --btn-line: rgba(17, 17, 17, 0.2);
  --rail-bg: rgba(255, 255, 255, 0.8);
  --bar-bg: rgba(255, 255, 255, 0.94);
  --tile-bg: #ffffff;
  --tile-fg: #262626;
  --tile-seam: rgba(255, 255, 255, 0.5);
  --accent-wash: rgba(24, 50, 117, 0.05);
  --accent-wash-soft: rgba(24, 50, 117, 0.04);
  --accent-soft: rgba(24, 50, 117, 0.2);
  --accent-line: rgba(24, 50, 117, 0.6);
  --accent-glow: rgba(24, 50, 117, 0.16);
  --accent-ghost: rgba(24, 50, 117, 0.18);
  --accent-stroke: rgba(24, 50, 117, 0.8);
  --cursor-ring: rgba(24, 50, 117, 0.45);
  --cursor-ring-strong: rgba(24, 50, 117, 0.7);
  --scroll-track: #f5f5f5;
  --scroll-thumb: #c2c2c2;
  --scroll-thumb-hover: #a3a3a3;
  --noise: 0.03;
  --logo-filter: none;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;

  /* Ancho del carril lateral fijo (solo escritorio) */
  --rail: 5rem;
  --container-max: 100rem;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Textura de ruido sobre toda la página */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ====================== Utilidades tipográficas ====================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
}

.eyebrow--muted {
  color: var(--muted);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
  margin: 0;
}

.mono {
  font-family: var(--font-mono);
}

.lead {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}

.section {
  position: relative;
  padding-block: 4rem;
}

.section--bordered {
  border-top: 1px solid var(--line-soft);
}

.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;
}

.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1100;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ====================== Animación de entrada ====================== */

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* El desplazamiento lateral solo se aplica cuando hay margen para él.
   En móvil el margen es de 1.5rem y un translateX sacaría el texto fuera de
   la pantalla, que al estar recortada lo mostraría cortado. */
@media (min-width: 768px) {
  .reveal--left {
    transform: translateX(-3.5rem);
  }
  .reveal--right {
    transform: translateX(3.5rem);
  }
}

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

/* Hijos escalonados */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ====================== Navegación ====================== */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: none;
  height: 100vh;
  width: var(--rail);
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-right: 1px solid var(--line-faint);
  background: var(--rail-bg);
  backdrop-filter: blur(6px);
}

.rail__logo {
  padding-inline: 0.75rem;
  transition: opacity 0.2s;
}
.rail__logo:hover {
  opacity: 0.6;
}

.rail__links {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-self: stretch;
  padding-inline: 1rem;
}

/* Columna de puntos oculta (PUNTOS_CARRIL = false en assets/js/details.js).
   Se oculta, no se borra: el menu a pantalla completa se construye leyendo
   estos mismos enlaces, asi que quitarlos del HTML lo dejaria vacio. */
.rail--sin-puntos .rail__links {
  display: none;
}

/* Hilo que une los puntos: los convierte en un recorrido en vez de en una
   lista suelta, que es lo que hace entender que marcan por donde vas. */
.rail--secciones .rail__links::before {
  content: "";
  position: absolute;
  left: calc(1rem + 2.5px);
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--line-faint);
}

.rail--secciones .rail__link {
  position: relative;
  z-index: 1;
}

.rail--secciones .rail__dot {
  box-shadow: 0 0 0 3px var(--bg);
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rail__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dim);
  transition: background 0.3s, transform 0.3s;
}

.rail__link:hover .rail__dot {
  background: var(--dot-hover);
}

.rail__link[aria-current] .rail__dot {
  background: var(--accent);
  transform: scale(1.45);
}

.rail__label {
  position: absolute;
  left: 1.5rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s, left 0.2s;
  pointer-events: none;
}

.rail__link:hover .rail__label {
  opacity: 1;
  left: 2rem;
}

.rail__link[aria-current] .rail__label {
  color: var(--accent);
}

.rail__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Barra inferior en móvil */
.mobilebar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bar-bg);
  backdrop-filter: blur(6px);
  scrollbar-width: none;
}
.mobilebar::-webkit-scrollbar {
  display: none;
}

/* Los seis enlaces suman mas del doble del ancho de un movil, asi que la
   barra se desplaza. El degradado avisa de que la fila sigue: sin el, el
   ultimo enlace visible parecia el ultimo del sitio. Va en position fixed
   para quedarse quieto mientras la barra se desplaza por debajo. */
.mobilebar::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  width: 2.75rem;
  height: calc(48px + 1rem + 1px);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bar-bg) 75%);
}

.mobilebar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 48px;
  padding-inline: 0.75rem;
}

.mobilebar__link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.2s;
}

.mobilebar__link[aria-current="page"] {
  color: var(--accent);
}

/* Aire al final del recorrido para que el ultimo enlace no quede bajo el
   degradado cuando la barra llega al tope */
.mobilebar__link:last-child {
  padding-right: 2.75rem;
}

/* ====================== Botones y enlaces ====================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--btn-line);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.btn__chevron {
  transition: transform 0.4s ease-in-out;
}

.btn:hover .btn__chevron {
  transform: rotate(45deg);
}

.link-quiet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  transition: color 0.2s;
}

.link-quiet:hover {
  color: var(--fg);
}

/* Estos enlaces de una linea median 18px de alto: muy facil fallar el dedo.
   Se les da altura sin mover el subrayado. Se aplica tanto por tactil como
   por ancho, porque hay portatiles tactiles y tabletas con raton. */
@media (hover: none), (max-width: 47.9375em) {
  .link-quiet,
  .sector__more a,
  .footer__col a {
    display: inline-block;
    min-height: 44px;
    padding-block: 0.85rem;
  }

  .link-quiet::after,
  .footer__col a::after {
    bottom: 0.55rem;
  }

  .footer__brand {
    padding-block: 0.5rem;
  }
}

/* ====================== Subrayado animado ====================== */

.highlight {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Horizontalmente la barra ocupa la caja del texto (que lleva su propio
   relleno lateral), así que no sobresale del renglón ni se recorta contra el
   borde de la pantalla. Verticalmente sobresale un poco: las mayúsculas de
   Bebas miden 0.71em y las tildes llegan a 0.87em, y la barra tiene que
   cubrirlas enteras — si no, el trozo de letra que queda fuera se ve blanco
   sobre blanco y parece cortado. */
.highlight__bar {
  position: absolute;
  inset: -0.08em 0 0.02em 0;
  background: var(--accent);
  transform: scaleX(var(--reveal, 0));
  transform-origin: left center;
}

/* La misma variable --reveal mueve el borde de la barra y el corte del
   degradado, así que el texto siempre es blanco donde hay azul. */
.highlight__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  /* Altura de línea propia: fija la posición de la línea base y hace que la
     geometría de la barra no dependa del line-height de cada titular. */
  line-height: 1;
  padding-inline: 0.1em;
  background-image: linear-gradient(
    90deg,
    var(--accent-fg) calc(var(--reveal, 0) * 100%),
    var(--fg) calc(var(--reveal, 0) * 100%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sin JavaScript, el subrayado se muestra completo */
.no-js .highlight {
  --reveal: 1;
}

/* ====================== Panel split-flap ====================== */

.split-flap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12em 0.3em;
  cursor: pointer;
  font-size: var(--flap-narrow);
  user-select: none;
}

.split-flap__word {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.split-flap__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.65em;
  height: 1.05em;
  overflow: hidden;
  background: var(--tile-bg);
  font-family: var(--font-display);
  color: var(--tile-fg);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.split-flap__tile.is-flipping {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Costura horizontal del panel */
.split-flap__tile::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--tile-seam);
  z-index: 2;
}

.split-flap__char {
  line-height: 1;
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}

.sound-toggle:hover {
  color: var(--fg);
}

/* ====================== Portada ====================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: 6rem 8rem;
}

.hero__title {
  margin: 1.5rem 0 0;
  /* El titular mide 813px en una linea a su tamano maximo. Con 46rem (736px)
     partia en dos aunque el hero tuviera 1110px libres: el limite lo imponia
     esta caja, no la pantalla. 52rem le dan el hueco justo para ir en una
     sola linea de 768px en adelante; por debajo parte, que a esos anchos
     mantenerla entera exigiria una letra ilegible. */
  max-width: 52rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fg-soft);
}

.hero__text {
  margin-top: 2.5rem;
  max-width: 28rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 3.5rem;
}

.hero__tag {
  position: absolute;
  right: 1.5rem;
  bottom: 5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.hero__side {
  display: none;
  position: absolute;
  left: 5.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.hero__side span {
  display: block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  transform: rotate(-90deg);
  transform-origin: left center;
}

/* ====================== Cabecera de página interior ====================== */

.pagehero {
  position: relative;
  padding-block: 6rem 3rem;
}

.pagehero__title {
  margin: 1rem 0 0;
  max-width: 60rem;
  font-size: clamp(3.5rem, 9vw, 9rem);
}

.pagehero__lead {
  margin-top: 2rem;
  max-width: 42rem;
  font-size: clamp(0.875rem, 1.4vw, 1rem);
}

/* ====================== Rejillas y tarjetas ====================== */

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.75rem;
}

.section__title {
  margin-top: 1rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.section__note {
  display: none;
  max-width: 20rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Servicios (2 tarjetas grandes) */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 21rem;
  padding: 2rem;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.5s;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-wash);
  opacity: 0;
  transition: opacity 0.5s;
}

.service-card:hover {
  border-color: var(--accent-line);
}
.service-card:hover::before {
  opacity: 1;
}

.service-card > * {
  position: relative;
}

.service-card__title {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1;
  transition: color 0.3s;
}

.service-card:hover .service-card__title {
  color: var(--accent);
}

.service-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
}

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tick-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.tick-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-0.2em);
}

.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s;
}

.service-card:hover .service-card__more {
  color: var(--accent);
}

.service-card:hover .service-card__more svg {
  transform: rotate(45deg);
}

.service-card__more svg {
  transition: transform 0.4s ease-in-out;
}

/* Rejilla de características */
.features {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.feature {
  padding: 2rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background-color 0.3s;
}

.feature:hover {
  background: var(--accent-wash-soft);
}

.feature__num {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.feature__title {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  transition: color 0.3s;
}

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

.feature__text {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
}

/* Proceso en 4 pasos */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.step {
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--dimmer);
  transition: color 0.3s;
}

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

.step__title {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: 0.02em;
}

.step__text {
  margin: 1rem 0 0;
  max-width: 20rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
}

/* Lista numerada a dos columnas */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.split__title {
  margin-top: 1rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.checklist li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--fg-quiet);
}

.checklist li:last-child {
  border-bottom: 0;
}

.checklist__num {
  width: 2rem;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.checklist__mark {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent);
}

/* Razones (por qué Valiant) */
.reasons {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.reason {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line-faint);
}

.reason:last-child {
  border-bottom: 0;
}

.reason__num {
  padding-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.reason__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: 0.02em;
}

.reason__text {
  margin: 0.75rem 0 0;
  max-width: 32rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
}

/* Principios alternados */
.principles {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.principle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.principle--right {
  align-items: flex-end;
  text-align: right;
}

.principle__label {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.principle__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.principle__text {
  margin: 1.5rem 0 0;
  max-width: 28rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.75;
}

.principle__rule {
  margin-top: 2rem;
  width: 6rem;
  height: 1px;
  background: var(--border);
}

/* Rejilla de proyectos */
.projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-auto-rows: 200px;
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.5s;
}

.project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-wash);
  opacity: 0;
  transition: opacity 0.5s;
}

.project:hover,
.project.is-active {
  border-color: var(--accent-line);
}

.project:hover::before,
.project.is-active::before {
  opacity: 1;
}

.project > * {
  position: relative;
  z-index: 1;
}

.project__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.project__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  letter-spacing: -0.01em;
  transition: color 0.3s;
}

.project:hover .project__title,
.project.is-active .project__title {
  color: var(--accent);
}

.project__text {
  margin: 0;
  max-width: 18rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
  /* En móvil siempre visible: no hay hover en pantallas táctiles */
  opacity: 1;
}

.project__index {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  transition: color 0.3s;
}

.project:hover .project__index,
.project.is-active .project__index {
  color: var(--accent);
}

.project__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2;
}

.project:hover .project__corner,
.project.is-active .project__corner {
  opacity: 1;
}

.project__corner::before,
.project__corner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.project__corner::before {
  top: 0;
  right: 0;
  width: 100%;
  height: 1px;
}
.project__corner::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
}

.projects-more {
  margin-top: 2rem;
}

/* Tira de tecnologías */
.techs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.tech {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.3s, background-color 0.3s;
}

.tech:hover {
  color: var(--fg);
  background: var(--accent-wash-soft);
}

.tech svg {
  transition: color 0.3s;
}

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

.tech__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.tech__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Llamada a la acción */
.cta__title {
  margin-top: 1rem;
  max-width: 56rem;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
}

.cta__text {
  margin-top: 1.5rem;
  max-width: 28rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2.25rem;
}

/* ====================== Formulario ====================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.field label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding-block: 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--fg);
  transition: border-color 0.2s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--dim-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.field select {
  cursor: pointer;
  border-radius: 0;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.form__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.form__status {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
}

.form__status a {
  color: var(--fg);
}
.form__status a:hover {
  color: var(--accent);
}

.contact-aside__mail {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  overflow-wrap: anywhere;
}

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

.steps-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.steps-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-faint);
}

.steps-list li:last-child {
  border-bottom: 0;
}

/* ====================== Pie ====================== */

.footer {
  position: relative;
  padding-block: 3.5rem;
  border-top: 1px solid var(--line-soft);
  margin-bottom: 4.5rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.footer__brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.footer__brand-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--muted);
}

.footer__brand-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.footer__about {
  margin: 1.5rem 0 0;
  max-width: 24rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.75;
}

.footer__col h2 {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__col a,
.footer__col span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  transition: color 0.2s;
  overflow-wrap: anywhere;
}

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

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-faint);
}

.footer__bottom p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.footer__bottom p:first-child {
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* =========================================================================
   Puntos de ruptura
   móvil < 768  ·  portátil 14" ≥ 768  ·  monitor 24" ≥ 1536
   ========================================================================= */

@media (min-width: 640px) {
  .projects {
    grid-template-columns: repeat(2, 1fr);
  }
  .techs {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: 7rem;
    padding-right: 3rem;
  }

  .rail {
    display: flex;
  }

  .mobilebar {
    display: none;
  }

  .footer {
    margin-bottom: 0;
  }

  .hero__side {
    display: block;
  }

  .hero__tag {
    right: 3rem;
    bottom: 3rem;
  }

  .hero {
    padding-block: 0;
  }

  .section {
    padding-block: 5.5rem;
  }

  .split-flap {
    font-size: var(--flap-wide);
  }

  .section__note {
    display: block;
  }

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

  .service-card {
    padding: 3rem;
  }

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

  .feature {
    padding: 2.5rem;
  }

  /* Cuatro columnas aqui dejaban tarjetas de 180px de ancho en portatiles
     con escalado alto: el titulo partia en tres lineas. La rejilla se
     queda en dos y sube a cuatro en 1024, donde ya hay sitio de verdad. */
  .projects {
    gap: 1.5rem;
  }

  /* Disposición asimétrica solo en escritorio */
  .project--wide {
    grid-column: span 2;
  }
  .project--tall {
    grid-row: span 2;
  }

  /* Con hover disponible, la descripción aparece al pasar el ratón */
  .project__text {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.5s, transform 0.5s;
  }

  .project:hover .project__text,
  .project.is-active .project__text {
    opacity: 1;
    transform: none;
  }

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

  .split {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
  }

  .principles {
    gap: 5rem;
  }

  .form__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }

  .footer__grid {
    grid-template-columns: 5fr 2fr 2fr 3fr;
  }

  .pagehero {
    padding-block: 7.5rem 4rem;
  }
}

@media (min-width: 1024px) {
  .projects {
    grid-template-columns: repeat(4, 1fr);
  }

  .techs {
    grid-template-columns: repeat(5, 1fr);
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 0;
  }

  /* El filete va en el borde derecho de cada paso. Sin padding-left, el
     texto del paso siguiente arrancaba pegado a esa linea: 2rem de aire por
     un lado y cero por el otro. Ahora respira por los dos. */
  .step {
    padding-right: 2rem;
    padding-left: 2rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  /* El primero y el ultimo, a ras del contenedor: asi la columna de texto
     sigue alineada con el titular de la seccion. */
  .step:first-child {
    padding-left: 0;
  }

  .step:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .features--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
  }

  .contact__aside {
    padding-left: 2rem;
    border-left: 1px solid var(--line);
  }
}

/* Monitores grandes (24" y superiores): un punto más de aire y texto */
@media (min-width: 1536px) {
  body {
    font-size: 17px;
  }

  .section {
    padding-block: 7rem;
  }

  .lead,
  .hero__text {
    font-size: 1rem;
  }

  .feature__text,
  .step__text,
  .project__text,
  .reason__text {
    font-size: 0.8125rem;
  }
}

/* ====================== Sectores ======================
   Lista desplegable de sectores. Para añadir uno nuevo basta con copiar un
   bloque .sector entero en el HTML y cambiarle el número, el nombre y las
   listas: ni el CSS ni el JavaScript hay que tocarlos. */

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

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

.sector__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sector__num {
  flex: none;
  width: 2rem;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.sector__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg);
  transition: transform 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), color 0.3s;
}

.sector__claim {
  display: none;
  margin: 0 0 0 auto;
  padding-right: 1.5rem;
  max-width: 22rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: right;
  transition: color 0.3s;
}

/* El signo pasa de + a × girando */
.sector__sign {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: auto;
  transition: transform 0.5s var(--ease-in-out-quart, cubic-bezier(0.76, 0, 0.24, 1));
}

.sector__claim + .sector__sign {
  margin-left: 0;
}

.sector__sign::before,
.sector__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--fg);
  transition: background-color 0.3s, transform 0.5s var(--ease-in-out-quart, cubic-bezier(0.76, 0, 0.24, 1));
}

.sector__sign::after {
  transform: rotate(90deg);
}

.sector__head:hover .sector__num,
.sector__head:focus-visible .sector__num {
  color: var(--accent);
}

.sector__head:hover .sector__name,
.sector__head:focus-visible .sector__name {
  transform: translateX(0.75rem);
  color: var(--accent);
}

.sector__head:hover .sector__sign::before,
.sector__head:hover .sector__sign::after {
  background: var(--accent);
}

.sector.is-open .sector__num {
  color: var(--accent);
}

.sector.is-open .sector__sign {
  transform: rotate(135deg);
}

.sector.is-open .sector__sign::before,
.sector.is-open .sector__sign::after {
  background: var(--accent);
}

/* El panel crece de 0fr a 1fr: así se anima la altura sin medirla a mano */
.sector__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.has-js .sector__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.65s var(--ease-in-out-quart, cubic-bezier(0.76, 0, 0.24, 1));
}

.has-js .sector.is-open .sector__panel {
  grid-template-rows: 1fr;
}

.sector__panel > div {
  overflow: hidden;
}

/* Al abrirse, la imagen y el texto no aparecen de golpe con el panel: entran
   deslizandose, y el texto un poco despues que la imagen. Es lo que hace que
   abrirse solo al llegar se sienta suave y no un salto. */
.has-js .sector__art,
.has-js .sector__text {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.has-js .sector__text {
  transition-delay: 0.24s;
}

.has-js .sector.is-open .sector__art,
.has-js .sector.is-open .sector__text {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .sector__art,
  .has-js .sector__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.sector__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 0 0 2.25rem;
}

/* --- La ilustracion de cada sector --- */

.sector__art {
  order: -1;
  max-width: 26rem;
}

.sector__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- La fotografia del sector ---------------------------------------------
   Mientras no exista el archivo se ve la ilustracion. En cuanto la foto
   carga de verdad, el JavaScript marca .is-foto y toma el relevo: no hay
   que tocar nada de codigo para estrenar imagenes, basta con dejarlas en
   assets/img/sectores/. */

.sector__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.sector__art.is-foto .sector__photo {
  opacity: 1;
}

.sector__art.is-foto .sector__svg {
  display: none;
}

.sector__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Duotono azul marino: las fotos entran en la identidad del sitio en vez de
   pelearse con ella. Al pasar el raton recuperan su color de verdad. */
.sector__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.sector__photo:hover::after {
  opacity: 0;
}

.sector__photo:hover img {
  transform: scale(1);
}

/* Esquina marcada, del mismo lenguaje que las tarjetas de proyecto */
.sector__photo::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.5s;
}

.sector.is-open .sector__photo::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sector__photo img {
    transform: none;
    transition: none;
  }
}

/* Cada ilustracion lleva su propia paleta. Son las unicas manchas de color
   del sitio, a proposito: el resto sigue siendo monocromo con azul marino.
   El tema oscuro las reajusta en theme-oscuro.css. */

.sector__svg--hotel {
  --c1: #1b3570; /* edificio */
  --c2: #f2a63b; /* luz calida de las ventanas */
  --c3: #5fb7ae; /* agua y marquesina */
  --c4: #fde8d2; /* cielo, arriba */
  --c5: #f7cfbe; /* cielo, abajo */
  --c6: #2e4d94; /* ventana apagada */
}

.sector__svg--obra {
  --c1: #1b3570; /* estructura y cotas */
  --c2: #ee7b33; /* naranja de obra */
  --c3: #c3cad4; /* hormigon */
  --c4: #eef2f8; /* papel de plano */
  --c5: #f5c24a; /* amarillo de casco */
}

.sector__svg--yoga {
  --c1: #1b3570; /* geometria */
  --c2: #f4956d; /* sol */
  --c3: #79b98d; /* verde */
  --c4: #fdf1e6; /* amanecer, arriba */
  --c5: #f7dfe7; /* amanecer, abajo */
}

.sector__svg path,
.sector__svg rect,
.sector__svg circle {
  vector-effect: non-scaling-stroke;
}

/* --- El argumento --- */

.sector__why {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--fg);
}

.sector__p {
  margin: 0 0 1rem;
  max-width: 36rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--muted);
}

.sector__cierre {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fg);
}

.sector__lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-faint);
}

.sector__group h5 {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.sector__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sector__group li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

.sector__group li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: translateY(-0.2em);
}

.sector__more {
  margin: 2.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.sector__more a {
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.15em;
  transition: color 0.25s;
}

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

@media (min-width: 768px) {
  .sector__claim {
    display: block;
  }

  .sector__head {
    gap: 2rem;
    padding: 1.75rem 0;
  }

  .sector__num {
    width: 2.5rem;
  }

  .sector__lists {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  /* A partir de aqui si sobra ancho para sangrar y alinear con el numero */
  .sector__body {
    padding-left: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .sector__body {
    grid-template-columns: 5fr 8fr;
    gap: 4rem;
    padding-right: 4rem;
  }

  .sector__art {
    order: 0;
    position: sticky;
    top: 6rem;
    max-width: none;
  }
}

/* ====================== Las ilustraciones, en movimiento ======================
   Solo se animan mientras el sector esta abierto: plegado no gastan nada. */

.sector__svg .lit {
  fill: currentColor;
  opacity: 0;
}

.sector__svg .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.sector.is-open .sector__svg .lit {
  animation: sector-win 7s ease-in-out infinite;
}

.sector.is-open .sector__svg .draw {
  animation: sector-draw 1.6s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.sector.is-open .sector__svg .breathe {
  animation: sector-breathe 7s ease-in-out infinite;
}

.sector.is-open .sector__svg .spin {
  animation: sector-spin 48s linear infinite;
}

.sector.is-open .sector__svg .dot {
  animation: sector-dot 3.5s ease-in-out infinite;
}

.sector__svg .breathe,
.sector__svg .spin {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sector-win {
  0%,
  6% {
    opacity: 0;
  }
  16%,
  70% {
    opacity: 0.92;
  }
  84%,
  100% {
    opacity: 0;
  }
}

@keyframes sector-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sector-breathe {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes sector-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sector-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector__svg .lit {
    opacity: 0.92;
  }

  .sector__svg .draw {
    stroke-dashoffset: 0;
  }

  .sector.is-open .sector__svg .lit,
  .sector.is-open .sector__svg .draw,
  .sector.is-open .sector__svg .breathe,
  .sector.is-open .sector__svg .spin,
  .sector.is-open .sector__svg .dot {
    animation: none;
  }
}

/* ====================== Suelo de legibilidad en movil ======================
   Los rotulos en mono van a 9-10px: en un monitor a un brazo de distancia se
   leen, en un movil a 30cm no. En pantallas estrechas suben a 11px, que sigue
   siendo un rotulo discreto y ya se lee.

   Este bloque va al final a proposito: son reglas de la misma especificidad
   que las que corrigen, y varias de esas (.sector__group h5, por ejemplo)
   viven mas abajo en el archivo. Puesto antes, perdia el empate. */
@media (max-width: 47.9375em) {
  .footer__brand-kicker,
  .footer__col h2,
  .sector__group h5,
  .eyebrow,
  .mobilebar__link,
  .service-card__more,
  .project__meta,
  .tech__role,
  .hero__tag,
  .field label,
  .form__note {
    font-size: 11px;
  }
}