/* ============================================================
   SANTHEDZ — identidad visual 2026-10-30 (definida por Moon)
   Azul profundo #0B1F3A · azul eléctrico #1F6FEB
   Verde #3DDC84 (resultado) · dorado #E0A34E (dinero)
   Negro carbón #0D0D0D · blanco hueso #F5F2EC
   Tipografía: Fraunces (display, voz de la S) + Archivo (texto, voz de la H) + IBM Plex Mono (datos)
   ============================================================ */

:root{
  --bg:#F5F2EC;
  --bg-2:#ECE7DB;
  --bg-3:#FBF9F4;
  --ink:#0B1F3A;
  --ink-2:#0D0D0D;
  --muted:#4E5C6E;
  --dim-2:#7A8796;
  --blue:#1F6FEB;
  --blue-ink:#1450B8;
  --blue-soft:rgba(31,111,235,.10);
  --green:#3DDC84;
  --green-ink:#0E7A43;
  --gold:#E0A34E;
  --gold-ink:#8A5A1E;
  --deep:#0B1F3A;
  --carbon:#0D0D0D;
  --bone:#F5F2EC;
  --panel:#FFFFFF;
  --line:rgba(11,31,58,.14);
  --line-soft:rgba(11,31,58,.07);
  --line-dark:rgba(245,242,236,.14);
  --line-dark-soft:rgba(245,242,236,.07);
  --radius:18px;
  --max:1180px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

.display{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.005em;
}
h1.display{
  font-size:clamp(2.6rem,6vw,5rem);
  text-transform:none;
  letter-spacing:-.035em;
  line-height:1.03;
}
h2.display{font-size:clamp(2rem,4.4vw,3.4rem)}
h3.display{font-size:clamp(1.35rem,2.3vw,1.9rem)}
.accent{color:var(--green-ink)}
.text-dim{color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);line-height:1.58}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.5rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#3D84F5}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-ink)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:#12315A}
.btn-sm{padding:.65rem 1.1rem;font-size:.85rem}

/* Botones sobre fondo oscuro */
.hero .btn-ghost,.page-hero .btn-ghost,.cta-band .btn-ghost,.site-header .btn-ghost,.dark .btn-ghost{
  color:var(--bone);border-color:rgba(245,242,236,.32)
}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.site-header .btn-ghost:hover,.dark .btn-ghost:hover{
  border-color:var(--green);color:var(--green)
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(11,31,58,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.62rem;font-family:var(--font-body);font-size:1.14rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bone)}
.brand-mark{
  width:32px;height:32px;flex:none;border:1.5px solid var(--blue);border-radius:8px;
  display:grid;place-items:center;color:var(--bone);background:rgba(31,111,235,.18);
  font-family:var(--font-display);font-size:1rem;line-height:1;letter-spacing:0;
}
.brand span.dot{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:1.7rem}
.nav-links a{font-size:.88rem;font-weight:500;color:rgba(245,242,236,.66);transition:color .2s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);font-size:1.6rem;cursor:pointer;padding:.4rem}
@media(max-width:940px){
  .nav-links{
    position:fixed;top:74px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(11,31,58,.99);border-bottom:1px solid var(--line-dark);
    padding:.5rem 20px 1.2rem;
    transform:translateY(-120%);transition:transform .28s ease;
  }
  .nav-links a{padding:.85rem 0;width:100%;font-size:1rem;border-bottom:1px solid var(--line-dark-soft)}
  .nav-links.open{transform:translateY(0)}
  .nav-cta .btn{display:none}
  .nav-toggle{display:block}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:155px 0 95px;overflow:hidden;color:var(--bone);
  background:
    radial-gradient(900px 480px at 78% 8%,rgba(31,111,235,.28),transparent 62%),
    radial-gradient(700px 420px at 12% 92%,rgba(61,220,132,.10),transparent 60%),
    var(--deep);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%);
  opacity:.6;
}
.hero .container{position:relative}
.hero-kicker{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.pill{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .75rem;border:1px solid var(--line-dark);border-radius:999px;color:rgba(245,242,236,.72);
}
.pill.lime{border-color:rgba(31,111,235,.65);color:#9CC1FF}
.hero h1{max-width:18ch;color:var(--bone)}
.hero .lead{max-width:58ch;margin-top:1.5rem;color:rgba(245,242,236,.74)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.hero-note{margin-top:1.1rem;font-size:.82rem;color:rgba(245,242,236,.52)}
.hero .accent{color:var(--green)}

/* ---------- Barra de métricas ---------- */
.stats{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);background:var(--carbon);color:var(--bone)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:2.1rem 1.4rem;border-right:1px solid var(--line-dark)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.1rem);font-weight:600;line-height:1;color:var(--green);letter-spacing:-.03em}
.stat .num small{font-size:.5em;color:var(--bone)}
.stat:nth-child(2) .num,.stat:nth-child(3) .num{color:var(--gold)}
.stat .lbl{margin-top:.55rem;font-size:.8rem;color:rgba(245,242,236,.62);line-height:1.35}
@media(max-width:860px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-dark)}
}

/* ---------- Secciones ---------- */
.section{padding:96px 0;background:var(--bg)}
.section.tight{padding:72px 0}
.section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark{background:var(--deep);color:var(--bone);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.section.dark .eyebrow{color:#9CC1FF}
.section.dark .accent{color:var(--green)}
.section.dark .lead{color:rgba(245,242,236,.74)}
.section.dark .note{color:rgba(245,242,236,.5)}
.section.dark .metric{background:#12315A;border-color:var(--line-dark)}
.section.dark .metric .lbl{color:rgba(245,242,236,.66)}
.section.dark .btn-ghost{color:var(--bone);border-color:rgba(245,242,236,.32)}
.section.dark .btn-ghost:hover{border-color:var(--green);color:var(--green)}
.section-head{max-width:760px;margin-bottom:3rem}
.section-head .lead{margin-top:1rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- Servicios ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.7rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{border-color:rgba(31,111,235,.55);transform:translateY(-4px);box-shadow:0 18px 50px -32px rgba(11,31,58,.35)}
.card.featured{border-color:var(--blue);box-shadow:0 0 0 1px rgba(31,111,235,.18),0 24px 80px -40px rgba(31,111,235,.45)}
.card .tag{
  position:absolute;top:-.8rem;right:1.2rem;background:var(--blue);color:#fff;
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:.34rem .62rem;border-radius:6px;
}
.card h3{font-family:var(--font-display);font-size:1.02rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;line-height:1.25}
.card .price{font-family:var(--font-display);font-size:2.5rem;font-weight:600;line-height:1;color:var(--gold-ink);letter-spacing:-.03em}
.card .price small{font-family:var(--font-body);font-size:.82rem;color:var(--muted);font-weight:500;letter-spacing:0}
.card ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0 1rem;font-size:.92rem;color:var(--muted)}
.card li{display:flex;gap:.6rem;align-items:flex-start}
.card li::before{content:"✓";color:var(--green-ink);font-weight:700;flex:none}
.card .btn{margin-top:auto;width:100%}
.note{margin-top:1.2rem;font-size:.82rem;color:var(--dim-2)}
.note a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Caso / métricas ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media(max-width:820px){.case-grid{grid-template-columns:1fr}}
.metric{background:var(--deep);border:1px solid var(--line-dark);border-radius:14px;padding:1.4rem;color:var(--bone)}
.metric .num{font-family:var(--font-display);font-size:2.4rem;font-weight:600;line-height:1;color:var(--green);letter-spacing:-.03em}
.metric .lbl{font-size:.8rem;color:rgba(245,242,236,.62);margin-top:.4rem}
.quote{
  border-left:3px solid var(--gold);padding:1.2rem 0 1.2rem 1.4rem;margin:2.2rem 0;
  font-size:1.12rem;color:var(--ink);
}
.quote cite{display:block;margin-top:.6rem;font-style:normal;font-size:.82rem;color:var(--muted)}

/* ---------- Contenido / reels ---------- */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:860px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.reels{grid-template-columns:1fr}}
.reel{
  position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--deep);aspect-ratio:9/16;cursor:pointer;
}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .reel-meta{
  position:absolute;inset:auto 0 0 0;padding:1.4rem .95rem .85rem;
  background:linear-gradient(transparent,rgba(11,31,58,.92));
  font-size:.8rem;color:var(--bone);
}
.reel .reel-meta span{display:block;font-family:var(--font-mono);font-size:.66rem;color:rgba(245,242,236,.62);letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--line);padding-top:1.2rem}
.step .n{font-family:var(--font-mono);font-size:1.2rem;font-weight:500;color:var(--blue-ink)}
.step h3{font-size:1rem;font-weight:600;margin:.5rem 0 .4rem;color:var(--ink)}
.step p{font-size:.9rem;color:var(--muted)}

/* ---------- Banda CTA ---------- */
.cta-band{background:var(--blue);color:#fff;padding:72px 0}
.cta-band h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3.3rem);line-height:1;letter-spacing:-.01em;color:#fff}
.cta-band p{max-width:56ch;margin-top:.9rem;font-weight:400;color:rgba(255,255,255,.86)}
.cta-band .accent{color:var(--gold)}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.cta-band .btn-primary{background:var(--deep);color:var(--bone)}
.cta-band .btn-primary:hover{background:#12315A}
.cta-band .btn-ghost{border-color:rgba(245,242,236,.5);color:#fff}
.cta-band .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Página interior ---------- */
.page-hero{padding:145px 0 66px;border-bottom:1px solid var(--line-dark);background:var(--deep);color:var(--bone)}
.page-hero h1{font-size:clamp(2.5rem,5.8vw,4.4rem);color:var(--bone)}
.page-hero .lead{margin-top:1.2rem;max-width:70ch;color:rgba(245,242,236,.74)}
.page-hero .eyebrow{color:#9CC1FF}
.page-hero .accent{color:var(--green)}
.prose{max-width:760px}
.prose.centered{margin-inline:auto}
.prose h2{margin:2.4rem 0 .9rem;font-size:1.5rem;font-weight:600;color:var(--ink)}
.prose h3{margin:1.8rem 0 .6rem;font-size:1.1rem;font-weight:600;color:var(--ink)}
.prose p{margin-bottom:1.05rem;color:var(--muted)}
.prose ul,.prose ol{margin:0 0 1.2rem 1.2rem;color:var(--muted)}
.prose li{margin-bottom:.45rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--gold);padding-left:1.1rem;margin:1.4rem 0;color:var(--ink)}
.prose .table-wrap{overflow-x:auto;margin:1.4rem 0}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:.65rem .8rem;text-align:left}
.prose th{background:var(--blue-soft);color:var(--ink);font-weight:600}
.prose td{color:var(--muted)}
@media(max-width:520px){
  .prose table{font-size:.72rem}
  .prose th,.prose td{padding:.45rem .45rem}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--carbon);border-top:1px solid var(--line-dark);padding:64px 0 28px;color:var(--bone)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.44);margin-bottom:.9rem}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;color:rgba(245,242,236,.7)}
.site-footer a:hover{color:var(--green)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;border-top:1px solid var(--line-dark-soft);margin-top:2.6rem;padding-top:1.4rem;font-size:.78rem;color:rgba(245,242,236,.45)}

/* ---------- Animaciones ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- Utilidades ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.max-600{max-width:600px}
.kicker-line{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0}
.kicker-line::before,.kicker-line::after{content:"";height:1px;background:var(--line);flex:1}
.kicker-line span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2)}
.badge{display:inline-block;font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px;background:var(--blue-soft);color:var(--blue-ink)}

/* ============================================================
   PESTAÑAS DE CATEGORÍAS — cada ruta con su propia vibra
   Marketing: azul profundo + verde
   Tecnología: azul neón + morado
   Creativos: amarillo + naranja
   ============================================================ */
.tabs{margin-top:1.4rem}
.tablist{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem}
.tab{
  --tab-accent:var(--blue);
  --tab-accent-ink:#fff;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-weight:600;font-size:.9rem;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}
.tab:hover{border-color:var(--tab-accent);transform:translateY(-1px)}
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--tab-accent);flex:none}
.tab[aria-selected="true"]{background:var(--tab-accent);border-color:var(--tab-accent);color:var(--tab-accent-ink)}
.tab[aria-selected="true"] .dot{background:var(--tab-accent-ink);opacity:.6}
.tab[data-cat="marketing"]{--tab-accent:#3DDC84;--tab-accent-ink:#0B1F3A}
.tab[data-cat="tecnologia"]{--tab-accent:#22D3EE;--tab-accent-ink:#120B2E}
.tab[data-cat="creativos"]{--tab-accent:#FFD23F;--tab-accent-ink:#1A1006}
.tab-count{font-family:var(--font-mono);font-size:.68rem;font-weight:500;opacity:.7}

.tab-panel{
  display:none;position:relative;overflow:hidden;
  border-radius:24px;padding:clamp(22px,3.4vw,38px);
  color:var(--cat-ink);
  background:
    radial-gradient(720px 340px at 90% -12%,var(--cat-glow),transparent 62%),
    radial-gradient(540px 300px at 6% 112%,var(--cat-glow-2),transparent 65%),
    linear-gradient(135deg,var(--cat-bg),var(--cat-bg-2));
  border:1px solid var(--cat-line);
}
.tab-panel.active{display:block}
.tab-panel[data-cat="marketing"]{
  --cat-bg:#0B1F3A;--cat-bg-2:#12315A;
  --cat-glow:rgba(61,220,132,.16);--cat-glow-2:rgba(31,111,235,.20);
  --cat-ink:#F5F2EC;--cat-muted:rgba(245,242,236,.72);--cat-faint:rgba(245,242,236,.52);
  --cat-accent:#3DDC84;--cat-accent-2:#1F6FEB;--cat-accent-ink:#0B1F3A;
  --cat-line:rgba(245,242,236,.16);--cat-surface:rgba(245,242,236,.06);
}
.tab-panel[data-cat="tecnologia"]{
  --cat-bg:#120B2E;--cat-bg-2:#1E1440;
  --cat-glow:rgba(34,211,238,.18);--cat-glow-2:rgba(167,139,250,.22);
  --cat-ink:#F5F2EC;--cat-muted:rgba(245,242,236,.72);--cat-faint:rgba(245,242,236,.52);
  --cat-accent:#22D3EE;--cat-accent-2:#A78BFA;--cat-accent-ink:#120B2E;
  --cat-line:rgba(245,242,236,.16);--cat-surface:rgba(245,242,236,.06);
}
.tab-panel[data-cat="creativos"]{
  --cat-bg:#1A1006;--cat-bg-2:#2A1A0A;
  --cat-glow:rgba(255,210,63,.16);--cat-glow-2:rgba(255,122,26,.20);
  --cat-ink:#FFF7E8;--cat-muted:rgba(255,247,232,.7);--cat-faint:rgba(255,247,232,.5);
  --cat-accent:#FFD23F;--cat-accent-2:#FF7A1A;--cat-accent-ink:#1A1006;
  --cat-line:rgba(255,247,232,.16);--cat-surface:rgba(255,247,232,.06);
}

.cat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.7rem}
.cat-head .eyebrow{color:var(--cat-accent);margin-bottom:.55rem}
.cat-head .eyebrow::before{background:var(--cat-accent-2)}
.cat-head h3{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;text-transform:uppercase;line-height:1;letter-spacing:.005em;color:var(--cat-ink)}
.cat-head p{color:var(--cat-muted);max-width:62ch;margin-top:.65rem}

.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cat-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:940px){.cat-grid,.cat-grid.two,.cat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cat-grid,.cat-grid.two,.cat-grid.four{grid-template-columns:1fr}}

.cat-card{
  display:flex;flex-direction:column;gap:.75rem;min-width:0;
  background:var(--cat-surface);border:1px solid var(--cat-line);
  border-radius:16px;padding:1.45rem;color:var(--cat-ink);
}
.cat-card.featured{border-color:var(--cat-accent);box-shadow:0 0 0 1px var(--cat-accent)}
.cat-card h4{font-family:var(--font-display);font-size:1rem;font-weight:600;text-transform:uppercase;line-height:1.25;letter-spacing:.015em}
.cat-card .cat-price{font-family:var(--font-display);font-size:2.15rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--cat-accent)}
.cat-card .cat-price small{font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--cat-muted);letter-spacing:0}
.cat-card p{font-size:.89rem;color:var(--cat-muted);line-height:1.5}
.cat-card ul{list-style:none;display:flex;flex-direction:column;gap:.48rem;margin:.15rem 0 .6rem;font-size:.86rem;color:var(--cat-muted)}
.cat-card li{display:flex;gap:.55rem;align-items:flex-start}
.cat-card li::before{content:"✓";color:var(--cat-accent);font-weight:700;flex:none}
.cat-card .btn{
  margin-top:auto;width:100%;background:var(--cat-accent);color:var(--cat-accent-ink);
  border-color:var(--cat-accent);padding:.78rem 1rem;font-size:.88rem;
}
.cat-card .btn:hover{filter:brightness(1.06)}
.cat-card .btn.ghost{background:transparent;color:var(--cat-ink);border-color:var(--cat-line)}
.cat-card .btn.ghost:hover{border-color:var(--cat-accent);color:var(--cat-accent)}
.cat-badge{
  align-self:flex-start;font-family:var(--font-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;border-radius:5px;
  background:var(--cat-accent-2);color:var(--cat-accent-ink);
}
.cat-note{font-size:.8rem;color:var(--cat-faint);margin-top:1.1rem;line-height:1.5}
.cat-note a{color:var(--cat-accent);text-decoration:underline;text-underline-offset:3px}
.cat-subhead{display:flex;align-items:baseline;gap:.8rem;margin:2rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--cat-line)}
.cat-subhead h4{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;letter-spacing:.02em;color:var(--cat-ink)}
.cat-subhead span{font-family:var(--font-mono);font-size:.68rem;color:var(--cat-faint);letter-spacing:.08em;text-transform:uppercase}

/* Anclas de pestañas: que el header fijo no tape el inicio */
.tab-panel{scroll-margin-top:96px}
.cat-subhead{scroll-margin-top:96px}

/* ============================================================
   RUTAS A PANTALLA COMPLETA
   Marketing: azul + verde · Tecnología: neón + morado
   Creativos: amarillo + naranja
   ============================================================ */
.vibe-marketing{
  --cat-bg:#0B1F3A;--cat-bg-2:#12315A;
  --cat-glow:rgba(61,220,132,.16);--cat-glow-2:rgba(31,111,235,.20);
  --cat-ink:#F5F2EC;--cat-muted:rgba(245,242,236,.72);--cat-faint:rgba(245,242,236,.52);
  --cat-accent:#3DDC84;--cat-accent-2:#1F6FEB;--cat-accent-ink:#0B1F3A;
  --cat-line:rgba(245,242,236,.16);--cat-surface:rgba(245,242,236,.06);
  --cat-header:rgba(11,31,58,.95);--cat-footer:#08172B;
}
.vibe-tecnologia{
  --cat-bg:#120B2E;--cat-bg-2:#1E1440;
  --cat-glow:rgba(34,211,238,.18);--cat-glow-2:rgba(167,139,250,.22);
  --cat-ink:#F5F2EC;--cat-muted:rgba(245,242,236,.72);--cat-faint:rgba(245,242,236,.52);
  --cat-accent:#22D3EE;--cat-accent-2:#A78BFA;--cat-accent-ink:#120B2E;
  --cat-line:rgba(245,242,236,.16);--cat-surface:rgba(245,242,236,.06);
  --cat-header:rgba(18,11,46,.95);--cat-footer:#0C0720;
}
.vibe-creativos{
  --cat-bg:#1A1006;--cat-bg-2:#2A1A0A;
  --cat-glow:rgba(255,210,63,.16);--cat-glow-2:rgba(255,122,26,.20);
  --cat-ink:#FFF7E8;--cat-muted:rgba(255,247,232,.7);--cat-faint:rgba(255,247,232,.5);
  --cat-accent:#FFD23F;--cat-accent-2:#FF7A1A;--cat-accent-ink:#1A1006;
  --cat-line:rgba(255,247,232,.16);--cat-surface:rgba(255,247,232,.06);
  --cat-header:rgba(26,16,6,.95);--cat-footer:#120B04;
}

/* --- Banda de ruta en el inicio / hub --- */
.route-band{
  position:relative;padding:clamp(56px,7vw,96px) 0;overflow:hidden;
  color:var(--cat-ink);
  background:
    radial-gradient(760px 360px at 92% -10%,var(--cat-glow),transparent 62%),
    radial-gradient(560px 320px at 4% 112%,var(--cat-glow-2),transparent 66%),
    linear-gradient(135deg,var(--cat-bg),var(--cat-bg-2));
  border-block:1px solid var(--cat-line);
}
.route-band-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:900px){.route-band-inner{grid-template-columns:1fr;gap:2rem}}
.route-band .eyebrow{color:var(--cat-accent);margin-bottom:.6rem}
.route-band .eyebrow::before{background:var(--cat-accent-2)}
.route-band h2{font-family:var(--font-display);font-size:clamp(2.3rem,5vw,4.2rem);font-weight:600;text-transform:uppercase;line-height:.94;letter-spacing:.005em;color:var(--cat-ink)}
.route-band .lead{color:var(--cat-muted);max-width:52ch;margin-top:1rem}
.route-band .btn{background:var(--cat-accent);color:var(--cat-accent-ink);border-color:var(--cat-accent);margin-top:1.5rem}
.route-band .btn:hover{filter:brightness(1.06)}
.route-band .btn.ghost{background:transparent;color:var(--cat-ink);border-color:var(--cat-line)}
.route-band .btn.ghost:hover{border-color:var(--cat-accent);color:var(--cat-accent)}

.route-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--cat-line)}
.route-list li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--cat-line)}
.route-list .r-name{font-weight:600;color:var(--cat-ink);line-height:1.3}
.route-list .r-meta{display:block;font-size:.8rem;color:var(--cat-muted);margin-top:.2rem;font-weight:400}
.route-list .r-price{font-family:var(--font-mono);font-size:.88rem;color:var(--cat-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.route-list .r-price small{font-size:.72em;color:var(--cat-faint)}
@media(max-width:520px){
  .route-list li{grid-template-columns:1fr;gap:.25rem}
  .route-list .r-price{font-size:.82rem}
}

/* --- Página de categoría a pantalla completa --- */
body.cat-page{background:var(--cat-bg);color:var(--cat-ink)}
.cat-page .site-header{background:var(--cat-header);border-bottom-color:var(--cat-line)}
.cat-page .brand-mark{border-color:var(--cat-accent);background:transparent}
.cat-page .brand span.dot{color:var(--cat-accent)}
.cat-page .nav-links a:hover,.cat-page .nav-links a[aria-current="page"]{color:var(--cat-accent)}
.cat-page .btn-primary{background:var(--cat-accent);border-color:var(--cat-accent);color:var(--cat-accent-ink)}
.cat-page .btn-primary:hover{filter:brightness(1.06)}
.cat-page .btn-ghost{color:var(--cat-ink);border-color:var(--cat-line)}
.cat-page .btn-ghost:hover{border-color:var(--cat-accent);color:var(--cat-accent)}
.cat-page .site-footer{background:var(--cat-footer);border-top-color:var(--cat-line)}
.cat-page .site-footer a:hover{color:var(--cat-accent)}
.cat-page .footer-bottom{color:var(--cat-faint);border-top-color:var(--cat-line)}
.cat-page .footer-grid p{color:var(--cat-muted)!important}

.cat-hero{
  position:relative;padding:165px 0 90px;overflow:hidden;border-bottom:1px solid var(--cat-line);
  background:
    radial-gradient(860px 420px at 84% -10%,var(--cat-glow),transparent 62%),
    radial-gradient(640px 360px at 6% 112%,var(--cat-glow-2),transparent 66%),
    linear-gradient(135deg,var(--cat-bg),var(--cat-bg-2));
}
.cat-hero .eyebrow{color:var(--cat-accent)}
.cat-hero .eyebrow::before{background:var(--cat-accent-2)}
.cat-hero h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,6.4rem);font-weight:600;text-transform:uppercase;line-height:.9;letter-spacing:.005em;color:var(--cat-ink);max-width:16ch}
.cat-hero .lead{color:var(--cat-muted);max-width:60ch;margin-top:1.3rem}
.cat-hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.cat-hero .btn{background:var(--cat-accent);color:var(--cat-accent-ink);border-color:var(--cat-accent)}
.cat-hero .btn:hover{filter:brightness(1.06)}
.cat-hero .btn.ghost{background:transparent;color:var(--cat-ink);border-color:var(--cat-line)}
.cat-hero .btn.ghost:hover{border-color:var(--cat-accent);color:var(--cat-accent)}

.cat-section{padding:80px 0}
.cat-section.tight{padding:56px 0}
.cat-section.alt{background:rgba(255,255,255,.035);border-block:1px solid var(--cat-line)}
.cat-section .section-head .lead{color:var(--cat-muted)}
.cat-section .eyebrow{color:var(--cat-accent)}
.cat-section .eyebrow::before{background:var(--cat-accent-2)}
.cat-section h2.display{color:var(--cat-ink)}
.cat-section .accent{color:var(--cat-accent)}
.cat-page .prose h2,.cat-page .prose h3,.cat-page .prose strong{color:var(--cat-ink)}
.cat-page .prose p,.cat-page .prose li{color:var(--cat-muted)}
.cat-page .prose a{color:var(--cat-accent)}
.cat-page .prose blockquote{border-left-color:var(--cat-accent);color:var(--cat-ink)}
.cat-page .note{color:var(--cat-faint)}
.cat-page .note a{color:var(--cat-accent)}
.cat-page .badge{background:var(--cat-surface);color:var(--cat-accent)}

.cat-cta{padding:72px 0;background:var(--cat-accent);color:var(--cat-accent-ink)}
.cat-cta h2{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:600;text-transform:uppercase;line-height:.98;color:var(--cat-accent-ink)}
.cat-cta p{max-width:58ch;margin-top:.9rem;color:var(--cat-accent-ink);opacity:.82}
.cat-cta .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.cat-cta .btn{background:var(--cat-bg);color:var(--cat-ink);border-color:var(--cat-bg)}
.cat-cta .btn:hover{filter:brightness(1.1)}
.cat-cta .btn.ghost{background:transparent;color:var(--cat-accent-ink);border-color:rgba(0,0,0,.35)}
.cat-cta .btn.ghost:hover{background:rgba(0,0,0,.08);color:var(--cat-accent-ink)}

/* Nav con 8 opciones: un poco más compacta */
.nav-links{gap:1.15rem}
.nav-links a{font-size:.84rem}
@media(max-width:1100px) and (min-width:941px){
  .nav-links{gap:.8rem}
  .nav-links a{font-size:.79rem}
}

.cat-page .step{border-top-color:var(--cat-line)}
.cat-page .step .n{color:var(--cat-accent)}
.cat-page .step h3{color:var(--cat-ink)}
.cat-page .step p{color:var(--cat-muted)}
.cat-page .section-head .eyebrow{color:var(--cat-accent)}

@media(max-width:940px){
  .cat-page .nav-links{background:var(--cat-bg);border-bottom-color:var(--cat-line)}
  .cat-page .nav-links a{border-bottom-color:var(--cat-line)}
}

/* ============================================================
   MARCA — manifiesto, visión, misión y valores
   ============================================================ */
.manifesto-card{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:16px;padding:2.3rem;box-shadow:0 20px 60px -40px rgba(11,31,58,.4);
}
.manifesto-card blockquote{
  font-family:var(--font-display);font-size:clamp(1.4rem,2.3vw,1.8rem);font-weight:600;
  line-height:1.25;color:var(--ink);letter-spacing:-.02em;margin-top:1.2rem;
}
.manifesto-card .manifesto-sign{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
}
.values-band{
  background:var(--deep);color:var(--bone);padding:96px 0;
  border-block:1px solid var(--line-dark);
  background-image:
    radial-gradient(700px 320px at 92% -10%,rgba(31,111,235,.18),transparent 62%),
    radial-gradient(520px 300px at 4% 112%,rgba(61,220,132,.08),transparent 66%);
}
.values-band .eyebrow{color:#9CC1FF}
.values-band .eyebrow::before{background:var(--gold)}
.values-band h2.display{color:var(--bone)}
.values-band .accent{color:var(--green)}
.values-band .lead{color:rgba(245,242,236,.7);max-width:62ch}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.4rem 0 2.2rem}
@media(max-width:800px){.vm-grid{grid-template-columns:1fr}}
.vm-card{
  background:rgba(245,242,236,.055);border:1px solid var(--line-dark);border-left:3px solid var(--gold);
  border-radius:16px;padding:1.8rem;
}
.vm-card:nth-child(2){border-left-color:var(--blue)}
.vm-label{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;
}
.vm-card:nth-child(2) .vm-label{color:#9CC1FF}
.vm-card p{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;color:rgba(245,242,236,.86)}
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem}
@media(max-width:900px){.values-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr}}
.value{border-top:1px solid var(--line-dark);padding:1.4rem 0}
.value h3{
  font-family:var(--font-display);font-size:1rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--bone);display:flex;align-items:center;gap:.55rem;
}
.value h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.value p{font-size:.9rem;line-height:1.55;color:rgba(245,242,236,.64);margin-top:.55rem}

/* Logo S+H */
.brand-mark-img{width:32px;height:32px;object-fit:contain;flex:none;display:block}

/* Foto del fundador */
.founder-photo-card{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 24px 70px -44px rgba(11,31,58,.45)}
.founder-photo-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;display:block}
.founder-photo-card figcaption{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.2rem 1.1rem;border-top:1px solid var(--line)}
.founder-photo-card .fp-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.1}
.founder-photo-card .fp-role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}