/* =========================================================
   style-home.css – NTB Home (tema oscuro + minimal + indicators)
   ========================================================= */

/* ---------- Paleta / variables ---------- */
:root{
  --bg-main:#111416;
  --panel:#181b1f;
  --ui-bg:#1b1f24;
  --border:#272b31;

  --text:#eceff3;
  --text-sub:#a5abb3;

  --primary:#ff4450;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --trend:#3b82f6;
  --vol:#f59e0b;

  --shadow:0 6px 18px rgba(0,0,0,.28);
}

/* =========================================================
   Base + utilidades
   ========================================================= */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: var(--text);
  text-align: center;
}
.me-3{ margin-right:.75rem; }
.mt-4{ margin-top:1rem; }

/* Animaciones */
.fade-in { opacity:0; transform:translateY(20px); animation:fadeInUp 0.8s ease forwards; }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0);} }

/* =========================================================
   Navegación
   ========================================================= */
.top-nav {
  background-color: #12161a;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  position: sticky; top:0; z-index:999;
  border-bottom: 1px solid var(--border);
}
.container-nav { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.logo img { height:50px; width:auto; display:block; object-fit:contain; }

nav ul { list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; }
nav a { text-decoration:none; color:var(--text); font-weight:600; opacity:.9; transition:color .25s, opacity .25s; }
nav a:hover{ color:var(--primary); opacity:1; }

.menu-toggle{ display:none; font-size:24px; cursor:pointer; color:var(--primary); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 60vh;
  background: linear-gradient(135deg,#181b1f,#111416) !important;
  display: flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; color:#fff; padding:1rem;
}
.hero-content{ z-index:2; max-width:900px; padding:1rem; }
.hero-content h1{ font-size:2.6rem; margin-bottom:1rem; letter-spacing:.2px; }
.hero-content p{ font-size:1.08rem; margin-bottom:1.5rem; color:#e9edf4; opacity:.95; }

/* CTA buttons */
.cta-button{
  display:inline-block; background:#fff; color:var(--primary);
  padding:.78rem 1.55rem; border-radius:8px; font-weight:700;
  text-decoration:none; box-shadow:0 10px 22px rgba(255,68,80,.18);
  transition:transform .25s, box-shadow .25s, background .25s;
}
.cta-button:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(255,68,80,.25); background:#f7f8fa; }

.cta-button-outline{
  display:inline-block; padding:12px 24px; border:2px solid #fff; color:#fff;
  border-radius:8px; font-weight:700; background:transparent;
  transition:all .25s; text-decoration:none; margin-left:.65rem;
}
.cta-button-outline:hover{ background:rgba(255,255,255,.15); }

/* =========================================================
   Secciones
   ========================================================= */
section{ padding:3rem 1rem; }
section h2{ font-size:1.9rem; margin-bottom:1rem; color:#fff; }
section p{ color:var(--text-sub); max-width:980px; margin:0 auto; line-height:1.6; }

/* Cards */
.cards-container{ display:flex; justify-content:center; gap:20px; margin-top:36px; flex-wrap:wrap; padding:0 1rem; }
.info-card{
  background:var(--panel); padding:22px 20px; border-radius:14px; text-align:center;
  box-shadow:var(--shadow); width:280px; border:1px solid var(--border);
  transition:.25s; position:relative; overflow:hidden;
}
.info-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--primary); opacity:.6; }
.info-card i{ font-size:38px; color:var(--primary); margin-bottom:10px; }
.info-card h3{ color:#fff; margin:8px 0; }
.info-card p{ color:#ccd2da; }
.info-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.35); border-color:color-mix(in oklab,var(--primary) 40%,var(--border)); }

/* Cómo funciona */
.how-it-works{ background:#12161a; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.steps-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; max-width:980px; margin:.5rem auto 0; }
.step{ background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:1.4rem; transition:.25s; }
.step:hover{ transform:translateY(-4px); }
.step-icon{ font-size:1.8rem; color:var(--primary); margin-bottom:.5rem; }
.step h3{ font-size:1.1rem; margin-bottom:.35rem; color:#fff; }
.step p{ font-size:.98rem; color:#cdd3db; }

/* CTA final */
.cta-section{
  background: radial-gradient(1200px 600px at 50% -10%,rgba(255,68,80,.18),rgba(0,0,0,0)), #161a1f;
  color:#fff; padding:3rem 1rem; text-align:center; border-top:1px solid var(--border);
}
.cta-section h2{ font-size:1.9rem; margin-bottom:1rem; }
.cta-section p{ margin-bottom:1.5rem; color:#e8ecf3; }
.cta-section .cta-button{ background:#fff; color:var(--primary); }
.cta-section .cta-button:hover{ background:#f2f4f7; }

/* Footer */
footer{ background:#0f1316; text-align:center; padding:1.6rem 1rem; font-size:.92rem; color:#9aa1aa; border-top:1px solid var(--border); }
footer a{ color:#dfe4ea; text-decoration:underline; }
footer a:hover{ color:var(--primary); }

/* =========================================================
   Menú responsive
   ========================================================= */
.nav-menu ul{ list-style:none; display:flex; gap:20px; }
.nav-menu ul li a{ text-decoration:none; color:var(--text); font-weight:600; }

@media(max-width:768px){
  .menu-toggle{ display:block; }
  .nav-menu{ display:none; width:100%; background:#12161a; position:absolute; top:100%; left:0; z-index:99; border-top:1px solid var(--border); animation:fadeIn .25s; }
  .nav-menu.open{ display:block; }
  .nav-menu ul{ flex-direction:column; padding:10px 0; }
  .nav-menu ul li{ padding:10px 20px; }
  @keyframes fadeIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
}

/* =========================================================
   NUEVA SECCIÓN: Indicadores & Señales
   ========================================================= */
.indicators-wrapper{ max-width:1220px; margin:2rem auto; padding:1.5rem 1.2rem 2rem; }
.indicators-header{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.indicators-header .title{ font:700 1.4rem 'Inter',sans-serif; color:#fff; flex:0 0 100%; }

/* Tarjetas */
.indicator-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.indicator-card{
  background:var(--panel); border:1px solid var(--border); border-radius:.8rem;
  padding:1.05rem .95rem 2.1rem; box-shadow:var(--shadow); position:relative;
  transition:.2s; text-align:left;
}
.indicator-card:hover{ transform:translateY(-4px); border-color:var(--primary); }
.indicator-card h3{ margin:.1rem 0 .45rem; font:600 1rem 'Inter',sans-serif; color:#fff; }
.indicator-card .info{ font-size:.9rem; color:#d5dbe4; }
.indicator-card .rec{ font-weight:700; margin-top:.35rem; display:inline-block; color:#fff; }
.indicator-card .badge{ position:absolute; right:.85rem; bottom:.75rem; font-size:.78rem; color:#9aa1aa; }

/* Señal Operativa */
.op-signal{
  --op-accent: var(--warning); --op-tint:24%;
  margin-top:1rem; margin-bottom:1.1rem;
  padding:1rem .95rem 1.05rem;
  border:1px solid color-mix(in oklab,var(--op-accent) 22%,var(--border) 78%);
  border-radius:.9rem; background:linear-gradient(180deg,#1a1e23,#15181c);
  box-shadow:var(--shadow); text-align:left;
}
.op-signal--call{ --op-accent:var(--success); }
.op-signal--put{ --op-accent:var(--danger); }
.op-signal--hold{ --op-accent:var(--warning); }

.op-head{ display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:.75rem; }
.op-title{ font:800 1.02rem 'Inter',sans-serif; color:#fff; margin:0; }
.op-chip{ width:36px;height:36px; border-radius:50%; display:grid; place-items:center; background:var(--op-accent); color:#fff; }
.op-type{ font:800 1.02rem 'Inter',sans-serif; color:var(--op-accent); }
.op-strength{ font:700 .82rem 'Inter',sans-serif; color:#cbd2db; padding:.18rem .5rem; border:1px solid var(--border); border-radius:999px; background:#1d2227; }
.op-body{ display:flex; flex-direction:column; gap:.7rem; }
.op-confidence{ display:flex; align-items:center; gap:.6rem; }
.op-progress{ flex:1; height:10px; border-radius:999px; background:#1a1e23; border:1px solid var(--border); position:relative; }
.op-progress__bar{ position:absolute; inset:0 100% 0 0; background:var(--op-accent); }
.op-confidence__value{ font:800 .9rem 'Inter',sans-serif; color:#fff; min-width:42px; text-align:right; }
.op-reasons{ list-style:none; display:flex; gap:.5rem; flex-wrap:wrap; margin:0; padding:0; }
.op-reason{ padding:.42rem .6rem; border-radius:.55rem; background:#1b1f24; border:1px solid var(--border); color:#d9dde3; font:600 .84rem 'Inter',sans-serif; }
.op-note{ font-size:.82rem; color:#b8bfc8; }

/* Gauges */
.gauge-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.1rem; margin-top:.9rem; }
.gauge{ --R:60; width:calc(var(--R)*2px); }
.gauge .g-clip{ position:relative; width:100%; aspect-ratio:2/1; overflow:hidden; border-top-left-radius:60px; border-top-right-radius:60px; background:#1f2328; }
.gauge .needle{ --needle:#e6ebf2; position:absolute; left:50%; bottom:0; transform-origin:50% 100%; width:4px; height:70px; background:var(--needle); transform:translateX(-50%) rotate(-30deg); }
.gauge .lbl{ margin-top:.4rem; font:800 .8rem 'Inter',sans-serif; text-transform:uppercase; }
.gauge .lbl.is-call{ color:var(--success); }
.gauge .lbl.is-put{ color:var(--danger); }
.gauge .lbl.is-hold{ color:var(--warning); }

/* Update bar */
.update-bar{ margin-top:1.2rem; font-size:.92rem; color:#c8ced6; display:flex; justify-content:center; gap:.4rem; }
.update-bar time{ color:#fff; font-weight:700; }

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:720px){
  .hero-content h1{ font-size:2.2rem; }
  .hero-content p{ font-size:1rem; }
  .cta-button{ margin-top:.6rem; }
}

/* =========================================================
   Accesibilidad
   ========================================================= */
a:focus-visible, button:focus-visible, .menu-toggle:focus-visible{
  outline:3px solid color-mix(in oklab,var(--primary) 45%,transparent);
  outline-offset:2px;
}
/* ================== Indicadores & Señales – versión colorida y UX mejorada ================== */
.indicators-wrapper{ max-width:1220px; margin:2rem auto; padding:1rem 1.2rem 2rem; }
.indicators-header .title{ font:800 1.55rem/1 'Inter',sans-serif; color:#fff; display:flex; gap:.55rem; align-items:center; justify-content:center; margin-bottom:.6rem; }
.indicators-header .title i{ opacity:.95 }

.ind-intro{
  color:#d6dbe3; max-width:980px; margin:0 auto 1.2rem auto; line-height:1.55;
}
.ind-intro em{ color:#e9edf6 }
.ind-intro strong{ color:#fff }

/* Grid responsivo */
.ind-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:stretch;
  margin:1.1rem auto 0;
  max-width:1100px;
}

/* Tarjeta clickable con acento */
.ind-card{
  --accent: var(--primary);
  position:relative;
  display:flex; flex-direction:column; gap:.55rem;
  background: linear-gradient(180deg,#1a1e23 0%, #15181c 100%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1rem .9rem;
  text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none;
  color:#e8edf5;
  overflow:hidden;
}
.ind-card::after{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, #000 15%), var(--accent));
  opacity:.95;
}
.ind-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  box-shadow: 0 12px 26px rgba(0,0,0,.36);
}
.ind-card:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 38%, transparent);
  outline-offset:3px;
}

/* Acentos por indicador */
.ind-accent--rsi{ --accent: var(--success); }
.ind-accent--adx{ --accent: var(--trend);  }
.ind-accent--bb { --accent: var(--warning);}
.ind-accent--kc { --accent: var(--warning);}
.ind-accent--atr{ --accent: var(--primary);}

/* Chip del icono con gradiente del acento */
.ind-chip{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 40px;
  color:#fff;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 70%, #000 30%), color-mix(in oklab, var(--accent) 40%, #000 60%));
  border:1px solid color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  box-shadow:0 8px 18px color-mix(in oklab, var(--accent) 26%, transparent 74%);
}
.ind-chip i{ font-size:1rem; }

/* Contenidos */
.ind-title{ font:800 1.02rem/1.25 'Inter',sans-serif; color:#fff; margin:.1rem 0 .2rem; }
.ind-desc { color:#cfd5de; font-size:.95rem; line-height:1.45; margin:0; }

/* Meta (pill + señal) */
.ind-meta{
  margin-top:.6rem;
  display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.ind-pill{
  font:700 .78rem/1 'Inter',sans-serif; color:#dfe5ee;
  border:1px solid var(--border);
  background:#1d2227;
  padding:.35rem .55rem; border-radius:999px;
}
.ind-signal{ color:#f2f6fb; font-size:.92rem; }
.ind-signal strong{ color:#fff }

/* Footer de la sección */
.ind-footer{ max-width:1100px; margin:1.2rem auto 0; text-align:center; }
.ind-cta{ margin-top:.8rem; box-shadow:0 12px 26px rgba(255,68,80,.20); }
.ind-cta:hover{ box-shadow:0 16px 30px rgba(255,68,80,.28); }

/* Hover colorea ligeramente el contenedor */
.ind-card:hover .ind-pill{ border-color: color-mix(in oklab, var(--accent) 30%, var(--border) 70%); }

/* Móviles */
@media (max-width:720px){
  .ind-title{ font-size:1rem }
  .ind-desc{ font-size:.92rem }
}
/* 🔴 Icono Hero con efecto Pulse */
.pulse-icon {
  color: var(--primario, #ff4450);
  font-size: 2.2rem;
  margin-right: .4rem;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(255,68,80,0.6);
  }
  50% {
    transform: scale(1.15);
    text-shadow: 0 0 14px rgba(255,68,80,0.8);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(255,68,80,0.6);
  }
}