/* ============================================================
   glass.css — Design system glassmorphism para TradingPlan
   Paleta base conservada + capa glass + botones + cards
   ============================================================ */

:root{
  /* Paleta original (se conserva) */
  --azul-fuerte:#172554;
  --azul-oscuro:#0f172a;
  --azul-borde:#3b82f6;
  --amarillo-dorado:#FBBF24;
  --ambar-oscuro:#B45309;
  --verde-menta:#6ee7b7;
  --pino:#064e3b;
  --esmeralda:#022c22;
  --rojo-brillante:#EF4444;
  --rojo-principal:#DC2626;
  --rojo-sangre:#7F1D1D;
  --rojo-muy-oscuro:#450a0a;

  /* Capa glass */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.09);
  --glass-bg-hover: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.14);
  --glass-highlight: rgba(255,255,255,0.22);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.35);
  --glass-shadow-hover: 0 14px 44px rgba(0,0,0,0.5);
  --glass-radius: 20px;
}

/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html,body{width:100vw;max-width:100%;overflow-x:hidden;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background-color:var(--azul-oscuro);color:white;}

/* Fallback para navegadores sin backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-strong,.glass-card,.glass-nav,.glass-panel{background:rgba(15,23,42,0.88) !important;}
}

/* ── Utilidades glass ─────────────────────────────────────── */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.glass-strong{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-highlight);
  box-shadow:var(--glass-shadow);
}
.glass-card{
  border-radius:var(--glass-radius);
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent 40%);
  pointer-events:none;
  z-index:0;
}
.glass-card>*{position:relative;z-index:1;}
.glass-card:hover{
  background:var(--glass-bg-hover);
  box-shadow:var(--glass-shadow-hover);
  border-color:var(--glass-highlight);
  transform:translateY(-4px);
  transition:all .35s ease;
}

/* ── Barra de progreso de scroll ─────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:transparent;z-index:9999;pointer-events:none;
}
#scroll-progress .bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--amarillo-dorado),var(--verde-menta));
  box-shadow:0 0 12px rgba(251,191,36,0.7);
  border-radius:0 3px 3px 0;
}
body[data-page="facts"] #scroll-progress .bar{background:linear-gradient(90deg,var(--amarillo-dorado),var(--azul-borde));}
body[data-page="strategy"] #scroll-progress .bar{background:linear-gradient(90deg,var(--amarillo-dorado),var(--rojo-brillante));}
body[data-page="session"] #scroll-progress .bar{background:linear-gradient(90deg,var(--amarillo-dorado),var(--azul-borde));}
body[data-page="good"] #scroll-progress .bar{background:linear-gradient(90deg,var(--amarillo-dorado),#a8a29e);}

/* ── Botones glass ────────────────────────────────────────── */
.btn-glass{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:1rem 2rem;border-radius:50px;font-size:.85rem;min-width:180px;
  text-decoration:none;cursor:pointer;color:white;
  background:var(--glass-bg);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  transition:all .3s ease;position:relative;overflow:hidden;
}
.btn-glass:hover{
  transform:translateY(-3px) scale(1.02);
  background:var(--glass-bg-hover);
  border-color:var(--glass-highlight);
  box-shadow:var(--glass-shadow-hover);
}
.btn-glass-gold{color:var(--amarillo-dorado);border-color:rgba(251,191,36,.45);}
.btn-glass-gold:hover{background:rgba(251,191,36,.18);color:var(--amarillo-dorado);border-color:var(--amarillo-dorado);box-shadow:0 14px 44px rgba(251,191,36,.25);}
.btn-glass-green{color:var(--verde-menta);border-color:rgba(110,231,183,.45);background:linear-gradient(to bottom,rgba(110,231,183,.14),rgba(6,78,59,.25));}
.btn-glass-green:hover{background:rgba(110,231,183,.22);color:var(--verde-menta);border-color:var(--verde-menta);box-shadow:0 14px 44px rgba(110,231,183,.3);}
.btn-glass-red{color:#fca5a5;border-color:rgba(239,68,68,.45);}
.btn-glass-red:hover{background:rgba(239,68,68,.18);color:#fca5a5;border-color:var(--rojo-brillante);box-shadow:0 14px 44px rgba(239,68,68,.3);}
.btn-glass-blue{color:#93c5fd;border-color:rgba(59,130,246,.45);}
.btn-glass-blue:hover{background:rgba(59,130,246,.18);color:#93c5fd;border-color:var(--azul-borde);box-shadow:0 14px 44px rgba(59,130,246,.3);}
.btn-glass-neutral{color:#d6d3d1;border-color:rgba(168,162,158,.45);}
.btn-glass-neutral:hover{background:rgba(168,162,158,.15);color:#d6d3d1;border-color:#a8a29e;}
.btn-group{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;max-width:900px;margin:0 auto;}

/* ── Navbar glass ─────────────────────────────────────────── */
.glass-nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--glass-border);
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s ease;
}
.glass-nav.visible{transform:translateY(0);}
.glass-nav.scrolled{background:rgba(15,23,42,.85);}
.glass-nav a{transition:color .25s ease;text-decoration:none;}

/* ── Pills glass ──────────────────────────────────────────── */
.pill-glass{
  display:inline-block;
  padding:.5rem 1.1rem;
  background:var(--glass-bg);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:50px;
  color:#e2e8f0;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;
  transition:all .3s ease;
}
.pill-glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-highlight);transform:translateY(-2px);}
.pill-glass-green{border-color:rgba(6,78,59,.8);}
.pill-glass-green:hover{background:rgba(6,78,59,.5);border-color:var(--verde-menta);color:var(--verde-menta);}
.pill-glass-gold{border-color:rgba(180,83,9,.8);}
.pill-glass-gold:hover{background:rgba(180,83,9,.5);border-color:var(--amarillo-dorado);color:var(--amarillo-dorado);}
.pill-glass-red{border-color:rgba(69,10,10,.9);}
.pill-glass-red:hover{background:rgba(69,10,10,.6);border-color:var(--rojo-brillante);color:#fca5a5;}

/* ── Títulos de subsección ────────────────────────────────── */
.subsection-title{
  font-size:clamp(1.5rem,4vw,2rem);font-weight:900;text-transform:uppercase;
  letter-spacing:2px;padding-bottom:10px;margin-top:60px;margin-bottom:30px;
  display:flex;align-items:center;gap:15px;scroll-margin-top:110px;
}
.subsection-title::before{
  content:'';display:block;width:14px;height:14px;min-width:14px;
  background-color:var(--amarillo-dorado);border-radius:50%;
  box-shadow:0 0 15px var(--amarillo-dorado);
}
.title-standard{color:var(--verde-menta);border-bottom:2px solid var(--pino);}
.title-standard::before{background-color:var(--verde-menta);box-shadow:0 0 15px var(--verde-menta);}
.title-real{color:var(--amarillo-dorado);border-bottom:2px solid var(--ambar-oscuro);}
.title-prop{color:#fca5a5;border-bottom:2px solid var(--rojo-sangre);}
.title-prop::before{background-color:var(--rojo-brillante);box-shadow:0 0 15px var(--rojo-brillante);}

/* ── Bloques de contenido glass (variantes semánticas) ────── */
.content-block{
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:1.5rem 1.25rem;margin-bottom:1.5rem;
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;
  width:100%;
}
.content-block::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;
}
.content-block-standard::before{background:linear-gradient(180deg,var(--verde-menta),var(--pino));}
.content-block-real::before{background:linear-gradient(180deg,var(--amarillo-dorado),var(--ambar-oscuro));}
.content-block-prop::before{background:linear-gradient(180deg,var(--rojo-brillante),var(--rojo-sangre));}
.content-block-standard{background:rgba(2,44,34,.25);}
.content-block-real{background:rgba(69,39,10,.25);}
.content-block-prop{background:rgba(69,10,10,.25);}

.content-text{font-size:1.05rem;line-height:1.7;color:#e2e8f0;font-weight:300;margin-bottom:1.5rem;width:100%;}
.content-text p,.content-text li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;margin-bottom:1rem;}
.content-text strong,.content-text b{font-weight:800;color:white;}
.content-text h3{font-size:1.35rem;font-weight:900;margin-top:2rem;margin-bottom:1rem;line-height:1.3;color:white;text-align:left;}
.content-text ul{list-style-type:disc;padding-left:1.5rem;}
.content-text ol{list-style-type:decimal;padding-left:1.5rem;}

/* Caja de ecuación glass */
.equation-box{
  background:linear-gradient(135deg,rgba(6,78,59,.5),rgba(2,44,34,.8));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(110,231,183,.25);
  border-left:4px solid var(--verde-menta);
  border-radius:0 16px 16px 0;
  padding:1.5rem;margin:1.5rem 0;
  box-shadow:var(--glass-shadow);
  overflow-x:auto;color:var(--amarillo-dorado);font-size:1.1rem;
  width:100%;max-width:100%;
}

/* Grid de imágenes */
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem;width:100%;}
.img-grid img{width:100%;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--glass-border);transition:transform .3s ease,box-shadow .3s ease;box-shadow:var(--glass-shadow);}
.img-grid img:hover{transform:scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.55);}

/* ── Flip cards glass ─────────────────────────────────────── */
.flip-card{perspective:1200px;height:280px;}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg);}
.flip-card-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:18px;display:flex;flex-direction:column;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
}
.flip-card-front{justify-content:center;align-items:center;text-align:center;padding:1.5rem;}
.flip-card-back{transform:rotateY(180deg);padding:1.5rem;overflow-y:auto;justify-content:flex-start;text-align:left;}
.flip-card-front .card-icon{
  width:52px;height:52px;border-radius:50%;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.4);
  color:var(--amarillo-dorado);font-size:1.4rem;
}
.flip-card-front h3{font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:white;margin:0;line-height:1.3;}
.flip-card-back h3{font-size:1.1rem;font-weight:900;color:var(--amarillo-dorado);margin:0 0 1rem;}
.flip-card-back .content-text{margin-bottom:.75rem;}
.flip-card-back img{max-width:100%;border-radius:10px;border:1px solid var(--glass-border);margin-bottom:.75rem;}

/* ── Menú flotante glass ──────────────────────────────────── */
#floating-menu{position:fixed;right:20px;bottom:20px;z-index:100;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform:translateY(150px);opacity:0;}
#floating-menu.visible{transform:translateY(0);opacity:1;}
.menu-trigger{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--glass-shadow);cursor:pointer;z-index:101;position:relative;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-highlight);
  color:var(--amarillo-dorado);
  transition:all .3s ease;
}
.menu-trigger:hover{transform:scale(1.08);}
.menu-list{
  position:absolute;bottom:70px;right:0;width:220px;
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:16px;padding:10px;display:none;
  flex-direction:column;gap:5px;box-shadow:var(--glass-shadow);
  max-height:60vh;overflow-y:auto;
}
.menu-list.active{display:flex;animation:slideUp .3s ease forwards;}
.menu-item{padding:10px 15px;border-radius:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#94a3b8;transition:all .2s;border-left:3px solid transparent;text-decoration:none;}
.menu-item:hover{background:var(--glass-bg-hover);color:white;border-left-color:var(--glass-highlight);}
@keyframes slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media(min-width:1280px){
  #floating-menu{right:30px;bottom:50%;transform:translate(150px,50%);}
  #floating-menu.visible{transform:translate(0,50%);}
  .menu-trigger{display:none;}
  .menu-list{position:static;display:flex;width:220px;background:transparent;border:none;box-shadow:none;max-height:80vh;}
}

/* ── Hero ─────────────────────────────────────────────────── */
.header-full{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;z-index:1;border-bottom:1px solid var(--glass-border);}
.gif-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:brightness(.35) contrast(1.1);z-index:0;}
.header-content{position:relative;z-index:10;padding:0 20px;max-width:1000px;width:100%;}
.titulo-bienvenido{font-size:clamp(3rem,10vw,7rem);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;margin-bottom:1.5rem;text-shadow:0 10px 30px rgba(0,0,0,.5);}
.subtitulo-guia{font-size:clamp(1.1rem,2.5vw,1.8rem);font-weight:300;line-height:1.5;opacity:.95;margin-bottom:3rem;}

/* ── Estado de movimiento reducido ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── Responsive ───────────────────────────────────────────── */
@media(min-width:768px){
  .content-block{padding:2.5rem;border-radius:20px;margin-bottom:2rem;}
  .content-block::before{width:5px;}
  .equation-box{border-radius:0 20px 20px 0;padding:2rem;font-size:1.2rem;}
  .content-text{font-size:1.1rem;line-height:1.8;}
  .content-text h3{font-size:1.5rem;}
  .flip-card{height:300px;}
}