/* ===========================================================
   Antesdefirma — sistema de diseño de la web
   Base beige · verde sage protagonista · navy solo en texto/logo
   =========================================================== */

:root{
  /* superficies */
  --bg:#f4f1ea;          /* beige base */
  --bg-2:#efeadd;        /* beige alterno (secciones) */
  --surface:#ffffff;     /* tarjetas */
  --tint:#e9f0e9;        /* tinte verde muy suave */
  --tint-2:#dfeadf;

  /* tinta */
  --ink:#102838;         /* navy: titulares y logo (uso contenido) */
  --ink-2:#3f4a44;       /* cuerpo, verde-grisáceo */
  --muted:#8a8676;       /* secundario */
  --line:#e3ddcf;        /* bordes beige */
  --line-2:#d6cfbd;

  /* verde protagonista */
  --sage:#4a7c59;
  --sage-d:#3c6749;      /* hover */
  --sage-soft:#7fb08c;
  --forest:#13322b;      /* banda/footer oscuro (verde, NO navy) */
  --forest-2:#0e2620;

  /* semáforo */
  --ok:#4a7c59;
  --warn:#c98a3f;
  --risk:#b4554b;

  --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 2px 10px -4px rgba(19,50,43,.18);
  --shadow:0 22px 50px -32px rgba(19,50,43,.30);
  --shadow-lg:0 40px 90px -40px rgba(19,50,43,.40);
    /* verde protagonista (hover/soft derivados del acento) */
  --sage:#4a7c59;
  --sage-d:color-mix(in srgb, var(--sage), #000 16%);   /* hover */
  --sage-soft:color-mix(in srgb, var(--sage), #fff 38%);
  --forest:#13322b;      /* banda/footer oscuro (verde, NO navy) */
  --forest-2:color-mix(in srgb, var(--forest), #000 22%);

  /* ajustables por Tweaks */
  --fs-base:17px;        /* tamaño de cuerpo */
  --lh:1.6;              /* interlineado */
  --h-scale:1;           /* escala de titulares */
  --card-pad:clamp(24px,3vw,34px);
  --header-h:72px;
  --nav-gap:30px;
  --nav-fs:14.5px;
  --container:1140px;
  --gap:clamp(56px,8vw,116px); /* ritmo vertical de secciones */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;}
body{overflow-x:hidden;max-width:100%;}
img,svg,table{max-width:100%;}
h1,h2,h3,h4,p,li{overflow-wrap:break-word;}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:'Manrope',system-ui,sans-serif;font-size:var(--fs-base,17px);line-height:var(--lh,1.6);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--sage);text-decoration:none;}
::selection{background:var(--sage);color:#fff;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin:0 auto;}

/* tipografía */
h1,h2,h3,h4{font-family:'Outfit',sans-serif;color:var(--ink);letter-spacing:-0.025em;line-height:1.04;margin:0;font-weight:700;}
h1{font-size:calc(var(--h-scale,1) * clamp(36px,5.6vw,66px));}
h2{font-size:calc(var(--h-scale,1) * clamp(28px,3.6vw,44px));}
h3{font-size:clamp(20px,2vw,25px);letter-spacing:-0.02em;}
p{margin:0;}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-2);}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);display:inline-flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--sage);display:inline-block;}
.section-head{max-width:680px;margin:0 0 clamp(34px,4vw,52px);}
.section-head .eyebrow{margin-bottom:18px;}
.section-head p{margin-top:16px;color:var(--ink-2);font-size:18px;}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;
  padding:14px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap;line-height:1;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--sage);color:#fff;box-shadow:0 12px 24px -12px rgba(74,124,89,.7);}
.btn-primary:hover{background:var(--sage-d);transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(74,124,89,.8);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage);background:#fff;}
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-lg{padding:17px 30px;font-size:17px;}
.btn-block{width:100%;}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.04em;
  padding:7px 13px;border-radius:var(--r-pill);background:var(--tint);color:var(--sage-d);border:1px solid var(--tint-2);}
.chip.solid{background:var(--sage);color:#fff;border-color:transparent;}
.chip.warn{background:#f7ecdc;color:#9a6520;border-color:#eedcc2;}

/* secciones */
section{padding:var(--gap) 0;}
.sec-tint{background:var(--bg-2);}
.sec-green{background:var(--forest);color:#d8e6dd;}
.sec-green h2,.sec-green h3{color:#fff;}
.sec-green .eyebrow{color:var(--sage-soft);}
.sec-green .eyebrow::before{background:var(--sage-soft);}

/* tarjetas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.card.pad{padding:var(--card-pad,clamp(24px,3vw,34px));}

/* utilidades */
.grid{display:grid;gap:24px;}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.center{text-align:center;}
.mt-s{margin-top:14px;} .mt-m{margin-top:24px;} .mt-l{margin-top:40px;}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* check list */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.45;color:var(--ink-2);}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:6px;background:var(--tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;}
.checks.tight li{font-size:14.5px;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

@media(max-width:900px){
  .cols-3{grid-template-columns:1fr;}
  .cols-2{grid-template-columns:1fr;}
}