/* home.css — Estilos de los agregados de la home (fuera de la SPA).
   Banner sticky de lanzamiento + quick-access FAB "Empezar".
   La lógica vive en /js/pages/home.js. */

/* === Banner sticky de lanzamiento === */
#ttto-launch-banner {
  position: sticky; top: 0; z-index: 9998;
  background: linear-gradient(90deg, #18b3ab 0%, #159a93 100%);
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
#ttto-launch-banner b { font-weight: 600; letter-spacing:.2px; }
#ttto-launch-banner .ttto-banner-cta {
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.18); color:#fff;
  padding: 4px 12px; border-radius: 9999px;
  text-decoration: none; font-weight: 600;
  border: 1px solid rgba(255,255,255,.3);
  transition: background .15s, transform .12s;
}
#ttto-launch-banner .ttto-banner-cta:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
#ttto-launch-banner .ttto-banner-close {
  background:none; border:none; color:#fff; opacity:.75;
  cursor:pointer; padding: 4px 8px; font-size: 18px; line-height: 1;
}
#ttto-launch-banner .ttto-banner-close:hover { opacity: 1; }
@media (max-width: 640px) {
  #ttto-launch-banner { font-size: 13px; padding: 7px 10px; gap: 8px; }
  #ttto-launch-banner .ttto-banner-cta { padding: 3px 10px; font-size: 12px; }
  #ttto-launch-banner .ttto-banner-text-long { display:none; }
}

/* === Quick-access FAB — fuera de la SPA, no toca a React === */
#ttto-fab { position:fixed; right:20px; bottom:20px; z-index:9999; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
#ttto-fab .ttto-menu { display:none; flex-direction:column; gap:8px; margin-bottom:10px; align-items:flex-end; }
#ttto-fab.open .ttto-menu { display:flex; animation: tttoFadeIn .15s ease-out; }
@keyframes tttoFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
#ttto-fab .ttto-link {
  display:inline-flex; align-items:center; gap:8px;
  background:#0f1f3a; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.12);
  font-size:14px; font-weight:500;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .12s ease, background .15s, border-color .15s;
  white-space:nowrap;
}
#ttto-fab .ttto-link:hover { background:#1a2f4a; border-color:#18b3ab; transform: translateX(-2px); }
#ttto-fab .ttto-link i { color:#18b3ab; font-size:16px; }
#ttto-fab .ttto-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#18b3ab; color:#fff; border:none;
  padding:14px 22px; border-radius:9999px;
  font-size:14px; font-weight:600;
  box-shadow: 0 8px 24px rgba(24,179,171,.45), 0 2px 6px rgba(0,0,0,.2);
  cursor:pointer; transition: background .15s, transform .12s ease, box-shadow .15s;
  position: relative;
}
#ttto-fab .ttto-toggle:hover { background:#159a93; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(24,179,171,.55); }
/* Pulso para llamar la atención */
#ttto-fab .ttto-toggle::before {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(24,179,171,.7);
  animation: tttoPulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes tttoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(24,179,171,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(24,179,171,0); }
  100% { box-shadow: 0 0 0 0 rgba(24,179,171,0); }
}
#ttto-fab.open .ttto-toggle::before,
#ttto-fab.touched .ttto-toggle::before { animation: none; }

#ttto-fab .ttto-toggle .ico-open { display:inline-block; }
#ttto-fab .ttto-toggle .ico-close { display:none; }
#ttto-fab.open .ttto-toggle .ico-open { display:none; }
#ttto-fab.open .ttto-toggle .ico-close { display:inline-block; }
@media (max-width:480px) {
  #ttto-fab { right:14px; bottom:14px; }
  #ttto-fab .ttto-toggle { padding:12px 18px; font-size:13px; }
  #ttto-fab .ttto-link { padding:9px 14px; font-size:13px; }
}

/* === FAB en modo WhatsApp (verde) — portado de producción === */
#ttto-fab .ttto-toggle-wa { background:#25D366; box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.2); }
#ttto-fab .ttto-toggle-wa:hover { background:#1ebe5b; box-shadow: 0 10px 28px rgba(37,211,102,.55); }
#ttto-fab .ttto-toggle-wa::before { box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: tttoPulseWa 2.4s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes tttoPulseWa {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
#ttto-fab .ttto-link-wa i { color:#25D366; font-size:18px; }
#ttto-fab .ttto-menu-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #94a3b8; padding: 4px 14px 2px;
  text-align: right;
}
#ttto-fab .ttto-menu-divider {
  height: 1px; background: rgba(255,255,255,.1); margin: 6px 0;
}

/* === Hero de venta: video + CTA — portado de producción === */
#ttto-sales-hero {
  background: linear-gradient(180deg, #0a1628 0%, #0f1f3a 100%);
  color: #fff;
  padding: 64px 24px 56px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
#ttto-sales-hero .ttto-sales-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center;
}
#ttto-sales-hero .ttto-sales-eyebrow {
  display: inline-block;
  background: rgba(24,179,171,.15);
  color: #5eead4;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 6px 14px; border-radius: 9999px;
  border: 1px solid rgba(24,179,171,.3);
  margin-bottom: 18px;
}
#ttto-sales-hero .ttto-sales-title {
  font-size: clamp(28px, 3.8vw, 44px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 16px;
}
#ttto-sales-hero .ttto-sales-title span { color: #18b3ab; }
#ttto-sales-hero .ttto-sales-desc {
  font-size: 16px; line-height: 1.65; color: #cbd5e1;
  margin: 0 0 28px; max-width: 520px;
}
#ttto-sales-hero .ttto-sales-desc b { color: #fff; font-weight: 600; }
#ttto-sales-hero .ttto-sales-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #18b3ab 0%, #14a098 100%);
  color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700;
  padding: 16px 28px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24,179,171,.4);
  transition: all .2s;
}
#ttto-sales-hero .ttto-sales-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(24,179,171,.55);
}
#ttto-sales-hero .ttto-sales-cta i { font-size: 20px; }
#ttto-sales-hero .ttto-sales-cta-arrow { transition: transform .2s; }
#ttto-sales-hero .ttto-sales-cta:hover .ttto-sales-cta-arrow { transform: translateX(4px); }
#ttto-sales-hero .ttto-sales-trust {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 24px;
  font-size: 13px; color: #94a3b8;
}
#ttto-sales-hero .ttto-sales-trust span { display: inline-flex; align-items: center; gap: 6px; }
#ttto-sales-hero .ttto-sales-trust i { color: #18b3ab; font-size: 14px; }
#ttto-sales-hero .ttto-sales-video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
#ttto-sales-hero .ttto-sales-video-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Fachada del video: miniatura + play propio, sin UI de YouTube hasta el click
   (el iframe recién se carga al reproducir; ver js/pages/home.js) */
#ttto-video-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer; background: #000;
  display: block;
}
#ttto-video-facade img {
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85;
  transition: opacity .2s, transform .3s;
}
#ttto-video-facade:hover img { opacity: 1; transform: scale(1.02); }
#ttto-video-facade .ttto-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 9999px;
  background: rgba(24,179,171,.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transition: transform .15s, background .15s;
}
#ttto-video-facade:hover .ttto-video-play { transform: translate(-50%, -50%) scale(1.08); background: #18b3ab; }

@media (max-width: 900px) {
  #ttto-sales-hero { padding: 40px 18px 36px; }
  #ttto-sales-hero .ttto-sales-inner { grid-template-columns: 1fr; gap: 32px; }
  #ttto-sales-hero .ttto-sales-video { order: -1; }
  #ttto-sales-hero .ttto-sales-cta { width: 100%; justify-content: center; }
}