/* ===========================================================
   Antesdefirma — portal de cliente · PIEL v2 (cadena 3, Bloque G)
   Papel #F6F2EA · tarjetas #FBF9F4 · arena #ECE5D8 · tinta #0E1D28
   · oliva #5C6B47 único acento · radios: control 6 / herramienta 16
   SINCRONIZAR con web-v3/css/base.css — deuda cadena 3 (tokens
   duplicados a mano; si cambia la paleta de la web, tocar aquí)
   =========================================================== */

:root{
  /* superficies */
  --bg:#F6F2EA;          /* papel */
  --bg-2:#F1EBDF;        /* papel alterno (entre papel y arena) */
  --surface:#FBF9F4;     /* tarjetas */
  --tint:#EAEDE2;        /* tinte oliva muy suave */
  --cream:#FBF9F4;       /* (antes sin definir: los fondos caían a transparente) */
  --tint-2:#DDE3D0;

  /* tinta */
  --ink:#0E1D28;         /* tinta: titulares y logo */
  --ink-2:#13242F;       /* cuerpo, tinta suave */
  --muted:rgba(14,29,40,0.55); /* secundario */
  --line:#ECE5D8;        /* arena: filetes */
  --line-2:#DFD6C4;

  /* verde protagonista */
  --sage:#5C6B47;
  --sage-d:#4C5939;      /* hover */
  --sage-soft:#8FA876;
  --forest:#13242F;      /* banda/sidebar oscuro: tinta */
  --forest-2:#0E1D28;

  /* semáforo */
  --ok:#5C6B47;
  --warn:#c98a3f;
  --risk:#b4554b;

  --r:16px; --r-lg:16px; --r-pill:6px; /* herramienta 16 · control 6 */
  --shadow-sm:0 2px 10px -4px rgba(14,29,40,.14);
  --shadow:0 22px 50px -32px rgba(14,29,40,.22);
  --shadow-lg:0 40px 90px -40px rgba(14,29,40,.30);
    /* verde protagonista (hover/soft derivados del acento) */
  --sage:#5C6B47;
  --sage-d:color-mix(in srgb, var(--sage), #000 16%);   /* hover */
  --sage-soft:color-mix(in srgb, var(--sage), #fff 38%);
  --forest:#13242F;      /* banda/sidebar oscuro: tinta */
  --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:64px;
  --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);font-variant-numeric:tabular-nums;
  -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:'Newsreader',Georgia,serif;color:var(--ink);letter-spacing:-0.015em;line-height:1.08;margin:0;font-weight:540;}
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:'Manrope',sans-serif;font-weight:700;font-size:15.5px;
  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;}
/* B6 (cadena 3.5) — CAUSA del corte lateral del portal en móvil: los .btn llevan
   white-space:nowrap y el botón de bloque del wizard («Te falta: …», texto
   dinámico largo) no partía línea → min-content de 600+px → el track 1fr del
   grid crecía a ~723px con overflow-x:hidden = contenido cortado sin scroll.
   Los botones de BLOQUE parten línea; los inline conservan el nowrap. */
.btn-block{white-space:normal;line-height:1.3;}
.btn-primary{background:var(--sage);color:#fff;box-shadow:0 12px 24px -12px rgba(92,107,71,.55);}
.btn-primary:hover{background:var(--sage-d);transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(92,107,71,.65);}
.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='%235C6B47' 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;}
}