/* ==========================================================================
   Base: tokens, reset y componentes compartidos
   Tema hijo anpperu (Comité Paralímpico del Perú)
   ========================================================================== */

/* Tokens de marca.
   Se declaran en body (no en :root) porque Elementor define sus variables
   globales en body.elementor-kit-N: así cada token toma el color del Kit
   (Ajustes del sitio → Colores globales) y, si no existe, usa el de marca. */
body {
  /* Marca */
  --rojo: var(--e-global-color-rojo, #ed1c24);              /* rojo del sello: rellenos y gráficos */
  --rojo-fuerte: var(--e-global-color-primary, #c8101a);    /* texto y botones (contraste AA) */
  --azul: var(--e-global-color-azul, #007dc5);
  --azul-fuerte: var(--e-global-color-secondary, #0a5fa8);
  --verde: var(--e-global-color-accent, #00a650);
  --verde-fuerte: var(--e-global-color-verdefuerte, #00703c);
  --noche: var(--e-global-color-noche, #0b2147);

  /* Neutros */
  --tinta: var(--e-global-color-text, #13233f);
  --tinta-suave: var(--e-global-color-tintasuave, #4a5872);
  --linea: var(--e-global-color-linea, #dde3ec);            /* solo separadores decorativos */
  --borde-control: var(--e-global-color-borde, #7a8699);    /* bordes de controles: 3.7:1 */
  --niebla: var(--e-global-color-niebla, #f3f6fa);
  --blanco: var(--e-global-color-blanco, #ffffff);

  /* Medallas */
  --oro: var(--e-global-color-oro, #e5b021);
  --plata: var(--e-global-color-plata, #a9b4c2);
  --bronce: var(--e-global-color-bronce, #8a4f1c);

  /* Tipografía (familia desde Ajustes del sitio → Tipografía global "Principal") */
  --fuente: var(--e-global-typography-primary-font-family, "Archivo"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.875rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.625rem;
  --t-xl: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  --t-hero: clamp(2.6rem, 1.2rem + 5.6vw, 5.75rem);

  /* Espaciado y layout */
  --ancho: 1240px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --seccion: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --radio: 14px;
  --radio-lg: 28px;
}

/* --------------------------------------------------------------------------
   Reset
   Global solo lo imprescindible; el resto se limita a los widgets del tema
   (.elementor-widget-anp-*) para no alterar los widgets nativos.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding evita que la cabecera fija tape el foco o los anclajes */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
}
img { max-width: 100%; height: auto; }

:where([class*="elementor-widget-anp-"]) :where(img, svg) { display: block; max-width: 100%; }
:where([class*="elementor-widget-anp-"]) :where(a) { color: inherit; }
:where([class*="elementor-widget-anp-"]) :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) { margin: 0; }
:where([class*="elementor-widget-anp-"]) :where(button) { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--noche); color: var(--blanco);
  padding: 0.75rem 1.25rem; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Titulares: Archivo en su ancho expandido es la voz de la marca */
.titular {
  overflow-wrap: break-word;
  hyphens: manual;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.seccion-titulo {
  font-size: var(--t-xl);
}
.seccion-cabecera {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.seccion-intro {
  max-width: 56ch;
  color: var(--tinta-suave);
  margin-top: 0.75rem;
}

/* Enlaces de acción y botones */
.enlace-ver {
  font-weight: 700;
  color: var(--rojo-fuerte);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.enlace-ver:hover { color: var(--tinta); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.boton--rojo { background: var(--rojo-fuerte); color: var(--blanco); }
.boton--rojo:hover { background: #a30d15; }
.boton--borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton--borde:hover { background: var(--tinta); color: var(--blanco); }
.boton--blanco { background: var(--blanco); color: var(--noche); }
.boton--blanco:hover { background: var(--niebla); }

/* Iconos de redes (simple-icons en línea, como máscara: heredan currentColor) */
.icono {
  display: inline-block;
  width: 1.125rem; height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  flex-shrink: 0;
}
.i-facebook  { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); }
.i-instagram { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }
.i-youtube   { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.i-tiktok    { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }
.i-flickr    { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z'/%3E%3C/svg%3E"); }
.i-linkedin  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E"); }

.redes { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.redes a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s;
}


/* Foco visible sobre fondos oscuros o azules */
.barra-sup :focus-visible,
.pie :focus-visible,
.hero-evento:focus-visible,
.paradeportes :focus-visible { outline-color: var(--blanco); }

/* Enlaces que abren en pestaña nueva: indicador visual */
.enlace-ver[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.8em; height: 0.8em;
  margin-left: 0.35em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Modo de alto contraste (Windows): los iconos con máscara usan el color del sistema */
@media (forced-colors: active) {
  .icono, .enlace-ver[target="_blank"]::after { forced-color-adjust: none; background-color: CanvasText; }
  a .icono { background-color: LinkText; }
  .boton, .boton-icono, .carrusel-boton, .red-seguir { border: 2px solid ButtonText; }
}

/* --------------------------------------------------------------------------
   Tarjeta de noticia (Home, listado y relacionadas)
   El enlace está en el titular y su ::after cubre toda la tarjeta.
   -------------------------------------------------------------------------- */
.noticia { position: relative; }
.noticia-titulo a { text-decoration: none; }
.noticia-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.noticia-titulo a:focus-visible { outline: none; }
.noticia:has(.noticia-titulo a:focus-visible) { outline: 3px solid var(--azul); outline-offset: 6px; border-radius: var(--radio); }
.noticia-enlace {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  text-decoration: none;
}
.noticia-img {
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--niebla);
}
.noticia-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.noticia--destacada .noticia-img img { aspect-ratio: 4 / 3.4; }
.noticia:hover .noticia-img img { transform: scale(1.03); }

.noticia-meta {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
.noticia-deporte { font-weight: 700; color: var(--rojo-fuerte); }
.noticia-titulo {
  margin-top: 0.4rem;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}
.noticia--destacada .noticia-titulo {
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1.15;
}
.noticia-resumen { margin-top: 0.75rem; color: var(--tinta-suave); max-width: 60ch; }
.noticia:hover .noticia-titulo a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (max-width: 560px) {
  .noticia:not(.noticia--destacada) .noticia-enlace { flex-direction: row; align-items: start; }
  .noticia:not(.noticia--destacada) .noticia-img { flex: 0 0 38%; }
  .noticia:not(.noticia--destacada) .noticia-img img { aspect-ratio: 1; }
  .noticia:not(.noticia--destacada) .noticia-titulo { font-size: var(--t-sm); }
}

.i-whatsapp { --i: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }
.i-enlace   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }

/* El atributo hidden siempre gana sobre display de componentes */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Compatibilidad con Elementor
   -------------------------------------------------------------------------- */
/* Contenedores de Elementor con las clases de layout del tema */
.e-con.contenedor {
  --padding-top: 0; --padding-bottom: 0;
  --padding-left: var(--gutter); --padding-right: var(--gutter);
  width: 100%;
  max-width: calc(var(--ancho) + var(--gutter) * 2);
  margin-inline: auto;
}
.e-con.sin-relleno { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; }

/* Hello Elementor: título de página oculto (lo pone el banner) */
.page-header .entry-title { display: none; }

/* Cabecera fija: la barra superior se va con el scroll y la principal queda arriba */
.elementor-location-header {
  position: sticky;
  top: -44px;
  z-index: 50;
}
.admin-bar .elementor-location-header { top: -12px; }

/* El reset deja los widgets anp sin márgenes; Elementor separa con gap */
.elementor-widget[class*="elementor-widget-anp-"] { margin-block-end: 0; }

/* Elementor quita el subrayado a todos los enlaces (.elementor a).
   Lo devolvemos donde el enlace está dentro de un texto: así no depende solo del color. */
.elementor .enlace-ver,
.elementor .prosa a,
.elementor .migas a,
.elementor .datos a,
.elementor .datos-contacto a,
.elementor .anp-form a,
.elementor .campo-ayuda a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor .enlace-ver { text-decoration-thickness: 2px; text-underline-offset: 5px; }
.elementor .prosa .etiquetas a { text-decoration: none; }

/* Aviso de widget vacío (solo aparece en el editor de Elementor) */
.anp-vacio {
  padding: 1.25rem 1.5rem;
  border: 2px dashed var(--borde-control);
  border-radius: var(--radio);
  background: var(--niebla);
  color: var(--tinta-suave);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Solo en pantallas muy angostas (o con zoom al 400 %) se permite cortar palabras
   largas con guion, para que los titulares no se desborden. */
@media (max-width: 480px) {
  .titular { hyphens: auto; }
}

/* Objetivos táctiles: enlaces de acción de al menos 44 px de alto */
.enlace-ver { display: inline-flex; align-items: center; min-height: 44px; }

/* Palabras largas ("Parasuramericanos") no desbordan en pantallas angostas o con zoom */
@media (max-width: 480px) {
  .titular { overflow-wrap: anywhere; }
}

/* Pantallas muy bajas (zoom alto, celular horizontal): la cabecera no queda fija */
@media (max-height: 500px) {
  .elementor-location-header { position: static; }
}