/* ============================================================
   HAITEX — Main Stylesheet
   ============================================================ */

/* Google Fonts loaded via HTML <link> */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  --black: #000000;   /* negro puro */
  --white: #ffffff;
  --blue: #1d5dba;
  --navy: #0e3a7a;
  --electric: #2d7dd2;
  --purple-dark: #6b21a8;
  --purple: #9333ea;
  --grey-1: #888888;
  --grey-2: #666666;
  --grey-3: #333333;
  --surface-1: #151515;
  --surface-2: #0d0d0d;
  --border: #1a1a1a;
  --font: 'Manrope', sans-serif;
  --mono: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
}

/* ============================================================
   CSS Reset
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.67;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grano de película sobre el negro (à la MONOLOG). Va DETRÁS del
   contenido (z-index:-1): pinta sobre el fondo negro del body pero
   nunca sobre las letras ni las animaciones, que quedan por encima.
   Requiere que las secciones sean de fondo transparente (lo son),
   así el negro con grano del body se ve tras su contenido. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
   Navigation — Pill
   ============================================================ */
.nav-pill {
  position: fixed;
  top: 24px;
  left: 64px;
  right: 64px;
  height: 56px;
  /* transparente, como el header de bymonolog.com (08/10; antes píldora #242424) */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 1000;
  transition: opacity 200ms ease, backdrop-filter 200ms ease;
}


.nav-pill__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-pill__logo-img {
  display: block;
  height: 100px;
  width: auto;
}

.nav-pill__links {
  display: flex;
  align-items: center;
  gap: 0;                 /* enlaces pegados: el resaltado viaja sin huecos */
  isolation: isolate;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-pill__links a {
  position: relative; z-index: 1;
  padding: 5px 13px;
  font-size: 16px;
  font-weight: 700;
  color: #d6d6d6;            /* más claros y grandes que los servicios del desplegable */
  text-decoration: none;
  transition: color 200ms ease;
  white-space: nowrap;
}
/* resaltado estilo bymonolog.com: UNA sola caja gris translúcida
   (.hl-travel, la crea js/main.js; también en el desplegable de Servicios) detrás de los enlaces. Al entrar desde
   fuera crece de izquierda a derecha sobre la palabra; al pasar a otra
   palabra viaja hasta ella (los enlaces están pegados, sin huecos); al salir
   del grupo se recoge hacia la derecha. Sin JS no hay resaltado. */
.hl-travel {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: var(--hl-w, 0px); height: var(--hl-h, 100%);
  transform: translate(var(--hl-x, 0px), var(--hl-y, 0px));
  background: rgba(255, 255, 255, 0.14); border-radius: 3px;
  pointer-events: none; opacity: 0;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
              width 340ms cubic-bezier(0.22, 1, 0.36, 1),
              height 340ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease;
}
.hl-travel.is-on { opacity: 1; }
.hl-travel.is-instant { transition: none; }
.nav-pill__links a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .hl-travel { transition: opacity 120ms ease; }
}

.nav-pill__links a.nav-active,
.nav-pill__links a.is-open {
  color: var(--white);
}
/* sobre fondo claro (js/main.js, 1a-bis) las palabras pasan a negro y el
   resaltado viajero a gris oscuro translúcido */
.nav-pill__links a.is-on-light { color: #2a2a2a; }
.nav-pill__links a.is-on-light:hover,
.nav-pill__links a.is-on-light:focus-visible,
.nav-pill__links a.is-on-light.nav-active,
.nav-pill__links a.is-on-light.is-open { color: #000; }
.nav-pill__links.is-on-light .hl-travel { background: rgba(0, 0, 0, 0.09); }

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

.nav-pill__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9e8e3;
  color: #0d0d0d;
  border-radius: 13px;
  padding: 5px 5px 5px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  font-family: var(--font);
  text-decoration: none;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}

.nav-pill__cta:hover {
  opacity: 1;
}

.nav-pill__cta-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; overflow: hidden;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #0d0d0d;
  color: #e9e8e3;
  flex: none;
}

.nav-pill__cta-box svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* ============================================================
   Flecha única del sitio — misma forma que la del footer.
   .ico-arrow pinta la geometría vía mask + currentColor; las
   variantes rotan para apuntar en cada dirección. Cualquier
   flecha nueva debe usar esta clase.
   ============================================================ */
.ico-arrow {
  display: inline-block;
  height: 0.8em;
  aspect-ratio: 34 / 24;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%274.6%27%20stroke-linecap%3D%27butt%27%20stroke-linejoin%3D%27miter%27%3E%3Cpath%20d%3D%27M8%2012H30.5M21%202.5%2030.5%2012%2021%2021.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%274.6%27%20stroke-linecap%3D%27butt%27%20stroke-linejoin%3D%27miter%27%3E%3Cpath%20d%3D%27M8%2012H30.5M21%202.5%2030.5%2012%2021%2021.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  vertical-align: -0.06em;
  flex: none;
}
.ico-arrow--left      { transform: rotate(180deg); }
.ico-arrow--up        { transform: rotate(-90deg); }
.ico-arrow--down      { transform: rotate(90deg); }
.ico-arrow--upright   { transform: rotate(-45deg); }
.ico-arrow--downright { transform: rotate(45deg); }
.ico-arrow--upleft    { transform: rotate(-135deg); }
.ico-arrow--downleft  { transform: rotate(135deg); }

.nav-pill__cta-box .ico-arrow { height: 11px; vertical-align: 0; }

/* Hover "rodillo" de los botones CTA (.nav-pill__cta: Start a project,
   Enviar mensaje…): js/main.js duplica el texto y la flecha. Con hover el
   texto sube y por debajo entra la misma frase; la flecha sale en la
   dirección a la que apunta (--rx/--ry) y su copia entra desde el lado
   contrario. */
.cta-roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.cta-roll > span {
  grid-area: 1 / 1;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-roll > span + span { transform: translateY(110%); }
.cta-roll-arrow {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-roll-arrow + .cta-roll-arrow {
  transform: translate(calc(var(--rx, 1) * -150%), calc(var(--ry, 0) * -150%));
}
@media (hover: hover) {
  .nav-pill__cta:hover .cta-roll > span:first-child { transform: translateY(-110%); }
  .nav-pill__cta:hover .cta-roll > span + span { transform: translateY(0); }
  .nav-pill__cta:hover .cta-roll-arrow:first-of-type {
    transform: translate(calc(var(--rx, 1) * 150%), calc(var(--ry, 0) * 150%));
  }
  .nav-pill__cta:hover .cta-roll-arrow + .cta-roll-arrow { transform: translate(0, 0); }
}
.nav-pill__cta:focus-visible .cta-roll > span:first-child { transform: translateY(-110%); }
.nav-pill__cta:focus-visible .cta-roll > span + span { transform: translateY(0); }
.nav-pill__cta:focus-visible .cta-roll-arrow:first-of-type { transform: translate(calc(var(--rx, 1) * 150%), calc(var(--ry, 0) * 150%)); }
.nav-pill__cta:focus-visible .cta-roll-arrow + .cta-roll-arrow { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) {
  .cta-roll > span, .cta-roll-arrow { transition: none; }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--white);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* ============================================================
   Navigation — Dropdown
   ============================================================ */
.nav-dropdown {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  /* caja oscura detrás de los servicios (08/10) para que el contenido de
     la página que quede debajo no se mezcle con ellos */
  background: rgba(13, 13, 13, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px;
  display: none;
  z-index: 999;
}

.nav-dropdown.is-open {
  display: block;
}

/* rejilla de 2 columnas con las celdas PEGADAS (gap 0): el resaltado
   viajero (.hl-travel) pasa de un servicio a otro sin huecos */
.nav-dropdown__grid {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0;
}

/* ============================================================
   Servicios del desplegable: solo texto, en negrita como los
   enlaces del header (sin iconos ni tarjeta desde el 08/10)
   ============================================================ */
.service-card {
  position: relative; z-index: 1;
  display: block;
  padding: 7px 13px;
  text-decoration: none;
  color: #8a8a8a;
  transition: color 200ms ease;
  cursor: pointer;
}
.service-card:hover,
.service-card:focus-visible,
.service-card.is-active { color: var(--white); }
.service-card:focus-visible { outline: none; }

.service-card__body { display: block; }

.service-card__name {
  font-family: var(--font);
  font-weight: 600;          /* más pequeños y apagados que los enlaces del header */
  font-size: 14px;
  color: inherit;
  line-height: 1.3;
  white-space: nowrap;
}

/* ============================================================
   Side Navigation
   ============================================================ */
.side-nav {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  padding-right: 14px;
  z-index: 100;
}

/* Vertical bar stuck to the right of the dashes */
.side-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: #333333;
}

.side-nav__item {
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  color: #888888;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 32px;
  width: 100%;
  transition: color 180ms ease;
}

/* Dash column — fixed at far right, always visible */
.side-nav__dash {
  flex: 0 0 auto;
  width: 6px;
  height: 1px;
  background: #555555;
  transition: background-color 180ms ease, width 180ms ease;
}

/* Label — hidden (collapsed) by default, revealed on hover/active */
.side-nav__label {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease, font-weight 180ms ease;
  pointer-events: none;
  white-space: nowrap;
}

/* Collapsed state: only the active item's label is visible */
.side-nav__item.active .side-nav__label {
  opacity: 1;
  transform: translateX(0);
}

/* Active dash highlighted */
.side-nav__item.active .side-nav__dash {
  background: var(--white);
  width: 28px;
}

/* Active label: white + bold */
.side-nav__item.active .side-nav__label {
  color: var(--white);
  font-weight: 700;
}

/* Expanded state: hovering the whole container reveals every label */
.side-nav:hover .side-nav__label {
  opacity: 1;
  transform: translateX(0);
}

/* While expanded, the item under the cursor goes bold too */
.side-nav:hover .side-nav__item:hover .side-nav__label {
  color: var(--white);
  font-weight: 700;
}

.side-nav__item:hover .side-nav__dash {
  background: var(--white);
  width: 28px;
}

/* ============================================================
   Scroll Reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Section Base
   ============================================================ */
section {
  position: relative;
}

section:nth-child(even) {
  background: transparent;
}

section:nth-child(odd) {
  background: transparent;
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 80px;
}

.section-label {
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-weight: 400;
  font-size: 12px;
  color: var(--grey-1);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 48px;
  display: block;
}

/* Editorial parenthetical wrap, MONOLOG-style: (LO QUE HACEMOS) */
.section-label::before {
  content: '(';
  color: var(--grey-2);
  margin-right: 2px;
}

.section-label::after {
  content: ')';
  color: var(--grey-2);
  margin-left: 2px;
}

/* ============================================================
   Hero Section
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  z-index: -1;
  /* Oculta: antes quedaba tapada por el fondo opaco de la sección, así que
     el hero se veía negro puro. Al pasar las secciones a transparente (para
     que el grano del body asome), esta imagen quedaría a la vista. Se oculta
     para conservar el hero en negro + grano. Quitar este display para
     recuperar la imagen tenue de fondo. */
  display: none;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__logo-img {
  display: block;
  width: min(640px, 80vw);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero__logo-img {
    max-width: 80vw;
  }
}

.hero__subtitle {
  color: var(--grey-1);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 24px;
  font-weight: 500;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: var(--grey-3);
  margin: 40px auto 0;
  transition: opacity 400ms ease;
}

.hero__scroll-line.hidden {
  opacity: 0;
}

/* ============================================================
   Misión Section
   ============================================================ */
/* ============================================================
   Metodología Section (animated wireframe rows, ozgur.design pattern)
   ============================================================ */
.metodo-list {
  border-top: 1px solid var(--border);
}

.metodo-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 22px 0;
  min-height: 128px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.metodo-row__mockup {
  width: 140px;
  height: 90px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: block;
  position: relative;
}

.metodo-row__mockup .mk {
  width: 100%;
  height: 100%;
  display: block;
}

.metodo-row__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: #cfcfcf;               /* legible en reposo; el hover lo lleva a blanco puro */
  transition: color 200ms ease;
}

.metodo-row__label {
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-2);
  white-space: nowrap;
  transition: color 200ms ease;
}

/* Unresolved scramble characters read dimmer than the settled text */
.metodo-row__scramble {
  color: var(--grey-2);
}

@media (hover: hover) and (pointer: fine) {
  .metodo-row:hover .metodo-row__title {
    color: var(--white);
  }
  .metodo-row:hover .metodo-row__label {
    color: var(--grey-1);
  }

  /* Chromatic glitch — subtle RGB split, runs ONCE per hover then reverts */
  .metodo-row:hover .mk {
    animation: mk-glitch 0.45s ease-out 1;
  }
}

/* Táctil (08/10): tocar una fila hace lo mismo que el hover de escritorio */
.metodo-row.is-tapped .metodo-row__title { color: var(--white); }
.metodo-row.is-tapped .metodo-row__label { color: var(--grey-1); }
.metodo-row.is-tapped .mk { animation: mk-glitch 0.45s ease-out 1; }

@keyframes mk-glitch {
  0%   { filter: none; transform: translate(0, 0); }
  25%  { filter: drop-shadow(1.5px 0 rgba(0, 229, 255, 0.22)) drop-shadow(-1.5px 0 rgba(255, 0, 193, 0.22)); transform: translate(-0.5px, 0.5px); }
  50%  { filter: drop-shadow(-1.5px 0 rgba(0, 229, 255, 0.18)) drop-shadow(1.5px 0 rgba(255, 0, 193, 0.18)); transform: translate(0.5px, -0.5px); }
  75%  { filter: drop-shadow(1px 0 rgba(0, 229, 255, 0.14)) drop-shadow(-1px 0 rgba(255, 0, 193, 0.14)); transform: translate(0.5px, 0.5px); }
  100% { filter: none; transform: translate(0, 0); }
}

/* ============================================================
   Mockup — browser-window thumbnail (ozgur.design pattern)
   ============================================================ */
.mk {
  color: #8f8f8f;
  --mk-bg: #0d0d0d;
}

.thumb-bg { fill: var(--mk-bg); }
.chrome-bar { fill: #161616; }
.mk .dot { fill: currentColor; opacity: 0.4; }
.mk .urlbar { fill: currentColor; opacity: 0.13; }
.mk .chrome-divider { stroke: currentColor; stroke-width: 0.3; opacity: 0.18; }

/* Scenes are stacked; JS parks all but the active one off-stage and slides
   them in turn. This keeps the waiting ones out of sight before JS runs. */
.thumb-page + .thumb-page {
  transform: translate(72px, 0);
}

/* Page elements start hidden; the reveal cascade (JS) brings them in */
.thumb-page-el {
  transform-box: fill-box;
  transform-origin: center;
}

/* ============================================================
   Servicios Section
   ============================================================ */
.servicios-section .section-inner {
  padding-bottom: 40px;
}

.services-list {
  margin-top: 0;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  width: fit-content;
}

.services-list.is-shifted {
  transform: translateX(var(--shift));
}

.service-row {
  display: flex;
  align-items: center;
  padding: 3px 0;          /* filas juntas, como la lista de servicios de bymonolog.com */
  position: relative;
  text-decoration: none;
  color: var(--white);
  overflow: visible;
  pointer-events: none;
  width: fit-content;
}

.service-row__name {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 72px);
  /* --rev drives the scroll-linked brightness (dim → bright as it enters view) */
  --rev: 42;
  color: rgb(var(--rev), var(--rev), var(--rev));
  transition: color 260ms ease;
  letter-spacing: -0.045em;
  line-height: 1.02;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

.service-row__name:hover {
  color: var(--white);
}

/* Preview image container — hidden by default, only used on hover devices */
.servicios-section {
  position: relative;
}

.services-preview {
  display: none;
}

@media (hover: hover) and (min-width: 1100px) {
  .servicios-section,
  .servicios-section .section-inner {
    overflow: visible;
  }

  /* Ventana Safari ÚNICA y persistente: el JS fija --pw/--ph al tamaño (medido) del
     tile activo y el cambio de tamaño se ANIMA de forma fluida. El marco (fondo blanco,
     borde, radio) vive aquí, no en cada tile; el contenido hace cross-fade dentro. */
  .services-preview {
    display: block;
    position: absolute;
    top: 0;
    left: var(--preview-left, 50%);
    width: var(--pw, 360px);
    height: var(--ph, 320px);
    box-sizing: border-box;
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transition: width 500ms cubic-bezier(.22,1,.36,1),
                height 500ms cubic-bezier(.22,1,.36,1),
                opacity 260ms ease;
    pointer-events: none;
    z-index: 2;
  }
  /* la ventana solo aparece cuando hay un tile activo */
  .services-preview.has-active { opacity: 1; }
  /* primer encuadre: no animar el tamaño (evita que crezca desde el valor por defecto) */
  .services-preview.no-size-anim { transition: opacity 260ms ease; }
  /* interactivo solo con el spotlight activo (sus iconos son navegables) */
  .services-preview.has-active:has(.svc-anim--spotlight.is-visible) {
    pointer-events: auto;
  }

  .services-preview__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: auto;
    opacity: 0;
    transition: opacity 190ms ease;              /* salida rápida */
  }
  /* entrada retardada: el contenido aparece cuando la ventana casi terminó de redimensionar */
  .services-preview__img.is-visible {
    opacity: 1;
    transition: opacity 300ms ease 200ms;
    pointer-events: auto;
  }
}

/* ============================================================
   Servicios — animated preview tiles (GSAP), 320×400 each.
   They reuse .services-preview__img sizing/positioning/opacity;
   these rules only fill that box and give it the dark surface.
   ============================================================ */
.svc-anim {
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  overflow: hidden;
}

/* ── Marco Safari blanco compartido (Automatizaciones, Agentes IA, Diseño web,
   Instalación IA local). Prioridad: fondo blanco, barra superior gris, esquinas
   redondeadas. El Spotlight ya lo trae. ── */
.svc-anim--motor,
.svc-anim--editor,
.svc-anim--radial,
.svc-anim--cobe,
.svc-anim--filetree {
  /* el marco (fondo blanco + borde + radio) lo aporta la ventana única .services-preview;
     el tile queda transparente encima y su altura la fija el contenido (para el morph) */
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  overflow: hidden;
}
/* Barra superior gris tipo Safari (se aplica a la cabecera de cada tile).
   08/10: los 6 tiles llevan la misma barra: 3 puntitos + una palabra/frase a su
   derecha (agent.py, explorer, haitex.es centrada, inteligencia ambiental,
   marketing-skills, Motor de automatización). .svc-frame-bar es la genérica. */
.svc-frame-bar { display: flex; align-items: center; padding: 10px 14px; }
.svc-frame-label { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: #8a8a8a; letter-spacing: 0.3px; white-space: nowrap; }
.svc-frame-bar,
.ide__bar,
.cobe-bar,
.svc-ft-hdr {
  background: #161616 !important;
  border-bottom: 1px solid #262626 !important;
}
/* 3 puntitos macOS coherentes en todos los marcos */
.svc-frame-dots { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.svc-frame-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.svc-frame-dots span:nth-child(1) { background: #ff5f57; }
.svc-frame-dots span:nth-child(2) { background: #febc2e; }
.svc-frame-dots span:nth-child(3) { background: #28c840; }

/* 03 · Editor tipo VS Code — sin card: el código opera sobre el negro de la web;
   solo se conserva la barra superior con los 3 puntitos */
.svc-anim--editor {
  width: clamp(360px, 34vw, 500px);   /* más ancho de izquierda a derecha */
}
.ide { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ide__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; flex: 0 0 auto;
}
.ide__dot { width: 10px; height: 10px; border-radius: 50%; display: block; }   /* 08/10: 10px como el resto */
.ide__file {
  margin-left: 10px; font-family: var(--mono);
  font-size: 11px; color: #888; letter-spacing: 0.3px;
}
.ide__code {
  margin: 0; padding: 14px 18px 0; flex: 1 1 auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  /* container is normal so the newlines between the block <span> lines
     collapse (no phantom blank rows); each line keeps its own pre below */
  color: #24292e; white-space: normal; overflow: hidden;
}
.ide__code code { display: block; }
.ide__line {
  display: block;
  /* typing reveal: JS animates the width 0 → 100% per line */
  width: 0; overflow: hidden; white-space: pre;
}
.ide__line:empty { height: 1.55em; }   /* las líneas en blanco conservan su hueco */
/* tema claro (VS Code Light+ ajustado a la marca) */
.tok-k { color: #9333ea; }   /* keyword — morado */
.tok-s { color: #0a7c42; }   /* string  — verde */
.tok-f { color: #1d5dba; }   /* function — azul */
.tok-c { color: #9aa0a6; }   /* comment — gris */

/* 01 · Apple Spotlight inside Safari frame — search bar + service icons.
   Animation triggers via .is-visible, no hover needed. */
.svc-anim--spotlight {
  /* marco aportado por la ventana única .services-preview; tile transparente encima */
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  width: clamp(360px, 34vw, 500px);
  height: auto;
}

/* Safari frame */
.spotlight-safari {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.spotlight-safari__bar {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
.spotlight-safari__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.spotlight-safari__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.spotlight-safari__dots span:nth-child(1) { background: #ff5f57; }
.spotlight-safari__dots span:nth-child(2) { background: #febc2e; }
.spotlight-safari__dots span:nth-child(3) { background: #28c840; }
.spotlight-safari__url {
  flex: 1;
  text-align: center;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.2px;
}
.spotlight-safari__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  min-height: 260px;
  background: #fff;
}

.spotlight-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
/* Area de hover extendida: cubre el gap entre barra e iconos
   para que el hover no se pierda al mover el mouse */
.spotlight-wrap::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: -50px;
  z-index: -1;
}

/* ── Bar ── */
.spotlight-bar {
  flex: 1 1 auto;
  min-width: 0;
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  border-radius: 28px;
  overflow: hidden;
  transition: flex-basis 420ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease, box-shadow 350ms ease;
}
.svc-anim--spotlight.is-visible .spotlight-bar {
  flex: 0 1 55%;
  border-color: #bbb;
  box-shadow: 0 0 24px rgba(45,125,210,0.1);
}
.spotlight-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
}
.spotlight-search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #888;
  transition: color 250ms ease;
}
.svc-anim--spotlight.is-visible .spotlight-search-icon {
  color: #666;
}
.spotlight-input-wrap {
  flex: 1;
  position: relative;
  height: 1.3em;
  overflow: hidden;
}
.spotlight-placeholder {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.spotlight-placeholder--default {
  color: #999;
  opacity: 1;
}
.spotlight-placeholder--icon {
  color: #333;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-50%) translateY(6px);
}
.spotlight-wrap.has-icon .spotlight-placeholder--default {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-50%) translateY(-6px);
}
.spotlight-wrap.has-icon .spotlight-placeholder--icon {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) translateY(0);
}
.spotlight-input {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: transparent;
  caret-color: transparent;
  pointer-events: none;
}

/* ── Icons ── */
.spotlight-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22,1,0.36,1);
}
.svc-anim--spotlight.is-visible .spotlight-icons {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.spotlight-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
  text-decoration: none;
}
.spotlight-icon svg {
  width: 16px;
  height: 16px;
  color: #666;
  transition: color 220ms ease;
}
.spotlight-icon:hover,
.spotlight-icon.is-active {
  opacity: 1;
  background: #e0e0e0;
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(45,125,210,0.15);
}
.spotlight-icon:hover svg,
.spotlight-icon.is-active svg {
  color: #333;
}

/* cada nombre entra con un blur suave al cambiar de icono en el ciclo automático */
@keyframes spotlight-name-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(-50%) translateY(6px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(-50%); }
}

/* Stagger: each icon enters with a slight delay */
.spotlight-icon:nth-child(1) { transition-delay: 0ms; }
.spotlight-icon:nth-child(2) { transition-delay: 30ms; }
.spotlight-icon:nth-child(3) { transition-delay: 60ms; }
.spotlight-icon:nth-child(4) { transition-delay: 90ms; }
.spotlight-icon:nth-child(5) { transition-delay: 120ms; }
.spotlight-icon:nth-child(6) { transition-delay: 150ms; }
.svc-anim--spotlight.is-visible .spotlight-icon { transition-delay: inherit; }
.svc-anim--spotlight:not(.is-visible) .spotlight-icon { transition-delay: 0ms; }

/* 02 · Automatizaciones — "Motor de automatización" dentro del tile (mismo
   componente .motor-screen que la sección de automatizaciones.html). Ancho
   adaptable como el resto de tiles; sin marco propio (lo da la ventana). */
.svc-anim--motor {
  width: clamp(340px, 32vw, 470px);
  height: auto;
}
.motor-screen--tile { border: none; border-radius: 0; background: transparent; }
.motor-screen--tile .motor-screen__bar { padding: 10px 14px; font-size: 13px; }
/* 08/10: 3 puntitos delante del título (el título queda a su derecha y «escaneando» sigue a la derecha) */
.motor-screen__bar .svc-frame-dots { margin-right: 10px; }
.motor-screen__bar .svc-frame-dots + b { margin-right: auto; }
.motor-screen--tile .motor-screen__status { padding: 10px 14px; min-height: 36px; font-size: 10.5px; }

/* 04 · Marketing Skills — radial orbital timeline (vanilla; recreado del componente
   de 21st.dev). Anillo + cerebro en el centro; nodos posicionados por el builder con
   transform (transición 0.7s → al cambiar el ángulo "vuelan" a su nuevo sitio, como
   en el original). El nodo activo escala ×1.5, pasa a blanco y despliega su tarjeta
   debajo; los relacionados laten. Sin degradados: el glow es box-shadow. */
.svc-anim--radial {
  background: transparent;
  border: none;
  width: clamp(360px, 34vw, 500px);
  height: auto;
}
.radial { position: relative; width: 100%; height: 470px; overflow: hidden; }
.radial__ring {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12);
}
.radial__brain {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; overflow: hidden; z-index: 5;
}
.radial__brain canvas { display: block; width: 100%; height: 100%; }
.radial__node {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
}
.radial__dot {
  width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box;
  background: #000; border: 2px solid rgba(255, 255, 255, 0.4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.14);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.radial__dot svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.radial__label {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease, transform 0.3s ease;
}
.radial__node.is-active { z-index: 200 !important; opacity: 1 !important; }
.radial__node.is-active .radial__dot { background: #fff; color: #000; border-color: #fff; transform: scale(1.5); box-shadow: 0 0 28px rgba(255, 255, 255, 0.35); }
.radial__node.is-active .radial__label { color: #fff; transform: translateX(-50%) scale(1.2); top: 56px; }
.radial__node.is-related .radial__dot { background: rgba(255, 255, 255, 0.5); color: #000; border-color: #fff; animation: radial-pulse 1.2s ease-in-out infinite; }
@keyframes radial-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.radial__card {
  position: absolute; top: 88px; left: 50%; transform: translate(-50%, 8px); width: 244px; box-sizing: border-box;
  padding: 14px 16px 16px; background: rgba(0, 0, 0, 0.9); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease; text-align: left;
}
.radial__card::before { content: ''; position: absolute; top: -13px; left: 50%; width: 1px; height: 13px; background: rgba(255, 255, 255, 0.5); }
.radial__node.is-active .radial__card { opacity: 1; transform: translate(-50%, 0); }
.radial__card-head { display: flex; justify-content: space-between; align-items: center; }
.radial__badge { font-family: var(--font); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; border: 1px solid #fff; color: #fff; }
.radial__badge--new { background: #fff; color: #000; }
.radial__meta { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.radial__title { font-family: var(--font); font-weight: 700; font-size: 14px; color: #fff; margin: 10px 0 6px; }
.radial__desc { font-family: var(--font); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin: 0; }
.radial__sep { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 12px; padding-top: 10px; }
.radial__row { display: flex; justify-content: space-between; font-family: var(--font); font-size: 11px; color: #fff; margin-bottom: 6px; }
.radial__row span:last-child { font-family: var(--mono); }
.radial__bar { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.radial__bar i { display: block; height: 100%; background: #2d7dd2; width: 0; transition: width 0.8s ease 0.25s; }
.radial__node.is-active .radial__bar i { width: var(--lvl); }
.radial__h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin: 0 0 8px; }
.radial__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radial__chip { font-family: var(--font); font-size: 11px; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); }

/* 04b · Inteligencia Ambiental — globo del mundo (cobe) dentro del marco Safari blanco.
   Barra gris + zona blanca con el canvas cuadrado centrado; el globo lo pinta el builder. */
.svc-anim--cobe { width: clamp(440px, 40vw, 580px); height: auto; }
.cobe-bar { display: flex; align-items: center; padding: 10px 14px; }
.cobe-stage { background: #ffffff; padding: 26px; display: flex; align-items: center; justify-content: center; }
.cobe-canvas { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; height: auto; display: block; margin: 0 auto;
  opacity: 0; transition: opacity 1s ease; contain: layout paint; }

/* 05 · Instalación de IA local — file tree. Estructura de carpetas y archivos
   SIEMPRE visible, sin animación. Mono sobre negro, sin card. */
.svc-ft { width: 100%; height: 100%; box-sizing: border-box;
  font-family: 'Cascadia Code', monospace; font-size: 12px; color: #555;
  display: flex; flex-direction: column; overflow: hidden; }
.svc-ft-hdr { display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; }
.svc-ft-dot { width: 10px; height: 10px; border-radius: 50%; }
.svc-ft-dot--r { background: #ff5f57; }
.svc-ft-dot--y { background: #febc2e; }
.svc-ft-dot--g { background: #28c840; }
.svc-ft-hdr-label { margin-left: 6px; font-size: 11px; color: #888; }
.svc-ft-tree { display: flex; flex-direction: column; gap: 1px; padding: 12px; }
.svc-ft-item { display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 4px; cursor: default;
  max-height: 40px; overflow: hidden;
  transition: max-height 360ms cubic-bezier(.4,0,.2,1), opacity 240ms ease,
              padding 360ms cubic-bezier(.4,0,.2,1); }
/* archivo/carpeta oculto al cerrar su carpeta padre (se pliega con altura+opacidad) */
.svc-ft-item.svc-ft-hidden {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.svc-ft-chevron { width: 10px; flex-shrink: 0; color: #999; display: flex;
  align-items: center; transform: rotate(90deg); transition: transform 300ms ease; }
/* carpeta cerrada: el chevron apunta a la derecha y el icono baja de intensidad */
.svc-ft-item.svc-ft-closed .svc-ft-chevron { transform: rotate(0deg); }
.svc-ft-item.svc-ft-closed .svc-ft-icon--folder { color: #c9a417; }
.svc-ft-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.svc-ft-icon--file[data-ext="json"] { color: #eab308; }
.svc-ft-icon--file[data-ext="yaml"] { color: #06b6d4; }
.svc-ft-icon--file[data-ext="sh"]   { color: #22c55e; }
.svc-ft-icon--file[data-ext="py"]   { color: #3b82f6; }
.svc-ft-icon--file[data-ext="md"]   { color: #888; }
.svc-ft-icon--file[data-ext="gguf"] { color: #a78bfa; }
.svc-ft-icon--folder { color: #eab308; }
.svc-ft-icon--folder-open { color: #facc15; }
.svc-ft-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-ft-name--folder { color: #333; font-weight: 500; }
.svc-ft-nested { padding-left: 22px; }
.svc-ft-l2 { padding-left: 38px; }

/* ============================================================
   FAQ Section (accordion)
   ============================================================ */
.faq-section .section-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

.faq-section__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--white);
  position: sticky;
  top: 140px;
}

/* Misma estructura que el nav grande del footer (.footer__nav): divisorias
   punteadas + barrido blanco con texto negro en hover, entrada rápida y
   salida lenta (estela), y la pregunta se desplaza a la derecha. */
.faq-list {
  border-top: 1px dotted var(--grey-3);
}

.faq-item {
  border-bottom: 1px dotted var(--grey-3);
}

.faq-item__q {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 22px;
  text-align: left;
  color: var(--white);
}

/* white fill that sweeps behind the question */
.faq-item__q::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  opacity: 0;
  transition: opacity 640ms ease; /* slow-out = the trail */
  pointer-events: none;
}

.faq-item__label {
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-weight: 800;          /* misma negrita que los nombres de Servicios */
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.02em;
  color: var(--grey-1);
  /* slow-out (trail) */
  transition: color 640ms ease, transform 640ms ease;
  line-height: 1.35;
}

.faq-item.is-open .faq-item__label {
  color: var(--white);
}

/* HOVER — fast-in overrides the slow-out transitions above */
@media (hover: hover) and (pointer: fine) {
  .faq-item__q:hover::before {
    opacity: 1;
    transition: opacity 90ms ease;
  }

  .faq-item__q:hover .faq-item__label {
    color: #000;
    transform: translateX(12px);
    transition: color 90ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* .faq-item delante: debe ganar al blanco de .is-open (declarado después) */
  .faq-item .faq-item__q:hover .faq-item__icon::before,
  .faq-item .faq-item__q:hover .faq-item__icon::after {
    background: #000;
    transition: transform 300ms ease, background-color 90ms ease;
  }
}

/* Plus icon that turns into a minus when open */
.faq-item__icon {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--grey-1);
  transition: transform 300ms ease, background-color 640ms ease;
}

.faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after {
  background: var(--white);
}

/* Smooth height animation (JS sets the pixel height) */
.faq-item__a {
  height: 0;
  overflow: hidden;
  transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__a p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-1);
  max-width: 604px;
  padding: 4px 22px 28px;
}

/* ============================================================
   Botones
   ============================================================ */
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 2px;
  padding: 14px 32px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
  letter-spacing: 0.5px;
}

.btn-outline:hover {
  background: var(--white);
  color: var(--black);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 80px 80px 36px;
  max-width: 1280px;
  margin: 0 auto;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding-bottom: 72px;
}

/* Big navigation — bymonolog-style sweep: white fill + black text on hover,
   fast fade-in / slow fade-out so a quick pass leaves a fading trail (estela) */
.footer__nav {
  display: flex;
  flex-direction: column;
}

.footer__nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  font-family: var(--font);
  font-weight: 800;          /* misma negrita que los nombres de Servicios */
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.04em;
  color: var(--white);
  border-bottom: 1px dotted var(--grey-3);
  /* slow-out (trail) */
  transition: color 640ms ease;
}

.footer__nav a:first-child {
  border-top: 1px dotted var(--grey-3);
}

/* white fill that sweeps behind the label */
.footer__nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  opacity: 0;
  transition: opacity 640ms ease; /* slow-out = the trail */
  pointer-events: none;
}

.footer__nav a > span {
  position: relative;
  z-index: 1;
}

/* the word nudges to the right */
.footer__nav a > span:first-child {
  transition: transform 640ms ease;
}

.footer__arrow {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: clamp(32px, 3.4vw, 48px);
  color: var(--white);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 640ms ease, transform 640ms ease, color 640ms ease;
}

.footer__arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* HOVER — fast-in overrides the slow-out transitions above */
.footer__nav a:hover {
  color: #000;
  transition: color 90ms ease;
}

.footer__nav a:hover::before {
  opacity: 1;
  transition: opacity 90ms ease;
}

.footer__nav a:hover > span:first-child {
  transform: translateX(12px);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer__nav a:hover .footer__arrow {
  opacity: 1;
  transform: translateX(0);
  color: #000;
  transition: opacity 120ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), color 90ms ease;
}

/* Studio + socials columns */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-content: start;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col-label {
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-bottom: 20px;
}

.footer__meta {
  font-size: 13px;
  line-height: 1.7;
  color: var(--grey-1);
}

.footer__social {
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-1);
  padding: 6px 0;
  transition: color 220ms ease;
}

.footer__social span {
  color: var(--grey-3);
  transition: color 220ms ease;
}

.footer__social:hover,
.footer__social:hover span {
  color: var(--white);
}
/* LinkedIn sin enlace (22/10) hasta que exista la página de empresa: se ve igual
   que el resto pero no es un enlace (<a> sin href) ni se ilumina */
.footer__social--off { cursor: default; }
.footer__social--off:hover { color: var(--grey-1); }
.footer__social--off:hover span { color: var(--grey-3); }

/* "Pregunta a la IA por Haitex" (como el "Ask AI about Monolog" de bymonolog.com):
   casillas oscuras con el icono de cada asistente; cada una abre ese asistente con
   una pregunta ya escrita sobre HAITEX. Logotipos oficiales en SVG monocromo (currentColor):
   Claude, Gemini, ChatGPT/OpenAI y Perplexity de Simple Icons (CC0); Grok de LobeHub Icons (MIT). */
.footer__col--ai { grid-column: 1 / -1; margin-top: 8px; }
.footer__ai { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__ai-link {
  width: 46px; height: 46px; border-radius: 3px; background: var(--grey-5, #151515);
  display: flex; align-items: center; justify-content: center; color: #e8e8e3;
  transition: background-color 220ms ease, color 220ms ease;
}
.footer__ai-link svg { width: 22px; height: 22px; display: block; }
.footer__ai-link:hover { background: var(--ai, #262626); color: #fff; }
/* hover: el cuadrado toma el color de marca de cada IA en un tono apagado
   (para no romper el blanco y negro) y el logotipo queda en blanco */
.footer__ai-link[href*="claude.ai"]      { --ai: #a8644d; }  /* naranja terracota */
.footer__ai-link[href*="google.com"]     { --ai: #7a68a0; }  /* violeta */
.footer__ai-link[href*="chatgpt.com"]    { --ai: #3e8a62; }  /* verde */
.footer__ai-link[href*="x.com"]          { --ai: #4a4a4a; }  /* gris: Grok es blanco y negro, y el logo va en blanco */
.footer__ai-link[href*="perplexity.ai"]  { --ai: #2f6f96; }  /* turquesa azulado, separado del verde */

/* Bottom bar: clock · back-to-top · copyright */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-size: 12px;
  color: var(--grey-2);
}

.footer__clock {
  color: var(--grey-1);
  font-variant-numeric: tabular-nums;
}

/* misma tipografía que los titulares grandes (el antiguo "¿Hablamos?"): Manrope 800 */
.footer__totop {
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--grey-1);
  transition: color 220ms ease;
}

.footer__totop:hover {
  color: var(--white);
}

.footer__copy {
  color: var(--grey-2);
  text-align: right;
}

/* enlaces legales (aviso legal y privacidad), bajo la barra inferior */
.footer__legal {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
}

.footer__legal a {
  color: var(--grey-2);
  transition: color 220ms ease;
}

.footer__legal a:hover {
  color: var(--white);
}

/* ============================================================
   Mobile Nav Menu
   ============================================================ */
.nav-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--black);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 100px 40px 60px;
  transform: translateY(-100%);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-open .nav-mobile-menu {
  transform: translateY(0);
}

.nav-mobile-menu__close {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 24px;
  color: var(--white);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  line-height: 1;
}

.nav-mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nav-mobile-menu__links a {
  font-family: var(--font);
  font-weight: 700;
  font-size: 32px;
  color: var(--grey-2);
  text-decoration: none;
  transition: color 200ms ease;
}

.nav-mobile-menu__links a:hover {
  color: var(--white);
}

.nav-mobile-menu__cta {
  margin-top: auto;
}

/* ============================================================
   Service Page Hero
   ============================================================ */
.service-hero {
  padding-top: 160px;
  padding-bottom: 100px;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background: transparent;
}

.service-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  width: 100%;
}

.service-hero__number {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: block;
}

.service-hero__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(60px, 10vw, 120px);
  line-height: 0.95;
  letter-spacing: -4px;
  color: var(--white);
  white-space: pre-line;
  margin-bottom: 40px;
}

.service-hero__desc {
  font-size: 18px;
  color: var(--grey-1);
  line-height: 1.65;
  max-width: 680px;
}

/* ============================================================
   Carousel
   ============================================================ */
.carousel-section {
  padding: 120px 0;
  overflow: hidden;
  background: transparent;
}

.carousel-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  margin-bottom: 40px;
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding-left: 80px;
  padding-right: 0;
}

.carousel-track {
  display: flex;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-card {
  min-width: calc(100% - 200px);
  height: 560px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 24px;
}

.carousel-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.carousel-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.carousel-card__content {
  position: absolute;
  inset: 0;
  padding: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.carousel-card__step {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  color: var(--blue);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

.carousel-card__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--white);
  letter-spacing: -2px;
  line-height: 1.0;
  margin-bottom: 20px;
}

.carousel-card__desc {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  color: var(--grey-1);
  max-width: 500px;
  line-height: 1.65;
  margin-bottom: 32px;
}

.carousel-card__quote {
  font-family: var(--font);
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
  font-style: italic;
  line-height: 1.35;
  max-width: 600px;
  border-left: 3px solid var(--blue);
  padding-left: 20px;
}

.carousel-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  padding: 24px 80px 0;
}

.carousel-btn {
  position: relative; overflow: hidden;   /* la flecha sale y entra por los bordes */
  width: 48px;
  height: 48px;
  border-radius: 12px;                    /* cuadrado redondeado, como la caja del CTA (13/10) */
  border: 1px solid var(--border);
  background: transparent;
  color: var(--white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
  font-family: var(--font);
}

.carousel-btn.carousel-prev {
  /* las dos flechas en blanco roto, como el CTA (13/10; antes «Anterior» oscura) */
  background: #e9e8e3;
  border-color: #e9e8e3;
  color: #0d0d0d;
}
.carousel-btn.carousel-prev:hover { border-color: #e9e8e3; }

.carousel-btn.carousel-next {
  background: #e9e8e3;                    /* mismo tono que el CTA del header */
  border-color: #e9e8e3;
  color: #0d0d0d;
}

.carousel-btn:hover {
  border-color: var(--grey-1);
}
.carousel-btn.carousel-next:hover { border-color: #e9e8e3; }
/* flecha con el efecto rodillo del CTA: sale hacia donde apunta y su copia
   entra desde el lado contrario (js/main.js, bloque 0) */
@media (hover: hover) {
  .carousel-btn:not(:disabled):hover .cta-roll-arrow:first-of-type {
    transform: translate(calc(var(--rx, 1) * 150%), calc(var(--ry, 0) * 150%));
  }
  .carousel-btn:not(:disabled):hover .cta-roll-arrow + .cta-roll-arrow { transform: translate(0, 0); }
}
.carousel-btn:focus-visible .cta-roll-arrow:first-of-type { transform: translate(calc(var(--rx, 1) * 150%), calc(var(--ry, 0) * 150%)); }
.carousel-btn:focus-visible .cta-roll-arrow + .cta-roll-arrow { transform: translate(0, 0); }

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-indicator {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  color: var(--grey-1);
  min-width: 60px;
  text-align: center;
}

/* Carrusel de las páginas de servicio (.carousel-section--diagram): el
   carrusel ancho de siempre con tarjetas claras y solo texto. Desde el
   06/10 sin diagrama animado: el texto ocupa toda la tarjeta, con el
   título grande y la descripción en negrita. */
.carousel-section--diagram .carousel-card {
  flex: 0 0 calc(100% - 200px);
  background: var(--dg-card);
  display: flex;
}
.carousel-section--diagram {
  --dg-card: #e9e8e3;   /* mismo blanco roto que el CTA y las flechas (13/10; antes #ececea) */
}
.carousel-section--diagram .carousel-card__content {
  position: relative; inset: auto; flex: 1; padding: 56px;
}
.carousel-section--diagram .carousel-card__step { color: #555; }
.carousel-section--diagram .carousel-card__title {
  color: #0d0d0d; font-size: clamp(44px, 6.4vw, 104px);
  letter-spacing: -3px; line-height: 0.98; margin-bottom: 28px; max-width: 14ch;
}
.carousel-section--diagram .carousel-card__desc {
  color: #1a1a1a; font-weight: 700; font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.5; max-width: 58ch; margin-bottom: 0;
}

@media (max-width: 1200px) {
  .carousel-section--diagram .carousel-card__content { padding: 40px; }
}

/* ≤900: una tarjeta por pantalla, alto según el texto */
@media (max-width: 900px) {
  .carousel-section--diagram .carousel-section__inner { padding: 0 16px; }
  .carousel-section--diagram .carousel-wrapper { padding-left: 16px; }
  .carousel-section--diagram .carousel-nav { padding: 24px 16px 0; }
  .carousel-section--diagram .carousel-card {
    flex-basis: calc(100vw - 32px); min-width: 0; height: auto; min-height: 480px;
  }
  .carousel-section--diagram .carousel-card__content { padding: 32px 24px; }
  .carousel-section--diagram .carousel-card__title { font-size: clamp(34px, 9.6vw, 64px); letter-spacing: -1.5px; }
}

/* ============================================================
   Service Nav (between services)
   ============================================================ */
.service-nav-bar {
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 80px;
}

.service-nav-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-nav-bar__prev,
.service-nav-bar__next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

.service-nav-bar__prev {
  align-items: flex-start;
}

.service-nav-bar__next {
  align-items: flex-end;
}

.service-nav-bar__label {
  font-size: 11px;
  color: var(--grey-3);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

.service-nav-bar__name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: var(--grey-1);
  transition: color 200ms ease;
}

.service-nav-bar__label { transition: color 200ms ease; }
/* Anterior / Siguiente: la etiqueta (con su flecha) y el nombre del
   servicio se iluminan juntos, pases por encima de cualquiera de los dos */
.service-nav-bar__prev:hover .service-nav-bar__name,
.service-nav-bar__next:hover .service-nav-bar__name,
.service-nav-bar__prev:focus-visible .service-nav-bar__name,
.service-nav-bar__next:focus-visible .service-nav-bar__name,
.service-nav-bar__prev:hover .service-nav-bar__label,
.service-nav-bar__next:hover .service-nav-bar__label,
.service-nav-bar__prev:focus-visible .service-nav-bar__label,
.service-nav-bar__next:focus-visible .service-nav-bar__label {
  color: var(--white);
}

.service-selector {
  display: flex;
  align-items: center;
  gap: 0;                    /* números pegados: el resaltado viajero (.hl-travel) va sin huecos */
  position: relative; isolation: isolate;
}

.service-selector__dot {
  position: relative; z-index: 1;
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  color: var(--grey-3);
  text-decoration: none;
  transition: color 200ms ease;
  padding: 4px 12px;
}

.service-selector__dot.active {
  color: var(--white);
  font-weight: 700;
}

.service-selector__dot:hover,
.service-selector__dot:focus-visible {
  color: var(--white);
}
.service-selector__dot:focus-visible { outline: none; }

/* ============================================================
   Contact Page
   ============================================================ */
/* ============================================================
   Contacto (08/10) — diseño de la referencia: etiqueta mono a la
   izquierda («01 / CONTACTO»), titular grande desplazado respecto al
   formulario y campos SIN caja (solo línea inferior), con etiquetas
   mono en mayúsculas y asterisco en los obligatorios. Botón de envío =
   CTA del header (.nav-pill__cta), alineado a la derecha.
   ============================================================ */
.contacto-section {
  position: relative;
  padding: 120px 6vw 120px;
}
.contacto-section__inner {
  --form-left: clamp(0px, 7vw, 120px);          /* sangría del formulario */
  max-width: 1040px; margin: 0 auto; width: 100%;
}
.contacto-section__label {
  position: absolute; left: clamp(24px, 3vw, 44px); top: 140px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  color: var(--grey-1); text-transform: uppercase;
}
.contacto-section__title {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(64px, 9vw, 132px); line-height: 0.95; letter-spacing: -0.045em;
  color: var(--white); margin: 0 0 clamp(36px, 4vw, 56px);
  padding-left: calc(var(--form-left) + clamp(0px, 8vw, 160px));
}

.contact-form {
  display: flex; flex-direction: column; gap: clamp(40px, 4.2vw, 64px);
  margin-left: var(--form-left); max-width: 760px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.form-group { display: flex; flex-direction: column; gap: 14px; }
.form-group label,
.form-group__count {
  font-family: var(--mono); font-weight: 400; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-1);
}
.form-group__req { margin-left: 0.35em; }
.form-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.form-group__count { text-transform: none; letter-spacing: 0.04em; color: var(--grey-2); }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0;
  padding: 10px 0 16px;
  font-family: var(--font); font-weight: 500; font-size: 18px; color: var(--white);
  outline: none; transition: border-color 200ms ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6e6e6e; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-bottom-color: var(--white); }
.form-group textarea { resize: vertical; min-height: 150px; line-height: 1.5; }

/* desplegable de motivo: sin el aspecto del sistema; indicador con la flecha de la web */
.form-group__select { position: relative; }
.form-group select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; }
.form-group select:invalid { color: #6e6e6e; }               /* «De qué trata tu mensaje» como placeholder */
.form-group select option { color: #0d0d0d; }
.form-group__select .ico-arrow {
  position: absolute; right: 4px; top: calc(50% - 4px); transform: translateY(-50%) rotate(90deg);
  height: 0.62em; font-size: 16px; color: var(--grey-1); pointer-events: none;
}

.contact-form__submit { align-self: flex-end; margin-top: -8px; }
.contact-form .contact-form__send {
  display: inline-flex;                 /* .nav-pill__cta se oculta en el header móvil; aquí no */
  border: 0; cursor: pointer;
}

/* envío del formulario (FormSubmit): campo trampa oculto, errores y aviso */
.contact-form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-group .is-invalid { border-bottom-color: #ef4444; }
.contact-form__status { min-height: 1.5em; margin: -24px 0 0; font-size: 14px; color: var(--grey-1); text-align: right; }
.contact-form__status:empty { display: none; }
.contact-form__status.is-ok { color: var(--white); }
.contact-form__status.is-error { color: #ef4444; }
.contact-form.is-sending .contact-form__send { opacity: 0.5; pointer-events: none; }

/* aceptación de la Política de Privacidad: casilla sin caja de sistema, mismo trazo que los campos */
.form-check { display: flex; align-items: flex-start; gap: 14px; margin-top: -8px; }
.form-check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid #3a3a3a; border-radius: 3px;
  background: transparent; cursor: pointer; display: grid; place-content: center;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.form-check input::after {
  content: ''; width: 10px; height: 6px; margin-top: -3px;
  border: solid #000; border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0;
}
.form-check input:checked { background: var(--white); border-color: var(--white); }
.form-check input:checked::after { opacity: 1; }
.form-check input:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.form-check input.is-invalid { border-color: #ef4444; }
.form-check label { font-size: 15px; line-height: 1.45; color: var(--grey-1); cursor: pointer; }
.form-check a { color: var(--white); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.form-check a:hover { text-decoration-color: var(--white); }

/* información básica de protección de datos (art. 11 LOPDGDD), bajo el formulario */
.contact-privacy {
  margin: 48px 0 0 var(--form-left); max-width: 760px; padding-top: 20px;
  border-top: 1px dotted var(--grey-3);
  display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--grey-2);
}
.contact-privacy div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.contact-privacy dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-1); padding-top: 1px; }
.contact-privacy dd { margin: 0; }
.contact-privacy a { color: var(--grey-1); text-decoration: underline; text-underline-offset: 2px; }
.contact-privacy a:hover { color: var(--white); }
@media (max-width: 768px) {
  .contact-privacy div { grid-template-columns: 1fr; gap: 0; margin-bottom: 6px; }
}

/* datos de contacto bajo el formulario, con su misma sangría */
.contacto-section .contact-details { margin-left: var(--form-left); max-width: 760px; }

@media (max-width: 768px) {
  .contacto-section { padding: 112px 16px 80px; }
  .contacto-section__inner { --form-left: 0px; }
  .contacto-section__label { position: static; display: block; margin-bottom: 18px; }
  .contacto-section__title { padding-left: 0; font-size: clamp(56px, 17vw, 84px); }
  .form-row { grid-template-columns: 1fr; gap: 40px; }
  .contact-form { gap: 40px; }
  .contact-form__submit { align-self: stretch; }
  .contact-form .contact-form__send { width: 100%; justify-content: space-between; }
}

/* datos de contacto al final de la página (el footer ya no lleva correo) */
.contact-details {
  margin: 72px 0 0;
  padding-top: 32px;
  border-top: 1px dotted var(--grey-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 32px;
}
.contact-details__item { margin: 0; }
.contact-details__label {
  font-family: 'Cascadia Code', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-bottom: 14px;
}
.contact-details dd { margin: 0; }
.contact-details__link {
  font-size: 16px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease;
}
.contact-details__link:hover { border-color: var(--white); }
/* teléfono de llamadas + WhatsApp, cada uno con su icono a la izquierda */
.contact-details__phones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-details__phone { display: inline-flex; align-items: center; gap: 10px; }
.contact-details__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--grey-1); transition: color 220ms ease; }
.contact-details__phone:hover .contact-details__icon { color: var(--white); }
.contact-details__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-1);
}
@media (max-width: 768px) {
  .contact-details { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; }
}

/* ============================================================
   Responsive — ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .nav-pill {
    left: 24px;
    right: 24px;
  }

  .side-nav {
    display: none;
  }

  .section-inner {
    padding: 80px 40px;
  }
  .faq-section .section-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Metodología rows stack: mockup + title + label vertical */
  .metodo-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0;
    min-height: 0;
  }

  .metodo-row__label {
    order: 3;
  }

  .faq-section__title {
    position: static;
  }

  .footer {
    padding: 64px 40px 32px;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ============================================================
   Responsive — ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  .nav-pill {
    left: 16px;
    right: 16px;
    padding: 0 20px;
  }

  .nav-pill__links {
    display: none;
  }

  .nav-pill__cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-dropdown {
    display: none !important;
  }

  .section-inner {
    padding: 64px 24px;
  }

  .services-list .service-row {
    grid-template-columns: 48px 1fr 40px;
  }

  .carousel-card {
    min-width: calc(100vw - 60px);
    height: 480px;
  }

  .carousel-card__content {
    padding: 32px;
  }

  /* títulos con palabras largas ("Dimensionamiento") caben en la tarjeta */
  .carousel-card__title {
    font-size: clamp(26px, 7.4vw, 40px);
    letter-spacing: -1px;
  }

  .carousel-section__inner {
    padding: 0 24px;
  }

  .carousel-wrapper {
    padding-left: 24px;
  }

  .carousel-nav {
    padding: 24px 24px 0;
  }

  .service-hero__inner {
    padding: 0 24px;
  }

  .service-hero__title {
    font-size: clamp(48px, 12vw, 80px);
  }

  .service-nav-bar {
    padding: 24px;
  }

  /* Rejilla: puntos en una fila propia arriba; Anterior / Siguiente debajo,
     cada uno en su mitad y con salto de línea (los nombres largos desbordaban) */
  .service-nav-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    align-items: start;
  }

  .service-selector {
    grid-column: 1 / -1;
    order: -1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
  }

  .service-nav-bar__prev,
  .service-nav-bar__next {
    min-width: 0;
  }

  .service-nav-bar__next {
    text-align: right;
  }

  .service-nav-bar__label {
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .service-nav-bar__name {
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

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

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer__copy {
    text-align: left;
  }

  .footer__legal {
    justify-content: flex-start;
  }


}

/* ============================================================
   Página MARKETING — hero estilo ozgur.design (negro, título
   gigante) + sección de CARPETAS apiladas al hacer scroll
   estilo hiss.sydney (crema), con la tipografía de la web.
   ============================================================ */
.mkt-hero {
  background: transparent; color: #fff; min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 140px 6vw 48px; box-sizing: border-box;
}
/* bloque título condensado y centrado en la pantalla (estilo ozgur.design):
   etiqueta + titular comparten el mismo ancho centrado, para que sus bordes
   izquierdos coincidan; el titular se ciñe a pocas ch y baja line-height para
   apilarse en varias líneas justo en el centro del viewport. */
.mkt-hero__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  color: #7a7a7a; margin: auto auto 40px;
  width: 13ch; max-width: 90vw; white-space: nowrap;
}
.mkt-hero__title {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(40px, 6.6vw, 104px); line-height: 0.95;
  letter-spacing: -2.5px; width: 13ch; max-width: 90vw; margin: 0 auto;
}
.mkt-hero__title em { font-style: normal; color: #888; }
/* subtítulo: mismo ancho y borde izquierdo que el titular */
.mkt-hero__sub {
  font-family: var(--font); font-weight: 500;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: #888;
  width: calc(clamp(40px, 6.6vw, 104px) * 13 * 0.675); max-width: 90vw;
  margin: 32px auto 0;
}
/* páginas de servicio (13/10): subfrase en negrita y punto final del
   titular intermitente (mismo parpadeo que el punto de «software.») */
.mkt-hero__sub--strong { font-weight: 700; }
.mkt-hero__dot { animation: hblink 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) {
  .mkt-hero__dot { animation: none; }
}
/* en móvil la etiqueta (sin salto de línea, caja de 13ch) se salía por la
   derecha con nombres largos: toma el ancho y el borde izquierdo del titular */
@media (max-width: 768px) {
  .mkt-hero__label {
    width: calc(clamp(40px, 6.6vw, 104px) * 13 * 0.675);
    white-space: normal; line-height: 1.6;
    margin-left: auto; margin-right: auto;
  }
}
.mkt-hero__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: auto;
  border-top: 1px solid #222; padding-top: 26px;
  border-bottom: 1px solid #222; padding-bottom: 26px;
}
.mkt-hero__meta-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: #666; display: block; margin-bottom: 10px; text-transform: uppercase;
}
/* la respuesta hereda el diseño de la etiqueta (mono, gris, mismo tracking),
   pero en sentence case: minúscula salvo la primera letra */
.mkt-hero__meta-v {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: #666; display: block; text-transform: lowercase;
}
.mkt-hero__meta-v::first-letter { text-transform: uppercase; }

/* carpetas apiladas (hiss.sydney) — fondo crema, colores hiss */
/* !important: gana a la regla global section:nth-child(even/odd){background:negro} */
/* Sin frase de cabecera ni fondo crema propio (25/09): la carpeta 01 aparece justo
   tras el hero, sobre el negro de la web. */
.mkt-folders {
  /* 08/10: la portada de marketing.html abría con <header> y cerraba con </section>,
     así que las carpetas quedaban DENTRO de la portada y heredaban su padding. Ya
     corregido; para que se vea igual, la sección lleva los márgenes laterales (6vw) y
     el inferior (48px) que antes le daba la portada, y esa portada no fuerza 100vh. */
  background: transparent; padding: 24px 6vw 48px;
  --mkt-stick: 104px;   /* deja hueco bajo el nav fijo para que las pestañas no choquen */
  --mkt-tab: 46px;      /* alto de la pestaña */
  --tabw: clamp(120px, 14.6vw, 210px);  /* ancho de pestaña (todas iguales, contiguas): 6 × 14.6vw + 12vw de márgenes ≈ 100vw */
  /* ALTURA ÚNICA para todos los paneles: con sticky, si miden distinto, al final de la
     sección cada carpeta empieza a subir en un momento distinto y las pestañas se
     descuadran en escalera. Ocupa la pantalla bajo la fila de pestañas. */
  --mkt-panel-h: calc(100vh - var(--mkt-stick) - var(--mkt-tab) - 20px);
}
/* Tramo final invisible: con la carpeta 06 colocada, la pantalla queda fija con las
   6 pestañas en fila mientras se sigue haciendo scroll este recorrido. */
.mkt-folders__hold { height: 70vh; }

/* Carpeta con PESTAÑA (estilo hiss.sydney): la pestaña sobresale por arriba del panel y se
   escalona a la derecha en cada carpeta; al hacer scroll el panel siguiente tapa el anterior
   dejando visible su pestaña. El offset superior deja hueco para el nav fijo. */
/* todas las carpetas se fijan al MISMO top → las pestañas quedan en una única fila,
   a la misma altura (la de "Diseño web"); los paneles siguen apilándose al hacer scroll
   y no tapan la fila de pestañas porque empiezan justo debajo de ella. */
.mkt-folder {
  position: sticky;
  top: var(--mkt-stick, 100px);
}
/* pestañas: TODAS del mismo ancho (--tabw) y contiguas → tab i ocupa [i·tabw, (i+1)·tabw],
   así cuando acaba una empieza la siguiente, borde con borde, como hiss.sydney */
.mkt-folder__tab {
  display: flex; align-items: center; gap: 8px;
  width: var(--tabw, 200px);
  margin-left: calc(var(--i) * var(--tabw, 200px));
  height: var(--mkt-tab, 46px); box-sizing: border-box; padding: 0 12px;
  background: #f9f6e4; border: 1px solid #dcd6b6; border-bottom: none;
  border-radius: 12px 12px 0 0;
  position: relative; z-index: 2; margin-bottom: -1px;
}
.mkt-folder__dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; background: var(--dot, #7ab648); }
.mkt-folder__name {
  font-family: var(--font); font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(13px, 1.35vw, 18px); color: #17150f; letter-spacing: -0.3px;
}
.mkt-folder__panel {
  position: relative; height: var(--mkt-panel-h); box-sizing: border-box; overflow: hidden;
  background: #f9f6e4; border: 1px solid #dcd6b6;
  /* top-left recto: la esquina redondeada la aporta la pestaña; así no asoma una "curva
     fantasma" bajo la pestaña. Sin box-shadow (creaba una sombra tipo carpeta vacía). */
  /* 08/10: esquinas de abajo redondeadas en TODAS las carpetas (antes solo la 06, a 12px) */
  border-radius: 0 12px 24px 24px;
}
.mkt-folder__num {
  position: absolute; top: clamp(16px, 2vw, 26px); right: clamp(24px, 4vw, 56px);
  font-family: var(--font); font-weight: 800; line-height: 1;
  font-size: clamp(40px, 5vw, 84px); color: #17150f; letter-spacing: -2px;
}
/* Sin imágenes (2026-09-24): el texto lleva todo el protagonismo, con el mismo
   sistema que el titular del hero (Manrope 800, interlineado apretado) */
.mkt-folder__body {
  display: grid; grid-template-columns: 1fr;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px) 70px; align-items: start;
}
.mkt-folder__arrow { font-family: var(--mono); color: #17150f; font-size: 18px; }
.mkt-folder__lead {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(30px, min(4.8vw, 8.4vh), 76px); line-height: 0.98; letter-spacing: -1.5px;
  color: #17150f; margin-top: 16px; max-width: 16ch;
}
.mkt-folder__desc {
  margin-top: 28px; font-family: var(--font); font-weight: 600;
  font-size: clamp(15px, min(1.5vw, 2.6vh), 22px); line-height: 1.5; color: #2a2718; max-width: 58ch;
}
.mkt-folder__btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 11px 20px; border: 1px dashed #b7b28c; border-radius: 8px;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  color: #17150f; text-decoration: none; transition: background 200ms ease, border-color 200ms ease;
}
.mkt-folder__btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e8622c; }
.mkt-folder__btn:hover { background: #efe9cf; border-color: #17150f; }

@media (max-width: 820px) {
  .mkt-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .mkt-folders { --mkt-stick: 84px; --mkt-tab: 40px; --tabw: 14.6vw; }
  .mkt-folder__tab { padding: 0 12px; gap: 7px; }
  .mkt-folder__name { font-size: clamp(11px, 2.6vw, 15px); }
  .mkt-folder__panel { min-height: 0; }   /* altura única también en móvil (--mkt-panel-h) */
  .mkt-folders { --mkt-panel-h: calc(100svh - var(--mkt-stick) - var(--mkt-tab) - 16px); }
  .mkt-folder__body { grid-template-columns: 1fr; padding-bottom: 48px; }
  .mkt-folder__num { font-size: 40px; }
}

/* ============================================================
   SISTEMA 3AE — frase que converge (pinned) + palabras alternas.
   Efecto de scroll reconstruido a partir de monolog.studio:
   la sección .s3ae es alta y su .s3ae__stage queda fijo; el JS
   traduce el scroll en convergencia de las dos mitades y en la
   aparición por letras (primero las interiores, luego las de los
   extremos). Después, .s3ae-words revela palabras alternas.
   ============================================================ */
.s3ae {
  position: relative;
  background: transparent;
  height: 300vh;                 /* pista de scroll que alimenta el scrub */
}
.s3ae__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;              /* recorta las mitades cuando arrancan en los extremos */
}
.s3ae__line {
  margin: 0;
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.3em;                    /* el "espacio" entre SISTEMA y 3AE. */
  white-space: nowrap;
  font-family: var(--font); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(44px, 11.5vw, 190px);
  color: #fff;
}
.s3ae__word { display: inline-flex; will-change: transform; }
.s3ae__ch  { display: inline-block; opacity: 0; will-change: opacity; }

/* Fase 2 — palabras alternas. Cada franja ocupa su propio alto y,
   a esa altura, el lado opuesto queda vacío. */
.s3ae-words { background: transparent; padding: 2vh 6vw 6vh; }
/* 08/10: menos hueco tras «SISTEMA 3AE.». El título queda fijado en el centro de
   un escenario de 100vh y, al soltarse, dejaba ~50vh vacíos debajo antes de
   «Analiza». Las palabras suben y se montan sobre esa mitad inferior vacía del
   escenario (no toca la convergencia ni su recorrido). Solo con animación: con
   reduced-motion el escenario no va fijado y no sobra ese espacio. */
@media (prefers-reduced-motion: no-preference) {
  .s3ae-words { position: relative; margin-top: -34vh; }
}
.s3ae-words__row {
  min-height: 19vh;   /* antes 32vh: menos aire entre palabras */
  display: flex; align-items: center;
  /* las palabras se acercan al centro (antes pegadas a los márgenes del 6vw) */
  padding-inline: clamp(0px, 13vw, 240px);
}
.s3ae-words__row--left  { justify-content: flex-start; }
.s3ae-words__row--right { justify-content: flex-end; }
.s3ae-words__w {
  font-family: var(--font); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(36px, 7.4vw, 118px);   /* antes clamp(44px, 11vw, 176px) */
  color: #fff;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.16,.68,.32,1),
              transform 0.9s cubic-bezier(.16,.68,.32,1);
}
/* cada palabra entra desde su extremo: las de la izquierda (Analiza…)
   desde la izquierda, y las de la derecha (Estructura…) desde la derecha */
.s3ae-words__row--left  .s3ae-words__w { transform: translateX(-20vw); }
.s3ae-words__row--right .s3ae-words__w { transform: translateX(20vw); text-align: right; }
.s3ae-words__row.is-in .s3ae-words__w { opacity: 1; transform: none; }

/* Cierre centrado: nombre de la metodología + explicación.
   Columna centrada horizontal y verticalmente, independiente del
   padding de la sección, para que quede en el medio en cualquier pantalla. */
.s3ae-words__closing {
  width: min(720px, 100%);
  margin-inline: auto;
  padding-block: 12vh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* "Cerebro" de puntos (canvas, JS `initBrains`): nube de nodos orbitando un
   núcleo denso, con enlaces finos y parpadeo. Recreado desde cero a partir
   del efecto de skilltree.altari.ai (#ocBrain). El tamaño lo fija el CSS;
   el canvas se dimensiona por DPR en JS. */
.brain { display: block; width: 320px; height: 320px; margin: 0 auto 24px; border-radius: 50%; overflow: hidden; }
.brain__canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 680px) { .brain { width: 220px; height: 220px; } }

/* "Motor de automatización" (automatizaciones.html): árbol radial de 7
   departamentos (nodo hub + 3 hojas) con el cerebro de puntos en el centro
   y una línea de estado. Recreado desde cero a partir del "Audit Engine"
   de skilltree.altari.ai. El SVG lo genera el JS (`initMotor`). */
.motor-section .section-inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
  /* la pantalla del motor se alinea con el borde izquierdo del header (.nav-pill:
     left 64px; 24px ≤1024; 16px ≤768); el texto de la derecha sigue alineado con la
     rejilla de la página (mismo borde derecho que .section-inner: 1280px centrados + 80px) */
  max-width: none; margin: 0;
  padding-left: 64px;
  padding-right: max(80px, calc((100vw - 1280px) / 2 + 80px));
}
.motor-section__title {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -1px;
  color: #fff; margin: 0 0 20px; max-width: 16ch;
}
.motor-section__body { font-size: 16px; line-height: 1.7; color: var(--grey-1); max-width: 48ch; margin: 0 0 14px; }
.motor-section__body b { color: #fff; font-weight: 600; }
.motor-screen {
  border: 1px solid #1f1f1f; border-radius: 14px; overflow: hidden;
  background: #0d0d0d; order: -1;
}
.motor-screen__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #1f1f1f;
  font-family: var(--font); font-weight: 700; font-size: 14px; color: #fff;
}
.motor-screen__bar span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-2); }
.motor-screen__stage { position: relative; }
.motor-screen__stage svg { display: block; width: 100%; height: auto; }
.motor-screen .tlink { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.motor-screen .tnode { fill: #2a2a2a; transition: fill 0.5s; }
.motor-screen .tnode.lit { fill: #f2f2f2; }
.motor-screen .tlabel { font-family: var(--mono); font-size: 8.6px; letter-spacing: 0.14em; text-transform: uppercase; fill: #7b7b7b; }
.motor-screen__brain {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 19%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; display: block; background: #0d0d0d;
}
.motor-screen__brain canvas { display: block; width: 100%; height: 100%; }
.motor-screen__status {
  padding: 12px 16px; border-top: 1px solid #1f1f1f; min-height: 42px;
  font-family: var(--mono); font-size: 11.5px; color: var(--grey-1);
}
.motor-screen__status b { color: #f2f2f2; font-weight: 600; }
@media (max-width: 920px) {
  .motor-section .section-inner { grid-template-columns: 1fr; gap: 36px; }
  .motor-screen { order: 0; }
  .motor-section .section-inner { padding-right: 24px; }
}
/* mismo margen izquierdo que el header (.nav-pill) en cada breakpoint; van aquí, tras la
   regla base del motor, para que no las anule el orden del CSS */
@media (max-width: 1024px) { .motor-section .section-inner { padding-left: 24px; } }
@media (max-width: 768px)  { .motor-section .section-inner { padding-left: 16px; padding-right: 16px; } }

.s3ae-words__title {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(24px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.5px;
  color: #fff; margin: 0 0 24px; max-width: 20ch;
}
.s3ae-words__lead {
  font-family: var(--font); font-weight: 400;
  font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6;
  color: var(--grey-1); margin: 0; max-width: 58ch;
}
/* Botón "Password required" bajo la explicación (área privada de la metodología):
   mismo estilo que .btn-outline + candado a la izquierda */
.s3ae-words__lock {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; cursor: pointer;
}
.s3ae-words__lock svg { width: 16px; height: 16px; flex: none; }

/* Cuadro flotante de contraseña (lo crea `initPasswordModal` en el <body>, fuera
   del bloque .reveal, cuyo transform rompería el position:fixed). Con el cuadro
   abierto: la web queda quieta (html.is-locked → overflow hidden), más oscura y
   algo borrosa (backdrop-filter en la capa). Clic fuera o Escape → se cierra. */
html.is-locked, html.is-locked body { overflow: hidden; }
.pw-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.pw-modal.is-open { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
.pw-modal__box {
  width: min(420px, 100%); box-sizing: border-box; padding: 28px 28px 30px;
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.98); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pw-modal.is-open .pw-modal__box { transform: none; }
.pw-modal__label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-1);
}
.pw-modal__label svg { width: 14px; height: 14px; }
.pw-modal__input {
  display: block; width: 100%; box-sizing: border-box; padding: 14px 16px;
  background: #151515; border: 1px solid #333; border-radius: 6px;
  font-family: var(--font); font-size: 16px; color: #fff; letter-spacing: 0.08em;
  outline: none; transition: border-color 200ms ease;
}
.pw-modal__input::placeholder { color: #555; letter-spacing: 0; }
.pw-modal__input:focus { border-color: #fff; }
/* Error: cualquier contraseña es incorrecta → borde y fondo rojizos + ✕ a la
   derecha del campo; se quita en cuanto se vuelve a escribir. */
.pw-modal__field { position: relative; }
.pw-modal__x {
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  color: #ef4444; opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pw-modal__field.is-error .pw-modal__input { border-color: #ef4444; background: #1c0f0f; padding-right: 44px; }
.pw-modal__field.is-error .pw-modal__x { opacity: 1; transform: none; }
.pw-modal__field.is-shake { animation: pw-shake 0.36s ease; }
@keyframes pw-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pw-modal__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .pw-modal, .pw-modal__box, .pw-modal__x { transition: none; }
  .pw-modal__field.is-shake { animation: none; }
}

/* ============================================================
   IA — scroll horizontal (estilo gsap.com). Sección alta con
   escenario fijo (sticky); el scroll vertical traslada el track
   en X. El pin da la sensación de "quieto" mientras el contenido
   navega de izquierda a derecha.
   ============================================================ */
.hscroll { position: relative; height: 360vh; }
.hscroll__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.hscroll__track { display: flex; height: 100%; align-items: center; will-change: transform; }
.hpanel {
  position: relative; flex: none; height: 100%;
  display: flex; align-items: center;
  padding: 0 6vw; box-sizing: border-box;
}
.hpanel--intro  { width: 100vw; justify-content: space-between; gap: 4vw; padding-right: 200px; }
.hpanel--title  { width: auto;  justify-content: flex-start; padding-right: 10vw; }
/* margen derecho (08/10): lo justo para que se vea la etiqueta del menú lateral
   («IA Process» activa empieza a 156px del borde, porque el side-nav es fijo a
   32px) y la palabra respire (~40px). Fijo en px: antes 14vw (202px a 1440 y
   cada vez más negro en pantallas más anchas: 269px a 1920) */
/* margen derecho del final del scroll horizontal (13/10): al menos 276px
   (124px de aire hasta la etiqueta «IA Process» del menú lateral) y, en
   pantallas anchas, lo necesario para que al terminar «y la» quede cortado
   por la izquierda: 11.45 × tamaño de la frase ≈ distancia de «la» al final
   (22/10; antes 11.75, cuando el punto final contaba en el ancho) */
.hpanel--phrase {
  width: auto; justify-content: center;
  padding: 0 max(276px, calc(100vw - 11.45 * clamp(52px, 7.5vw, 120px) + 12px)) 0 3vw;
}

/* Panel 1 — titular de sección como el hero de las páginas de servicio
   (.mkt-hero__title, estilo ozgur.design): el título manda y el texto va
   debajo, más pequeño y en gris, con aire entre ambos */
.hpanel__head { position: relative; z-index: 1; max-width: min(58vw, 980px); }
.hpanel__title {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(34px, 4.2vw, 70px); line-height: 1.06; letter-spacing: -2px;
  color: #fff; max-width: 14ch; margin: 0;
}
.hpanel__lead {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 38px); line-height: 1.35; letter-spacing: -0.4px;
  color: #888; max-width: 30ch; margin: clamp(32px, 4.5vw, 64px) 0 0;
}

/* Cajas/pegatinas de título estilo gsap.com: DEGRADADO (excepción consciente
   a la regla "sin gradientes", pedida por Alejandro para esta sección),
   sombra oscura y solape entre pegatinas contiguas, ligeramente rotadas. */
.hpanel__boxes { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hbox {
  position: relative;
  font-family: var(--font); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 54px); line-height: 1; letter-spacing: -1px;
  padding: 0.18em 0.34em; border-radius: 6px; white-space: nowrap; color: #0a0a06;
  box-shadow: 0 0.22em 0.55em rgba(0, 0, 0, 0.6);
}
.hbox--green  { background: linear-gradient(105deg, #1fc35a 0%, #a8f26a 100%); }
.hbox--sky    { background: linear-gradient(105deg, #45a6ea 0%, #b3dfff 100%); }
.hbox--orange { background: linear-gradient(105deg, #ef8a2c 0%, #f9cd72 100%); margin-left: 1.4em; }
.hbox--paper  { background: linear-gradient(105deg, #d8d8d2 0%, #fbfbf7 100%); }
/* la segunda caja del título monta sobre la primera (solo las esquinas) */
.hpanel__boxes .hbox + .hbox { margin-top: -0.08em; z-index: 2; }
/* Cajas dentro de la frase grande (panel 3): heredan el tamaño del texto y
   se comportan como pegatinas inline ligeramente giradas (estilo gsap). */
.hpanel__big .hbox--inline {
  display: inline-block; font-size: inherit; line-height: 1; margin: 0;
  padding: 0.09em 0.26em 0.11em; border-radius: 0.12em; vertical-align: 0; z-index: 1;
}
/* pegatina que monta sobre la anterior: solo las esquinas / algún rabillo,
   sin tapar letras */
.hpanel__big .hbox--over { margin-left: -0.1em; z-index: 2; }
/* Colores de la frase (14/10, opción A): planos, sin degradado y con el azul
   de la marca. Azul: «grandes», «Trabaja» e «ingeniería»; blanco roto (el del
   CTA): «equipos» e «información». («con la» ya no lleva pegatina, 22/10) */
.hpanel__big .hbox--sky,
.hpanel__big .hpanel__w-ing     { background: var(--electric); color: #fff; }
.hpanel__big .hbox--paper,
.hpanel__big .hpanel__w-info    { background: #e9e8e3; color: #0d0d0d; }
/* Todas las pegatinas van rectas, sin giro (14/10; el 13/10 se enderezaron solo «Trabaja», «con la», «información» e «ingeniería») */
/* "software": máquina de escribir (JS `initTypeword`): las letras aparecen
   una a una de izq. a dcha., la palabra queda 3 s completa y vuelve a
   empezar. Las letras ocultas conservan su hueco (visibility) → sin saltos. */
.hpanel__type .ch { visibility: hidden; }
.hpanel__type .ch.is-on { visibility: visible; }
/* el punto final parpadea siempre, como el cursor del código flotante (08/10) */
.hpanel__dot { animation: hblink 1s step-end infinite; }
/* parpadeo encendido/apagado puro (13/10): visible medio ciclo e invisible el otro,
   sin grises intermedios. Antes iba de 1 a 0.1 con steps(2) y pasaba por ~0.55. */
@keyframes hblink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
/* Panel 2 ("Inteligencia Artificial / a tu servicio"): pegatinas en gris
   y blanco clarito (antes las llevaba el panel 1; verde → gris, naranja →
   blanco clarito) */
/* 08/10: título más grande, para dejar más margen a las dos estadísticas
   (las barras se apoyan sobre él y los círculos nacen debajo) */
.hpanel--title .hbox { font-size: clamp(44px, 5.8vw, 96px); }
.hpanel--title .hbox--green  { background: #4a4a4a; color: #f2f2f2; }
.hpanel--title .hbox--orange { background: #ededea; }

/* Panel 3 — frase grande en escalera (22/10), tres filas y dos columnas:
   col. 1 = «Consigue… grandes equipos» (fila 1) y «con menos esfuerzo.»
   (fila 2, pegada a la derecha: «esfuerzo» acaba donde acaba la pegatina
   «equipos»); col. 2 = «Trabaja… automatización» (fila 2, justo tras el
   punto) e «y la ingeniería de software.» (fila 3, acaba donde
   «automatización»). Los puntos finales cuelgan fuera de la alineación
   (.hpanel__hang) y la celda que sigue a uno recupera su ancho. Antes
   (08/10–22/10): 3–4 columnas con tramos cruzados y «Trabaja / con la»
   apilados. */
.hpanel__big {
  position: relative; z-index: 1;
  font-family: var(--font); font-weight: 800;
  font-size: clamp(52px, 7.5vw, 120px); line-height: 1.02; letter-spacing: -1.5px;
  color: #fff; margin: 0; white-space: nowrap;
  --hang: calc(0.32em - 1.5px);   /* ancho del punto (Manrope 800 con el tracking de la frase), medido de 52 a 120px */
  display: inline-grid; grid-template-rows: auto auto auto;
  column-gap: 0.26em; row-gap: 0.12em; align-items: baseline; justify-items: start;
}
.hpanel__cell { display: block; white-space: nowrap; }
.hpanel__cell--end { justify-self: end; }
.hpanel__hang { margin-right: calc(-1 * var(--hang)); }
.hpanel__cell--after { margin-left: var(--hang); }

/* Panel 1 — mockup "Decide con datos" reutilizado de Metodología,
   grande y pegado al margen derecho (sin invadir el side-nav). */
.mk-host--ia {
  flex: none;
  width: clamp(340px, 37vw, 590px);
  align-self: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.mk-host--ia .mk { width: 100%; height: auto; display: block; }
/* Portada de IA Process (13/10): titular, texto y viñeta suben desde abajo al
   entrar con el scroll (mecanismo .reveal de js/main.js), más recorrido que el
   .reveal general y escalonados */
.hpanel--intro .reveal {
  transform: translateY(80px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hpanel--intro .reveal.is-visible { transform: none; }
.hpanel--intro .hpanel__lead.reveal { transition-delay: 120ms; }
.hpanel--intro .mk-host--ia.reveal { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .hpanel--intro .reveal { opacity: 1; transform: none; transition: none; }
}

/* Animaciones viajeras del scroll horizontal (capa .htravel, absoluta
   sobre todo el track; sustituye a los triángulos y relojes de arena).
   Solo blancos y grises. Los elementos los crea el JS (`initHScroll`) y
   su posición/forma es una función del progreso del scroll:
   · barras: gráfico vertical sobre el título del panel 2 → se sueltan de
     la base, se tumban y viajan por encima de la frase haciendo loops,
     estirándose, cruzándose y encogiéndose (rellenas y huecas mezcladas);
   · círculos: anillo de tramos bajo el título → los tramos se recogen y
     salen 5 círculos que viajan por debajo de la frase serpenteando y
     contrayéndose como un gusano. */
.htravel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.htv-base { position: absolute; left: 0; top: 0; height: 2px; background: #4a4a4a; }
.htv-bar {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  border-radius: 5px; transform-origin: center; will-change: transform;
}
.htv-bar--fill   { background: #fff; }
.htv-bar--grey   { background: #8c8c8c; }
.htv-bar--hollow { border: 3px solid #fff; }
.htv-seglayer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
/* Código flotante que se escribe con el scroll (tras "Trabaja"): sin marco,
   "en el aire" sobre el negro, con color por token */
.htv-code {
  position: absolute; left: 0; top: 0; width: max-content;
  font-family: var(--mono); font-size: 14px; line-height: 1.65; color: #bdbdbd;   /* texto base en blanco roto, algo apagado (13/10) */
  white-space: pre; will-change: transform;
}
.htv-code .k { color: #c084fc; }   /* palabra clave — lila */
.htv-code .v { color: #5db8f0; }   /* variable — azul cielo */
.htv-code .t { color: #56b6c2; }   /* clase — cian */
.htv-code .f { color: #22c55e; }   /* función / método — verde */
.htv-code .p { color: #fb7185; }   /* propiedad — coral */
.htv-code .n { color: #facc15; }   /* número — amarillo */
.htv-code .s { color: #f5a623; }   /* texto — naranja */
.htv-code .o { color: #8a8a8a; }   /* puntuación / operadores — gris */
.htv-code .c { color: #666; font-style: italic; }   /* comentario */
.htv-code__cursor { display: inline-block; width: 7px; height: 1em; vertical-align: -0.15em; background: #fff; animation: hblink 1s step-end infinite; }

/* Fallback: sin pin en móvil o con reduced-motion → paneles apilados */
@media (prefers-reduced-motion: reduce), (max-width: 820px) {
  .hscroll { height: auto; }
  .hscroll__stage { position: static; height: auto; overflow: visible; display: block; }
  .hscroll__track { flex-direction: column; height: auto; transform: none !important; }
  .hpanel { width: 100% !important; height: auto; flex-direction: column; align-items: flex-start; gap: 32px; padding: 12vh 6vw; }
  .htravel { display: none; }
  /* 08/10: en móvil/tablet solo «ingeniería» conserva su pegatina; el resto de la
     frase va como texto normal */
  .hpanel__big .hbox--inline:not(.hpanel__w-ing) {
    background: none; box-shadow: none; transform: none; padding: 0; margin: 0;
    border-radius: 0; color: inherit; font-size: 1em; display: inline;
    white-space: normal;   /* las pegatinas son nowrap: sin esto la frase no puede partirse */
    letter-spacing: inherit; line-height: inherit; vertical-align: baseline;   /* igual que el resto de la frase */
  }
  /* en el HTML estas palabras van pegadas (sin espacio entre etiquetas): como pegatinas
     eran bloques y la línea podía partirse entre ellas; como texto hace falta un espacio
     real, que además permite el salto de línea */
  .hpanel__big .hbox--inline.hbox--over::before { content: ' '; }
  /* sin scroll horizontal la frase escalonada no cabe: vuelve a ser un párrafo */
  .hpanel__big { display: block; white-space: normal; font-size: clamp(36px, 9vw, 72px); }
  .hpanel__cell { display: inline; white-space: normal; }
  .hpanel__hang, .hpanel__cell--after { margin: 0; }
  .hpanel--title .hbox { font-size: clamp(26px, 8.2vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .htv-code__cursor { animation: none; }
  .hpanel__dot { animation: none; }
  .hpanel__type .ch { visibility: visible; }
  .s3ae { height: auto; }
  .s3ae__stage { position: static; height: auto; padding: 22vh 6vw; }
  .s3ae__ch { opacity: 1; }
  .s3ae__word { transform: none !important; }
  .s3ae-words__w { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 700px) {
  .s3ae { height: 240vh; }
  .s3ae-words__row { min-height: 15vh; padding-inline: 4vw; }
}

/* ============================================================
   Servicios — reestilizado OSCURO (marco gris + fondo negro +
   contenido claro), estilo mockups de Metodología. Aplica a:
   consultoría (spotlight), automatizaciones (motor), agentes IA
   (editor), marketing (radial), instalación IA local (filetree)
   e inteligencia ambiental (globo/cobe).
   ============================================================ */

/* Inteligencia ambiental (globo) — ahora también en oscuro como el resto:
   barra + stage negros; el globo se configura en modo dark en main.js */
.svc-anim--cobe .cobe-stage { background: #0d0d0d; }

/* Consultoría — Spotlight */
.svc-anim--spotlight .spotlight-safari__bar { background: #161616; border-bottom-color: #262626; }
.svc-anim--spotlight .spotlight-safari__url { color: #8a8a8a; }
.svc-anim--spotlight .spotlight-safari__content { background: #0d0d0d; }
.svc-anim--spotlight .spotlight-bar { background: #161616; border-color: #333; }
.svc-anim--spotlight.is-visible .spotlight-bar { border-color: #3d3d3d; }
.svc-anim--spotlight .spotlight-search-icon,
.svc-anim--spotlight.is-visible .spotlight-search-icon { color: #8a8a8a; }
.svc-anim--spotlight .spotlight-placeholder--default { color: #9a9a9a; }
.svc-anim--spotlight .spotlight-placeholder--icon { color: #e6e6e6; }
.svc-anim--spotlight .spotlight-icon { background: #161616; border-color: #2c2c2c; }
.svc-anim--spotlight .spotlight-icon svg { color: #cfcfcf; }
.svc-anim--spotlight .spotlight-icon:hover,
.svc-anim--spotlight .spotlight-icon.is-active { background: #263543; border-color: #47617a; box-shadow: 0 0 10px rgba(120,150,180,0.12); }
.svc-anim--spotlight .spotlight-icon:hover svg,
.svc-anim--spotlight .spotlight-icon.is-active svg { color: #a9c4de; }

/* Agentes IA — Editor (syntax highlight aclarado) */
.svc-anim--editor .ide__code { color: #e6edf3; }
.svc-anim--editor .tok-k { color: #bc8cff; }
.svc-anim--editor .tok-s { color: #7ee787; }
.svc-anim--editor .tok-f { color: #79c0ff; }
.svc-anim--editor .tok-c { color: #8b949e; }
.svc-anim--editor .tok-t { color: #e5c07b; }   /* tipos / clases — ámbar */
.svc-anim--editor .tok-n { color: #d19a66; }   /* constantes (True/False) — naranja */
.svc-anim--editor .tok-d { color: #56b6c2; }   /* decorador — cian */
.svc-anim--editor .tok-p { color: #e0a0ac; }   /* argumentos con nombre — rosa suave */
.svc-anim--editor .ide__file { color: #8a8a8a; }

/* Instalación IA local — Filetree (solo color; estructura y formas intactas) */
.svc-anim--filetree .svc-ft { color: #c9c9c9; }
.svc-anim--filetree .svc-ft-name--folder { color: #e0e0e0; }

/* Puntitos macOS en tono pastel/apagado, acorde a la estética oscura
   (todos los marcos: motor, radial, cobe, editor, spotlight, filetree). */
.svc-frame-dots span:nth-child(1),
.spotlight-safari__dots span:nth-child(1),
.svc-ft-dot--r { background: #e07168; }
.svc-frame-dots span:nth-child(2),
.spotlight-safari__dots span:nth-child(2),
.svc-ft-dot--y { background: #e0b24d; }
.svc-frame-dots span:nth-child(3),
.spotlight-safari__dots span:nth-child(3),
.svc-ft-dot--g { background: #63c187; }

/* Inteligencia ambiental — etiquetas de ciudades sobre el globo (cobe).
   Se proyectan por JS cada frame y aparecen/desvanecen según miren al frente. */
.cobe-stage { position: relative; }
.cobe-labels { position: absolute; pointer-events: none; z-index: 3; }
.cobe-label {
  position: absolute; left: 0; top: 0;
  transform: translate(-9999px, -9999px);
  background: #161a22; color: #e6edf3;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 6px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s linear; will-change: transform, opacity;
}
.cobe-label::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #161a22;
}

/* ============================================================
   Página NOSOTROS (nosotros.html) — 30/09, reestructurada el 13/10
   Hero de las páginas de servicio (.mkt-hero) + Origen, Misión y
   visión y Nuestra política. Solo texto (sin 1962 ni Fundador).
   ============================================================ */
.about .section-inner { padding-top: 96px; padding-bottom: 96px; }
.about section + section .section-inner { border-top: 1px solid var(--border); }

/* frase grande: blanco + tramo en gris */
.about-statement {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -1.5px;
  max-width: 22ch; color: #fff;
}
.about-statement__dim { color: var(--grey-2); }

.about-origin__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  margin-top: 64px; max-width: 980px; margin-left: auto;
}
.about-origin__text,
.about-mv__text,

/* Eficacia / Eficiencia */
.about-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 80px; border-top: 1px dotted var(--grey-3);
}
.about-pair__item { padding: 32px 32px 8px 0; }
.about-pair__item + .about-pair__item { padding-left: 32px; border-left: 1px dotted var(--grey-3); }
.about-pair dt {
  font-family: var(--font); font-weight: 800; font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -1px; color: #fff; display: flex; align-items: baseline; gap: 16px;
}
.about-pair__k { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; color: var(--grey-2); }
.about-pair dd {
  margin-top: 14px; font-family: var(--font); font-weight: 500;
  font-size: 16px; line-height: 1.6; color: var(--grey-1); max-width: 44ch;
}

/* Misión y visión */
.about-mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-mv__col {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px;
  padding: 40px 40px 44px; display: flex; flex-direction: column;
}
.about-mv__k {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-2);
}
.about-mv__title {
  font-family: var(--font); font-weight: 800; font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.12; letter-spacing: -0.8px; color: #fff; margin: 28px 0 20px;
}

/* Nuestra política (13/10): sustituye a la sección de 1962 */
@media (max-width: 1024px) {
  .about .section-inner { padding: 80px 24px; }
    }
@media (max-width: 768px) {
  .about .section-inner { padding: 64px 16px; }
  .about-origin__grid, .about-mv__grid { grid-template-columns: 1fr; gap: 20px; }
  .about-origin__grid { margin-top: 40px; }
  .about-pair { grid-template-columns: 1fr; margin-top: 48px; }
  .about-pair__item { padding: 28px 0 20px; }
  .about-pair__item + .about-pair__item { padding-left: 0; border-left: 0; border-top: 1px dotted var(--grey-3); }
  .about-mv__col { padding: 28px 24px 32px; }
}

/* Inteligencia ambiental (Home, tile de Servicios) — esfera de puntos estilo
   Luma (07/10). Sustituye al globo cobe. Canvas pintado por orbSphere. */
.svc-anim--ambient {
  /* 08/10: mismo ancho que radial/editor (antes el del globo, 576px a 1440, que
     hacía salirse la ventana por la derecha y quedar bajo el menú lateral) */
  width: clamp(360px, 34vw, 500px);
  background: transparent; border: none; border-radius: 0; height: auto; overflow: hidden;
}
.ambient-stage {
  background: #0d0d0d; padding: 36px 26px;
  display: flex; flex-direction: column; align-items: center;
}
.orb-sphere { display: block; }
/* 08/10: canvas más ancho que la esfera (la pinta al 74 %) para que quepan las
   etiquetas que salen hacia los lados; la esfera se ve del mismo tamaño que antes */
.orb-sphere--big { width: min(440px, 100%); aspect-ratio: 1 / 1; height: auto; }

/* ============================================================
   OFICINA 3D (agentes-ia) — 07/10
   Sección #oficina tras el carrusel: cabecera + escena en canvas
   (js/oficina-3d.js). El canvas mide lo que mide .oficina__stage
   y se funde con el negro de la página (sin borde ni sombra).
   touch-action pan-y: en táctil el arrastre horizontal gira la
   cámara y el vertical sigue haciendo scroll.
   ============================================================ */
.oficina { padding: 120px 0 40px; }
.oficina__head { max-width: 1280px; margin: 0 auto; padding: 0 80px 40px; }
.oficina__title {
  font-family: var(--font); font-weight: 800; font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.04; letter-spacing: -1.6px; color: var(--white); max-width: 18ch;
}
.oficina__lead {
  font-family: var(--font); font-weight: 500; font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6; color: var(--grey-1); max-width: 56ch; margin-top: 24px;
}
.oficina__stage {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; min-height: 420px; max-height: 80vh;
  background: transparent; overflow: hidden;   /* deja ver el negro + grano de la página */
}
.oficina__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: pan-y;
}
.oficina__canvas.dragging { cursor: grabbing; }
.oficina__hint {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--grey-1);
  pointer-events: none; transition: opacity .6s;
}
.oficina__hint.is-hidden { opacity: 0; }
.oficina__hint-touch { display: none; }
@media (hover: none) {
  .oficina__hint-mouse { display: none; }
  .oficina__hint-touch { display: inline; }
}
.oficina__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 1024px) {
  .oficina__head { padding: 0 24px 32px; }
}
@media (max-width: 768px) {
  .oficina { padding: 80px 0 24px; }
  .oficina__head { padding: 0 16px 28px; }
  .oficina__stage { aspect-ratio: 4 / 5; }
}

/* Motor de automatización — modo «carteles» (08/10, solo el tile de la Home,
   data-mode="pills"): los departamentos con el diseño de los carteles de la
   Oficina de agentes (fondo #0b0b0b, borde 1.5px #2f2f2f, píldora, Manrope 500
   #bdbdbd, punto a la izquierda). Tenues en reposo con el punto blanco; .lit
   (se encienden en círculo) → opacidad plena, texto más claro y punto azul. */
.motor-pills { position: absolute; inset: 0; pointer-events: none; }
.motor-pill {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.6em;
  height: 2.1em; padding: 0 1.1em 0 0.85em; border-radius: 999px;
  background: #0b0b0b; border: 1.5px solid #2f2f2f;
  font-family: var(--font); font-weight: 500; font-size: 11.5px; line-height: 1;
  color: #bdbdbd; white-space: nowrap;
  opacity: 0.32; transition: opacity 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
.motor-pill::before {
  content: ''; flex: none; width: 0.56em; height: 0.56em; border-radius: 50%;
  background: #fff; transition: background-color 0.5s ease;
}
.motor-pill.lit { opacity: 1; color: #e6e6e6; border-color: #3a3a3a; }
.motor-pill.lit::before { background: #2d7dd2; }
/* cerebro más grande en el modo carteles (08/10): 28 % del ancho (antes 19 %);
   data-size 140 en el HTML para que se dibuje nítido a ese tamaño */
.motor-screen[data-mode="pills"] .motor-screen__brain { width: 28%; }

/* ============================================================
   Ajustes móvil / tablet (08/10), siguiendo las webs de referencia
   ============================================================ */
/* Sistema 3AE: las palabras que esperan fuera de pantalla (y las mitades de
   «SISTEMA 3AE.» al converger) daban scroll horizontal (429px a 390, 775 a 768,
   1034 a 1024). clip recorta sin crear contenedor de scroll, así el sticky sigue. */
.s3ae, .s3ae-words { overflow-x: clip; }

@media (max-width: 768px) {
  /* Portada: la línea de 4px de tracking tocaba los bordes a 390 */
  .hero__subtitle { font-size: 11px; letter-spacing: 2.5px; padding: 0 16px; }

  /* Metodología como ozgur.design en móvil: solo la lista de títulos con sus
     divisorias (sin miniatura ni etiqueta) */
  .metodo-row { gap: 0; padding: 22px 0; }
  .metodo-row__mockup, .metodo-row__label { display: none; }
  .metodo-section .metodo-row__title { font-size: clamp(26px, 6.6vw, 44px); line-height: 1.08; letter-spacing: -0.8px; }
}

/* Marketing en móvil: las 6 pestañas comparten el ancho (≈57px a 390) y el
   nombre quedaba en «D.»; como hacen las carpetas apiladas en pantallas
   estrechas, la pestaña muestra solo el punto de color y su número (01–06).
   El nombre completo sigue en el panel. --i ya numera cada carpeta (0–5). */
@media (max-width: 600px) {
  .mkt-folder__tab { padding: 0 8px; gap: 6px; justify-content: center; }
  .mkt-folder__dot { width: 9px; height: 9px; }
  .mkt-folder__name { display: none; }
  .mkt-folder:nth-child(1) .mkt-folder__tab::after { content: '01'; }
  .mkt-folder:nth-child(2) .mkt-folder__tab::after { content: '02'; }
  .mkt-folder:nth-child(3) .mkt-folder__tab::after { content: '03'; }
  .mkt-folder:nth-child(4) .mkt-folder__tab::after { content: '04'; }
  .mkt-folder:nth-child(5) .mkt-folder__tab::after { content: '05'; }
  .mkt-folder:nth-child(6) .mkt-folder__tab::after { content: '06'; }
  .mkt-folder__tab::after { font-family: var(--mono); font-size: 11px; color: #17150f; letter-spacing: 0.04em; }
  /* hero: el titular largo se pegaba a la ficha WHO/WHAT */
  .mkt-hero__title { margin-bottom: 28px; }
}

/* Portada de marketing.html: como antes del arreglo de etiquetas, no ocupa 100vh y
   la carpeta 01 asoma justo bajo la ficha WHO/WHAT; su padding inferior pasa a .mkt-folders */
.mkt-hero--marketing { min-height: 0; padding-bottom: 0; }

/* Sistema 3AE en móvil/tablet (08/10): mucha separación entre las palabras alternas
   (franjas de 15vh ≈ 127px a 844) y con el título. Ahora cada fila mide su palabra
   más un margen de «salto de párrafo» (0.35em arriba y abajo ≈ 25px entre palabras)
   y el bloque sube algo más bajo el título fijado (-42vh en vez de -34vh). */
@media (max-width: 768px) {
  .s3ae-words__row { min-height: 0; padding-block: calc(clamp(36px, 7.4vw, 118px) * 0.35); }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .s3ae-words { margin-top: -42vh; }
}

/* IA Process apilado (≤820 / reduced-motion), 08/10: menos negro entre bloques. Cada
   panel llevaba 12vh arriba y abajo (≈100px a 844) + 32px de gap: entre Metodología y
   «Mejora tus procesos», y entre las pegatinas del título y la frase, quedaba demasiado. */
@media (prefers-reduced-motion: reduce), (max-width: 820px) {
  .hpanel { padding: 48px 6vw; }
  .hpanel--intro { padding-top: 32px; }
  .hpanel--title { padding-bottom: 0; }
  .hpanel--phrase { padding-top: 28px; }
}

/* Carpetas solapadas (08/10): entre carpeta y carpeta se veía una franja negra a los
   lados de la pestaña (y bajo las esquinas redondeadas). Cada carpeta se monta sobre el
   final de la anterior (alto de pestaña + radio): su pestaña queda encima del panel de
   atrás, que asoma en crema. fitFolders añade ese mismo margen a la altura para que la
   pestaña no tape el contenido (botón «Ver este servicio»). */
.mkt-folder + .mkt-folder { margin-top: calc(-1 * (var(--mkt-tab) + 24px)); }

/* Sistema 3AE — palabras alternas ligadas al scroll (08/10): el JS fija opacidad y
   desplazamiento en cada frame; sin transición CSS para que sigan al scroll sin retraso */
.s3ae-words.is-scrub .s3ae-words__w { transition: none; }

/* Menú móvil (08/10): el CTA es el mismo botón del header de escritorio («Start a
   project» + casilla oscura con la flecha en diagonal); antes era un .btn-outline
   «Hablemos». En móvil .nav-pill__cta está oculto en el header, aquí se muestra. */
.nav-mobile-menu .nav-pill__cta { display: inline-flex; }

/* Menú móvil (08/10): animación más lenta y fluida y apartados centrados.
   El panel baja en 750ms con una curva que frena suave (antes 400ms); los
   apartados y el CTA aparecen escalonados con un leve fundido hacia arriba
   cuando el panel ya casi ha llegado. Al cerrar desaparecen a la vez y rápido. */
.nav-mobile-menu {
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  align-items: center;
}
.nav-mobile-menu__links {
  margin: auto 0;                 /* centrados en vertical entre la parte de arriba y el CTA */
  align-items: center; text-align: center; gap: 28px;
}
.nav-mobile-menu__cta { margin-top: 0; }
.nav-mobile-menu__links a,
.nav-mobile-menu__cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity 200ms ease, transform 200ms ease, color 200ms ease;
}
.nav-mobile-open .nav-mobile-menu__links a,
.nav-mobile-open .nav-mobile-menu__cta {
  opacity: 1; transform: none;
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}
.nav-mobile-open .nav-mobile-menu__links a:nth-child(1) { transition-delay: 300ms, 300ms, 0ms; }
.nav-mobile-open .nav-mobile-menu__links a:nth-child(2) { transition-delay: 380ms, 380ms, 0ms; }
.nav-mobile-open .nav-mobile-menu__links a:nth-child(3) { transition-delay: 460ms, 460ms, 0ms; }
.nav-mobile-open .nav-mobile-menu__cta { transition-delay: 560ms, 560ms, 0ms; }
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-menu { transition: none; }
  .nav-mobile-menu__links a, .nav-mobile-menu__cta { opacity: 1; transform: none; transition: none; }
}
/* al saltar a #servicios (menú, header) la etiqueta «(Lo que hacemos)» quedaba bajo el header fijo */
#servicios { scroll-margin-top: 40px; }

/* «automatización» en gris en la frase de IA Process, en todos los tamaños (08/10;
   primero solo en móvil): destaca junto a la pegatina de «ingeniería» */
.hpanel__big .hpanel__w-auto { color: var(--grey-1); }

/* ============================================================
   Páginas legales (aviso-legal.html, politica-de-privacidad.html)
   Texto largo de lectura: columna estrecha, tablas con filetes y
   los datos pendientes [entre corchetes] resaltados en amarillo.
   ============================================================ */
.legal { padding: 160px 6vw 120px; }
.legal__inner { max-width: 860px; margin: 0 auto; }
.legal__label {
  display: block; margin-bottom: 22px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-1);
}
.legal__title {
  font-weight: 800; font-size: clamp(48px, 7vw, 104px); line-height: 0.95;
  letter-spacing: -0.045em; color: var(--white); margin: 0 0 clamp(40px, 5vw, 72px);
}
.legal__body { font-size: 17px; line-height: 1.65; color: #c9c9c9; }
.legal__body p { margin: 0 0 18px; max-width: 70ch; }
.legal__body h2 {
  font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--white); margin: 64px 0 20px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body ul { margin: 0 0 18px; padding-left: 1.2em; max-width: 70ch; }
.legal__body li { margin-bottom: 10px; padding-left: 4px; }
.legal__body li::marker { color: var(--grey-2); }
.legal__body a { color: var(--white); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
.legal__body a:hover { text-decoration-color: var(--white); }

.legal-table-wrap { margin: 8px 0 28px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal-table thead th {
  font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-1); text-align: left;
  padding: 0 20px 12px 0; border-bottom: 1px solid #3a3a3a;
}
.legal-table td,
.legal-table tbody th {
  padding: 14px 20px 14px 0; border-bottom: 1px solid var(--border);
  vertical-align: top; text-align: left; font-weight: 400;
}
.legal-table tbody th,
.legal-table td:first-child { color: var(--white); font-weight: 600; }
.legal-table--kv tbody th { width: 34%; }

.legal-pending {
  background: rgba(250, 204, 21, 0.14); color: #facc15;
  padding: 0 0.2em; border-radius: 2px;
}

/* en móvil la tabla de finalidades (4 columnas) se apila: cada fila es un bloque
   y cada celda lleva su encabezado delante (data-label) */
@media (max-width: 768px) {
  .legal { padding: 120px 16px 80px; }
  .legal__body { font-size: 16px; }
  .legal-table:not(.legal-table--kv) thead { display: none; }
  .legal-table:not(.legal-table--kv) tr { display: block; padding: 16px 0; border-bottom: 1px solid #3a3a3a; }
  .legal-table:not(.legal-table--kv) td { display: block; padding: 4px 0; border: 0; }
  .legal-table:not(.legal-table--kv) td::before {
    content: attr(data-label); display: block;
    font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--grey-2); margin-top: 6px;
  }
  .legal-table--kv tbody th { width: 42%; }
}

/* ============================================================
   Animación de carga de la Home (22/10): el cerebro de puntos se
   forma, primero de uno en uno y luego muchos a la vez, y se
   desvanece descubriendo la portada. Solo la primera visita en el
   navegador (html.intro-on, lo decide un script en el <head> de
   index.html); la anima js/main.js (bloque 0b).
   ============================================================ */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  background: #000; cursor: pointer;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
  /* red de seguridad: si el JS no arranca, se quita sola a los 6 s */
  animation: intro-kill 0.4s 6s forwards;
}
.intro__brain {
  display: block; width: min(320px, 62vw); aspect-ratio: 1;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease;
}
.intro__canvas { display: block; width: 100%; height: 100%; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro.is-out .intro__brain { transform: scale(1.18); opacity: 0; }
@keyframes intro-kill { to { opacity: 0; visibility: hidden; } }

/* ============================================================
   Banner de cookies (09/10): lo crea js/main.js (bloque 0a).
   Caja oscura abajo a la izquierda, como el desplegable del nav.
   «Rechazar» y «Aceptar» con el mismo peso visual (guía AEPD).
   ============================================================ */
.cookie-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 1200;
  width: min(460px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 20px 22px 18px;
  background: rgba(13, 13, 13, 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
  color: var(--white);
  opacity: 0; transform: translateY(12px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner.is-open { opacity: 1; transform: none; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__label {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-1);
}
.cookie-banner__text { margin: 0; font-size: 14px; line-height: 1.55; color: #c9c9c9; }
.cookie-banner__text a { color: var(--white); text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.cookie-banner__text a:hover { text-decoration-color: var(--white); }

.cookie-banner__prefs { display: grid; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dotted var(--grey-3); }
.cookie-banner__prefs[hidden] { display: none; }
.cookie-pref { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--grey-1); cursor: pointer; }
.cookie-pref strong { display: block; color: var(--white); font-weight: 700; }
.cookie-pref input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid #3a3a3a; border-radius: 3px;
  background: transparent; cursor: pointer; display: grid; place-content: center;
}
.cookie-pref input::after {
  content: ''; width: 9px; height: 5px; margin-top: -3px;
  border: solid #000; border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0;
}
.cookie-pref input:checked { background: var(--white); border-color: var(--white); }
.cookie-pref input:checked::after { opacity: 1; }
.cookie-pref input:disabled { opacity: 0.45; cursor: default; }
.cookie-pref input:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }

.cookie-banner__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cookie-banner__link {
  margin-right: auto; padding: 8px 0; font-family: var(--font); font-weight: 700; font-size: 14px;
  color: var(--grey-1); text-decoration: underline; text-decoration-color: #444; text-underline-offset: 3px;
  transition: color 200ms ease;
}
.cookie-banner__link:hover { color: var(--white); }
.cookie-banner__link[hidden] { display: none; }
.cookie-banner__btn {
  padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--white);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible { background: var(--white); border-color: var(--white); color: #000; }

@media (max-width: 768px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .cookie-banner__actions { flex-wrap: wrap; }
  .cookie-banner__btn { flex: 1 1 0; }
  .cookie-banner__link { flex: 1 0 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* «Configurar cookies» del footer: es un botón, con el aspecto de los enlaces legales */
.footer__legal button { font: inherit; color: var(--grey-2); transition: color 220ms ease; cursor: pointer; }
.footer__legal button:hover { color: var(--white); }
.legal__inline-btn {
  font: inherit; color: var(--white); cursor: pointer;
  text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px;
}
.legal__inline-btn:hover { text-decoration-color: var(--white); }

/* Nosotros — Nuestra política (13/10): tres principios en filas numeradas con
   divisoria punteada (gramática de FAQ/Metodología). El caso de John Glenn va
   como inspiración dentro del primero, sin protagonismo. */
.about-policy__list { list-style: none; margin: 64px 0 0; padding: 0; border-top: 1px dotted var(--grey-3); }
.about-policy__item {
  display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: 32px;
  padding: 40px 0; border-bottom: 1px dotted var(--grey-3);
}
.about-policy__n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--grey-2); padding-top: 0.6em; }
.about-policy__title {
  margin: 0; font-family: var(--font); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 42px); line-height: 1.08; letter-spacing: -0.03em; color: var(--white);
}
.about-policy__body p {
  margin: 0; font-family: var(--font); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--grey-1); max-width: 56ch;
}
/* el caso de 1962 va como un párrafo más, con la misma tipografía (13/10) */
.about-policy__body p + p { margin-top: 18px; }
@media (max-width: 900px) {
  .about-policy__item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 16px; padding: 32px 0; }
  .about-policy__body { grid-column: 2; }
}