/* =========================================================
   Contexto Mexicano — Design system
   Paleta: petróleo (#1B3A4B), arena (#F1EAE0), terracota (#C1622D),
           salvia (#5C7A5E)
   Tipografía: 'Playfair Display' (display) + 'Work Sans' (cuerpo/UI)
              + 'JetBrains Mono' (datos, fechas, indicadores)
   Elemento propio: "marco de contexto" (esquinas tipo encuadre)
   y línea de tiempo para contenido histórico.
   ========================================================= */

:root{
  --ink:        #1B3A4B;
  --ink-soft:   #24506a;
  --paper:      #F1EAE0;
  --paper-dim:  #E7DDCC;
  --line:       #D8CBB3;
  --terracota:      #C1622D;
  --terracota-dark: #973F1C;
  --sage:       #5C7A5E;
  --sage-dark:  #3f5940;
  --text:       #242021;
  --muted:      #6b6258;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Work Sans", -apple-system, Segoe UI, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

html{scroll-behavior:smooth;}

body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--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(--terracota);}

/* ---------- Navbar ---------- */
.navbar-cmx{
  background: var(--ink);
  border-bottom: 3px solid var(--terracota);
}
.navbar-cmx .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-cmx .navbar-brand .brand-slogan{
  display:block;
  font-family: var(--mono);
  font-size:.6rem;
  letter-spacing:.08em;
  color: var(--terracota);
  text-transform:uppercase;
  font-weight:400;
}
.navbar-cmx .nav-link{
  color: rgba(241,234,224,.82) !important;
  font-weight:600;
  font-size:.88rem;
  padding:.5rem .65rem !important;
}
.navbar-cmx .nav-link.active,
.navbar-cmx .nav-link:hover{
  color: var(--paper) !important;
  text-decoration: underline;
  text-decoration-color: var(--terracota);
  text-underline-offset: 6px;
}
.navbar-cmx .dropdown-menu{
  background: var(--ink-soft);
  border:1px solid rgba(255,255,255,.1);
}
.navbar-cmx .dropdown-item{
  color: rgba(241,234,224,.85);
}
.navbar-cmx .dropdown-item:hover{
  background: rgba(193,98,45,.18);
  color: var(--paper);
}

/* ---------- Marco de contexto (elemento de firma) ----------
   Esquinas tipo "encuadre" que sugieren mirar algo dentro de su contexto */
.marco{
  position:relative;
  padding: 1.1rem;
}
.marco::before,
.marco::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  border-color: var(--terracota);
  border-style:solid;
  border-width:0;
  opacity:.9;
}
.marco::before{
  top:6px; left:6px;
  border-top-width:3px;
  border-left-width:3px;
}
.marco::after{
  bottom:6px; right:6px;
  border-bottom-width:3px;
  border-right-width:3px;
}
.marco.marco-sage::before,
.marco.marco-sage::after{ border-color: var(--sage); }

.etiqueta-contexto{
  font-family: var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--terracota);
  border:1px solid var(--terracota);
  border-radius:2px;
  padding:.22em .55em;
  display:inline-block;
}
.etiqueta-contexto.tag-sage{ color:var(--sage-dark); border-color:var(--sage); }
.etiqueta-contexto.tag-ink{ color:var(--ink); border-color:var(--ink); }

/* ---------- Hero ---------- */
.hero-cmx{
  background: var(--ink);
  color: var(--paper);
  position:relative;
  overflow:hidden;
  padding: 4.5rem 0 3.5rem;
}
.hero-cmx::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(193,98,45,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,98,45,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:.5;
}
.hero-cmx .hero-inner{ position:relative; z-index:1; }
.hero-cmx .hero-claim{
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height:1.14;
  max-width: 820px;
}
.hero-cmx .hero-claim em{
  font-style: italic;
  color: var(--terracota);
}
.hero-cmx .lead{ color: rgba(241,234,224,.8); max-width:640px; }

/* ---------- Fichas de contexto ---------- */
.card-contexto{
  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-contexto:hover{
  box-shadow: 0 10px 24px rgba(27,58,75,.12);
  transform: translateY(-2px);
}
.card-contexto .card-img-wrap{
  position:relative;
  aspect-ratio: 16/10;
  background: var(--paper-dim);
  overflow:hidden;
}
.card-contexto .card-img-wrap img{
  width:100%; height:100%; object-fit:cover;
}
.card-contexto .card-body{ display:flex; flex-direction:column; flex:1; }
.card-contexto .card-title{
  font-family: var(--serif);
  font-size:1.08rem;
  line-height:1.32;
}
.card-contexto .meta{
  font-family: var(--mono);
  font-size:.7rem;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ---------- Barra antes/ahora (indicadores) ---------- */
.barra-indicador{
  height:8px;
  border-radius:4px;
  background: var(--paper-dim);
  overflow:hidden;
  position:relative;
}
.barra-indicador .relleno{
  height:100%;
  background: var(--terracota);
  border-radius:4px;
}
.barra-indicador.sage .relleno{ background: var(--sage); }

/* ---------- Línea de tiempo (Contexto Histórico) ---------- */
.linea-tiempo{
  position:relative;
  padding-left: 2.2rem;
  border-left: 2px dashed var(--line);
}
.linea-tiempo .evento{
  position:relative;
  padding-bottom: 2.2rem;
}
.linea-tiempo .evento:last-child{ padding-bottom:0; }
.linea-tiempo .evento::before{
  content:"";
  position:absolute;
  left:-2.44rem;
  top:.3rem;
  width:14px; height:14px;
  border-radius:50%;
  background: var(--paper);
  border:3px solid var(--terracota);
}
.linea-tiempo .evento .fecha{
  font-family: var(--mono);
  font-size:.72rem;
  color: var(--terracota-dark);
  letter-spacing:.06em;
}

/* ---------- 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-cmx-primary{
  background: var(--ink); color: var(--paper);
  border-radius:2px; font-weight:600; border:1px solid var(--ink);
}
.btn-cmx-primary:hover{ background: var(--ink-soft); color: var(--paper); }
.btn-cmx-outline{
  border:1px solid var(--ink); color: var(--ink); border-radius:2px; font-weight:600;
}
.btn-cmx-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);
}

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

/* ---------- Footer ---------- */
.footer-cmx{
  background: var(--ink);
  color: rgba(241,234,224,.72);
  padding: 3rem 0 1.5rem;
}
.footer-cmx a{ color: rgba(241,234,224,.78); }
.footer-cmx a:hover{ color: var(--terracota); }
.footer-cmx h6{
  font-family: var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
  color: var(--terracota);
}
.footer-cmx .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(241,234,224,.3);
  border-radius:50%;
  margin-right:.4rem;
}
.social-icon:hover{ border-color: var(--terracota); }

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

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

@media (max-width: 767.98px){
  .hero-cmx{ padding: 3rem 0 2.5rem; }
}