:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-tint: #EEF1E6;
  --ink: #172018;
  --ink-soft: #4B564C;
  --ink-faint: #838E7E;
  --border: #DEE2D2;
  --border-soft: #E9ECE0;
  --brand: #16342A;
  --brand-2: #3E7C5A;
  --brand-soft: #E3EBE1;
  --amber: #A66A1E;
  --amber-soft: #F6ECD9;
  --amber-border: #E3CDA0;
  --danger: #A83A32;
  --danger-soft: #FBE8E4;
  --shadow-sm: 0 1px 2px rgba(15,25,17,0.05), 0 1px 1px rgba(15,25,17,0.03);
  --shadow-card: 0 1px 2px rgba(15,25,17,0.04), 0 12px 28px rgba(15,25,17,0.07);
  --shadow-md: 0 4px 12px rgba(15,25,17,0.07), 0 24px 48px rgba(15,25,17,0.11);
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'Fraunces', Georgia, serif; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 90px; }
::selection { background: var(--brand-2); color: #fff; }
a { color: var(--brand-2); text-underline-offset: 2px; }

/* ---------- Header ---------- */
header.top {
  padding: 26px 0 8px;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--bg) 78%, transparent);
  /* El logo está posicionado absoluto (centrado) y ya no aporta altura al
     flex — sin esto, en desktop el header se encoge al alto de los pills y
     el logo se sale un poco por arriba/abajo. */
  min-height: 50px;
}
/* El logo va centrado de verdad en el header, sin importar si los pills de
   la derecha están o no (se ocultan en móvil) — por eso se saca del flujo
   flex con position:absolute en vez de depender de space-between, que solo
   "centra" cuando hay algo del mismo peso visual del otro lado. */
header.top .marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
header.top .icono-app {
  width: 42px; height: 42px; flex-shrink: 0; display: block;
  border-radius: 22%; object-fit: cover;
  box-shadow: var(--shadow-sm);
}
header.top .nombre { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-family: 'Fraunces', Georgia, serif; }
header.top nav.pildoras { display: flex; gap: 4px; background: var(--surface); padding: 5px; border-radius: 999px; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); }
header.top nav.pildoras a {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 8px 14px 8px 10px; border-radius: 999px; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
header.top nav.pildoras a svg { width: 17px; height: 17px; flex-shrink: 0; }
header.top nav.pildoras a:hover { background: var(--surface-tint); color: var(--ink); }
header.top nav.pildoras a.activa { background: var(--brand); color: #fff; }

/* ---------- Barra de navegación móvil (tipo app, fija abajo) ---------- */
.tabbar { display: none; }
@media (max-width: 640px) {
  header.top nav.pildoras { display: none; }
  /* Sin los pills, el logo centrado queda solo en el header — se agranda un
     poco para que se sienta como la cabecera de una app, no un ícono suelto. */
  header.top { min-height: 56px; padding: 22px 0 14px; }
  header.top .icono-app { width: 56px; height: 56px; border-radius: 24%; }
  .wrap { padding-bottom: 110px; }
  .tabbar {
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 24px rgba(15,25,17,0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 10px 4px 9px; text-decoration: none; color: var(--ink-faint);
    font-size: 11px; font-weight: 600; position: relative;
  }
  .tabbar a svg { width: 21px; height: 21px; transition: transform 0.15s ease; }
  .tabbar a.activa { color: var(--brand-2); }
  .tabbar a.activa svg { transform: translateY(-1px); }
  .tabbar a.activa::before {
    content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-2);
  }
}

/* ---------- Hero ---------- */
.hero { padding: 26px 0 6px; position: relative; }
.hero .hoja-decorativa {
  position: absolute; right: -18px; top: -10px; font-size: 120px; line-height: 1;
  opacity: 0.06; transform: rotate(14deg); pointer-events: none; user-select: none;
}
nav.migas { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }
nav.migas a { color: var(--ink-faint); text-decoration: none; }
nav.migas a:hover { color: var(--brand-2); text-decoration: underline; }

h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(30px, 6vw, 42px); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--brand); text-wrap: balance; }
.subtitulo { color: var(--ink-soft); font-size: 16px; max-width: 52ch; margin: 0 0 22px; }
.actualizado {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand-2);
  background: var(--brand-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 36px;
}

/* ---------- Aviso ---------- */
.aviso {
  background: var(--amber-soft); border: 1px solid var(--amber-border); color: #6B4A16;
  border-radius: var(--radius-md); padding: 16px 18px; font-size: 13.5px; margin-bottom: 28px;
  display: flex; gap: 10px; align-items: flex-start; line-height: 1.55;
}
.aviso .ico { flex-shrink: 0; font-size: 17px; margin-top: 1px; }

/* ---------- Secciones ---------- */
.secciones { display: flex; flex-direction: column; gap: 18px; }
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tarjeta:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

h2 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0 0 10px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.005em; }
h2 .n {
  font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 600; color: var(--brand-2);
  background: var(--brand-soft); width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
ul { margin: 10px 0 0; padding-left: 0; list-style: none; }
li { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 9px; padding-left: 22px; position: relative; line-height: 1.55; }
li::before { content: '•'; color: var(--brand-2); position: absolute; left: 4px; font-weight: 700; }
li:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }

/* ---------- Footer ---------- */
footer.pie {
  text-align: center; color: var(--ink-faint); font-size: 13px; margin-top: 48px;
  padding-top: 28px; border-top: 1px solid var(--border-soft);
}
footer.pie a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
footer.pie a:hover { color: var(--brand-2); text-decoration: underline; }
footer.pie .sep { color: var(--border); margin: 0 8px; }