@font-face {
  font-family: "Grantha Sangam MN";
  src: url("../assets/fonts/grantha-sangam-mn-regular.otf?v=2") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Grantha Sangam MN";
  src: url("../assets/fonts/grantha-sangam-mn-bold.otf?v=2") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/*
  Colores medidos sobre el diseño exportado de Illustrator.
  C4 M6 Y10 K0 con el perfil CMYK del documento = #F4ECE1
  (la conversión "matemática" sin perfil daría #F5F0E6, más fría).
*/
:root {
  --bg: #F4ECE1;
  --strip: rgb(251, 246, 242);        /* franja del logo: tinte cálido en multiplicar */
  --text: #5A564F;                    /* tagline + coming soon */
  --ink: #0B0706;                     /* built to make an impact + menú */
  --lang: #FFFBF2;

  /* Lienzo 16:9 que escala completo: 1u = 1/100 del ancho del diseño (16px @ 1600) */
  --cw: min(100vw, 177.78vh);
  --u: calc(var(--cw) / 100);
  --side: calc((100vw - var(--cw)) / 2);   /* espacio sobrante en pantallas ultra anchas */

  --bar-h: calc(var(--u) * 3.625);          /* 58px @ 1600 */
  --pad: max(12px, calc(var(--u) * 1.5625)); /* 25px @ 1600 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Grantha Sangam MN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- Barra superior ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0;
  height: var(--bar-h);
  min-height: 40px;
  background: #000;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: calc(var(--side) + var(--u) * 11);
  z-index: 10;
}
.lang {
  display: flex; align-items: center; gap: 1.1em;
  font-size: max(11px, calc(var(--u) * 1.05));
  letter-spacing: .18em;
  color: var(--lang);
}
.lang span { opacity: .8; }
.lang button { all: unset; cursor: pointer; opacity: .7; transition: opacity .2s; padding: .6em 0; }
.lang button:hover, .lang button[aria-current="true"] { opacity: 1; }
.lang button:focus-visible { outline: 1px solid var(--lang); outline-offset: 4px; }

/* ---------- Escenario ---------- */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Marco de la foto */
.frame {
  position: absolute;
  top: calc(max(var(--bar-h), 40px) + var(--pad));
  bottom: var(--pad);
  left: var(--pad); right: var(--pad);
  background: var(--bg);
  isolation: isolate;          /* la fusión solo actúa contra el fondo del marco */
  overflow: hidden;
}
.frame img {
  position: absolute;
  /* Encuadre del diseño: foto ampliada, cono grande abajo a la izquierda,
     el hilo cruza a la altura de COMING SOON */
  width: 124%; max-width: none; height: auto;
  left: 50%; top: 57.7%;
  transform: translate(-40.5%, -35%);
  filter: blur(calc(var(--u) * .6));
  mix-blend-mode: luminosity;  /* Modo de fusión: Luminosidad */
  opacity: .2;                 /* 20% */
}

/* Lienzo 16:9 centrado: todas las posiciones en % del diseño original */
.canvas {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--cw);
  aspect-ratio: 16 / 9;
  /* sin transform ni z-index: así la franja puede fusionarse con la foto de abajo */
  margin: calc(var(--cw) * -9 / 32) 0 0 calc(var(--cw) / -2);
}

.tagline {
  position: absolute;
  left: 31.7%; top: 15.2%;
  font-size: calc(var(--u) * 1.45);
  line-height: 1.82;
  letter-spacing: .32em;
  z-index: 3;
}

.soon {
  position: absolute;
  left: 57.4%; top: 51.5%;
  font-size: calc(var(--u) * 3.05);
  line-height: 1.3;
  letter-spacing: .38em;
  font-weight: 400;
  z-index: 3;
}

.logo {
  position: absolute;
  left: 45%; width: 8.94%;
  top: 70.9%;
}
.logo svg { position: relative; width: 100%; height: auto; display: block; }
/* Franja vertical clara: sale del logo hacia arriba hasta la barra */
.logo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 200vh;
  background: var(--strip);
  mix-blend-mode: multiply;   /* deja ver la foto a través, como en el diseño */
}

.footer {
  position: absolute;
  left: 0; right: 0;
  top: 89%;
  text-align: center;
  transform: translateX(-0.5%);   /* centrado sobre el logo */
  z-index: 3;
  color: var(--ink);
}
.impact {
  font-weight: 700;
  font-size: calc(var(--u) * .95);
  letter-spacing: .2em;
  margin-bottom: .8em;
}
.nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0 .5em;
  font-size: calc(var(--u) * .86);
  letter-spacing: .22em;
}
.nav a { transition: opacity .2s; }
.nav a:hover { opacity: .55; }

.mickey {
  position: absolute;
  display: block; height: auto;
  width: calc(var(--u) * 14.06);
  right: calc(var(--side) + var(--u) * 4.375);
  bottom: calc(var(--u) * -2);
  mix-blend-mode: multiply;
  opacity: .25;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Tablet vertical y móvil: composición apilada ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  :root {
    --u: 1vw;
    --side: 0px;
    --bar-h: 48px;
    --pad: clamp(12px, 3vw, 28px);
  }
  .bar { justify-content: center; padding-right: 0; }
  .lang { font-size: clamp(11px, 2vw, 15px); gap: .8em; }

  .stage { height: auto; min-height: 100svh; }

  .frame { top: calc(var(--bar-h) + var(--pad)); }
  .frame img {
    width: 100%; height: 100%;
    left: 0; top: 0; transform: none;
    object-fit: cover;
    object-position: 15% 45%;
    filter: blur(4px);
  }

  .canvas {
    position: relative;
    left: auto; top: auto; margin: 0;
    width: auto; aspect-ratio: auto;
    min-height: 100svh;
    padding: calc(var(--bar-h) + var(--pad) + 8vh) calc(var(--pad) + 6vw) calc(var(--pad) + 5vh);
    display: flex; flex-direction: column; align-items: center;
  }
  .tagline, .soon, .logo, .footer { position: relative; left: auto; top: auto; transform: none; }

  .tagline {
    align-self: flex-start;
    font-size: clamp(15px, 3.4vw, 26px);
  }
  .soon {
    align-self: flex-end;
    font-size: clamp(28px, 7.4vw, 60px);
    margin: auto 0;
    padding: 6vh 0;
  }
  .logo { width: clamp(110px, 24vw, 190px); }
  .footer { width: 100%; margin-top: clamp(24px, 4vh, 44px); }
  .impact { font-size: clamp(12px, 2.4vw, 17px); }
  .nav { font-size: clamp(10px, 2.2vw, 15px); letter-spacing: .16em; line-height: 2.1; }
  /* en móvil el menú puede saltar de línea: sin separadores | para que no queden colgando */
  .nav { gap: 0 1.3em; }
  .nav .sep { display: none; }

  .mickey {
    width: clamp(140px, 34vw, 280px);
    right: -8vw;
    bottom: calc(clamp(140px, 34vw, 280px) * -.25);
  }
}

/* Móvil pequeño: menos espaciado para que COMING/BIENTÔT quepa */
@media (max-width: 380px) {
  .soon { letter-spacing: .3em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}