/* ==========================================================================
   XCORP · Blog stylesheet (shared)
   Marca: negro + degradado rosa #ff2e88 → morado #8b5cf6.
   Firma: sistema de color por plataforma en el índice.
   Display: Bricolage Grotesque · Cuerpo: stack de sistema (rápido).
   ========================================================================== */

:root{
  --bg:#000;
  --bg-soft:#0a0a0b;
  --bg-soft-2:#0f0f12;
  --ink:#f6f6f8;
  --ink-2:rgba(255,255,255,.74);
  --ink-3:rgba(255,255,255,.52);
  --ink-4:rgba(255,255,255,.34);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --pink:#ff2e88;
  --purple:#8b5cf6;
  --grad:linear-gradient(135deg,#ff2e88,#8b5cf6);
  --net:#ff2e88;            /* acento por plataforma (lo sobreescribe cada card) */
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --maxw:1080px;
  --read:720px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(1000px 560px at 8% 2%, rgba(255,46,136,.12), transparent 58%),
    var(--bg);
  background-repeat:no-repeat;
  color:var(--ink-2);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--pink);}

/* ---------- Header ------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px clamp(16px,4vw,26px);
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top a.logo{
  font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;
  text-decoration:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.top nav{display:flex;flex-wrap:wrap;gap:4px;}
.top nav a{
  color:var(--ink-3);text-decoration:none;font-size:13px;font-weight:700;
  padding:6px 10px;border-radius:999px;transition:color .15s,background .15s;
}
.top nav a:hover{color:#fff;background:rgba(255,255,255,.06);}

/* ---------- Layout ------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(26px,5vw,52px) clamp(16px,4vw,24px) 72px;}

/* ---------- Masthead (índice) ------------------------------------------- */
.mast{
  position:relative;
  padding:clamp(18px,3vw,30px) 0 clamp(26px,4vw,40px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,5vw,44px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad);}
.mast h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(2.6rem,8vw,4.6rem);margin:0;color:var(--ink);
}
.mast h1 .dot{color:var(--pink);}
.mast .thesis{
  max-width:60ch;margin:18px 0 0;
  font-size:clamp(1rem,2.4vw,1.18rem);line-height:1.55;color:var(--ink-2);
}
.mast .thesis strong{color:#fff;font-weight:700;}

/* ---------- Section titles ---------------------------------------------- */
.sec{margin:clamp(34px,6vw,56px) 0 clamp(16px,3vw,22px);}
.sec-eyebrow{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 6px;
}
.sec h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.35rem,3.2vw,1.8rem);margin:0;color:var(--ink);
}
.sec p{margin:8px 0 0;color:var(--ink-3);max-width:56ch;font-size:.96rem;}

/* ---------- Cards: firma = color por plataforma ------------------------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,18px);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(12px,1.8vw,16px);}

.card{
  --glow:color-mix(in srgb,var(--net) 26%,transparent);
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-soft-2),var(--bg-soft));
  border:1px solid var(--line-2);border-radius:18px;
  padding:20px 20px 18px;text-decoration:none;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* espina de color de la plataforma */
.card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--net),transparent 82%);
  opacity:.9;
}
/* brillo ambiental en la esquina, en el color de la red */
.card::after{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;height:80%;
  background:radial-gradient(circle,var(--glow),transparent 70%);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--net) 55%,var(--line-2));box-shadow:0 18px 40px -22px var(--net);}
.card:hover::after{opacity:1;}
.card:focus-visible{outline:2px solid var(--net);outline-offset:3px;}

.card .tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--net);
  background:color-mix(in srgb,var(--net) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--net) 28%,transparent);
  border-radius:999px;padding:4px 11px;margin-bottom:13px;
}
.card .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--net);box-shadow:0 0 8px var(--net);}
.card h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.22;
  font-size:1.08rem;margin:0 0 8px;color:#fff;
}
.card p{margin:0;color:var(--ink-3);font-size:.9rem;line-height:1.55;}
.card .more{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--net);
}
.card .more svg{transition:transform .2s ease;}
.card:hover .more svg{transform:translateX(4px);}

/* Pilares: un punto más grandes */
.pillar{padding:24px 24px 20px;border-radius:20px;}
.pillar h3{font-size:1.22rem;margin-bottom:9px;}
.pillar p{font-size:.95rem;}

/* Colores por plataforma */
.card[data-net="instagram"]  {--net:#ff2e88;}
.card[data-net="tiktok"]     {--net:#25f4ee;}
.card[data-net="maps"]       {--net:#34d17a;}
.card[data-net="web"]        {--net:#8b5cf6;}
.card[data-net="youtube"]    {--net:#ff3b3b;}
.card[data-net="spotify"]    {--net:#1ed760;}
.card[data-net="twitter"]    {--net:#4aa3ff;}
.card[data-net="facebook"]   {--net:#2d88ff;}
.card[data-net="twitch"]     {--net:#a970ff;}
.card[data-net="linkedin"]   {--net:#3aa0e6;}
.card[data-net="threads"]    {--net:#d7dce1;}
.card[data-net="soundcloud"] {--net:#ff6a2b;}
.card[data-net="reddit"]     {--net:#ff5a3c;}

/* ---------- Artículo ----------------------------------------------------- */
article{max-width:var(--read);margin:0 auto;padding:clamp(24px,4vw,40px) clamp(16px,4vw,22px) 48px;}
article h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.7rem,4.6vw,2.5rem);margin:0 0 12px;color:var(--ink);
}
article .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  color:var(--ink-4);font-size:.8rem;margin:0 0 26px;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;
}
article .meta::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad);}
article h2{
  position:relative;font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.2rem,3vw,1.45rem);line-height:1.25;color:#fff;
  margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
article h2::after{content:"";position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--grad);}
article p,article li{color:var(--ink-2);font-size:1.02rem;line-height:1.78;}
article ul{padding-left:1.15em;margin:12px 0;}
article li{margin:7px 0;}
article li::marker{color:var(--pink);}
article strong{color:#fff;font-weight:700;}
article a{color:var(--pink);text-underline-offset:3px;text-decoration-thickness:1px;}
article a:hover{color:#ff6aa8;}

/* primer párrafo destacado (entradilla) */
article > p:first-of-type{font-size:1.12rem;line-height:1.7;color:#e9e9ee;}

/* tablas (crear-web-barata y otras) */
article table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;font-size:.94rem;}
article th,article td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
article th{font-family:var(--display);font-weight:700;color:#fff;background:rgba(255,255,255,.045);}
article tr:last-child td{border-bottom:none;}
article td{color:var(--ink-2);}

/* CTA */
article .cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:30px 0;padding:16px 20px;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:1.02rem;text-align:center;
  color:#fff;text-decoration:none;
  background:var(--grad);
  box-shadow:0 16px 40px -18px var(--pink);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
article .cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 22px 48px -18px var(--pink);}

/* volver al blog */
.backlink{
  display:inline-flex;align-items:center;gap:7px;max-width:var(--read);
  margin:0 auto;padding:0 clamp(16px,4vw,22px);
  font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--ink-3);
  text-decoration:none;
}
.backlink:hover{color:#fff;}

/* ---------- Footer ------------------------------------------------------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 18px;text-align:center;font-size:12.5px;color:var(--ink-4);
}
footer a{color:var(--ink-3);margin:0 8px;text-decoration:none;}
footer a:hover{color:#fff;}

/* ---------- Artículo: componentes de profundidad (SEO/E-E-A-T) ---------- */

/* meta: píldora "actualizado" */
article .meta .upd{
  color:#fff;background:color-mix(in srgb,var(--purple) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--purple) 40%,transparent);
  border-radius:999px;padding:2px 9px;font-size:.72rem;letter-spacing:.02em;
}

/* Caja autor (E-E-A-T) — reseñado por / experiencia */
.author{
  max-width:var(--read);margin:0 auto 26px;
  display:flex;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg,var(--bg-soft-2),var(--bg-soft));
}
.author .ava{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  background:var(--grad);box-shadow:0 6px 18px -8px var(--pink);
}
.author .who{font-size:.9rem;line-height:1.45;color:var(--ink-3);}
.author .who b{color:#fff;font-family:var(--display);font-weight:700;font-size:.98rem;display:block;}
.author .who .role{color:var(--net,var(--pink));font-weight:600;}

/* Tabla de contenidos (jump links) */
.toc{
  max-width:var(--read);margin:0 auto 30px;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-soft-2),var(--bg-soft));
}
.toc > .toc-h{
  font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:13px 16px 9px;
}
.toc ol{margin:0;padding:0 16px 14px;list-style:none;counter-reset:toc;}
.toc li{counter-increment:toc;margin:5px 0;font-size:.95rem;line-height:1.4;}
.toc li::before{content:counter(toc,decimal-leading-zero);color:var(--ink-4);font-family:var(--display);font-weight:700;margin-right:10px;}
.toc a{color:var(--ink-2);text-decoration:none;}
.toc a:hover{color:#fff;}

/* Puntos clave / TL;DR (imán de featured snippet) */
.tldr{
  max-width:var(--read);margin:24px auto;padding:18px 20px;
  border:1px solid color-mix(in srgb,var(--pink) 34%,var(--line-2));
  border-left:4px solid var(--pink);border-radius:14px;
  background:color-mix(in srgb,var(--pink) 7%,var(--bg-soft));
}
.tldr h2,.tldr h3{
  margin:0 0 10px!important;padding:0!important;border:0!important;
  font-family:var(--display);font-weight:800;font-size:1rem!important;color:#fff;
  letter-spacing:.02em;text-transform:uppercase;
}
.tldr h2::after,.tldr h3::after{display:none!important;}
.tldr ul{margin:0;padding-left:1.15em;}
.tldr li{margin:6px 0;font-size:.98rem;}

/* Callout / nota / aviso */
.note{
  max-width:var(--read);margin:20px auto;padding:14px 16px;
  border:1px solid var(--line-2);border-left:4px solid var(--purple);
  border-radius:12px;background:rgba(139,92,246,.07);
  font-size:.98rem;line-height:1.65;color:var(--ink-2);
}
.note.warn{border-left-color:#ffb020;background:rgba(255,176,32,.08);}
.note.tip{border-left-color:#34d17a;background:rgba(52,209,122,.08);}
.note b{color:#fff;}

/* figuras con pie */
article figure{max-width:var(--read);margin:24px auto;}
article figure img{border:1px solid var(--line-2);border-radius:14px;}
article figcaption{margin-top:8px;font-size:.82rem;color:var(--ink-4);text-align:center;}

/* pros / contras */
.pc{max-width:var(--read);margin:22px auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pc > div{border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;background:var(--bg-soft);}
.pc h3{margin:0 0 8px!important;padding:0!important;border:0!important;font-size:1rem!important;font-family:var(--display);font-weight:700;}
.pc h3::after{display:none!important;}
.pc.win h3,.pc .win h3{color:#34d17a;}
.pc ul{margin:0;padding-left:1.1em;font-size:.94rem;}
.pc .good li::marker{color:#34d17a;}
.pc .bad li::marker{color:#ff5a5a;}

/* FAQ acordeón */
.faq{max-width:var(--read);margin:26px auto;}
.faq > h2{border-top:1px solid var(--line);}
.faq details{
  border:1px solid var(--line-2);border-radius:12px;margin:10px 0;
  background:var(--bg-soft);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 16px;
  font-family:var(--display);font-weight:700;color:#fff;font-size:1rem;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--pink);font-weight:800;font-size:1.3rem;line-height:1;transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details > p{padding:0 16px 15px;margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.7;}

/* Artículos relacionados */
.related{max-width:var(--read);margin:36px auto 0;padding-top:26px;border-top:1px solid var(--line);}
.related > h2{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;margin:0 0 14px;letter-spacing:-.01em;}
.related .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.related a{
  --net:var(--pink);display:block;padding:14px 15px;border-radius:14px;text-decoration:none;
  border:1px solid var(--line-2);background:linear-gradient(180deg,var(--bg-soft-2),var(--bg-soft));
  transition:transform .18s,border-color .18s;
}
.related a:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--net) 50%,var(--line-2));}
.related a .rtag{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--net);}
.related a b{display:block;color:#fff;font-family:var(--display);font-weight:700;font-size:.96rem;line-height:1.25;margin-top:5px;}

/* Hub de categoría: intro */
.hub-intro{max-width:var(--read);margin:0 auto 30px;font-size:1.08rem;line-height:1.7;color:var(--ink-2);}

/* ---------- Focus / motion / responsive --------------------------------- */
a:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px;}
html{scroll-behavior:smooth;}
:target{scroll-margin-top:80px;}
@media (max-width:520px){.pc{grid-template-columns:1fr;}}

@media (max-width:640px){
  .pillars{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
  .card:hover{transform:none;}
}

/* Fallback si color-mix no está soportado */
@supports not (color:color-mix(in srgb,#000 10%,#fff)){
  .card{--glow:rgba(255,46,136,.22);}
  .card .tag{color:var(--net);background:rgba(255,255,255,.06);border-color:var(--line-2);}
}