/* =========================================================
   Amor y Amistad 2026 · Muro de gustos
   Diseño mobile-first, festivo y ornamentado. Sin librerías.
   ========================================================= */

:root{
  --fucsia:#FF1F6D;
  --coral:#FF6B3D;
  --dorado:#FFC122;
  --turquesa:#00C2A8;
  --lila:#9B4DFF;
  --cielo:#38B6FF;
  --vino:#6E0A2B;

  --paleta-0:#FF1F6D;
  --paleta-1:#FF6B3D;
  --paleta-2:#FFC122;
  --paleta-3:#00C2A8;
  --paleta-4:#9B4DFF;
  --paleta-5:#38B6FF;

  --tinta:#3A1020;
  --tinta-suave:#7A3145;
  --papel:#FFFFFF;

  --radio:26px;
  --sombra:0 10px 30px rgba(110,10,43,.12);
  --sombra-alta:0 16px 40px rgba(255,31,109,.32);

  --fuente:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--fuente);
  color:var(--tinta);
  overflow-x:hidden;

  /* Capa 1: patrón de corazones. Capa 2: degradado que se desplaza. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M20 34c-6-6-10-10-10-15a6 6 0 0 1 10-4 6 6 0 0 1 10 4c0 5-4 9-10 15z' fill='%23FF1F6D' fill-opacity='.07'/%3E%3Cpath d='M60 70c-6-6-10-10-10-15a6 6 0 0 1 10-4 6 6 0 0 1 10 4c0 5-4 9-10 15z' fill='%239B4DFF' fill-opacity='.06'/%3E%3Ccircle cx='62' cy='20' r='3' fill='%23FFC122' fill-opacity='.13'/%3E%3Ccircle cx='18' cy='58' r='2.5' fill='%2300C2A8' fill-opacity='.13'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#FFF1E8,#FFE3F0,#F6ECFF,#E4FBF7,#FFEFE4);
  background-size:80px 80px, 400% 400%;
  animation:paseoFondo 22s ease-in-out infinite;
}
@keyframes paseoFondo{
  0%,100%{ background-position:0 0, 0% 50%; }
  50%    { background-position:0 0, 100% 50%; }
}

/* =========================================================
   FONDO DECORATIVO
   ========================================================= */
.fondo{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.blob{ position:absolute; width:62vmax; height:62vmax; opacity:.22; filter:blur(10px); }
.blob--1{ top:-22vmax; left:-20vmax; fill:var(--fucsia);  animation:girar 32s linear infinite; }
.blob--2{ top:30vmax; right:-26vmax; fill:var(--turquesa); animation:girar 44s linear infinite reverse; }
.blob--3{ bottom:-28vmax; left:14vmax; fill:var(--dorado); animation:girar 38s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }

.corazones{ position:absolute; inset:0; }
.corazon{
  position:absolute; bottom:-10vh; line-height:1;
  filter:drop-shadow(0 3px 6px rgba(255,31,109,.28));
  animation:flotar linear infinite; will-change:transform,opacity;
}
@keyframes flotar{
  0%  { transform:translateY(0) rotate(-14deg) scale(.7); opacity:0; }
  10% { opacity:var(--op,.85); }
  50% { transform:translateY(-55vh) rotate(12deg) scale(1.1); }
  90% { opacity:var(--op,.85); }
  100%{ transform:translateY(-120vh) rotate(-8deg) scale(.85); opacity:0; }
}

.confeti{ position:fixed; inset:0; z-index:60; pointer-events:none; }

/* ===== Guirnalda de banderines ===== */
.guirnalda{
  position:relative; z-index:1;
  display:block; width:100%; height:62px; margin-bottom:-6px;
}
.guirnalda__bandera{ transform-origin:top center; animation:ondear 3.4s ease-in-out infinite; }
@keyframes ondear{
  0%,100%{ transform:rotate(-3.5deg); }
  50%    { transform:rotate(3.5deg); }
}

/* ===== Separador decorativo ===== */
.separador{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:40px 0 24px;
}
.separador::before, .separador::after{
  content:""; flex:1; height:3px; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--fucsia),transparent);
  opacity:.45;
}
.separador span{ font-size:24px; animation:latido 2.4s ease-in-out infinite; }
.separador span:nth-of-type(2){ animation-delay:.25s; }
.separador span:nth-of-type(3){ animation-delay:.5s; }

/* =========================================================
   LAYOUT
   ========================================================= */
.envoltorio{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:0 14px 120px;
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.24,1); }
.reveal.visible{ opacity:1; transform:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; text-align:center; padding:12px 0 18px; }

.hero__kicker{
  display:inline-block; margin:0 0 16px; padding:8px 18px;
  font-size:clamp(11px,3vw,13px); font-weight:900;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:linear-gradient(100deg,var(--fucsia),var(--coral));
  border-radius:999px; box-shadow:0 8px 20px rgba(255,31,109,.32);
}

.hero__titulo{
  margin:0; font-weight:900; line-height:.94;
  font-size:clamp(44px,14vw,96px); letter-spacing:-.025em;
  text-wrap:balance;
}
/* Título en un solo color fuerte. La versión multicolor con onda en bucle
   parecía WordArt: aquí la animación es solo de entrada y luego se queda
   quieto, que es lo que lo hace ver serio. */
.hero__titulo{ color:var(--vino); }
.hero__titulo .palabra{ display:inline-block; }
.hero__titulo .letra{
  display:inline-block;
  opacity:0; transform:translateY(24px);
  animation:entraLetra .7s cubic-bezier(.22,1.2,.3,1) forwards;
}
@keyframes entraLetra{ to{ opacity:1; transform:none; } }

/* La "y" va dentro de un círculo fucsia: el único acento de color del título */
.hero__titulo .palabra--y{
  position:relative; margin:0 .12em; padding:0 .28em;
  color:#fff;
}
.hero__titulo .palabra--y::before{
  content:""; position:absolute; inset:-.06em -.02em -.02em;
  background:linear-gradient(135deg,var(--fucsia),var(--coral));
  border-radius:50%; z-index:-1;
  box-shadow:0 8px 20px rgba(255,31,109,.4);
}

/* ---------- Frase que rota bajo el título ---------- */
.hero__rota{
  min-height:30px; margin:0 0 14px;
  font-size:clamp(15px,4.2vw,19px); font-weight:900; color:var(--fucsia);
}
.hero__rota__txt{
  display:inline-block;
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.9,.24,1);
}
.hero__rota__txt.saliendo{ opacity:0; transform:translateY(-12px); }

.hero__anio{
  display:inline-block; margin:10px 0 18px; padding:6px 22px;
  font-weight:900; line-height:1.15; letter-spacing:.14em;
  font-size:clamp(22px,6vw,34px); color:#5A3A00;
  background:linear-gradient(100deg,var(--dorado),#FFE07A);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(255,193,34,.45), inset 0 2px 0 rgba(255,255,255,.55);
  transform:rotate(-1.5deg);
}
.hero__anio span{ display:inline; }

.hero__lead{
  margin:0 auto 26px; max-width:540px;
  font-size:clamp(15px,4vw,18px); line-height:1.6; color:var(--tinta-suave);
  text-wrap:pretty;
}

/* ===== Cuenta regresiva ===== */
.cuenta{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; max-width:330px; margin:0 auto 24px;
}
.cuenta__caja{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--acento), color-mix(in srgb, var(--acento) 72%, #000));
  border-radius:20px; padding:15px 8px 11px;
  box-shadow:0 10px 24px color-mix(in srgb, var(--acento) 40%, transparent),
             inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Brillo diagonal fijo: le da volumen a la caja */
.cuenta__caja::after{
  content:""; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(18deg);
}
.cuenta__caja:hover{ transform:translateY(-5px) rotate(-2deg); }
.cuenta__num{
  position:relative; display:block; font-weight:900; color:#fff;
  font-size:clamp(32px,10vw,46px); line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 6px rgba(0,0,0,.2);
}
.cuenta__num.tic{ animation:tic .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes tic{
  0%{ transform:scale(1) rotateX(0); }
  40%{ transform:scale(1.2) rotateX(-50deg); }
  100%{ transform:scale(1) rotateX(0); }
}
.cuenta__eti{
  position:relative; display:block; margin-top:6px;
  font-size:10px; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.92);
}
.cuenta__final{
  margin:0 0 24px; font-size:21px; font-weight:900; color:var(--fucsia);
  animation:latido 1.2s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* =========================================================
   BOTONES
   ========================================================= */
.hero__botones{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 26px; border-radius:999px;
  font-size:16px; font-weight:900; text-decoration:none; cursor:pointer;
  border:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease;
}
.btn:active{ transform:scale(.95); }

.btn--primario{
  position:relative; overflow:hidden; color:#fff;
  /* Vino oscuro: contra un fondo rosa claro, lo oscuro es lo que domina.
     En degradado rosa se confundía con el resto de la página. */
  background:linear-gradient(100deg,#5C0722,var(--vino) 45%,#B0104E);
  box-shadow:0 14px 34px rgba(92,7,34,.45),
             inset 0 0 0 2.5px var(--dorado);
  letter-spacing:.01em;
}
.btn--primario::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:brillo 4s ease-in-out infinite;
}
@keyframes brillo{ 0%,70%{ left:-60%; } 100%{ left:130%; } }
.btn--primario:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(92,7,34,.5), inset 0 0 0 2.5px var(--dorado); }

.btn--fantasma{
  background:rgba(255,255,255,.82); color:var(--vino);
  box-shadow:inset 0 0 0 2.5px var(--fucsia);
}
.btn--fantasma:hover{ transform:translateY(-3px); background:#fff; }

.btn--dorado{
  background:linear-gradient(100deg,var(--dorado),#FFE07A); color:#5A3A00;
  box-shadow:0 12px 30px rgba(255,193,34,.48), inset 0 2px 0 rgba(255,255,255,.5);
}
.btn--dorado:hover{ transform:translateY(-3px) rotate(-1.5deg); }

.btn--bloque{ width:100%; }

/* ===== Cañón de confeti ===== */
.canon{
  display:inline-flex; align-items:center; gap:10px;
  margin:22px auto 0; padding:12px 22px; min-height:48px;
  background:#fff; border:3px dashed var(--lila);
  border-radius:999px; cursor:pointer; font-size:15px; font-weight:900;
  color:var(--lila); box-shadow:0 8px 20px rgba(155,77,255,.2);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.canon:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 30px rgba(155,77,255,.3); }
.canon__emoji{ font-size:22px; display:inline-block; animation:bailar 2s ease-in-out infinite; }
@keyframes bailar{ 0%,100%{transform:rotate(-14deg) scale(1)} 50%{transform:rotate(14deg) scale(1.2)} }

/* =========================================================
   PROGRESO
   ========================================================= */
.progreso{
  position:relative; max-width:700px; margin:26px auto 0;
  padding:26px 22px 28px; text-align:center;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:var(--radio);
  box-shadow:var(--sombra), inset 0 0 0 3px rgba(255,31,109,.1);
}
/* Moño decorativo arriba */
.progreso::before{
  content:"🎀"; position:absolute; top:-18px; left:50%;
  transform:translateX(-50%); font-size:34px;
  filter:drop-shadow(0 4px 8px rgba(255,31,109,.3));
}
.progreso__titulo{
  margin:10px 0 6px; font-size:clamp(18px,5vw,24px); font-weight:900;
  color:var(--vino); text-wrap:balance;
}
.contador{ color:var(--fucsia); font-size:1.3em; font-variant-numeric:tabular-nums; }
.progreso__nota{ margin:0 0 18px; font-size:14px; color:var(--tinta-suave); }

.barra{
  position:relative; height:22px; border-radius:999px;
  background:#FFE0EC; box-shadow:inset 0 2px 5px rgba(110,10,43,.12);
  overflow:hidden;
}
.barra__relleno{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--fucsia),var(--coral),var(--dorado),var(--turquesa));
  background-size:300% 100%;
  animation:paseoBarra 4s linear infinite;
  transition:width 1.8s cubic-bezier(.22,.9,.24,1);
  box-shadow:0 0 14px rgba(255,31,109,.4);
}
@keyframes paseoBarra{ to{ background-position:300% 50%; } }
.barra__chispa{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  font-size:18px; transition:left 1.8s cubic-bezier(.22,.9,.24,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* =========================================================
   MURO
   ========================================================= */
.seccion__titulo{
  margin:0 0 6px; text-align:center; font-weight:900; color:var(--vino);
  font-size:clamp(28px,7.5vw,44px); text-wrap:balance;
  text-shadow:0 3px 0 rgba(255,255,255,.7);
}
.seccion__sub{ margin:0 0 20px; text-align:center; font-size:15px; color:var(--tinta-suave); }

/* Controles pegajosos */
.controles{
  position:sticky; top:0; z-index:20;
  padding:12px 0 10px; margin-bottom:6px;
  background:linear-gradient(180deg,rgba(255,243,236,.97) 66%,rgba(255,243,236,0));
  backdrop-filter:blur(10px);
}
.buscador{ position:relative; margin-bottom:10px; }
.buscador__lupa{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:17px; }
.buscador input{
  width:100%; min-height:52px; padding:14px 18px 14px 48px;
  font-size:16px; font-family:inherit; font-weight:600; color:var(--tinta);
  background:#fff; border:3px solid var(--fucsia); border-radius:999px; outline:none;
  box-shadow:0 6px 18px rgba(255,31,109,.16);
  transition:box-shadow .2s ease;
}
.buscador input::placeholder{ font-weight:500; color:#C98CA5; }
.buscador input:focus{ box-shadow:0 0 0 5px rgba(255,31,109,.16); }

.chips{
  display:flex; gap:8px; overflow-x:auto; padding:3px 0 5px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; scroll-snap-align:start;
  min-height:44px; padding:10px 18px; white-space:nowrap;
  font-family:inherit; font-size:14px; font-weight:900; cursor:pointer;
  color:var(--vino); background:#fff; border:none; border-radius:999px;
  box-shadow:inset 0 0 0 2.5px #FFC9DC, 0 3px 8px rgba(110,10,43,.08);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-2px); }
.chip--activo{
  color:#fff;
  background:linear-gradient(100deg,var(--fucsia),var(--coral));
  box-shadow:0 8px 18px rgba(255,31,109,.36);
  transform:scale(1.06);
}

.resultados{ margin:4px 0 16px; font-size:14px; font-weight:700; color:var(--tinta-suave); }

/* ===== Rejilla: DOS columnas desde móvil ===== */
.rejilla{
  display:grid; grid-template-columns:repeat(2,1fr); gap:46px 12px;
  align-items:start; margin-top:44px;
}

.tarjeta{
  perspective:1400px;
  opacity:0; transform:translateY(26px);
  animation:entrar .6s cubic-bezier(.22,.9,.24,1) forwards;
  /* Tope de 11: con 150 empleados un escalonado sin límite dejaba la
     última tarjeta invisible 10 segundos. */
  animation-delay:calc(min(var(--i), 11) * 65ms);
  padding-top:40px;          /* hueco para el círculo que sobresale */
}
@keyframes entrar{ to{ opacity:1; transform:none; } }
.tarjeta[hidden]{ display:none; }

.tarjeta__giro{
  position:relative; width:100%; min-height:236px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.38,.12,.2,1);
}
.tarjeta.volteada .tarjeta__giro{ transform:rotateY(180deg); }

/* ===== Cara tipo polaroid ===== */
.cara{
  position:relative; display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--papel); border-radius:28px; padding:50px 14px 15px;
  text-align:center;
  box-shadow:0 12px 28px color-mix(in srgb, var(--acento) 42%, transparent),
             inset 0 0 0 2.5px color-mix(in srgb, var(--acento) 26%, #fff);
}
.cara--reverso{
  position:absolute; inset:0;
  transform:rotateY(180deg); overflow:auto;
  padding:16px 14px; text-align:left;
}

/* La ilustración va en un círculo que sobresale por encima de la tarjeta */
.cara__foto{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:84px; height:84px; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:4px solid var(--acento);
  background-color:color-mix(in srgb, var(--acento) 26%, #fff);
  background-image:radial-gradient(color-mix(in srgb, var(--acento) 45%, #fff) 1.5px, transparent 1.6px);
  background-size:12px 12px;
  box-shadow:0 0 0 5px var(--papel),
             0 10px 20px color-mix(in srgb, var(--acento) 50%, transparent);
}
.cara__emoji{
  font-size:44px; line-height:1; display:inline-block;
  filter:drop-shadow(0 3px 6px rgba(110,10,43,.22));
}
.tarjeta:hover .cara__emoji{ animation:rebote .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes rebote{ 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-16px) scale(1.18) rotate(-10deg)} }

.cara__nombre{
  margin:0 0 2px; font-size:13.5px; font-weight:900;
  color:var(--vino); line-height:1.25;
  /* Una sola línea: con nombres de cuatro palabras las tarjetas quedaban
     de alturas distintas y la rejilla se veía desordenada. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cara__nombre--rev{ margin-top:0; font-size:15px; white-space:normal; }
.cara__area{
  /* Sin fondo sólido: con pastilla de color competía con el botón real
     y la gente la leía como si fuera pulsable. */
  margin:0 0 9px; font-size:9.5px; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--acento) 80%, #000);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.etiquetas{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:0 0 12px; padding:0; list-style:none; }
.etiquetas li{
  padding:4px 9px; border-radius:999px; font-size:10px; font-weight:900;
  color:color-mix(in srgb, var(--acento) 82%, #000);
  background:color-mix(in srgb, var(--acento) 26%, #fff);
}

.tarjeta__accion{
  margin-top:auto; min-height:40px; padding:10px 8px; width:100%;
  font-family:inherit; font-size:12.5px; font-weight:900; cursor:pointer;
  color:#fff; border:none; border-radius:999px;
  background:linear-gradient(100deg, var(--acento), color-mix(in srgb, var(--acento) 66%, #FF6B3D));
  box-shadow:0 5px 13px color-mix(in srgb, var(--acento) 42%, transparent);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.tarjeta__accion:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.tarjeta__accion--volver{ background:var(--vino); box-shadow:0 5px 13px rgba(110,10,43,.34); }

.ficha{
  display:grid; grid-template-columns:auto 1fr; gap:4px 9px;
  margin:0 0 10px; font-size:11.5px; line-height:1.4;
}
.ficha dt{ font-weight:900; color:var(--tinta-suave); }
.ficha dd{ margin:0; color:var(--tinta); }

.aviso{ margin-bottom:8px; padding:9px 10px; border-radius:12px; }
.aviso__eti{ margin:0 0 2px; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.aviso__txt{ margin:0; font-size:11.5px; line-height:1.4; }
.aviso--deseo{ background:#FFF3D6; }
.aviso--deseo .aviso__eti{ color:#8A5A00; }
.aviso--deseo .aviso__txt{ color:#4A2F00; }
.aviso--ojo{ background:var(--vino); }
.aviso--ojo .aviso__eti{ color:#FFB8CE; }
.aviso--ojo .aviso__txt{ color:#fff; font-weight:700; }

/* Tarjeta pendiente: misma polaroid, pero con avatar de iniciales.
   Antes era un "?" suelto sobre fondo translúcido y el muro se veía roto
   mientras nadie hubiera llenado su ficha. */
.tarjeta--fantasma{
  position:relative; display:flex; flex-direction:column;
  text-align:center; padding:90px 14px 15px;
  background:var(--papel); border-radius:28px;
  box-shadow:0 12px 28px color-mix(in srgb, var(--acento) 32%, transparent),
             inset 0 0 0 2.5px color-mix(in srgb, var(--acento) 22%, #fff);
}

.cara__foto--vacia{ background-image:none; top:0; }
.cara__foto--vacia::after{ content:none; }
.avatar{
  display:block; width:100%; height:100%; border-radius:50%;
  animation:respirar 4s ease-in-out infinite;
}
@keyframes respirar{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }

.tarjeta--fantasma .cara__nombre{ font-size:14.5px; }
.tarjeta--fantasma .cara__area{ color:color-mix(in srgb, var(--acento) 72%, #000); }
.fantasma__txt{
  margin:12px 0 0; padding:9px 8px;
  font-size:11px; font-weight:800; line-height:1.4;
  color:color-mix(in srgb, var(--acento) 82%, #000);
  background:color-mix(in srgb, var(--acento) 22%, #fff);
  border-radius:999px;
}

.vacio{ margin:44px 0; text-align:center; font-size:16px; color:var(--tinta-suave); }
.mas{ display:flex; justify-content:center; margin:26px 0 8px; }

/* =========================================================
   REGISTRO + PIE
   ========================================================= */
.registro{
  position:relative; overflow:hidden;
  margin:44px 0 36px; padding:40px 22px; text-align:center;
  border-radius:var(--radio);
  background:linear-gradient(140deg,var(--vino),#B0104E 50%,var(--fucsia));
  box-shadow:0 20px 44px rgba(110,10,43,.34);
}
/* Patrón de corazones dentro del bloque */
.registro::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 27c-5-5-8-8-8-12a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 4-3 7-8 12z' fill='%23ffffff' fill-opacity='.12'/%3E%3Ccircle cx='45' cy='44' r='3' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E");
}
.registro > *{ position:relative; }
.registro__titulo{ margin:0 0 10px; font-size:clamp(25px,6.5vw,38px); font-weight:900; color:#fff; }
.registro__txt{ margin:0 auto 24px; max-width:450px; font-size:15px; line-height:1.6; color:#FFD9E5; }

.pie{ text-align:center; font-size:13px; line-height:1.7; color:var(--tinta-suave); }
.pie p{ margin:0 0 4px; }

/* =========================================================
   BARRA FIJA MÓVIL
   ========================================================= */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,243,236,.96); backdrop-filter:blur(12px);
  box-shadow:0 -4px 20px rgba(110,10,43,.12);
  transform:translateY(120%); transition:transform .4s cubic-bezier(.22,.9,.24,1);
}
.barra-movil.visible{ transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:480px){
  .cara__foto{ width:96px; height:96px; top:-46px; }
  .rejilla{ margin-top:50px; }
  .tarjeta{ padding-top:46px; }
  .rejilla{ gap:54px 18px; }
  .cara{ padding-top:56px; }
  .tarjeta--fantasma{ padding-top:102px; }
  .cara__emoji{ font-size:48px; }
  .cara__nombre{ font-size:15px; }
  .cara__area{ font-size:10.5px; }
  .etiquetas li{ font-size:11px; }
  .tarjeta__accion{ font-size:13.5px; min-height:44px; }
  .tarjeta__giro{ min-height:252px; }
}
@media (min-width:600px){
  .cuenta{ grid-template-columns:repeat(4,1fr); max-width:520px; }
  .rejilla{ grid-template-columns:repeat(3,1fr); gap:54px 18px; }
  .envoltorio{ padding:0 18px 60px; }
  .barra-movil{ display:none; }
  .hero{ padding-top:26px; }
}
@media (min-width:960px){
  .rejilla{ grid-template-columns:repeat(4,1fr); gap:54px 22px; }
  .guirnalda{ height:80px; }
}
@media (min-width:1200px){
  .rejilla{ grid-template-columns:repeat(5,1fr); }
}

/* Sin hover (táctil): respira el emoji, NO la tarjeta.
   Mover la tarjeta completa hace que el botón se escape del dedo. */
@media (hover:none){
  .tarjeta:not(.volteada) .cara__emoji{
    animation:flotarEmoji 4.5s ease-in-out infinite;
    animation-delay:calc(var(--i) * 220ms);
  }
  @keyframes flotarEmoji{
    0%,100%{ transform:translateY(0) rotate(0); }
    50%    { transform:translateY(-8px) rotate(6deg) scale(1.08); }
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
:focus-visible{ outline:3px solid var(--fucsia); outline-offset:3px; border-radius:10px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .corazones,.blob,.confeti,.canon{ display:none !important; }
  /* Sin esto las letras se quedaban invisibles: nacen en opacity:0 y solo
     la animación las revela. Hay que devolverlas al estado final a mano. */
  .hero__titulo .letra{ animation:none !important; opacity:1 !important; transform:none !important; }
  .reveal,.tarjeta{ opacity:1; transform:none; }
  .barra-movil{ transform:none; }
}

/* =========================================================
   PÁGINAS INTERNAS (ingreso, formulario, admin)
   ========================================================= */
.pagina-simple{ padding:0; }

.tarjeta-centro{
  position:relative; z-index:1;
  max-width:520px; margin:0 auto; padding:24px 16px 60px;
}
.tarjeta-centro--ancha{ max-width:720px; }

.volver-inicio{
  display:inline-block; margin-bottom:14px; padding:8px 4px;
  font-size:14px; font-weight:900; color:var(--vino); text-decoration:none;
}
.volver-inicio:hover{ color:var(--fucsia); }

.panel{
  position:relative;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-radius:var(--radio); padding:30px 20px;
  box-shadow:var(--sombra), inset 0 0 0 3px rgba(255,31,109,.1);
  text-align:center;
}
.panel--form{ text-align:left; }
.panel__emoji{ margin:0 0 8px; font-size:46px; line-height:1; text-align:center;
  animation:bailar 3s ease-in-out infinite; }
.panel__titulo{ margin:0 0 6px; font-size:clamp(22px,6vw,30px); font-weight:900;
  color:var(--vino); text-align:center; }
.panel__sub{ margin:0 0 22px; font-size:15px; line-height:1.55;
  color:var(--tinta-suave); text-align:center; }
.panel__pie{ margin:20px 0 0; font-size:13px; line-height:1.5; color:var(--tinta-suave); }

.formulario{ display:flex; flex-direction:column; gap:16px; text-align:left; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo__eti{ font-size:14px; font-weight:900; color:var(--vino); }
.campo__pista{ font-size:12.5px; line-height:1.45; color:var(--tinta-suave); }
.campo input, .campo select, .campo textarea{
  width:100%; min-height:50px; padding:13px 16px;
  font-family:inherit; font-size:16px; color:var(--tinta);
  background:#fff; border:2.5px solid #FFC9DC; border-radius:14px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campo textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--fucsia); box-shadow:0 0 0 4px rgba(255,31,109,.14);
}
.campo--ojo .campo__eti{ color:#B0104E; }
.campo--ojo textarea{ border-color:#F5A8BF; background:#FFF6F8; }

.doble{ display:grid; grid-template-columns:1fr; gap:16px; }

.grupo{ margin:0; padding:18px 16px; border:2.5px solid #FFDCE8; border-radius:18px; }
.grupo__titulo{ padding:0 6px; font-size:15px; font-weight:900; color:var(--vino); }
.grupo__pista{ margin:2px 0 12px; font-size:13px; color:var(--tinta-suave); }

.emojis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; }
.emoji-opcion input{ position:absolute; opacity:0; width:0; height:0; }
.emoji-opcion span{
  display:flex; align-items:center; justify-content:center;
  min-height:52px; font-size:26px; cursor:pointer;
  background:#fff; border:2.5px solid #FFDCE8; border-radius:14px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease;
}
.emoji-opcion span:hover{ transform:scale(1.12); }
.emoji-opcion input:checked + span{
  border-color:var(--fucsia); background:#FFEFF5; transform:scale(1.16);
  box-shadow:0 6px 16px rgba(255,31,109,.28);
}
.emoji-opcion input:focus-visible + span{ outline:3px solid var(--fucsia); outline-offset:2px; }

.chips-form{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip-form input{ position:absolute; opacity:0; width:0; height:0; }
.chip-form span{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  font-size:14px; font-weight:800; color:var(--vino); cursor:pointer;
  background:#fff; border:2.5px solid #FFC9DC; border-radius:999px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease;
}
.chip-form span:hover{ transform:translateY(-2px); }
.chip-form input:checked + span{
  color:#fff; border-color:transparent;
  background:linear-gradient(100deg,var(--fucsia),var(--coral));
}
.chip-form input:focus-visible + span{ outline:3px solid var(--fucsia); outline-offset:2px; }

.acciones{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }

.avisos{ position:relative; z-index:2; max-width:720px; margin:14px auto 0; padding:0 16px; }
.nota{
  margin:0 0 10px; padding:13px 16px; border-radius:14px;
  font-size:14px; line-height:1.5; font-weight:800;
}
.nota--ok{ background:#DFF9F3; color:#08574E; border:2px solid #8EE2D4; }
.nota--error{ background:#FFE5ED; color:#93103A; border:2px solid #F5A8BF; }
.nota--aviso{ background:#FFF3D6; color:#7A5200; border:2px solid #F3D28C; }

.sesion{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end;
  max-width:1180px; margin:0 auto; padding:12px 16px 0;
  font-size:14px; color:var(--tinta-suave);
}
.sesion a{ font-weight:900; color:var(--fucsia); text-decoration:none; padding:6px 2px; }
.sesion a:hover{ text-decoration:underline; }

/* ===== PANEL ADMIN ===== */
.pagina-admin{ background:#FDF7F4; background-image:none; animation:none; }
.admin{ max-width:1100px; margin:0 auto; padding:24px 18px 70px; }
.admin__cabecera{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between; margin-bottom:22px;
}
.admin__titulo{ margin:0; font-size:clamp(22px,5vw,30px); font-weight:900; color:var(--vino); }
.admin__sub{ margin:4px 0 0; font-size:14px; color:var(--tinta-suave); }
.admin__acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.admin__acciones .btn{ min-height:44px; padding:10px 18px; font-size:14px; }

.fichas{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:26px; }
.ficha-dato{
  padding:18px 16px; background:#fff; border-radius:18px;
  border:1px solid #F2DDE4; box-shadow:var(--sombra); text-align:center;
}
.ficha-dato__num{ display:block; font-size:32px; font-weight:900; color:var(--vino); line-height:1; }
.ficha-dato__eti{ display:block; margin-top:6px; font-size:12px; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave); }
.ficha-dato--ok .ficha-dato__num{ color:#0A8C79; }
.ficha-dato--pend .ficha-dato__num{ color:var(--coral); }

.bloque{
  margin-bottom:22px; padding:22px 18px; background:#fff;
  border:1px solid #F2DDE4; border-radius:18px; box-shadow:var(--sombra);
}
.bloque__titulo{ margin:0 0 8px; font-size:18px; font-weight:900; color:var(--vino); }
.bloque__pista{ margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--tinta-suave); }
.bloque__pista code{
  padding:2px 6px; background:#FFEFF5; border-radius:6px;
  font-size:13px; color:#B0104E;
}

.fila-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.fila-form input[type=file]{ flex:1; min-width:220px; font-size:14px; }
.fila-form .btn{ min-height:46px; padding:11px 20px; font-size:14px; }

.tabla-envoltura{ overflow-x:auto; }
.tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.tabla th, .tabla td{ padding:11px 10px; text-align:left; border-bottom:1px solid #F4E4EA; }
.tabla th{ font-size:12px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); white-space:nowrap; }
.tabla tr.inactivo{ opacity:.45; }
.tabla tr[hidden]{ display:none; }

.mini-barra{ display:inline-block; width:90px; height:8px; background:#FFE0EC;
  border-radius:999px; overflow:hidden; vertical-align:middle; margin-right:6px; }
.mini-barra div{ height:100%; background:linear-gradient(90deg,var(--fucsia),var(--dorado)); }

.pin{ display:inline-block; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:900; white-space:nowrap; }
.pin--ok{ background:#DBF7F0; color:#08574E; }
.pin--pend{ background:#FFEEE2; color:#A33D14; }

.acciones-fila{ display:flex; gap:6px; flex-wrap:wrap; }
.acciones-fila form{ margin:0; }
.mini{
  min-height:36px; padding:7px 12px; font-family:inherit; font-size:12.5px;
  font-weight:900; cursor:pointer; color:var(--vino);
  background:#fff; border:1.5px solid #FFC9DC; border-radius:999px;
  white-space:nowrap; transition:background .2s ease;
}
.mini:hover{ background:#FFEFF5; }
.mini--peligro{ color:#93103A; border-color:#F5A8BF; }

.filtro-tabla{
  width:100%; min-height:46px; margin-bottom:14px; padding:12px 16px;
  font-family:inherit; font-size:15px; background:#fff;
  border:2.5px solid #FFC9DC; border-radius:14px; outline:none;
}
.filtro-tabla:focus{ border-color:var(--fucsia); }

.lista-faltantes{ display:grid; grid-template-columns:1fr; gap:6px; margin:0; padding:0; list-style:none; }
.lista-faltantes li{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 13px; background:#FFF6F9; border-radius:10px; font-size:14px;
}
.lista-faltantes span{ color:var(--tinta-suave); font-size:13px; }

@media (min-width:640px){
  .doble{ grid-template-columns:1fr 1fr; }
  .acciones{ flex-direction:row; }
  .acciones .btn--bloque{ width:auto; flex:1; }
  .fichas{ grid-template-columns:repeat(4,1fr); }
  .lista-faltantes{ grid-template-columns:repeat(2,1fr); }
  .panel{ padding:34px 30px; }
}
@media (min-width:960px){
  .lista-faltantes{ grid-template-columns:repeat(3,1fr); }
}