/* ============================================================
   MARC Perú 2026 — base, tokens, cabecera, pie y componentes
   Paleta muestreada de los mockups (NUESTRA HISTORIAai_INICIO.jpg)
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --azul: #1F346B;          /* botones y titulares */
  --azul-oscuro: #1F346D;   /* footer y franjas */
  --gris-fondo: #F2F2F2;
  --gris-tarjeta: #CCCCCC;
  --gris-tab: #E6E6E6;
  --barra-negra: #1A1A1A;
  --blanco: #FFFFFF;
  --texto: #1A1A1A;
  --radio: 24px;
  --radio-tarjeta: 32px;
  --ancho: 1200px;
  --fuente: "Montserrat", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--gris-fondo);
}
img { max-width: 100%; height: auto; }
a { color: var(--azul); }

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }

/* ---- Botones píldora ---- */
.boton {
  display: inline-block;
  background: var(--azul);
  color: var(--blanco);
  border: 0;
  border-radius: 999px;
  padding: 12px 32px;
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: filter .2s;
}
.boton:hover { filter: brightness(1.18); }
.boton--claro { background: var(--blanco); color: var(--azul); }
.boton--claro:hover { filter: brightness(.95); }

/* ---- Cabecera: hero + píldora de navegación ---- */
.hero {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  color: var(--blanco);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, .45);
}
.hero > * { position: relative; }
.hero__titulo {
  margin: auto;
  padding: 48px 24px 64px;
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 700;
  text-align: center;
}

.cabecera { padding: 28px 24px 0; }
.cabecera__pildora {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(120, 120, 120, .55);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 10px 36px 10px 14px;
}
.cabecera__logo img { display: block; height: 72px; width: auto; }
.cabecera__nav { flex: 1; }
.cabecera__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 32px);
}
.cabecera__nav a {
  color: var(--blanco);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 2px;
  display: inline-block;
}
.cabecera__nav .current-menu-item > a,
.cabecera__nav .current_page_item > a { font-weight: 800; }
.cabecera__redes { display: flex; gap: 18px; align-items: center; }
/* Iconos en blanco sobre la píldora traslúcida (ajuste de mkt 7-sep) */
.cabecera__redes img { height: 22px; width: 22px; display: block; filter: brightness(0) invert(1); }
.cabecera__boton-menu {
  display: none;
  background: none;
  border: 0;
  color: var(--blanco);
  font-size: 26px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---- Pie ---- */
.pie { background: var(--azul-oscuro); color: var(--blanco); }
.pie__contenido {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 40px 24px;
  display: grid;
  /* Sin logo (mkt pidio retirarlo el 7-sep): datos + los dos botones */
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: center;
}
.pie__datos { display: grid; gap: 10px; font-size: 14px; font-weight: 600; }
.pie__datos a { color: var(--blanco); text-decoration: none; }
.pie__dato { display: flex; align-items: flex-start; gap: 10px; }
.pie__dato img { height: 20px; width: 20px; margin-top: 2px; filter: brightness(0) invert(1); }
.pie .boton--claro { padding: 14px 40px; font-size: 13px; }
.pie__copy {
  background: var(--barra-negra);
  text-align: center;
  font-size: 12px;
  padding: 10px 24px;
  color: #dddddd;
}

/* ---- Tarjeta base ---- */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}

/* ---- Accesibilidad y movimiento ---- */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Móvil ---- */
@media (max-width: 1023px) {
  .cabecera { padding: 16px 16px 0; }
  .cabecera__pildora { border-radius: 32px; flex-wrap: wrap; gap: 8px; padding: 10px 18px; }
  .cabecera__logo img { height: 52px; }
  .cabecera__boton-menu { display: block; margin-left: auto; }
  .cabecera__redes { display: none; }
  .cabecera__nav { display: none; flex-basis: 100%; }
  .cabecera__nav.abierto { display: block; }
  .cabecera__nav ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .cabecera__nav a { padding: 12px 6px; display: block; min-height: 44px; }
  .pie__contenido { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
  .pie__dato { text-align: left; }
}