/* Shared styles for the legal pages (privacy, terms, text messages).
   Same tokens and self-hosted fonts as the home page: navy and ice blue in English,
   burgundy and gold in Spanish. No third-party font requests. */
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda.woff') format('woff'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('fonts/cinzel.woff') format('woff'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/jost.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --night: #0F1B2D; --night-2: #17263D; --ice: #8AB4CE; --ice-soft: #D9E6EF;
  --paper: #F4F6F9; --white: #FFFFFF; --ink: #14202F; --slate: #44546A; --mist: #B7C3D1; --line: #D6DEE7;
  --frame: var(--ice); --link: #2B5F86;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --text: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --radius: 2px;
}
html[lang="es"] {
  --night: #3B1119; --night-2: #4A1822; --frame: #B08D4A; --link: #7A2433;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font: 400 1rem/1.7 var(--text); background: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* ── Navigation ── */
nav { position: sticky; top: 0; z-index: 100; background: var(--night); color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0.7rem max(1rem, calc((100% - 1160px) / 2 + 2rem));
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--white); }
.nav-logo img { height: 46px; width: auto; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-main { font-family: var(--display); font-size: 1.15rem; color: var(--white); }
.nav-logo-sub { font-size: 0.8rem; color: var(--mist); }
.nav-actions { display: flex; gap: 0.75rem 1.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-back { color: var(--mist); text-decoration: none; font-size: 0.95rem; }
.nav-back:hover { color: var(--white); }
.nav-back[hreflang] { color: var(--white); border: 1px solid rgba(255,255,255,0.4); padding: 0.4rem 0.8rem; border-radius: var(--radius); }
.nav-back[hreflang]:hover { border-color: var(--white); }

/* ── Title band ── */
.page-hero { background: var(--night); color: var(--white); padding: 4rem max(1rem, calc((100% - 46rem) / 2)) 3.5rem; position: relative; }
.page-hero::after { content: ""; position: absolute; left: max(1rem, calc((100% - 46rem) / 2)); bottom: -1px; width: 5rem; height: 3px; background: var(--frame); }
.page-eyebrow { display: block; color: var(--mist); font-size: 0.95rem; margin-bottom: 0.6rem; }
.page-title { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; color: var(--white); }
html[lang="es"] .page-title { letter-spacing: 0.02em; font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.page-meta { color: var(--mist); font-size: 0.92rem; margin-top: 1rem; max-width: 40rem; }
.page-hero .page-meta a { color: var(--white); }

/* ── Reading column ── */
.content { max-width: 48rem; margin: 0 auto; padding: 3.5rem 1rem 5rem; }   /* text lines up with the title above */
.content h2 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--ink);
  margin: 3rem 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
html[lang="es"] .content h2 { font-size: 1.35rem; letter-spacing: 0.02em; border-bottom-color: var(--frame); }
.content h2:first-child { margin-top: 0; }
.content h3 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; color: var(--ink); margin: 2rem 0 0.5rem; }
html[lang="es"] .content h3 { font-size: 1.1rem; letter-spacing: 0.02em; }
.content p { color: var(--slate); margin-bottom: 1rem; }
.content strong { color: var(--ink); font-weight: 500; }
.content ul { list-style: none; margin: 1rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
.content ul li { color: var(--slate); padding-left: 1.4rem; position: relative; }
.content ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.7rem; height: 1px; background: var(--frame); }

.disclaimer-box { background: var(--paper); border-left: 3px solid var(--frame); padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.disclaimer-box p { color: var(--slate); font-size: 0.95rem; margin: 0; }

.contact-box { background: var(--night); color: var(--white); padding: 2rem; margin-top: 3.5rem; }
.contact-box h3 { color: var(--white); margin: 0 0 0.75rem; }
.contact-box p { color: var(--mist); margin: 0; }
.contact-box a { color: var(--white); }

/* Text-message page: verbatim scripts, screenshots, program details */
.script { border-left: 2px solid var(--frame); background: var(--paper); padding: 1rem 1.25rem; margin: 0.75rem 0 1.25rem; }
.script p { margin: 0 0 0.5rem; color: var(--ink); }
.script p:last-child { margin-bottom: 0; }
.script .who { display: block; color: var(--slate); font-size: 0.85rem; margin-bottom: 0.3rem; }
.content figure { margin: 1rem 0 2rem; }
.content figure img { width: 100%; max-width: 640px; height: auto; border: 1px solid var(--line); }
.content figcaption { font-size: 0.85rem; color: var(--slate); margin-top: 0.5rem; }
.content dl { margin: 1rem 0 1.5rem; display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 0.6rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.content h2 + dl { border-top: 0; padding-top: 0.5rem; }
.content dt { color: var(--slate); font-size: 0.92rem; }
.content dd { color: var(--ink); margin: 0; }

/* ── Footer ── */
footer { background: var(--night); color: var(--mist); padding: 2.5rem max(1rem, calc((100% - 1160px) / 2 + 2rem));
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; font-size: 0.9rem; }
.footer-links { display: flex; gap: 0.6rem 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--mist); text-decoration: none; }
.footer-links a:hover { color: var(--white); }

@media (max-width: 640px) {
  .nav-logo-text { display: none; }
  .nav-back { font-size: 0.88rem; }
  .page-hero { padding-top: 3rem; padding-bottom: 2.75rem; }
  .content { padding-top: 2.5rem; }
  .content dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .content dd { margin-bottom: 0.7rem; }
  footer { flex-direction: column; align-items: flex-start; }
}