/* ==========================================================================
   MP360 · Jacarandá — Servicios e infraestructura

   Referencia de composición y motion: terrene/src/components/HowWeWork.
   Identidad, paleta, radios y tipografía: los tokens vigentes de Jacarandá
   (mp360.css, mp360-navbar.css, mp360-cta.css). No se introduce ninguna
   paleta nueva ni radios ajenos al sistema.

   La superficie vive dentro de .mp360-app, así que sigue operativa cuando el
   contenedor MP360 está a pantalla completa.

   Composición:
     · dos columnas 32/68 cuando hay ancho y alto para que respiren;
     · una columna con carril de selectores cuando no;
     · dos zonas compactas en apaisado corto, donde el alto es el recurso
       escaso y la imagen cede antes que el texto o los controles.
   ========================================================================== */

.mp360-services {
  /* ---- primitivos del Design System, declarados en el scope del componente */
  --white: #FFFFFF;
  --neutral-50: #FEFEFE;
  --neutral-200: #E8E8E8;
  --neutral-950: #151515;
  --primary-50: #F3F4FF;
  --primary-600: #5D59C6;
  --primary-700: #4742A1;
  --primary-800: #332F7B;

  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-prominent: 16px;

  /* ---- medidas propias del componente ---- */
  --sv-pad: 1.5rem;            /* aire interno de cada zona */
  --sv-cierre: 2.75rem;        /* 44px · target mínimo (DESIGN.md §7) */
  --sv-borde: rgba(21, 21, 21, 0.10);
  --sv-linea: rgba(71, 66, 161, 0.22);

  position: absolute;
  inset: 0;
  z-index: 50;                 /* sobre navbar (30) y ficha (40); bajo la transición (60) */
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 4vh, 3rem) clamp(0.75rem, 4vw, 3rem);
  padding-top: max(clamp(0.75rem, 4vh, 3rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(0.75rem, 4vh, 3rem), env(safe-area-inset-bottom, 0px));
  font-family: "Manrope", system-ui, sans-serif;
}

.mp360-services[hidden] { display: none !important; }

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

.mp360-services p,
.mp360-services h2,
.mp360-services h3 { margin: 0; }

/* --------------------------------------------------------------------------
   Velo

   Sin desenfoque: cubriría el viewport entero sobre un panorama en movimiento
   y es el efecto más caro que se puede pedir en mobile. El contraste lo da la
   opacidad, que además no depende de soporte.
   -------------------------------------------------------------------------- */
.mp360-services__scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, 0.58);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Panel

   Una sola columna por defecto (mobile primero). El orden del grid pone la
   salida arriba de todo: en una superficie a pantalla casi completa es lo
   primero que el usuario tiene que encontrar.
   -------------------------------------------------------------------------- */
.mp360-services__dialog {
  position: relative;
  width: min(100%, 40rem);
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "bar" "intro" "stage";
  background: var(--white);
  color: var(--neutral-950);
  border-radius: var(--radius-prominent);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  /* El panel se revela con máscara; el valor inicial lo pone GSAP, que lee
     este mismo `border-radius` para no divergir de él.
     Si el motion no corre, el guarda de reloj lo deja acá. */
  clip-path: inset(0% 0% 0% 0% round var(--radius-prominent));
}

/* --------------------------------------------------------------------------
   Banda de cierre

   El botón NO flota sobre la imagen: ocupa una banda propia reservada en el
   grid. Su hit area no invade título, eyebrow ni contenido, y sigue visible
   durante toda la interacción (DESIGN.md §7).
   -------------------------------------------------------------------------- */
.mp360-services__bar {
  grid-area: bar;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 0.75rem 0;
  background: var(--primary-50);
}

.mp360-services__close {
  width: var(--sv-cierre);
  height: var(--sv-cierre);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--sv-borde);
  border-radius: var(--radius-control);   /* cuadrado redondeado, no círculo */
  color: var(--neutral-950);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp360-services__close:hover {
  background: var(--primary-50);
  border-color: var(--primary-700);
}

.mp360-services__close:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}

.mp360-services__close-icon { width: 1.125rem; height: 1.125rem; display: block; }
.mp360-services__close-icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Introducción y selectores
   -------------------------------------------------------------------------- */
.mp360-services__intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
  padding: 0.75rem var(--sv-pad) var(--sv-pad);
  background: var(--primary-50);
}

/* La introducción es contenido progresivo: cede el alto antes que los
   selectores, que son la navegación de la superficie. Si aun así no entra,
   ésta es la ÚNICA región con scroll del componente. */
.mp360-services__intro-head {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mp360-services__eyebrow {
  font-size: 0.75rem;                /* 12px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-700);
}

.mp360-services__title {
  font-size: clamp(1.25rem, 2.4vw, 2rem);   /* 20 → 32px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--neutral-950);
}

/* Contenido progresivo: la introducción se lee entera donde hay lugar y cede
   primero cuando el alto escasea. El detalle de cada servicio no se pierde:
   está en el contenido activo. */
.mp360-services__summary {
  font-size: 0.875rem;               /* 14px */
  line-height: 1.55;
  color: rgba(21, 21, 21, 0.74);
  max-width: 46ch;
}

/* --- selectores ------------------------------------------------------------
   Carril horizontal en una columna; lista vertical cuando la introducción es
   una columna de verdad. */
/* CAUSA DEL PRIMER ITEM PEGADO AL BORDE

   El carril usaba la tecnica de sangrado completo: `margin-inline` negativo
   para llegar a los bordes del panel y `padding-inline` para devolverle el
   aire al primer y ultimo item. Funciona mientras el carril NO se scrollea:
   apenas `scrollIntoView` lleva el item activo al inicio, ese padding se
   consume y el primer item queda tocando el borde, fuera del eje del titulo,
   del texto, de la imagen y del detalle.

   Se retira el sangrado: el carril vive dentro del mismo padding que el resto
   de la zona, asi que su eje izquierdo es el mismo SIEMPRE, scrolleado o no.
   `scroll-padding-inline` conserva ese aire tambien cuando el scroll lo hace
   el navegador. El recorte del ultimo item contra el borde derecho queda como
   senal de continuidad, que es lo que se pidio. */
.mp360-services__tabs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.25rem;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.mp360-services__tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--sv-cierre);
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid var(--sv-linea);
  border-radius: var(--radius-control);
  color: var(--neutral-950);
  font-family: inherit;
  font-size: 0.875rem;               /* 14px */
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, padding 0.3s ease;
}

.mp360-services__tab-index {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary-700);
  opacity: 0.65;
  transition: color 0.3s ease, opacity 0.3s var(--mp360-ease-ui), transform 0.3s var(--mp360-ease-ui);
}

.mp360-services__tab-name { display: block; }

@media (hover: hover) and (pointer: fine) {
  /* Hover comunica que el control es interactivo; NO cambia el servicio. */
  .mp360-services__tab:hover { border-color: var(--primary-700); }
}

.mp360-services__tab:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}

/* Estado activo: se transforma como los pasos de HowWeWork —cambia de
   superficie, invierte la tinta y desplaza el índice—, con la expansión sobre
   el eje que corresponde a esta composición. */
.mp360-services__tab.is-active {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: var(--white);
}

.mp360-services__tab.is-active .mp360-services__tab-index {
  color: var(--white);
  opacity: 1;
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Contenido del servicio activo
   -------------------------------------------------------------------------- */
.mp360-services__stage {
  grid-area: stage;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  min-height: 0;
  padding: var(--sv-pad);
  background: var(--white);
}

.mp360-services__media {
  position: relative;
  margin: 0;
  min-height: 0;
  border-radius: var(--radius-container);
  background: var(--neutral-200);
  overflow: hidden;
}

.mp360-services__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
  -webkit-user-drag: none;
  user-select: none;
}

.mp360-services__copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.mp360-services__index {
  font-size: 0.75rem;                /* 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--primary-700);
}

.mp360-services__name {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);   /* 18 → 24px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--neutral-950);
}

.mp360-services__desc {
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  color: rgba(21, 21, 21, 0.74);
  max-width: 56ch;
}

/* Copy.css compensa la máscara con `padding-bottom: 0.2em` y un margen
   negativo del mismo valor, para que una tilde o un descendente no queden
   recortados. Acá NO hace falta y además molesta: la máscara que arma
   SplitText 3.13 ya se dimensiona con la caja de línea completa —se comprobó
   con "Ápjgy qué páginas", que se ve entera—, y ese padding sobrante hacía
   que el bloque declarara 2-3px más de `scrollHeight` que de `clientHeight`.
   Alcanzaba para que apareciera una barra de scroll sin nada que scrollear.

   La clase sigue existiendo porque es el gancho por el que GSAP toma las
   líneas; simplemente no agrega geometría. */
.mp360-services__line { display: block; }

/* ==========================================================================
   Una columna con alto de sobra — la lista se pone vertical

   El carril horizontal esconde parte de los servicios detrás de un gesto. Se
   usa sólo cuando el alto no alcanza; con altura vertical de sobra los cinco
   tienen que verse juntos, que es de lo que trata esta superficie.
   ========================================================================== */
/* El umbral es de ALTO, no de orientación: lo que decide es si entran la
   cabecera, los cinco selectores y una imagen que siga siendo una imagen.
   Medido: por debajo de 800px la lista vertical deja la foto en una franja de
   ~115px, y ahí conviene más el carril con una foto grande. Un apaisado alto
   (899×800) también cumple el umbral y usa la lista. */
@media (min-height: 800px) {
  .mp360-services__tabs {
    flex-direction: column;
    overflow: visible;
    margin-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .mp360-services__tab { width: 100%; }
  .mp360-services__tab.is-active { padding-block: 0.9375rem; }
}

/* La introducción larga sólo entra en una columna cuando el alto es de
   verdad grande: si no, se come la imagen y deja los selectores sin aire.
   Cede ella, que es contenido progresivo; el detalle de cada servicio sigue
   estando en el activo.

   Dos condiciones, no una: el ancho de teléfono siempre, y la columna única
   sin alto de tablet. */
@media (max-width: 600px) {
  .mp360-services__summary { display: none; }
}

/* 899.98 y no 899: con `devicePixelRatio` fraccionario el ancho de layout cae
   en 899.2 y `max-width: 899px` deja de coincidir justo en el borde de
   `min-width: 900px`. El par tiene que cubrir el intervalo sin agujero. */
@media (max-width: 899.98px) and (max-height: 949px) {
  .mp360-services__summary { display: none; }
}

/* ==========================================================================
   Dos columnas — hay ancho y alto para que las dos zonas respiren
   ========================================================================== */
@media (min-width: 900px) and (min-height: 560px) {
  .mp360-services__dialog {
    width: min(80vw, 1180px);
    height: min(80dvh, 760px);
    grid-template-columns: 32% minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "intro bar"
      "intro stage";
  }

  .mp360-services__bar {
    background: var(--white);
    padding: 0.875rem 0.875rem 0;
  }

  .mp360-services__intro {
    padding: var(--sv-pad);
    gap: 1.5rem;
    border-right: 1px solid var(--sv-linea);
    overflow: hidden;
  }

  /* El título deja de crecer con el ancho: a 1280×720 la columna tiene que
     alojar además la introducción y los cinco selectores completos. */
  .mp360-services__title { font-size: clamp(1.25rem, 1.9vw, 1.75rem); }

  /* Lista vertical: cada selector ocupa el ancho de la columna y el activo
     expande su alto. Nunca scrollea: los cinco tienen que verse enteros. */
  .mp360-services__tabs {
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
    margin-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .mp360-services__tab { flex: 0 0 auto; width: 100%; }

  .mp360-services__tab.is-active { padding-block: 0.9375rem; }

  .mp360-services__stage { padding: 0.875rem 1.5rem 1.5rem; }
}

/* Dos columnas con la columna estrecha Y poco alto: ahí la introducción larga
   se convierte en un bloque de siete u ocho líneas dentro de 230px y empuja a
   los selectores fuera. Cede la introducción, no la navegación. A 1280×720 la
   columna mide 328px y sí entra: por eso la regla mira las dos medidas. */
@media (min-width: 900px) and (max-width: 1149.98px)
   and (min-height: 560px) and (max-height: 760px) {
  .mp360-services__summary { display: none; }
}

/* Alto de escritorio justo (1280×720 es el caso): se compacta DENTRO de la
   escala de espacio antes que aparecer un scroll. 16px entre la cabecera y los
   selectores sigue leyéndose como cambio de grupo frente a los 6-8px internos.
   El scroll de la cabecera queda igual como última red, no como estrategia. */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 819px) {
  .mp360-services__intro { padding: 1.25rem; gap: 1rem; }
  .mp360-services__tabs { gap: 0.375rem; }
}

/* Escritorio amplio: recién con alto de sobra el aire interno crece y el
   título recupera su escala mayor. A 1280×720 no hay ese margen. */
@media (min-width: 1280px) and (min-height: 820px) {
  .mp360-services { --sv-pad: 2rem; }
  .mp360-services__intro { gap: 2rem; }
  .mp360-services__title { font-size: 2rem; }
}

/* ==========================================================================
   Altura reducida / apaisado

   El alto es el recurso escaso. Cede primero el contenido progresivo
   (eyebrow, introducción), después la imagen. Nunca los controles ni el
   tamaño del texto que hay que leer.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 620px) {
  .mp360-services {
    --sv-pad: 0.875rem;
    padding: 0.5rem;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .mp360-services__dialog {
    width: min(96vw, 1180px);
    height: 100%;
    grid-template-columns: minmax(15rem, 38%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "intro bar"
      "intro stage";
    border-radius: var(--radius-container);
    clip-path: inset(0% 0% 0% 0% round var(--radius-container));
  }

  .mp360-services__bar { background: var(--white); padding: 0.5rem 0.5rem 0; }

  .mp360-services__intro {
    gap: 0.75rem;
    padding: var(--sv-pad);
    border-right: 1px solid var(--sv-linea);
    /* Único scroll intencional de la superficie en este contexto. */
    overflow-y: auto;
  }

  .mp360-services__eyebrow,
  .mp360-services__summary { display: none; }

  .mp360-services__title { font-size: 1rem; }

  .mp360-services__tabs {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    gap: 0.375rem;
    margin-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .mp360-services__tab {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }

  .mp360-services__stage { padding: 0.5rem var(--sv-pad) var(--sv-pad); gap: 0.625rem; }
  .mp360-services__name { font-size: 1.125rem; }
  .mp360-services__desc { font-size: 0.875rem; }
}

/* Apaisado muy corto: la imagen es lo primero que se reduce. */
@media (orientation: landscape) and (max-height: 430px) {
  .mp360-services__stage { grid-template-rows: minmax(0, 0.85fr) auto; }
  .mp360-services__title { font-size: 0.9375rem; }
}

/* ==========================================================================
   Vertical estrecho — la introducción larga cede y el carril se compacta
   ========================================================================== */
@media (orientation: portrait) and (max-height: 700px) {
  .mp360-services__summary { display: none; }
}

@media (max-width: 360px) {
  .mp360-services { --sv-pad: 1rem; }
  .mp360-services__tab { font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
}

/* ==========================================================================
   Movimiento reducido

   La superficie sigue siendo totalmente operable: aparece y desaparece sin
   máscaras, sin desplazamientos y sin escalas perceptibles.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mp360-services__dialog { clip-path: none !important; }
  .mp360-services__tab,
  .mp360-services__tab-index,
  .mp360-services__close,
  .mp360-services__img { transition: none !important; }
}

/* Ver mp360-superficie.css: al abrir, el foco entra al diálogo, y el diálogo
   no lleva anillo. El anillo es del botón de cierre cuando se llega con Tab. */
.mp360-services:focus,
.mp360-services:focus-visible { outline: none; }