/* ──────────────────────────────────────────────────────────────────────
 * llamado.de — theme v2 · CSS suplementario
 * El layout/utility lo provee Tailwind (CDN + config en page.hbs, idéntico
 * al diseño Stitch "Explorador Bíblico Digital" / Luz y Verdad). Aquí solo
 * va lo que Tailwind no da: texturas, drop-cap, divisor editorial y el
 * estilado del rich-text (renderRichText emite <p>/<h2>/<blockquote> sin
 * clases). Paleta tomada de la config Stitch.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --primary: #400408;
  --primary-container: #5d1a1a;
  --on-primary: #ffffff;
  --secondary: #7c5730;
  --surface: #fcf9f8;
  --surface-container-low: #f6f3f2;
  --on-surface: #1b1c1c;
  --on-surface-variant: #544241;
}

/* Textura de pergamino (fondo del portal) */
.parchment-texture {
  background-color: #fcf9f8;
  background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
}

/* Degradado del hero hacia el pergamino */
.hero-gradient {
  background: linear-gradient(to bottom, rgba(252, 249, 248, 0.15) 30%, rgba(252, 249, 248, 1) 96%);
}

/* Textura de puntos de la banda "Cronología bíblica" */
.llamado-dot-grid {
  background-image: radial-gradient(#ffffff 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* Heroes editoriales: desktop conserva el encuadre ancho; mobile usa una caja
   más vertical para no perder el sujeto cuando la imagen se recorta. */
.llamado-hero-media,
.llamado-hero-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
.llamado-hero-media {
  object-fit: cover;
  object-position: 50% 38%;
}

@media (max-width: 767px) {
  .llamado-article-hero {
    height: 86svh;
    min-height: 620px;
    max-height: 760px;
  }

  .llamado-article-hero .llamado-hero-media {
    object-position: 50% 34%;
  }

  .llamado-article-hero .llamado-hero-copy {
    padding-bottom: clamp(2rem, 8svh, 4.5rem);
  }

  .llamado-home-hero {
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .llamado-home-hero .llamado-hero-bg {
    height: clamp(320px, 48svh, 460px);
    bottom: auto;
  }

  .llamado-home-hero .llamado-hero-media {
    object-position: 50% 32%;
  }

  .llamado-home-hero .llamado-hero-copy {
    padding-top: clamp(6.75rem, 21svh, 12rem);
  }
}

/* Divisor editorial con rombo */
.editorial-divider::after {
  content: '⬥';
  display: block;
  text-align: center;
  color: var(--primary);
  font-size: 1.2rem;
  margin-top: 1rem;
}

/* Barra de progreso de lectura */
#scroll-progress { width: 0; }

/* ── Rich text (renderRichText → .rt-content) ─────────────────────────── */
.rt-content { color: var(--on-surface-variant); }
.rt-content > p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px; line-height: 1.75; margin: 0 0 2rem;
}
.llamado-article-content.rt-content > p {
  font-size: 18px;
}
.rt-content > p:first-of-type {
  font-size: 20px; line-height: 1.6; color: var(--on-surface-variant);
}
/* Drop-cap en el primer párrafo del cuerpo */
.rt-content.drop-first > p:first-of-type::first-letter {
  float: left; font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 5rem; line-height: 0.78; padding-right: 14px; margin-top: 8px;
  color: var(--primary);
}
.rt-content h2 {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 32px;
  line-height: 1.3; color: var(--primary); margin: 3rem 0 1rem;
}
.rt-content h3 {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 24px;
  color: var(--primary); margin: 2.4rem 0 0.8rem;
}
/* Reading card de versículo: borde izquierdo borgoña + cita display */
.rt-content blockquote {
  margin: 3rem 0; padding: 1rem 0 1rem 1.5rem; border-left: 4px solid var(--primary);
  font-style: italic;
}
.rt-content blockquote p {
  font-family: 'Playfair Display', serif; font-weight: 600; font-size: 28px;
  line-height: 1.25; color: var(--primary); margin: 0;
}
.llamado-article-content.rt-content blockquote p {
  font-family: serif;
  font-weight: 400;
  font-size: 20px;
}
.rt-content ul, .rt-content ol { margin: 0 0 2rem; padding-left: 1.4rem; }
.rt-content li { font-family: 'Source Serif 4', serif; line-height: 1.7; margin-bottom: 0.5rem; }
.rt-content a { color: var(--primary); text-decoration: underline; }
.rt-content img { width: 100%; height: auto; margin: 2rem 0; border-radius: 0.25rem; }
.rt-content hr {
  border: none; height: 1px; background: rgba(124,87,48,0.2); margin: 3rem auto; width: 100%;
}
.rt-content .rt-table-scroll {
  width: 100%;
  margin: 2rem 0;
  overflow-x: auto;
  border: 1px solid rgba(124,87,48,0.22);
  border-radius: 0.25rem;
  background: rgba(255,255,255,0.58);
}
.rt-content table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-surface);
}
.rt-content th, .rt-content td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(124,87,48,0.18);
  vertical-align: top;
}
.rt-content th {
  background: rgba(64,4,8,0.06);
  color: var(--primary);
  font-weight: 700;
}
.rt-content tr:last-child td { border-bottom: 0; }
.rt-content .rt-table__cell--center { text-align: center; }
.rt-content .rt-table__cell--right { text-align: right; }

/* Footer nav/recursos: richtext compacto, un ítem por línea (hereda text-label-sm) */
.footer-links.rt-content > p,
.footer-links.rt-content ul,
.footer-links.rt-content ol { margin: 0 0 0.4rem; }
.footer-links.rt-content > p,
.footer-links.rt-content > p:first-of-type { font-size: 18px; line-height: 1.5; }
.footer-links.rt-content li { line-height: 1.5; margin-bottom: 0.25rem; }
.footer-links.rt-content > *:last-child { margin-bottom: 0; }

.llamado-primary-citations {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.llamado-primary-citations blockquote {
  margin: 0;
  padding: 0;
  border-left: 0;
  font-style: normal;
}
.llamado-primary-citations blockquote p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 0.45rem 0 0;
}
.llamado-primary-citations blockquote p:first-child {
  font-family: 'Source Sans 3', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.35;
  color: var(--on-surface);
  margin-top: 0;
}
.llamado-primary-citations blockquote p:first-child strong {
  font-weight: 700;
}

/* Envuelve el reference_list; las columnas las da su ul.field__items--grid */
.llamado-related-grid > * { min-width: 0; width: 100%; }

/* ── Top-nav: links sin separador, estado activo subrayado ────────────── */
#top-nav nav { gap: 0; }
#top-nav nav .nav-link {
  display: inline-flex;
  align-items: center;       /* texto centrado en el link de alto completo */
  color: var(--on-surface-variant);
  padding: 0 11px;
  border-bottom: 3px solid transparent;   /* indicador tipo tab al pie del header */
  line-height: 1.1;
  flex: 0 0 auto;            /* no encoger: scroll horizontal en vez de amontonar */
}
#top-nav nav .nav-link:first-child { padding-left: 0; }

/* Scroll horizontal del menú cuando no caben las secciones: barra oculta,
   arrastre con mouse (JS), touch y gesto de touchpad nativos.
   El layout (display/flex/nowrap) se maneja acá — no en clases Tailwind —
   para garantizar una sola línea con scroll en vez de envolver. */
.nav-scroll {
  display: none;                    /* oculto en móvil */
}
@media (min-width: 768px) {
  .nav-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;          /* links de alto completo → línea activa al pie */
    white-space: nowrap;            /* red de seguridad si algún hijo cae como inline */
    overflow-x: auto;
    overflow-y: hidden;
  }
}
.nav-scroll > * { flex: 0 0 auto; }
.nav-scroll {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge legacy */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  scroll-behavior: smooth;
}
.nav-scroll::-webkit-scrollbar { display: none; }   /* WebKit/Blink */
.nav-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.nav-scroll.is-dragging .nav-link { pointer-events: none; }   /* no disparar click al arrastrar */
/* Fade en el borde derecho mientras quede contenido por desplazar. */
.nav-scroll.has-overflow-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
#top-nav nav .nav-link:hover { color: var(--secondary); }
#top-nav nav .nav-link.is-active {
  color: var(--primary);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

/* ── Drawer móvil de secciones (solo <768px) ──────────────────────────── */
.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: min(82vw, 320px);
  display: flex; flex-direction: column;
  background: var(--surface, #fcf9f8);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; min-height: 5rem;
  border-bottom: 1px solid rgba(124, 87, 48, 0.2);
}
.mobile-drawer__nav { display: flex; flex-direction: column; padding: 0.5rem 0; }
.mobile-drawer .nav-link {
  display: block;
  padding: 0.9rem 1.4rem;
  color: var(--on-surface-variant);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem; line-height: 1.2;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(124, 87, 48, 0.08);
  white-space: normal;            /* en columna sí puede envolver */
}
.mobile-drawer .nav-link:hover { color: var(--secondary); background: rgba(124, 87, 48, 0.04); }
.mobile-drawer .nav-link.is-active {
  color: var(--primary); font-weight: 700;
  border-left-color: var(--primary);
  background: rgba(64, 4, 8, 0.05);
}
.mobile-drawer-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
/* Refuerzo: nunca mostrar el drawer en desktop. */
@media (min-width: 768px) {
  .mobile-drawer, .mobile-drawer-overlay { display: none !important; }
}

/* ── Grids de tarjetas (reference_list → .field__items--grid) ─────────── */
.field--reference-list { width: 100%; }
.field__head { margin: 0 0 1rem; }
.field__items { list-style: none; margin: 0; padding: 0; }
.field__item { margin: 0; }
.field__items--grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
/* Home "Últimos estudios": 2 columnas */
@media (min-width: 768px) {
  [data-content-type="mix-list"] .field__items--grid { grid-template-columns: repeat(2, 1fr); }
}
/* Home "Lista secundaria": 3 columnas */
@media (min-width: 768px) {
  [data-content-type="mix-list-secondary"] .field__items--grid { grid-template-columns: repeat(3, 1fr); }
}
/* Secciones: hasta 3 columnas */
@media (min-width: 640px) {
  [data-content-type="section-page"] .field__items--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  [data-content-type="section-page"] .field__items--grid { grid-template-columns: repeat(3, 1fr); }
}
/* Lecturas relacionadas (detalle de artículo): 2 columnas desde tablet */
@media (min-width: 768px) {
  [data-content-type="article"] .field__items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* label técnico del campo dentro de las bandas: ruido, se oculta */
[data-content-type="mix-list"] .field__head,
[data-content-type="mix-list-secondary"] .field__head,
[data-content-type="section-page"] .field__head,
[data-content-type="article"] .field__head { display: none; }

/* media-img / campos media dentro de cajas con aspect ratio fijo */
.media-fill img, .media-fill video,
.field--media img, .field__media-image, .field__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Galería: masonry por columnas */
.gallery-masonry { columns: 3; column-gap: 1rem; }
.gallery-masonry .field__image,
.gallery-masonry figure { break-inside: avoid; margin: 0 0 1rem; }
.gallery-masonry img { width: 100%; height: auto; border-radius: 0.25rem; display: block; }
@media (max-width: 1024px) { .gallery-masonry { columns: 2; } }
@media (max-width: 640px)  { .gallery-masonry { columns: 1; } }

/* Overlay de búsqueda (reusa el JS) */
.search-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 14vh;
  background: rgba(252,249,248,0.85); backdrop-filter: blur(16px);
}
.search-panel {
  width: min(680px,92vw); background: #fff; padding: 2.5rem;
  border: 1px solid rgba(124,87,48,0.2); box-shadow: 0 24px 64px -32px rgba(64,4,8,0.4);
}
.search-panel .head { display:flex; justify-content:space-between; font-family:'Source Sans 3',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-surface-variant); margin-bottom:1rem; }
.search-panel input { width:100%; border:none; border-bottom:1px solid rgba(124,87,48,0.4); outline:none; background:transparent; font-family:'Playfair Display',serif; font-style:italic; font-size:32px; color:var(--on-surface); padding:.6rem 0; }
.search-panel input:focus { border-color: var(--primary); }
.search-result { display:grid; grid-template-columns:80px 1fr auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid rgba(124,87,48,0.12); color:inherit; }
.search-result .sec { font-family:'Source Sans 3',sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); }
.search-result .ttl { font-family:'Playfair Display',serif; font-size:18px; color:var(--on-surface); }
.search-result:hover .ttl { color: var(--primary); }
.search-empty { padding:2rem 0; text-align:center; font-family:'Playfair Display',serif; font-style:italic; color:var(--on-surface-variant); }
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:.9rem 1.5rem; font-family:'Source Sans 3',sans-serif; font-size:12px; letter-spacing:.06em; z-index:300; }
.share-pop { position:fixed; background:#fff; border:1px solid rgba(124,87,48,0.2); box-shadow:0 12px 48px rgba(64,4,8,0.16); padding:1.25rem; z-index:220; width:280px; font-family:'Source Sans 3',sans-serif; font-size:12px; }
.share-pop ul { list-style:none; margin:0; padding:0; }
.share-pop li { display:flex; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid rgba(124,87,48,0.12); cursor:pointer; }
.share-pop li:hover { color: var(--primary); }
.llamado-social-link svg { width: 18px; height: 18px; display: block; }
.contact-page, .search-page {
  max-width: 900px; margin: 0 auto; padding: 6rem 1.5rem 8rem;
}
.contact-page h1, .search-page h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05; color: var(--primary); margin: 0 0 1.5rem;
}
.contact-page__intro, .search-page__intro {
  font-family: 'Source Serif 4', serif; font-size: 1.25rem; line-height: 1.6;
  color: var(--on-surface-variant); max-width: 64ch; margin-bottom: 2.5rem;
}
.contact-form, .search-form { display: grid; gap: 1rem; max-width: 680px; }
.contact-form__input, .contact-form__textarea, .search-form__input {
  width: 100%; border: 1px solid rgba(124,87,48,0.22); background: #fff;
  color: var(--on-surface); padding: .95rem 1rem; font: inherit;
}
.contact-form__textarea { min-height: 180px; resize: vertical; }
.contact-form__button, .search-form__button {
  justify-self: start; border: 0; background: var(--primary); color: #fff;
  padding: .9rem 1.4rem; font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.search-results-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; }
.search-results-list a { display: block; padding: 1.25rem; background: #fff; border: 1px solid rgba(124,87,48,0.14); color: inherit; }
.search-results-list strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--primary); }
.search-results-list span { display: block; margin-top: .45rem; color: var(--on-surface-variant); }

/* ── Ad slots (posiciones AdSense: box, double_box, leaderboard, sticky, float_banner) ── */
.ad-slot { position: relative; background: var(--surface-container-low); border: 1px solid rgba(124,87,48,0.12); padding: 1rem; text-align: center; overflow: hidden; }
.ad-slot__label { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: .5rem; }
.ad-slot .adsbygoogle { margin: 0 auto; }
/* AdSense <ins>: dimensiones por posición (espejo de FIXED_POSITION_SIZES en buildAdsContextV2.ts) */
.ad-slot .adsbygoogle { display: block; }                    /* responsive: leaderboard/sticky/float */
.ad-slot--box .adsbygoogle,
.ad-slot--double_box .adsbygoogle { display: inline-block; } /* unidad IAB fija */
.ad-slot--box .adsbygoogle { width: 300px; height: 250px; }
.ad-slot--double_box .adsbygoogle { width: 300px; height: 600px; }
/* in-article: unidad fluid dentro del cuerpo, sin marco para no cortar el texto. */
.ad-slot--in_article { background: none; border: none; margin: 2.5rem 0; padding: 0; text-align: center; }
.ad-slot--in_article .adsbygoogle { display: block; text-align: center; min-height: 100px; }
.ad-slot--leaderboard { max-width: 1280px; margin: 0 auto 2rem; padding: 1rem 1.5rem; }
.ad-slot--leaderboard .adsbygoogle { min-height: 90px; }
.ad-slot--box .adsbygoogle { min-height: 250px; }
.ad-slot--double_box .adsbygoogle { min-height: 600px; }
.ad-slot--sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 180; margin: 0; padding: .5rem .75rem; background: #fff; border: none; box-shadow: 0 -8px 32px rgba(64,4,8,0.14); }
.ad-slot--sticky .ad-slot__label { margin-bottom: .25rem; }
.ad-slot--sticky .adsbygoogle { min-height: 50px; }
.ad-slot--float_banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 190; margin: 0; width: min(760px, calc(100vw - 2rem)); background: #fff; border: 1px solid rgba(124,87,48,0.2); box-shadow: 0 12px 48px rgba(64,4,8,0.2); padding: 1rem 1.25rem; }
.ad-slot--float_banner .adsbygoogle { min-height: 90px; }
.ad-slot--float_banner.is-closed { display: none; }
.ad-slot__close { position: absolute; top: .5rem; right: .5rem; background: none; border: none; cursor: pointer; color: var(--on-surface-variant); font-size: 14px; line-height: 1; padding: .25rem; font-family: 'Source Sans 3', sans-serif; }
.ad-slot__close:hover { color: var(--primary); }
@media (min-width: 1024px) {
  /* sticky = anchor pequeño solo para mobile */
  .ad-slot--sticky { display: none; }
}
@media (max-width: 1023px) {
  /* con sticky activo el float cede el bottom en mobile (sticky va antes en el DOM) */
  .ad-slot--sticky ~ .ad-slot--float_banner { display: none; }
}