/* ============================================================================
   TamarindoTree — Coming Soon
   Tokens del sistema de marca. Documentación interna en BRAND-TOKENS.md.
   ========================================================================= */

:root {
  /* Escala Deep Ink */
  --ink-900: #101c2b;
  --ink-700: #29445f;

  /* Azules */
  --civic-blue: #1d5572;
  --blue-700: #0077a8; /* tono accesible de interacción */

  /* Superficies frías */
  --ice: #eaf4f7;
  --product-ice: #f3f8fa;
  --ice-deep: #e2eef3;

  /* Firma */
  --solar-yellow: #ffc400;

  /* Neutrales */
  --neutral-700: #3d4d5a;
  --neutral-300: #b8c4cd;
  --white: #ffffff;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  /* Evita el ajuste automático de iOS al rotar. */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  font-family: "Poppins", "Century Gothic", "Avenir Next", "Segoe UI",
    system-ui, sans-serif;
  color: var(--ink-900);
  background: var(--ice);
  /* Luz central: 60–70 % de superficie clara y fría. */
  background-image:
    radial-gradient(78% 62% at 50% 38%, var(--white) 0%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(152deg, var(--ice) 0%, var(--product-ice) 48%, var(--ice-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

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

/* --- Estructura ---------------------------------------------------------- */

.page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top) + clamp(1.5rem, 5vh, 3.5rem))
    calc(env(safe-area-inset-right) + clamp(1.25rem, 5vw, 4rem))
    calc(env(safe-area-inset-bottom) + clamp(1.5rem, 5vh, 3.5rem))
    calc(env(safe-area-inset-left) + clamp(1.25rem, 5vw, 4rem));
}

.stage {
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
}

.art {
  width: clamp(9.5rem, 34vw, 17rem);
  flex: none;
}

.art img {
  width: 100%;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* --- Logotipo ------------------------------------------------------------ */

.lockup {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.lockup img {
  /* El wordmark es artwork vectorial: se dimensiona por ancho y nunca se
     recompone escribiendo el nombre con una fuente. */
  width: clamp(15rem, 78vw, 34rem);
}

/* --- Pilares ------------------------------------------------------------- */

.pillars {
  margin: clamp(1.1rem, 2.6vh, 1.7rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: clamp(0.62rem, 1.12vw + 0.34rem, 0.8rem);
  letter-spacing: 0.19em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--neutral-700);
}

.sep {
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.95em;
  border-radius: 50%;
  background: var(--solar-yellow);
  flex: none;
}

/* --- Mensaje de lanzamiento ---------------------------------------------- */

.launch {
  margin: clamp(1.2rem, 3.4vh, 2.4rem) 0 0;
  font-weight: 300;
  font-size: clamp(2.35rem, 7.4vw + 0.4rem, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-align: center;
}

.launch-a {
  color: var(--ink-900);
}

/* Blue 700 sobre superficie clara: tono accesible de interacción.
   Sin excepciones de contraste. */
.launch-b {
  color: var(--blue-700);
  white-space: nowrap;
}

.dots {
  letter-spacing: 0.02em;
}

/* --- Firma --------------------------------------------------------------- */

/* Único acento de peso en la página, externo y omitible: la misma regla que
   gobierna la variante Signature del logo. */
.signature {
  display: block;
  margin-top: clamp(1.4rem, 3.6vh, 2.6rem);
  width: clamp(3.25rem, 7vw, 4.75rem);
  height: 4px;
  border-radius: 2px;
  background: var(--solar-yellow);
}

/* ==========================================================================
   Composición por viewport. Cada uno se resuelve de forma nativa; la página
   no es un póster escalado.
   ========================================================================== */

/* Apaisado amplio: el árbol toma columna propia y el bloque de marca se
   alinea a la izquierda. */
@media (min-width: 62rem) and (orientation: landscape) {
  .stage {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .art {
    width: clamp(15rem, 27vw, 24rem);
  }

  .brand {
    align-items: flex-start;
    width: auto;
  }

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

  .lockup img {
    width: clamp(20rem, 38vw, 33rem);
  }

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

  .launch {
    text-align: left;
  }
}

/* A partir de aquí la línea de pilares cabe entera en una sola fila. */
@media (min-width: 80rem) {
  .sep-break {
    /* nada: el separador central se comporta como los demás */
  }
}

/* Por debajo de 80rem la línea se reparte en dos filas de dos. El separador
   central se convierte en salto de flexbox, de modo que nunca queda un punto
   amarillo huérfano al principio de una línea. */
@media (max-width: 79.99rem) {
  .sep-break {
    width: 100%;
    height: 0;
    margin: 0;
    background: none;
    border-radius: 0;
  }
}

/* Apaisado de poca altura: se comprime el ritmo vertical. */
@media (orientation: landscape) and (max-height: 30rem) {
  .art {
    width: clamp(7rem, 17vh, 11rem);
  }

  .lockup img {
    width: clamp(14rem, 46vw, 24rem);
  }

  .launch {
    font-size: clamp(1.8rem, 9vh, 3rem);
    margin-top: clamp(0.7rem, 2.6vh, 1.2rem);
  }

  .pillars {
    margin-top: clamp(0.6rem, 2.2vh, 1rem);
  }

  .signature {
    margin-top: clamp(0.8rem, 3vh, 1.4rem);
  }

  .stage {
    gap: clamp(1.25rem, 4vw, 2.5rem);
  }
}

/* --- Preferencias del sistema -------------------------------------------- */

@media (prefers-contrast: more) {
  .pillars {
    color: var(--ink-900);
  }

  .launch-b {
    color: var(--civic-blue);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .art,
  .lockup,
  .pillars,
  .launch,
  .signature {
    animation: rise 0.9s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  .lockup {
    animation-delay: 0.08s;
  }
  .pillars {
    animation-delay: 0.16s;
  }
  .launch {
    animation-delay: 0.24s;
  }
  .signature {
    animation-delay: 0.34s;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(0.7rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}