/* ============================================================
   WiseCodeMinds — sistema de diseño
   Violeta eléctrico + cian sobre negro tinta
   ============================================================ */

/* Los tokens (:root) NO viven acá: se generan desde brand.json y los
   inyecta partials/head.php. Este archivo solo los consume con var().
   Para cambiar un color, editá brand.json. */

/* ---------- Base ---------- */
*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }

body{
  background: var(--ink);
  color: var(--cream);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: rgba(139,92,246,.45); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--ink); }
::-webkit-scrollbar-thumb{ background:#241f3d; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#332b52; }

/* ---------- Tipografía ---------- */
.font-display{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }

.h-xl{ font-size:clamp(2.5rem, 6.2vw, 5.25rem); line-height:1.04; letter-spacing:-.035em; font-weight:600; }
.h-lg{ font-size:clamp(2rem, 4.4vw, 3.5rem);   line-height:1.08; letter-spacing:-.03em;  font-weight:600; }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2rem);   line-height:1.2;  letter-spacing:-.02em;  font-weight:600; }

.accent{ color: var(--cyan); }
.accent-v{ color: var(--violet-glow); }
.grad-text{
  background: var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Textura de fondo ---------- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.30; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.glow-orb{
  position:absolute; border-radius:9999px; filter:blur(90px); pointer-events:none;
}

/* Rejilla técnica de fondo */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- Píldora / eyebrow ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border-radius:9999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  backdrop-filter:blur(8px);
}
.pill .dot{ width:6px; height:6px; border-radius:9999px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.4rem; border-radius:12px;
  font-size:15px; font-weight:600; line-height:1;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, border-color .25s, color .25s;
  white-space:nowrap; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px) scale(1.02); }
.btn:active{ transform:translateY(0) scale(.99); }

/* Botón principal: relleno casi negro + halo que se derrama.
   El halo REEMPLAZA al relleno degradado; no se suman. */
.btn-primary{
  background:var(--btn-ink); color:#F4ECFF;
  box-shadow:
    inset 0 0 0 1px rgba(var(--halo),   calc(.50 * var(--halo-i))),
    0 0 14px             rgba(var(--halo),   calc(.55 * var(--halo-i))),
    0 0 42px             rgba(var(--halo),   calc(.38 * var(--halo-i))),
    0 -6px 70px          rgba(var(--halo-2), calc(.30 * var(--halo-i))),
    0 10px 80px          rgba(var(--halo),   calc(.26 * var(--halo-i)));
}
.btn-primary:hover{
  box-shadow:
    inset 0 0 0 1px rgba(var(--halo),   calc(.75 * var(--halo-i))),
    0 0 20px             rgba(var(--halo),   calc(.75 * var(--halo-i))),
    0 0 58px             rgba(var(--halo),   calc(.50 * var(--halo-i))),
    0 -8px 92px          rgba(var(--halo-2), calc(.42 * var(--halo-i))),
    0 14px 104px         rgba(var(--halo),   calc(.36 * var(--halo-i)));
}

/* El CTA del hero brilla más: es el único de la pantalla. */
.btn-hero{ --halo-i:1.35; }

/* Secundario apagado, para que el halo se destaque. */
.btn-ghost{
  background:rgba(255,255,255,.04); color:var(--cream);
  border:1px solid var(--line);
}
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }

/* Variante clara (fondos claros o impresión). */
.btn-cream{ background:var(--cream); color:#0A0714; }
.btn-cream:hover{ background:#fff; }

.btn-sm{ padding:.55rem 1rem; font-size:13.5px; border-radius:10px; }
.btn-pill{ border-radius:9999px; }

/* El zorro es de línea muy fina. Para cabecera, pie y cualquier uso por
   debajo de ~120 px usá el símbolo #wcm-fox-bold (ver partials/marks.php),
   que trae el trazo engrosado. #wcm-fox queda para tamaños grandes. */

/* Halo reutilizable para marcas y figuras */
.halo-mark{
  filter:drop-shadow(0 0 10px rgba(var(--halo), calc(.55 * var(--halo-i))))
         drop-shadow(0 0 34px rgba(var(--halo), calc(.35 * var(--halo-i))));
}
.halo-mark-lg{
  filter:drop-shadow(0 0 24px rgba(var(--halo), calc(.60 * var(--halo-i))))
         drop-shadow(0 0 72px rgba(var(--halo), calc(.34 * var(--halo-i))));
}

/* ---------- Tarjetas ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(139,92,246,.45);
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.12);
}
.card-flat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }

/* Borde con gradiente */
.card-hot{
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(139,92,246,.22);
}

/* ---------- Marquee ---------- */
.marquee{ display:flex; overflow:hidden; user-select:none; gap:0; }
.marquee__track{
  display:flex; flex-shrink:0; align-items:center; gap:2.5rem;
  min-width:100%;
  animation:scroll-x 42s linear infinite;
}
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:34s; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

.marquee__item{
  font-size:clamp(1rem, 1.7vw, 1.35rem); font-weight:500; letter-spacing:-.01em;
  color:var(--muted); white-space:nowrap;
  display:inline-flex; align-items:center; gap:2.5rem;
}
.marquee__sep{ width:6px; height:6px; border-radius:9999px; background:var(--violet); opacity:.7; }

/* ---------- Mockup navegador ---------- */
.browser{
  border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 40px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.10);
}
.browser__bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.65rem .85rem; background:#0E0C18; border-bottom:1px solid var(--line);
}
.browser__dot{ width:10px; height:10px; border-radius:9999px; }
.browser__url{
  flex:1; text-align:center; font-family:'JetBrains Mono', monospace;
  font-size:11px; color:var(--dim);
  background:rgba(255,255,255,.04); border-radius:6px; padding:.28rem .6rem;
}

/* ---------- Acordeón FAQ ---------- */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; text-align:left; font-size:1.0625rem; font-weight:600; color:var(--cream);
  transition:color .2s;
}
.acc__btn:hover{ color:var(--violet-glow); }
.acc__icon{ flex-shrink:0; transition:transform .3s cubic-bezier(.2,.8,.3,1); color:var(--violet-glow); }
.acc__item.open .acc__icon{ transform:rotate(45deg); }
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.2,.8,.3,1);
}
.acc__item.open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner > div{ padding-bottom:1.35rem; color:var(--muted); line-height:1.7; max-width:62ch; }

/* ---------- Formularios ---------- */
.field{
  width:100%; padding:.85rem 1rem; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--cream); font-size:15px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field::placeholder{ color:var(--dim); }
.field:focus{
  outline:none; border-color:var(--violet);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.field.is-error{ border-color:#F4586E; box-shadow:0 0 0 3px rgba(244,88,110,.15); }
.label{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:.45rem; }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C95BC' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.8,.3,1), transform .75s cubic-bezier(.2,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Header ---------- */
#site-header{ transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent; }
#site-header.stuck{
  background:rgba(7,6,13,.82); backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav-link{ font-size:14.5px; font-weight:500; color:var(--muted); transition:color .2s; }
.nav-link:hover, .nav-link[aria-current="page"]{ color:var(--cream); }

/* Selector de idioma */
.lang-btn{
  padding:.28rem .55rem; border-radius:8px; font-size:12px; font-weight:600;
  font-family:'JetBrains Mono', monospace; color:var(--dim); transition:all .2s;
}
.lang-btn.on{ background:var(--grad-brand); color:#0A0714; }
.lang-btn:not(.on):hover{ color:var(--cream); background:rgba(255,255,255,.06); }

/* ---------- Utilidades ---------- */
.container-x{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .container-x{ padding-inline:2rem; } }

.hairline{ height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.tilt-1{ transform:rotate(-1deg); }
.no-bar::-webkit-scrollbar{ display:none; }
.no-bar{ scrollbar-width:none; }

.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Botón flotante WhatsApp */
.wa-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:56px; height:56px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#0A0714;
  box-shadow:0 12px 32px rgba(37,211,102,.35);
  transition:transform .25s, box-shadow .25s;
}
.wa-fab:hover{ transform:scale(1.08); box-shadow:0 16px 44px rgba(37,211,102,.5); }

/* ============================================================
   Asistente flotante
   ============================================================ */
.bot{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
      display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; }

/* ---- botón flotante ---- */
.bot__fab{
  display:inline-flex; align-items:center; gap:.6rem;
  height:56px; padding:0 1.25rem 0 .85rem; border-radius:9999px;
  background:var(--btn-ink); color:#F4ECFF;
  font-size:15px; font-weight:600; cursor:pointer; order:2;
  box-shadow:
    inset 0 0 0 1px rgba(var(--halo), calc(.55 * var(--halo-i))),
    0 0 16px             rgba(var(--halo), calc(.55 * var(--halo-i))),
    0 0 46px             rgba(var(--halo), calc(.38 * var(--halo-i))),
    0 10px 80px          rgba(var(--halo), calc(.26 * var(--halo-i)));
  transition:box-shadow .3s ease, transform .25s ease;
}
.bot__fab:hover{ transform:translateY(-2px); }
.bot__fab:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
.bot__fab-icon{ position:relative; width:30px; height:30px; flex:none; }
.bot__fab-icon svg{ position:absolute; inset:0; width:100%; height:100%;
                    transition:opacity .25s ease, transform .25s ease; }
.bot__x{ opacity:0; transform:rotate(-40deg) scale(.7); }
.bot[data-open="true"] .bot__fox{ opacity:0; transform:rotate(40deg) scale(.7); }
.bot[data-open="true"] .bot__x{ opacity:1; transform:none; }
.bot[data-open="true"] .bot__fab-label{ display:none; }
@media (max-width:420px){ .bot__fab-label{ display:none; } .bot__fab{ padding:0; width:56px; justify-content:center; } }

/* ---- panel ---- */
.bot__panel{
  order:1; width:min(370px, calc(100vw - 2.5rem));
  max-height:min(580px, calc(100vh - 7.5rem));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px;
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             linear-gradient(160deg, rgba(var(--halo),.75), rgba(var(--halo-2),.5)) border-box;
  border:1.5px solid transparent;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 60px rgba(var(--halo),.22);
  animation:bot-in .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes bot-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } }

.bot__head{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem;
            border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.bot__avatar{ width:36px; height:36px; flex:none; border-radius:9999px;
              display:flex; align-items:center; justify-content:center;
              background:rgba(var(--halo),.16); color:var(--cream); }
.bot__avatar svg{ width:24px; height:24px; }
.bot__head-txt{ flex:1; min-width:0; }
.bot__title{ font-size:14.5px; font-weight:600; line-height:1.2; }
.bot__sub{ font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:2px; }
.bot__icon-btn{ width:30px; height:30px; flex:none; border-radius:8px; cursor:pointer;
                display:flex; align-items:center; justify-content:center;
                color:var(--dim); background:transparent; transition:.2s; }
.bot__icon-btn:hover{ color:var(--cream); background:rgba(255,255,255,.07); }

/* ---- conversación ---- */
.bot__log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.bot__log::-webkit-scrollbar{ width:6px; }
.bot__log::-webkit-scrollbar-thumb{ background:#2a2442; border-radius:6px; }

.bot__msg{ max-width:86%; padding:.6rem .85rem; font-size:14px; line-height:1.5;
           border-radius:14px; animation:bot-msg .3s ease; }
@keyframes bot-msg{ from{ opacity:0; transform:translateY(6px); } }
.bot__msg--bot{ align-self:flex-start; border-top-left-radius:5px;
                background:var(--surface-2); color:var(--cream); }
.bot__msg--me{ align-self:flex-end; border-top-right-radius:5px;
               background:var(--grad-brand); color:#0A0714; font-weight:500; }

.bot__typing{ display:flex; gap:4px; align-items:center; padding:.75rem .9rem; }
.bot__typing span{ width:6px; height:6px; border-radius:9999px; background:var(--dim);
                   animation:bot-dot 1.1s infinite; }
.bot__typing span:nth-child(2){ animation-delay:.15s; }
.bot__typing span:nth-child(3){ animation-delay:.3s; }
@keyframes bot-dot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); }
                    30%{ opacity:1; transform:translateY(-3px); } }

/* ---- opciones y entrada ---- */
.bot__actions{ padding:0 1rem .5rem; }
.bot__opts{ display:flex; flex-direction:column; gap:.4rem; }
.bot__opts--compact{ flex-direction:row; flex-wrap:wrap; }
.bot__opt{
  text-align:left; cursor:pointer; font-size:13.5px; font-weight:500; line-height:1.35;
  padding:.6rem .85rem; border-radius:11px; color:var(--cream);
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  transition:background .2s, border-color .2s, transform .2s;
}
.bot__opts--compact .bot__opt{ flex:0 0 auto; }
.bot__opt:hover{ background:rgba(var(--halo),.16); border-color:rgba(var(--halo),.5); transform:translateX(2px); }
.bot__opt:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

.bot__form{ display:flex; flex-direction:column; gap:.45rem; }
.bot__row{ display:flex; gap:.45rem; align-items:flex-end; }
.bot__input{
  flex:1; min-width:0; resize:none; font:inherit; font-size:14px;
  padding:.6rem .8rem; border-radius:11px; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.bot__input::placeholder{ color:var(--dim); }
.bot__input:focus{ outline:none; border-color:rgba(var(--halo),.7);
                   box-shadow:0 0 0 3px rgba(var(--halo),.18); }
.bot__send{ flex:none; width:40px; height:40px; border-radius:11px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            background:var(--grad-brand); color:#0A0714; transition:filter .2s; }
.bot__send:hover{ filter:brightness(1.12); }
.bot__err{ font-size:12px; color:#FF9CAB; }
.bot__skip{ align-self:flex-start; font-size:12.5px; color:var(--dim);
            text-decoration:underline; text-underline-offset:3px; cursor:pointer;
            background:none; padding:.2rem 0; }
.bot__skip:hover{ color:var(--cream); }
.bot__status{ font-size:12.5px; color:var(--muted); padding:.4rem 0; }
.bot__cta{ width:100%; }
.bot__privacy{ padding:0 1rem 1rem; font-size:11px; line-height:1.45; color:var(--dim); }

@media (prefers-reduced-motion: reduce){
  .bot__panel, .bot__msg{ animation:none; }
  .bot__typing span{ animation:none; opacity:.6; }
}

/* ---------- Rotador de frases del hero ---------- */
.rot{ display:inline-block; vertical-align:bottom; text-align:left; }
.rot__item{
  display:inline-block;
  transition:opacity .32s ease, transform .32s ease, filter .32s ease;
}
.rot__item.is-out{ opacity:0; transform:translateY(-.22em); filter:blur(4px); }
.rot__item.is-in { animation:rot-in .42s ease both; }
@keyframes rot-in{
  from{ opacity:0; transform:translateY(.26em); filter:blur(4px); }
  to  { opacity:1; transform:none;              filter:blur(0);   }
}
@media (prefers-reduced-motion: reduce){
  .rot__item, .rot__item.is-in{ animation:none; transition:none; opacity:1; filter:none; transform:none; }
}

/* ---------- Bloque "la solución" bajo cada nota del blog ---------- */
.sol{
  margin-top:auto;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(var(--cyan-rgb), .22);
  background:linear-gradient(140deg, rgba(var(--violet-rgb), .10), rgba(var(--cyan-rgb), .06));
}
.sol__tag{
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
}
.sol__text{ font-size:13.5px; line-height:1.6; color:var(--cream); opacity:.88; }