/* FlyPOS Landing — landing.css
   Estilos específicos de la página principal (index.html) —
   hero, slider, planes, características, FAQ y CTA final.
   El header/footer y los tokens van en shared.css / tokens.css. */

/* ── Hero ──────────────────────────────────────────────────── */
.hero{text-align:center;padding:48px 24px 40px;max-width:720px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:#241605;background:linear-gradient(135deg,#FFC773,#FF8A2B);border:1px solid rgba(255,255,255,.4);
  padding:6px 14px;border-radius:20px;margin-bottom:22px;
  box-shadow:0 4px 14px rgba(255,138,43,.3);
}
.hero-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:#241605;box-shadow:0 0 0 2px rgba(36,22,5,.15);
}
.hero h1{font-size:44px;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px;color:#fff}
.hero h1 span{
  color:#fff;display:inline-block;
  animation:heroTitlePulse 2.6s ease-in-out infinite;
}
@keyframes heroTitlePulse{
  0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}
  50%{text-shadow:0 0 18px rgba(255,255,255,.55)}
}
@media (prefers-reduced-motion: reduce){ .hero h1 span{animation:none} }
.hero p{font-size:16px;color:rgba(255,255,255,.55);max-width:480px;margin:0 auto 28px;line-height:1.6}
.hero-cta{display:flex;gap:14px;justify-content:center}

/* ── Slider de promos (editable desde el panel admin) ────────── */
.slider-wrap{max-width:980px;margin:0 auto;padding:0 24px}
.slider{
  width:100%;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:2/1;min-height:220px;
  background:linear-gradient(120deg,#123328,#0E6E55 55%,#22E0A8);
}
.slide-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 48px}
.slide-tag{font-size:12px;font-weight:700;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.slide-title{font-size:30px;font-weight:800;margin-bottom:8px;max-width:460px;line-height:1.15}
.slide-sub{font-size:14.5px;color:rgba(255,255,255,.85);max-width:420px}
.slider-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.dot.active{background:#fff;width:22px;border-radius:4px}
.slider-note{text-align:center;font-size:12px;color:rgba(255,255,255,.35);margin-top:12px;font-family:'JetBrains Mono',monospace}

/* ── Cómo funciona (3 pasos) ──────────────────────────────────── */
.steps-section{max-width:1040px;margin:70px auto 0;padding:0 24px}
.steps-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.steps-grid::before{
  content:'';position:absolute;top:59px;left:calc(16.66% + 10px);right:calc(16.66% + 10px);height:1px;
  background:linear-gradient(90deg,rgba(34,224,168,.35),rgba(180,124,255,.35),rgba(255,138,61,.35));
  z-index:0;
}
.step-card{position:relative;z-index:1;text-align:center;padding:0 8px}
.step-num{
  width:26px;height:26px;margin:0 auto 14px;border-radius:50%;background:#0A0A0A;
  border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:rgba(255,255,255,.5);
}
.step-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#22E0A8;
}
.step-card:nth-child(2) .step-icon{color:#B47CFF}
.step-card:nth-child(3) .step-icon{color:#FF8A3D}
.step-title{font-size:16px;font-weight:700;margin-bottom:8px}
.step-desc{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.55;max-width:230px;margin:0 auto}

/* ── Testimonios ───────────────────────────────────────────────── */
.testimonios-section{max-width:1040px;margin:70px auto 0;padding:0 24px}
.testimonios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.testimonio-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:24px 22px;display:flex;flex-direction:column;gap:18px;
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,background .3s;
}
.testimonio-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.testimonio-quote{font-size:14px;color:rgba(255,255,255,.8);line-height:1.6;flex:1}
.testimonio-autor{display:flex;align-items:center;gap:10px}
.testimonio-logo{width:36px;height:36px;border-radius:9px;object-fit:cover;flex-shrink:0}
.testimonio-logo-fallback{
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#22E0A8,#4FC3F7);color:#04201A;
}
.testimonio-negocio{font-size:13.5px;font-weight:700}
.testimonio-nombre{font-size:12px;color:rgba(255,255,255,.45)}

/* ── Planes ────────────────────────────────────────────────── */
.plans-section{max-width:1040px;margin:90px auto 0;padding:0 24px 100px;text-align:center;position:relative;background:#000}
.plans-title{font-size:32px;font-weight:800;margin-bottom:10px}
.plans-sub{font-size:15px;color:rgba(255,255,255,.5);margin-bottom:48px}
.plans-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.tilt-wrap{perspective:1000px}
.plan-card{
  border-radius:20px;padding:36px 24px 28px;text-align:left;position:relative;overflow:visible;
  background:rgba(255,255,255,.055);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset -8px -8px 24px -16px rgba(255,255,255,.3),
    inset 8px 8px 24px -16px rgba(255,255,255,.2);
  animation:cardIn .6s cubic-bezier(.4,0,.2,1) both;
  transition:transform .12s ease-out,border-color .35s,box-shadow .35s;
  transform-style:preserve-3d;will-change:transform;
}
.tilt-wrap:nth-child(1) .plan-card{animation-delay:.05s}
.tilt-wrap:nth-child(2) .plan-card{animation-delay:.15s}
.tilt-wrap:nth-child(3) .plan-card{animation-delay:.25s}
.plan-card.featured{border:1px solid rgba(180,124,255,.3)}
.tilt-wrap:nth-child(1) .plan-card:hover{border-color:rgba(79,195,247,.4);box-shadow:0 20px 45px rgba(79,195,247,.18)}
.tilt-wrap:nth-child(2) .plan-card:hover{border-color:rgba(180,124,255,.4);box-shadow:0 20px 45px rgba(180,124,255,.2)}
.tilt-wrap:nth-child(3) .plan-card:hover{border-color:rgba(255,138,61,.4);box-shadow:0 20px 45px rgba(255,138,61,.18)}
.plan-btn{transition:transform .2s,filter .2s;cursor:pointer;display:block;text-align:center;margin-top:22px;padding:12px;border-radius:8px;font-weight:700;font-size:14px;color:#fff}
.plan-btn:hover{transform:scale(1.03);filter:brightness(1.08)}

/* ── Botones de compra (Wompi / WhatsApp) — cuando alguno está
   habilitado, reemplazan al botón "Elegir plan" genérico ────────── */
.plan-buy-btn{
  transition:transform .2s,filter .2s;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding:12px;border-radius:8px;font-weight:700;font-size:13.5px;color:#fff;border:none;width:100%;
}
.plan-buy-btn:first-of-type{margin-top:22px}
.plan-buy-btn:hover{transform:scale(1.03);filter:brightness(1.08)}
.plan-buy-wompi{background:linear-gradient(135deg,#FFC300,#FF8A00);color:#1A1200;position:relative;overflow:hidden}
.plan-buy-wompi::after{
  content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);
  animation:planBuyShine 3s ease-in-out infinite;pointer-events:none;
}
@keyframes planBuyShine{
  0%{left:-60%} 20%{left:130%} 100%{left:130%}
}
.plan-buy-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);animation:planBuyShake 3s ease-in-out infinite}
@keyframes planBuyShake{
  0%,86%,100%{transform:translateX(0)}
  88%{transform:translateX(-5px)}
  90%{transform:translateX(5px)}
  92%{transform:translateX(-4px)}
  94%{transform:translateX(4px)}
  96%{transform:translateX(-2px)}
  98%{transform:translateX(2px)}
}

/* ── Modal de selección de asesor ─────────────────────────────────── */
.asesor-modal-bg{
  position:fixed;inset:0;background:rgba(4,7,6,.75);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:2000;padding:20px;
}
.asesor-modal-bg.open{display:flex}
.asesor-modal-box{
  background:#0B0F0E;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:28px;max-width:380px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.asesor-modal-title{font-size:18px;font-weight:800;margin-bottom:4px}
.asesor-modal-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:20px}
.asesor-chip{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:10px;
}
.asesor-chip:hover{border-color:#25D366;background:rgba(37,211,102,.08)}
.asesor-chip-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.asesor-chip-name{font-weight:700;font-size:14px}
.asesor-modal-close{
  display:block;text-align:center;margin-top:16px;font-size:13px;color:rgba(255,255,255,.5);
  cursor:pointer;background:none;border:none;width:100%;
}
.asesor-modal-close:hover{color:#fff}
.plan-name-badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  padding:7px 20px;border-radius:20px;font-size:12.5px;font-weight:800;
  letter-spacing:.04em;color:#04201A;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:2;
}
.plan-name-badge.basic{background:linear-gradient(135deg,#4FC3F7,#22E0A8)}
.plan-name-badge.pro{background:linear-gradient(135deg,#B47CFF,#FF3D68);color:#2A0A18}
.plan-name-badge.ent{background:linear-gradient(135deg,#FFD24C,#FF8A3D)}
.plan-price{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;margin-bottom:4px}
.plan-price.basic{background:linear-gradient(135deg,#4FC3F7,#22E0A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-price.pro{background:linear-gradient(135deg,#B47CFF,#FF3D68);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-price.ent{background:linear-gradient(135deg,#FFD24C,#FF8A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-period{font-size:12.5px;color:rgba(255,255,255,.4);margin-bottom:22px}
.plan-feat{font-size:13.5px;color:rgba(255,255,255,.88);padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}
/* Colapsada muestra los 3 límites base (siempre presentes en todo plan);
   al pasar el mouse sobre la tarjeta se expande para revelar el resto de
   funciones. Sin fundido en la base — quedaba una sombra rara encima de
   la 3ra línea, el corte seco con overflow:hidden se ve más limpio. */
.plan-feats-wrap{max-height:104px;overflow:hidden;margin-bottom:10px;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.plan-card:hover .plan-feats-wrap{max-height:600px}
@media (prefers-reduced-motion: reduce){.plan-feats-wrap{transition:none}}
.btn-basic{background:linear-gradient(135deg,#4FC3F7,#22E0A8)}
.btn-pro{background:linear-gradient(135deg,#B47CFF,#FF3D68)}
.btn-ent{background:linear-gradient(135deg,#FFD24C,#FF8A3D);color:#2B1D00}
.featured-tag{position:absolute;top:16px;right:16px;background:rgba(255,61,104,.15);color:#FF3D68;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:20px;animation:pulseTag 2.4s ease-in-out infinite}
@keyframes pulseTag{0%,100%{box-shadow:0 0 0 0 rgba(255,61,104,.35)}50%{box-shadow:0 0 0 6px rgba(255,61,104,0)}}

/* ── Tabla comparativa de planes ──────────────────────────────── */
.plans-compare-wrap{margin-top:64px;text-align:left}
.plans-compare-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:22px}
.plans-compare-scroll{overflow-x:auto;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.03)}
.plans-compare-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.plans-compare-table th,.plans-compare-table td{padding:12px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap}
.plans-compare-table th:first-child,.plans-compare-table td:first-child{text-align:left;white-space:normal;color:rgba(255,255,255,.75);font-weight:500}
.plans-compare-table thead th{font-size:13px;font-weight:800;color:#fff;padding-top:18px}
.plans-compare-table thead th:not(:first-child){background:rgba(255,255,255,.03)}
.plans-compare-table tbody tr:last-child td{border-bottom:none}
.plans-compare-table tbody tr:hover td{background:rgba(255,255,255,.03)}
.compare-check{color:#22E0A8}
.compare-cross{color:rgba(255,255,255,.22)}

/* ── Características ──────────────────────────────────────── */
.features-section{max-width:1040px;margin:40px auto 0;padding:0 24px 100px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:26px 22px;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,background .3s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.feature-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fi-cyan{background:rgba(79,195,247,.14);color:#4FC3F7}
.fi-purple{background:rgba(180,124,255,.14);color:#B47CFF}
.fi-gold{background:rgba(255,138,61,.14);color:#FF8A3D}
.feature-title{font-size:16px;font-weight:700;margin-bottom:8px}
.feature-desc{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.55}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-section{max-width:720px;margin:0 auto;padding:0 24px 100px}
.faq-item{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;
  padding:18px 22px;margin-bottom:12px;cursor:pointer;transition:border-color .25s;
}
.faq-item:hover{border-color:rgba(255,255,255,.22)}
.faq-q{font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.faq-chev{color:#22E0A8;font-size:18px;transition:transform .3s}
.faq-item.open .faq-chev{transform:rotate(180deg)}
.faq-a{
  font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;
  max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease;
}
.faq-item.open .faq-a{max-height:200px;margin-top:12px}

/* ── CTA final ─────────────────────────────────────────────── */
.final-cta{text-align:center;max-width:600px;margin:0 auto;padding:0 24px 110px}
.final-cta-title{font-size:30px;font-weight:800;margin-bottom:10px}
.final-cta-sub{font-size:15px;color:rgba(255,255,255,.5);margin-bottom:28px}

/* ═══ RESPONSIVE — tablet y móvil ═══════════════════════════════ */
@media (max-width:860px){
  .plans-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .testimonios-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  .steps-section{padding:0 16px;margin-top:50px}
  .steps-grid{grid-template-columns:1fr;gap:28px}
  .steps-grid::before{display:none}
  .step-desc{max-width:100%}
  .testimonios-section{padding:0 16px;margin-top:50px}

  .hero{padding:36px 20px 32px}
  .hero h1{font-size:32px}
  .hero p{font-size:14.5px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta a,.hero-cta button{width:100%}

  .slider-wrap{padding:0 16px}
  .slide-content{padding:24px 22px;position:relative;inset:auto}
  .slide-title{font-size:21px;max-width:100%}
  .slide-sub{font-size:13px;max-width:100%}

  .plans-section{padding:0 16px 70px;margin-top:60px}
  .plans-title{font-size:24px}
  .features-section{padding:0 16px 70px}
  .features-grid{grid-template-columns:1fr}
  .faq-section{padding:0 16px 70px}
  .final-cta{padding:0 16px 80px}
  .final-cta-title{font-size:24px}
}