/* ============================================================
   Dra. María Eugenia Terán — Radiología Oral y Maxilofacial
   Sistema visual: Medical high-end / clinical editorial
   ============================================================ */

:root {
  /* Accent (overridable via Tweaks) */
  --accent: #0d57a8;
  --accent-bright: #1f7ae0;
  --accent-soft: #e8f0fb;

  /* Clinical neutrals — cool toned */
  --navy: #0a2540;          /* deep clinical blue */
  --navy-2: #0b1c30;        /* darker section bg */
  --ink: #0c1f33;           /* primary text */
  --gray: #51647a;          /* surgical gray text */
  --gray-soft: #8294a6;     /* muted */
  --line: #e2e9f0;          /* hairlines */
  --line-2: #eef2f6;
  --bg: #f6f8fb;            /* clean cool white page */
  --surface: #ffffff;
  --surface-2: #fbfcfe;

  /* Dark surfaces text */
  --on-dark: #eaf1f8;
  --on-dark-soft: #9fb4ca;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --anim-scale: 1;          /* multiplier set by Tweaks (animation intensity) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); width: 100%; }
.section { padding-block: clamp(72px, 11vh, 150px); position: relative; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover { background: var(--accent-bright); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost.on-dark { color: var(--on-dark); border-color: rgba(255,255,255,.22); }
.btn-ghost.on-dark:hover { border-color: var(--accent-bright); color: #fff; }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- image placeholder ---------- */
.ph {
  position: relative;
  background-color: #eef3f8;
  background-image:
    repeating-linear-gradient(135deg, rgba(13,87,168,.05) 0 2px, transparent 2px 11px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph.on-dark {
  background-color: rgba(255,255,255,.03);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 11px);
  border-color: rgba(255,255,255,.12);
}
.ph-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-soft);
  text-align: center;
  padding: 14px 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.7);
  max-width: 80%;
  line-height: 1.5;
}
.ph.on-dark .ph-label { color: var(--on-dark-soft); border-color: rgba(255,255,255,.2); background: rgba(10,30,50,.4); }

/* ---------- reveal animation ----------
   Content is visible by default. Only when JS is active (html.js-reveal)
   do we pre-hide elements, then animate them in via .in. This guarantees
   content never gets stuck invisible if anything goes wrong. */
html.js-reveal .reveal:not(.in) {
  opacity: 0;
  transform: translateY(calc(26px * var(--anim-scale)));
}
html.js-reveal .reveal.in {
  animation: revealIn calc(.8s * var(--anim-scale)) var(--ease) var(--reveal-delay, 0s) both;
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(calc(26px * var(--anim-scale))); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal:not(.in),
  html.js-reveal .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
/* Escape hatch: force everything visible (verification / fallback) */
html.force-reveal .reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- tags / chips ---------- */
.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

/* ---------- divider line accents ---------- */
.hr-fine { height: 1px; background: var(--line); border: 0; }