/* ══════════════════════════════════════════════════════════════════════════
   GEOTEL · landing principal (carrusel de los cuatro servicios).
   Los tokens de marca, el reinicio y las primitivas están en base.css, que
   se carga antes que esta hoja. Aquí solo vive lo propio del carrusel.
   Orden: escenario · barras · slides · rail · controles · menú · responsive
   ══════════════════════════════════════════════════════════════════════════ */

body {
  min-height: 100dvh;
  /* El carrusel ocupa exactamente la ventana: la página nunca se desplaza. */
  overflow: hidden;
}

/* ── Escenario ───────────────────────────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  overflow: clip;
  background: var(--ink);
  transition: --accent var(--t-slow) var(--ease);
}

.grain { z-index: 15; }

/* ── Barras ──────────────────────────────────────────────────────────── */
.bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--gutter);
}

.bar--top {
  top: 0;
  justify-content: space-between;
  padding-block: clamp(20px, 3.2vh, 36px);
  padding-top: max(clamp(20px, 3.2vh, 36px), env(safe-area-inset-top));
}

.bar--bottom {
  bottom: 0;
  justify-content: space-between;
  align-items: flex-end;
  padding-block: clamp(20px, 3.2vh, 34px);
  padding-bottom: max(clamp(24px, 3.6vh, 38px), env(safe-area-inset-bottom));
}

/* Logo */

.bar__right { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }

/* Selector de idioma */
.lang { display: flex; align-items: center; gap: 6px; }
.lang__btn {
  min-width: 34px; min-height: 34px;
  padding: 4px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--faint);
  transition: color var(--t-fast) var(--ease);
}
.lang__btn:hover { color: var(--paper); }
.lang__btn.is-on { color: var(--paper); }
.lang__sep { color: var(--line-2); font-size: 11px; }

/* Botón de menú */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.menu-btn__i { display: grid; gap: 5px; width: 26px; }
.menu-btn__i i {
  display: block; height: 1.5px; background: var(--paper);
  transition: transform var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.menu-btn__i i:last-child { width: 17px; margin-left: auto; }
.menu-btn:hover .menu-btn__i i:last-child { width: 26px; }

/* ── Slides ──────────────────────────────────────────────────────────── */
.slides { position: absolute; inset: 0; }
.slides:focus { outline: none; }

.slide {
  position: absolute; inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .85s var(--ease-io), visibility 0s linear .85s;
}
.slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity .85s var(--ease-io), visibility 0s;
  z-index: 2;
}

.slide__media { position: absolute; inset: 0; overflow: hidden; }
.slide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-io);
}
.slide.is-active .slide__media img { transform: scale(1); }
/* Deriva lenta mientras el servicio está en pantalla. */
.slide.is-active .slide__media img { animation: drift 16s var(--ease-io) 1.2s forwards; }
@keyframes drift { to { transform: scale(1.07) translate3d(-1.2%, -.8%, 0); } }

.slide__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 34%, rgba(8,8,10,.18) 62%, rgba(8,8,10,.55) 100%),
    linear-gradient(to top, rgba(8,8,10,.88) 0%, rgba(8,8,10,0) 46%);
}

/* Contenido del slide */
.slide__body {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  z-index: 10;
  width: min(53vw, 660px);
  transform: translateY(-48%);
}

.eyebrow { margin-bottom: clamp(18px, 2.6vh, 30px); }

.display { font-size: clamp(3.1rem, 8.4vw, 8.4rem); line-height: .92; }
/* Un servicio de nombre largo baja un escalón para no desbordar la columna. */
.display.display--long { font-size: clamp(2.5rem, 6.4vw, 6.4rem); }

.display .line { display: block; overflow: hidden; padding-bottom: .06em; }
.display .line > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease);
}
.slide.is-active .display .line > span { transform: none; }
.slide.is-active .display .line:nth-child(1) > span { transition-delay: .16s; }
.slide.is-active .display .line:nth-child(2) > span { transition-delay: .28s; }

.lede {
  max-width: 46ch;
  margin: clamp(20px, 3vh, 34px) 0 0;
  font-size: clamp(14.5px, 1.02vw, 16.5px);
  line-height: 1.7;
  color: var(--muted);
}

.tags {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--faint);
}

/* Entrada escalonada del texto secundario */
.slide .lede, .slide .tags, .slide .eyebrow, .slide .cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.slide.is-active .eyebrow { opacity: 1; transform: none; transition-delay: .08s; }
.slide.is-active .lede    { opacity: 1; transform: none; transition-delay: .42s; }
.slide.is-active .tags    { opacity: 1; transform: none; transition-delay: .5s; }
.slide.is-active .cta     { opacity: 1; transform: none; transition-delay: .58s; }

/* Llamada a la acción */
.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(28px, 4.2vh, 46px);
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .55s var(--ease-io);
}
.cta svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-mid) var(--ease);
}
.cta:hover, .cta:focus-visible { color: var(--ink); border-color: var(--accent); }
.cta:hover::before, .cta:focus-visible::before { transform: none; }
.cta:hover svg { transform: translateX(5px); }

/* ── Rail de servicios ───────────────────────────────────────────────── */
.rail {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 25;
  display: flex; flex-direction: column; gap: 10px;
  transform: translateY(-50%);
}

.rail__item {
  position: relative;
  display: block;
  width: 128px;
  padding: 0;
  text-align: left;
  opacity: .52;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.rail__item:hover, .rail__item:focus-visible { opacity: 1; transform: translateX(-6px); }
.rail__item.is-on { opacity: 1; }

.rail__thumb {
  position: relative;
  display: block;
  /* Apaisada: cuatro tarjetas verticales en 4/5 no caben en pantallas de
     portátil una vez descontadas las dos barras. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.rail__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* El punto de interés de los tres fondos está a la derecha del centro:
     se recorta hacia allí para que la miniatura no salga vacía. */
  object-position: 72% 34%;
  /* Los fondos son muy oscuros: se aclaran para que la miniatura se lea. */
  filter: brightness(1.55) saturate(1.15);
}
.rail__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, .38);
  transition: background var(--t-mid) var(--ease);
}
.rail__item.is-on .rail__thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgb(0 0 0 / .9);
}
.rail__item.is-on .rail__thumb::after,
.rail__item:hover .rail__thumb::after { background: rgba(8, 8, 10, .1); }

.rail__meta { display: block; padding-top: 9px; }
.rail__n {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--faint);
}
.rail__item.is-on .rail__n { color: var(--accent); }
.rail__label {
  display: block;
  margin-top: 3px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.35;
}

/* ── Controles inferiores ────────────────────────────────────────────── */
.ctrl { display: flex; align-items: center; gap: 10px; }

.ctrl__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.ctrl__btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ctrl__btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ctrl__btn--play { margin-left: 6px; }
.ctrl__btn--play .i-play { display: none; }
.ctrl__btn--play[aria-pressed="false"] .i-pause { display: none; }
.ctrl__btn--play[aria-pressed="false"] .i-play  { display: block; }

.contact {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.contact a { transition: color var(--t-fast) var(--ease); }
.contact a:hover { color: var(--accent); }
.contact span { color: var(--line-2); }

.count {
  margin: 0;
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
}
.count__s, .count__t { font-size: .48em; color: var(--faint); }
#cur { color: var(--paper); }

.progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: 2px;
  background: var(--line);
}
.progress i {
  display: block; height: 100%;
  width: 0;
  background: var(--accent);
  transform-origin: left;
}

/* ── Menú a pantalla completa ────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--ink);
  /* Se anima con `animation`: en cuanto deja de estar `hidden` es visible.
     `is-open` queda solo como marca de estado para el JavaScript. */
  animation: menuEntra var(--t-mid) var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-closing { animation: menuSale var(--t-mid) var(--ease) forwards; }
@keyframes menuEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuSale  { from { opacity: 1; } to { opacity: 0; } }

.menu__inner { width: min(1100px, 100%); }

.menu__eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--faint);
}

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

.menu__link {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.6vh, 30px) 0;
  transition: padding-left var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.menu__link:hover, .menu__link:focus-visible { padding-left: clamp(12px, 2vw, 28px); }
.menu__link:hover .menu__title { color: var(--accent); }

.menu__i {
  flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--faint);
}
.menu__title {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: 1;
  transition: color var(--t-mid) var(--ease);
}
.menu__sub {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}

.menu__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.menu__foot p { margin: 0; }
.menu__foot a:hover { color: var(--accent); }

.menu__close {
  position: absolute;
  top: clamp(18px, 3vh, 34px); right: var(--gutter);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-2); border-radius: 50%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.menu__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu__close:hover { background: var(--paper); color: var(--ink); }

body.menu-open { overflow: hidden; }

/* ══ Responsive ═══════════════════════════════════════════════════════ */

/* Portátiles pequeños: rail más estrecho */
@media (max-width: 1180px) {
  .rail__item { width: 106px; }
  .slide__body { width: min(60vw, 560px); }
}

/* Poca altura útil: la miniatura se aplana para que las cuatro tarjetas
   quepan entre la barra superior y la inferior. */
@media (max-height: 800px) and (min-width: 901px) {
  .rail { gap: 8px; }
  .rail__item { width: 104px; }
  .rail__thumb { aspect-ratio: 16 / 9; }
  .rail__label { font-size: 9.5px; letter-spacing: .06em; }
}

/* Tablet y móvil: el rail pasa a fila inferior y el texto se ancla abajo */
@media (max-width: 900px) {
  .slide__body {
    top: auto;
    bottom: clamp(210px, 30vh, 260px);
    width: auto;
    right: var(--gutter);
    transform: none;
  }
  .display { font-size: clamp(2.9rem, 13vw, 5rem); }
  .display.display--long { font-size: clamp(2.3rem, 10.2vw, 3.9rem); }
  .lede { max-width: 40ch; font-size: 15px; }

  .rail {
    top: auto;
    right: var(--gutter);
    left: var(--gutter);
    bottom: clamp(104px, 15vh, 130px);
    flex-direction: row;
    gap: 8px;
    transform: none;
  }
  /* `min-width: 0` es necesario: sin él la etiqueta más larga ensancha
     su pastilla y las tres dejan de medir lo mismo. */
  .rail__item { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; opacity: .6; }
  .rail__item:hover, .rail__item:focus-visible { transform: none; }
  .rail__thumb { aspect-ratio: 16 / 10; }
  .rail__label { font-size: 10px; letter-spacing: .04em; hyphens: auto; }

  .slide__media::after {
    background:
      linear-gradient(to top, rgba(8,8,10,.95) 0%, rgba(8,8,10,.72) 38%, rgba(8,8,10,.25) 78%),
      linear-gradient(100deg, rgba(8,8,10,.7) 0%, rgba(8,8,10,.15) 70%);
  }

  .contact { display: none; }
  .bar--bottom { justify-content: space-between; }
}

/* Móvil */
@media (max-width: 560px) {
  .menu-btn__t { display: none; }
  .display { font-size: clamp(2.6rem, 14.5vw, 4rem); }
  .display.display--long { font-size: clamp(2rem, 11.2vw, 3.1rem); }
  .tags { display: none; }
  .lede { font-size: 14.5px; -webkit-line-clamp: 4; }
  .cta { min-height: 52px; padding: 0 24px; font-size: 11px; }
  .ctrl__btn { width: 44px; height: 44px; }
  .rail__thumb { display: none; }
  .rail__item {
    padding: 10px 8px;
    border: 1px solid var(--line);
    text-align: center;
  }
  .rail__item.is-on { border-color: var(--accent); background: rgba(245,243,239,.05); }
  .rail__meta { padding-top: 0; }
  /* Cuatro pastillas en una fila quedan ilegibles a 375px: 2 x 2. */
  .rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    bottom: clamp(92px, 13vh, 116px);
  }
  .slide__body { bottom: clamp(226px, 31vh, 268px); }
}

/* Pantallas muy bajas: se prescinde de la miniatura y el rail queda como
   una columna de etiquetas, igual que las pastillas del móvil. */
@media (max-height: 640px) and (min-width: 901px) {
  .display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
  .display.display--long { font-size: clamp(2.2rem, 4.9vw, 3.7rem); }
  .lede { display: none; }
  .rail__thumb { display: none; }
  .rail__meta { padding-top: 0; }
  .rail__item {
    width: 138px;
    padding: 9px 11px;
    border: 1px solid var(--line);
  }
  .rail__item.is-on { border-color: var(--accent); background: rgba(245, 243, 239, .05); }
}

/* ══ Preferencias del usuario ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide__media img { transform: none; animation: none; }
  .display .line > span { transform: none; }
  .slide .lede, .slide .tags, .slide .eyebrow, .slide .cta { opacity: 1; transform: none; }
}

/* ══ Sin JavaScript: el sitio sigue siendo utilizable ════════════════ */
.no-js body { overflow: auto; }
.no-js .stage { position: static; overflow: visible; }
.no-js .slides { position: static; }
.no-js .slide {
  position: relative;
  visibility: visible; opacity: 1;
  min-height: 100vh;
  display: flex; align-items: center;
}
.no-js .slide__body { position: relative; top: auto; bottom: auto; transform: none; padding-block: 18vh; }
.no-js .display .line > span { transform: none; }
.no-js .slide .lede, .no-js .slide .tags, .no-js .slide .eyebrow, .no-js .slide .cta { opacity: 1; transform: none; }
.no-js .rail, .no-js .bar--bottom, .no-js .progress, .no-js .menu-btn, .no-js .lang { display: none; }
.no-js .bar--top { position: absolute; }

/* ══ Impresión ═══════════════════════════════════════════════════════ */
@media print {
  .rail, .bar--bottom, .progress, .grain, .slide__media, .menu { display: none !important; }
  .stage { position: static; }
  .slide { position: static; visibility: visible; opacity: 1; page-break-after: always; }
  .slide__body { position: static; transform: none; width: auto; }
  body { background: #fff; color: #000; overflow: visible; }
}