/* CarisMisiones TX — diseño "Fuego": oscuro y cinematográfico. Colores, fuentes y formas. */

:root {
  --bg: #0d0b0a; --bg-alt: #141110; --surface: #181412; --surface-2: #211b18;
  --text: #f4ede6; --heading: #fff8f1; --muted: #b3a79c; --link: #ff8a5c;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.18);
  --primary: #e8452c; --primary-hover: #ff5a3c; --on-primary: #fff;
  --eyebrow: #ffb067; --eyebrow-line: block;
  --em-style: normal; --em-color: #ff7a45;
  --font-head: "Archivo", "Arial Narrow", sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --font-label: "Inter", system-ui, sans-serif; --font-brand: "Archivo", sans-serif; --font-quote: "Archivo", sans-serif;
  --head-weight: 800; --head-tracking: -.01em; --head-tracking-sm: 0; --head-transform: uppercase;
  --brand-tracking: .02em; --brand-transform: uppercase;
  --quote-style: normal; --quote-weight: 700;
  --radius: 16px; --radius-sm: 10px; --radius-lg: 22px;
  --btn-radius: 999px; --btn-tracking: .04em; --btn-transform: uppercase;
  --btn-shadow: 0 10px 30px rgba(232,69,44,.35);
  --shadow-sm: none; --shadow: 0 20px 50px rgba(0,0,0,.5);
  --ghost-bg: rgba(255,255,255,.04);
  --pill-bg: rgba(255,176,103,.14); --pill-text: #ffb067;
  --header-bg: rgba(13,11,10,.82); --header-text: #fff; --header-line: rgba(255,255,255,.06);
  --nav-hover: rgba(255,255,255,.08); --nav-active: #ff8a5c;
  --tab-bg: rgba(16,13,12,.9); --tab-line: rgba(255,255,255,.08); --tab-text: #8f857c; --tab-active: #fff;
  --hero-overlay: linear-gradient(180deg, rgba(13,11,10,.35) 0%, rgba(13,11,10,.2) 35%, rgba(13,11,10,.92) 88%, #0d0b0a 100%);
  --hero-text: #fff; --hero-eyebrow: #ffc078; --hero-ghost-bg: rgba(255,255,255,.08); --hero-ghost-line: rgba(255,255,255,.4);
  --icon-bg: rgba(232,69,44,.14); --icon-color: #ff8a5c;
  --badge-bg: #fff; --badge-text: #0d0b0a; --placeholder-bg: radial-gradient(circle at 50% 40%, #3a1a10, #120e0c);
  --verse-bg: radial-gradient(ellipse at center, #3b1409 0%, #0d0b0a 70%); --verse-text: #fff3e6;
  --cta-solid-bg: linear-gradient(135deg, #e8452c, #b8231a); --cta-solid-text: #fff;
  --input-bg: #120f0e; --focus-ring: rgba(232,69,44,.3);
  --footer-bg: #080706; --footer-text: #cfc4b9; --footer-head: #ffb067; --footer-line: rgba(255,255,255,.1);
  --detail-bg-opacity: .35;
  --hero-pos: center 40%;
}
h1, h2, .hero-title { font-stretch: 78%; }
h2 { font-size: clamp(2rem, 8vw, 3.6rem); }
/* Portada a pantalla completa con encabezado transparente */
body[data-page="inicio"] .topbar { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-page="inicio"] .topbar.scrolled { background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero { min-height: calc(100svh - 70px); display: flex; align-items: flex-end; }
.hero-content { padding-top: 140px; padding-bottom: 40px; }
.hero-title { font-size: clamp(3rem, 14vw, 7.5rem); line-height: .92; max-width: 10ch; }
.hero-title em { display: inline-block; padding-right: .06em; background: linear-gradient(90deg, #ff5a3c, #ffb067); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quick { margin-top: 8px; }
.quick a { background: rgba(255,255,255,.035); }
.pillar { background: transparent; border: 0; border-top: 2px solid var(--primary); border-radius: 0; padding-left: 0; padding-right: 0; }
.pillar .num { color: transparent; -webkit-text-stroke: 1.5px #ff8a5c; font-size: 3.4rem; }
.brand-mark { background: #fff; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (min-width: 900px) {
  .hero { min-height: 100vh; }
  .hero-content { padding-bottom: 96px; }
}