/* ===========================================================
   Variedades Digitales — hoja de estilo compartida
   Paleta tomada del logo. Tipografía Outfit, la misma del logo.
   Cada producto puede sobreescribir --c con su propio color.
   =========================================================== */

:root{
  --papel:#FAFBFA;
  --papel-2:#EEF4F1;
  --tinta:#17332B;
  --tinta-suave:#5D716A;
  --linea:#DBE6E1;
  --marca:#1F5C4A;          /* verde oscuro del logo */
  --marca-2:#4F7D6F;        /* verde medio */
  --marca-3:#7FC0A9;        /* menta */
  --c:var(--marca);         /* color del producto, se sobreescribe */
  --radio:14px;
  --sombra:0 1px 2px rgba(23,51,43,.04), 0 12px 32px -18px rgba(23,51,43,.32);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3{font-family:'Outfit',sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.035em}
h1{font-size:clamp(34px,7.6vw,52px)}
h2{font-size:clamp(25px,5.2vw,34px)}
h3{font-size:20px;letter-spacing:-.02em}

.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
.wrap-angosto{max-width:620px;margin:0 auto;padding:0 22px}
section{padding:70px 0}
.sep{border:0;height:1px;background:var(--linea)}

.kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--marca-2);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:500;font-size:16px;letter-spacing:-.01em;
  background:var(--c);color:#fff;padding:15px 26px;border:0;border-radius:100px;
  cursor:pointer;box-shadow:0 10px 26px -14px var(--c);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 16px 32px -14px var(--c)}
.btn-linea{background:transparent;color:var(--tinta);border:1px solid var(--linea);box-shadow:none}
.btn-linea:hover{border-color:var(--tinta);filter:none}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(250,251,250,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.cabecera .logo{height:26px;width:auto}
.cabecera nav{display:flex;gap:22px;font-size:15px;color:var(--tinta-suave)}
.cabecera nav a:hover{color:var(--marca)}
@media(max-width:620px){.cabecera .logo{height:22px}.cabecera nav{gap:16px;font-size:14px}}

/* ---------- Pie ---------- */
.pie{background:var(--papel-2);border-top:1px solid var(--linea);padding:44px 0;font-size:14.5px;color:var(--tinta-suave)}
.pie .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.pie .logo{height:24px;width:auto;margin-bottom:8px}
.pie a:hover{color:var(--marca)}
.pie-enlaces{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Captura de correo ---------- */
.capta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.capta input{
  flex:1 1 240px;font:inherit;font-size:16px;padding:15px 18px;border-radius:100px;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);
}
.capta input:focus{outline:none;border-color:var(--c)}
.capta input::placeholder{color:#9AACA5}
.capta .aviso{flex:1 1 100%;font-size:13.5px;color:var(--tinta-suave);margin-top:2px}