/* TripMind Investor Landing — estilo base para cPanel */
/* Tipografía y colores */
:root{
  --bg:#0A0F1E;
  --ink:#E7ECF7;
  --muted:#9FB0D0;
  --accent:#5AE8C9;
  --accent-2:#7AA4FF;
  --card:#11192C;
  --line:#1B2642;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}

/* Barra progreso */
#progress{
  position:fixed;top:0;left:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:left center;transform:scaleX(0);z-index:9999
}

/* Utilidades */
.wrap{max-width:1100px;margin:0 auto;padding:64px 24px}
.strip{background:linear-gradient(180deg,#0A0F1E 0%,#0D1530 100%)}
.panel{background:#0A0F1E}
.panel--cta{background:radial-gradient(60% 60% at 50% 0%,#122046 0%,#0A0F1E 60%)}
.accent{color:var(--accent)}
.big{font-size:28px;font-weight:800}

.btn{display:inline-block;padding:12px 20px;border-radius:14px;text-decoration:none;border:1px solid var(--line);transition:all .25s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#07101E;border:none}
.btn--ghost{color:var(--ink);background:transparent}

/* Hero */
.hero{position:relative;min-height:92vh;background:
  radial-gradient(60% 60% at 80% 10%,rgba(90,232,201,.18),transparent 60%),
  radial-gradient(60% 60% at 10% 10%,rgba(122,164,255,.12),transparent 60%),
  url('https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,16,30,.65),#0A0F1E 80%);}
.hero__content{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:120px 24px 80px}
.hero h1{font-size: clamp(36px, 6vw, 68px);line-height:1.05;margin:0 0 16px}
.hero__tagline{font-size:clamp(16px,2.4vw,22px);color:var(--muted);margin:0 0 24px}
.hero__cta .btn{margin-right:12px}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}

/* Columns & Cards */
.cols{display:grid;grid-template-columns:1fr;gap:28px;margin-top:28px}
@media (min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.cols--middle{align-items:center}

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0 28px}
@media (min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}

/* Listas y badges */
.list{padding-left:18px}
.list li{margin:8px 0;color:var(--ink)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badges span{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0F1830;color:var(--muted)}

/* KPI */
.kpi{display:flex;align-items:end;gap:12px;margin-bottom:8px}
.kpi__num{font-size: clamp(28px, 8vw, 60px);font-weight:800;line-height:.9}
.kpi__label{color:var(--muted)}

/* Timeline */
.timeline{position:relative;border-left:2px dashed var(--line);margin:28px 0 0 10px;padding-left:18px}
.step{position:relative;padding:10px 0 10px 0}
.step__dot{position:absolute;left:-20px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.step h3{margin:4px 0 6px}

/* Donut chart */
#donut{display:flex;align-items:center;justify-content:center;margin:6px 0 10px}
.donut{width:260px;height:260px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));}
.donut path{stroke:#0A0F1E;stroke-width:1}
.donut .c1{fill:#5AE8C9}
.donut .c2{fill:#7AA4FF}
.donut .c3{fill:#C08BFF}
.donut .c4{fill:#FFD580}
.donut .c5{fill:#FF8FA3}
.legend{list-style:none;padding:0;margin:12px 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px;color:var(--muted)}
.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.legend .c1{background:#5AE8C9}.legend .c2{background:#7AA4FF}.legend .c3{background:#C08BFF}.legend .c4{background:#FFD580}.legend .c5{background:#FF8FA3}

.donut .c6{fill:#4DD4FF}   /* celeste claro */
.donut .c7{fill:#FFB347}   /* naranja */
.donut .c8{fill:#A5FF8F}   /* verde lima */

.legend .c6{background:#4DD4FF}
.legend .c7{background:#FFB347}
.legend .c8{background:#A5FF8F}


/* Roadmap */
.roadmap{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media (min-width:860px){.roadmap{grid-template-columns:repeat(3,1fr)}}
.rm{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}

/* QR */
.qrbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.qrbar input{flex:1;min-width:240px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0F1830;color:var(--ink)}
.qrwrap{display:flex;align-items:center;gap:20px;margin-top:12px;flex-wrap:wrap}
.qrbox{width:240px;height:240px;border-radius:16px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;background:#0F1830}

/* Footer */
.footer{border-top:1px solid var(--line);background:#0A0F1E}
.footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--ink)}

/* Efectos de entrada */
.fx-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.fx-reveal.show{opacity:1;transform:none}

/* Accesibilidad */
:focus-visible{outline:2px dashed var(--accent-2);outline-offset:2px}
.footnote{color:var(--muted);font-size:12px;margin-top:8px}

/* Language modal */
.lang-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.lang-box {
  background: var(--card);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.lang-box h2 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--ink);
}
.lang-options {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.lang-options button {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #fff;
  transition: transform .2s ease;
}
.lang-options button:hover {
  transform: translateY(-2px);
}

/* Language modal fix */
.lang-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  display: none; /* por defecto oculto */
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.lang-box {
  background: var(--card);
  padding: 28px;
  border-radius: 16px;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.lang-box h2 {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.lang-options {
  display: flex;
  flex-direction: column; /* en móvil vertical */
  gap: 10px;
}
@media(min-width:600px){
  .lang-options { flex-direction: row; }
}

.lang-options button {
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease;
}
.lang-options button:hover {
  transform: translateY(-2px);
}

/* Donut responsive */
#donut {
  display: flex;
  justify-content: center;
  align-items: center;
}
.donut {
  max-width: 240px;
  max-height: 240px;
  width: 100%;
  height: auto;
}
.donut path {
  stroke: #0A0F1E;
  stroke-width: 0.5; /* más fino para que no tape los sectores chicos */
}