/* Lo único que evoBase 0.2.0 no trae: enlace de saltar al contenido visible al enfocarlo, y la separación del pie. */
.evotheme-skip {
    position: absolute;
    inset-inline-start: var(--evo-space-2, .5rem);
    inset-block-start: var(--evo-space-2, .5rem);
    z-index: 1000;
    transform: translateY(-300%);
}

.evotheme-skip:focus {
    transform: none;
}

.evotheme-site {
    display: flex;
    flex-direction: column;
    min-block-size: 100vb;
}

.evotheme-site > main {
    flex: 1 0 auto;
}

/* Salida de los componentes de Joomla (clases de Bootstrap que esta plantilla no carga): botones con tamaño táctil y contraste. */
main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--evo-space-2);
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
    padding: var(--evo-space-2) var(--evo-space-4);
    border: 1px solid var(--evo-color-primary);
    border-radius: var(--evo-radius-md);
    color: var(--evo-color-primary);
    text-decoration: none;
}

main .btn:hover {
    text-decoration: underline;
}

/* Tipografía del estilo de plantilla: pilas del sistema (sin fuentes remotas). El bloque <style> del <head> sustituye
   --evo-font-body, --evo-font-heading y --evo-font-weight-heading cuando se eligen otros valores. */
.evotheme-site {
    font-family: var(--evo-font-body, var(--evo-font-family-sans));
}

.evotheme-site :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--evo-font-heading, var(--evo-font-family-sans));
    font-weight: var(--evo-font-weight-heading, 700);
}

/* Botón principal solo con contorno (estilo de plantilla «Contorno»). */
.evotheme-buttons--outline .evo-button:not(.evo-button--secondary, .evo-button--ghost, .evotheme-skip, :disabled, [aria-disabled="true"]) {
    background: transparent;
    color: var(--evo-color-primary);
}

/* Cabecera: marca a la izquierda; menú, conmutador de modo y botón de acción a la derecha. En pantallas estrechas el menú
   pasa a un panel lateral (evo-offcanvas), fuera de <header>. */
.evotheme-header {
    background: var(--evo-color-surface);
    border-block-end: 1px solid var(--evo-color-border);
}

.evotheme-header--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
}

.evotheme-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-3) var(--evo-space-5);
    padding-block: var(--evo-space-3);
}

.evotheme-brand {
    margin-inline-end: auto;
}

.evotheme-brand img {
    block-size: 2.5rem;
    inline-size: auto;
}

.evotheme-nav {
    display: none;
}

.evotheme-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--evo-space-3);
}

@media (width >= 48em) {
    .evotheme-nav {
        display: block;
    }

    .evotheme-menu-open {
        display: none;
    }
}

.evotheme-offcanvas .evo-nav--inline {
    flex-direction: column;
}

.evotheme-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Altura de la cabecera para evo-section--under-header y evo-section--h-offset. Este valor aproximado evita el salto de
   diseño antes de que cargue js/header-height.js, que lo sustituye por la altura real (y la mantiene al girar el móvil o
   si el menú pasa a dos líneas). Sin ninguna de esas clases en la página, la variable no se usa. */
:root {
  --evo-header-h: calc(2.5rem + 2 * var(--evo-space-3, .75rem) + 1px);
}

/* Cabecera transparente: la primera sección pide ir bajo la cabecera (clase de <body> que pone layout/page.php). La
   cabecera sale del flujo y se pega arriba; la sección ya compensa su altura, así que no se añade ningún margen. Mientras
   dure deja de ser fija: con texto claro sobre una imagen, al desplazarse quedaría ilegible sobre el contenido. */
.evotheme-header-overlay .evotheme-header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  border-block-end-color: transparent;
}

/* Color del texto de la cabecera según header_text de la sección: blanco o casi negro de evoBase. Sin tono
   (header_text = default) la cabecera conserva sus colores. */
.evotheme-header-tone-light .evotheme-header {
  --evo-header-fg: var(--evo-color-neutral-0);
}

.evotheme-header-tone-dark .evotheme-header {
  --evo-header-fg: var(--evo-color-neutral-950);
}

.evotheme-header-tone-light .evotheme-header,
.evotheme-header-tone-dark .evotheme-header {
  color: var(--evo-header-fg);
  --evo-color-text: var(--evo-header-fg);
  --evo-color-link: var(--evo-header-fg);
}

.evotheme-header-tone-light .evotheme-header .evo-button--ghost,
.evotheme-header-tone-dark .evotheme-header .evo-button--ghost {
  color: var(--evo-header-fg);
  border-color: currentColor;
}