/* =========================
   TUERCA — Design System
   ========================= */

:root{
  --bg:#0f1116;
  --bg2:#0b0d12;
  --card:#141823;
  --elev:#1a2030;
  --muted:#8a94a6;
  --text:#e9edf5;
  --brand:#f3b23a;      /* acento cobre/mostaza */
  --brand-2:#5ac4ff;    /* acento frío secundario */
  --ok:#30d158;
  --bad:#ff453a;
  --warn:#ff9f0a;
  --ring:0 0 0 3px rgba(243,178,58,.25);
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --container:1200px;
}

*{box-sizing:border-box}
html,body{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  color:var(--text);
  font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout helpers */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center-v{align-items:center}
.span-8{grid-column:span 8}
.span-4{grid-column:span 4}
.right{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}
.mb10{margin-bottom:10px}
.p14{padding:14px}.p16{padding:16px}.p18{padding:18px}.p22{padding:22px}
.maxch{max-width:54ch}

/* Cards & surfaces */
.card{background:var(--card);border:1px solid #232a3a;border-radius:var(--radius);box-shadow:var(--shadow)}
.glass{backdrop-filter:saturate(140%) blur(10px);background:linear-gradient(180deg,rgba(28,33,48,.75),rgba(20,24,35,.75));border:1px solid rgba(255,255,255,.06)}
.shadow{box-shadow:var(--shadow)}
.hover-card{transition:transform .18s ease, box-shadow .18s ease}
.hover-card:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35)}

/* Buttons */
.btn{display:inline-flex;gap:.6rem;align-items:center;justify-content:center;padding:.9rem 1.2rem;border-radius:14px;background:var(--brand);color:#1b1200;font-weight:700;box-shadow:var(--shadow);transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid #2a3447}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid rgba(243,178,58,.35)}
.ring:focus{outline:none;box-shadow:var(--ring)}
.border-accent{border-color:#3f3117 !important}

/* Chips / Pills */
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .65rem;border-radius:999px;background:#1a2130;border:1px solid #24304a;color:#b7c3d8;font-size:.8rem}
.pill{font-size:.75rem;padding:.25rem .5rem;border-radius:999px;border:1px solid #2c3650;color:#b7c3d8}
.pill.ok{color:#89f7a5;border-color:#28442f}
.pill.warn{color:#ffd9a1;border-color:#3f3117}
.pill.info{color:#b6c7ff;border-color:#2c3658}

/* Typography */
.h1{font-size:clamp(2rem,2.2rem + 1.5vw,3.3rem);line-height:1.1;margin:0}
.h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);line-height:1.2;margin:0 0 .6rem}
.h3{font-size:1.1rem;margin:0 0 .3rem}
.muted{color:var(--muted)}
.accent{background:linear-gradient(90deg,var(--brand),#ffd47a);-webkit-background-clip:text;color:transparent}

/* NAV */
.nav{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(10,12,17,.95),rgba(10,12,17,.7));border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{width:34px;height:34px}.logo.small{width:28px;height:28px}
.word{font-weight:900;letter-spacing:.5px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{padding:.55rem .8rem;border-radius:10px;color:#c9d3e6}
.menu a:hover{background:#161b26}
.nav-cta{display:flex;gap:10px;align-items:center}
.hamb{display:none}

/* MOBILE MENU */
.mobile{display:none;position:fixed;inset:66px 14px auto 14px;padding:12px;border-radius:14px}
.mobile a{display:block;padding:12px;border-radius:10px;color:#c9d3e6}
.mobile a:hover{background:#161b26}

/* HERO */
.hero{padding:64px 0 26px}
.hero-wrap{display:grid;gap:26px;grid-template-columns:1.1fr .9fr;align-items:center}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* KPIs */
.kpis{display:grid;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:18px}
.kpi{padding:18px;border-radius:16px;border:1px solid #232a3a;background:linear-gradient(180deg,#151a26,#111725)}
.kpi .label{font-size:.8rem;color:#9fb0c8}
.kpi .value{font-weight:800;font-size:1.3rem}
.spark{height:44px;margin-top:10px;background:linear-gradient(90deg,rgba(243,178,58,.15),transparent);mask:linear-gradient(90deg,black,transparent)}
.stat-up{color:#9cf6b1;font-weight:700}
.stat-dn{color:#ffc1bc;font-weight:700}

/* DEMO BOARD */
.board{margin:26px 0;padding:20px;border-radius:var(--radius-lg);border:1px solid #2a3346;background:radial-gradient(1200px 600px at 10% -10%,rgba(243,178,58,.08),transparent),linear-gradient(180deg,#101524,#0e121c)}
.card-mini{padding:16px;border-radius:14px;border:1px solid #24304a;background:#121726}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* FEATURE GRID */
.features{padding:40px 0}
.feature{padding:22px;border-radius:16px;border:1px solid #24304a;background:linear-gradient(180deg,#121827,#0f1422)}
.feature .icon{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;background:linear-gradient(180deg,#1d2434,#0f1422);border:1px solid #2a354d;margin-bottom:10px}

/* HOW */
.how{padding:40px 0}
.step{display:flex;gap:14px;align-items:flex-start}
.bullet{width:32px;height:32px;border-radius:10px;background:var(--brand);color:#1b1200;font-weight:900;display:grid;place-items:center;box-shadow:0 6px 14px rgba(243,178,58,.35)}

/* PRICING */
.pricing{padding:40px 0}
.price-card{padding:24px;border-radius:18px;border:1px solid #2b354c;background:linear-gradient(180deg,#121826,#0f141f);display:flex;flex-direction:column;gap:12px}
.price{font-size:2rem;font-weight:900}
.price small{font-size:.9rem;color:#aab6cb}
.ul{padding:0;margin:0;list-style:none;display:grid;gap:10px}
.ul li{display:flex;gap:10px;align-items:flex-start}
.li-ok::before,.li-accent::before,.li-info::before{content:"";display:inline-block;width:18px;height:18px;border-radius:4px;margin-top:3px}
.li-ok::before{background:linear-gradient(180deg,#30d158,#1a9f45)}
.li-accent::before{background:linear-gradient(180deg,#f3b23a,#ffd47a)}
.li-info::before{background:linear-gradient(180deg,#5ac4ff,#a8e2ff)}

/* SECURITY */
.security{padding:40px 0}

/* FAQ */
.faq{padding:40px 0}
details{border:1px solid #2a3347;border-radius:14px;padding:14px;background:linear-gradient(180deg,#121826,#0f131f)}
details+details{margin-top:12px}
summary{cursor:pointer;font-weight:700}
summary::-webkit-details-marker{display:none}

/* FOOTER */
.footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);color:#9fb0c8}
.cols{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}

/* Responsive */
@media(min-width:901px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .menu{display:none}
  .hamb{display:inline-flex}
  .mobile{display:block}
  .hero-wrap{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-8,.span-4{grid-column:span 12}
  .right{justify-content:flex-start}
}
@media(max-width:600px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
}
/* --- FIX: grids estrechos en desktop --- */
@media (min-width:901px){
  /* Evita que .grid se convierta siempre en 12 columnas */
  .grid { grid-template-columns: unset; }

  /* Grids de tarjetas (por qué, features, etc.) responsivos */
  .features .grid,
  .why .grid,
  .cards-grid,
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
  }
}
/* --- FIX para las tarjetas de resumen --- */
.stats,
.dashboard-cards,
.resumen,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Ajuste visual de las tarjetas */
.stats .card,
.dashboard-cards .card,
.resumen .card {
  background: rgba(10, 15, 25, 0.9);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

/* === HERO spacing === */
.hero, .hero-wrap {
  padding-bottom: clamp(16px, 4vw, 40px);
}

/* === Fila de KPIs (debajo de los botones) === */
.kpi-row, .stats, .dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: clamp(10px, 3vw, 22px);
}

/* === Tarjeta KPI === */
.kpi-card, .stats .card, .dashboard-cards .card {
  background: rgba(12,16,24,0.9);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px; /* iguala alturas */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* Título pequeño arriba */
.kpi-card .kpi-title,
.stats .card .kpi-title {
  font-size: 14px;
  line-height: 1.15;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}

/* Valor grande alineado con € */
.kpi-card .kpi-value,
.stats .card .kpi-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

/* Número principal */
.kpi-card .kpi-amount,
.stats .card .kpi-amount {
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 26px);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Euro o unidad: no romper línea */
.kpi-card .kpi-unit,
.stats .card .kpi-unit {
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1;
  opacity: .9;
  white-space: nowrap;
}

/* Subetiqueta (oct) u otras notas */
.kpi-card .kpi-sub,
.stats .card .kpi-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: -2px;
}

/* Neto positivo/negativo */
.kpi-card.is-positive .kpi-amount,
.stats .card.is-positive .kpi-amount { color: #4BE070; }

.kpi-card.is-negative .kpi-amount,
.stats .card.is-negative .kpi-amount { color: #FF6B6B; }

/* Elimina “bloques” decorativos si te salen (gradientes/recuadros) */
.kpi-card::after,
.stats .card::after { display: none !important; content: none !important; }

/* Botones del héroe: separarlos un poco más de los KPIs */
.hero .cta-wrap, .hero .buttons {
  margin-bottom: clamp(10px, 3.5vw, 24px);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: clamp(16px, 3vw, 32px);
}

.kpi.hover-card {
  background: rgba(12, 16, 24, 0.9);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  min-height: 140px;
  border: 1px solid rgba(255,255,255,0.05);
}

.kpi-title {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}

.kpi-sub {
  font-size: 12px;
  opacity: 0.6;
}

.kpi-value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
}

.kpi-amount {
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}

.kpi-unit {
  font-size: 1rem;
  opacity: 0.8;
  white-space: nowrap;
}

.kpi.is-positive .kpi-amount {
  color: #4BE070;
}

.kpi.is-negative .kpi-amount {
  color: #FF6B6B;
}

.spark {
  display: none; /* oculto si no hay gráfico */
}
/* Sustituye tu definición actual */
.chart-card{
  grid-column: span 6;
  position: relative;
  height: 340px;   /* altura fija del bloque de gráfico */
  min-height: 0;   /* evita mínimos heredados */
  overflow: hidden;/* que nada se “derrame” */
}

/* Asegura que el lienzo nunca fuerce el alto */
.chart-card canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;          /* sin espacios fantasmas */
}

/* Opcional: recorta cualquier desborde visual de todas las cards */
.card{ overflow: hidden; }

@media (max-width:900px){
  .chart-card{ height: 280px; }  /* más compacto en móvil */
}
/* --- NAVIGATION FIX --- */
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu a {
  color: #c9d3e6;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  transition: background .2s;
}

.menu a:hover {
  background: rgba(255,255,255,0.06);
}

.hamb {
  display: none;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  transition: background .2s;
}
.hamb:hover {
  background: rgba(255,255,255,0.08);
}

/* MOBILE MENU */
.mobile {
  display: none;
  flex-direction: column;
  background: rgba(15,18,27,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 0;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.mobile a {
  padding: 12px 20px;
  color: #c9d3e6;
  display: block;
}
.mobile a:hover {
  background: rgba(255,255,255,0.05);
}

.mobile.open {
  display: flex !important;
}

/* RESPONSIVE BREAKPOINT */
@media (max-width: 900px) {
  .menu { display: none; }
  .hamb { display: inline-block; }
  .nav-cta a.btn.secondary { display: none; }
}
/* --- NAVIGATION FINAL FIX --- */
.nav {
  position: sticky;
  top: 0;
  background: rgba(10, 12, 17, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
}

.menu {
  display: flex;
  gap: 20px;
  align-items: center;
}

.menu a {
  color: #c9d3e6;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 500;
}
.menu a:hover {
  background: rgba(255,255,255,0.07);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hamb {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* MOBILE MENU */
.mobile {
  display: none;
  flex-direction: column;
  background: rgba(15,18,27,0.97);
  backdrop-filter: blur(12px);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  padding: 16px;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  animation: slideDown 0.25s ease;
}

.mobile a {
  padding: 12px 14px;
  color: #dbe3f5;
  border-radius: 8px;
}
.mobile a:hover {
  background: rgba(255,255,255,0.06);
}

.mobile.open { display: flex; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 940px) {
  .menu { display: none; }
  .hamb { display: inline-block; }
  .nav-actions a.btn.secondary { display: none; }
}

/* === GLOBAL RESPONSIVE FIX === */
.container {
  padding: 0 16px;
}
.hero-wrap,
.features .grid,
.how .grid,
.pricing .grid,
.security .grid,
.footer .cols {
  grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
  .hero-wrap { grid-template-columns: 1.1fr .9fr !important; }
  .features .grid { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)) !important; }
  .pricing .grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) !important; }
}