/* =====================================================================
   Tema TIRO CON ARCO — Federación Navarra de Tiro con Arco / Nafarroako Arku Tiraketa Federazioa
   Piel: colores, tipografías y fondo gráfico. Se carga después de temas/comun/css/tema.css.

   Dirección "Diana": la tinta negra del logotipo de 2025 (el arquero y «FNTA NATF») y el verde de la
   federación (el lima de la web anterior, afinado: verde campo para lo que lleva texto blanco, lima
   solo como luz sobre el oscuro). Barlow Condensed en titulares, como el «FNTA NATF» del logotipo,
   y Barlow en el texto. Rasgos del deporte, discretos y siempre de fondo:
     * los anillos de la diana (oro en el centro) en las cabeceras interiores y en «Mejores resultados»;
     * la diana sobre su parapeto en el campo, con tres flechas, en los contenidos sin foto.
   ===================================================================== */

:root {
    --mt-ink: #141a14;
    --mt-ink-soft: #535d50;
    --mt-bg: #f3f5f0;
    --mt-surface: #ffffff;
    --mt-line: #dde3d6;
    --mt-night: #141a14;
    --mt-night-2: #24321f;
    --mt-accent: #3f7d1c;
    --mt-accent-dark: #2f5f14;
    --mt-accent-soft: #b8e27a;
    --mt-brand: #141a14;
    --mt-radius: 4px;
    --mt-max: 1240px;
    --mt-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --mt-font-body: "Barlow", system-ui, sans-serif;
    /* colores derivados (sobre fondo oscuro, pie, etiquetas...) */
    --mt-on-night: #d5dccf;
    --mt-on-night-strong: #f2f5ee;
    --mt-on-night-soft: #c3ccbc;
    --mt-on-night-mute: #95a08f;
    --mt-on-night-faint: #56614f;
    --mt-night-line: #354232;
    --mt-night-divider: #2a3527;
    --mt-footer-bg: #111611;
    --mt-footer-ink: #bcc5b6;
    --mt-footer-line: #283226;
    --mt-accent-tint: #eef6e3;
    --mt-accent-tint-line: #cfe5b2;
    --mt-tag-bg: #e7ede0;
    --mt-tag-club-bg: #fbf2d6;
    --mt-tag-club-ink: #7a5a06;
    --mt-date-past: #d6ddcf;
    --mt-zebra: #f8faf5;
    --mt-shadow-rgb: 20, 26, 20;
    /* el lima de la federación y el oro del centro de la diana */
    --arco-lima: #a3d94f;
    --arco-oro: #f4c51c;
}

/* ---------- Cabecera: el emblema del logotipo y el nombre en los dos idiomas ---------- */
.mt-marca { display: flex; align-items: center; gap: 18px; min-width: 0; color: var(--mt-ink); }
.mt-marca:hover, .mt-marca:focus { color: var(--mt-ink); }
.mt-arco .mt-header .mt-marca img { height: 82px; width: auto; }
.mt-marca__texto { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 1px solid var(--mt-line); }
.mt-marca__nombre { font: 700 25px/1 var(--mt-font-display); letter-spacing: .02em; text-transform: uppercase; }
.mt-marca__sub { font: italic 400 15px/1.15 var(--mt-font-body); color: var(--mt-ink-soft); }
.mt-arco .mt-header__brand { min-height: 108px; }

/* ---------- Barra superior y menú: tinta; el activo, subrayado en lima ---------- */
.mt-arco .mt-topbar { font-size: 13px; border-bottom: 1px solid var(--mt-night-divider); }
.mt-arco .mt-topbar .mt-wrap { min-height: 36px; }
.mt-arco .mt-nav > ul > li > a { font: 600 17px/1 var(--mt-font-display); letter-spacing: .06em; text-transform: uppercase; }
.mt-arco .mt-nav > ul > li:hover > a, .mt-arco .mt-nav > ul > li:focus-within > a,
.mt-arco .mt-nav > ul > li.is-active > a { border-bottom-color: var(--arco-lima); }
.mt-arco .mt-mega { border-top-color: var(--arco-lima); }
.mt-arco .mt-mega .mt-has-sub > a { color: var(--mt-accent-dark); }

/* ---------- Carrusel ---------- */
.mt-arco .mt-hero__dots button[aria-current="true"] { background: var(--arco-lima); }

/* ---------- Portada sin carrusel (PortadaCabecera.ascx): el nombre y los Destacados sobre la diana ---------- */
.ar-campo { position: relative; overflow: hidden; padding: 60px 0 108px; color: #fff;
    background: radial-gradient(120% 140% at 80% 30%, var(--mt-night-2) 0, var(--mt-night) 62%); }
.ar-campo::before { content: ""; position: absolute; top: 50%; right: calc(50% - 760px); width: 820px; aspect-ratio: 1; transform: translateY(-46%);
    background: url("/temas/arco/diana-anillos.svg") center / contain no-repeat; opacity: .9; pointer-events: none; }
.ar-campo .mt-wrap { position: relative; }
.ar-campo__otro { margin: 0 0 14px; font: italic 400 17px/1.2 var(--mt-font-body); color: var(--arco-lima); }
.ar-campo h1 { max-width: 20ch; margin: 0; font: 700 clamp(44px, 6vw, 80px)/.95 var(--mt-font-display); letter-spacing: .005em; text-transform: uppercase; color: #fff; }
.ar-campo h1 span { display: block; color: var(--arco-lima); }
.ar-destacados ul { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; }
.ar-destacados li { border-top: 1px solid rgba(163, 217, 79, .4); }
.ar-destacados a { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; height: 100%; padding: 13px 22px 13px 0; color: #fff;
    font: 600 18px/1.2 var(--mt-font-display); letter-spacing: .03em; text-transform: uppercase; }
.ar-destacados i { margin-top: 3px; font-size: 13px; color: var(--arco-lima); transition: transform .15s; }
.ar-destacados a:hover, .ar-destacados a:focus-visible { color: var(--arco-lima); }
.ar-destacados a:hover i { transform: translateX(3px); }
.ar-campo:has(+ .mt-alert) { padding-bottom: 64px; }
/* Con la cabecera, los Destacados no se repiten en la columna */
.mt-arco .mt-main:has(.ar-campo) .mt-promos-aside { display: none; }

/* Accesos directos: una barra blanca que monta sobre la cabecera */
.mt-arco .ar-campo + .mt-quick { position: relative; margin-top: -64px; padding-top: 0; }
.mt-arco .ar-campo + .mt-quick ul { border: 0; box-shadow: 0 1px 2px rgba(var(--mt-shadow-rgb), .06), 0 14px 34px rgba(var(--mt-shadow-rgb), .12); }

/* ---------- Títulos, botones, tarjetas ---------- */
.mt-arco .mt-section__head h2 { letter-spacing: .02em; }
.mt-arco .mt-more { color: var(--mt-accent-dark); }
.mt-arco .mt-card time, .mt-arco .mt-kicker { color: var(--mt-accent-dark); }
.mt-arco .mt-quick i { color: var(--mt-accent); }
.mt-arco .mt-quick a:hover i, .mt-arco .mt-quick a:focus-visible i { color: var(--mt-accent-soft); }

/* ---------- Agenda: la fecha en tinta, el mes en lima ---------- */
.mt-arco .mt-date { background: var(--mt-night); color: #fff; }
.mt-arco .mt-date span, .mt-arco .mt-date small { color: var(--arco-lima); }
.mt-arco .mt-grid--pasados .mt-date { background: var(--mt-tag-bg); color: var(--mt-ink); }
.mt-arco .mt-grid--pasados .mt-date span, .mt-arco .mt-grid--pasados .mt-date small { color: var(--mt-ink-soft); }

/* ---------- Destacados (Mini banners del panel): imagen y su nombre debajo ---------- */
.mt-arco .mt-promo { position: relative; display: flex; flex-direction: column; aspect-ratio: auto; padding: 0; overflow: hidden; }
.mt-arco .mt-promo img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mt-arco .mt-promo__titulo { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    padding: 8px 10px 9px; border-top: 3px solid var(--arco-lima); font: 600 15px/1.15 var(--mt-font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--mt-ink); }
.mt-arco .mt-promo:hover .mt-promo__titulo { color: var(--mt-accent-dark); }

/* ---------- Mejores resultados: tinta con los anillos de la diana; el puesto en oro ---------- */
.mt-arco .mt-results {
    background: url("/temas/arco/diana-anillos.svg") right -260px center / 760px auto no-repeat,
                linear-gradient(160deg, var(--mt-night-2), var(--mt-night) 65%);
}
.mt-arco .mt-results li { border-left-color: var(--arco-oro); }
.mt-arco .mt-medal { color: var(--arco-oro); }

/* ---------- Páginas interiores: los anillos de la diana a la derecha ---------- */
.mt-arco .mt-page-head:not(.mt-page-head--slim) {
    background: url("/temas/arco/diana-anillos.svg") right -180px center / auto 260% no-repeat,
                linear-gradient(160deg, var(--mt-night-2), var(--mt-night) 70%);
}
.mt-arco .mt-crumbs a:hover { color: var(--arco-lima); }

/* ---------- Contenido sin imagen (Vista.Visual): la diana en el campo, con tres flechas ---------- */
.mt-sinfoto { background: url("/temas/arco/sinfoto.svg") center / cover no-repeat, #2c5320; }
.mt-card:nth-child(2n) .mt-sinfoto { background-position: 30% center; }

/* ---------- Pie: el emblema en blanco; los iconos, en lima ---------- */
.mt-footer__marca { display: inline-block; margin-bottom: 18px; }
.mt-footer__marca img { display: block; height: 76px; width: auto; opacity: .92; }
.mt-arco .mt-footer .fa-solid { color: var(--arco-lima); }
.mt-arco .mt-footer a:hover { color: var(--arco-lima); }

@media (max-width: 980px) {
    .mt-arco .mt-header .mt-marca img { height: 62px; }
    .mt-arco .mt-header__brand { min-height: 86px; }
    .mt-marca { gap: 12px; }
    .mt-marca__texto { padding-left: 12px; gap: 4px; }
    .mt-marca__nombre { font-size: 20px; }
    .mt-marca__sub { font-size: 13px; }
    .mt-arco .mt-nav > ul > li > a { font-size: 18px; }
    .mt-arco .mt-mega .mt-has-sub > a { color: var(--arco-lima); }
    .ar-destacados ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ar-campo { padding: 40px 0 92px; }
    .ar-campo::before { width: 520px; right: -300px; top: 0; transform: none; }
    .ar-destacados ul { grid-template-columns: 1fr; }
    .mt-arco .mt-header .mt-marca img { height: 50px; }
    .mt-marca__nombre { font-size: 16px; }
    .mt-marca__sub { font-size: 11.5px; }
    .mt-arco .mt-results { background-size: 520px auto, auto; background-position: right -240px top 40px, 0 0; }
}