/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-primary:#05080f;
  --bg-secondary:#0a0f1a;
  --bg-card:rgba(255,255,255,0.03);
  --border-color:rgba(255,255,255,0.06);
  --text-primary:#f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:#64748b;
  --accent-1:#06b6d4;
  --accent-2:#3b82f6;
  --accent-3:#f59e0b;
  --gradient:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --gradient-text:linear-gradient(135deg, var(--accent-1), #8b5cf6);
  --radius:16px;
  --radius-sm:10px;
  --transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== TYPOGRAPHY ===== */
.gradient-text{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== NAVIGATION ===== */
header.sticky{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(5,8,15,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-color);
}

.nav{
  max-width:1280px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

.logo{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-primary);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.5rem;
  letter-spacing:-0.5px;
}

.logo-icon{color:var(--accent-1);font-size:1.4rem}

.nav-links{
  display:flex;
  gap:2rem;
  align-items:center;
}

.nav-links a{
  color:var(--text-secondary);
  text-decoration:none;
  font-size:0.875rem;
  font-weight:500;
  transition:color var(--transition);
  letter-spacing:0.01em;
}

.nav-links a:hover{color:var(--text-primary)}

.social-icons{display:flex;gap:1rem;align-items:center}
.social-icons a{
  color:var(--text-muted);
  transition:all var(--transition);
  display:flex;
  align-items:center;
}

.social-icons a:hover{color:var(--accent-1);transform:translateY(-2px)}

.mobile-menu-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}

.mobile-menu-btn span{
  display:block;
  width:24px;
  height:2px;
  background:var(--text-primary);
  transition:var(--transition);
  border-radius:2px;
}

.mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(max-width:768px){
  .nav-links{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    width:100%;
    flex-direction:column;
    background:rgba(5,8,15,0.98);
    backdrop-filter:blur(20px);
    padding:1.5rem 2rem;
    gap:1.25rem;
    border-bottom:1px solid var(--border-color);
  }
  .nav-links.show{display:flex}
  .mobile-menu-btn{display:flex}
  .social-icons{display:none}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,15,0.7) 0%, rgba(5,8,15,0.85) 50%, var(--bg-primary) 100%);
}

.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:800px;
  padding:0 2rem;
  animation:fadeInUp 1s ease-out;
}

.hero-badge{
  display:inline-block;
  padding:0.4rem 1.2rem;
  border:1px solid rgba(6,182,212,0.3);
  border-radius:999px;
  font-size:0.8rem;
  color:var(--accent-1);
  margin-bottom:1.5rem;
  background:rgba(6,182,212,0.08);
  letter-spacing:0.05em;
  backdrop-filter:blur(10px);
}

.hero-title{
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:1.25rem;
  letter-spacing:-1px;
}

.hero-subtitle{
  font-size:1.125rem;
  color:var(--text-secondary);
  max-width:600px;
  margin:0 auto 2.5rem;
  line-height:1.7;
}

.hero-buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.scroll-indicator{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--text-muted);
  font-size:0.75rem;
  animation:bounce 2s infinite;
}

@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.875rem 1.75rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  transition:all var(--transition);
  cursor:pointer;
  border:none;
}

.btn-primary{
  background:var(--gradient);
  color:#fff;
  box-shadow:0 4px 24px rgba(6,182,212,0.25);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(6,182,212,0.35);
}

.btn-secondary{
  background:rgba(255,255,255,0.06);
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
}

.btn-secondary:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  color:var(--accent-1);
  border:1.5px solid var(--accent-1);
}

.btn-outline:hover{
  background:rgba(6,182,212,0.1);
  transform:translateY(-2px);
}

.btn-lg{padding:1rem 2.25rem;font-size:1.05rem}

/* ===== SECTIONS ===== */
.section{
  padding:6rem 2rem;
  position:relative;
}

.section-alt{
  background:var(--bg-secondary);
}

.container{
  max-width:1200px;
  margin:0 auto;
}

.section-header{
  text-align:center;
  margin-bottom:4rem;
}

.section-tag{
  display:inline-block;
  padding:0.3rem 1rem;
  background:rgba(6,182,212,0.1);
  border:1px solid rgba(6,182,212,0.2);
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
  color:var(--accent-1);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:1rem;
}

.section-title{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  margin-bottom:1rem;
  letter-spacing:-0.5px;
}

.section-desc{
  font-size:1.1rem;
  color:var(--text-secondary);
  max-width:650px;
  margin:0 auto;
  line-height:1.7;
}

/* ===== CARDS GRID ===== */
.cards-grid{
  display:grid;
  gap:1.5rem;
}

.cards-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.cards-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cards-grid.cols-4{grid-template-columns:repeat(4,1fr)}

@media(max-width:1024px){
  .cards-grid.cols-3,.cards-grid.cols-4{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .cards-grid.cols-2,.cards-grid.cols-3,.cards-grid.cols-4{grid-template-columns:1fr}
  .section{padding:4rem 1.25rem}
  .hero-content{padding:0 1rem}
}

/* ===== CARD ===== */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:2rem;
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(6,182,212,0.06), transparent 40%);
  opacity:0;
  transition:opacity 0.5s;
}

.card:hover::before{opacity:1}

.card:hover{
  border-color:rgba(6,182,212,0.2);
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  background:rgba(6,182,212,0.1);
  color:var(--accent-1);
  margin-bottom:1.25rem;
}

.card-icon.accent{background:rgba(245,158,11,0.12);color:var(--accent-3)}

.card-icon.large-icon{
  width:80px;
  height:80px;
  border-radius:20px;
  background:rgba(6,182,212,0.08);
  color:var(--accent-1);
}

.card h3{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:0.5rem;
}

.card p{
  color:var(--text-secondary);
  font-size:0.925rem;
  line-height:1.65;
}

.card-dark{background:rgba(0,0,0,0.25);border-color:rgba(255,255,255,0.04)}

.card-features{
  margin-top:1rem;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.card-features li{
  font-size:0.825rem;
  color:var(--text-muted);
  padding-left:1.25rem;
  position:relative;
}

.card-features li::before{
  content:'';
  position:absolute;
  left:0;
  top:0.45em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-1);
}

/* ===== MINI CARDS (Convenios) ===== */
.mini-card{
  padding:1.25rem;
  text-align:center;
}

.mini-card h4{
  font-size:1rem;
  font-weight:600;
  margin-bottom:0.25rem;
}

.mini-price{
  font-size:0.9rem;
  font-weight:700;
  color:var(--accent-1);
  margin-bottom:0.25rem;
}

.mini-loc{
  font-size:0.75rem;
  color:var(--text-muted);
}

/* ===== APP CARDS ===== */
.card-app{
  text-align:center;
  padding:2.5rem 2rem;
}

.card-app-passenger{border-color:rgba(6,182,212,0.15)}
.card-app-driver{border-color:rgba(139,92,246,0.15)}

.card-app .card-icon.large-icon{margin:0 auto 1.25rem}

.card-app .card-features{
  text-align:left;
  max-width:280px;
  margin:1.25rem auto 0;
}

/* ===== BADGE ===== */
.badge{
  display:inline-block;
  padding:0.35rem 1rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.05em;
  margin-bottom:0.75rem;
}

.badge-coming{
  background:rgba(139,92,246,0.15);
  color:#a78bfa;
  border:1px solid rgba(139,92,246,0.2);
}

/* ===== TESTIMONIALS ===== */
.testimonial{padding:2rem}

.testimonial-text{
  font-size:1rem;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:1.5rem;
  font-style:italic;
}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  flex-shrink:0;
}

.testimonial-author strong{
  display:block;
  font-size:0.9rem;
  font-weight:600;
}

.testimonial-author span{
  font-size:0.8rem;
  color:var(--text-muted);
}

/* ===== CONTACT ===== */
.contact-card{
  text-align:center;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.contact-card .card-icon{
  margin:0 auto 1rem;
}

.contact-card p{
  font-size:1.125rem;
  font-weight:600;
  color:var(--accent-1);
}

/* ===== SOCIAL LINKS LARGE ===== */
.social-links-large{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:3rem;
  flex-wrap:wrap;
}

.social-link{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--text-secondary);
  text-decoration:none;
  font-weight:500;
  padding:0.75rem 1.5rem;
  border:1px solid var(--border-color);
  border-radius:999px;
  transition:all var(--transition);
}

.social-link:hover{
  color:var(--accent-1);
  border-color:var(--accent-1);
  background:rgba(6,182,212,0.06);
}

/* ===== CTA ===== */
.cta-center{
  text-align:center;
  margin-top:3rem;
}

.cta-hint{
  font-size:0.85rem;
  color:var(--text-muted);
  margin-top:0.75rem;
}

/* ===== FOOTER ===== */
.footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-color);
  padding:4rem 2rem 2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  max-width:1200px;
  margin:0 auto;
}

.footer-brand h3{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:0.5rem;
}

.footer-brand p{
  color:var(--text-muted);
  font-size:0.9rem;
}

.footer-links h4{
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:1rem;
}

.footer-links a{
  display:block;
  color:var(--text-secondary);
  text-decoration:none;
  font-size:0.9rem;
  padding:0.3rem 0;
  transition:color var(--transition);
}

.footer-links a:hover{color:var(--accent-1)}

.footer-bottom{
  text-align:center;
  padding-top:2rem;
  margin-top:2rem;
  border-top:1px solid var(--border-color);
  color:var(--text-muted);
  font-size:0.8rem;
}

@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .social-links-large{gap:1rem}
}

/* ===== SCROLL ANIMATIONS ===== */
.card.visible,.section-header.visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

/* ===== SELECTION ===== */
::selection{background:rgba(6,182,212,0.3);color:#fff}