/* ── Página "Under construction" ─────────────────────────────────────────
   Medidas sacadas de PAGINA ARTE/arte .pdf (lienzo 1440 × 935).
   1u = 1 punto del PDF. Todo se escala con --u.
   Logo, "Under", contacto y cintas son los vectores del PDF exportados con
   herramientas/extraer_construccion.py. "construction" es texto vivo en Atyp:
   OJO, fuente de prueba, no subir a servidor (ver fuentes/LEER-ANTES-DE-SUBIR.md). */

@font-face{
  font-family:'Atyp';
  src:url('../fuentes/AtypTEST-Variable.ttf') format('truetype-variations');
  font-weight:40 160;
  font-display:swap;
}

:root{
  --fondo:#a3c0ff;
  --amarillo:#f9e200;
  --violeta:#5d29ff;
  --u:min(calc(100vw / 1440), calc(100svh / 935));
  --ut:max(var(--u), calc(100vw / 1440));   /* las cintas siempre cubren el ancho */
  --giro-pegatina:10.61deg;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--fondo)}
body{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:none}

.uc{
  position:relative;
  min-height:100vh;min-height:100svh;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(112.6 * var(--u)) 16px calc(263.1 * var(--ut));
}
.uc-contenido{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}

.uc-titulo{margin:0;display:flex;flex-direction:column;align-items:center;font-size:inherit}

.uc-logo{width:calc(180.2 * var(--u));height:auto;animation:entra-baja .7s .05s both cubic-bezier(.2,.8,.2,1)}
.uc-under{
  width:calc(428.6 * var(--u));height:auto;
  margin-top:calc(39.8 * var(--u));
  transform:translateX(calc(-5.8 * var(--u)));
  animation:entra-sube .8s .2s both cubic-bezier(.2,.8,.2,1);
}

/* Pegatina amarilla */
.uc-pegatina-hueco{
  position:relative;display:block;
  width:calc(540 * var(--u));height:calc(192 * var(--u));
  margin-top:calc(9.1 * var(--u));
}
.uc-pegatina{
  --dx:0px;--dy:0px;--gira:0deg;
  position:absolute;left:50%;top:50%;
  width:calc(530.6 * var(--u));height:calc(101.4 * var(--u));
  margin:calc(-50.7 * var(--u)) 0 0 calc(-265.3 * var(--u));
  transform:translate(var(--dx),var(--dy)) rotate(calc(var(--giro-pegatina) + var(--gira)));
  transition:transform .6s cubic-bezier(.34,1.8,.5,1), filter .3s;
  cursor:grab;touch-action:none;user-select:none;
  animation:pega .6s .55s both cubic-bezier(.3,1.6,.5,1);
}
.uc-pegatina svg{display:block;width:100%;height:100%;overflow:visible}
.uc-pegatina text{
  font-family:'Atyp','Segoe UI',Arial,sans-serif;
  font-size:76.63px;font-weight:160;
  font-variation-settings:'wght' 160,'ital' 0;
  fill:var(--violeta);
}
.uc-pegatina:hover{filter:drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(40,20,140,.18))}
.uc-pegatina.agarrada{
  cursor:grabbing;transition:filter .3s;
  filter:drop-shadow(0 calc(22 * var(--u)) calc(24 * var(--u)) rgba(40,20,140,.28));
}
.uc-pegatina.sello{animation:sello .5s cubic-bezier(.3,1.6,.5,1)}

/* Contacto */
.uc-contacto{
  margin:calc(47.4 * var(--u)) 0 0;
  display:flex;align-items:flex-start;justify-content:center;
  gap:calc(35.7 * var(--u));
  animation:entra-sube .7s .85s both ease-out;
}
.uc-contacto a{display:block;border-radius:6px;transition:transform .25s, opacity .25s}
.uc-contacto a:hover{transform:translateY(-2px);opacity:.85}
.uc-contacto a:focus-visible{outline:2px solid #fff;outline-offset:6px}
.uc-tel{margin-top:calc(1.3 * var(--u))}
.uc-tel img{width:calc(258.4 * var(--u));height:auto}
.uc-mail img{width:calc(341 * var(--u));height:auto}

/* Cintas: la banda arranca en y=666.5 del PDF y llega al pie del lienzo */
.uc-cintas{
  position:absolute;z-index:1;
  left:50%;bottom:0;
  width:calc(1440 * var(--ut));height:calc(268.5 * var(--ut));
  margin-left:calc(-720 * var(--ut));
}
.uc-cinta{
  --px:0px;--py:0px;
  position:absolute;height:auto;cursor:pointer;
  transform:translate(var(--px),var(--py));
  -webkit-user-drag:none;user-select:none;
}
.c1{left:calc(-35 * var(--ut));top:0;width:calc(1522.7 * var(--ut));animation:cinta-izq .9s .35s both cubic-bezier(.2,.8,.2,1)}
.c2{left:calc(-44.8 * var(--ut));top:calc(28.3 * var(--ut));width:calc(1530.1 * var(--ut));animation:cinta-der .9s .5s both cubic-bezier(.2,.8,.2,1)}
.c3{left:calc(-24.6 * var(--ut));top:calc(146.9 * var(--ut));width:calc(1533.4 * var(--ut));animation:cinta-izq .9s .65s both cubic-bezier(.2,.8,.2,1)}
.uc-cinta.vibra{animation:vibra .7s ease-out}
.c1.vibra,.c3.vibra{transform-origin:0 50%}
.c2.vibra{transform-origin:100% 50%}

/* Aviso */
.uc-aviso{
  position:fixed;z-index:5;left:50%;bottom:24px;
  translate:-50% 20px;opacity:0;pointer-events:none;
  background:#000;color:#fff;
  font:500 15px/1.2 'Segoe UI',Arial,sans-serif;
  padding:12px 18px;border-radius:999px;white-space:nowrap;
  transition:opacity .3s, translate .3s;
}
.uc-aviso.ver{opacity:1;translate:-50% 0}

@keyframes entra-baja{from{opacity:0;translate:0 -24px}}
@keyframes entra-sube{from{opacity:0;translate:0 24px}}
@keyframes pega{from{opacity:0;scale:1.6}60%{opacity:1}}
@keyframes sello{30%{scale:.9}60%{scale:1.06}}
@keyframes cinta-izq{from{translate:-110% 0}}
@keyframes cinta-der{from{translate:110% 0}}
@keyframes vibra{15%{rotate:1.2deg}35%{rotate:-.9deg}55%{rotate:.5deg}75%{rotate:-.25deg}}

/* Tablet vertical */
@media (min-width:761px) and (orientation:portrait){
  :root{--u:calc(100vw / 1000)}
}

/* Móvil en horizontal: pantalla muy baja, se deja hacer scroll */
@media (max-height:520px) and (orientation:landscape){
  :root{--u:calc(100vw / 1100)}
  .uc{padding-top:32px}
}

/* Móvil vertical */
@media (max-width:760px){
  :root{
    --u:calc((100vw - 32px) / 545);
    --ut:calc(var(--u) * 1.35);
  }
  .uc{padding-top:calc(150 * var(--u));padding-bottom:calc(268.5 * var(--ut) + 24px)}
  .uc-logo{width:calc(220 * var(--u))}
  .uc-under{width:calc(460 * var(--u))}
  .uc-contacto{flex-direction:column;align-items:center;gap:calc(26 * var(--u))}
  .uc-tel{margin-top:0}
  .uc-tel img{width:calc(258.4 * 1.3 * var(--u))}
  .uc-mail img{width:calc(341 * 1.3 * var(--u))}
}

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