:root{
  /* base */
  --bg:#0b0d10;
  --bg-mid:#0f141a;
  --text:#e8f0f7;
  --muted:#a6b2bd;
  --brand:#66d9e8;
  --brand-2:#7cde96;
  --border:#233041;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --topbar-h: 52px;
  --footer-h: 54px;

  --hop-height:4px;
  --hop-duration:1.6s;
  --hop-stagger:0.08s;

  --alpha-min:.35;
  --alpha-max:1;
  --alpha-duration:1.6s;

  --vorbit-duration:2.8s;
  --vorbit-direction:1;
  --vorbit-amplitude:6px;
  --vorbit-blink-color:#ff5cb6;
  --vorbit-blink-duration:180ms;

  --spin-duration:2.5s;
  --spin-direction:normal;

  --sec-rgb:102,217,232;
  --card-rgb:102,217,232;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;      /* evita scroll horizontal */
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  color:var(--text);
  background:var(--bg);
  max-width:100vw;        /* nada se sale del viewport */
}

.container{
  width:min(1100px,92%);
  margin:0 auto;
}

/* HEADER/NAV */

.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  overflow:visible;       /* permite que el menú desplegable se vea por debajo */
}

.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  gap:20px;
  width:100%;
}

.brand{
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  min-height:64px;
}

/* Logo circular con halo */
#appLogo{
  height:clamp(56px, 9vw, 80px);
  width:clamp(56px, 9vw, 80px);
  object-fit:contain;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.55) 25%,
    rgba(0,0,0,0) 60%);
  box-shadow:
    0 0 12px rgba(255,255,255,.7),
    0 0 26px rgba(180,215,255,.7),
    0 0 40px rgba(120,160,255,.55);
  padding:6px;
  border:0;
}

/* Texto OptimeFlow(s) con neón suave */
.brand-neon{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing:.3px;
  color:#000;
  -webkit-text-stroke:.6px rgba(255,255,255,.35);
  text-shadow:
    0 0 2px rgba(255,255,255,.25),
    0 0 6px rgba(255,255,255,.25),
    0 0 14px rgba(34,211,238,.55);
  animation:hue 12s linear infinite, glow 3.2s ease-in-out infinite;
}

/* Animaciones de color y brillo */
@keyframes hue{
  from{ filter:hue-rotate(0) }
  to  { filter:hue-rotate(360deg) }
}
@keyframes glow{
  0%,100%{
    text-shadow:
      0 0 6px rgba(255,255,255,.25),
      0 0 14px rgba(34,211,238,.55);
  }
  50%{
    text-shadow:
      0 0 10px rgba(255,255,255,.5),
      0 0 24px rgba(167,139,250,.7);
  }
}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-list a{
  text-decoration:none;
  color:var(--text);
  opacity:.9;
  white-space:nowrap;
  padding:4px 12px;
  border-radius:999px;
  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.nav-list a:hover,
.nav-list a.active{
  opacity:1;
  background:rgba(var(--sec-rgb),.16);
  box-shadow:0 0 0 1px rgba(var(--sec-rgb),.35);
}


.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}
/* Panel de ajustes (idioma / tema / instalar app) */
.settings-panel{
  position:absolute;
  right:16px;
  top:calc(100% + 8px);
  width:min(320px,92vw);
  background:#141a21;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px 12px;
  z-index:3005;
}

.settings-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.settings-header span{
  font-weight:600;
}

.settings-close{
  border-radius:999px;
}

.settings-section{
  margin-bottom:10px;
  font-size:.9rem;
}

.settings-section label,
.settings-section span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
}

.settings-section select{
  width:100%;
  background:#14161a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
}

/* Píldoras de tema */
.theme-choices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.theme-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#141a21;
  font-size:.85rem;
  cursor:pointer;
}

.theme-pill .theme-preview{
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}

.theme-pill.active{
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(102,217,232,.4);
}

.settings-hint{
  margin:4px 0 0;
  font-size:.8rem;
  color:var(--muted);
}

/* En móvil movemos el panel un poco más abajo */
@media (max-width:520px){
  .settings-panel{
    right:8px;
    top:calc(100% + 12px);
  }
}

/* 🔎 Búsqueda global en topbar */
.nav-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-search input{
  background:#14161a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  width:220px;
  max-width:36vw;
  outline:none;
}
/* Botones de icono (lupa, cerrar ajustes, etc.) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#14161a;
  color:var(--text);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.icon-btn:hover{
  background:rgba(var(--sec-rgb),.18);
  border-color:rgba(var(--sec-rgb),.6);
  box-shadow:0 0 0 1px rgba(var(--sec-rgb),.45);
  transform:translateY(-1px);
}

.icon-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Panel de resultados de búsqueda */
.nav-search .search-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(480px, 80vw);
  max-height: 60vh;
  overflow: auto;
  background: #141a21;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 10px 6px;
  z-index: 3500;
}

.nav-search .search-panel:empty{
  display: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* En móvil: casi todo el ancho centrado */
@media (max-width: 520px){
  .nav-search .search-panel{
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
  }
}

.nav-right select{
  background:#14161a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
}
/* Slot del botón de cuenta en el menú */
#authArea{
  display:flex;
  align-items:center;
}

/* Botón ghost para Entrar / Registrarse y Cuenta */
.btn-ghost{
  background:transparent;
  border-color:var(--border);
}
.btn-ghost:hover{
  background:#14161a;
}

/* Taza de café y engranaje como esferas tipo logo */
#donateBtn,
#settingsBtn{
  font-size: 1.6rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  min-width: 0;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Halo similar al del logo, pero más pequeño */
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.55) 28%,
    rgba(0,0,0,0) 62%
  );
  box-shadow:
    0 0 8px  rgba(255,255,255,.7),
    0 0 18px rgba(180,215,255,.7),
    0 0 28px rgba(120,160,255,.55);

  color: #000;
}



/* Menú colapsable en pantallas medias/pequeñas */
@media (max-width:1280px){
  .nav-toggle{display:inline-flex;}
  .nav-list{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:12px;
    gap:12px;
    flex-direction:column;
    align-items:flex-start;
  }
  .nav-list.show{display:flex;}
}

.topbar *{scrollbar-width:none;}
.topbar *::-webkit-scrollbar{display:none;}

/* === TOPBAR responsive para móvil (vertical) === */
/* Logo centrado arriba; debajo fila con hamburguesa + búsqueda + café */
@media (max-width: 520px){
  /* Header en columna */
  .nav-container{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Marca centrada */
  .brand{
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-height: auto;
  }

  #appLogo{
    margin-bottom: 0;
    height: clamp(72px, 24vw, 88px);
    width:  clamp(72px, 24vw, 88px);
  }

  .brand-neon{
    font-size: 2.4rem;
  }

    /* Fila 2: hamburguesa + búsqueda + iconos */
  .nav-right{
    order: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    /* Muy importante: que no haga wrap, así todo queda en una sola fila */
    flex-wrap: nowrap;
  }

  /* Menú hamburguesa */
  #navToggle{
    order: 1;
    flex: 0 0 auto;
  }

  /* Búsqueda ocupando todo el espacio central disponible */
  .nav-search{
    order: 2;
    flex: 1 1 auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .nav-search input{
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    font-size: .95rem;
  }

  /* Café y engranaje a la derecha, en la misma fila */
  #donateBtn{
    order: 3;
    flex: 0 0 auto;
  }

  #settingsBtn{
    order: 4;
    flex: 0 0 auto;
  }

  /* Idioma (si lo usas) podría ir después */
  #langSelect{
    order: 5;
    flex: 0 0 auto;
  }



  /* Menú desplegado centrado cuando se abre */
  .nav-list{
    align-items: center;
  }

  .nav-list a{
    width: 100%;
    text-align: center;
  }
}

/* PAGE */

.page{
  position:relative;
  min-height:calc(var(--vh, 1vh) * 100 - var(--topbar-h));
  background:var(--bg-mid);
  padding:32px 0 calc(32px + var(--footer-h));
}


.page > *{
  position:relative;
  z-index:1;
}

/* SECTIONS */

.section{
  padding:24px 0;
}

/* CARDS */

.card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.card::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(45% 45% at 20% 30%, rgba(var(--card-rgb),0.15), transparent 60%),
    radial-gradient(40% 40% at 80% 70%, rgba(var(--card-rgb),0.12), transparent 60%);
  filter:blur(28px);
  animation:cardGlow 22s ease-in-out infinite alternate;
}

.card > *{
  position:relative;
  z-index:1;
}

@keyframes cardGlow{
  0%{transform:translate3d(-2%,1%,0) scale(1);}
  50%{transform:translate3d(2%,-1%,0) scale(1.04);}
  100%{transform:translate3d(-1%,0,0) scale(1.02);}
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:#141a21;
}

.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0d10;
  border:none;
  transition:
    filter .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.btn.primary:hover{
  filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(var(--sec-rgb),.35);
}


/* expandido a ancho completo */
.grid-span-all{
  grid-column: 1 / -1;
}

/* ================= FOOTER (GUI‑on / igual que apps) ================= */

.brand-footer{
  background: linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,0)), var(--bg);
  border-top: 1px solid var(--border);

  padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  color:var(--muted);
  box-shadow:0 -10px 24px rgba(0,0,0,.22);

  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
}

.brand-footer strong{
  color:var(--text);
}

.brand-footer .sep{
  opacity:.6;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.8rem;
  min-width:0;
}

.footer-left .f-left-row1,
.footer-left .f-left-row2{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

.footer-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.footer-right{
  display:flex;
  align-items:center;
  gap: clamp(10px, 2.5vw, 24px);
  flex-wrap:nowrap;
}

/* Botones tipo “ghost” del footer (solo afecta dentro del footer) */
.brand-footer .btn.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:rgba(20,26,33,0.6);
  border:1px solid var(--border);
  color:var(--text);

  height:28px;
  border-radius:7px;
  padding:0 10px;
  font-weight:800;
  white-space:nowrap;

  cursor:pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

.brand-footer .btn.ghost:hover{
  background:rgba(var(--sec-rgb),.16);
  border-color:rgba(var(--sec-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--sec-rgb),.28) inset;
  transform:translateY(-1px);
}

.brand-footer .btn.ghost:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Icono central (botón) */
.footer-logo-btn{
  display:inline-grid;
  place-items:center;
  padding:0;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  transition:
    box-shadow .14s ease,
    transform .08s ease,
    filter .14s ease,
    border-color .12s ease,
    background-color .12s ease;
  cursor:pointer;
}

.footer-logo-btn:hover{
  transform:translateY(-1px);
  background:rgba(20,26,33,0.65);
  border-color:rgba(var(--sec-rgb),.7);
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    0 0 0 1px rgba(var(--sec-rgb),.55) inset,
    0 0 18px rgba(var(--sec-rgb),.28);
}

.footer-logo{
  height: clamp(20px, 5vw, 28px);
  width:  clamp(20px, 5vw, 28px);
  object-fit:contain;

  /* ✅ solo halo (sin “heat”) */
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.35))
    drop-shadow(0 0 16px rgba(34,211,238,.35));

  transform-origin:center center;
  animation:sway 5.5s ease-in-out infinite;
}

@keyframes sway{
  0%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
  100%{transform:rotate(-3deg);}
}

/* ✅ Footer móvil: compacto, en una sola fila (sin comerse media pantalla) */
@media (max-width: 600px){
  .brand-footer{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    column-gap:10px;
    gap:8px;

    /* menos padding vertical para que no “coma” pantalla */
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  }

  /* ========= IZQUIERDA: 1 sola línea ========= */
  .footer-left{
    justify-self:start;

    /* Antes era columna (2 filas); en móvil lo hacemos fila */
    flex-direction:row;
    align-items:center;
    gap:6px;

    font-size:0.72rem;
    line-height:1.2;
    min-width:0;
  }

  /* Evita wraps raros dentro de cada fila */
  .footer-left .f-left-row1,
  .footer-left .f-left-row2{
    flex-wrap:nowrap;
  }

  /* En móvil: en la 2ª fila solo dejamos el año */
  .footer-left .f-left-row2 .sep,
  .footer-left .f-left-row2 #f-author,
  .footer-left .f-left-row2 [data-i18n="footer.rights"]{
    display:none;
  }

  /* Separador “•” antes del año */
  .footer-left .f-left-row2 #f-year::before{
    content:"•";
    margin:0 6px 0 0;
    opacity:.6;
  }

  /* ========= CENTRO ========= */
  .footer-center{
    position:static;
    transform:none;
    justify-self:center;
  }

  /* ========= DERECHA: botones compactos ========= */
  .footer-right{
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:nowrap;
  }

  /* Base compacta de botones en móvil */
  .brand-footer .btn.ghost{
    height:30px;
    padding:0 8px;
    border-radius:8px;
    font-size:0.78rem;
  }

  /* Los 3 botones “largos” pasan a icono para no desbordar ni apilar */
  #footerPrivacyLink,
  #footerLegalLink,
  #footerCookiesLink{
    width:34px;
    padding:0;

    /* Oculta el texto (se mantiene aria-label + click intactos) */
    font-size:0;
  }

  #footerPrivacyLink::before{
    content:"🛡️";
    font-size:1rem;
    line-height:1;
    color:var(--text);
  }

  #footerLegalLink::before{
    content:"⚖️";
    font-size:1rem;
    line-height:1;
    color:var(--text);
  }

  #footerCookiesLink::before{
    content:"🍪";
    font-size:1rem;
    line-height:1;
    color:var(--text);
  }
}


/* ================= Modal content (COF / Coherencia / Privacidad) ================= */

.license-text{
  margin:0;
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.82rem;
  line-height:1.55;
  background:rgba(11,13,16,0.55);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  color:var(--text);
}

.legal-body{
  line-height:1.65;
  color:var(--text);
}

.legal-body p{
  margin:0 0 10px;
  color:var(--muted);
}

/* Player, efectos, blog, buscador (idéntico a tu versión anterior) */

.player{
  position:fixed;
  right:16px;
  bottom:calc(16px + var(--footer-h));
  background:#141a21;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  width:320px;
  max-width:95vw;
  z-index:9999;
}

.player-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
}

.player-body{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.player-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.player-volume{
  display:flex;
  align-items:center;
  gap:8px;
}

.player-playlist{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:160px;
  overflow:auto;
}

.playlist-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}

.playing{
  color:var(--brand);
}

.minimized .player-body{
  display:none;
}

#musicPlayer.minimized .player-body{
  display:none!important;
}

/* === Tagline que “respira” === */

.vowel-bounce{
  display:block;
  text-align:center;
  font-size:1.1rem;
  line-height:1.7;
  margin:20px auto;
  max-width:860px;
  animation:hop var(--hop-duration) ease-in-out infinite;
  will-change:transform;
}

.vowel-bounce .vowel{
  display:inline-block;
  animation:hop var(--hop-duration) ease-in-out infinite;
  will-change:transform;
}

@keyframes hop{
  0%{transform:translateY(0);}
  20%{transform:translateY(calc(-1*var(--hop-height)));}
  40%{transform:translateY(0);}
  60%{transform:translateY(calc(-.75*var(--hop-height)));}
  80%,100%{transform:translateY(0);}
}

.fx-neon{
  position:relative;
  font-weight:700;
  animation:neonCycle 3.5s linear infinite;
  text-shadow:0 0 2px currentColor,0 0 6px currentColor,0 0 12px currentColor;
}

@keyframes neonCycle{
  0%{color:#39ff14;}
  25%{color:#00ffff;}
  50%{color:#ffff33;}
  75%{color:#ff073a;}
  100%{color:#39ff14;}
}

.fx-oscuro{
  padding:0 4px;
  border-radius:4px;
  animation:invertPulse 6s steps(1,end) infinite;
}

@keyframes invertPulse{
  0%,45%,100%{color:#fff;background:#000;}
  50%{color:#000;background:#fff;}
}

.fx-alpha{
  display:inline-block;
  animation:alphaBlink var(--alpha-duration) ease-in-out infinite;
}

@keyframes alphaBlink{
  0%{opacity:var(--alpha-min);}
  50%{opacity:var(--alpha-max);}
  100%{opacity:var(--alpha-min);}
}

.fx-spin{
  display:inline-block;
  transform-origin:50% 50%;
  animation:spin360 var(--spin-duration) linear infinite;
  animation-direction:var(--spin-direction);
}

@keyframes spin360{
  from{transform:rotate(0);}
  to{transform:rotate(360deg);}
}

.fx-vorbit{
  position:relative;
  display:inline-block;
}

.fx-vorbit .ch{
  position:relative;
  display:inline-block;
}

.fx-vorbit .ch.vowel{
  visibility:hidden;
}

.fx-vorbit .vorbit-float{
  position:absolute;
  left:0;
  top:0;
  font:inherit;
  color:inherit;
  white-space:pre;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}

.fx-vorbit.blink{
  color:var(--vorbit-blink-color);
  text-shadow:0 0 6px currentColor,0 0 12px currentColor;
}

/* NEW === Respiración por carácter === */
.fx-breathe-letters .breath-ch{
  display:inline-block;
  will-change:transform;
  animation:breatheTilt 2.6s ease-in-out infinite;
}

@keyframes breatheTilt{
  0%  { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(2px) rotate(2deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* accesibilidad */
@media (prefers-reduced-motion:reduce){
  .vowel-bounce,
  .vowel-bounce .vowel,
  .fx-neon,
  .fx-oscuro,
  .fx-alpha,
  .fx-spin,
  .fx-breathe-letters .breath-ch{
    animation:none!important;
    text-shadow:none!important;
  }
}

/* BLOG / DIARIO, buscador, contacto */

.blog-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* El calendario (cal-panel, #calGrid, .cal-cell, #dayRead…)
   se define unas líneas más abajo en el bloque avanzado. */


.input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#141a21;
  color:var(--text);
}

.results-list .result{
  border:1px solid var(--border);
  background:#141a21;
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
}

.results-list .result-head{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.badge{
  font-size:12px;
  opacity:.7;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:999px;
}

.result-actions{
  margin-top:8px;
}

.btn.btn-small{
  padding:6px 10px;
  font-size:14px;
}

.contact-form{
  padding:16px;
}

.contact-form .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-form .field{
  display:flex;
  flex-direction:column;
}
/* Si un field está marcado como hidden desde JS, lo ocultamos a la fuerza */
.contact-form .field[hidden]{
  display:none !important;
}

.contact-form .field-full{
  grid-column:1 / -1;
}

.contact-form label{
  font-size:14px;
  color:var(--muted);
  margin-bottom:6px;
}

/* Inputs, textareas y selects con el mismo estilo base */
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#141a21;
  color:var(--text);
  outline:none;
  font:inherit;
}

.contact-form textarea{
  resize:vertical;
}

/* Selects bonitos con flecha custom */
.contact-form select{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2.2rem;
  background-image:
    linear-gradient(45deg, var(--muted) 50%, transparent 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(102,217,232,.15);
}

.contact-form select:hover{
  border-color:var(--brand);
}

.contact-form .form-actions{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
}

.form-status{
  font-size:14px;
  color:var(--muted);
}

@media (max-width:720px){
  .contact-form .form-grid{
    grid-template-columns:1fr;
  }
}
/* === Cuenta / Auth === */

.account-card{
  max-width:720px;
  margin:0 auto;
}

.account-auth{
  max-width:480px;
  margin:0 auto;
}

.account-auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.account-form .field{
  margin-bottom:10px;
}

.account-form .form-actions{
  justify-content:flex-start;
}

.account-form .field-inline{
  flex-direction:row;
  align-items:center;
}

.account-form .field-inline label{
  display:flex;
  align-items:center;
  gap:8px;
}

.account-dashboard{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.account-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.account-user{
  display:flex;
  align-items:center;
  gap:10px;
}

.account-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#14161a;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.account-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

.account-user-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.account-name{
  font-weight:600;
}

.account-email{
  font-size:.9rem;
  color:var(--muted);
}

.account-meta{
  font-size:.85rem;
  color:var(--muted);
}

.account-actions{
  display:flex;
  gap:8px;
}

.account-stats{
  margin-top:4px;
}

.account-subtitle{
  font-size:1rem;
  margin:0 0 4px;
}

.table-wrap{
  overflow-x:auto;
}

.account-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}

.account-table th,
.account-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.account-table th{
  font-weight:600;
  color:var(--muted);
}

.form-status.error{
  color:#ff6b81;
}

/* Colores sección */
body[data-section="home"]{ --sec-rgb:102,217,232; --card-rgb:102,217,232; }
body[data-section="servicios"]{ --sec-rgb:124,222,150; --card-rgb:124,222,150; }
body[data-section="about"]{ --sec-rgb:255,92,182;  --card-rgb:255,92,182;  }
body[data-section="blog"]{ --sec-rgb:255,198,93;  --card-rgb:255,198,93;  }
body[data-section="publicaciones"]{ --sec-rgb:172,140,255; --card-rgb:172,140,255; }
body[data-section="apps"]{ --sec-rgb:93,173,255;  --card-rgb:93,173,255; }
body[data-section="proyectos"]{ --sec-rgb:255,153,102; --card-rgb:255,153,102; }
body[data-section="actualidad"]{ --sec-rgb:255,115,115; --card-rgb:255,115; }
body[data-section="explorar"]{ --sec-rgb:255,115,115; --card-rgb:255,115; }
body[data-section="obra"]{ --sec-rgb:140,206,255; --card-rgb:140,206,255; }
body[data-section="contacto"]{ --sec-rgb:93,173,255; --card-rgb:93,173,255; }
body[data-section="cuenta"]{ --sec-rgb:172,140,255; --card-rgb:172,140,255; }

/* === Tienda === */

.store-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.store-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.pill{
  border:1px solid var(--border);
  background:#141a21;
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
}

.pill:hover{
  filter:brightness(1.06);
}

.pill.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0d10;
  border:none;
}

.pill-sm{
  font-size:.9rem;
  padding:5px 9px;
}

/* Grid de tienda: hasta 4 apps por fila si caben */
.store-grid{
  margin-top:24px;
  display:grid;
  /* auto-fit + minmax: 1 columna en móvil, 2-3 en medio, hasta 4 en escritorio */
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  justify-items:center;
}

/* Tarjeta de app centrada en su celda */
.store-card{
  max-width:520px;
  width:100%;
  margin:0;
}
/* En escritorio (>= 1024px), 4 apps por fila fijas */
@media (min-width:1024px){
  .store-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* Cabecera: título arriba + icono debajo + dispositivos junto al título */
.store-card-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:4px;
}

.store-card-icon-wrap{
  width:96px;
  height:96px;
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--sec-rgb),.55), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(var(--sec-rgb),.35), transparent 60%),
    #05070a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 18px rgba(var(--sec-rgb),.45),
    0 18px 40px rgba(0,0,0,.7);
  overflow:hidden;
}

.store-card-icon{
  width:70px;
  height:70px;
  object-fit:contain;
}

.store-card-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.store-card-title{
  margin:0;
  font-size:1.4rem;
}

/* Iconos de dispositivos (monitor / tablet / móvil) */
.store-device-icons{
  display:flex;
  align-items:center;
  gap:6px;
}

.store-device-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#141a21;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

/* Descripción justificada con sangría al inicio */
.store-card-description{
  margin:12px 0 0;
  line-height:1.8;
  font-size:.97rem;
  text-align:justify;
  text-indent:2em;
}

/* Fila de acciones (Comprar + Ver vídeo) centradas */
.store-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  justify-content:center;
}

/* Precio debajo de los botones */
.store-card-price,
.store-card .price{
  font-weight:700;
  margin:12px 0 0;
  text-align:center;
}

/* Botón de vídeo un poco más suave */
.store-video-btn{
  background:#141a21;
}

/* Tema de color de la tienda */
body[data-section="tienda"]{
  --sec-rgb:255,175,95;
  --card-rgb:255,175,95;
}

/* Ajustes responsive para móvil */
@media (max-width:640px){
  .store-card{
    padding:16px 12px;
  }
  .store-card-description{
    font-size:.94rem;
  }
}

/* === Vista Cuenta / Auth === */


.account-card{
  max-width:960px;
  margin:0 auto;
}

.account-forms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:12px;
}

.account-form-column h2{
  margin:0 0 8px;
}

.account-summary{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:12px;
  margin-bottom:12px;
}

.account-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.account-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.9rem;
}

.account-info-line{
  display:flex;
  gap:6px;
}

.account-info-line .label{
  opacity:.75;
}

.account-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
  margin-bottom:12px;
}

.account-purchases h2{
  font-size:1rem;
  margin:0 0 4px;
}

.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:.85rem;
}

.checkbox-label input{
  margin-top:3px;
}

/* Responsive */
@media (max-width:720px){
  .account-forms{
    grid-template-columns:1fr;
  }
}
/* === Temas visuales === */

body.theme-abyss{
  --bg:#0b0d10;
  --bg-mid:#0f141a;
  --text:#e8f0f7;
  --muted:#a6b2bd;
  --brand:#66d9e8;
  --brand-2:#7cde96;
  --border:#233041;
}

body.theme-dawn{
  --bg:#110a0f;
  --bg-mid:#1a1015;
  --text:#ffeef7;
  --muted:#f0cfe2;
  --brand:#ff9ec7;
  --brand-2:#ffd29e;
  --border:#3b1c2a;
}

body.theme-forest{
  --bg:#060e0a;
  --bg-mid:#081912;
  --text:#e5f7eb;
  --muted:#a7cfb6;
  --brand:#6ee7b7;
  --brand-2:#22c55e;
  --border:#164b31;
}

body.theme-mono{
  --bg:#050506;
  --bg-mid:#0b0b0c;
  --text:#f5f5f5;
  --muted:#b0b0b0;
  --brand:#e5e5e5;
  --brand-2:#9ca3af;
  --border:#27272a;
}

body.theme-violet{
  --bg:#090618;
  --bg-mid:#110826;
  --text:#f5f3ff;
  --muted:#c7c3ff;
  --brand:#a855f7;
  --brand-2:#6366f1;
  --border:#312e81;
}

body.theme-azure{
  --bg:#020617;
  --bg-mid:#02091f;
  --text:#e0f2fe;
  --muted:#bae6fd;
  --brand:#38bdf8;
  --brand-2:#0ea5e9;
  --border:#0f172a;
}

body.theme-amber{
  --bg:#120806;
  --bg-mid:#1a0f08;
  --text:#fffbeb;
  --muted:#fed7aa;
  --brand:#fbbf24;
  --brand-2:#f97316;
  --border:#451a03;
}

body.theme-rose{
  --bg:#12020a;
  --bg-mid:#1a0610;
  --text:#ffe4e6;
  --muted:#fecdd3;
  --brand:#fb7185;
  --brand-2:#f97316;
  --border:#4a0f1a;
}
/* ==================== ABOUT SECTION - VERSIÓN FINAL MÓVIL PERFECTO + CALENDARIO PRO ==================== */
.about-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.about-card {
  max-width: 1100px;
  width: 100%;
}

/* Header personalizado */
.about-header-custom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
  padding: 0 2em;
}
.about-main-title {
  font-size: clamp(2.8rem, 8vw, 4.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  line-height: 1;
}

/* Foto de perfil */
.about-profile-img {
  width: clamp(120px, 28vw, 180px);
  height: clamp(120px, 28vw, 180px);
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid rgba(102,217,232,0.3);
  box-shadow: 0 0 40px rgba(102,217,232,0.4);
  transition: transform 0.4s ease;
}
.about-profile-img:hover {
  transform: scale(1.05);
}

/* Botón Diario */
.about-diary-btn {
  width: clamp(110px, 26vw, 140px);
  height: clamp(110px, 26vw, 140px);
  border-radius: 50%;
  background: #141a21;
  color: var(--text);
  border: 1.5px solid var(--border);
  /* ojo: aquí cierro bien clamp() */
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.35s ease;
}

/* Emoji 📖 grande */
.about-diary-btn span:first-child {
  font-size: clamp(2.2rem, 8vw, 3.2rem);
}

/* Texto “Diario” más pequeño */
.about-diary-btn span:last-child {
  font-size: clamp(0.8rem, 2.1vw, 1rem);
}

.about-diary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102,217,232,0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}
.about-diary-btn:hover::before,
.about-diary-btn.active::before {
  left: 150%;
}
.about-diary-btn:hover,
.about-diary-btn.active {
  background: rgba(var(--sec-rgb), 0.18);
  border-color: var(--brand);
  box-shadow: 0 0 30px rgba(var(--sec-rgb), 0.4);
  transform: translateY(-6px);
}
.about-diary-btn.active {
  background: linear-gradient(135deg, rgba(var(--sec-rgb),0.25), rgba(var(--brand-2),0.2));
  color: #fff;
  font-weight: 700;
}

/* Grid de pestañas */
.about-tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(12px, 3vw, 18px);
  margin: 0 2em 40px;
}

/* Botones normales */
.about-tab-btn {
  padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 24px);
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  font-weight: 600;
  background: #141a21;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.about-tab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102,217,232,0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}
.about-tab-btn:hover::before {
  left: 150%;
}
.about-tab-btn:hover,
.about-tab-btn.active {
  background: rgba(var(--sec-rgb), 0.18);
  border-color: var(--brand);
  box-shadow: 0 0 24px rgba(var(--sec-rgb), 0.3);
  transform: translateH(-3px);
}
.about-tab-btn.active {
  background: linear-gradient(135deg, rgba(var(--sec-rgb),0.25), rgba(var(--brand-2),0.2));
  color: #fff;
  font-weight: 700;
}

/* Calendario del diario - AHORA SÍ PERFECTO EN TODOS LOS MÓVILES */
.cal-panel {
  background: #141a21;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: clamp(16px, 4vw, 24px);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 100%;
  /* Sin margen lateral para que no se salga del card */
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 380px) {
  .cal-panel {
    /* También sin margen horizontal aquí */
    margin: 0;
    padding: 12px;
  }

  #calGrid {
    gap: 4px;
  }

  .cal-cell {
    border-radius: 10px;
    font-size: 0.75rem;
  }
}


.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cal-toolbar button {
  background: transparent;
  border: none;
  color: var(--brand);
  font-size: clamp(1.6rem, 5vw, 2rem);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.cal-toolbar button:hover {
  background: rgba(var(--sec-rgb), 0.25);
  transform: scale(1.15);
}
.cal-head {
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.5rem);
  color: var(--brand);
}
#calGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 2vw, 10px);
  justify-items: center;   /* ← CENTRA PERFECTAMENTE los días */
}
.cal-cell {
  width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;   /* ← ahora el borde cuenta dentro del 100% */
  padding: 0;               /* ← anulamos el padding antiguo que hacía que se saliera */
  background: var(--bg-mid);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  cursor: pointer;
  transition: all 0.3s ease;
}

.cal-cell:hover {
  background: rgba(var(--sec-rgb),0.2);
  border-color: var(--brand);
  transform: translateY(-3px);
}
.cal-cell.has-entry {
  background: rgba(var(--brand),0.18);
  border-color: var(--brand);
  font-weight: 700;
  box-shadow: 0 0 20px rgba(var(--brand),0.3);
}
.cal-cell.today {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #000;
  font-weight: 800;
  border-color: transparent;
}

/* Contenido del día seleccionado */
#dayRead {
  margin-top: 28px;
  padding: 24px;
  background: #141a21;
  border-radius: 18px;
  min-height: 200px;
  border: 1px solid var(--border);
  line-height: 1.7;
}

/* Contenido del texto */
.about-content-area {
  margin-top: 40px;
  animation: fadeIn 0.5s ease;
}
.about-panel {
  text-align: justify;
  line-height: 1.88;
  font-size: clamp(1rem, 2.6vw, 1.06rem);
  hyphens: auto;
  padding: 0 clamp(1.2em, 5vw, 2.8em);
}
.about-panel p {
  text-indent: 2.8em;
  margin: 0 0 1.3em 0;
}
.about-panel h2 + p,
.about-panel h3 + p {
  text-indent: 0;
}
.about-panel h2 {
  margin: 0 0 1.6em;
  color: var(--brand);
  font-size: clamp(1.6rem, 5vw, 1.9rem);
  text-align: left;
}
.about-panel h3 {
  margin: 2.4em 0 1em;
  color: var(--brand-2);
  font-size: clamp(1.3rem, 4vw, 1.5rem);
  text-align: left;
}
.about-panel blockquote {
  margin: 2.8em 0;
  padding: 1.8em 2.6em;
  background: rgba(102,217,232,0.07);
  border-left: 6px solid var(--brand);
  border-radius: 0 14px 14px 0;
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.2rem);
  line-height: 1.7;
  text-align: left;
  position: relative;
}
.about-panel blockquote::before {
  content: '“';
  font-size: clamp(4em, 12vw, 5em);
  opacity: 0.14;
  position: absolute;
  top: -0.15em;
  left: 0.15em;
  color: var(--brand);
  font-family: Georgia, serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVE MÓVIL PERFECTO ==================== */
@media (max-width: 900px) {
  .about-header-custom {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 32px;
    grid-row-gap: 24px;
  }
  .about-main-title {
    grid-column: 1 / -1;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .about-tabs-grid {
    gap: 12px;
    margin: 0 1em 32px;
  }
  .about-panel {
    padding: 0 1.6em;
  }
  .cal-panel {
    padding: 16px;
    margin: 0; /* ← sin margen lateral extra */
  }
  /* Diario: menos padding lateral para aprovechar más ancho */
  .about-panel[data-panel="diary"]{
    padding-left: 0.6em;
    padding-right: 0.6em;
  }
}

/* ==================== SERVICIOS - BOTONES FLOTANTES + FICHAS PRO ==================== */
.services-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.services-card {
  max-width: 1200px;
  width: 100%;
}

/* 3 botones principales */
.services-main-buttons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 60px 0 80px;
  flex-wrap: wrap;
  perspective: 1000px;
}
.service-main-btn {
  width: 320px;
  height: 220px;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #141a21;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Borde neón del color de cada texto */
.service-btn-enterprise { border: 3px solid #66d9e8; }
.service-btn-sme        { border: 3px solid #7cde96; }
.service-btn-freelance  { border: 3px solid #e879f9; }

.service-main-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
  transition: opacity 0.6s;
}
.service-main-btn:hover::before,
.service-main-btn.active::before {
  opacity: 0.3;
}
.service-main-btn:hover,
.service-main-btn.active {
  animation: none; /* <- desactiva la animación flotante mientras está activo o en hover */
  transform: translateY(-20px) scale(1.05);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}
.service-main-btn span {
  position: relative;
  z-index: 2;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.3;
}
.glow-cyan   { color: #66d9e8; text-shadow: 0 0 30px #66d9e8, 0 0 60px #66d9e8; }
.glow-green  { color: #7cde96; text-shadow: 0 0 30px #7cde96, 0 0 60px #7cde96; }
.glow-magenta{ color: #e879f9; text-shadow: 0 0 30px #e879f9, 0 0 60px #e879f9; }

/* Animación flotante sutil */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(1deg); }
}
.service-btn-enterprise { animation: float 12s ease-in-out infinite; }
.service-btn-sme { animation: float 14s ease-in-out infinite 2s; }
.service-btn-freelance { animation: float 16s ease-in-out infinite 4s; }

/* Fichas de servicios */
.services-content-area {
  margin-top: 40px;
}
.services-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  padding: 0 2em;
}
.service-card {
  background: #141a21;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(102,217,232,0.3);
  border-color: var(--brand);
}
.service-card h3 {
  font-size: 1.6rem;
  margin: 0 0 20px;
  color: var(--brand);
}
.service-card .price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-2);
  margin: 20px 0;
}
.service-card .btn {
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .services-main-buttons {
    gap: 24px;
  }
  .service-main-btn {
    width: 280px;
    height: 190px;
  }
  .service-main-btn span {
    font-size: 1.6rem;
  }
}
@media (max-width: 640px) {
  .services-main-buttons {
    flex-direction: column;
    align-items: center;
  }
  .service-main-btn {
    width: 90vw;
    max-width: 340px;
  }
  .services-panel {
    grid-template-columns: 1fr;
    padding: 0 1em;
  }
}
/* === PROJECTS / PROYECTOS === */

.projects-container{
  display:flex;
  justify-content:center;
  padding:40px 0;
}

.projects-card{
  max-width:1200px;
  width:100%;
}

.projects-intro-panel{
  margin-top:16px;
  margin-bottom:24px;
  padding:16px 18px;
  border-radius:16px;
  background:#141a21;
  border:1px solid var(--border);
}

.projects-intro-title{
  margin:0 0 6px;
  font-size:1.15rem;
  color:var(--brand);
}

.projects-intro-body{
  margin:0;
  font-size:.95rem;
  color:var(--muted);
}

/* Tabs de Proyectos */
.projects-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}

.projects-tab-btn{
  padding:8px 16px;
  font-size:.95rem;
  font-weight:600;
  background:#141a21;
  color:var(--text);
  border-radius:999px;
  border:1px solid var(--border);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:all .25s ease;
}

.projects-tab-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-25deg);
  transition:left .6s ease;
  pointer-events:none;
}

.projects-tab-btn:hover::before{
  left:150%;
}

.projects-tab-btn:hover{
  border-color:var(--brand);
  background:rgba(var(--sec-rgb),.16);
}

.projects-tab-btn.active{
  background:linear-gradient(135deg,rgba(var(--sec-rgb),.3),rgba(var(--card-rgb),.25));
  border-color:var(--brand);
  color:#fff;
}

/* Paneles */
.projects-panels{
  margin-top:8px;
}

.projects-panel{
  animation:fadeIn .25s ease;
}

/* Utilities header */
.projects-utilities-header{
  margin-bottom:12px;
}

.projects-utilities-header h2{
  margin:0 0 4px;
  font-size:1.2rem;
  color:var(--brand);
}

.projects-utilities-body{
  margin:0;
  font-size:.95rem;
  color:var(--muted);
}

.projects-login-hint{
  margin-top:8px;
  font-size:.85rem;
  color:var(--muted);
}

/* Grid de apps coherentes */
.projects-utilities-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.project-app-card{
  background:#141a21;
  border-radius:18px;
  border:1px solid var(--border);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.project-app-card:hover{
  border-color:var(--brand);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  transform:translateY(-4px);
  transition:all .25s ease;
}

.project-app-icon-wrap{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#0b0d10;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.project-app-icon{
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-app-title{
  margin:6px 0 2px;
  font-size:1rem;
}

.project-app-desc{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

/* Responsive proyectos */
@media (max-width:720px){
  .projects-intro-panel{
    padding:12px 14px;
  }
  .projects-utilities-grid{
    grid-template-columns:1fr;
  }
}
/* === Vista de entrada de blog en la web === */

.blog-preview{
  width:100%;
}

.blog-preview-cover{
  width:100%;
  max-height:260px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  margin-bottom:12px;
}

.blog-preview-meta{
  color:var(--muted);
  margin:0 0 6px;
  font-size:.9rem;
}

.blog-preview-content.rich-content{
  white-space:pre-wrap;
  line-height:1.6;
  font-size:.95rem;
}

.blog-preview-body{
  line-height:1.6;
  font-size:.95rem;
}

/* Layout "revista": el texto rodea a las imágenes alternas izquierda/derecha */

.blog-preview-layout{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:16px;
}

/* Cada bloque puede tener imagen + texto o sólo texto */
.blog-entry-block{
  position:relative;
}

/* Contenedor de la imagen/vídeo (ANCHO CONTROLADO) */
.blog-entry-media{
  max-width:40%;        /* ancho "de revista" */
}

/* Imagen/vídeo dentro del bloque */
.blog-entry-media-img{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
}

/* Texto del bloque */
.blog-entry-text{
  line-height:1.7;
  font-size:.95rem;
}

/* Imagen alineada a la izquierda, texto rodeando */
.blog-entry-block.align-left .blog-entry-media{
  float:left;
  margin:0 18px 14px 0;
}

/* Imagen alineada a la derecha, texto rodeando */
.blog-entry-block.align-right .blog-entry-media{
  float:right;
  margin:0 0 14px 18px;
}

/* Bloques sólo texto: ocultamos el contenedor de media */
.blog-entry-block.text-only .blog-entry-media{
  display:none;
}

/* Limpiamos los floats para que cada bloque tenga su altura correcta */
.blog-entry-block::after{
  content:"";
  display:block;
  clear:both;
}

/* Clases extra generadas por JS: no necesitan grid ya */
.blog-entry-text-side{
  /* por si más adelante quieres afinar */
}
.blog-entry-text-below{
  margin-top:8px;
  clear:both;  /* fuerza a empezar debajo de la imagen, a todo el ancho */
}

/* En móvil: imagen encima del texto, a todo el ancho */
@media (max-width: 720px){
  .blog-entry-block .blog-entry-media{
    float:none;
    max-width:100%;
    margin:0 0 12px 0;
  }
}
/* === Efectos animados para texto del blog (alineados con el CRM) === */

/* Contenedor base de efectos */
.fx{
  display:inline-block;
  /* valor por defecto, el CRM puede sobreescribir con style="--fx-speed:0.8s" */
  --fx-speed: 1.2s;
}

/* Cada carácter envuelto por el CRM */
.fx-char{
  display:inline-block;
}

/* Palpitar */
@keyframes fx-pulse-kf{
  0%,100%{ transform:scale(1); }
  30%{ transform:scale(1.12); }
  60%{ transform:scale(0.96); }
}
.fx-pulse{
  animation: fx-pulse-kf var(--fx-speed,1.1s) ease-in-out infinite;
}

/* Ondear (por carácter) */
@keyframes fx-wave-kf{
  0%,100%{ transform:translateY(0); }
  25%{ transform:translateY(-0.2em); }
  50%{ transform:translateY(0.1em); }
  75%{ transform:translateY(-0.15em); }
}
/* El wrapper .fx-wave no se anima directamente; se anima cada carácter */
.fx-wave{}
.fx-wave-char{
  animation: fx-wave-kf var(--fx-speed,1.4s) ease-in-out infinite;
}

/* Swap de vocales */
@keyframes fx-swap-kf{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(0.45em); }
  100%{ transform:translateX(0); }
}

/* Wrapper del swap (contiene las letras) */
.fx-swap{
  display:inline-block;
}

/* Cada carácter dentro del efecto swap */
.fx-swap-char{
  display:inline-block;
}

/* Fase de viaje (Hola → Halo o vuelta) */
.fx-swap-travel .fx-swap-char{
  animation: fx-swap-kf var(--fx-speed,0.8s) ease-in-out;
}

/* Fase “palabra correcta” resaltada */
.fx-swap-correct{
  text-shadow:
    0 0 6px rgba(255,255,255,0.7),
    0 0 18px rgba(34,211,238,0.75);
}
.fx-swap-correct .fx-swap-char{
  animation: fx-pulse-kf 0.9s ease-in-out infinite;
}

/* Balanceo (swing) */
@keyframes fx-swing-kf{
  0%{ transform:rotate(0deg); }
  25%{ transform:rotate(6deg); }
  50%{ transform:rotate(0deg); }
  75%{ transform:rotate(-6deg); }
  100%{ transform:rotate(0deg); }
}
.fx-swing{
  transform-origin: top center;
  animation: fx-swing-kf var(--fx-speed,1.4s) ease-in-out infinite;
}

/* Flotar suavemente */
@keyframes fx-float-kf{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-0.25em); }
}
.fx-float{
  animation: fx-float-kf var(--fx-speed,1.8s) ease-in-out infinite;
}

/* Shake / vibrar */
@keyframes fx-shake-kf{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-1px); }
  40%{ transform:translateX(1px); }
  60%{ transform:translateX(-1px); }
  80%{ transform:translateX(1px); }
}
.fx-shake{
  animation: fx-shake-kf var(--fx-speed,0.35s) linear infinite;
}
/* Compat: por si alguna entrada antigua usa fx-vibrate */
.fx-vibrate{
  animation: fx-shake-kf var(--fx-speed,0.35s) linear infinite;
}

/* Rotar ligero (por carácter) */
@keyframes fx-rotate-kf{
  0%{ transform:rotate(0deg); }
  25%{ transform:rotate(10deg); }
  50%{ transform:rotate(-10deg); }
  75%{ transform:rotate(8deg); }
  100%{ transform:rotate(0deg); }
}

/* Wrapper del efecto rotate */
.fx-rotate{
  display:inline-block;
}

/* Cada letra rota sobre sí misma */
.fx-rotate-char{
  display:inline-block;
  transform-origin:center center;
  animation: fx-rotate-kf var(--fx-speed,1.2s) ease-in-out infinite;
}

/* Blink (parpadeo) */
@keyframes fx-blink-kf{
  0%,40%{ opacity:0; }
  50%,100%{ opacity:1; }
}
.fx-blink{
  animation: fx-blink-kf var(--fx-speed,1.2s) steps(1,end) infinite;
}

/* Rebote (por carácter) */
@keyframes fx-bounce-kf{
  0%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-0.4em); }
  60%{ transform:translateY(0.1em); }
}
.fx-bounce{}
.fx-bounce-char{
  animation: fx-bounce-kf var(--fx-speed,1.2s) ease-out infinite;
}

/* Glow / neón */
@keyframes fx-glow-kf{
  0%{
    text-shadow:
      0 0 4px rgba(255,255,255,0.4),
      0 0 10px var(--brand);
  }
  50%{
    text-shadow:
      0 0 10px rgba(255,255,255,0.9),
      0 0 24px var(--brand-2);
  }
  100%{
    text-shadow:
      0 0 4px rgba(255,255,255,0.4),
      0 0 10px var(--brand);
  }
}
.fx-glow{
  animation: fx-glow-kf var(--fx-speed,1.6s) ease-in-out infinite;
}

/* Glitch */
@keyframes fx-glitch-kf{
  0%{
    transform:translate(0,0);
    text-shadow:none;
  }
  15%{
    transform:translate(-1px,-1px);
    text-shadow:-1px 0 magenta, 1px 0 cyan;
  }
  30%{
    transform:translate(1px,1px);
    text-shadow:1px 0 magenta, -1px 0 cyan;
  }
  45%{
    transform:translate(-1px,1px);
    text-shadow:-1px 0 magenta, 1px 0 cyan;
  }
  60%,100%{
    transform:translate(0,0);
    text-shadow:none;
  }
}
.fx-glitch{
  animation: fx-glitch-kf var(--fx-speed,0.8s) steps(1,end) infinite;
}

/* Shuffle antiguo de la web, lo mantenemos por compatibilidad */
@keyframes fx-shuffle-kf{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-2px); }
  50%{ transform:translateX(2px); }
  75%{ transform:translateX(-1px); }
  100%{ transform:translateX(0); }
}
.fx-shuffle{
  animation: fx-shuffle-kf var(--fx-speed,1.4s) ease-in-out infinite;
}

/* Texto rico del blog: comportamiento “normal” */
.blog-entry-text.rich-content{
  display:block;
  text-align:left;
  letter-spacing:normal;
  word-spacing:normal;
  line-height:1.6;
}
/* Cabecera de cuenta en dos columnas */
.account-header-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.account-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Avatar el doble de grande (si antes eran ~48px) */
.account-avatar.account-avatar-lg {
  width: 96px;
  height: 96px;
}

.account-avatar.account-avatar-lg img,
.account-avatar.account-avatar-lg span {
  width: 100%;
  height: 100%;
}

/* Botones alineados a la derecha */
.account-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.account-avatar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Panel flotante de historial de compras */
.account-purchases-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.account-purchases-panel[hidden] {
  display: none;
}

.account-purchases-panel-inner {
  max-width: 720px;
  width: 100%;
  margin: 0 1.5rem;
  background: var(--surface, #050614);
  border-radius: 16px;
  padding: 1.5rem;
}

.account-purchases-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}