/* ============================================================
   PUENTE DE DISEÑO — conecta las páginas editoriales (blog,
   blog-posts, enfermedades) con el sistema visual de styles.css
   + refresh.css, para que compartan colores, tipografía y marca.
   ============================================================ */

:root {
  --ink:   var(--clr-ink);
  --blue:  var(--clr-primary);
  --muted: var(--clr-text-muted);
  --wash:  var(--clr-bg-soft);
  --line:  var(--clr-border);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--blue); color: #fff; padding: 12px 20px;
  border-radius: 999px; font-weight: 700; font-size: .85rem;
  transition: top .25s var(--ease-spring, ease);
}
.skip-link:focus { top: 12px; }

.section-label {
  display: inline-block; font-size: .8rem; font-weight: 700;
  color: var(--blue); background: var(--clr-accent-lt);
  border: 1px solid #dbe6ff; border-radius: 999px;
  padding: 4px 14px; letter-spacing: 0; text-transform: none;
}

.button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-ui); font-weight: 700; font-size: .95rem;
  background: var(--blue); color: #fff; border: 0;
  border-radius: 999px; padding: .8em 1.8em;
  box-shadow: 0 10px 24px rgba(31,100,244,.28);
  transition: transform .32s var(--ease-spring, ease), background .3s, box-shadow .3s;
  cursor: pointer; white-space: nowrap;
}
.button:hover { background: var(--clr-cta-hover); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(31,100,244,.36); }
.button span { transition: transform .3s var(--ease-spring, ease); }
.button:hover span { transform: translate(3px,-2px); }
.button--outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); box-shadow: none; }
.button--outline:hover { background: var(--blue); color: #fff; }
.button--light { background: #fff; color: var(--blue); box-shadow: 0 10px 24px rgba(6,16,44,.16); }
.button--light:hover { background: #fff; color: var(--clr-cta-hover); transform: translateY(-2px); }

.care-invitation .section-label { background: none; border: 0; color: rgba(255,255,255,.85); }

/* Un poco más de profundidad en las páginas editoriales, sin perder legibilidad */
.journal-feature { box-shadow: 0 24px 60px rgba(11,18,32,.08); border-radius: 22px; }
.story-card__art { box-shadow: 0 10px 28px rgba(11,18,32,.08); }
.story-card { transition: transform .35s var(--ease-spring, ease); }
.conditions-directory, .care-invitation { box-shadow: 0 20px 50px rgba(11,18,32,.06); }
.reading-sidebar__contact { box-shadow: 0 14px 34px rgba(11,18,32,.08); }
.condition { transition: background-color .3s, border-radius .3s; border-radius: 0; }
.condition[open] { background: var(--wash); border-radius: 16px; padding-inline: 16px; margin-inline: -16px; border-bottom-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .story-card:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .condition { transition: none; }
}

/* Reveal on scroll (usado por app.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease-spring, ease), transform .65s var(--ease-spring, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}