@font-face { font-family: "Poppins GGS"; src: url("fonts/Poppins-Bold.ttf"); font-weight: 700; }
/* "Monimer" es el nombre interno: el archivo es Fraunces cursiva suave (gratis, OFL) */
@font-face { font-family: "Monimer"; src: url("fonts/Fraunces-Italic-Suave-o72.woff2") format("woff2"); size-adjust: 89.6%; }

.stage {
  --cob: #0005F4; --b: 6px; --sh: 9px;
  position: relative; width: 2160px; height: 1440px; overflow: hidden;
  font-family: "Poppins GGS", sans-serif; font-weight: 700; color: var(--cob);
}
.stage.grid {
  background-image:
    linear-gradient(rgba(255,255,255,.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.08) 2px, transparent 2px);
  background-size: 60px 60px;
}
.el { position: absolute; transform-origin: 50% 50%; }
.el.hidden { display: none; }

/* ---------- stickers ---------- */
.el.sticker img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.el.sticker { filter: drop-shadow(10px 10px 0 rgba(2,3,107,.55)); }
.stage.borde .el.sticker {
  filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
          drop-shadow(10px 10px 0 rgba(2,3,107,.55));
}
.stage.nb .el.sticker { filter: drop-shadow(7px 7px 0 var(--cob)); }

/* ---------- texto ---------- */
.el.text { line-height: .95; letter-spacing: -0.025em; white-space: nowrap; }
.el.text.shadow { text-shadow: .055em .055em 0 rgba(2,3,107,.6); }
.acc { font-family: "Monimer", serif; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- componentes neobrutalistas ---------- */
.el.comp { white-space: nowrap; line-height: 1; }
.el.comp img { pointer-events: none; -webkit-user-drag: none; }

.nb-win { position: relative; background: #fff; border: var(--b) solid var(--cob); border-radius: 46px;
  box-shadow: 16px 16px 0 var(--cob); overflow: hidden; }
.nb-win-head { position: absolute; left: 0; right: 0; top: 0; height: 112px; display: flex; align-items: center;
  padding-left: 40px; border-bottom: var(--b) solid var(--cob); background: #fff; }
.nb-win-head span, .nb-win-foot span { flex: 1; }
.nb-dots { height: 100%; width: 112px; border-left: var(--b) solid var(--cob); display: grid;
  grid-template-columns: repeat(3, 11px); gap: 11px; place-content: center; }
.nb-dots b { width: 11px; height: 11px; border-radius: 50%; background: var(--cob); }
.nb-zona { position: absolute; left: 0; right: 0; border-top: var(--b) solid var(--cob); }
.nb-win-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; display: flex; align-items: center;
  padding-left: 40px; border-top: var(--b) solid var(--cob); background: #fff; font-size: 1.7em; }
.nb-arrow { height: 100%; width: 190px; border-left: var(--b) solid var(--cob); display: grid; place-items: center; }
.nb-arrow img { width: 110px; }

.nb-card { padding: .34em .55em .4em; border: var(--b) solid var(--cob); border-radius: .3em;
  box-shadow: var(--sh) var(--sh) 0 var(--cob); }

.nb-btn { display: inline-flex; align-items: center; gap: .45em; padding: .45em .85em .5em .6em;
  border: var(--b) solid var(--cob); border-radius: .42em; box-shadow: var(--sh) var(--sh) 0 var(--cob); }
.nb-btn img { height: 1.15em; }

.nb-tog { display: inline-flex; align-items: center; gap: .45em; }
.nb-track { position: relative; width: 2.3em; height: 1.3em; border: var(--b) solid var(--cob); border-radius: 1em;
  box-shadow: 5px 5px 0 var(--cob); box-sizing: border-box; }
.nb-track b { position: absolute; top: 50%; left: .1em; width: .9em; height: .9em; box-sizing: border-box;
  border: var(--b) solid var(--cob); background: #fff; border-radius: 50%; transform: translateY(-50%); }
.nb-track.on b { left: auto; right: .1em; }

.nb-input { display: flex; align-items: center; height: 2.4em; background: #fff; border: var(--b) solid var(--cob);
  border-radius: .5em; box-shadow: var(--sh) var(--sh) 0 var(--cob); padding-left: .7em; overflow: hidden; }
.nb-input .ph { flex: 1; opacity: .6; }
.nb-send { height: 100%; aspect-ratio: 1; border-left: var(--b) solid var(--cob); display: grid; place-items: center; }

.nb-tile { width: 2.4em; height: 2.4em; border: var(--b) solid var(--cob); border-radius: .45em;
  box-shadow: var(--sh) var(--sh) 0 var(--cob); display: grid; place-items: center; }
.nb-tile img { width: 64%; }

.nb-puntos { display: flex; gap: .3em; }
.nb-puntos i { width: 1em; height: 1em; border-radius: 50%; border: var(--b) solid var(--cob); box-sizing: border-box; }

.nb-tabs { display: inline-flex; background: #fff; border: var(--b) solid var(--cob); border-radius: .4em;
  box-shadow: var(--sh) var(--sh) 0 var(--cob); overflow: hidden; }
.nb-tabs span { padding: .42em .8em .48em; }
.nb-tabs span + span { border-left: var(--b) solid var(--cob); }

.nb-tl { position: relative; height: 1.5em; background: #fff; border: var(--b) solid var(--cob); border-radius: .75em;
  box-shadow: var(--sh) var(--sh) 0 var(--cob); }
.nb-tl i { position: absolute; top: 50%; width: .75em; height: .75em; box-sizing: border-box;
  border: var(--b) solid var(--cob); transform: translate(-50%, -50%) rotate(45deg); }
.nb-tl u { position: absolute; top: -.55em; bottom: -.55em; width: var(--b); background: var(--cob); margin-left: -3px; }

/* ---------- objetos en perspectiva ---------- */
.p3w { perspective: 2600px; }
.p3 { position: relative; transform-style: preserve-3d; }
.p3-l { position: absolute; inset: 0; }
.p3-l > * { width: 100%; height: 100%; }
.p3-f { position: relative; }
.p3-l svg, .p3-f svg { display: block; overflow: visible; }

.t3 { display: block; line-height: 1.05; white-space: nowrap; }
.p3-l > .t3 { width: auto; height: auto; }
.t3.monimer { font-family: "Monimer", serif; font-weight: 400; letter-spacing: -0.01em; }
.t3.poppins { font-family: "Poppins GGS", sans-serif; font-weight: 700; letter-spacing: -0.025em; }
.t3-front, .t3-side { -webkit-text-stroke: calc(var(--bw, 6px) * 2) var(--cob); paint-order: stroke fill; }
.t3-back { color: var(--cob); -webkit-text-stroke: calc(var(--bw, 6px) * 3) var(--cob); }

.b3-front { position: relative; border: var(--bw, 6px) solid var(--cob); }
.b3-side { box-sizing: border-box; }
.b3-back { background: var(--cob); box-shadow: 0 0 0 calc(var(--bw, 6px) / 2) var(--cob); }

.cm { display: flex; align-items: center; gap: .5em; padding: .5em .85em .6em .5em; }
.av { width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; border: calc(var(--bw, 6px) * .8) solid var(--cob); display: grid; place-items: center;
  background: var(--suave, linear-gradient(135deg, #F8B4E3, #D8DAFF 55%, #A2DFE2)); font: normal 1.15em "Monimer", serif; font-style: normal; }
.hdl { display: block; font-size: .5em; margin-bottom: .25em; opacity: .75; }
.dm { padding: .6em .9em .68em; line-height: 1.12; }
.pill { display: flex; align-items: center; gap: .55em; padding: .32em .32em .32em .9em; }
.pill-go { width: 1.6em; height: 1.6em; border-radius: 50%; border: calc(var(--bw, 6px) * .8) solid var(--cob); display: grid; place-items: center; }

/* ---------- interfaz de red social ---------- */
.hs-bars { display: flex; gap: .3em; }
.hs-bar { flex: 1; height: .32em; border-radius: 1em; border: 4px solid var(--cob); background: #fff; }
.hs-bar.lleno { background: var(--cob); }
.hs-bar.actual { background: linear-gradient(90deg, #ED39E9, #FF7D83 45%, #fff 45.5%); }
.hs-perfil { display: flex; align-items: center; gap: .45em; margin-top: .55em; }
.hs-perfil .av { width: 1.7em; height: 1.7em; border-width: calc(var(--bw, 6px) * .65); font-size: 1em; }
.hs-perfil .av { font-size: 1em; }
.hs-perfil span { opacity: .6; }
.nt { display: flex; align-items: center; gap: .35em; padding: .32em .6em .36em .5em; color: #fff; }
.ty { display: flex; gap: .3em; padding: .55em .7em; }
.ty i { width: .45em; height: .45em; border-radius: 50%; background: var(--cob); }
.ty i:nth-child(2) { opacity: .6; } .ty i:nth-child(3) { opacity: .3; }
.rx { display: flex; gap: .35em; padding: .3em .55em; }

/* ---------- cabecera (opciones de la parte de arriba) ---------- */
.cb { display: flex; }
.cb-contador, .cb-puntos { justify-content: flex-end; }
.cb.cb-contador, .cb.cb-puntos { justify-content: flex-end; }
.cb-perfil { display: flex; align-items: center; gap: .45em; padding: .3em .35em .3em .35em; }
.cb-perfil .av { width: 1.6em; height: 1.6em; border-width: calc(var(--bw, 6px) * .65); font-size: 1em; }
.cb-seguir { margin-left: .5em; border: calc(var(--bw, 6px) * .8) solid var(--cob); border-radius: 1em; padding: .18em .75em .24em; }
.cb-notif { display: flex; align-items: center; gap: .55em; padding: .45em .8em .5em .45em; min-width: 15em; }
.cb-notif div { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.cb-notif span { font-size: .8em; opacity: .75; }
.cb-notif .av { width: 1.8em; height: 1.8em; border-width: calc(var(--bw, 6px) * .65); font-size: 1em; }
.cb-notif em { font-style: normal; font-size: .75em; opacity: .6; align-self: flex-start; margin-top: .2em; }
.cb-app { width: 1.8em; height: 1.8em; border-radius: .5em; border: 4px solid var(--cob); display: grid; place-items: center;
  background: linear-gradient(135deg, #ED39E9, #FF7D83 50%, #D3D3FF); }
.cb-mencion { padding: .3em .8em .36em; }
.cb-contador { padding: .25em .7em .3em; }
.cb-puntos { display: flex; gap: .35em; padding: .45em .6em; }
.cb-puntos i { width: .5em; height: .5em; border-radius: 50%; border: 3px solid var(--cob); background: #fff; }
.cb-puntos i.on { background: var(--cob); }
/* Poppins en cobalto: trazo fino para que no se tapen las letras */
.t3.poppins.t3-front, .t3.poppins.t3-side { -webkit-text-stroke-width: calc(var(--bw, 6px) / 2); }
.t3.poppins.t3-back { -webkit-text-stroke-width: calc(var(--bw, 6px) * 1.3); }

/* ---------- final de la página 1: invitaciones a deslizar ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 9000; }  /* el doblez de papel va por encima de todo lo animado */
.fx-p { z-index: 9001; }
.curl { position: absolute; right: calc(100% - 1080px); bottom: 0; width: 0; height: 0; }
.curl .peek { position: absolute; inset: 0; background: var(--sig); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* "Desliza" recto, fijo en la esquina de la página de abajo: se descubre al levantarse la punta */
.curl .bajo { position: absolute; right: 24px; bottom: 28px; display: flex; align-items: center; gap: .25em;
  font: 700 34px "Poppins GGS", sans-serif; letter-spacing: -0.02em; color: #0005F4; white-space: nowrap; }
.curl .bajo svg { display: block; }
.curl .flap { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #FFFFFF 25%, #EFCFFA 62%, #D3D3FF 100%); }
.curl { filter: drop-shadow(-4px -4px 0 #0005F4) drop-shadow(-16px -16px 22px rgba(2,3,107,.35)); }
.dedo { position: absolute; left: 930px; top: 1200px; }
.dedo .toque { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 6px solid #0005F4; box-shadow: 0 0 0 10px rgba(255,255,255,.28); box-sizing: border-box; }
.dedo .estela { position: absolute; left: 0; top: -11px; height: 22px; width: 0; border-radius: 11px;
  background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,0) 85%); }

/* ---------- carrusel de estilos (página 2, escena 3) ---------- */
.car { padding: 16px 16px 0; }
.car-vista { position: relative; overflow: hidden; border-radius: 24px; border: calc(var(--bw, 6px) * .7) solid var(--cob); box-sizing: content-box; }
.car-pista { display: flex; height: 100%; }
.car-slide { position: relative; flex: none; }
.car-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.car-slide img.off { visibility: hidden; }
.car-pie { display: flex; align-items: center; justify-content: space-between; padding: .45em .2em .55em .35em; }
.car-nombres { position: relative; display: grid; }
.car-nombre { grid-area: 1 / 1; white-space: nowrap; }
.car-nombre.off { visibility: hidden; }
.car-puntos { display: flex; gap: .3em; }
.car-puntos i { width: .42em; height: .42em; border-radius: 50%; border: 3px solid var(--cob); background: #fff; box-sizing: border-box; }
.car-puntos i.on { background: var(--cob); }

/* ---------- brillo al girar en 3D (la banda queda fuera de la cara hasta que se anima) ---------- */
.b3-front .brillo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%);
  background-size: 300% 100%; background-position: 100% 0%; }
.t3-brillo { position: absolute; left: 0; top: 0; pointer-events: none; color: transparent; -webkit-text-stroke: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 58%);
  background-size: 300% 100%; background-position: 100% 0%; -webkit-background-clip: text; background-clip: text; }

/* ---------- encuesta tipo Instagram (página 3) ---------- */
.enc { padding: .55em .55em .6em; }
.enc-preg { color: var(--cob); text-align: center; padding: .5em .6em .58em; border-radius: .55em; border: calc(var(--bw, 6px) * .7) solid var(--cob);
  font-size: 1.15em; line-height: 1.05; margin-bottom: .5em; }
.enc-ops { display: grid; gap: .8em; }
.enc-op { position: relative; display: flex; align-items: center; gap: .5em; height: 2.15em; padding: 0 .55em 0 .3em; border-radius: 1.2em;
  border: calc(var(--bw, 6px) * .7) solid var(--cob); background: #fff; }
.enc-op img { position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; border: 3px solid var(--cob); }
.enc-op span { position: relative; flex: 1; }
.enc-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--sel); }
/* opción elegida en cobalto: el texto pasa a blanco y el ✓ se queda magenta con borde blanco */
.enc.sel-cobalto .enc-op.on span, .enc.sel-cobalto .enc-op.voto span { color: #fff; }
.enc.sel-cobalto .enc-op.voto .enc-check { border-color: #fff; }
.enc-check { position: relative; width: 1.25em; height: 1.25em; border-radius: 50%; display: grid; place-items: center; font-size: .8em;
  color: #fff; background: #ED39E9; border: 3px solid var(--cob); visibility: hidden; }
.enc-op.on .enc-check { visibility: visible; }
.enc-op.on .enc-barra { width: 100%; }