/* ============================================================
   Listo247 — Home (tarea 04)
   Estilos específicos de las secciones del Home: problema,
   antes/después, flywheel + conversaciones, voz, qué hacemos, CTA.
   Tokens y componentes base vienen de design-system.css.
   ============================================================ */

/* ---- Hero: refuerzo above-the-fold (la base está en el critical CSS) ---- */
.hero .eyebrow{margin-bottom:8px}
.hero .lead{margin-top:16px}

/* ============================================================
   El problema — escena de storytelling
   ============================================================ */
.problema{position:relative;overflow:hidden}
.problema__scene{
  max-width:760px;margin-inline:auto;text-align:center;position:relative;z-index:1;
}
.problema__clock{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-weight:800;font-size:.95rem;color:var(--primary-deep);
  background:var(--primary-soft);padding:8px 16px;border-radius:100px;margin-bottom:20px;
}
.problema__clock svg{width:16px;height:16px}
.problema h2{margin-bottom:18px}
.problema__missed{
  display:inline-block;margin-top:8px;font-weight:700;color:#9aa6b2;
  font-size:.92rem;font-style:italic;
}
/* Mancha de fondo con parallax suave */
.problema__glow{
  position:absolute;inset:auto;top:-10%;left:50%;width:min(720px,120%);height:380px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(15,181,166,.10), transparent 70%);
}

/* ============================================================
   Antes / Después — neo-toggle
   ============================================================ */
.antes__toggle{display:flex;justify-content:center;margin-bottom:clamp(28px,4vw,40px)}
.antes__panels{position:relative;max-width:680px;margin-inline:auto}
.antes__panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(22px,3.5vw,36px);
}
.antes__panel[hidden]{display:none}
.antes__panel h3{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.antes__panel .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.antes__panel--off .dot{background:#cdd6df}
.antes__panel--on .dot{background:var(--ok)}
.antes__list{display:grid;gap:14px}
.antes__item{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.antes__item svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.antes__item--bad svg{color:#cf5b5b}
.antes__item--good svg{color:var(--ok)}
.antes__item b{color:var(--ink)}

/* ============================================================
   Flywheel de canales + paneles de conversación
   ============================================================ */
.canales__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;
}
@media(max-width:860px){.canales__grid{grid-template-columns:1fr}}
.canales__convos{min-height:0}
.canales__hint{
  text-align:center;font-size:.9rem;color:var(--muted);margin-top:14px;
}
.canales__panel[hidden]{display:none}
.canales__panel .chat{max-width:none}
/* Fallback estático (lista) — sólo visible si reduced-motion lo expone */
.flywheel-fallback ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin-top:12px}

/* ============================================================
   Escucha cómo suena — reproductor Voice AI
   ============================================================ */
.voz__card{
  max-width:680px;margin-inline:auto;display:flex;gap:clamp(16px,3vw,28px);
  align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(20px,3vw,30px);
}
.voz__play{
  flex:0 0 auto;width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
  background:var(--primary);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(11,124,115,.35);transition:transform .18s ease,background .2s ease;
}
.voz__play:hover{transform:scale(1.05);background:var(--primary-deep)}
.voz__play svg{width:30px;height:30px}
.voz__body{flex:1;min-width:200px}
.voz__wave{display:flex;align-items:center;gap:3px;height:38px;margin:10px 0}
.voz__wave span{
  flex:1;background:var(--primary-soft);border-radius:100px;height:30%;
  transition:height .25s ease,background .25s ease;
}
.voz.is-playing .voz__wave span{background:var(--primary);animation:voz-bounce 1s ease-in-out infinite}
.voz__wave span:nth-child(odd){animation-delay:.15s}
.voz__wave span:nth-child(3n){animation-delay:.3s}
@keyframes voz-bounce{0%,100%{height:25%}50%{height:90%}}
.voz__transcript{font-size:.95rem;color:var(--muted);font-style:italic}
.voz__transcript b{color:var(--ink);font-style:normal}
@media(prefers-reduced-motion:reduce){
  .voz.is-playing .voz__wave span{animation:none;height:55%}
}

/* ============================================================
   CTA final — banda teal de cierre (máximo contraste para rematar)
   ============================================================ */
.cta-final{
  text-align:center;
  background:linear-gradient(160deg,var(--primary-deep) 0%,var(--primary) 100%);
}
.cta-final__inner{
  max-width:680px;margin-inline:auto;background:var(--surface);
  border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(3,52,47,.28);
  padding:clamp(32px,5vw,56px);
}
.cta-final h2{margin-bottom:14px}
.cta-final .lead{margin:0 auto 26px;max-width:520px}

/* ============================================================
   Mejoras visuales (glow, resaltados, micro-interacciones)
   ============================================================ */

/* Glow de marca difuso detrás del hero, deriva lenta */
.hero::after{
  content:"";position:absolute;inset:-25% -10% auto -10%;height:130%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 48% at 24% 30%, rgba(22,214,192,.18), transparent 70%),
    radial-gradient(40% 50% at 80% 36%, rgba(84,104,255,.15), transparent 72%);
  animation:heroGlow 22s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-3%,0) scale(1.1)}
}

/* Frase clave del H1 con gradiente de marca */
.hl{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Reloj "en vivo": respira con un anillo suave */
.problema__clock{animation:clockPulse 2.6s ease-in-out infinite}
@keyframes clockPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(15,181,166,0)}
  50%{box-shadow:0 0 0 7px rgba(15,181,166,.10)}
}
/* La línea "demasiado tarde" entra con un beat de retraso */
.problema__missed{opacity:0;transform:translateY(8px);transition:opacity .6s ease .55s,transform .6s ease .55s}
.problema__scene.is-in .problema__missed{opacity:1;transform:none}

/* Tarjetas de servicios: elevación + borde de marca al pasar el ratón */
.card--link{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card--link:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(15,27,45,.12);
  border-color:rgba(15,181,166,.5);
}

/* Botón de voz: anillo de progreso real del clip */
.voz__play{position:relative}
.voz__ring{
  position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);
  transform:rotate(-90deg);pointer-events:none;
}
.voz__ring circle{fill:none;stroke-width:4}
.voz__ring-track{stroke:rgba(15,181,166,.18)}
.voz__ring-prog{
  stroke:var(--primary);stroke-linecap:round;
  stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset .12s linear;
}

@media(prefers-reduced-motion:reduce){
  .hero::after{animation:none}
  .problema__clock{animation:none}
  .problema__missed{transition:none;opacity:1;transform:none}
  .card--link:hover{transform:none}
}