/* ============================================================
   SYT — HOJA DE ESTILOS COMPARTIDA
   Un solo archivo para todo el sitio. Cambiar un color o una
   tipografía aquí lo cambia en todas las páginas.
   VERSION: MENU-FIX-V2 (menú móvil alineado)
   ============================================================ */

:root{
  --ink:#1A1418;
  --aubergine:#2A1E2D;
  --aubergine-deep:#1F1622;
  --orange:#EE5C1F;
  --ember:#C7391A;
  --bone:#F7F5F3;
  --slate:#6F6A70;
  --hairline:#E2DDE0;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
a{color:inherit}

.eyebrow{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;
         text-transform:uppercase;color:var(--orange);display:block;margin-bottom:20px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(36px,4.6vw,60px)}
h2{font-size:clamp(28px,3.3vw,42px);margin-bottom:20px}
h3{font-size:19px;letter-spacing:-.01em;margin-bottom:10px}
.lede{font-size:clamp(18px,1.55vw,20px);color:#3A343A;max-width:64ch}

/* ---------- NAV ---------- */
nav{border-bottom:1px solid var(--hairline);position:sticky;top:0;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:.02em;
      color:var(--orange);text-decoration:none}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;
             text-transform:uppercase;text-decoration:none;color:var(--ink);
             padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.on{border-bottom-color:var(--orange)}
.lang{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
      display:flex;gap:6px;align-items:center;color:var(--slate)}
.lang a{text-decoration:none;color:var(--slate);transition:.2s}
.lang a:hover{color:var(--orange)}
.lang a.on{color:var(--ink)}
.lang .sep{color:var(--hairline)}

/* ---------- BOTÓN HAMBURGUESA (solo móvil) ---------- */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;
            padding:8px;margin-left:8px;width:44px;height:44px;position:relative}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);
                 margin:5px auto;transition:.28s;border-radius:2px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- BOTONES ---------- */
.btn{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em;
     text-decoration:none;padding:15px 28px;border-radius:2px;display:inline-block;
     transition:.2s;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ember)}
.btn-ghost{border-color:var(--hairline);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ember)}
.btn-white:hover,.btn-white:focus-visible{background:var(--ink);color:#fff}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- HERO ---------- */
.hero{padding:88px 0 0}
.hero.tight{padding:88px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero h1{margin-bottom:32px}
.hero h1 .accent{color:var(--orange)}
.hero-side{border-left:3px solid var(--orange);padding-left:30px}
.hero-side .lede,.hero-side p{font-size:clamp(18px,1.55vw,20px);color:#3A343A;
                              margin-bottom:22px;max-width:46ch}
.hero-side p:last-child{margin-bottom:0}

/* ---------- LAS DOS PUERTAS ---------- */
.doors{padding:64px 0 96px}
.doors-head{max-width:62ch;margin-bottom:42px}
.doors-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.door{border:1px solid var(--hairline);padding:40px;text-decoration:none;color:inherit;
      display:flex;flex-direction:column;transition:.2s}
.door:hover,.door:focus-visible{border-color:var(--ink);box-shadow:0 14px 44px -26px rgba(26,20,24,.4)}
.door .who{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;
           text-transform:uppercase;color:#fff;background:var(--aubergine);
           display:inline-block;padding:7px 12px;margin-bottom:22px;align-self:flex-start}
.door h3{font-size:30px;margin-bottom:14px}
.door > p{color:var(--slate);font-size:16px}
.door .note{margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline);
            font-size:14px;color:var(--slate);line-height:1.6}
.door .note b{font-family:var(--display);font-weight:600;color:var(--ink);
              display:block;margin-bottom:4px;font-size:13px}
.door .go{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.05em;
          color:var(--ink);border-bottom:1.5px solid var(--orange);padding-bottom:3px;
          align-self:flex-start;margin-top:26px}

/* ---------- FRANJA DE CUMPLIMIENTO ---------- */
.rail{background:var(--aubergine);color:#fff;padding:52px 0 56px}
.rail-label{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;
            text-transform:uppercase;color:#B9A8BC;margin-bottom:26px}
.rail-track{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.chip{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.03em;
      border:1px solid rgba(255,255,255,.22);padding:9px 15px;border-radius:2px;
      color:#F0E9F1;transition:.2s}
.chip:hover{border-color:var(--orange);color:#fff}
.rail-line{font-size:19px;color:#EDE3EE;max-width:62ch}
.rail-line b{color:var(--orange);font-weight:600;font-family:var(--display)}

/* ---------- SECCIONES ---------- */
section{padding:96px 0}
.section-head{max-width:70ch;margin-bottom:52px}

.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pain{border-top:2px solid var(--ink);padding-top:22px}
.pain h3{font-size:18px}
.pain p{font-size:16px;color:var(--slate)}

/* ---------- PRUEBA ---------- */
.proof{background:var(--bone)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:36px}
.proof-card{background:#fff;border:1px solid var(--hairline);padding:30px;
            border-left:3px solid var(--orange)}
.proof-card .sector{font-family:var(--display);font-size:11px;font-weight:600;
                    letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
                    display:block;margin-bottom:12px}
.proof-card .what{font-family:var(--display);font-size:19px;font-weight:600;
                  line-height:1.3;margin-bottom:12px}
.proof-card p{font-size:15px;color:var(--slate);line-height:1.6}
.proof-note{font-size:15px;color:var(--slate);border-left:2px solid var(--hairline);
            padding-left:18px;max-width:72ch;font-style:italic}

/* ---------- DIFERENCIADOR ---------- */
.diff{background:var(--aubergine-deep);color:#fff}
.diff h2{color:#fff}
.diff .lede{color:#C6B8C8}
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 56px}
.diff-item{border-top:1px solid rgba(255,255,255,.16);padding-top:24px}
.diff-item h3{color:#fff;font-size:20px;margin-bottom:10px}
.diff-item p{color:#BFB0C1;font-size:16px}
.diff-item .n{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
              color:var(--orange);display:block;margin-bottom:12px}

/* ---------- OBLIGATORIEDAD (revisoría) ---------- */
.oblig{background:var(--aubergine);color:#fff;padding:88px 0}
.oblig h2{color:#fff}
.oblig .lede{color:#D6C8D8}
.oblig-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:44px 0 32px}
.ocard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:34px}
.ocard .k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
          text-transform:uppercase;color:var(--orange);display:block;margin-bottom:18px}
.ocard h3{color:#fff;font-size:21px;margin-bottom:16px}
.fig{border-top:1px solid rgba(255,255,255,.16);padding-top:16px;margin-top:16px}
.fig:first-of-type{border-top:none;padding-top:0;margin-top:0}
.fig .n{font-family:var(--display);font-size:26px;font-weight:700;color:#fff;
        display:block;line-height:1.2;letter-spacing:-.02em}
.fig .n small{font-size:15px;font-weight:600;color:var(--orange);display:block;margin-top:4px}
.fig .d{font-size:15px;color:#BFB0C1;margin-top:8px}
.olist{list-style:none}
.olist li{padding-left:22px;position:relative;margin-bottom:13px;font-size:16px;color:#E3D8E4}
.olist li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1.5px;background:var(--orange)}
.oblig-note{font-size:14px;color:#A697A8;border-left:2px solid rgba(255,255,255,.2);
            padding-left:18px;max-width:78ch;line-height:1.65}
.oblig-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.oblig-cta .ask{font-size:17px;color:#E3D8E4}

/* ---------- PASOS ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{border-top:2px solid var(--ink);padding-top:22px}
.step .n{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
         color:var(--orange);display:block;margin-bottom:12px}
.step p{font-size:15px;color:var(--slate)}

.pull{margin-top:56px;background:var(--bone);border-left:3px solid var(--orange);padding:36px 40px}
.pull p{font-size:21px;line-height:1.5;max-width:66ch}
.pull p b{font-family:var(--display);font-weight:600}
.pull .sig{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;
           text-transform:uppercase;color:var(--slate);margin-top:16px}

/* ---------- LISTAS DE CONTENIDO ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.clist{list-style:none}
.clist li{border-bottom:1px solid var(--hairline);padding:15px 0 15px 26px;position:relative;font-size:16px}
.clist li:last-child{border-bottom:none}
.clist li::before{content:"";position:absolute;left:0;top:23px;width:11px;height:1.5px;background:var(--orange)}
.clist li b{font-family:var(--display);font-weight:600;display:block;margin-bottom:2px}
.clist li span{color:var(--slate);font-size:15px}

/* ---------- CASA MATRIZ (outsourcing) ---------- */
.matriz{background:var(--aubergine);color:#fff;padding:92px 0}
.matriz h2{color:#fff}
.matriz .lede{color:#D6C8D8}
.books{display:grid;grid-template-columns:1fr auto 1fr;margin:48px 0 36px;
       border:1px solid rgba(255,255,255,.18)}
.book{padding:34px}
.book .k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
         text-transform:uppercase;color:var(--orange);display:block;margin-bottom:14px}
.book h3{color:#fff;font-size:22px;margin-bottom:12px}
.book p{font-size:15px;color:#BFB0C1;line-height:1.6}
.bridge{background:rgba(238,92,31,.14);border-left:1px solid rgba(255,255,255,.18);
        border-right:1px solid rgba(255,255,255,.18);
        display:flex;align-items:center;justify-content:center;padding:0 26px;
        font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;
        text-transform:uppercase;color:var(--orange);text-align:center;line-height:1.8;min-width:150px}
.matriz-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mitem{border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.mitem h3{color:#fff;font-size:17px;margin-bottom:8px}
.mitem p{font-size:15px;color:#BFB0C1}

/* ---------- ESCENARIOS ---------- */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scard{border:1px solid var(--hairline);border-top:3px solid var(--orange);padding:34px;
       display:flex;flex-direction:column}
.scard .k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
          text-transform:uppercase;color:var(--slate);display:block;margin-bottom:14px}
.scard h3{font-size:21px;margin-bottom:14px}
.scard p{font-size:16px;color:var(--slate);margin-bottom:auto}
.scard .tag{margin-top:22px;padding-top:16px;border-top:1px solid var(--hairline);
            font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink)}
.scen-note{margin-top:44px;background:var(--bone);border-left:3px solid var(--orange);padding:34px 38px}
.scen-note p{font-size:19px;line-height:1.55;max-width:70ch}
.scen-note p b{font-family:var(--display);font-weight:600}

.work{background:var(--bone)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.softbox{margin-top:22px;padding:22px 24px;background:#fff;border:1px solid var(--hairline);
         border-left:3px solid var(--orange)}
.softbox p{font-size:16px;color:var(--ink);margin:0}

.more{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.more .intro b{font-family:var(--display);font-weight:600;display:block;margin-bottom:8px;font-size:19px}
.more .intro p{color:var(--slate);font-size:16px;max-width:34ch}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:26px;list-style:none}
.mlist li{border-left:2px solid var(--hairline);padding-left:18px}
.mlist li b{font-family:var(--display);font-size:18px;font-weight:600;display:block;margin-bottom:6px}
.mlist li span{font-size:15px;color:var(--slate);line-height:1.6}

/* ---------- NÓMINA E IMPUESTOS ---------- */
.svc{padding:96px 0;border-top:1px solid var(--hairline)}
.svc.alt{background:var(--bone)}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-bottom:52px}
.svc-head .lede{font-size:18px}
.num{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;
     text-transform:uppercase;color:var(--slate);display:block;margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.cols h3{font-size:21px;margin-bottom:18px}
.highlight{margin-top:44px;background:var(--bone);border-left:3px solid var(--orange);padding:32px 36px}
.svc.alt .highlight{background:#fff;border:1px solid var(--hairline);border-left:3px solid var(--orange)}
.highlight h3{font-size:19px;margin-bottom:10px}
.highlight p{font-size:16px;color:var(--slate);max-width:70ch}
.rel{background:var(--aubergine);color:#fff;padding:80px 0}
.rel h2{color:#fff;max-width:24ch}
.rel p{font-size:19px;color:#D6C8D8;max-width:66ch;margin-bottom:0}

/* ---------- CONTACTO ---------- */
.main{padding:80px 0 96px}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.steps{margin:44px 0 40px;list-style:none}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;
          border-top:1px solid var(--hairline)}
.steps li:last-child{border-bottom:1px solid var(--hairline)}
.steps .n{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;
          color:var(--orange);padding-top:3px}
.steps p{font-size:15px;color:var(--slate)}
.direct{background:var(--bone);border-left:3px solid var(--orange);padding:28px 30px}
.direct .k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
           text-transform:uppercase;color:var(--slate);display:block;margin-bottom:16px}
.direct p{font-size:16px;margin-bottom:8px}
.direct a{color:var(--orange);text-decoration:none;font-weight:600}
.direct a:hover{text-decoration:underline}
.direct .addr{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline);
              font-size:15px;color:var(--slate);line-height:1.6}
.form-card{border:1px solid var(--hairline);border-top:3px solid var(--orange);padding:44px}
.form-card h2{font-family:var(--display);font-size:26px;margin-bottom:8px}
.form-card .sub{font-size:16px;color:var(--slate);margin-bottom:32px}
.field{margin-bottom:22px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
      text-transform:uppercase;color:var(--ink);display:block;margin-bottom:8px}
label .opt{color:var(--slate);font-weight:500;text-transform:none;letter-spacing:0}
input,select,textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
                      padding:13px 15px;border:1px solid var(--hairline);border-radius:2px;
                      background:#fff;transition:.2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
textarea{min-height:130px;resize:vertical;line-height:1.6}
select{cursor:pointer;appearance:none;
       background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
                        linear-gradient(135deg,var(--slate) 50%,transparent 50%);
       background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
       background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0 24px}
.consent input{width:auto;margin-top:5px;accent-color:var(--orange)}
.consent span{font-size:14px;color:var(--slate);line-height:1.6}
.consent a{color:var(--orange)}
.btn-full{width:100%;border:none}
.reassure{margin-top:20px;font-size:14px;color:var(--slate);text-align:center;line-height:1.6}

/* ---------- WhatsApp en contacto ---------- */
.wa-link{display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:center;
         font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.03em;
         text-decoration:none;padding:15px 24px;border-radius:2px;margin:6px 0 4px;
         background:var(--aubergine);color:#fff;transition:.2s;border:1.5px solid var(--aubergine)}
.wa-link:hover,.wa-link:focus-visible{background:var(--orange);border-color:var(--orange)}
.wa-link svg{flex-shrink:0}
.form-or{display:flex;align-items:center;text-align:center;gap:14px;margin:22px 0 24px;
         font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
         text-transform:uppercase;color:var(--slate)}
.form-or::before,.form-or::after{content:"";flex:1;height:1px;background:var(--hairline)}

/* ---------- CIERRE ---------- */
.close{background:var(--orange);color:#fff;padding:92px 0}
.close h2{color:#fff;max-width:24ch;margin-bottom:18px}
.close p{font-size:19px;color:#FFE7DC;max-width:56ch;margin-bottom:32px}

/* ---------- FOOTER ---------- */
footer{background:var(--aubergine);color:#C6B8C8;padding:64px 0 40px;font-size:15px}
footer .f-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer h4{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
          color:#fff;margin-bottom:16px;font-weight:600}
footer p{margin-bottom:6px}
footer a{color:#C6B8C8;text-decoration:none}
footer a:hover{color:var(--orange)}
footer .fine{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:13px;color:#8E7F90}

/* ---------- Redes sociales en el footer ---------- */
.f-social{display:flex;gap:12px;margin-top:16px}
.f-social a{display:inline-flex;align-items:center;justify-content:center;
            width:36px;height:36px;border-radius:2px;color:#C6B8C8;
            border:1px solid rgba(255,255,255,.18);transition:.2s}
.f-social a:hover{color:#fff;border-color:var(--orange);background:var(--orange)}
.f-social svg{width:18px;height:18px}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- MÓVIL ---------- */
@media (max-width:900px){
  .wrap{padding:0 22px}
  .nav-toggle{display:block}
  .nav-in{position:relative}
  .nav-links{
    display:none;position:fixed;top:74px;left:0;right:0;
    flex-direction:column;gap:0;background:#fff;
    border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
    box-shadow:0 18px 40px -22px rgba(26,20,24,.35);padding:8px 22px 16px;z-index:60;
    list-style:none;margin:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:none;
               border-top:none;font-size:15px;letter-spacing:.04em;width:100%}
  .nav-links li{width:100%}
  .nav-links a.on{border-bottom:2px solid var(--orange);border-bottom-color:var(--orange);
                  display:inline-block;width:auto;padding-bottom:3px}
  .hero,.hero.tight{padding:52px 0 0}
  .hero.tight{padding-bottom:52px}
  .hero-grid,.cgrid,.two,.work-grid,.doors-grid,.diff-grid,.svc-head,.cols,.more,.oblig-grid{
    grid-template-columns:1fr;gap:32px}
  .hero-side{border-left:none;border-top:3px solid var(--orange);padding-left:0;padding-top:24px}
  .row{grid-template-columns:1fr;gap:0}
  .pains,.proof-grid,.scen,.mlist,.matriz-list,.steps4{grid-template-columns:1fr;gap:26px}
  footer .f-grid{grid-template-columns:1fr;gap:32px}
  .books{grid-template-columns:1fr}
  .bridge{border-left:none;border-right:none;border-top:1px solid rgba(255,255,255,.18);
          border-bottom:1px solid rgba(255,255,255,.18);padding:18px}
  section,.oblig,.matriz,.svc,.rel,.main{padding:60px 0}
  .doors{padding:48px 0 60px}
  .pull,.scen-note,.highlight,.form-card{padding:26px}
  .pull p,.scen-note p{font-size:18px}
}