/* CONNI — Web preapertura */

@font-face {
  font-family: "TeX Gyre Heros Cn";
  src: url("fonts/texgyreheroscn-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --gris: #b6b6b6;
  --azul: #0642d6;
  --amarillo: #ebe928;
  --negro: #000;
  --blanco: #f7f7f7;

  /* Desktop (diseño base 1440 × 900) */
  --pad: 34px;
  --marquee-top: 42px;
  --marquee-h: 54px;
  --marquee-right: 54px;
  --status-scale: 1;
  --status-bottom: 36px;
  --sticker-w: 103px;
  --sticker-right: 78px;
  --sticker-bottom: 36px;
  --sticker-gap: 12.26px;
  --logo-w: clamp(320px, 37.77vw, 760px);
  --plaza-w: clamp(520px, 60.7vw, 1100px);

  /* Cintas "Todo lo que necesitás / y algo más" */
  --todo-x: 63.24%; --todo-y: 98.45%; --todo-rot: -9deg;
  --mas-x: 76.11%;  --mas-y: 119.34%; --mas-rot: 2deg;
}

@media (max-width: 767px) {
  :root {
    /* Mobile (diseño base 390 × 844) */
    --pad: 18px;
    --marquee-top: 26px;
    --marquee-h: 43px;
    --marquee-right: 18px;
    --status-scale: .79; /* 11.06px de alto en el diseño mobile */
    --status-bottom: 63px;
    --sticker-w: 76px;
    --sticker-right: 20px;
    --sticker-bottom: 59px; /* 12px más arriba que en el diseño original (47px) */
    --sticker-gap: 9.05px;
    --logo-w: min(calc(100vw - 68px), 420px);
    --plaza-w: min(76.3vw, 380px);

    --todo-x: 66.74%; --todo-y: 106.7%; --todo-rot: -15deg;
    --mas-x: 78.5%;   --mas-y: 129.8%;  --mas-rot: 7deg;
  }
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--gris);
  color: var(--negro);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip; /* evita que el navegador desplace el escenario al enfocar */
  background: var(--gris);
}

/* ---------- Cinta superior ---------- */
.marquee {
  position: absolute;
  top: var(--marquee-top);
  left: var(--pad);
  right: var(--marquee-right, var(--pad));
  height: var(--marquee-h);
  border: 1px solid var(--negro);
  overflow: hidden;
}

.marquee__track {
  position: absolute;
  top: calc((var(--marquee-h) - 2px - 16.13px) / 2);
  left: 13px;
  display: flex;
  gap: 86.65px; /* paso de 479px entre secuencias, como en Figma */
  animation: marquee 9s linear infinite;
  will-change: transform;
}

.marquee__track img { width: 392.35px; height: 16.13px; flex: none; }

@keyframes marquee {
  to { transform: translateX(-479px); }
}

/* ---------- Vistas centrales ---------- */
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s;
}

.view--plaza { gap: 27px; padding-top: 4vh; }

.stage[data-state="logo"] .view--plaza,
.stage[data-state="plaza"] .view--logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.stage[data-state="logo"] .view--plaza { transform: translateY(24px); }
.stage[data-state="plaza"] .view--logo { transform: scale(.94); }

.stage[data-state="logo"] .view--logo,
.stage[data-state="plaza"] .view--plaza {
  transition-delay: .12s, .12s, 0s;
}

/* Logo + cintas */
.logo {
  position: relative;
  width: var(--logo-w);
  aspect-ratio: 543.927 / 134.073;
}

.logo__img {
  position: absolute;
  inset: -1.25% -0.31%;
  width: 100.62%;
  height: 102.5%;
}

.cinta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: var(--ar);
  background: var(--azul);
  border: 1px solid #0f0f0f;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(.6);
  opacity: 0;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease;
}

.cinta img {
  position: absolute;
  left: -1px; top: -1px;
  width: 100%; height: 100%;
}

.cinta--todo { --x: var(--todo-x); --y: var(--todo-y); --rot: var(--todo-rot); --w: 54%; --ar: 293.7 / 38.5; }
.cinta--mas  { --x: var(--mas-x);  --y: var(--mas-y);  --rot: var(--mas-rot);  --w: 27.1%; --ar: 147.4 / 38.5; transition-delay: .08s; }

.logo.is-open .cinta { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }

@media (hover: hover) {
  .logo:hover .cinta { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
}

/* La plaza */
.plaza__img { width: var(--plaza-w); height: auto; }

.map-btn {
  display: flex;
  align-items: center;
  gap: 10.44px;
  height: 48px;
  padding: 0 22px 0 22.44px;
  border: 1px solid var(--negro);
  text-decoration: none;
  transition: background-color .2s ease;
}
.map-btn:hover { background: var(--amarillo); }
.map-btn__label { width: 97.12px; height: 20px; }
.map-btn__arrow { width: 14px; height: 14px; transition: transform .2s ease; }
.map-btn:hover .map-btn__arrow { transform: translate(2px, -2px); }

/* ---------- Estado de obra ---------- */
/* Diseño: punto de 14px, texto TeX Gyre Heros Cn Bold 16px, −4%, a 23px del borde */
.status {
  --u: calc(var(--status-scale) * 1px);
  position: absolute;
  left: var(--pad);
  bottom: var(--status-bottom);
  margin: 0;
  height: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-family: "TeX Gyre Heros Cn", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0f0f0f;
  white-space: nowrap;
}

.status__dot {
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--amarillo);
  border: 1px solid #0f0f0f;
}

/* Ventana del "tren": las dos frases ocupan la misma celda, el ancho
   lo define la más larga, así el área de hover no cambia. */
.status__window {
  display: grid;
  overflow: hidden;
  padding-bottom: calc(1.3 * var(--u)); /* centra las mayúsculas con el punto, como en Figma */
}

.status__text {
  grid-area: 1 / 1;
  display: block;
}

/* Táctil / mobile: estático, solo "EN OBRA" */
.status__text--tren { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .status__text--tren {
    display: block;
    transform: translateX(105%);
  }

  .status__text {
    transition: transform 250ms cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
  }

  .status:hover .status__text--rest { transform: translateX(-105%); }
  .status:hover .status__text--tren { transform: translateX(0); }

  /* Movimiento reducido: cambia el texto sin desplazamiento */
  @media (prefers-reduced-motion: reduce) {
    .status__text { transition: none; }
    .status__text--tren { transform: none; opacity: 0; }
    .status:hover .status__text--rest { transform: none; opacity: 0; }
    .status:hover .status__text--tren { opacity: 1; }
  }
}

/* ---------- Sticker / carita ---------- */
.sticker {
  position: absolute;
  right: var(--sticker-right);
  bottom: var(--sticker-bottom);
  width: var(--sticker-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sticker-gap);
}

@media (max-width: 767px) {
  .sticker { flex-direction: column-reverse; }
  .view--logo { padding-bottom: 35px; }
  .view--plaza { padding-top: 0; padding-bottom: 50px; }
}

.sticker__label { width: 72.5%; height: auto; }

.face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 103 / 98.095;
  background: var(--amarillo);
  border: 1.2px solid var(--negro);
  transition: transform .15s ease;
  animation: pulse 2.6s steps(1, end) infinite 2.8s;
}
.sticker:hover .face { transform: rotate(-4deg); }
.sticker:active .face { transform: scale(.94); }

.face__eyes {
  position: absolute;
  left: 14.52%; right: 14.52%;
  top: 15.78%; bottom: 47.25%;
  width: 70.96%; height: 36.97%;
}
.face__wink {
  position: absolute;
  left: 14.52%;
  top: 15.78%;
  width: 33.88%; height: 36.97%;
  display: none;
}
.face__mouth,
.face__lid {
  position: absolute;
  width: 29.04%;
  height: 12.13%;
  background: var(--negro);
}
.face__mouth { left: 35.64%; top: 72%; }
.face__lid   { left: 56.22%; top: 40.54%; display: none; }

/* Guiño cuando está activo */
.sticker[aria-pressed="true"] .face__eyes { display: none; }
.sticker[aria-pressed="true"] .face__wink,
.sticker[aria-pressed="true"] .face__lid { display: block; }

.stage.has-played .face { animation: none; }

@keyframes pulse {
  0%   { background: var(--amarillo); }
  12%  { background: var(--blanco); }
  24%  { background: var(--amarillo); }
  36%  { background: var(--blanco); }
  48%  { background: var(--amarillo); }
}

/* ---------- Persiana ---------- */
.shutter {
  position: absolute;
  inset: 0;
  z-index: 10;
  background:
    linear-gradient(rgba(6, 6, 6, .18), rgba(6, 6, 6, .18)) bottom / 100% 22px no-repeat,
    repeating-linear-gradient(
      to bottom,
      transparent 0 58px,
      rgba(6, 6, 6, .27) 58px 60px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 60px,
      rgba(245, 245, 245, .17) 60px 61px
    ) 0 2px,
    var(--azul);
  transform: translateY(0);
  cursor: pointer;
}

.shutter__handle {
  position: absolute;
  left: 50%;
  bottom: 75px;
  width: 54px;
  height: 10px;
  margin-left: -27px;
  background: var(--amarillo);
  border: 1.3px solid #060606;
  border-radius: 4px;
}

.shutter.is-up {
  transform: translateY(-101%);
  transition: transform 1.7s cubic-bezier(.6, 0, .25, 1);
}

.shutter.is-gone { display: none; }

/* Pequeño tirón antes de subir */
.shutter.is-tug { animation: tug .35s ease; }
@keyframes tug {
  50% { transform: translateY(14px); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .face { animation: none; }
  .shutter.is-up { transition-duration: .01s; }
  .view, .cinta { transition-duration: .01s; }
}