/* ═══════════════════════════════════════════════════════════════
   Panal · la app
   Mismo ADN que la web: negro profundo, una sola familia, la miel
   solo donde señala algo. Las celdas (hexágonos) son el lenguaje.
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --negro: #0A0A0C;
  --fondo: #0A0A0C;
  --capa: #141417;
  --capa-2: #1C1C20;
  --linea: rgba(255, 255, 255, .08);
  --linea-2: rgba(255, 255, 255, .14);
  --texto: #F5F5F7;
  --gris: #A1A1A6;
  --gris-2: #6E6E73;
  --miel: #FF9F0A;
  --miel-2: #FFB340;
  --miel-suave: rgba(255, 159, 10, .14);
  --verde: #30D158;
  --r-s: 10px; --r: 16px; --r-l: 24px; --r-xl: 32px;
  --salida: cubic-bezier(.23, 1, .32, 1);
  --resorte: cubic-bezier(.34, 1.56, .64, 1);
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --lateral: clamp(16px, 4.5vw, 40px);
  --barra: 56px;
  --pestanas: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--texto); font: 400 16px/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(36px, 8vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--miel); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo { font-size: 13px; font-weight: 500; color: var(--gris); letter-spacing: .01em; }
.miel { color: var(--miel); }
.gris { color: var(--gris); }
.num { font-variant-numeric: tabular-nums; }

/* ── botones ─────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .16s var(--salida), background-color .2s var(--salida), opacity .2s; }
.boton:active { transform: scale(.97); }
.boton[disabled] { opacity: .4; pointer-events: none; }
.boton--miel { background: var(--miel); color: #111113; }
.boton--miel:hover { background: var(--miel-2); }
.boton--blanco { background: var(--texto); color: #111113; }
.boton--vidrio { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--linea-2); }
.boton--vidrio:hover { background: rgba(255, 255, 255, .12); }
.boton--ancho { width: 100%; }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.boton svg { width: 20px; height: 20px; }

/* ── la barra de arriba ─────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 40; height: calc(var(--barra) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: var(--lateral);
  background: rgba(10, 10, 12, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea); }
.barra__marca { display: flex; align-items: center; min-height: 44px; }
.barra__marca img { height: 20px; width: auto; }
.barra__nav { display: none; gap: 4px; }
.barra__nav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--gris); transition: color .2s, background-color .2s; }
.barra__nav a:hover { color: var(--texto); }
.barra__nav a[aria-current="page"] { color: var(--texto); background: rgba(255, 255, 255, .08); }
.barra__yo { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.barra__yo .celda-svg { width: 34px; height: 34px; }
@media (min-width: 820px) { .barra__nav { display: flex; } }

/* ── pestañas (teléfono) ────────────────────────────────── */
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: calc(var(--pestanas) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10, 10, 12, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linea); }
.pestanas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--gris-2); transition: color .2s; }
.pestanas a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pestanas a[aria-current="page"] { color: var(--texto); }
.pestanas a[aria-current="page"] svg { stroke: var(--miel); }
.pestanas .punto { position: absolute; margin: -18px 0 0 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--miel); }
@media (min-width: 820px) { .pestanas { display: none; } }
.con-pestanas { padding-bottom: calc(var(--pestanas) + env(safe-area-inset-bottom, 0px) + 24px); }
@media (min-width: 820px) { .con-pestanas { padding-bottom: 64px; } }

main { min-height: calc(100dvh - var(--barra)); }
.marco { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--lateral); }
.vista { animation: entra .42s var(--salida) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── la celda (avatar hexagonal) ─────────────────────────── */
.celda-svg { width: 48px; height: 48px; flex-shrink: 0; overflow: visible; }
.celda-svg text { font-family: var(--fuente); font-weight: 700; letter-spacing: -.02em; }

/* ═══ INICIO: el mapa y los encuentros ═══════════════════════ */
.inicio { display: grid; grid-template-columns: minmax(0, 1fr); }
.mapa { position: relative; height: min(64dvh, 560px); overflow: hidden; background:
  radial-gradient(90% 70% at 50% 45%, #18140d 0%, var(--fondo) 70%); }
.mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.mapa canvas:active { cursor: grabbing; }
.mapa__titulo { position: absolute; left: var(--lateral); top: 20px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.mapa__titulo h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.mapa__titulo p { color: var(--gris); font-size: 15px; }
.mapa__velo { position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(to bottom, rgba(10,10,12,0), var(--fondo)); pointer-events: none; z-index: 2; }
.mapa__etiquetas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.etq { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--texto); white-space: nowrap; background: rgba(17, 17, 19, .74); box-shadow: inset 0 0 0 1px var(--linea-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s, box-shadow .2s, opacity .3s; will-change: transform; min-height: 28px; }
.etq::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--miel); }
.etq b { font-weight: 500; color: var(--gris); font-variant-numeric: tabular-nums; }
.etq.activa { background: var(--miel); color: #111113; box-shadow: none; }
.etq.activa::before { background: #111113; }
.etq.activa b { color: rgba(17,17,19,.7); }
.etq.lejos { opacity: 0; pointer-events: none; }
.mapa__respaldo { position: absolute; inset: 8% 6%; }

.ciudades { position: relative; z-index: 4; display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--lateral) 8px; margin-top: -56px; scrollbar-width: none; scroll-snap-type: x proximity; }
.ciudades::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--texto); background: rgba(28, 28, 32, .86); box-shadow: inset 0 0 0 1px var(--linea-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s var(--salida), color .2s, transform .16s var(--salida); }
.chip:active { transform: scale(.96); }
.chip b { font-weight: 500; color: var(--gris); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--texto); color: #111113; box-shadow: none; }
.chip[aria-pressed="true"] b { color: var(--gris-2); }

.lista { display: flex; flex-direction: column; gap: 32px; padding-block: 28px 0; }
.bloque { display: flex; flex-direction: column; gap: 14px; }
.bloque__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* el encuentro de HOY: la tarjeta en vivo */
.vivo { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 24px; border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 159, 10, .32), rgba(255, 159, 10, 0) 55%), var(--capa);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .35); isolation: isolate; }
.vivo__panal { position: absolute; right: -40px; top: -30px; width: 240px; opacity: .9; z-index: -1; }
.vivo__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--miel); }
.vivo__estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--miel); box-shadow: 0 0 0 0 rgba(255,159,10,.6); animation: late 1.6s infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(255,159,10,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(255,159,10,0); } }
.vivo h2 { max-width: 14ch; }
.vivo__datos { color: var(--gris); font-size: 15px; }
.vivo .acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* tarjeta de encuentro (estilo Luma, a lo Apple) */
.tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tarjeta { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: var(--r-l);
  background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); transition: background-color .2s var(--salida), transform .16s var(--salida); min-height: 96px; }
.tarjeta:hover { background: var(--capa-2); }
.tarjeta:active { transform: scale(.985); }
.fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 68px; border-radius: 14px; background: var(--capa-2); box-shadow: inset 0 0 0 1px var(--linea); }
.fecha small { font-size: 11px; font-weight: 600; color: var(--miel); text-transform: uppercase; letter-spacing: .06em; }
.fecha strong { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tarjeta__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tarjeta__txt h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta__txt p { font-size: 14px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caras { display: flex; align-items: center; }
.caras .celda-svg { width: 26px; height: 26px; margin-left: -7px; }
.caras .celda-svg:first-child { margin-left: 0; }
.caras span { margin-left: 8px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--miel-suave); color: var(--miel); white-space: nowrap; }
.pastilla--gris { background: rgba(255, 255, 255, .07); color: var(--gris); }
.vacio { padding: 36px 20px; text-align: center; color: var(--gris); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--linea); }

@media (min-width: 980px) {
  .inicio { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .inicio__mapa { position: sticky; top: var(--barra); height: calc(100dvh - var(--barra)); display: flex; flex-direction: column; }
  .inicio__mapa .mapa { height: auto; flex: 1; }
  .inicio__mapa .ciudades { margin-top: -64px; flex-wrap: wrap; padding-bottom: 28px; }
  .inicio__lista { padding: 12px var(--lateral) 64px; border-left: 1px solid var(--linea); min-height: calc(100dvh - var(--barra)); }
}

/* ═══ UN ENCUENTRO ═══════════════════════════════════════════ */
.portada { position: relative; overflow: hidden; height: min(46dvh, 380px); background: radial-gradient(80% 90% at 50% 60%, #1b150b, var(--fondo) 70%); }
.portada svg.pais { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 86%; width: auto; max-width: 94%; }
.portada__ciudad { position: absolute; left: var(--lateral); right: var(--lateral); bottom: 18px; z-index: 2; font-size: min(132px, calc(150vw / var(--letras, 10))); white-space: nowrap; font-weight: 800; letter-spacing: -.06em; line-height: .85;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .22); pointer-events: none; }
.portada::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to bottom, rgba(10,10,12,0), var(--fondo)); }
.encuentro { display: grid; gap: 28px; padding-block: 8px 24px; }
.encuentro__cabeza { display: grid; gap: 14px; }
.datos { display: grid; gap: 2px; }
.dato { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.dato svg { width: 22px; height: 22px; fill: none; stroke: var(--gris); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dato b { display: block; font-weight: 600; }
.dato > div > span { display: block; font-size: 14px; color: var(--gris); }
.desc { font-size: 17px; line-height: 1.6; color: #D2D2D7; max-width: 60ch; }
.asistentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 16px 8px; }
.asistente { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--gris); }
.asistente .celda-svg { width: 56px; height: 56px; }
.asistente b { font-weight: 500; color: var(--texto); font-size: 13px; line-height: 1.2; }
.pie-cta { position: sticky; bottom: calc(var(--pestanas) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; display: flex; gap: 10px; padding: 10px; border-radius: 999px;
  background: rgba(20, 20, 23, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--linea-2), 0 20px 40px rgba(0,0,0,.4); }
.pie-cta .boton { flex: 1; }
@media (min-width: 820px) { .pie-cta { bottom: 24px; max-width: 520px; } }
@media (min-width: 980px) { .encuentro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; } .encuentro__lado { position: sticky; top: calc(var(--barra) + 24px); } }

/* ═══ TUS CONEXIONES ════════════════════════════════════════ */
.cabeza-vista { display: grid; gap: 10px; padding-block: 32px 20px; }
.segmento { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 999px; background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); justify-self: start; }
.segmento button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--gris); transition: background-color .2s var(--salida), color .2s; }
.segmento button[aria-pressed="true"] { background: var(--capa-2); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px var(--linea-2); }
.matches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 820px) { .matches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.match { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-l); background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); }
.match--quiere { box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .45); }
.match__cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.match__cabeza .celda-svg { width: 56px; height: 56px; }
.match__quien { min-width: 0; display: grid; gap: 2px; }
.match__quien p { font-size: 14px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anillo { position: relative; width: 52px; height: 52px; }
.anillo svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.anillo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.razones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.razones li { display: flex; gap: 10px; font-size: 14px; color: #D2D2D7; line-height: 1.4; }
.razones li::before { content: ""; flex-shrink: 0; width: 9px; height: 10px; margin-top: 5px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.match__pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.contactos { display: flex; flex-wrap: wrap; gap: 8px; }

/* ═══ REGISTRO ══════════════════════════════════════════════ */
.pasos { display: flex; gap: 8px; padding-block: 24px 8px; }
.pasos i { width: 22px; height: 25px; background: var(--capa-2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color .4s var(--salida), transform .4s var(--resorte); }
.pasos i.hecho { background: var(--miel); }
.pasos i.actual { background: var(--texto); transform: scale(1.12); }
.formulario { display: grid; gap: 22px; padding-block: 16px 32px; max-width: 640px; }
.campo { display: grid; gap: 8px; }
.campo > span { font-size: 14px; font-weight: 500; color: var(--gris); }
.campo input, .campo select { height: 54px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea-2); font-size: 17px;
  transition: box-shadow .2s var(--salida); -webkit-appearance: none; appearance: none; width: 100%; }
.campo input:focus, .campo select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--miel); }
.campo input::placeholder { color: var(--gris-2); }
.campo small { font-size: 13px; color: var(--gris-2); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 620px) { .dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .roles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rol { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 16px; min-height: 112px; border-radius: var(--r); text-align: left;
  background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); transition: background-color .2s var(--salida), box-shadow .2s, transform .16s var(--salida); }
.rol:active { transform: scale(.97); }
.rol svg { width: 30px; height: 34px; }
.rol b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.rol[aria-pressed="true"] { background: var(--miel-suave); box-shadow: inset 0 0 0 1.5px var(--miel); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { background: var(--capa); -webkit-backdrop-filter: none; backdrop-filter: none; }
.chips .chip[aria-pressed="true"] { background: var(--miel); color: #111113; }
.nota { font-size: 14px; color: var(--gris); }
.error { color: #FF6961; font-size: 15px; min-height: 1.5em; }
.pie-form { display: flex; gap: 10px; }
.pie-form .boton { flex: 1; }

/* la revelación de tu celda */
.revela { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: 48px 24px; }
.revela .gran-celda { width: min(62vw, 260px); height: auto; animation: nace 1s var(--resorte) both; filter: drop-shadow(0 30px 60px rgba(255, 159, 10, .35)); }
@keyframes nace { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }

/* ═══ TU CELDA ══════════════════════════════════════════════ */
.ficha { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-xl); background: radial-gradient(120% 120% at 0% 0%, rgba(255,159,10,.18), rgba(255,159,10,0) 55%), var(--capa); box-shadow: inset 0 0 0 1px var(--linea); }
.ficha__cabeza { display: flex; gap: 16px; align-items: center; }
.ficha__cabeza .celda-svg { width: 76px; height: 76px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas span { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: #D2D2D7; }
.etiquetas--miel span { background: var(--miel-suave); color: var(--miel); }
.grupo { display: grid; gap: 8px; }
.grupo > b { font-size: 13px; font-weight: 500; color: var(--gris); }

/* ═══ LA SALA (en el sitio) ═════════════════════════════════ */
.sala { min-height: calc(100dvh - var(--barra)); display: grid; align-content: start; gap: 28px; padding-block: 20px 40px;
  background: radial-gradient(70% 45% at 50% 30%, rgba(255, 159, 10, .16), rgba(255,159,10,0) 70%); }
.sala__cabeza { text-align: center; display: grid; gap: 6px; }
.mi-codigo { position: relative; justify-self: center; width: min(78vw, 320px); aspect-ratio: 1 / 1.1; display: grid; place-items: center; }
.mi-codigo svg.hex { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mi-codigo .hex-late { animation: respira 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes respira { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: 1; } }
.mi-codigo__txt { position: relative; display: grid; justify-items: center; gap: 4px; color: #111113; }
.mi-codigo__txt small { font-size: 13px; font-weight: 600; opacity: .7; }
.mi-codigo__txt strong { font-size: clamp(56px, 18vw, 84px); font-weight: 800; letter-spacing: .06em; line-height: 1; font-variant-numeric: tabular-nums; }
.mi-codigo__txt span { font-size: 13px; font-weight: 500; opacity: .65; font-variant-numeric: tabular-nums; }
.sala__acciones { display: grid; gap: 10px; max-width: 420px; width: 100%; justify-self: center; }
.aqui { display: grid; gap: 10px; }
.aqui__fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); }
.aqui__fila .celda-svg { width: 44px; height: 44px; }
.aqui__fila p { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* el teclado para juntar */
.hoja { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: aparece .2s var(--salida) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.hoja__panel { width: 100%; max-width: 480px; margin: 0 auto; padding: 22px var(--lateral) calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--capa);
  box-shadow: inset 0 1px 0 var(--linea-2); display: grid; gap: 18px; animation: sube .34s var(--salida) both; }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 620px) { .hoja { align-items: center; } .hoja__panel { border-radius: 28px; } }
.casillas { display: grid; grid-template-columns: repeat(4, 64px); justify-content: center; gap: 10px; }
.casilla { width: 64px; height: 72px; display: grid; place-items: center; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--capa-2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color .2s, color .2s, transform .25s var(--resorte); }
.casilla.llena { background: var(--miel); color: #111113; transform: scale(1.04); }
.casillas.mal { animation: tiembla .38s; }
@keyframes tiembla { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.teclado button { min-height: 58px; border-radius: 16px; font-size: 26px; font-weight: 500; background: rgba(255, 255, 255, .06); transition: background-color .12s, transform .12s var(--salida); }
.teclado button:active { background: rgba(255, 255, 255, .14); transform: scale(.96); }
.teclado button svg { width: 26px; height: 26px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ ¡JUNTARON CELDAS! (la celebración, en los dos teléfonos) ═══ */
.junta { position: fixed; inset: 0; z-index: 100; display: grid; align-content: center; justify-items: center; gap: 20px; padding: 24px var(--lateral);
  background: radial-gradient(60% 45% at 50% 38%, rgba(255, 159, 10, .35), rgba(10, 10, 12, .96) 70%), rgba(10,10,12,.96); text-align: center; overflow-y: auto; animation: aparece .25s both; }
.junta__celdas { position: relative; width: min(80vw, 340px); aspect-ratio: 2 / 1.55; }
.junta__celdas svg { position: absolute; top: 0; width: 54%; height: auto; overflow: visible; }
.junta__a { left: 0; animation: desde-izq .9s var(--resorte) .1s both; }
.junta__b { right: 0; top: 0; animation: desde-der .9s var(--resorte) .1s both; }
@keyframes desde-izq { from { transform: translateX(-120vw) rotate(-40deg); } to { transform: none; } }
@keyframes desde-der { from { transform: translateX(120vw) rotate(40deg); } to { transform: none; } }
.junta__destello { position: absolute; left: 50%; top: 48%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #fff; opacity: 0; animation: destello .9s var(--salida) .72s both; }
@keyframes destello { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(40); } }
.junta__txt { display: grid; gap: 8px; animation: entra .5s var(--salida) .9s both; }
.junta__comun { display: grid; gap: 8px; width: min(100%, 420px); animation: entra .5s var(--salida) 1.05s both; }
.junta__comun div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: left; font-size: 15px; }
.junta__comun div::before { content: ""; flex-shrink: 0; width: 10px; height: 11px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.junta__acciones { display: grid; gap: 10px; width: min(100%, 420px); animation: entra .5s var(--salida) 1.2s both; }
.chispa { position: absolute; width: 12px; height: 13px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: none; }

/* ═══ PANTALLA DEL EVENTO (proyector) ═══════════════════════ */
.proyector { position: fixed; inset: 0; background: var(--negro); overflow: hidden; }
.proyector canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.proyector__txt { position: absolute; left: 5vw; top: 6vh; bottom: 6vh; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: min(40vw, 680px); pointer-events: none; }
.proyector__txt h1 { font-size: clamp(40px, 5.4vw, 104px); }
.contadores { display: flex; gap: 5vw; }
.contadores div { display: grid; gap: 4px; }
.contadores strong { font-size: clamp(48px, 7vw, 140px); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.contadores span { font-size: clamp(14px, 1.2vw, 22px); color: var(--gris); }
.ultima { min-height: 2.4em; font-size: clamp(18px, 1.8vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.ultima b { color: var(--miel); font-weight: 600; }
.proyector__marca { display: flex; align-items: center; gap: 16px; }
.proyector__marca img { height: clamp(22px, 2vw, 38px); width: auto; }
.proyector__marca span { color: var(--gris); font-size: clamp(14px, 1.1vw, 20px); }
.proyector::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.55) 34%, rgba(10,10,12,0) 58%); }

/* ═══ ADMIN ═════════════════════════════════════════════════ */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 820px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra { display: grid; gap: 4px; padding: 18px; border-radius: var(--r); background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); }
.cifra strong { font-size: 34px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cifra span { font-size: 13px; color: var(--gris); }
.barras { display: grid; gap: 8px; }
.barra-fila { display: grid; grid-template-columns: 120px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: 14px; }
.barra-fila i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--miel), var(--miel-2)); transform-origin: left; animation: crece .7s var(--salida) both; }
@keyframes crece { from { transform: scaleX(0); } }
.barra-fila b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gris); }
.tabla-envoltura { overflow-x: auto; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linea); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { font-weight: 500; color: var(--gris); font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.toggle { min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.07); color: var(--gris); }
.toggle[aria-pressed="true"] { background: rgba(48, 209, 88, .16); color: var(--verde); }

/* ── aviso flotante ─────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: calc(var(--pestanas) + env(safe-area-inset-bottom, 0px) + 20px); z-index: 120; transform: translate(-50%, 20px); opacity: 0;
  padding: 12px 18px; border-radius: 999px; background: var(--texto); color: #111113; font-weight: 600; font-size: 15px; max-width: calc(100vw - 32px);
  transition: opacity .25s var(--salida), transform .35s var(--salida); pointer-events: none; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 820px) { .toast { bottom: 32px; } }

.cargando { display: grid; place-items: center; min-height: 40vh; }
.cargando i { width: 26px; height: 29px; background: var(--miel); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: gira 1s var(--salida) infinite; }
@keyframes gira { to { transform: rotate(120deg); } }
.ejemplo-aviso { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--gris-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══ v0.2 · Chocar teléfonos (lo más cercano a NameDrop) y el código como respaldo ═══ */
.boton svg { flex: none; }
.respaldo { width: 100%; max-width: 480px; justify-self: center; border-radius: var(--r-l); background: var(--capa); box-shadow: inset 0 0 0 1px var(--linea); }
.respaldo summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--gris); }
.respaldo summary::-webkit-details-marker { display: none; }
.respaldo[open] { padding-bottom: 20px; display: grid; gap: 14px; }
.respaldo[open] summary { color: var(--texto); }
.respaldo .mi-codigo { width: min(60vw, 240px); }

.choque__visual { position: relative; height: 150px; display: grid; place-items: center; }
.choque__tel { position: absolute; top: 20px; width: 56px; height: 104px; border-radius: 14px; background: var(--capa-2); box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.choque__tel::after { content: ""; position: absolute; inset: 30% 22%; border-radius: 6px; background: var(--miel); opacity: .9; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.choque__tel--a { left: calc(50% - 64px); animation: choca-a 1.8s var(--salida) infinite; }
.choque__tel--b { right: calc(50% - 64px); animation: choca-b 1.8s var(--salida) infinite; }
.choque__onda { position: absolute; top: 72px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--miel); opacity: 0; animation: onda 1.8s var(--salida) infinite; }
@keyframes choca-a { 0%, 20% { transform: translateX(0) rotate(-6deg); } 45%, 55% { transform: translateX(34px) rotate(0); } 80%, 100% { transform: translateX(0) rotate(-6deg); } }
@keyframes choca-b { 0%, 20% { transform: translateX(0) rotate(6deg); } 45%, 55% { transform: translateX(-34px) rotate(0); } 80%, 100% { transform: translateX(0) rotate(6deg); } }
@keyframes onda { 0%, 44% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 80%, 100% { opacity: 0; transform: scale(5); } }
.choque.enviando .choque__tel { animation-play-state: paused; }
.choque.enviando .choque__onda { animation: onda .7s var(--salida) infinite; }
@media (prefers-reduced-motion: reduce) { .choque__tel, .choque__onda { animation: none !important; } .choque__tel--a { transform: translateX(28px); } .choque__tel--b { transform: translateX(-28px); } }

/* v0.3 · sin zoom: un doble toque (o las pantallas que se tocan al chocar) no agranda la página */
html, body, button, a { touch-action: manipulation; }
.choque, .choque * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.choque button { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1em); }   /* iPhone hace zoom al escribir en campos de menos de 16 px */
/* v0.4 · varios roles: la principal se marca */
.rol { position: relative; }
.rol__principal { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 600; color: var(--miel); letter-spacing: .02em; }