/* ============================================================
   Scala Consultorías · sistema visual único
   Un solo archivo para todo el sitio. Si cambias un color aquí,
   cambia en las cinco páginas.
   ------------------------------------------------------------
   Papel  #FAF7EF   Tinta   #1B1710
   Amarillo #F5C230 (la marca, la acción principal)
   Verde  #0F7B5A   (marketing, dinero que entra, confirmaciones)
   Poppins para títulos · Nunito para leer
   ============================================================ */

:root{
  color-scheme: light;

  /* superficies */
  --paper:#FAF7EF;
  --surface:#FFFFFF;
  --sunk:#F4EFE1;

  /* texto */
  --ink:#1B1710;
  --ink-2:#5F5747;
  --ink-3:#8A8272;

  /* líneas */
  --rule:#EAE1CB;
  --rule-soft:#F2EBDA;

  /* marca */
  --brand:#F5C230;
  --brand-soft:#FDF0C4;
  --brand-deep:#7E6000;
  --on-brand:#1B1710;

  /* verde: plan de marketing, dinero, confirmaciones */
  --mk:#0F7B5A;
  --mk-deep:#0B5F45;
  --mk-bg:#E3F1EA;
  --mk-card:#F3F9F6;
  --mk-rule:#BFE0D0;
  --mk-ink:#0B3B2C;
  --mk-ink-2:#3C6656;

  /* semáforo */
  --ok:#0F7B5A;
  --ok-wash:#E3F1EA;
  --bad:#B84A2C;
  --bad-wash:#FBE2D9;

  --shadow:0 2px 3px rgba(80,62,10,.05), 0 18px 40px -26px rgba(80,62,10,.45);

  --f-title:'Poppins','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;

  --r:20px;   /* tarjetas */
  --r-s:12px; /* campos */
  --r-p:99px; /* botones y chips */

  /* --- alias en español (los usa el generador de contratos) --- */
  --papel:var(--paper);
  --blanco:var(--surface);
  --crema:var(--sunk);
  --tinta:var(--ink);
  --tinta-2:var(--ink-2);
  --gris:var(--ink-3);
  --linea:var(--rule);
  --linea-2:#DED4BC;
  --amarillo:var(--brand);
  --amarillo-suave:var(--brand-soft);
  --verde:var(--mk);
  --verde-2:var(--mk-deep);
  --verde-suave:var(--mk-bg);
  --sombra:var(--shadow);
  --f:var(--f-body);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-title);font-weight:600;line-height:1.15;margin:0;
  letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mk);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}

/* ---------------- barra superior ---------------- */
.sitebar{background:var(--surface);border-bottom:1px solid var(--rule)}
.sitebar-in{max-width:900px;margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brandmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brandmark svg{width:30px;height:30px;flex:0 0 30px;display:block}
.brandmark .wm{display:flex;flex-direction:column;gap:1px;text-align:left}
.brandmark .wm b{font-family:var(--f-title);font-weight:700;font-size:1.06rem;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.brandmark .wm i{font-family:var(--f-title);font-style:normal;font-weight:500;font-size:.5rem;
  letter-spacing:.3em;color:var(--ink-3)}
.sitenav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sitenav a{font-family:var(--f-body);font-size:.86rem;font-weight:700;color:var(--ink-2);
  text-decoration:none;padding:7px 12px;border-radius:var(--r-p);
  transition:background .15s ease,color .15s ease}
.sitenav a:hover{background:var(--sunk);color:var(--ink)}
.sitenav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-deep)}
.sitenav-label{font-family:var(--f-body);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);background:var(--sunk);
  border-radius:var(--r-p);padding:7px 14px}
@media (max-width:560px){
  .sitebar-in{padding:10px 16px}
  .sitenav{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-inline:-2px}
  .sitenav::-webkit-scrollbar{display:none}
  .sitenav a{white-space:nowrap}
}

/* ---------------- migas ---------------- */
.miga{max-width:900px;margin-inline:auto;padding:14px 20px 0;
  font-size:.82rem;color:var(--ink-3);font-weight:600}
.miga a{color:var(--ink-3);text-decoration:none}
.miga a:hover{color:var(--brand-deep);text-decoration:underline}

/* ---------------- pie ---------------- */
.sitefoot{margin-top:56px;border-top:1px solid var(--rule);background:var(--surface)}
.sitefoot-in{max-width:900px;margin-inline:auto;padding:28px 20px 52px;
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
  font-size:.88rem;color:var(--ink-3);line-height:1.7}
.sitefoot b{color:var(--ink);font-family:var(--f-title);font-weight:600}
.sitefoot a{color:var(--ink-2);text-decoration:none;font-weight:700}
.sitefoot a:hover{color:var(--brand-deep);text-decoration:underline}
.sitefoot .copy{flex:0 0 auto;font-size:.82rem;color:var(--ink-3)}
.sitefoot p{margin:0}

/* ---------------- icono de la herramienta (estilo app) ---------------- */
.appicon{display:grid;place-items:center;width:74px;height:74px;border-radius:23px;
  background:var(--brand);color:var(--on-brand);margin:0 auto 18px;
  box-shadow:0 14px 28px -14px rgba(120,92,10,.85), inset 0 -2px 0 rgba(0,0,0,.07)}
.appicon svg{width:38px;height:38px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.appicon--sm{width:48px;height:48px;border-radius:15px;margin:0 0 14px;
  box-shadow:0 10px 20px -12px rgba(120,92,10,.8)}
.appicon--sm svg{width:26px;height:26px}

/* ---------------- la letra chica, al final de la herramienta ---------------- */
.notafin{max-width:900px;margin:30px auto 0;padding:16px 22px;background:var(--sunk);
  border-radius:var(--r-s);font-size:.82rem;line-height:1.65;color:var(--ink-3);
  text-align:center}

/* ---------------- WhatsApp flotante ---------------- */
.wa-flota{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;
  gap:10px;background:var(--mk);color:#fff;text-decoration:none;font-family:var(--f-body);
  font-weight:700;font-size:.95rem;padding:13px 20px 13px 16px;border-radius:var(--r-p);
  box-shadow:0 14px 30px -10px rgba(11,59,44,.65);transition:transform .15s ease,background .15s ease}
.wa-flota:hover{transform:translateY(-2px);background:var(--mk-deep)}
.wa-flota svg{width:24px;height:24px;flex:0 0 24px;display:block;fill:#fff;stroke:none}
@media (max-width:600px){
  .wa-flota{right:14px;bottom:14px;padding:15px;border-radius:50%}
  .wa-flota span{display:none}
  .sitefoot-in{padding-bottom:96px}
}
@media print{.wa-flota{display:none !important}}

@media print{.sitebar,.miga,.sitefoot{display:none !important}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important;animation-duration:.001ms !important}}