/* Papel Caramelo — "Muy pronto": la página es una invitación sobre el campo fucsia, igual que la portada del sitio. */
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(/fonts/fredoka-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(/fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(/fonts/nunito-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(/fonts/nunito-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noche: #0A2342;
  --noche-2: #183A68;
  --fucsia: #C6005C;
  --fucsia-osc: #A3004C;
  --blanco: #FFFFFF;
  --grafito: #3A4350;
  --niebla: #EEF1F5;
  --niebla-2: #DCE2EA;

  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --texto: 'Nunito', system-ui, sans-serif;
  --t-gigante: clamp(48px, 6.2vw, 88px);
  --t-medio: clamp(20px, 1.8vw, 24px);
  --t-cuerpo: 18px;
  --t-chico: 15px;

  --m: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--fucsia); color: var(--noche); font: 400 var(--t-cuerpo)/1.55 var(--texto);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p, dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fucsia); outline-offset: 3px; }
.barra :focus-visible, .pie :focus-visible { outline-color: var(--blanco); }
::selection { background: var(--fucsia); color: var(--blanco); }
.rombo { display: inline-block; width: 10px; height: 10px; background: var(--fucsia); transform: rotate(45deg); flex: none; }

/* ——— El campo fucsia con su confeti en dos alturas ——— */
.campo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--fucsia); }
.confeti { position: absolute; inset: -360px -40px 0; background: url(/img/confeti-fucsia.svg) 0 0 / 360px 360px; translate: var(--px, 0) var(--py, 0); }
.confeti-lejos { background-size: 220px 220px; background-position: 90px 40px; opacity: .45; animation: deriva-lejos 80s linear infinite; }
.confeti-cerca { animation: deriva 46s linear infinite; translate: calc(var(--px, 0) * 2.2) calc(var(--py, 0) * 2.2); }
@keyframes deriva { to { transform: translateY(360px); } }
@keyframes deriva-lejos { to { transform: translateY(220px); } }
.lluvia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: none; }
.lluvia.activa { display: block; }

/* ——— Barra ——— */
.barra { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--m); color: var(--blanco); animation: baja .8s var(--ease) both; }
.barra-logo img { width: 64px; height: 64px; transition: transform .35s var(--rebote); }
.barra-logo:hover img { transform: rotate(-8deg) scale(1.06); }
@keyframes baja { from { opacity: 0; translate: 0 -16px; } }

/* ——— Botones: la píldora plana del sitio ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--fucsia); color: var(--blanco); font: 700 15px/1 var(--texto); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s ease;
}
.btn:hover { background: var(--fucsia-osc); transform: translateY(-2px); }
.btn:active { transform: scale(.96); transition-duration: .08s; }
.btn-noche { background: var(--noche); } .btn-noche:hover { background: var(--noche-2); }
.btn-niebla { background: var(--niebla); color: var(--noche); } .btn-niebla:hover { background: var(--niebla-2); }

/* ——— La mesa: la invitación con dos piezas más asomando detrás ——— */
.mesa {
  position: relative; z-index: 1; display: grid; place-items: center;
  padding: clamp(8px, 2vw, 24px) var(--m) clamp(48px, 6vw, 80px);
  perspective: 1400px; overflow-x: clip; overflow-clip-margin: 0;
}
.mesa > * { grid-area: 1 / 1; }
.mesa > .pieza, .mesa > .invitacion { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--z, 0px)); }

.papel {
  --r: 30px;
  -webkit-mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) 0 0 / 51% 51% no-repeat, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) 100% 0 / 51% 51% no-repeat, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) 0 100% / 51% 51% no-repeat, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat; /* taste-skill-ignore: recorta la forma del papel */
          mask: radial-gradient(var(--r) at 0 0, #0000 98%, #000) 0 0 / 51% 51% no-repeat, radial-gradient(var(--r) at 100% 0, #0000 98%, #000) 100% 0 / 51% 51% no-repeat, radial-gradient(var(--r) at 0 100%, #0000 98%, #000) 0 100% / 51% 51% no-repeat, radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat; /* taste-skill-ignore */
}

.pieza { --r: 24px; width: min(560px, 82%); height: 86%; display: grid; place-items: center; }
.pieza-noche { --z: -70px; background: var(--noche); rotate: 8deg; translate: 30% 2%; animation: abanico-der 1.1s .25s var(--ease) both; }
.pieza-niebla { --z: -40px; background: var(--niebla-2); rotate: -9deg; translate: -29% 6%; animation: abanico-izq 1.1s .3s var(--ease) both; }
@keyframes abanico-der { from { rotate: 0deg; translate: 0 6%; opacity: 0; } }
@keyframes abanico-izq { from { rotate: 0deg; translate: 0 6%; opacity: 0; } }
.pieza-estrella, .pieza-sello { position: absolute; width: 44px; height: 44px; }
.pieza-estrella { right: 9%; top: 12%; background: var(--fucsia); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: gira 14s linear infinite; }
.pieza-sello { left: 9%; bottom: 14%; border-radius: 50%; border: 8px solid var(--fucsia); animation: flota 5s ease-in-out infinite; }
@keyframes gira { to { rotate: 360deg; } }
@keyframes flota { 50% { translate: 0 -10px; } }

.invitacion {
  --z: 30px;
  position: relative; width: min(680px, 100%);
  background: var(--blanco); padding: 40px clamp(22px, 4.4vw, 60px) 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  rotate: -1.2deg;
  animation: llega 1.1s var(--ease) both;
}
@keyframes llega { from { opacity: 0; translate: 0 70px; rotate: 5deg; scale: .94; } }

/* La estrella es el botón del confeti: entra como un timbre */
.estrella { width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; margin-bottom: 8px; animation: timbre .7s .55s var(--rebote) both; }
.estrella i { width: 40px; height: 40px; background: var(--fucsia); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: transform .35s var(--rebote), background-color .2s ease; }
.estrella:hover i { transform: rotate(72deg) scale(1.18); }
.estrella:active i { transform: rotate(144deg) scale(.88); transition-duration: .1s; }
.estrella.salta i { animation: salta .6s var(--rebote); }
@keyframes timbre { from { opacity: 0; scale: 2.4; rotate: -50deg; } }
@keyframes salta { 40% { transform: translateY(-14px) rotate(72deg) scale(1.2); } }

/* Entrada de las líneas de la invitación, una tras otra */
.a { animation: sube .8s calc(.55s + var(--i) * 85ms) var(--ease) both; }
@keyframes sube { from { opacity: 0; translate: 0 24px; } }

.titulo { font-size: var(--t-gigante); line-height: .92; letter-spacing: -0.03em; margin: 6px 0 22px; }
.titulo span { display: block; white-space: nowrap; }
.titulo span:first-child { translate: -0.3em 0; }
.titulo span:last-child { translate: 0.3em 0; color: var(--noche); }
.bajada { max-width: 38ch; }

.puntos { display: block; width: 64%; margin: 28px 0 22px; border-top: 5px dotted var(--niebla-2); transform-origin: center; animation-name: cose; }
@keyframes cose { from { opacity: 0; transform: scaleX(0); } }

.datos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.datos dd { white-space: nowrap; }
.datos div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.datos dt { font-size: var(--t-chico); color: var(--grafito); font-weight: 600; }
.datos dd { font-family: var(--display); font-size: var(--t-medio); font-weight: 600; line-height: 1.15; }

/* El taller: qué se está haciendo ahora mismo */
.taller { width: 100%; max-width: 420px; margin-top: 26px; padding: 16px 22px 18px; background: var(--niebla); border-radius: 22px; }
.taller-linea { font-size: var(--t-chico); font-weight: 600; color: var(--grafito); }
.ranura { position: relative; display: inline-grid; vertical-align: bottom; height: 1.55em; overflow: hidden; color: var(--fucsia); font-weight: 800; transition: width .45s var(--ease); }
.ranura-palabra { grid-area: 1 / 1; white-space: nowrap; }
.ranura-palabra.entra { animation: entra .55s var(--ease) both; }
.ranura-palabra.sale { animation: sale .45s var(--ease) both; }
@keyframes entra { from { translate: 0 110%; opacity: 0; } }
@keyframes sale { to { translate: 0 -110%; opacity: 0; } }
.hilo { position: relative; height: 10px; margin-top: 12px; border-radius: 99px; background: var(--niebla-2); overflow: hidden; }
.hilo i { position: absolute; inset: 0; border-radius: inherit; background: var(--fucsia); transform-origin: left; transform: scaleX(.74); animation: avanza 2.4s 1.2s var(--ease) both, respira 6s 3.6s ease-in-out infinite; }
@keyframes avanza { from { transform: scaleX(0); } }
@keyframes respira { 50% { transform: scaleX(.82); } }

.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* ——— Pie ——— */
.pie { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 22px var(--m) 26px; color: var(--blanco); font-size: var(--t-chico); font-weight: 600; }
.pie-contacto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pie .rombo { background: var(--blanco); width: 8px; height: 8px; }
.pie a { text-underline-offset: 4px; text-decoration-thickness: 2px; transition: color .2s ease; }
.pie a:hover { color: var(--noche); }

/* En pantallas anchas la barra flota sobre el campo y la invitación usa toda la altura */
@media (min-width: 1000px) {
  .barra { position: absolute; inset: 0 0 auto; }
  .mesa { padding-top: 28px; padding-bottom: 28px; }
}

/* ——— Teléfono ——— */
@media (max-width: 640px) {
  .barra { padding: 14px 16px; }
  .barra-logo img { width: 52px; height: 52px; }
  .barra .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .mesa { padding: 4px 16px 48px; }
  .invitacion { --r: 22px; padding: 36px 20px 40px; rotate: -.4deg; }
  .pieza { --r: 18px; width: 82%; }
  .pieza-noche { translate: 10% 2%; rotate: 5deg; }
  .pieza-niebla { translate: -10% 2%; rotate: -5deg; }
  .titulo { margin: 4px 0 18px; }
  .titulo span:first-child, .titulo span:last-child { translate: none; }
  .puntos { margin: 28px 0 24px; width: 72%; }
  .datos { flex-direction: column; gap: 10px; }
  .datos .rombo { display: none; }
  .taller { margin-top: 28px; padding: 16px 16px 18px; }
  .acciones { flex-direction: column; width: 100%; }
  .acciones .btn { width: 100%; }
  .pie { flex-direction: column; text-align: center; padding: 18px 16px 24px; }
}

/* ——— Movimiento reducido: todo queda en su sitio, sin viajes ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confeti { animation: none !important; }
}