/* MP360 · Jacarandá — Entrada (precarga + hero)
 *
 * Portado literal desde el proyecto de referencia:
 *   src/app/globals.css        -> tokens, reset y tipografía
 *   src/app/preloader.css      -> .loader completo
 *   src/app/index.css          -> .hero, .hero-bg, .hero-gradient, .hero-content, .hero-tagline
 *   src/components/AnimatedButton/AnimatedButton.css -> .btn, .circle, .icon, .button-text
 *   src/components/Copy/Copy.css                     -> .line
 *
 * Único cambio de geometría respecto de la referencia, y está señalado en su lugar:
 *   .hero pasa de 135svh a 100svh (hero recortado, sin scroll ni stats).
 *   .btn ensancha su width para que "Comenzar experiencia" no invada el círculo.
 * Todo lo demás (proporciones, colores, transiciones, easings) queda igual.
 *
 * Las reglas van dentro de #mp360-intro para no filtrarse al resto de la capa MP360.
 * El scope no altera geometría: son las mismas reglas con un ancestro.
 */

#mp360-intro {
  /* --- globals.css :root --- */
  --base-100: rgb(242, 237, 230);
  --base-200: rgb(204, 200, 194);
  --base-250: rgb(179, 167, 152);
  --base-300: rgb(153, 143, 130);
  --base-350: rgb(128, 119, 108);
  --base-400: rgb(102, 95, 86);
  --base-450: rgb(31, 29, 29);
  --base-500: rgb(20, 19, 19);

  /* --- Design System Jacarandá: tokens usados por el CTA --- */
  --primary-700: #4742A1;
  --primary-800: #332F7B;
  --primary-900: #221E56;
  --primary-950: #15123C;
  --white: #FFFFFF;
  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-badge: var(--radius-control);
  --radius-tooltip: var(--radius-compact);
  /* Contorno anidado del Design System: el bloque del ícono vive dentro del
     control con 2.4px de aire, así que su radio es
     max(--radius-compact, --radius-control - 2.4px) = 6px.
     No es un círculo. */
  --radius-control-inner: var(--radius-compact);

  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  /* Design System: el oscuro de la escala primaria reemplaza al negro de la
     plantilla. Igual que el de los bloques, para que no se vea la costura. */
  background-color: var(--primary-950);
}

#mp360-intro[hidden] { display: none !important; }

/* --- globals.css: reset --- */
#mp360-intro *,
#mp360-intro *::before,
#mp360-intro *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

#mp360-intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* --- globals.css: tipografía --- */
#mp360-intro h1 {
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: -0.25rem;
  line-height: 1.05;
}

#mp360-intro p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

#mp360-intro .container {
  width: 100%;
  height: 100%;
  padding: 2rem;
  max-width: 2000px;
  margin: 0 auto;
}

@media (max-width: 1000px) {
  #mp360-intro h1 {
    font-size: 3rem;
    letter-spacing: -0.1rem;
  }

  #mp360-intro .container {
    padding: 1rem;
  }
}

/* ==========================================================================
   preloader.css — portado literal
   ========================================================================== */

#mp360-intro .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  z-index: 100000;
  pointer-events: all;
}

#mp360-intro .loader .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  color: var(--base-100);
}

#mp360-intro .loader .block {
  width: 100%;
  height: 100%;
  background: var(--primary-950);
}

/* CAUSA DEL CORTE DE "El Ceibal" EN MOVIL

   El bloque es `position: absolute` con `left: 50%`. Para un elemento
   absoluto sin ancho declarado, el ancho disponible es lo que queda del
   bloque contenedor A PARTIR de ese `left`: la mitad del viewport. El
   `translateX(-50%)` lo recoloca visualmente, pero no le devuelve el ancho.
   A 390px eso son 195px para un par que necesita ~300: "El Ceibal" partia.

   `width: max-content` lo desata del 50% y lo dimensiona por su contenido.
   `max-width` con el margen seguro impide que se salga a anchos minimos, y el
   `clamp` del titular hace que baje de tamano de forma fluida, los DOS lados
   por igual, en vez de partir uno. */
#mp360-intro .loader .intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

#mp360-intro .loader #word-1 {
  position: relative;
  left: 0rem;
  padding-right: 0.25rem;
  color: var(--base-100);
}

#mp360-intro .loader #word-2 {
  position: relative;
  left: 0.5rem;
  padding-right: 0.25rem;
  color: var(--base-100);
}

/* Una sola linea SIEMPRE, y la escala baja de forma fluida para los dos
   lados a la vez: mismo tamano, mismo peso, mismo eje optico. Achicar solo el
   derecho esconderia el problema en vez de resolverlo. */
#mp360-intro .loader .word h1 {
  font-size: clamp(1.25rem, 7.4vw, 2rem);
  color: var(--white);
  letter-spacing: -0.05rem;
  white-space: nowrap;
}

#mp360-intro .loader .divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center top;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.125);
}

#mp360-intro .loader .spinner-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

#mp360-intro .loader .spinner {
  width: 50px;
  height: 50px;
  border: 1.4px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  animation: mp360-intro-spin 1s linear infinite;
}

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

#mp360-intro .loader .counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#mp360-intro .loader .count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

#mp360-intro .loader .digit {
  flex: 1;
  padding-top: 1rem;
}

#mp360-intro .loader .count .digit h1 {
  font-size: 15rem;
  font-weight: 400;
  color: var(--white);
}

#mp360-intro .loader .line,
#mp360-intro .loader .word,
#mp360-intro .loader .count .digit {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

#mp360-intro .loader .line h1,
#mp360-intro .loader .line p,
#mp360-intro .loader .count .digit h1 {
  position: relative;
  transform: translateY(120%);
  will-change: transform;
}

#mp360-intro .loader #word-1 h1 {
  transform: translateY(-120%);
}

#mp360-intro .loader #word-2 h1 {
  transform: translateY(120%);
}

#mp360-intro .loader .block {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#mp360-intro .loader .divider {
  transform: scaleY(0%);
  will-change: transform;
}

@media (max-width: 1000px) {
  #mp360-intro .loader .counter .count .digit h1 {
    font-size: 7rem;
  }

  #mp360-intro .loader .counter .count .digit {
    padding-top: 0.25rem;
  }
}

/* ==========================================================================
   index.css — hero. Sólo las reglas del hero; sin stats ni secciones.
   ========================================================================== */

#mp360-intro .hero {
  position: relative;
  width: 100vw;
  /* referencia: 135svh, pensada para hacer scroll hacia las stats.
     Acá el hero es la única pantalla y no debe haber scroll. */
  height: 100svh;
  overflow: hidden;
  background-color: #d3cec5;
}

#mp360-intro .hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Capa de contraste (agregada, no estaba en la referencia).
   Vignette elíptica concentrada donde viven título y bajada. El centro va al
   45 % de la altura, no al 50 %: el bloque de texto se apoya por encima del
   centro geométrico porque el botón ocupa la mitad inferior del contenido.
   Se funde a transparente antes de llegar a los bordes, así la foto aérea
   conserva su luminosidad; el borde superior queda en alfa 0.
   No hay caja, blur ni panel: es una sola capa de color.
   Va en z-index 1: por encima de la imagen y por debajo del degradado
   inferior (2) y del contenido (3). No participa de ninguna animación. */
#mp360-intro .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 38% at 50% 45%,
    rgba(21, 21, 21, 0.74) 0%,
    rgba(21, 21, 21, 0.64) 32%,
    rgba(21, 21, 21, 0.39) 62%,
    rgba(21, 21, 21, 0.16) 82%,
    rgba(21, 21, 21, 0) 100%
  );
}

#mp360-intro .hero .hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50svh;
  /* mismo degradado de la referencia, con el oscuro unificado en #151515 */
  background: linear-gradient(
    360deg,
    rgba(21, 21, 21, 1) 0%,
    rgba(21, 21, 21, 0) 100%
  );
  z-index: 2;
}

#mp360-intro .hero .hero-content {
  position: absolute;
  top: 50svh;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Design System: blanco puro. Reemplaza el crema de la plantilla. */
  color: var(--white);
  text-align: center;
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  /* el contenido tiene que recibir el puntero: el CTA vive acá */
  z-index: 3;
}

#mp360-intro .hero .hero-tagline {
  width: 40%;
  color: var(--white);
}

/* Bajada: es el texto que peor competía con la foto. Blanco puro, un peso
   más y un cuerpo levemente mayor. La sombra es amplia y de baja opacidad:
   despega el texto del fondo sin dibujar un borde ni una caja. */
#mp360-intro .hero .hero-tagline p {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 28px rgba(21, 21, 21, 0.55);
}

@media (max-width: 1000px) {
  #mp360-intro .hero .hero-content {
    width: 100%;
  }

  #mp360-intro .hero .hero-tagline {
    width: 75%;
  }

  /* En mobile el bloque de texto ocupa más proporción del ancho y el título
     pasa a dos líneas: la elipse se ensancha y se refuerza el núcleo. Los
     valores salen de medir contraste sobre los píxeles reales de la foto. */
  #mp360-intro .hero::before {
    background: radial-gradient(
      ellipse 66% 40% at 50% 45%,
      rgba(21, 21, 21, 0.85) 0%,
      rgba(21, 21, 21, 0.75) 32%,
      rgba(21, 21, 21, 0.5) 62%,
      rgba(21, 21, 21, 0.27) 82%,
      rgba(21, 21, 21, 0) 100%
    );
  }

  #mp360-intro .hero .hero-tagline p {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   CTA de la entrada
   El componente vive en assets/css/mp360-cta.css y lo comparten los tres CTA.
   Acá quedan sólo el ancho, el aire y los colores de esta jerarquía.
   ========================================================================== */

#mp360-intro .btn {
  margin: 1rem 0;
  /* Design System: superficie del control. Reemplaza el crema de la plantilla.
     Al ser opaca, el backdrop-filter de la referencia ya no aporta nada. */
  background: var(--white);
}

#mp360-intro .btn .circle { background: var(--primary-700); }
#mp360-intro .btn .icon { color: var(--white); }
#mp360-intro .btn .button-text { color: var(--primary-700); }

#mp360-intro .btn:hover .button-text,
#mp360-intro .btn:focus-visible .button-text { color: var(--white); }

/* ==========================================================================
   Copy.css — portado literal
   ========================================================================== */

#mp360-intro .line {
  position: relative;
  transform: translateY(100%);
  will-change: transform;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}