/* ============================================================
   El Rol de los Medios — Landing UI kit styles
   Tokens come from colors_and_type.css
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--sand);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:72px 0}
@media(min-width:760px){section{padding:104px 0}}

/* surfaces */
.bg-sand{background:var(--sand)}
.bg-paper{background:var(--paper)}
.bg-ink{background:var(--ink);color:var(--on-ink)}

/* type helpers */
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.eyebrow.on-ink{color:var(--yellow)}
.display{font-weight:900;font-size:var(--t-display);line-height:.98;letter-spacing:-.025em}
.h1{font-weight:900;font-size:var(--t-h1);line-height:1.02;letter-spacing:-.02em}
.h2{font-weight:900;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.015em}
.h3{font-weight:700;font-size:var(--t-h3);line-height:1.15}
.lead{font-weight:400;font-size:var(--t-lead);line-height:1.5;color:var(--stone-700)}
.lead.on-ink{color:var(--on-ink-mute)}
.body{font-size:17px;line-height:1.65;color:var(--stone-700)}
.body.on-ink{color:var(--on-ink-mute)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;
  border:2px solid var(--ink);border-radius:999px;padding:14px 26px;cursor:pointer;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s var(--ease)}
.btn-accent{background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 rgba(15,17,18,.22)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary:hover{box-shadow:2px 2px 0 rgba(15,17,18,.22)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.btn-sm{padding:10px 18px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;
  border-radius:999px;padding:7px 14px}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip-pink{background:var(--pink-soft);color:#a83258}
.chip-green{background:var(--green-soft);color:#004929}
.chip-navy{background:var(--navy-soft);color:#194f9e}
.chip-yellow{background:var(--yellow-soft);color:#8a5d00}
.chip-outline{background:transparent;border:2px solid var(--ink);color:var(--ink);font-weight:700}

/* logo recolor for dark sections (black SVG -> paper) */
.logo-light{filter:invert(1) sepia(8%) saturate(180%) hue-rotate(355deg) brightness(1.05)}

/* inputs */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:700;font-size:14px}
.input,.select,.textarea{font-family:var(--font-sans);font-size:16px;padding:13px 15px;
  border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.input::placeholder,.textarea::placeholder{color:var(--stone-500)}
.input:focus,.select:focus,.textarea:focus{outline:3px solid var(--pink);outline-offset:2px}
.textarea{resize:vertical;min-height:110px;line-height:1.5}

/* doodle accents */
.doodle{position:absolute;pointer-events:none;opacity:.95}

/* section divider */
.kicker-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.kicker-row .ic{width:26px;height:26px;flex:none}