/* =========================================================
   NEXODISPLAY — CSS FINAL PRODUCCIÓN
   ========================================================= */

/* ============================
   FUENTES (LOCAL / CSP SAFE)
============================ */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter/web/Inter-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter/web/Inter-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter/web/Inter-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter/web/Inter-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter/web/Inter-ExtraBold.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* ============================
   VARIABLES DE THEME
============================ */
:root{
  --brand:#FF1865;
  --brand2:#FF2A74;

  --text:#E8E8E8;
  --muted:#C6C8CE;

  --bg1:#0F0F11;
  --bg2:#1B1D23;

  --panel:rgba(255,255,255,.06);
  --panel-b:rgba(255,255,255,.12);
  --panel-h:rgba(255,255,255,.18);

  --radius:16px;
}

/* ============================
   BASE
============================ */
html,body{
  height:100%;
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,
               'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(
    1200px 800px at 50% 30%,
    var(--bg2),
    var(--bg1)
  );
  color:var(--text);
}

/* ============================
   TOPBAR IDIOMA
============================ */
.topbar{
  position:absolute;
  top:16px;
  left:16px;
  z-index:10;
}
.topbar a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  margin-right:10px;
}
.topbar a.active{
  color:var(--text);
}

/* ============================
   HERO
============================ */
.hero{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.hero-card{
  max-width:760px;
  width:100%;
  background:linear-gradient(
    180deg,
    var(--panel-h),
    var(--panel)
  );
  border:1px solid var(--panel-b);
  border-radius:var(--radius);
  padding:clamp(28px,4vw,56px);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

.brand-logo{
  max-width:520px;
  width:70%;
  margin:0 auto 22px;
  display:block;
}

h1{
  font-weight:800;
  margin-bottom:18px;
}

p{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  margin-bottom:28px;
}

/* ============================
   BOTONES
============================ */
.btn-brand{
    background: linear-gradient(135deg, #ffcc00, #e6b800);
    border: none;
    color: #111;
    padding: 14px 30px;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(255, 204, 0, .35);
    transition: .25s;
    text-decoration: none;
}

.btn-brand:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(255, 204, 0, .55);
}

.btn-audio{
  background:none;
  border:none;
  color:var(--muted);
  margin-left:16px;
  font-weight:600;
  cursor:pointer;
}

/* ============================
   MODAL BASE
============================ */
.modal-content{
  background:linear-gradient(180deg,var(--panel-h),var(--panel));
  border:1px solid var(--panel-b);
  border-radius:var(--radius);
}

/* ============================
   AUDIO PREMIUM — NEXODISPLAY
============================ */
.nd-audio-modal{
  background: linear-gradient(
    180deg,
    rgba(10,10,12,.98),
    rgba(15,15,18,.96)
  );
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.85);
}

.nd-audio-x{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nd-wave-wrap{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(
      900px 240px at 50% 0%,
      rgba(229,67,84,.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.04)
    );
  overflow:hidden;
  padding:14px;
}

#ndWaveCanvas{
  width:100%;
  display:block;
  border-radius:12px;
}

.nd-audio-toggle{
  position:absolute;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#e54354,#ff2a74);
  box-shadow:0 12px 30px rgba(229,67,84,.38);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nd-audio-text{
  color:var(--muted);
  line-height:1.65;
  font-size:1.02rem;
}

.nd-audio-footer small{
  color:rgba(198,200,206,.85);
  font-size:.85rem;
}

/* ============================
   FIX BOOTSTRAP MODAL
============================ */
#audioModal .modal-content{
  background:none;
  border:none;
  box-shadow:none;
}

.modal-backdrop.show{
  background-color: rgba(0,0,0,.9);
  opacity: 1;
}

.nd-audio-text span {
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
}

.nd-audio-text span.active {
  opacity: 1;
  color: #1cc88a; /* Color verde para el texto resaltado */
}

.nd-audio-segment {
  opacity: 0.5;  /* Menos visible por defecto */
  transition: opacity 0.5s ease-in-out;
}

.nd-audio-segment.active-segment {
  opacity: 1;  /* Más visible cuando está activo */
  color: #1cc88a;  /* Color para el texto activo */
}