/* ═══════════════════════════════════════════════════════════
   MOTIVO — hoja de estilo común (landing + tarjeta privada)
   Brandboard oficial: sky #8FD4FC · tomato #F71106 · cream #FFF6EC
   Acabado: cera sobre papel. Nada metálico, nada brillante.
   ═══════════════════════════════════════════════════════════ */
:root{
  --sky:#8FD4FC;
  --sky-soft:#CBEAFD;
  --sky-deep:#6BC3F5;
  --red:#F71106;
  --red-deep:#CB1B14;
  --cream:#FFF6EC;
  --black:#1F1A17;
  --ink-soft:rgba(31,26,23,.66);
  --ease:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.34,1.38,.44,1);
  --display:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Nunito","Poppins",-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--sky);
  color:var(--black);
  min-height:100svh;
  overflow-x:hidden;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ── Fondo ──
   Sin textura: un halo de luz muy abierto detrás de la tarjeta sobre el azul de
   marca. Da profundidad sin materia, que es justo lo que faltaba — la cera a
   pantalla completa salía brusca y el color plano, soso.
   CSS puro: cero peticiones, cero imagen que cargar. */
.paint{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(85% 55% at 50% 42%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 75%),
    linear-gradient(178deg, #93D6FC 0%, #7CC5F5 100%);
}

/* ═══════════ Nav ═══════════ */
.nav{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(9px,1.7vh,16px) clamp(16px,5vw,44px);
  padding:clamp(9px,1.7svh,16px) clamp(16px,5vw,44px);
}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--red)}
.lockup img{width:27px;height:auto;display:block}
.lockup span{
  font-family:var(--display);
  font-size:19px;font-weight:800;letter-spacing:.1em;line-height:1;
}
.nav-link{
  font-family:var(--display);
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  padding:7px 2px;border-bottom:1.5px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nav-link:hover{color:var(--red);border-color:var(--red)}
/* El "Salir" del panel es un <button>: hay que quitarle el disfraz de botón */
button.nav-link{background:none;border-width:0 0 1.5px;cursor:pointer;font-family:var(--display)}

/* Redes en la barra: a la vista desde el primer segundo */
.social{display:flex;align-items:center;gap:6px}
.social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--red);text-decoration:none;
  transition:background .25s var(--ease),transform .25s var(--snap);
}
.social a:hover{background:rgba(255,246,236,.7);transform:translateY(-1px)}
.social svg{width:19px;height:19px;display:block}

/* ═══════════ Layout ═══════════ */
main{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(2px,1vh,16px) clamp(16px,5vw,32px) clamp(16px,2.4vh,34px);
  text-align:center;
}
/* El titular y la entradilla respiran a lo ancho; el formulario no. */
.head{width:100%;max-width:700px}
.stage{width:100%;max-width:430px}

h1{
  font-family:var(--display);
  /* Una sola línea siempre, y lo más grande que quepa. Medido: el titular
     ocupa ~8× el tamaño de fuente y en móvil el ancho útil es 0.9vw, así que
     9.4vw deja un 15% de aire por los lados. El límite por altura es lo que
     evita un titular gigante en pantallas anchas y bajas (1024×600, portátil
     con poca altura, móvil en horizontal). */
  font-size:max(1.6rem, min(9.4vw, 4.4rem, 11vh));
  font-size:max(1.6rem, min(9.4vw, 4.4rem, 11svh));
  white-space:nowrap;
  font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--red);
  animation:rise .8s var(--ease) .05s both;
}
/* Ya registrada: el titular sigue arriba, más contenido que el gancho pero
   sin quedarse en un pie de foto */
h1.chico{
  font-size:max(1.35rem, min(7vw, 2.8rem, 7.5vh));
  font-size:max(1.35rem, min(7vw, 2.8rem, 7.5svh));
  letter-spacing:-.025em;
}
.sub{
  font-size:max(12.5px, min(3.7vw, 16.5px, 2.4vh));
  font-size:max(12.5px, min(3.7vw, 16.5px, 2.4svh));
  line-height:1.5;
  color:var(--black);opacity:.82;
  max-width:68ch;
  margin:clamp(10px,1.6vh,14px) auto 0;
  animation:rise .8s var(--ease) .15s both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ═══════════ TARJETA ═══════════ */
.card-wrap{
  perspective:1400px;transform-style:preserve-3d;
  margin:clamp(10px,2.1vh,22px) auto clamp(11px,2.1vh,22px);
  animation:land 1.1s var(--snap) .2s both;
}
@keyframes land{from{opacity:0;transform:translateY(24px) scale(.93)}to{opacity:1;transform:none}}
.card-float{transform-style:preserve-3d;animation:float 8s ease-in-out 1.3s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.card{
  --rx:0deg;--ry:0deg;--sx:38%;--sy:22%;
  /* El tercer término es el que hace que quepa: la tarjeta también obedece a
     la ALTURA de la pantalla, no solo al ancho. Sin él, en cualquier pantalla
     baja el formulario se iba fuera de vista. */
  --card-alto:24vh;
  --card-alto:24svh;
  width:var(--card-w,min(60vw,222px,var(--card-alto)));
  aspect-ratio:1080/1712;margin:0 auto;
  /* Todo lo de dentro se mide en cqw = % del ancho de ESTA tarjeta, no del
     viewport. Así la tarjeta se ve idéntica mida 130 px o 300, que es lo que
     permite encogerla por altura sin que se descuadre nada. */
  container-type:inline-size;
  border-radius:7%/4.4%;
  position:relative;overflow:hidden;
  padding:8% 7.5%;
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc,1));
  transition:transform .28s var(--ease);
  /* Chapa esmaltada: bandas frías y cálidas en diagonal sobre el azul de marca.
     Sin marco: el relieve blanco de alrededor se quitó a propósito. */
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 17%,
      rgba(31,26,23,.06) 33%, rgba(255,255,255,.42) 46%,
      rgba(255,255,255,0) 58%, rgba(31,26,23,.08) 74%,
      rgba(255,255,255,.34) 88%, rgba(255,255,255,0) 100%),
    linear-gradient(160deg,var(--sky-soft) 0%,var(--sky) 46%,var(--sky-deep) 100%);
  box-shadow:
    0 1px 2px rgba(31,26,23,.2),
    0 26px 44px -20px rgba(31,26,23,.5),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(31,26,23,.12);
}
/* Un velo de cera muy fino: sin él el metal se ve de plástico */
.card .tex{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("../assets/cera.jpg?v=2");
  background-size:170px 170px;
  mix-blend-mode:overlay;opacity:.45;
}
/* Reflejo especular: se desplaza con la inclinación, es lo que la hace metal */
.card .shine{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(52% 38% at var(--sx) var(--sy),rgba(255,255,255,.72) 0%,rgba(255,255,255,.18) 40%,transparent 68%);
  mix-blend-mode:soft-light;
  transition:background .2s ease-out;
}
.card-in{position:relative;z-index:3;display:flex;flex-direction:column;height:100%;width:100%}

/* Jerarquía de la tarjeta: MOTIVO primero, el nombre después. Se sostiene con
   cuerpo Y con peso — el nombre lleva carácter (600), pero ni es tan grande ni
   tan pesado como la marca. */
.c-brand{
  font-family:var(--display);
  font-size:clamp(16px,4.7vw,22px);
  font-size:8.8cqw;
  font-weight:800;letter-spacing:.1em;
  /* El tracking deja un hueco sobrante DETRÁS de la última letra y el centrado
     lo cuenta como texto: sin compensar, la palabra se ve corrida a la
     izquierda media letra. */
  text-indent:.065em;
  color:var(--red);text-align:center;text-transform:uppercase;line-height:1;
}
.c-mark{
  width:82%;margin:auto;display:block;
  filter:drop-shadow(0 6px 12px rgba(203,27,20,.26));
}
.c-name{
  font-family:var(--display);
  font-size:clamp(13px,3.8vw,17.5px);
  font-size:7cqw;
  font-weight:600;letter-spacing:.03em;text-indent:.03em;
  color:var(--red);line-height:1;text-align:center;
  margin:auto 0 6%;
  overflow-wrap:anywhere;
}
.c-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;width:100%}
.c-foot > div:first-child{padding-bottom:2%}
.c-num-lbl{
  font-family:var(--display);
  font-size:clamp(5.2px,1.5vw,6.6px);
  font-size:2.7cqw;
  font-weight:700;letter-spacing:.24em;
  color:var(--red);text-transform:uppercase;
}
.c-num{
  font-family:var(--display);
  font-size:clamp(13px,3.9vw,18px);
  font-size:7.2cqw;
  font-weight:700;letter-spacing:.04em;
  color:var(--red);line-height:1.05;font-variant-numeric:tabular-nums;
}
.c-qr{
  width:34%;aspect-ratio:1;flex:none;
  background:var(--cream);border-radius:14%;overflow:hidden;
  box-shadow:0 1px 3px rgba(31,26,23,.16);
}
.c-qr svg{width:100%;height:100%;display:block}

/* ═══════════ Formulario ═══════════ */
form{animation:rise .8s var(--ease) .3s both}
.fields{display:flex;flex-direction:column;gap:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.inp{
  width:100%;
  height:clamp(44px,6.4vh,50px);
  height:clamp(44px,6.4svh,50px);
  border-radius:999px;
  border:1.5px solid rgba(31,26,23,.1);background:var(--cream);
  font-family:var(--body);font-size:16px;font-weight:600;color:var(--black);
  padding:0 20px;outline:0;
  box-shadow:0 1px 2px rgba(31,26,23,.06),0 10px 24px -18px rgba(31,26,23,.6);
  transition:border-color .26s var(--ease),box-shadow .26s var(--ease);
}
.inp::placeholder{color:rgba(31,26,23,.36);font-weight:400}
.inp:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(247,17,6,.16)}
button.cta{
  width:100%;
  height:clamp(46px,6.8vh,52px);
  height:clamp(46px,6.8svh,52px);
  margin-top:8px;
  border:0;cursor:pointer;border-radius:999px;
  font-family:var(--display);font-size:15px;font-weight:700;
  color:#fff;background:var(--red);
  box-shadow:0 8px 20px -9px rgba(203,27,20,.95);
  transition:transform .22s var(--snap),background .22s var(--ease),box-shadow .22s var(--ease);
}
button.cta:hover{background:var(--red-deep);transform:translateY(-2px)}
button.cta:active{transform:translateY(1px) scale(.99)}
button.cta:disabled{opacity:.65;cursor:wait;transform:none}
button.cta .spin{
  display:none;width:16px;height:16px;border-radius:50%;margin:0 auto;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
button.cta[data-loading] .spin{display:block}
button.cta[data-loading] .label{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.consent{
  display:flex;align-items:flex-start;gap:9px;
  margin:10px 4px 0;text-align:left;cursor:pointer;
  font-size:11.5px;line-height:1.4;color:var(--ink-soft);
}
.consent input{
  appearance:none;flex:none;width:20px;height:20px;margin-top:1px;
  border:1.5px solid rgba(31,26,23,.3);border-radius:6px;background:var(--cream);
  cursor:pointer;position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
/* El halo que se escapa al marcar */
.consent input::before{
  content:"";position:absolute;inset:-5px;border-radius:11px;
  border:2px solid var(--red);opacity:0;transform:scale(.6);pointer-events:none;
}
/* La marca, que se dibuja de golpe con un punto de rebote */
.consent input::after{
  content:"";position:absolute;left:6.5px;top:2.5px;
  width:5px;height:10px;border:solid #fff;border-width:0 2.2px 2.2px 0;
  transform:rotate(42deg) scale(0);transform-origin:center;
  transition:transform .3s var(--snap);
}
.consent input:hover{border-color:rgba(247,17,6,.55)}
.consent input:checked{background:var(--red);border-color:var(--red);animation:marcar .34s var(--snap)}
.consent input:checked::after{transform:rotate(42deg) scale(1)}
.consent input:checked::before{animation:halo .5s var(--ease) forwards}
@keyframes marcar{0%{transform:scale(.85)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes halo{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(1.55)}}
.consent a{color:var(--ink-soft);text-underline-offset:2px}
.error{color:var(--red-deep);font-size:12.5px;font-weight:700;margin-top:7px}
.error:empty{margin-top:0}

/* ── Estado post-registro ── */
.done{display:none;animation:rise .7s var(--ease) both}
.done.on{display:block}
form.off{display:none}
/* Sin titular propio: el "Ya eres miembro" pasa arriba, al h1 */
.done p{font-size:13.5px;line-height:1.5;color:var(--black);opacity:.82;max-width:38ch;margin:0 auto 16px}
.acts{display:flex;flex-direction:column;gap:8px}
.acts-2{display:flex;gap:8px;margin-top:8px}
.acts-2 > *{flex:1;min-width:0}
.btn-ghost{
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(31,26,23,.2);background:rgba(255,246,236,.55);cursor:pointer;
  font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--black);
  text-decoration:none;
  height:clamp(40px,5.8vh,46px);
  height:clamp(40px,5.8svh,46px);
  border-radius:999px;
  transition:border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--snap);
}
.btn-ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.btn-ghost:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ghost svg{width:17px;height:17px;flex:none;margin-right:8px}
.pista{
  font-size:11.5px;line-height:1.45;color:var(--ink-soft);
  margin:10px auto 0;max-width:34ch;
}
.pista:empty{margin:0}   /* sin mensaje no ocupa ni un píxel */

footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(31,26,23,.12);
  padding:clamp(9px,1.5vh,14px) clamp(16px,5vw,44px)
          calc(clamp(9px,1.5vh,14px) + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;
  font-size:11px;color:var(--ink-soft);
}
footer a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
footer a:hover{color:var(--red)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}

/* ═══════════ Páginas de texto (privacidad, términos, preguntas) ═══════════ */
.doc main{
  display:block;text-align:left;
  padding:clamp(18px,4vh,40px) clamp(18px,5vw,32px) clamp(30px,6vh,60px);
}
.doc article{
  max-width:680px;margin:0 auto;
  background:rgba(255,246,236,.82);
  border-radius:22px;
  padding:clamp(22px,5vw,44px);
  box-shadow:0 18px 40px -28px rgba(31,26,23,.5);
}
.doc h1{
  font-size:clamp(1.7rem,6.4vw,2.6rem);white-space:normal;
  line-height:1.02;margin-bottom:6px;animation:none;
}
.doc .stamp{
  font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:22px;
}
.doc h2{
  font-family:var(--display);
  font-size:clamp(1rem,3.4vw,1.15rem);font-weight:800;color:var(--red);
  letter-spacing:-.01em;margin:26px 0 8px;
}
.doc p,.doc li{font-size:15px;line-height:1.62;color:var(--black)}
.doc p{margin-bottom:12px}
.doc ul{margin:0 0 12px 20px}
.doc li{margin-bottom:7px}
.doc a{color:var(--red-deep);text-underline-offset:3px}
.doc strong{font-weight:700}
.doc .aviso{
  border:1.5px dashed rgba(203,27,20,.45);border-radius:14px;
  padding:14px 16px;margin:20px 0;
  font-size:13.5px;line-height:1.55;color:var(--red-deep);background:rgba(247,17,6,.05);
}
.doc .volver{display:inline-flex;margin-top:26px}
.doc .redes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.doc .redes a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--display);font-size:14px;font-weight:600;color:var(--black);
  border:1.5px solid rgba(31,26,23,.2);border-radius:999px;padding:9px 16px;
  transition:border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--snap);
}
.doc .redes a:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.doc .redes svg{width:17px;height:17px;flex:none}

/* ═══════════ Página privada de la tarjeta ═══════════ */
.solo main{gap:2px}
.solo .card{--card-w:min(74vw,286px,32vh);--card-w:min(74vw,286px,32svh)}
.solo .eyebrow{
  font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* Aquí el titular es el nombre de la persona: puede ser largo y debe poder partir */
.solo h1{font-size:clamp(1.4rem,7vw,2.6rem);margin-top:6px;white-space:normal;overflow-wrap:anywhere}
.solo .stage{max-width:360px}

/* Cuando la altura aprieta de verdad, la entradilla sobra: el titular y la
   tarjeta ya cuentan la historia, y lo que no puede quedar fuera es el botón. */
@media(max-height:640px){
  .sub{display:none}
  .card{--card-alto:20vh;--card-alto:20svh}
  .consent{font-size:10.5px}
}

/* Pantalla apaisada y baja (el móvil girado, un portátil viejo): apilar deja
   el botón fuera de vista. En dos columnas cabe todo y la tarjeta hasta crece. */
@media(max-height:620px) and (min-width:700px){
  .stage{
    display:grid;grid-template-columns:auto minmax(260px,340px);
    align-items:center;column-gap:clamp(22px,4vw,48px);
    max-width:none;width:auto;
  }
  .card-wrap{grid-column:1;grid-row:1;margin:0}
  form,.done{grid-column:2;grid-row:1;width:100%}
  .card{--card-alto:56vh;--card-alto:56svh}
  .head{margin-bottom:clamp(4px,1.2vh,12px)}
}

@media(min-width:760px){
  .stage{max-width:470px}
  .card{--card-w:min(240px,29vh);--card-w:min(240px,29svh)}
  .solo .card{--card-w:min(300px,36vh);--card-w:min(300px,36svh)}
  footer{justify-content:space-between}
  .acts{flex-direction:row;justify-content:center}
  .acts > *{min-width:210px}
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

/* ═══════════════════════════════════════════════════════════
   Microdetalles
   Nada aquí cambia el layout: son respuestas a lo que hace la
   persona. Todo se apaga con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

/* ── El nombre aparece en la tarjeta según se escribe ── */
/* "TU NOMBRE" se ve igual que un nombre de verdad: mismo rojo, misma fuerza.
   Nada de textos de relleno apagados ni marcas de dónde irá. */

/* Al escribir, la tarjeta se acerca un punto: se está haciendo tuya */
.card.enfocada{--sc:1.035}

/* ── El campo que ya vale se marca solo ── */
.campo{position:relative;display:block}
.campo .tick{
  position:absolute;right:18px;top:50%;width:17px;height:17px;
  margin-top:-8.5px;pointer-events:none;
  color:var(--red);opacity:0;transform:scale(.5) rotate(-12deg);
  transition:opacity .28s var(--ease),transform .34s var(--snap);
}
.campo.ok .tick{opacity:1;transform:none}
.campo.ok .inp{border-color:rgba(247,17,6,.35);padding-right:44px}

/* ── El formulario niega con la cabeza si algo falta ── */
form.mal{animation:negar .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes negar{
  15%,85%{transform:translateX(-3px)} 30%,70%{transform:translateX(5px)}
  45%,55%{transform:translateX(-7px)} 100%{transform:none}
}
.error{transition:opacity .2s var(--ease)}

/* ── Un brillo cruza el botón al pasar por encima ── */
button.cta{position:relative;overflow:hidden;isolation:isolate}
button.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  transform:translateX(-110%);
}
button.cta:hover::after{animation:barrido .85s var(--ease)}
@keyframes barrido{to{transform:translateX(110%)}}

/* ── Destello en la tarjeta al hacerse tuya ── */
.card .flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
  opacity:0;
}
.card .flash.on{animation:destello .85s var(--ease)}
@keyframes destello{0%{opacity:0}22%{opacity:.85}100%{opacity:0}}

/* ── Las cosas entran escalonadas, no todas de golpe ── */
.nav{animation:rise .7s var(--ease) both}
footer{animation:rise .7s var(--ease) .5s both}
.acts{animation:rise .5s var(--ease) .08s both}
.acts-2{animation:rise .5s var(--ease) .16s both}
.pista{animation:rise .5s var(--ease) .24s both}

/* ── Los iconos de redes responden al dedo ── */
.social a{will-change:transform}
.social a:active{transform:scale(.9)}
.social svg{transition:transform .3s var(--snap)}
.social a:hover svg{transform:rotate(-6deg) scale(1.12)}

/* ── Botones: el press se nota ── */
.btn-ghost:active{transform:scale(.975)}
.btn-ghost svg{transition:transform .3s var(--snap)}
.btn-ghost:hover svg{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .card-float{animation:none}
  .card.enfocada{--sc:1}
}

/* ═══════════════════════════════════════════════════════════
   Panel de administración (/admin)
   Misma marca, otra densidad: aquí lo que importa son los datos.
   ═══════════════════════════════════════════════════════════ */
.admin main{display:block;text-align:left;padding:clamp(16px,3vh,30px) clamp(14px,4vw,32px) 40px}
.admin .caja{width:100%;max-width:960px;margin:0 auto}

/* Entrar */
.entrar{
  max-width:380px;margin:clamp(20px,8vh,80px) auto;
  background:rgba(255,246,236,.86);border-radius:22px;
  padding:clamp(22px,5vw,34px);
  box-shadow:0 18px 40px -28px rgba(31,26,23,.5);
  animation:rise .6s var(--ease) both;
}
.entrar h1{font-size:clamp(1.4rem,5.4vw,1.9rem);white-space:normal;margin-bottom:4px;animation:none}
.entrar p.lead{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.entrar .fields{gap:10px}

/* Resumen */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:18px 0}
.cifra{
  background:rgba(255,246,236,.8);border-radius:16px;padding:14px 16px;
  animation:rise .5s var(--ease) both;
}
.cifra b{
  display:block;font-family:var(--display);font-weight:800;color:var(--red);
  font-size:clamp(1.5rem,5vw,2rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cifra span{
  display:block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* Barra de acciones */
.barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.barra .buscar{
  flex:1;min-width:180px;height:42px;border-radius:999px;
  border:1.5px solid rgba(31,26,23,.12);background:rgba(255,246,236,.9);
  padding:0 16px;font-family:var(--body);font-size:14px;color:var(--black);outline:0;
  transition:border-color .25s var(--ease);
}
.barra .buscar:focus{border-color:var(--red)}
.barra button{
  height:42px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid rgba(31,26,23,.16);background:rgba(255,246,236,.7);
  font-family:var(--display);font-size:13px;font-weight:600;color:var(--black);
  transition:border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--snap);
}
.barra button:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}

/* Lista */
.lista{display:flex;flex-direction:column;gap:8px}
.fila{
  display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
  background:rgba(255,246,236,.82);border-radius:16px;padding:12px 14px;
  animation:rise .4s var(--ease) both;
}
button.fila-num,.fila .num{
  font-family:var(--display);font-weight:800;color:var(--red);
  font-size:17px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  border-bottom:1.5px dashed transparent;transition:border-color .2s var(--ease)}
.fila .num:hover{border-bottom-color:var(--red)}
.fila .quien{min-width:0}
.fila .quien b{display:block;font-family:var(--display);font-size:14.5px;font-weight:700}
.fila .quien small{
  display:block;font-size:12px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fila .cuando{font-size:11px;color:var(--ink-soft);margin-top:2px}
.fila .acciones{display:flex;gap:6px}
.fila .acciones a,.fila .acciones button{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  border:1.5px solid rgba(31,26,23,.14);background:transparent;cursor:pointer;
  color:var(--black);text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.fila .acciones a:hover{border-color:var(--red);color:var(--red)}
.fila .acciones .borrar:hover{border-color:var(--red-deep);color:#fff;background:var(--red-deep)}
.fila .acciones svg{width:17px;height:17px}
.fila.fuera{animation:sale .32s var(--ease) forwards}
@keyframes sale{to{opacity:0;transform:translateX(24px);height:0;padding:0;margin-top:-8px}}

/* Nombre específico a propósito: cuando esto se llamaba .vacio, la tarjeta
   usaba la misma clase para "aún no hay nombre" y heredaba ESTA caja — fondo
   crema, padding y esquinas redondeadas. De ahí el recuadro que salía
   alrededor de "TU NOMBRE". */
.lista-vacia{
  text-align:center;padding:38px 16px;color:var(--ink-soft);font-size:14px;
  background:rgba(255,246,236,.6);border-radius:18px;
}
.aviso-admin{
  font-size:11.5px;color:var(--ink-soft);margin-top:18px;line-height:1.5;
  border-top:1px solid rgba(31,26,23,.12);padding-top:12px;
}
@media(max-width:520px){
  .fila{grid-template-columns:52px 1fr;grid-template-areas:"num quien" "acc acc";row-gap:10px}
  .fila .num{grid-area:num} .fila .quien{grid-area:quien}
  .fila .acciones{grid-area:acc;justify-content:flex-end}
}
.titulo-panel{
  font-size:clamp(1.5rem,5vw,2.1rem);white-space:normal;line-height:1;
  margin-top:6px;animation:rise .5s var(--ease) both;
}