/* =========================================================
   THE LABS. — BASE STYLESHEET
   Shared across /healthy, /terminos, /privacidad, /contacto.
   Design tokens verified against the PDF Final Commercial.
   ========================================================= */

@font-face {
  font-family: 'DejaVu Sans';
  src: url('/fonts/DejaVuSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DejaVu Sans';
  src: url('/fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Color — verified against PDF Final Commercial pixel samples */
  --warm-white:#FAF9F7;
  --soft-grey:#E8E6E3;
  --stone:#AAA6A2;
  --charcoal:#252426;
  --charcoal-70: rgba(37,36,38,0.7);
  --sage:#A8B9A5;
  --sage-tint: rgba(168,185,165,0.15);
  --placeholder-bg:#FBE39A;

  --font: 'DejaVu Sans', Arial, Helvetica, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --container: 1200px;
  --radius-lg: 24px;
  --radius-sm: 16px;
  --radius-pill: 999px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font);
  background: var(--warm-white);
  color: var(--charcoal);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--font); cursor:pointer; border:none; background:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--charcoal-70); margin-bottom: var(--space-2);
  display:block;
}
h1,h2,h3{ font-weight:700; letter-spacing:-0.25px; line-height:1.15; }
h1{ font-size:56px; letter-spacing:-0.5px; line-height:1.05; }
h2{ font-size:36px; }
h3{ font-size:22px; }
p{ margin:0; }
.section{ padding: var(--space-7) 0; }
.section-tight{ padding: var(--space-6) 0; }
.center{ text-align:center; }
.divider{ height:1px; background: var(--stone); opacity:0.4; border:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding: 0 32px; border-radius: var(--radius-pill);
  font-weight:700; font-size:16px; letter-spacing:0.2px;
  background: var(--charcoal); color: var(--warm-white);
  transition: background 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
  white-space:nowrap;
}
.btn:hover{ background: var(--sage); color: var(--charcoal); }
.btn:active{ transform: scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.btn-block{ width:100%; }
.btn-secondary{
  background:transparent; color:var(--charcoal); border:1px solid var(--charcoal);
  height:48px; padding:0 28px; border-radius:var(--radius-pill); font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-secondary:hover{ background:var(--charcoal); color:var(--warm-white); }

/* Header — shared across all 4 pages */
header.site{
  padding: 20px 0;
  border-bottom: 1px solid var(--soft-grey);
}
header.site .container{
  display:flex; align-items:center; justify-content:space-between;
}
header.site img.logo{ height:20px; width:auto; }
header.site .edition-label{
  font-size:13px; font-weight:700; letter-spacing:0.5px; color:var(--charcoal-70);
}
header.site a.back{ font-size:14px; font-weight:700; color:var(--charcoal-70); text-decoration:none; }
header.site a.back:hover{ color:var(--charcoal); }

/* Footer — shared across all 4 pages */
footer{ background:var(--warm-white); padding: var(--space-5) 0; border-top:1px solid var(--soft-grey); }
footer .footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:var(--space-3); }
footer img.logo{ height:16px; }
footer .footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
footer .footer-links a{ font-size:14px; color:var(--charcoal-70); text-decoration:none; }
footer .footer-links a:hover{ color:var(--charcoal); text-decoration:underline; }
footer .legal{ font-size:13px; color:var(--charcoal-70); display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* Base responsive — applies site-wide */
@media (max-width: 860px){
  h1{ font-size:34px; }
  h2{ font-size:26px; }
  h3{ font-size:18px; }
  body{ font-size:16px; }
  .section{ padding: var(--space-5) 0; }
  .container{ padding:0 20px; }
  footer .footer-top{ flex-direction:column; align-items:flex-start; }
}