/* La conversación de entrada — "Compra tiempo"
   Referencia: el onboarding de Opal. Una sola cosa nítida a la vez; lo dicho
   antes se desenfoca y sube. El fantasma hace el papel del ópalo. */

:root{
  --c-ease-out:cubic-bezier(.23,1,.32,1);
  --c-ease-io:cubic-bezier(.77,0,.175,1);
  --c-pill:#15171a;
  --c-pill-hover:#1c1f23;
  --c-borde:rgba(255,255,255,.07);
}

/* ---------- capa ---------- */
.conv{
  position:fixed;inset:0;z-index:60;
  background:#08090b;color:var(--text);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--c-ease-out),visibility 0s linear .45s;
  overflow:hidden;
}
.conv.abierta{opacity:1;visibility:visible;transition:opacity .45s var(--c-ease-out),visibility 0s}
.conv-abierta{overflow:hidden}

/* el halo de luz de arriba, como en Opal pero con la luz del fantasma */
.conv::before{
  content:"";position:absolute;left:50%;top:-34vh;translate:-50% 0;
  width:min(900px,160vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(79,123,144,.20) 0%,rgba(168,210,230,.10) 34%,transparent 64%);
  pointer-events:none;
}
/* grano muy sutil para que el negro no se vea plano */
.conv::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.conv-cerrar{
  position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem;z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--c-borde);
  background:rgba(21,23,26,.7);color:var(--muted);font:inherit;font-size:1.1rem;cursor:pointer;
  transition:color .2s ease,background .2s ease,transform .16s var(--c-ease-out);
}
.conv-cerrar:hover{color:var(--text);background:var(--c-pill-hover)}
.conv-cerrar:active{transform:scale(.94)}

/* ---------- el fantasma ---------- */
.conv-fantasma{
  position:relative;z-index:1;flex:0 0 auto;
  width:clamp(84px,22vw,124px);margin:clamp(2.2rem,8vh,4.5rem) auto 0;
  transition:opacity .6s var(--c-ease-out),transform .8s var(--c-ease-io);
}
.conv-fantasma img{width:100%;height:auto;animation:conv-flotar 5.5s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(79,123,144,.45)) drop-shadow(0 0 60px rgba(168,210,230,.18))}
@keyframes conv-flotar{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -7px;rotate:2deg}}
.conv[data-fase="revelar"] .conv-fantasma{opacity:0;transform:translateY(-30px) scale(.8)}

/* ---------- el hilo de la conversación ---------- */
.conv-hilo{
  position:relative;z-index:1;flex:1 1 auto;
  width:100%;max-width:560px;margin:0 auto;padding:0 1.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  /* lo de arriba se desvanece en vez de cortarse */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
}
.conv-mensajes{display:flex;flex-direction:column;gap:1.05rem;padding-bottom:1.4rem}

.conv-linea{
  font-size:clamp(1.12rem,1rem + .55vw,1.38rem);line-height:1.42;font-weight:500;
  letter-spacing:-.01em;text-wrap:pretty;margin:0;
  transition:opacity .55s var(--c-ease-out),filter .55s var(--c-ease-out);
  animation:conv-entra .55s var(--c-ease-out) both;
}
.conv-linea.yo{color:var(--accent)}
/* lo que ya se dijo: se queda, pero borroso, como en Opal */
.conv-linea.pasada{opacity:.28;filter:blur(3px)}
@keyframes conv-entra{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}

/* ---------- lo que el visitante toca ---------- */
.conv-accion{
  position:relative;z-index:1;flex:0 0 auto;
  width:100%;max-width:560px;margin:0 auto;
  padding:.4rem 1.4rem max(1.4rem,env(safe-area-inset-bottom));
  min-height:7rem;
}
.conv-opciones{display:grid;gap:.55rem}
.conv-opcion{
  display:flex;align-items:center;gap:.85rem;width:100%;
  padding:1rem 1.35rem;border-radius:999px;
  background:var(--c-pill);border:1px solid var(--c-borde);
  color:var(--text);font:inherit;font-size:1rem;font-weight:500;text-align:left;cursor:pointer;
  opacity:0;transform:translateY(8px);
  animation:conv-opcion .4s var(--c-ease-out) forwards;
  transition:background .2s ease,border-color .2s ease,transform .16s var(--c-ease-out);
}
.conv-opcion:hover{background:var(--c-pill-hover);border-color:rgba(255,255,255,.12)}
.conv-opcion:active{transform:scale(.98)}
.conv-opcion:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conv-opcion i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(168,210,230,.7)}
@keyframes conv-opcion{to{opacity:1;transform:none}}

.conv-campo{display:grid;gap:.7rem}
.conv-campo input{
  width:100%;padding:1.05rem 1.35rem;border-radius:999px;
  background:var(--c-pill);border:1px solid var(--c-borde);color:var(--text);
  font:inherit;font-size:1.05rem;outline:none;
  transition:border-color .2s ease;
}
.conv-campo input:focus{border-color:rgba(168,210,230,.55)}
.conv-saltar{background:none;border:0;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer;padding:.3rem;justify-self:center}
.conv-saltar:hover{color:var(--text)}

/* el botón con la luz debajo: es lo más reconocible de Opal */
.btn-luz{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:1.05rem 1.4rem;border-radius:999px;
  background:var(--c-pill);border:1px solid rgba(255,255,255,.1);
  color:var(--text);font:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;
  isolation:isolate;overflow:hidden;
  transition:transform .16s var(--c-ease-out),border-color .2s ease;
}
.btn-luz::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-55%;height:90%;z-index:-1;
  border-radius:50%;background:radial-gradient(ellipse,rgba(168,210,230,.55),rgba(79,123,144,.25) 50%,transparent 72%);
  filter:blur(14px);transition:opacity .3s ease,transform .4s var(--c-ease-out);
}
.btn-luz:hover{border-color:rgba(168,210,230,.35)}
.btn-luz:hover::before{transform:scaleX(1.12)}
.btn-luz:active{transform:scale(.98)}
.btn-luz:disabled{opacity:.45;cursor:default}
.btn-luz:disabled::before{opacity:0}

/* ---------- analizando ---------- */
.conv-barra{height:5px;border-radius:5px;background:#1b1e22;overflow:hidden;margin-top:.4rem}
.conv-barra i{display:block;height:100%;width:0;border-radius:5px;background:var(--accent);box-shadow:0 0 14px rgba(168,210,230,.6)}

/* ---------- la revelación: el número ---------- */
.conv-revelar{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3.5rem 1.4rem max(1.4rem,env(safe-area-inset-bottom));text-align:center;
}
.conv-revelar .conv-linea{max-width:30ch;margin:0 auto}
.conv-revelar .conv-linea strong{color:var(--accent);font-weight:600}
.conv-nota{color:var(--muted);font-size:.78rem;line-height:1.5;max-width:44ch;margin:1.6rem auto 0;opacity:0;animation:conv-entra .6s var(--c-ease-out) 1.6s forwards}
.conv-nota a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.conv-revelar .btn-luz{max-width:420px;margin-top:1.8rem;opacity:0;animation:conv-entra .6s var(--c-ease-out) 2s forwards}

/* el odómetro: gira y se detiene en el número, con los vecinos borrosos */
.odometro{
  position:relative;height:calc(var(--alto) * 3);margin:1.4rem 0 1.2rem;
  --alto:clamp(4rem,3rem + 6vw,6.6rem);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);
  overflow:hidden;width:100%;
}
.odometro-cinta{display:flex;flex-direction:column;align-items:center;will-change:transform}
.odometro-cinta span{
  display:block;height:var(--alto);line-height:var(--alto);
  font-size:calc(var(--alto) * .82);font-weight:700;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--text);opacity:.18;filter:blur(2.5px);
  transition:opacity .5s ease,filter .5s ease,color .5s ease;
}
.odometro-cinta span.final{opacity:1;filter:none;color:var(--accent);text-shadow:0 0 40px rgba(168,210,230,.35)}

/* ---------- lo que encaja: la recomendación ---------- */
.conv-encaja{display:grid;gap:.65rem;margin:.4rem 0 1.1rem;text-align:left;width:100%;max-width:520px}
.encaja{
  display:grid;grid-template-columns:1fr auto;gap:.15rem .9rem;align-items:center;
  padding:1rem 1.2rem;border-radius:18px;background:var(--c-pill);border:1px solid var(--c-borde);
  opacity:0;animation:conv-entra .55s var(--c-ease-out) forwards;
  transition:border-color .2s ease,background .2s ease;
}
a.encaja:hover{border-color:rgba(168,210,230,.35);background:var(--c-pill-hover)}
.encaja.top{border-color:rgba(168,210,230,.4);background:linear-gradient(180deg,rgba(168,210,230,.07),transparent 70%),var(--c-pill)}
.encaja strong{font-size:1.02rem}
.encaja .pct{font-family:var(--mono);font-size:1.05rem;color:var(--accent);font-variant-numeric:tabular-nums}
.encaja small{grid-column:1/-1;color:var(--muted);font-size:.84rem;line-height:1.45}
.encaja .medidor{grid-column:1/-1;height:3px;border-radius:3px;background:#1d2024;margin-top:.45rem;overflow:hidden}
.encaja .medidor i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width 1.1s var(--c-ease-out)}
.conv-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;margin-top:1.1rem}
.conv-enlaces a,.conv-enlaces button{background:none;border:0;padding:.3rem 0;color:var(--muted);font:inherit;font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.conv-enlaces a:hover,.conv-enlaces button:hover{color:var(--text)}
.conv-revelar.lista{justify-content:flex-start;overflow-y:auto;padding-top:clamp(3.5rem,9vh,5.5rem)}

/* ---------- en la página: lo que la conversación cambió ---------- */
.para-ti{
  display:inline-flex;align-items:center;gap:.4rem;margin-left:.6rem;vertical-align:middle;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--accent);padding:.18rem .55rem;border-radius:999px;
  border:1px solid rgba(168,210,230,.35);background:rgba(168,210,230,.07);
}

/* los dos caminos donde estaba solo el cotizador */
.dos-caminos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:2.2rem}
.camino{
  display:grid;gap:.4rem;align-content:start;text-align:left;
  padding:1.5rem 1.5rem 1.6rem;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;
  transition:border-color .2s ease,transform .2s var(--c-ease-out),background .2s ease;
}
.camino:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)}
.camino:active{transform:scale(.99)}
.camino .mono{color:var(--accent);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.camino strong{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
.camino span:last-child{color:var(--muted);font-size:.95rem}
.camino.principal{border-color:rgba(168,210,230,.3);background:linear-gradient(160deg,rgba(168,210,230,.08),transparent 55%),var(--surface)}
@media (max-width:680px){.dos-caminos{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .conv-fantasma img{animation:none}
  .conv-linea,.conv-opcion,.encaja,.conv-nota,.conv-revelar .btn-luz{animation:none;opacity:1;transform:none;filter:none}
  .conv-linea.pasada{filter:none}
}

/* ---------- el hero que abre la conversación ---------- */
.h1-tiempo{display:grid;gap:1.15rem;max-width:none}
.h1-marca{display:block;font-size:clamp(3.4rem,1.7rem + 8.4vw,8.4rem);line-height:.9;letter-spacing:-.055em}
.h1-bajada{
  display:block;max-width:32ch;
  font-size:clamp(1.05rem,.94rem + .5vw,1.34rem);font-weight:500;line-height:1.42;letter-spacing:-.01em;
  color:var(--muted);text-wrap:balance;
}

/* En la revelación la pantalla queda limpia, como en Opal: el hilo de la
   conversación se retira por completo en vez de quedar detrás del número. */
.conv-hilo,.conv-accion{transition:opacity .4s var(--c-ease-out),visibility 0s linear 0s}
.conv[data-fase="revelar"] .conv-hilo,
.conv[data-fase="revelar"] .conv-accion{opacity:0;visibility:hidden;transition:opacity .4s var(--c-ease-out),visibility 0s linear .4s}
/* en la recomendación no hay número que dejar respirar: el botón sale justo después de las tarjetas */
.conv-revelar.lista .btn-luz{animation-delay:.85s}

/* ---------- suavidad ----------
   La línea ya no entra de golpe: entran sus palabras, una tras otra, desde
   un desenfoque leve y casi sin desplazamiento. Lo brusco era el salto de
   10px de la línea completa; aquí son 2px y casi un segundo por palabra. */
.conv-linea{animation:none}
.conv-linea.yo{animation:conv-suave .9s cubic-bezier(.22,1,.36,1) both}
.conv-palabra{
  display:inline-block;opacity:0;filter:blur(6px);transform:translateY(2px);
  animation:conv-palabra .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes conv-palabra{to{opacity:1;filter:blur(0);transform:none}}
@keyframes conv-suave{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
.conv-linea.pasada{transition:opacity 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1)}

/* las opciones también entran con calma */
.conv-opcion{transform:translateY(3px);animation:conv-opcion .7s cubic-bezier(.22,1,.36,1) forwards}

@media (prefers-reduced-motion:reduce){
  .conv-palabra,.conv-linea.yo{animation:none;opacity:1;filter:none;transform:none}
}

/* identidad (oct 2026) */
.conv{background:#04070a}
.conv::before{background:radial-gradient(circle,rgba(168,210,230,.16) 0%,rgba(79,123,144,.08) 36%,transparent 64%)}
.conv-fantasma img{filter:drop-shadow(0 0 30px rgba(168,210,230,.35))}
.conv-linea.yo{color:var(--accent)}
.conv-opcion i{background:var(--accent);box-shadow:0 0 10px rgba(168,210,230,.6)}
.btn-luz::before{background:radial-gradient(ellipse,rgba(168,210,230,.5),rgba(79,123,144,.22) 50%,transparent 72%)}
.conv-barra i{background:var(--accent);box-shadow:0 0 14px rgba(168,210,230,.55)}
.odometro-cinta span{font-family:var(--titulo);font-weight:400;letter-spacing:.01em;font-size:calc(var(--alto) * .62)}
.odometro-cinta span.final{color:var(--accent);text-shadow:0 0 40px rgba(168,210,230,.3)}
.encaja .pct{color:var(--accent)}
.encaja .medidor i{background:var(--accent)}
.encaja.top{border-color:rgba(168,210,230,.36);background:linear-gradient(180deg,rgba(168,210,230,.07),transparent 70%),var(--c-pill)}
.para-ti{color:var(--accent);border-color:rgba(168,210,230,.32);background:rgba(168,210,230,.06)}

/* ---------- la voz ---------- */
.conv-voz{
  position:absolute;top:max(1rem,env(safe-area-inset-top));right:calc(1rem + 50px);z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--c-borde);
  background:rgba(21,23,26,.7);color:var(--muted);cursor:pointer;display:grid;place-items:center;
  transition:color .2s ease,background .2s ease,transform .16s var(--c-ease-out);
}
.conv-voz:hover{color:var(--text);background:var(--c-pill-hover)}
.conv-voz:active{transform:scale(.94)}
.conv-voz:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conv-voz svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.conv-voz .raya{display:none}
.conv-voz.silencio .raya{display:inline}
.conv-voz.silencio .ondas{display:none}
.conv.con-voz .conv-voz{color:var(--accent)}

/* con voz, cada palabra termina de aparecer justo cuando se dice */
.conv.con-voz .conv-palabra{animation-duration:.5s}

/* la primera pantalla: las dos opciones lado a lado */
.conv-voz-eleccion{grid-template-columns:1fr 1fr}
.conv-voz-eleccion .conv-opcion{justify-content:center}