/* ==========================================================================
   Come Valledupar 2026 - Landing de una pantalla
   Tokens de marca (tomados del flyer y del logo)
   ========================================================================== */
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Gochi Hand";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/gochi-hand-latin-400-normal.woff2") format("woff2");
}

:root{
  --rojo:#fe0120;
  --rojo-hondo:#d10014;
  --rojo-logo:#e6203b;
  --rojo-sombra:#b8000f;
  --amarillo:#fda600;
  --crema:#f4e0c5;
  --noche:#1c0407;
  --ig-1:#feda75;--ig-2:#fa7e1e;--ig-3:#d62976;--ig-4:#962fbf;--ig-5:#4f5bd5;
  --fuente-titulo:"Anton",Impact,"Arial Narrow",sans-serif;
  --fuente-mano:"Gochi Hand","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{height:100%}
body{
  height:100vh;height:100dvh;overflow:hidden;
  background:var(--noche);
  font-family:var(--fuente-mano);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;touch-action:manipulation;
  display:flex;align-items:center;justify-content:center;
}

/* Pantalla: 100% del telefono; en escritorio se ve dentro de un marco de celular */
.screen{
  --u:min(1cqw,.462cqh);
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;height:100%;
  container-type:size;
  background:var(--rojo);
}
@media (min-width:600px){
  body{background:radial-gradient(circle at 50% 30%,#3a0a10,var(--noche) 70%)}
  .screen{
    width:390px;height:min(844px,94vh);
    border-radius:44px;
    box-shadow:0 0 0 10px #0d0203,0 0 0 12px #3b1a1e,0 40px 90px rgba(0,0,0,.6);
  }
}

/* Fondo */
.olas{
  position:absolute;inset:0;z-index:-3;
  background:url("../assets/img/olas.svg") 0 0/34cqw auto repeat;
}
.marca-agua{
  position:absolute;z-index:-2;left:50%;top:50%;
  width:135cqw;height:auto;
  transform:translate(-50%,-50%) rotate(-14deg);
  opacity:.075;pointer-events:none;user-select:none;
}
.vineta{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(254,1,32,0) 40%,rgba(120,0,10,.45) 100%);
}

/* Ilustraciones de linea en las esquinas */
.deco{position:absolute;z-index:0;pointer-events:none}
.deco-palillos{top:-3cqh;left:-6cqw;width:46cqw}
.deco-fideos{top:-3cqh;right:-6cqw;width:28cqw}
.deco-copa{bottom:-5cqh;left:-2cqw;width:15cqw}
.deco-plato{bottom:-9cqw;right:-9cqw;width:46cqw}

/* Contenido: --u escala todo segun el ancho o el alto disponible */
.stage{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--u)*4);
  padding:
    calc(var(--u)*8 + env(safe-area-inset-top,0px))
    calc(var(--u)*6)
    calc(var(--u)*20 + env(safe-area-inset-bottom,0px));
  text-align:center;
}
.titular{
  font-family:var(--fuente-titulo);font-weight:400;
  text-transform:uppercase;line-height:.98;
}
.titular .ciudad{
  display:block;color:var(--amarillo);
  font-size:calc(var(--u)*19);letter-spacing:.015em;
}
.titular .pregunta{
  display:block;color:var(--amarillo);
  font-size:calc(var(--u)*10);letter-spacing:.03em;margin-top:calc(var(--u)*1);
}
.fechas{
  font-family:var(--fuente-titulo);
  color:var(--crema);text-transform:uppercase;
  font-size:calc(var(--u)*9.4);line-height:1.05;letter-spacing:.015em;
  margin-top:calc(var(--u)*3);
}
.pildora{
  font-size:calc(var(--u)*6.6);color:var(--rojo);
  background:var(--crema);
  padding:calc(var(--u)*.8) calc(var(--u)*6);
  transform:rotate(-2deg);
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 calc(var(--u)*1) 0 rgba(120,0,10,.35);
}
.logo{
  width:calc(var(--u)*36);height:auto;display:block;
  margin-top:calc(var(--u)*2);
  filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.6) rgba(110,0,10,.35));
}

/* Boton principal */
.zona-boton{position:relative;margin-top:calc(var(--u)*4);width:calc(var(--u)*80)}
.boton{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:calc(var(--u)*3);
  width:100%;height:calc(var(--u)*17);
  padding:0 calc(var(--u)*4) 0 calc(var(--u)*3);
  border-radius:calc(var(--u)*17);
  background:var(--crema);color:var(--rojo-logo);
  text-decoration:none;
  font-family:var(--fuente-titulo);
  font-size:calc(var(--u)*5.8);letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 calc(var(--u)*1.6) 0 var(--rojo-sombra),0 calc(var(--u)*3.6) calc(var(--u)*5) rgba(80,0,8,.45);
  animation:latido 1.9s ease-in-out infinite;
  transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;-webkit-user-select:none;user-select:none;
}
.boton:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px}
.boton:active{
  animation-play-state:paused;
  transform:translateY(calc(var(--u)*1.2)) scale(.965);
  box-shadow:0 calc(var(--u)*.4) 0 var(--rojo-sombra),0 calc(var(--u)*1.4) calc(var(--u)*2) rgba(80,0,8,.4);
}
/* Brillo que recorre el boton (tambien contiene el efecto de toque) */
.brillo{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.brillo::after{
  content:"";position:absolute;top:-20%;bottom:-20%;width:26%;left:-40%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:brillo 3.4s ease-in-out infinite;
}
/* Ondas que invitan a tocar */
.boton::before,.onda{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:calc(var(--u)*.9) solid var(--amarillo);opacity:0;
  animation:onda 1.9s ease-out infinite;z-index:-1;
}
.onda{animation-delay:.55s}

.ig{
  flex:none;width:calc(var(--u)*11.5);height:calc(var(--u)*11.5);border-radius:32%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 30% 107%,var(--ig-1) 0%,var(--ig-2) 22%,var(--ig-3) 50%,var(--ig-4) 72%,var(--ig-5) 100%);
  animation:tambaleo 1.9s ease-in-out infinite;
}
.ig svg{width:62%;height:62%}

.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(253,166,0,.55);transform:scale(0);
  animation:ripple .6s ease-out forwards;
}

/* Mano que toca */
.mano{
  position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*12.5);
  width:calc(var(--u)*14);height:auto;pointer-events:none;
  transform-origin:30% 10%;
  filter:drop-shadow(0 calc(var(--u)*.8) calc(var(--u)*1) rgba(90,0,8,.5));
  animation:toque 1.9s ease-in-out infinite;
}
.usuario{
  position:absolute;left:0;right:0;top:calc(100% + var(--u)*5.5);
  font-size:calc(var(--u)*5);color:var(--crema);letter-spacing:.04em;
  text-align:left;padding-left:calc(var(--u)*2);
}
.usuario small{
  display:block;font-size:calc(var(--u)*3.9);color:var(--amarillo);
  letter-spacing:.06em;margin-top:calc(var(--u)*.4);
}

/* Pie: credito discreto al fondo de la pantalla */
.pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:calc(var(--u)*2.5) 0 calc(var(--u)*4.5 + env(safe-area-inset-bottom,0px));
  text-align:center;
}
.pie a{
  font-size:calc(var(--u)*3.6);color:#fff;
  text-decoration:none;letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(80,0,8,.7);
  transition:opacity .15s ease;
}
.pie a:hover{opacity:1}

/* Animaciones */
@keyframes latido{
  0%,100%{transform:scale(1)}
  12%{transform:scale(1.045)}
  24%{transform:scale(.985)}
  36%{transform:scale(1)}
}
@keyframes tambaleo{
  0%,36%,100%{transform:rotate(0)}
  10%{transform:rotate(-12deg) scale(1.08)}
  20%{transform:rotate(9deg) scale(1.08)}
  30%{transform:rotate(-4deg)}
}
@keyframes brillo{0%,55%{left:-40%}85%,100%{left:130%}}
@keyframes onda{
  0%{transform:scale(1);opacity:.9}
  70%,100%{transform:scale(1.28,1.7);opacity:0}
}
@keyframes toque{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(calc(var(--u)*-1.2),calc(var(--u)*-3.2)) rotate(-3deg)}
  20%{transform:translate(calc(var(--u)*-1.6),calc(var(--u)*-5.2)) rotate(-3deg)}
  32%{transform:translate(0,0) rotate(0)}
}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Entrada: una sola secuencia al cargar */
@keyframes cae{from{opacity:0;transform:translateY(calc(var(--u)*-6)) scale(.96)}to{opacity:1;transform:none}}
@keyframes sale{from{opacity:0;transform:scale(.6) rotate(-6deg)}70%{transform:scale(1.06) rotate(1deg)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(calc(var(--u)*8))}to{opacity:1;transform:none}}
.titular{animation:cae .7s cubic-bezier(.2,.8,.2,1) both .05s}
.fechas{animation:cae .7s cubic-bezier(.2,.8,.2,1) both .2s}
.pildora{animation:sale .6s cubic-bezier(.2,.9,.3,1.2) both .38s}
.logo{animation:sale .7s cubic-bezier(.2,.9,.3,1.2) both .5s}
.zona-boton{animation:sube .6s cubic-bezier(.2,.8,.2,1) both .75s}
.deco{animation:cae .9s ease-out both .1s}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}