/* ==========================================================================
   we (we do we) — sistema de diseño
   Azul, redondeado y amable. Mobile-first, columna de app centrada.
   ========================================================================== */

:root{
  /* marca */
  --azul-900:#0b2a63; --azul-800:#123a86; --azul-700:#1a4fae;
  --azul-600:#2266d6; --azul:#2f7bff; --azul-400:#5c98ff;
  --azul-300:#94baff; --azul-200:#c7daff; --azul-100:#e6efff; --azul-50:#f3f7ff;
  --cielo:#00c6ff; --menta:#22d3a6; --coral:#ff5f7e; --sol:#ffc850;

  /* superficie */
  --tinta:#0e1b33; --tinta-70:#41527a; --tinta-50:#71809f; --tinta-30:#a9b4cb;
  --papel:#ffffff; --lienzo:#eef4ff; --linea:#dde7fa;

  /* forma */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-full:999px;
  --sombra-1:0 1px 2px rgba(16,42,90,.06), 0 2px 6px rgba(16,42,90,.06);
  --sombra-2:0 4px 10px rgba(16,42,90,.08), 0 12px 28px rgba(16,42,90,.10);
  --sombra-3:0 10px 22px rgba(16,42,90,.12), 0 30px 60px rgba(16,42,90,.18);
  --grad:linear-gradient(135deg,var(--azul) 0%,var(--cielo) 100%);
  --grad-suave:linear-gradient(135deg,var(--azul-600) 0%,var(--azul-400) 55%,var(--cielo) 100%);

  /* movimiento */
  --muelle:cubic-bezier(.34,1.56,.64,1);
  --salida:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--tinta); background:var(--lienzo);
  min-height:100dvh; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 15% -10%, rgba(47,123,255,.18), transparent 60%),
    radial-gradient(50rem 34rem at 105% 8%, rgba(0,198,255,.16), transparent 62%),
    radial-gradient(40rem 40rem at 50% 115%, rgba(92,152,255,.14), transparent 60%);
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--azul-600);text-decoration:none}
a:hover{color:var(--azul-700)}
:focus-visible{outline:3px solid var(--azul-400);outline-offset:2px;border-radius:6px}

/* ---------- estructura ---------- */
.app{
  width:100%; max-width:440px; margin-inline:auto; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 14px env(safe-area-inset-bottom);
}
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 4px 10px; position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,var(--lienzo) 62%,rgba(238,244,255,0));
}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.5px;color:var(--azul-800)}
.logo .llama{
  width:30px;height:30px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:var(--sombra-1)
}
.nav{display:flex;gap:6px}
.icono{
  width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--linea);
  background:var(--papel);display:grid;place-items:center;cursor:pointer;
  font-size:17px;box-shadow:var(--sombra-1);transition:transform .15s var(--muelle),background .15s
}
.icono:hover{background:var(--azul-50);transform:translateY(-1px)}
.icono:active{transform:scale(.94)}
.icono.on{background:var(--grad);color:#fff;border-color:transparent}

/* ---------- tipografía ---------- */
h1{font-size:28px;line-height:1.15;letter-spacing:-.9px;font-weight:800}
h2{font-size:20px;line-height:1.25;letter-spacing:-.4px;font-weight:750}
h3{font-size:16px;font-weight:700;letter-spacing:-.2px}
.lead{color:var(--tinta-70);font-size:15px}
.mini{font-size:13px;color:var(--tinta-50)}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--azul-600)
}

/* ---------- tarjetas ---------- */
.panel{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sombra-2)
}
.panel + .panel{margin-top:14px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 18px;border:none;border-radius:var(--r-md);
  background:var(--grad);color:#fff;font-weight:750;font-size:16px;cursor:pointer;
  box-shadow:0 6px 16px rgba(47,123,255,.32);
  transition:transform .12s var(--muelle),box-shadow .2s,filter .2s
}
.btn:hover{filter:brightness(1.05);box-shadow:0 10px 24px rgba(47,123,255,.38)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--azul-50);color:var(--azul-700);box-shadow:none;border:1px solid var(--azul-200)}
.btn.ghost:hover{background:var(--azul-100)}
.btn.plano{background:none;color:var(--tinta-50);box-shadow:none;font-weight:600;font-size:14px}
.btn.plano:hover{color:var(--coral)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- formularios ---------- */
.campo{margin-top:14px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-70);margin-bottom:6px}
.campo input,.campo textarea,.campo select{
  width:100%;padding:13px 15px;border:2px solid var(--linea);border-radius:var(--r-sm);
  background:#fbfdff;transition:border-color .15s,box-shadow .15s
}
.campo textarea{min-height:92px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-100)
}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.error{background:#fff1f3;color:#be123c;border:1px solid #fecdd3;border-radius:var(--r-sm);
  padding:10px 13px;font-size:13.5px;margin-top:12px}
.aviso-ok{background:var(--azul-50);color:var(--azul-700);border:1px solid var(--azul-200);border-radius:var(--r-sm);
  padding:10px 13px;font-size:13.5px;margin-bottom:12px}

/* ---------- pastillas ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);
  background:var(--azul-50);color:var(--azul-700);font-size:12.5px;font-weight:650;
  border:1px solid var(--azul-100)
}
.pill.claro{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(6px)}
.pills{display:flex;flex-wrap:wrap;gap:7px}

/* ==========================================================================
   BARAJA
   ========================================================================== */
.baraja{
  position:relative; width:100%; aspect-ratio:3/4.05; margin-top:4px;
  touch-action:none; user-select:none
}
.carta{
  position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden;
  background:var(--papel); box-shadow:var(--sombra-3);
  will-change:transform,opacity; transform-origin:50% 90%;
  transition:transform .42s var(--muelle),opacity .3s var(--salida)
}
.carta.arrastrando{transition:none}
.carta[data-nivel="1"]{transform:translateY(10px) scale(.952);filter:saturate(.9) brightness(.98)}
.carta[data-nivel="2"]{transform:translateY(18px) scale(.906);filter:saturate(.8) brightness(.96)}
.carta[data-nivel="3"]{transform:translateY(26px) scale(.87);opacity:0}
/* las cartas del fondo se ven como fotos, sin texto compitiendo */
.carta:not([data-nivel="0"]) .datos,
.carta:not([data-nivel="0"]) .barras,
.carta:not([data-nivel="0"]) .zonas,
.carta:not([data-nivel="0"]) .verif{opacity:0;pointer-events:none}
.carta:not([data-nivel="0"])::after{
  content:"";position:absolute;inset:0;background:rgba(238,244,255,.34);pointer-events:none
}
.carta .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--azul-100)}
.carta .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,45,.30) 0%,rgba(6,20,45,0) 26%,
             rgba(6,20,45,0) 40%,rgba(6,20,45,.62) 78%,rgba(6,20,45,.88) 100%)
}
.barras{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:5px;z-index:3}
.barras i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.34)}
.barras i.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.zonas{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:38% 24% 38%}
.zonas button{background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.datos{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;color:#fff;z-index:3}
/* Fase 1: solo edad, profesión y kilómetros */
.datos .edad{font-size:44px;font-weight:800;letter-spacing:-1.6px;line-height:1}
.datos .edad span{font-size:19px;font-weight:500;letter-spacing:-.2px;opacity:.85}
.datos .curro{font-size:18px;font-weight:650;margin-top:7px;letter-spacing:-.3px}
.datos .km{display:flex;align-items:center;gap:6px;font-size:14.5px;opacity:.94;margin-top:8px}
.datos .km svg{width:16px;height:16px;flex:none}
.datos .hecha{font-size:12px;opacity:.72;margin-top:6px}
.verif{
  position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px 7px 10px;border-radius:var(--r-full);font-size:12.5px;font-weight:750;color:#fff;
  background:rgba(10,30,66,.42);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)
}
.verif svg{width:16px;height:16px;color:var(--cielo)}
.verificado{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--cielo);color:#0b2a63;font-size:12px;font-weight:900;flex:none
}
.online{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650}
.online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--menta);
  box-shadow:0 0 0 3px rgba(34,211,166,.28)}

/* sellos */
.sello{
  position:absolute;top:38px;padding:8px 16px;border:4px solid;border-radius:12px;
  font-weight:900;font-size:26px;letter-spacing:2px;opacity:0;z-index:4;
  text-transform:uppercase;backdrop-filter:blur(2px)
}
.sello.si{left:22px;transform:rotate(-16deg);color:var(--menta);border-color:var(--menta)}
.sello.no{right:22px;transform:rotate(16deg);color:var(--coral);border-color:var(--coral)}

/* mandos */
.mandos{display:flex;align-items:center;justify-content:center;gap:18px;padding:20px 0 14px}
.mando{
  border:none;border-radius:50%;background:var(--papel);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sombra-2);
  transition:transform .16s var(--muelle),box-shadow .2s
}
.mando:hover{transform:translateY(-3px) scale(1.05)}
.mando:active{transform:scale(.9)}
.mando.grande{width:70px;height:70px}
.mando.chico{width:52px;height:52px}
.mando svg{width:30px;height:30px;stroke-width:2.6}
.mando.chico svg{width:22px;height:22px}
.mando.no{color:var(--coral)}
.mando.si{color:#fff;background:var(--grad);box-shadow:0 8px 20px rgba(47,123,255,.4)}
.mando.si svg{fill:currentColor;stroke:none;width:32px;height:32px}
.mando.info{color:var(--azul-600)}
.icono svg{width:19px;height:19px;stroke-width:2.2}

/* ficha ampliada */
.ficha{
  position:absolute;inset:0;z-index:5;background:var(--papel);border-radius:var(--r-xl);
  padding:22px;overflow-y:auto;transform:translateY(101%);
  transition:transform .38s var(--salida)
}
.ficha.abierta{transform:none}
.ficha h2{margin-bottom:2px}
.ficha .prompt{background:var(--azul-50);border:1px solid var(--azul-100);
  border-radius:var(--r-md);padding:14px 16px;margin-top:12px}
.ficha .prompt b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--azul-600);margin-bottom:5px}
.ficha .cerrar{position:absolute;top:14px;right:14px}

/* vacío */
.vacio{
  display:grid;place-items:center;text-align:center;gap:10px;
  min-height:52vh;padding:24px
}
.vacio .emo{font-size:58px;filter:drop-shadow(0 6px 12px rgba(16,42,90,.16))}

/* ==========================================================================
   MATCH
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,rgba(11,42,99,.96),rgba(0,110,180,.94));
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s
}
.overlay.visible{opacity:1;pointer-events:auto}
.match-caja{text-align:center;color:#fff;max-width:340px;width:100%}
.match-caja .fotos{display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.match-caja .fotos img{
  width:118px;height:118px;border-radius:50%;object-fit:cover;object-position:50% 16%;
  border:4px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.32)
}
.match-caja .fotos img:first-child{transform:translateX(16px) rotate(-7deg);animation:entraIzq .55s var(--muelle)}
.match-caja .fotos img:last-child{transform:translateX(-16px) rotate(7deg);animation:entraDer .55s var(--muelle)}
@keyframes entraIzq{from{transform:translateX(-90px) rotate(-24deg);opacity:0}}
@keyframes entraDer{from{transform:translateX(90px) rotate(24deg);opacity:0}}
.match-caja h1{font-size:36px;margin-bottom:6px;text-shadow:0 4px 16px rgba(0,0,0,.28)}
.match-caja p{opacity:.95;font-size:15px;margin-bottom:6px}
.match-caja .nota{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-md);padding:13px 15px;font-size:13.5px;margin:18px 0;
  backdrop-filter:blur(6px);text-align:left;line-height:1.5
}
.match-caja .btn{background:#fff;color:var(--azul-700);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.match-caja .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);margin-top:10px}
.confeti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confeti i{position:absolute;width:9px;height:14px;border-radius:2px;animation:cae linear forwards}
@keyframes cae{to{transform:translateY(105vh) rotate(720deg);opacity:0}}

/* ==========================================================================
   ENFOQUE (chat)
   ========================================================================== */
.enfoque-cab{
  display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sombra-1)
}
.enfoque-cab img{width:54px;height:54px;border-radius:var(--r-md);object-fit:cover;
  object-position:50% 18%;flex:none}
.enfoque-cab .txt{flex:1;min-width:0}
.enfoque-cab .txt b{display:block;font-size:17px;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enfoque-cab .txt .mini{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enfoque-cab .pill{flex:none}
.congelado{
  margin-top:12px;border-radius:var(--r-lg);padding:16px 18px;color:#fff;background:var(--grad-suave);
  box-shadow:0 10px 26px rgba(34,102,214,.28);position:relative;overflow:hidden
}
.congelado::after{
  content:"❄";position:absolute;right:-6px;bottom:-22px;font-size:96px;opacity:.16;line-height:1
}
.congelado b{display:block;font-size:16px;margin-bottom:4px}
.congelado ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.congelado li{font-size:13.5px;opacity:.96;padding-left:20px;position:relative}
.congelado li::before{content:"✓";position:absolute;left:0;font-weight:800}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.cifra{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-sm);padding:9px 6px;text-align:center}
.cifra b{display:block;font-size:19px;line-height:1.1}
.cifra span{font-size:10.5px;opacity:.9;text-transform:uppercase;letter-spacing:.6px}

.chat{
  flex:1;display:flex;flex-direction:column;gap:9px;margin-top:12px;padding:14px;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-lg);
  min-height:38vh;max-height:52vh;overflow-y:auto;scroll-behavior:smooth
}
.burbuja{
  max-width:80%;padding:10px 14px;font-size:14.7px;line-height:1.45;word-wrap:break-word;
  animation:sube .22s var(--salida)
}
@keyframes sube{from{opacity:0;transform:translateY(8px)}}
.burbuja.mia{align-self:flex-end;background:var(--grad);color:#fff;
  border-radius:18px 18px 5px 18px;box-shadow:0 3px 10px rgba(47,123,255,.26)}
.burbuja.suya{align-self:flex-start;background:var(--azul-50);border:1px solid var(--azul-100);
  border-radius:18px 18px 18px 5px}
.chat-vacio{margin:auto;text-align:center;color:var(--tinta-50);font-size:14px}
.enviar{display:flex;gap:9px;margin-top:12px;padding-bottom:14px}
.enviar input{flex:1;padding:14px 16px;border:2px solid var(--linea);border-radius:var(--r-full);
  background:var(--papel)}
.enviar input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-100)}
.enviar button{width:52px;height:52px;flex:none;border-radius:50%;border:none;background:var(--grad);
  color:#fff;font-size:19px;cursor:pointer;box-shadow:0 6px 16px rgba(47,123,255,.34);
  transition:transform .14s var(--muelle)}
.enviar button:active{transform:scale(.92)}

/* ---------- portada ---------- */
.portada{padding:28px 0 40px;text-align:center}
.portada .abanico{
  position:relative;height:230px;margin:8px auto 26px;max-width:330px
}
.portada .abanico img{
  position:absolute;top:0;left:50%;width:154px;height:206px;object-fit:cover;
  border-radius:var(--r-md);border:4px solid #fff;box-shadow:var(--sombra-3)
}
.portada .abanico img:nth-child(1){transform:translateX(-92%) rotate(-13deg)}
.portada .abanico img:nth-child(2){transform:translateX(-50%) rotate(-1deg);z-index:2}
.portada .abanico img:nth-child(3){transform:translateX(-8%) rotate(12deg)}
.portada h1{margin-bottom:10px}
.portada .gradiente{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ventajas{display:grid;gap:10px;margin:22px 0 4px;text-align:left}
.ventaja{display:flex;gap:12px;align-items:flex-start;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--sombra-1)}
.ventaja .ic{width:38px;height:38px;border-radius:12px;background:var(--azul-50);display:grid;
  place-items:center;font-size:18px;flex:none}
.ventaja b{display:block;font-size:14.5px}
.ventaja p{font-size:13px;color:var(--tinta-70);margin-top:2px}
.tabs{display:flex;gap:6px;background:var(--azul-50);padding:5px;border-radius:var(--r-full);margin-bottom:4px}
.tabs button{flex:1;padding:10px;border:none;background:none;border-radius:var(--r-full);
  font-weight:700;font-size:14px;color:var(--azul-700);cursor:pointer;transition:.18s}
.tabs button[aria-selected="true"]{background:var(--papel);box-shadow:var(--sombra-1);color:var(--azul-800)}

/* ---------- perfil ---------- */
.galeria{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-bottom:16px}
.galeria img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);aspect-ratio:3/4}
.galeria .col{display:grid;gap:8px}
.galeria .col img{aspect-ratio:1/1.06;object-position:50% 16%}

/* ---------- avisos flotantes ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:80;
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:var(--r-full);
  font-size:14px;font-weight:600;box-shadow:var(--sombra-3);opacity:0;
  transition:opacity .25s,transform .25s var(--muelle);pointer-events:none;max-width:88vw
}
.toast.visible{opacity:1;transform:translate(-50%,0)}

.pie{text-align:center;padding:18px 0 26px;font-size:12.5px;color:var(--tinta-50)}
.pie form{display:inline}
.pie button{background:none;border:none;color:var(--tinta-50);cursor:pointer;
  text-decoration:underline;font-size:12.5px}

@media (min-width:900px){
  .app{max-width:460px}
  body{padding-top:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   MARCA «we»
   ========================================================================== */
.logo{font-size:26px;letter-spacing:-1.4px;text-transform:lowercase}
.logo .llama{
  width:34px;height:34px;border-radius:12px;font-size:15px;font-weight:800;letter-spacing:-.8px;
  font-family:inherit
}
.logo small{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:1.6px;color:var(--tinta-50);
  text-transform:uppercase;margin-top:-4px
}
.contador{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-full);
  background:var(--coral);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--lienzo)
}
.icono{position:relative}

/* ---------- indicador de fases ---------- */
.fases{display:flex;gap:6px;margin:2px 0 10px}
.fase{
  flex:1;padding:8px 6px;border-radius:var(--r-sm);background:var(--papel);border:1px solid var(--linea);
  text-align:center;font-size:11px;font-weight:700;color:var(--tinta-50);line-height:1.25
}
.fase b{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--tinta-30)}
.fase.activa{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sombra-1)}
.fase.activa b{color:rgba(255,255,255,.75)}
.fase.hecha{background:var(--azul-50);color:var(--azul-700);border-color:var(--azul-100)}
.fase.hecha b{color:var(--azul-400)}

/* ---------- lista de wes ---------- */
.we-lista{display:grid;gap:10px}
.we-item{
  display:flex;align-items:center;gap:13px;padding:12px;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--sombra-1);
  transition:transform .15s var(--muelle),box-shadow .2s
}
.we-item:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.we-item img{width:62px;height:62px;border-radius:var(--r-md);object-fit:cover;object-position:50% 16%;flex:none}
.we-item .txt{flex:1;min-width:0}
.we-item .txt b{display:block;font-size:16.5px;letter-spacing:-.3px;color:var(--tinta)}
.we-item .txt .mini{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.we-item.exclusivo{border-color:var(--azul-300);box-shadow:0 0 0 3px var(--azul-100),var(--sombra-2)}
.we-item.bloqueado{opacity:.55;filter:grayscale(.6)}
.we-item.bloqueado img{filter:grayscale(1)}
.sin-leer{width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none}

/* ---------- notas de voz ---------- */
.notas-voz{display:grid;gap:10px;margin-top:12px}
.nota-voz{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--azul-50);border:1px solid var(--azul-100);transition:border-color .2s,background .2s
}
.nota-voz.sonando{background:var(--azul-100);border-color:var(--azul-300)}
.nv-play{
  width:44px;height:44px;flex:none;border:none;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(47,123,255,.32);
  transition:transform .14s var(--muelle)
}
.nv-play:active{transform:scale(.9)}
.nv-play .pausa{display:none}
.nota-voz.sonando .nv-play .play{display:none}
.nota-voz.sonando .nv-play .pausa{display:block}
.nv-play svg{width:19px;height:19px;fill:currentColor}
.nv-cuerpo{flex:1;min-width:0}
.nv-titulo{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.nv-progreso{height:6px;border-radius:3px;background:var(--azul-200);margin-top:7px;cursor:pointer;
  position:relative;overflow:hidden}
.nv-progreso i{display:block;height:100%;width:0;background:var(--grad);border-radius:3px;
  transition:width .1s linear}
.nv-tiempo{font-size:12px;font-weight:700;color:var(--azul-700);font-variant-numeric:tabular-nums;flex:none}

/* ---------- fase 3: elegir ---------- */
.elegir{
  margin-top:14px;border-radius:var(--r-lg);padding:18px;color:#fff;background:var(--grad-suave);
  box-shadow:0 10px 26px rgba(34,102,214,.28);position:relative;overflow:hidden
}
.elegir::after{content:"";position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.elegir b{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.3px}
.elegir p{font-size:13.5px;opacity:.95;line-height:1.5;position:relative}
.elegir .btn{background:#fff;color:var(--azul-700);margin-top:14px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.elegir.esperando{background:linear-gradient(135deg,#475569,#64748b);box-shadow:none}
.elegir.hecho{background:linear-gradient(135deg,#0b2350 0%,#1f57b0 100%)}

/* ---------- foto secundaria ---------- */
.fotos-we{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fotos-we figure{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--azul-100)}
.fotos-we img{width:100%;aspect-ratio:3/4;object-fit:cover}
.fotos-we figcaption{
  position:absolute;left:8px;bottom:8px;padding:5px 10px;border-radius:var(--r-full);
  background:rgba(10,30,66,.5);color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(6px)
}

/* ==========================================================================
   ESCALA POR FASE
   El azul se oscurece según te acercas al we que abre la conversación.
   Fase 1 claro · Fase 2 medio · Fase 3 profundo.
   ========================================================================== */
body[data-fase="1"]{
  --azul:#4d90ff; --azul-600:#2f7bff; --azul-700:#2266d6;
  --grad:linear-gradient(135deg,#4d90ff 0%,#33cdff 100%);
  --grad-suave:linear-gradient(135deg,#2f7bff 0%,#5c98ff 55%,#33cdff 100%);
  --lienzo:#f4f9ff; --linea:#e4eefd;
  --halo-a:rgba(77,144,255,.14); --halo-b:rgba(51,205,255,.13);
}
body[data-fase="2"]{
  --azul:#2f6fe0; --azul-600:#2259c4; --azul-700:#1a49a6;
  --grad:linear-gradient(135deg,#2f6fe0 0%,#159fe0 100%);
  --grad-suave:linear-gradient(135deg,#2259c4 0%,#3d84e6 55%,#159fe0 100%);
  --lienzo:#dde9fb; --linea:#c9dbf5;
  --halo-a:rgba(47,111,224,.26); --halo-b:rgba(21,159,224,.22);
}
body[data-fase="3"]{
  --azul:#173f8f; --azul-600:#122f6d; --azul-700:#0d2350;
  --azul-100:#dde6f7; --azul-50:#eef3fc; --azul-200:#bccce9;
  --grad:linear-gradient(135deg,#0f2c68 0%,#1f57b0 100%);
  --grad-suave:linear-gradient(135deg,#0b2350 0%,#173f8f 55%,#1f57b0 100%);
  --lienzo:#c3d7f2; --linea:#a9c2e6;
  --halo-a:rgba(15,44,104,.34); --halo-b:rgba(31,87,176,.30);
}
body::before{
  background:
    radial-gradient(60rem 40rem at 15% -10%, var(--halo-a,rgba(47,123,255,.18)), transparent 60%),
    radial-gradient(50rem 34rem at 105% 8%, var(--halo-b,rgba(0,198,255,.16)), transparent 62%),
    radial-gradient(40rem 40rem at 50% 115%, var(--halo-a,rgba(92,152,255,.14)), transparent 60%);
}
.barra{background:linear-gradient(180deg,var(--lienzo) 62%,transparent)}

/* el indicador de fases enseña la rampa de color aunque no estés en ellas */
.fase:nth-child(1){box-shadow:inset 0 0 0 2px rgba(77,144,255,.28)}
.fase:nth-child(2){box-shadow:inset 0 0 0 2px rgba(47,111,224,.26)}
.fase:nth-child(3){box-shadow:inset 0 0 0 2px rgba(15,44,104,.24)}
.fase:nth-child(1).activa{background:linear-gradient(135deg,#4d90ff,#33cdff)}
.fase:nth-child(2).activa{background:linear-gradient(135deg,#2f6fe0,#159fe0)}
.fase:nth-child(3).activa{background:linear-gradient(135deg,#0f2c68,#1f57b0)}
.fase.activa{box-shadow:var(--sombra-1)}

/* botonera: misma fila y misma posición en todas las fases */
.mandos form{display:contents}
.mando.si.dado{
  background:var(--grad);opacity:.55;cursor:default;box-shadow:none;
  position:relative
}
.mando.si.dado::after{
  content:"⏳";position:absolute;bottom:-2px;right:-2px;font-size:19px;
  background:var(--papel);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;
  box-shadow:var(--sombra-1)
}
.pista{text-align:center;margin:-4px 0 8px}