/*
  Ajustes propios encima del tema (para cambios del día a día está el campo
  «CSS adicional» en Decap → Ajustes del sitio → Apariencia).
  Usa siempre las variables del tema (--bs-primary, --bs-dark...)
  para que todo se adapte solo si cambias de tema en tema.css.
*/

/* Logo de la cabecera */
.logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .logo { height: 34px; }
}

/* Que los saltos a #propuestas o #contacto no queden tapados por la cabecera fija */
section[id] { scroll-margin-top: 80px; }

/* Iconos del pie: botones redondos con buen tamaño para el dedo */
.social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.15rem;
}

/* Portada */
.hero {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero h1 { max-width: 20ch; line-height: 1.1; }
.hero .lead { max-width: 55ch; }

/* Separación entre secciones */
.seccion { padding-top: 4rem; padding-bottom: 4rem; }

/* Bloques de propuestas */
.propuesta { border-top: 4px solid var(--bs-primary); }

/* Tarjetas de noticias */
.noticia .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.noticia .stretched-link:hover,
.noticia .stretched-link:focus-visible { text-decoration: underline; }

/* Artículo */
.articulo { max-width: 760px; }
.articulo-cuerpo { font-size: 1.1rem; line-height: 1.7; }
.articulo-cuerpo img { max-width: 100%; height: auto; }
.articulo-cuerpo blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1rem;
  color: var(--bs-secondary-color);
}

/* Menú centrado: un poco más de aire entre logo y enlaces en escritorio */
@media (min-width: 992px) {
  .nav-centrado .navbar-brand { margin-right: 0; }
  .nav-centrado .navbar-collapse { margin-top: .25rem; }
}

/* Las imágenes de las tarjetas llevan width/height (evita saltos al cargar) */
.noticia picture { display: block; }
.noticia .card-img-top { height: auto; }

/* Enlace "Saltar al contenido" (solo visible al navegar con teclado) */
.saltar:focus {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 2px solid var(--bs-primary);
  border-radius: .375rem;
}

/* Tarjetas de actividades */
.actividad-fecha {
  flex: 0 0 4.25rem;
  align-self: flex-start;
  padding: .5rem .25rem;
  border-radius: .375rem;
  background: var(--bs-primary);
  color: var(--oz-texto-sobre-principal, #fff);
  line-height: 1.1;
}
.actividad-fecha .dia { display: block; font-size: 1.75rem; font-weight: 800; }
.actividad-fecha .mes { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.actividad .stretched-link:hover,
.actividad .stretched-link:focus-visible { text-decoration: underline; }

/* Botones de compartir */
.compartir .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* Enlaces legales del pie */
.enlaces-legales a { text-decoration: none; }
.enlaces-legales a:hover { text-decoration: underline; }

/* Títulos dentro del texto de noticias, páginas y propuestas */
.articulo-cuerpo h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; }
.articulo-cuerpo h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; }

/* Pie: el build calcula un fondo con contraste suficiente (--oz-pie-bg) */
.pie-web { background: var(--oz-pie-bg, var(--bs-dark)); color: rgba(255, 255, 255, .88); }
.pie-web .link-light { color: #fff !important; }

/* Etiquetas de temas */
.etiquetas { margin-top: .75rem; }
.etiquetas .badge { font-weight: 600; font-size: .85rem; padding: .45em .8em; color: var(--bs-body-color) !important; }
.etiquetas .badge:hover { border-color: var(--bs-primary) !important; }

/* Buscador (Pagefind) con los colores del tema */
#buscador {
  --pagefind-ui-primary: var(--bs-primary);
  --pagefind-ui-text: var(--bs-body-color);
  --pagefind-ui-background: var(--bs-body-bg);
  --pagefind-ui-border: var(--bs-border-color);
  --pagefind-ui-tag: var(--bs-tertiary-bg);
  --pagefind-ui-font: inherit;
  --pagefind-ui-border-radius: .375rem;
}

/* Botones de los canales (colores de cada app, con contraste suficiente) */
.btn-whatsapp { --bs-btn-bg: #0a6e55; --bs-btn-border-color: #0a6e55; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #075a45; --bs-btn-hover-border-color: #075a45; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #064c3a; --bs-btn-active-color: #fff; }
.btn-telegram { --bs-btn-bg: #1d6fa5; --bs-btn-border-color: #1d6fa5; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #175a86; --bs-btn-hover-border-color: #175a86; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #134b70; --bs-btn-active-color: #fff; }
.canales { border-left: 4px solid var(--bs-primary); }

/* Paginación legible con cualquier tema (algunos la pintan en colores con poco contraste) */
.pagination {
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-tertiary-bg);
  --bs-pagination-active-color: var(--oz-texto-sobre-principal, #fff);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-body-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}

/* Formulario de propuestas */
.formulario { max-width: 720px; }
.formulario .form-label { margin-bottom: .35rem; }
/* Campo trampa contra el spam: fuera de la vista (no usar display:none, algunos robots lo detectan) */
.campo-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }