/* ═════════════════════════════════════════════════════════════════════
   MARKA GROUP — Hoja de estilo del sitio nuevo
   ─────────────────────────────────────────────────────────────────────
   El cuerpo es el CSS del demo aprobado (marka-demo-referencia.html),
   copiado tal cual salvo dos cosas: el selector de idioma pasó de
   botones a enlaces (porque ahora cada idioma tiene su propia
   dirección) y al final hay dos bloques de añadidos que el demo no
   necesitaba: uno para el sitio real y otro para las páginas interiores.

   La usan las dos portadas (public/index.html y public/es/index.html) y
   todas las páginas interiores: industrias, productos, blog, auditoría,
   about y contacto. El formulario de /schedule/ y los documentos
   legales siguen con assets/css/styles.css, el diseño anterior, hasta
   que se rehagan.

   Cómo está organizado, de arriba abajo:
     · :root        los colores y las tipografías, en un solo sitio
     · base         etiquetas sueltas: títulos, párrafos, botones, listas
     · header       la barra de arriba, fija
     · hero         la portada: cuadrícula de logos, chat y tarjeta
     · tools        la franja de herramientas que se desliza
     · process      el diagrama de los cuatro pasos
     · services     las tres tarjetas con su maqueta dibujada en CSS
     · industries   el carrusel
     · founder      la tarjeta de Karen, el podcast y los compromisos
     · guide/audit  las dos secciones con formulario
     · faq          el acordeón de preguntas
     · footer       el pie y los enlaces legales

   Los colores salen de :root. Si hay que cambiar un color del sitio, se
   cambia ahí arriba una vez, no repartido por el archivo.
   ═════════════════════════════════════════════════════════════════════ */

/* Layout: Carma's rhythm in Marka navy — boxed banner, thin headline with one italic serif word, tool grid, dashed process loop, carousel, testimonial-style founder card, 2x2 figures. Single committed dark look. */
:root{
  --bg:#07131F; --bg-2:#091827; --surface:#0E2133; --surface-2:#13293F;
  --border:rgba(207,228,245,.11); --text:#F3F7FB; --muted:#93A8BC;
  --accent:#CFE4F5; --pop:#6DB3F2; --on-accent:#07131F;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-weight:400;letter-spacing:-.03em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.6vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:1.2rem;letter-spacing:-.01em;font-weight:500;line-height:1.25}
em{font-family:var(--serif);font-style:italic;color:var(--accent);font-weight:400;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pop);font-weight:500}
section{padding-block:clamp(80px,11vw,128px)}
.sec-head{display:grid;gap:20px;max-width:760px}
.sec-head p{font-size:1.12rem;color:var(--muted);max-width:620px}
.sec-head .strong{color:var(--text);font-weight:500}
.center{margin-inline:auto;text-align:center;justify-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 28px;border-radius:3px;font:500 1.02rem var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .2s,background .2s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:center;font-size:1.08rem}
.checks svg{width:20px;height:20px;flex:none;stroke:var(--pop);stroke-width:2.4;fill:none}
.ibox{width:44px;height:44px;border:1px solid rgba(207,228,245,.28);border-radius:6px;display:grid;place-items:center;color:var(--text)}
.ibox svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(7,19,31,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none;font-weight:600;letter-spacing:.16em;font-size:1rem}
.logo i{display:grid;gap:3px}
.logo i span{display:block;height:3px;border-radius:2px;background:var(--accent)}
.links{display:flex;gap:30px;font-size:.95rem;color:var(--muted)}
.links a{text-decoration:none}
.links a:hover{color:var(--text)}
.nav .btn{padding:12px 20px;font-size:.92rem}
.nav-r{display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;flex:none}
.lang a{display:block;color:var(--muted);font:500 .82rem var(--sans);letter-spacing:.06em;padding:9px 11px;text-decoration:none}
.lang a:hover{color:var(--text)}
.lang a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:6px;background:none;color:var(--text);place-items:center}
@media (max-width:880px){.links,.nav .btn{display:none}.burger{display:grid}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:48px 72px}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(207,228,245,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(207,228,245,.055) 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 88% 55%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 88% 55%,#000 15%,transparent 72%)}
.hero::after{content:"";position:absolute;width:700px;height:700px;right:-240px;top:-80px;background:radial-gradient(circle,rgba(109,179,242,.15),transparent 62%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-copy{display:grid;gap:30px;min-width:0}
.banner{background:rgba(19,41,63,.7);border:1px solid var(--border);border-radius:10px;padding:16px 20px;color:var(--text);font-size:1.02rem;max-width:520px;line-height:1.5}
.hero-sub{font-size:1.18rem;color:var(--muted);max-width:540px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
@media (max-width:560px){.ctas{flex-direction:column}.ctas .btn{padding-inline:30px}}

.hv{position:relative;width:100%;max-width:440px;margin-left:auto;padding-bottom:84px}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 40% 35%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 85% 85% at 40% 35%,#000 45%,transparent 100%)}
.tl{aspect-ratio:1;max-width:100%;border-radius:11px;display:grid;place-items:center;border:1px solid var(--border)}
.tl svg{width:42%;height:42%}
.tl.e{background:rgba(19,41,63,.45)}
.tl.d{background:#0B1A28}
.tl.w{background:#fff;border-color:transparent}
.tl.c{border-color:transparent}
.tl:not(.e){box-shadow:0 8px 20px rgba(0,0,0,.35)}
.wa{position:absolute;right:0;top:27%;width:min(232px,62%);border-radius:12px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.55);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;animation:rise .9s .5s both ease-out;border:1px solid rgba(255,255,255,.06)}
.wa-head{display:flex;align-items:center;gap:8px;background:#075E54;color:#fff;padding:8px 10px}
.wa-head b{display:block;font-size:.76rem;font-weight:600;line-height:1.2}
.wa-head small{font-size:.64rem;opacity:.85}
.wa-av{width:26px;height:26px;border-radius:50%;background:#DFE5E7;color:#075E54;display:grid;place-items:center;font-weight:700;font-size:.72rem;flex:none}
.wa-body{background-color:#EFEAE2;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.5px);background-size:12px 12px;padding:9px 9px 10px;display:grid;gap:5px}
.wa-in,.wa-out{position:relative;max-width:86%;padding:5px 7px 4px;border-radius:7px;font-size:.7rem;line-height:1.3;color:#111B21;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wa-in{justify-self:start;background:#fff;border-top-left-radius:0}
.wa-out{justify-self:end;background:#D9FDD3;border-top-right-radius:0}
.wa-in::before,.wa-out::before{content:"";position:absolute;top:0;width:7px;height:9px}
.wa-in::before{left:-6px;background:linear-gradient(225deg,#fff 50%,transparent 50%)}
.wa-out::before{right:-6px;background:linear-gradient(135deg,#D9FDD3 50%,transparent 50%)}
.wa-in i,.wa-out i{display:block;text-align:right;font-style:normal;font-size:.56rem;color:#667781;margin-top:1px}
.tk{color:#53BDEB;letter-spacing:-.25em;margin-left:2px}
.notif{position:absolute;left:0;bottom:0;width:min(260px,68%);background:#FFFFFF;color:#0B1622;border-radius:12px;padding:14px 16px;box-shadow:0 22px 50px rgba(0,0,0,.5);display:grid;gap:4px;animation:rise .9s .3s both ease-out;z-index:2}
.notif small{font-size:.68rem;color:#5B6B7B;display:flex;justify-content:space-between;align-items:center}
.notif small b{background:#E6F0FA;color:#2A5C8A;border-radius:4px;padding:1px 6px;font-weight:600}
.notif strong{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.notif span{font-size:.78rem;color:#2A5C8A}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hv{margin:8px auto 0}}

/* tools marquee */
.tools{border-block:1px solid var(--border);padding-block:34px;overflow:hidden}
.tools p{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:22px}
.divider{display:flex;align-items:center;gap:18px;max-width:520px;margin:0 auto 18px;color:var(--accent)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.marquee{display:flex;width:max-content;animation:scroll 34s linear infinite}
.marquee div{display:flex;gap:56px;padding-right:56px;align-items:center}
.marquee span{display:flex;align-items:center;gap:10px;color:#8CA2B8;font-size:1.05rem;font-weight:500;white-space:nowrap}
.marquee svg{width:22px;height:22px;fill:currentColor}
.tools-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* process */
.pills{display:flex;align-items:center;justify-content:center;gap:0;margin:56px auto 0;position:relative;z-index:1;flex-wrap:nowrap}
.pill{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:.98rem;white-space:nowrap}
.dash{width:38px;height:1px;border-top:1px dashed rgba(207,228,245,.35);position:relative}
.dash::after{content:"";position:absolute;right:12px;top:-6px;border:6px solid transparent;border-left:9px solid var(--pop)}
.loop{margin-top:-26px;border:1px dashed rgba(207,228,245,.28);border-radius:24px;padding:58px 22px 0;display:grid;gap:16px;position:relative}
.loop::before,.loop::after{content:"";position:absolute;top:46%;border:6px solid transparent}
.loop::before{left:-7px;border-bottom:9px solid var(--pop);top:52%}
.loop::after{right:-7px;border-top:9px solid var(--pop)}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;display:grid;gap:14px;align-content:start}
.pcard p{color:var(--muted)}
.growth{width:170px;height:170px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:1.15rem;font-weight:500;margin:22px auto -85px;position:relative;z-index:1;box-shadow:0 0 0 10px var(--bg)}
.loop-pad{height:100px}
@media (min-width:881px){.loop{grid-template-columns:repeat(4,1fr)}.growth{grid-column:1/-1}}
@media (max-width:480px){.pills{flex-wrap:wrap;row-gap:8px}.pill{padding:9px 10px;font-size:.84rem}.dash{width:16px}.dash::after{right:0;border-left-width:7px;border-width:5px 0 5px 7px}.logo{letter-spacing:.1em;font-size:.92rem}.lang a{padding:8px 9px}}

/* services */
.services{background:linear-gradient(var(--bg),var(--bg-2))}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media (max-width:980px){.grid3{grid-template-columns:1fr}}
.svc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 22px 30px;display:grid;gap:22px;align-content:start}
.svc h3{font-size:1.9rem;font-weight:400;letter-spacing:-.03em}
.svc p{color:var(--muted);font-size:1.02rem}
.mock{background:var(--surface-2);border-radius:10px;height:220px;padding:18px;overflow:hidden;position:relative}
.browser{background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:.75rem}
.browser .bar{display:flex;gap:5px;padding:8px;border-bottom:1px solid var(--border)}
.browser .bar i{width:7px;height:7px;border-radius:50%;background:var(--border)}
.browser .body{padding:14px;display:grid;gap:9px}
.ln{height:7px;border-radius:4px;background:rgba(207,228,245,.16)}
.chip{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:3px;padding:5px 9px;font-weight:600;font-size:.68rem;width:max-content}
.float{position:absolute;right:14px;bottom:14px;background:#fff;color:#0B1622;border-radius:8px;padding:9px 11px;font-size:.68rem;box-shadow:0 10px 24px rgba(0,0,0,.35);display:grid;gap:2px}
.float b{font-size:.82rem}
.mwa{display:grid;gap:6px;font-family:system-ui,sans-serif}
.mwa .wa-in,.mwa .wa-out{font-size:.72rem}
.cal{display:grid;gap:7px;font-size:.75rem}
.cal div{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px}
.cal span{border-radius:10px;padding:1px 8px;font-size:.66rem;background:#1E4F3A;color:#BFF0D3}
.cal span.p{background:#4A3B12;color:#F5DFA2}

/* mini cta */
.mini{display:grid;gap:22px;max-width:640px}
.mini .checks{grid-template-columns:repeat(2,max-content);gap:12px 28px}
@media (max-width:480px){.mini .checks{grid-template-columns:1fr}}

/* industries carousel */
.car-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.car-btns{display:flex;gap:8px}
.car-btns button{width:46px;height:46px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.car-btns svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,82%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:44px;padding-bottom:12px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.ind{scroll-snap-align:start;display:grid;gap:14px}
.art{aspect-ratio:4/3;max-width:100%;border-radius:12px;border:1px solid var(--border);position:relative;overflow:hidden}
.art .lbl{position:absolute;left:16px;bottom:14px;right:16px;font-size:1.25rem;letter-spacing:-.02em;line-height:1.15;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ind h3{display:flex;align-items:center;gap:10px;font-size:1.02rem}
.ind h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pop)}
.ind p{color:var(--muted);font-size:.96rem}
.a1{background:radial-gradient(circle at 75% 30%,rgba(255,170,90,.55),transparent 45%),linear-gradient(160deg,#1B3550,#0A1826)}
.a2{background:radial-gradient(circle at 30% 30%,rgba(255,214,235,.45),transparent 50%),linear-gradient(160deg,#2A2440,#0E1424)}
.a3{background:radial-gradient(circle at 70% 35%,rgba(255,206,140,.5),transparent 48%),linear-gradient(160deg,#3A2A2A,#141018)}
.a4{background:radial-gradient(circle at 60% 25%,rgba(255,230,170,.55),transparent 45%),linear-gradient(160deg,#20384A,#0B1520)}
.a6{background:repeating-linear-gradient(90deg,rgba(207,228,245,.06) 0 1px,transparent 1px 20px),repeating-linear-gradient(0deg,rgba(207,228,245,.06) 0 1px,transparent 1px 20px),radial-gradient(circle at 50% 40%,rgba(109,179,242,.4),transparent 55%),linear-gradient(160deg,#13293F,#07131F)}
.a5{background:radial-gradient(circle at 35% 30%,rgba(140,220,180,.45),transparent 48%),linear-gradient(160deg,#173A33,#0A1618)}
.art svg.deco{position:absolute;right:16px;top:16px;width:46px;height:46px;stroke:rgba(255,255,255,.8);stroke-width:1.3;fill:none}

/* founder testimonial */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(26px,5vw,48px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.tcard .who{display:grid;gap:14px;justify-items:start}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--surface-2);box-shadow:0 0 0 1px var(--border)}
.tcard .name{font-size:1.15rem}
.tcard .role{color:var(--muted);font-size:.92rem}
.sig{font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--accent);line-height:1}
.tcard blockquote{margin:0;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.4;letter-spacing:-.015em}
.tbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;color:var(--pop);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.tbar i{flex:1;height:1px;background:var(--border);margin-left:20px}
@media (max-width:640px){.tcard{grid-template-columns:1fr}}

/* podcast */
.pod{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.pod-photo{position:relative;justify-self:center;width:min(380px,100%)}
.pod-photo img{display:block;width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;max-width:100%}
.pod-photo::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(207,228,245,.3)}
.play{position:absolute;right:6%;bottom:6%;width:78px;height:78px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.45);text-decoration:none}
.play svg{width:28px;height:28px;fill:var(--on-accent);margin-left:4px}
.ep{position:absolute;left:-6px;top:10%;background:#fff;color:#0B1622;border-radius:10px;padding:10px 13px;font-size:.75rem;box-shadow:0 14px 34px rgba(0,0,0,.4);display:grid}
.ep b{font-size:.9rem}
.pod-copy{display:grid;gap:22px;min-width:0}
.pod-copy p{color:var(--muted);font-size:1.1rem;max-width:520px}
@media (max-width:880px){.pod{grid-template-columns:1fr}.pod-copy{order:-1}}

/* figures 2x2 */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);margin-top:56px}
.figs div{padding:28px 24px 0 0;display:grid;gap:8px;align-content:start}
.figs strong{font-size:clamp(2.6rem,6vw,3.6rem);font-weight:400;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.figs span{color:var(--muted);font-size:.98rem;max-width:220px}
@media (max-width:760px){.figs{grid-template-columns:repeat(2,1fr);row-gap:32px}}

/* guide + audit */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.split-copy{display:grid;gap:22px;min-width:0}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(24px,5vw,48px)}
.aform{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.aform label{display:grid;gap:6px;font-size:.88rem;color:var(--text);min-width:0}
.aform input{font:400 1rem var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:14px;width:100%}
.aform input:focus{outline:2px solid var(--pop);outline-offset:1px;border-color:transparent}
.aform input[aria-invalid="true"]{border-color:#E88B8B}
.fmsg{font-size:.95rem;color:var(--accent);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.fmsg.err{color:#F2B8B8}
.gcover{aspect-ratio:8.5/11;max-width:300px;width:100%;margin:0 auto;border-radius:8px;border:1px solid var(--border);background:radial-gradient(circle at 85% 15%,rgba(109,179,242,.24),transparent 55%),linear-gradient(160deg,var(--surface-2),var(--bg));padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(2.5deg)}
.gtag{font-size:.68rem;border:1px solid var(--border);border-radius:5px;padding:4px 8px;color:var(--muted);width:max-content}
.gtitle{font-size:1.45rem;line-height:1.1;letter-spacing:-.02em}
.gmeta{display:flex;gap:18px;font-size:.7rem;color:var(--muted)}
.gmeta b{display:block;color:var(--text);font-size:1.15rem;font-weight:400}
.score{display:grid;gap:16px}
.score .big{display:flex;align-items:baseline;gap:8px}
.score .big strong{font-size:3.6rem;font-weight:400;letter-spacing:-.04em;line-height:1}
.bar-row{display:grid;grid-template-columns:110px 1fr 32px;gap:12px;align-items:center;font-size:.9rem;color:var(--muted)}
.trk{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.trk i{display:block;height:100%;background:var(--pop);border-radius:4px}

/* faq */
.faq{display:grid;gap:10px;margin-top:44px;max-width:840px}
details{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px 22px}
summary{cursor:pointer;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pop);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin-top:12px;max-width:66ch}

/* final */
.founding{border:1px solid var(--border);border-radius:18px;padding:clamp(28px,5vw,56px);background:linear-gradient(135deg,var(--surface),var(--bg));display:grid;gap:20px}
.founding p{color:var(--muted);max-width:640px;font-size:1.08rem}
.final{text-align:center;display:grid;gap:24px;justify-items:center}
.final p{color:var(--muted);max-width:520px;font-size:1.08rem}
/* Programa de Partners: texto a la izquierda y botones a la derecha; en
   el móvil, los botones bajan debajo del texto. */
.partners-cta{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
footer{border-top:1px solid var(--border);padding-block:52px 40px;color:var(--muted);font-size:.92rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h4{color:var(--text);font-weight:500;margin:0 0 12px;font-size:.92rem}
.foot a{display:block;text-decoration:none;margin-bottom:7px}
.foot a:hover{color:var(--text)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:38px;height:38px;border:1px solid var(--border);border-radius:6px;display:grid;place-items:center;margin:0;color:var(--muted)}
.socials a:hover{color:var(--text);background:var(--surface)}
.socials svg{width:17px;height:17px;fill:currentColor}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--border);font-size:.82rem}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
/* Aquí terminaba el CSS del demo. Su última regla, .ribbon, era la
   franja gris de arriba que decía "Demo · Vista previa"; no se copió
   porque esa franja no va en el sitio publicado. */

/* ═════════════════════════════════════════════════════════════════════
   AÑADIDOS DEL SITIO REAL
   ─────────────────────────────────────────────────────────────────────
   Lo que el demo no necesitaba porque era una sola página de muestra:
   el salto al contenido, el menú de móvil que de verdad abre, la caja de
   la verificación anti-robots y la línea legal del pie.
   ═════════════════════════════════════════════════════════════════════ */

/* Un elemento con el atributo hidden tiene que quedar escondido aunque
   su clase diga display:inline-flex, como le pasa a los botones. Sin
   este !important, el botón de descarga de la guía se vería desde el
   principio. */
[hidden]{display:none!important}

/* Enlace para saltar la navegación. Está fuera de la pantalla hasta que
   alguien llega a él con el tabulador, y entonces aparece arriba a la
   izquierda. Es la primera cosa de la página para quien navega con
   teclado o con lector de pantalla. */
.skip{position:absolute;left:-9999px;top:0;z-index:40;background:var(--accent);color:var(--on-accent);padding:12px 18px;border-radius:0 0 6px 0;text-decoration:none;font:500 .95rem var(--sans)}
.skip:focus{left:0}

/* Menú de móvil. En pantallas estrechas los enlaces del header están
   escondidos y solo se ve el botón de las tres rayas; al pulsarlo,
   home.js le pone la clase "abierto" al <header> y estas reglas sacan
   la misma lista de enlaces como un panel debajo de la barra. Así los
   enlaces se escriben una sola vez en el HTML, no dos.

   El panel se posiciona respecto al <header>, que ya es sticky. */
.nav-cta{display:none}
@media (max-width:880px){
  header.abierto .links{display:grid;gap:2px;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 20px 22px;box-shadow:0 24px 40px rgba(0,0,0,.45)}
  header.abierto .links a{color:var(--text);font-size:1.05rem;padding:13px 0}
  header.abierto .nav-cta{display:inline-flex;justify-content:center;margin-top:14px;padding:16px 24px}
  header.abierto .burger{background:var(--surface-2)}
}

/* Hueco del widget de Turnstile. Se reserva la altura que ocupa para que
   el formulario no dé un salto cuando acaba de cargarse, y se quita si
   el widget no llegó a dibujarse. */
.cf-box{min-height:65px}
.cf-box:empty{min-height:0}

/* Línea de abajo del pie: el aviso de copyright a la izquierda y los
   enlaces legales a la derecha, uno al lado del otro. Los enlaces del
   pie son display:block por defecto, y aquí tienen que ir en línea. */
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline}
.legal-links a{display:inline;margin:0}


/* ═════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES
   ─────────────────────────────────────────────────────────────────────
   Lo que necesitan las páginas que no son la portada: las cinco de
   industria, las de producto, el blog, la auditoría, about y contacto.
   Todo se construye con los mismos colores y tipografías de arriba; no
   hay ningún color nuevo.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de página interior ──────────────────────────────────────
   Más corta que la portada: etiqueta, título y un párrafo. Usa la misma
   .sec-head de la portada, solo cambia el espacio de arriba porque
   debajo del header fijo no hay un hero que lo separe. */
.inner{padding-block:clamp(44px,6vw,72px) 0}
.inner .sec-head p{font-size:1.15rem}

/* Migas de pan: dónde estoy y cómo vuelvo. Pequeñas y discretas. */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--muted);margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{opacity:.5}

/* ── Los tres niveles (Starter / Growth / Platform) ───────────────────
   El del medio va destacado porque es el que elige la mayoría: fondo un
   poco más claro y borde azul. Lleva además una etiqueta "Most chosen"
   escrita en el HTML, no inventada por el CSS. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;align-items:start}
@media (max-width:980px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;display:grid;gap:18px;align-content:start}
.tier.rec{background:var(--surface-2);border-color:rgba(109,179,242,.38)}
.tier-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tier-tag{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pop);font-weight:500}
.tier-badge{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-radius:3px;padding:4px 8px;font-weight:600;white-space:nowrap}
.tier h3{font-size:1.3rem;line-height:1.3}

/* Listas con check. El icono es un SVG dibujado aquí mismo y pintado
   con mask-image, para que su color salga de --pop como todo lo demás
   en vez de quedarse fijo dentro de la imagen. Así una lista de 16
   puntos no necesita 16 SVG repetidos en el HTML. */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:flex;gap:11px;color:var(--muted);font-size:.98rem;line-height:1.55}
.ticks li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:3px;background:var(--pop);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
/* El primer punto de Growth y Platform es "Everything in Starter": se
   marca en otro color para que se lea como lo que es, un resumen. */
.ticks li.sums{color:var(--text)}

/* ── Franja de confianza (cuatro tarjetas) ───────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
@media (max-width:1040px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid4{grid-template-columns:1fr}}
.tcard-sm{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;display:grid;gap:12px;align-content:start}
.tcard-sm h3{font-size:1.08rem}
.tcard-sm p{color:var(--muted);font-size:.98rem}

/* ── Texto largo: el artículo del blog y las páginas legales nuevas ─── */
.prose{max-width:68ch;display:grid;gap:20px}
.prose h2{font-size:clamp(1.45rem,3vw,2rem);margin-top:18px}
.prose p{color:var(--muted);font-size:1.08rem;line-height:1.75}
.prose ol,.prose ul{color:var(--muted);font-size:1.08rem;line-height:1.75;display:grid;gap:10px;padding-left:1.3em;margin:0}
.prose strong{color:var(--text);font-weight:500}
.prose .lead{color:var(--text);font-size:1.2rem;line-height:1.6}

/* ── Índice del blog ─────────────────────────────────────────────────── */
.posts{display:grid;gap:16px;margin-top:48px;max-width:840px}
.post{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;display:grid;gap:12px;text-decoration:none}
.post:hover{background:var(--surface-2)}
.post h3{font-size:1.35rem}
.post p{color:var(--muted)}
.post time{font-size:.85rem;color:var(--pop);letter-spacing:.06em;text-transform:uppercase}

/* ── Enlace "ver todo" al final de una tarjeta de industria ─────────── */
.more{color:var(--accent);text-decoration:none;font-weight:500;font-size:.96rem}
.more:hover{text-decoration:underline}