/* =================================================================
   Los libros de [Autor] — hoja de estilos
   Paleta: papel salvia frío + tinta bosque + vino y latón como acentos.
   Tipografía: Fraunces (titulares) + Karla (texto) + IBM Plex Mono (cifras).
   ================================================================= */

:root {
  /* Encuadre de la foto de marca de agua (biografia-3), usado en los
     cuatro sitios donde aparece (bienvenida, libros, cabecera y barra
     de abajo): con "center" se centra la foto entera, pero si la
     persona/libro de la foto no queda en el centro exacto del
     encuadre, este es el único valor a tocar (p.ej. "center 20%" para
     subir el encuadre y no cortar la cabeza). Se ajusta en un único
     sitio para que cambie a la vez en los cuatro bloques. */
  --marca-agua-posicion: center;
  --bg: #F2F3EE;
  --surface: #FFFFFF;
  --surface-2: #EAEBE2;
  --ink: #1E2A22;
  --ink-soft: #4B5A50;
  --accent: #7C3F42;       /* vino */
  --accent-strong: #632F32;
  --accent-2: #A9822E;     /* latón */
  --line: #DAD9CE;
  --shadow: 0 1px 2px rgba(30, 42, 34, 0.06), 0 8px 24px rgba(30, 42, 34, 0.06);
  --radius: 14px;
  --maxw: 1080px;
  --rojo-aviso: #B23A2E; /* rojo de aviso: "libro no disponible" */
  --rojo-aviso-suave: rgba(178, 58, 46, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121813;
    --surface: #1A221C;
    --surface-2: #212B22;
    --ink: #EDEEE6;
    --ink-soft: #B7BDB0;
    --accent: #E0A2A0;
    --accent-strong: #EAB8B6;
    --accent-2: #E0B25A;
    --line: #2C362D;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --rojo-aviso: #E8695C;
    --rojo-aviso-suave: rgba(232, 105, 92, 0.14);
  }
}

:root[data-theme="dark"] {
  --bg: #121813;
  --surface: #1A221C;
  --surface-2: #212B22;
  --ink: #EDEEE6;
  --ink-soft: #B7BDB0;
  --accent: #E0A2A0;
  --accent-strong: #EAB8B6;
  --accent-2: #E0B25A;
  --line: #2C362D;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --rojo-aviso: #E8695C;
  --rojo-aviso-suave: rgba(232, 105, 92, 0.14);
}

* { box-sizing: border-box; }
html { text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 560; }
.hero-nombre {
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.18;
}
.hero-nombre span { white-space: nowrap; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
a { color: var(--accent-strong); }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.mono, .stat-number, .book-meta, .kicker {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--accent);
  margin-bottom: 0.6em;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 16px;
}
.brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand span { color: var(--accent); }
nav.main-nav { display: flex; gap: 22px; flex-shrink: 0; }
nav.main-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}
nav.main-nav a:hover { color: var(--accent-strong); }

.lang-switch {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px !important;
  font-size: 0.82rem !important;
}
.lang-switch:hover { border-color: var(--accent-strong); }

@media (max-width: 480px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  .brand { font-size: 1rem; }
  nav.main-nav { gap: 14px; }
  nav.main-nav a { font-size: 0.86rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 64px 0 48px;
}
/* Misma marca de agua opcional que en la bienvenida y en las fichas de
   los libros (ver includes/header.php e imagenes.php), con la misma
   intensidad que en las fichas (opacity 0.13). La diferencia es la
   máscara en degradado: la foto se ve completa arriba y se va
   disipando hacia abajo, así que al bajar la página el efecto es que
   la imagen se desvanece en vez de cortarse en seco al llegar al
   siguiente bloque. */
body.tiene-marca-agua .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--marca-agua-foto);
  /* No se usa "cover": con "cover" nunca cabían a la vez la cabeza (con
     margen arriba) y el libro abierto entre las manos, más abajo, en
     el mismo recuadro corto. Con un tamaño fijo por altura se ve
     siempre el mismo tramo de la foto (cabeza + libro), sin depender
     del ancho de la pantalla; a cambio, en pantallas muy anchas puede
     quedar algo de espacio a los lados, disimulado por el degradado de
     abajo. No tocar estos números sin comprobar antes con la foto real
     que seguimos viendo la cabeza completa y el libro. */
  background-size: auto 160%;
  background-position: center 50%;
  background-repeat: no-repeat;
  opacity: 0.17;
  filter: saturate(0.85) sepia(0.08) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse 60% 150% at 50% 45%, #000 55%, transparent 95%);
  mask-image: radial-gradient(ellipse 60% 150% at 50% 45%, #000 55%, transparent 95%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tiene-marca-agua .hero::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }
}
:root[data-theme="dark"] body.tiene-marca-agua .hero::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; }
}

.hero p.tagline { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }

.hero-portrait {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 20px 40px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  text-align: center;
  padding: 24px;
  font-size: 0.85rem;
  overflow: hidden;
}
/* Mientras no hay foto real subida, se mantiene el recuadro con una
   forma fija para el texto de aviso. En cuanto hay foto, el recuadro
   se ajusta a la foto (ver .hero-portrait-foto img abajo), sin
   imponerle ninguna proporción que pueda recortarla. */
.hero-portrait:not(.hero-portrait-foto) { aspect-ratio: 6/5; }
.hero-portrait.hero-portrait-foto { padding: 0; }
.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: var(--radius);
  margin: 0 auto;
}
@media (max-width: 480px) {
  .hero-portrait img { max-height: 360px; }
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.stat-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow);
}
.stat-badge .stat-number { font-size: 1.05rem; font-weight: 600; color: var(--accent-strong); }
.stat-badge .stat-label { font-size: 0.82rem; color: var(--ink-soft); }
.stat-reloj .reloj-icono { font-size: 0.95rem; line-height: 1; align-self: center; }
.stat-reloj .stat-number { font-size: 0.95rem; }

/* ---------- sections ---------- */
section { padding: 56px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.bio-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 760px) { .bio-grid { grid-template-columns: 1fr; } }

.photo-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
/* La primera foto ocupa todo el ancho, arriba del todo. */
.photo-mosaic .ph:first-child { grid-column: 1 / -1; }
.photo-mosaic .ph {
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}
/* Mientras no hay foto real subida, se muestra un recuadro de texto
   con una forma fija. En cuanto hay foto, el recuadro se ajusta a la
   forma natural de la imagen (ver .ph-foto img más abajo), así que
   aquí ya no se le impone ninguna proporción. */
.photo-mosaic .ph:not(.ph-foto) { aspect-ratio: 4/3; }
.photo-mosaic .ph.ph-foto { padding: 0; }
.photo-mosaic .ph img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  border-radius: 10px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .photo-mosaic .ph img { max-height: 260px; }
}

.bio-text .placeholder-note {
  border-left: 3px solid var(--accent-2);
  padding: 4px 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}

.bio-pendiente {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  color: var(--ink-soft);
  background: var(--surface-2);
}
.bio-pendiente p:last-child { margin-bottom: 0; }
.bio-pendiente strong { color: var(--ink); }

/* ---------- books ---------- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
@media (max-width: 700px) { .books-grid { grid-template-columns: 1fr; } }

.book-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  box-shadow: var(--shadow);
}
@media (max-width: 480px) { .book-card { grid-template-columns: 84px 1fr; } }
/* Misma marca de agua opcional que la bienvenida (ver más arriba):
   se queda por detrás de todo el contenido de la ficha (z-index: -1),
   así que nunca tapa ni el texto ni los botones. */
body.tiene-marca-agua .book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--marca-agua-foto);
  background-size: cover;
  background-position: var(--marca-agua-posicion, center);
  opacity: 0.17;
  filter: saturate(0.85) sepia(0.08) brightness(1.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tiene-marca-agua .book-card::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }
}
:root[data-theme="dark"] body.tiene-marca-agua .book-card::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }

/* ---------- libro no disponible: cinta y aviso en rojo, visibles a
   primer golpe de vista ---------- */
.book-card.no-disponible {
  border-color: var(--rojo-aviso);
}
.book-card.no-disponible .cover {
  filter: saturate(0.55) brightness(0.9);
}
.franja-no-disponible {
  position: absolute;
  top: 22px;
  left: -46px;
  width: 180px;
  padding: 6px 0;
  background: repeating-linear-gradient(
    45deg,
    var(--rojo-aviso), var(--rojo-aviso) 10px,
    #F4F1E8 10px, #F4F1E8 20px
  );
  transform: rotate(-40deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.aviso-no-disponible {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--rojo-aviso);
  background: var(--rojo-aviso-suave);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 4px;
}
.aviso-no-disponible .etiqueta {
  font-weight: 700;
  color: var(--rojo-aviso);
  font-size: 0.92rem;
}
.aviso-no-disponible .nota {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.cover {
  aspect-ratio: 2/3;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  color: #F4F1E8;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.15;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
@media (max-width: 480px) { .cover { font-size: 1.25rem; } }
.cover-1 { background: linear-gradient(160deg, #7C3F42, #4B2224); }
.cover-2 { background: linear-gradient(160deg, #38584F, #1E2A22); }
.cover-3 { background: linear-gradient(160deg, #A9822E, #6B5217); }
.cover-4 { background: linear-gradient(160deg, #3D4E68, #202A3A); }
.cover-5 { background: linear-gradient(160deg, #5B4A78, #2C2340); }

.book-meta { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 6px; }
.book-card h3 { margin-bottom: 2px; }
.book-card .subt { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 8px; }
.book-card p.synopsis { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 14px; }

.valoracion {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.valoracion .estrellas {
  color: var(--accent-2);
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.valoracion .valoracion-texto {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- valoración dinámica (votos de quien visita la web) ---------- */
.valoracion-dinamica {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.media-estrellas {
  display: flex;
  align-items: center;
  gap: 8px;
}
.media-estrellas[hidden] { display: none; }

.estrellas-visual {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.estrellas-visual .fondo { color: var(--line); }
.estrellas-visual .relleno {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pct, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--accent-2);
}

.media-texto { font-size: 0.82rem; color: var(--ink-soft); }

.votar-bloque {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.votar-bloque[hidden] { display: none; }

.votar-estrellas {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.votar-estrellas button {
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color 0.1s ease, transform 0.1s ease;
}
.votar-estrellas button:hover,
.votar-estrellas button:hover ~ button {
  color: var(--accent-2);
  transform: scale(1.1);
}
.votar-estrellas button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.votar-estrellas button:disabled {
  cursor: default;
  transform: none !important;
}

.votar-texto { font-size: 0.82rem; color: var(--ink-soft); }

.votar-gracias {
  font-size: 0.82rem;
  color: var(--accent-strong);
  font-style: italic;
  margin: 0 0 14px;
}
.votar-gracias[hidden] { display: none; }

.download-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #FBF3F0;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--accent-strong); transform: translateY(-1px); }
.download-count { font-size: 0.8rem; color: var(--ink-soft); }

.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-share:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
.btn-share.copiado { color: var(--accent-2); border-color: var(--accent-2); }

/* ---------- resumen en audio (generado por IA) ---------- */
.audio-resumen {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.audio-resumen .kicker { margin-bottom: 0.3em; }
.audio-resumen-nota {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 10px;
}
.audio-resumen .btn { padding: 8px 16px; font-size: 0.85rem; }
.audio-resumen .download-count { display: block; margin-top: 8px; }

/* ---------- footer ---------- */
footer.site-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
/* Misma marca de agua opcional que en la cabecera y en las fichas de
   los libros (ver más arriba y includes/header.php): aparece también
   en la barra de abajo de TODAS las páginas (portada, aviso legal,
   privacidad, cookies), con la misma intensidad, sin degradado (al
   ser una franja corta no hace falta que se disipe). Aquí NO se usa
   "cover": esta franja es tan ancha y baja que con "cover" siempre se
   ve la foto entera de lado a lado (ventana, persona y estantería), y
   aquí solo queremos que se vea la estantería. Con un tamaño fijo más
   grande que el propio recuadro y la posición pegada a la derecha, se
   recorta y aleja del lado de la ventana/persona. */
body.tiene-marca-agua footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--marca-agua-foto);
  background-size: 220% auto;
  background-position: 100% 12%;
  opacity: 0.17;
  filter: saturate(0.85) sepia(0.08) brightness(1.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tiene-marca-agua footer.site-footer::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }
}
:root[data-theme="dark"] body.tiene-marca-agua footer.site-footer::before { opacity: 0.20; filter: saturate(0.7) brightness(0.65); }
footer.site-footer .legal-links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
footer.site-footer a { color: var(--ink-soft); }
footer.site-footer a:hover { color: var(--accent-strong); }
footer.site-footer .acceso-privado { margin-top: 6px; }
footer.site-footer .acceso-privado a { font-size: 0.78rem; opacity: 0.6; }
footer.site-footer .acceso-privado a:hover { opacity: 1; }

/* ---------- entry gate (bienvenida antes de entrar) ---------- */
html.entry-gate-abierta { overflow: hidden; }
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Fondo totalmente opaco, del mismo color que el resto de la web:
     mientras no se acepta, no debe verse nada de la página de detrás
     (ni el menú, ni el título, ni nada), solo este color liso. */
  background: var(--bg);
  overflow: hidden;
}
.entry-gate[hidden] { display: none; }
/* Marca de agua opcional (ver includes/header.php): foto propia de
   esta pantalla (la estantería/biblioteca sin nadie, bienvenida-fondo),
   distinta de la que se usa en la cabecera, los libros y la barra de
   abajo. El texto se sigue leyendo sobre un fondo opaco (la tarjeta),
   así que la foto nunca molesta a la lectura, solo se ve alrededor. Al
   no salir su cara, no hace falta ningún encuadre especial: "cover" +
   centrada vale igual en el móvil (muy alto) que en el ordenador (muy
   ancho). */
body.tiene-marca-agua-bienvenida .entry-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--marca-agua-bienvenida);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: saturate(0.85) sepia(0.08) brightness(1.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tiene-marca-agua-bienvenida .entry-gate::before { opacity: 0.20; filter: saturate(0.7) brightness(0.8); }
}
:root[data-theme="dark"] body.tiene-marca-agua-bienvenida .entry-gate::before { opacity: 0.20; filter: saturate(0.7) brightness(0.8); }
.entry-gate-card {
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
  box-shadow: var(--shadow);
  text-align: left;
}
.entry-gate-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 0 0 3px 3px;
}
.entry-gate-card h2 {
  margin: 0.3em 0 0.5em;
  font-size: 1.45rem;
}
.entry-gate-card > p {
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.entry-gate-cita {
  margin: 0 0 24px;
  padding: 10px 16px;
  border-left: 3px solid var(--accent-2);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
.entry-gate-cita p {
  margin: 0 0 6px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
}
.entry-gate-cita cite {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: normal;
}
.entry-gate-card button {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #F4F1E8;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.entry-gate-card button:hover { background: var(--accent-strong); }
@media (max-width: 480px) {
  .entry-gate-card { padding: 26px 20px; }
  .entry-gate-card h2 { font-size: 1.25rem; }
}

/* ---------- privacy notice bar ---------- */
.notice-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  z-index: 50;
}
.notice-bar p { margin: 0; font-size: 0.86rem; }
.notice-bar a { color: var(--bg); text-decoration: underline; }
.notice-bar button {
  background: var(--accent-2);
  color: #241C08;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.notice-bar[hidden] { display: none; }

/* ---------- legal pages ---------- */
.legal-page h2 { margin-top: 1.6em; }
.legal-page section { padding: 0; }
.legal-page .wrap { padding-top: 40px; padding-bottom: 60px; }
.legal-page ul { padding-left: 1.2em; }
.legal-page .updated { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 2em; }