/* =========================================================
   Fake o Real MX — Design system
   Paleta: tinta (#12213A), papel (#F7F4EC), verde-verificado (#1F8A70),
           rojo-falso (#C0392B), oro-sello (#C9A227)
   Tipografía: 'Source Serif 4' (display) + 'Inter' (cuerpo/UI)
              + 'IBM Plex Mono' (datos, sellos, metadatos)
   ========================================================= */

:root{
  --ink:        #12213A;
  --ink-soft:   #1c3252;
  --paper:      #F7F4EC;
  --paper-dim:  #EFEAE0;
  --line:       #DCD5C4;
  --real:       #1F8A70;
  --real-dark:  #145c4a;
  --fake:       #C0392B;
  --fake-dark:  #8f2a20;
  --gold:       #C9A227;
  --ink-text:   #1B1B1B;
  --muted:      #5b5b52;

  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Inter", -apple-system, Segoe UI, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

html{scroll-behavior:smooth;}

body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-text);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{
  font-family: var(--serif);
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}

a{color: var(--ink);}
a:hover{color: var(--fake);}

/* ---------- Navbar ---------- */
.navbar-forx{
  background: var(--ink);
  border-bottom: 3px solid var(--gold);
}
.navbar-forx .navbar-brand{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--paper) !important;
  display:flex;
  align-items:center;
  gap:.55rem;
}
.navbar-forx .navbar-brand .brand-slogan{
  display:block;
  font-family: var(--mono);
  font-size:.62rem;
  letter-spacing:.08em;
  color: var(--gold);
  text-transform:uppercase;
  font-weight:400;
}
.navbar-forx .nav-link{
  color: rgba(247,244,236,.82) !important;
  font-weight:600;
  font-size:.92rem;
  padding:.5rem .75rem !important;
}
.navbar-forx .nav-link.active,
.navbar-forx .nav-link:hover{
  color: var(--paper) !important;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 6px;
}
.navbar-forx .dropdown-menu{
  background: var(--ink-soft);
  border:1px solid rgba(255,255,255,.1);
}
.navbar-forx .dropdown-item{
  color: rgba(247,244,236,.85);
}
.navbar-forx .dropdown-item:hover{
  background: rgba(201,162,39,.15);
  color: var(--paper);
}

/* ---------- Sello de verificación (signature element) ---------- */
.sello{
  --c: var(--real);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c);
  border:3px solid var(--c);
  border-radius:50%;
  transform: rotate(-8deg);
  position:relative;
  text-align:center;
  line-height:1.05;
  mix-blend-mode:multiply;
  filter: url(#roughen);
}
.sello.sello-fake{ --c: var(--fake); }
.sello-lg{ width:132px; height:132px; font-size:1.05rem; }
.sello-md{ width:90px; height:90px; font-size:.72rem; border-width:2px; }
.sello-sm{ width:64px; height:64px; font-size:.56rem; border-width:2px; }

/* ---------- Hero ---------- */
.hero-forx{
  background: var(--ink);
  color: var(--paper);
  position:relative;
  overflow:hidden;
  padding: 4.5rem 0 3.5rem;
}
.hero-forx::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(201,162,39,.10) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity:.5;
}
.hero-forx .hero-inner{ position:relative; z-index:1; }
.hero-forx .hero-claim{
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height:1.12;
  max-width: 820px;
}
.hero-forx .hero-claim em{
  font-style: italic;
  color: var(--gold);
}
.hero-forx .lead{ color: rgba(247,244,236,.78); max-width:640px; }

/* ---------- Fichas / tarjetas de verificación ---------- */
.card-verificacion{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 4px;
  overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}
.card-verificacion:hover{
  box-shadow: 0 10px 24px rgba(18,33,58,.10);
  transform: translateY(-2px);
}
.card-verificacion .card-img-wrap{
  position:relative;
  aspect-ratio: 16/10;
  background: var(--paper-dim);
  overflow:hidden;
}
.card-verificacion .card-img-wrap img{
  width:100%; height:100%; object-fit:cover;
}
.card-verificacion .sello-corner{
  position:absolute;
  top:10px; right:10px;
}
.badge-veredicto{
  font-family: var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.32em .6em;
  border-radius:2px;
  font-weight:700;
}
.badge-real{ background: rgba(31,138,112,.12); color: var(--real-dark); border:1px solid rgba(31,138,112,.4); }
.badge-fake{ background: rgba(192,57,43,.10); color: var(--fake-dark); border:1px solid rgba(192,57,43,.4); }
.badge-parcial{ background: rgba(201,162,39,.14); color:#8a6d15; border:1px solid rgba(201,162,39,.5); }

.card-verificacion .card-body{ display:flex; flex-direction:column; flex:1; }
.card-verificacion .card-title{
  font-family: var(--serif);
  font-size:1.08rem;
  line-height:1.32;
}
.card-verificacion .meta{
  font-family: var(--mono);
  font-size:.7rem;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ---------- Secciones ---------- */
.section-title{
  font-family: var(--serif);
  border-bottom: 2px solid var(--ink);
  padding-bottom:.5rem;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.section-pad{ padding: 3rem 0; }
.bg-paper-dim{ background: var(--paper-dim); }

.btn-forx-primary{
  background: var(--ink); color: var(--paper);
  border-radius:2px; font-weight:600; border:1px solid var(--ink);
}
.btn-forx-primary:hover{ background: var(--ink-soft); color: var(--paper); }
.btn-forx-outline{
  border:1px solid var(--ink); color: var(--ink); border-radius:2px; font-weight:600;
}
.btn-forx-outline:hover{ background: var(--ink); color: var(--paper); }

.filtro-pill{
  font-family: var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  border:1px solid var(--ink);
  border-radius:20px;
  padding:.35rem 1rem;
  background:transparent;
  color:var(--ink);
}
.filtro-pill.active,
.filtro-pill:hover{
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Metodología / pasos ---------- */
.paso{
  border-left: 3px solid var(--gold);
  padding-left: 1.1rem;
}
.paso .num{
  font-family: var(--mono);
  color: var(--gold);
  font-weight:700;
}

/* ---------- Footer ---------- */
.footer-forx{
  background: var(--ink);
  color: rgba(247,244,236,.72);
  padding: 3rem 0 1.5rem;
}
.footer-forx a{ color: rgba(247,244,236,.78); }
.footer-forx a:hover{ color: var(--gold); }
.footer-forx h6{
  font-family: var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
  color: var(--gold);
}
.footer-forx .brand{
  font-family: var(--serif);
  font-size:1.35rem;
  color: var(--paper);
}
.social-icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,244,236,.3);
  border-radius:50%;
  margin-right:.4rem;
}
.social-icon:hover{ border-color: var(--gold); }

/* ---------- Utilidades ---------- */
.divider-gold{ height:3px; width:64px; background:var(--gold); border:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card-verificacion{ transition:none; }
}

@media (max-width: 767.98px){
  .hero-forx{ padding: 3rem 0 2.5rem; }
  .sello-lg{ width:104px; height:104px; font-size:.85rem; }
}