/**
 * Sitio institucional ACSEX.
 *
 * Clases propias con prefijo acs- para no colisionar con las del congreso
 * (.congreso-section y derivadas), que no se tocan desde aqui.
 *
 * Tokens heredados del tema del congreso, sin introducir colores ni tipografias nuevas:
 *   #125a69  titulos            #16363c  texto
 *   #398cac  acento             #e2944c  CTA (ya definido en .acs-btn de style.css)
 *   #c5d8dc  bordes             #eff7f7 / #e4efef / #FBF6EE  fondos claros
 *   Poppins  display (cifras)   Roboto   cuerpo (heredado del tema)
 */

.acs-section {
    color: #16363c;
}
.acs-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
}

.acs-tag {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #398cac;
    margin-bottom: 1em;
    font-size: .9em;
    line-height: 1.2em;
}
.acs-tag:before {
    content: "";
    display: inline-block;
    width: 25px;
    border: 1px solid #398cac;
    margin-right: .7em;
}

.acs-title {
    color: #125a69;
    font-size: 2.4em;
    line-height: 1.1em;
    margin: 0 0 .3em 0;
}
.acs-subtitle {
    color: #125a69;
    font-size: 1.4em;
    line-height: 1.2em;
    margin: 1.5em 0 .5em 0;
}
.acs-desc {
    max-width: 650px;
    margin-bottom: 2em;
}
.acs-prosa {
    max-width: 700px;
    margin-bottom: 2em;
}
.acs-prosa > *:last-child {
    margin-bottom: 0;
}

/* Filtros del directorio */
.acs-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    background: #eff7f7;
    border: 1px solid #c5d8dc;
    border-radius: 1em;
    padding: 20px;
    margin-bottom: 2em;
}
.acs-filtro {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    margin: 0;
}
.acs-filtro label {
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    color: #125a69;
    margin-bottom: .4em;
}
.acs-filtro select,
.acs-filtro input[type="search"] {
    width: 100%;
    padding: .6em;
    border: 1px solid #16363c;
    border-radius: 10px;
    background: #fff;
    color: #16363c;
}
/* El buscador ocupa su propia fila, encima de los desplegables. */
.acs-filtro--buscar {
    flex-basis: 100%;
}
.acs-filtro-acciones {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
.acs-limpiar {
    font-size: .9em;
    text-decoration: underline;
}
.acs-resultados {
    font-size: .9em;
    color: #125a69;
    margin-bottom: 1em;
}

/* Rejilla de tarjetas */
.acs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 2em;
}
.acs-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #c5d8dc;
    border-radius: 1em;
    overflow: hidden;
}
.acs-card-img {
    background: #e4efef;
    aspect-ratio: 4 / 3;
}
.acs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acs-card-body {
    flex: 1;
    padding: 20px;
}
.acs-card-anio {
    display: inline-block;
    font-family: 'Poppins';
    font-weight: 800;
    color: #e2944c;
    line-height: 1;
    margin-bottom: .3em;
}
.acs-card-title {
    font-size: 1.15em;
    line-height: 1.2em;
    margin: 0 0 .3em 0;
}
.acs-card-title a {
    color: #125a69;
}
.acs-card-sub {
    font-size: .9em;
    line-height: 1.3em;
    margin: 0 0 .5em 0;
}
.acs-card-meta {
    font-size: .8em;
    color: #398cac;
    margin: 0 0 .5em 0;
}
.acs-card-bio {
    font-size: .85em;
    line-height: 1.4em;
    margin: 0;
}

/* Etiquetas de especialidad */
.acs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: .5em 0 0 0;
}
.acs-chip {
    font-size: .75em;
    line-height: 1;
    background: #e4efef;
    color: #125a69;
    border-radius: 20px;
    padding: .5em .9em;
}
.acs-chip a {
    color: inherit;
}

/* Ficha individual */
.acs-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.acs-ficha-aside {
    flex: 1 1 260px;
}
.acs-ficha-main {
    flex: 3 1 400px;
}
.acs-ficha-img {
    border-radius: 1em;
    overflow: hidden;
    margin-bottom: 20px;
}
.acs-ficha-img img {
    width: 100%;
    height: auto;
    display: block;
}
.acs-ficha-sub {
    font-weight: 600;
    color: #e2944c;
    margin-bottom: .5em;
}
.acs-ficha-contacto {
    background: #eff7f7;
    border: 1px solid #c5d8dc;
    border-radius: 1em;
    padding: 20px;
}
.acs-ficha-contacto h2 {
    font-size: .8em;
    text-transform: uppercase;
    color: #125a69;
    margin-bottom: .8em;
}
.acs-ficha-contacto ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .9em;
    line-height: 1.5em;
    word-break: break-word;
}

/* Descargas de memorias */
.acs-descargas {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}
.acs-descargas li {
    border-bottom: 1px solid #c5d8dc;
}
.acs-descargas li:last-child {
    border-bottom: 0;
}
.acs-descargas a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 1em 0;
    color: #16363c;
}
.acs-descarga-nombre {
    font-weight: 600;
}
.acs-descarga-tipo {
    flex: 0 0 auto;
    font-size: .7em;
    font-weight: 700;
    background: #125a69;
    color: #fff;
    border-radius: 20px;
    padding: .4em .8em;
    line-height: 1;
}

.acs-galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 2em;
}
.acs-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .5em;
    display: block;
}

.acs-vacio {
    background: #FBF6EE;
    border-radius: 1em;
    padding: 2em;
    text-align: center;
}
.acs-volver {
    margin-top: 2em;
}

/* Foco de teclado visible en todos los controles del sitio nuevo.
   Se incluyen los bloques de membresia porque viven fuera de .acs-section:
   el panel de Mi cuenta lo pinta WooCommerce, no una plantilla propia. */
.acs-section a:focus-visible,
.acs-section button:focus-visible,
.acs-section select:focus-visible,
.acs-membresia a:focus-visible,
.acs-membresia input:focus-visible,
.acs-bloqueo a:focus-visible {
    outline: 2px solid #398cac;
    outline-offset: 2px;
    border-radius: 4px;
}


/* -------------------------------------------------------------------------
   Membresia y acceso restringido (Decision C)

   Los botones reutilizan .acs-btn / .acs-btn.alt, que ya existen en style.css
   y son los del congreso: no se define un boton nuevo.
   ---------------------------------------------------------------------- */

/* Aviso de contenido restringido */
.acs-bloqueo {
    background: #eff7f7;
    border: 1px solid #c5d8dc;
    border-radius: 1em;
    padding: 2em;
    margin: 2em 0;
}
.acs-bloqueo__titulo {
    color: #125a69;
    margin: 0 0 .5em;
}
.acs-bloqueo__texto {
    margin: 0 0 1.5em;
    max-width: 60ch;
}
.acs-bloqueo__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em;
    margin: 0;
}
.acs-bloqueo__estado {
    flex-basis: 100%;
    color: #16363c;
    font-weight: 500;
}

/* Etiqueta "Solo asociados" en el listado de ediciones */
.acs-etiqueta {
    display: inline-block;
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35em .8em;
    border-radius: 50px;
    margin-bottom: .6em;
}
.acs-etiqueta--asociados {
    background: #e4efef;
    color: #125a69;
}

/* Panel de membresia en Mi cuenta */
.acs-membresia {
    margin: 2em 0;
}
.acs-membresia__titulo {
    color: #125a69;
    margin: 0 0 .5em;
}
.acs-membresia__subtitulo {
    color: #125a69;
    margin: 2em 0 .5em;
    font-size: 1.15em;
}
.acs-membresia__estado {
    padding: 1em 1.25em;
    border-radius: .6em;
    background: #FBF6EE;
    border-left: 4px solid #c5d8dc;
}
.acs-membresia__estado--activa {
    background: #eff7f7;
    border-left-color: #398cac;
}
.acs-membresia__estado--vencida {
    background: #FBF6EE;
    border-left-color: #e2944c;
}

/* La tabla del historial no debe empujar el ancho de la pagina en movil */
.acs-tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.acs-membresia__historial {
    width: 100%;
    border-collapse: collapse;
    min-width: 32em;
}
.acs-membresia__historial th,
.acs-membresia__historial td {
    text-align: left;
    padding: .7em .9em;
    border-bottom: 1px solid #c5d8dc;
    vertical-align: top;
}
.acs-membresia__historial th {
    color: #125a69;
    font-weight: 700;
    white-space: nowrap;
}

/* Avisos del formulario de ficha */
.acs-aviso {
    background: #FBF6EE;
    border-radius: .6em;
    padding: 1em 1.25em;
    margin: 0 0 1.5em;
}
.acs-aviso--ok {
    background: #eff7f7;
}

/* Precio de asociado en catalogo y ficha de producto */
.acs-precio {
    display: block;
}
.acs-precio__asociado {
    font-weight: 700;
    color: #125a69;
}
.acs-precio__etiqueta {
    display: inline-block;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25em .7em;
    border-radius: 50px;
    background: #e4efef;
    color: #125a69;
    vertical-align: middle;
}
.acs-precio__antes {
    display: block;
    font-size: .85em;
    color: #16363c;
    opacity: .7;
    text-decoration: line-through;
}
.acs-precio__incentivo {
    display: block;
    margin-top: .4em;
    font-size: .85em;
    line-height: 1.45;
    color: #16363c;
    background: #eff7f7;
    border-left: 3px solid #398cac;
    padding: .6em .9em;
    border-radius: .4em;
}
.acs-precio__incentivo strong {
    color: #125a69;
}
.acs-precio__incentivo a {
    color: #398cac;
    font-weight: 600;
}

/* Bloque de estado dentro de la Zona de asociados */
.acs-zona-estado {
    background: #eff7f7;
    border-radius: 1em;
    padding: 1.5em 2em;
    margin-top: 2em;
}
.acs-zona-estado__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    margin: 1em 0 0;
}

@media (min-width: 600px) {

    .acs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .acs-galeria {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 768px) {

    .acs-wrapper {
        padding: 80px 20px;
    }
    .acs-title {
        font-size: 2.7em;
    }

}

@media (min-width: 1024px) {

    .acs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .acs-galeria {
        grid-template-columns: repeat(4, 1fr);
    }

    .acs-header-user__menu:before {
        content: '';
        width: 100%;
        height: 15px;
        position: absolute;
        left: 0;
        top: -15px;
    }


}

@media (prefers-reduced-motion: reduce) {

    .acs-section * {
        transition: none !important;
        animation: none !important;
    }

}


/* -------------------------------------------------------------------------
   EL ENCABEZADO LO MAQUETA EL TEMA. Aqui no hay nada.

   Hubo un parche que, en las paginas institucionales, bajaba el menu a una fila
   propia bajo el logo: con NUEVE entradas de primer nivel y etiquetas largas no
   cabia junto al logotipo y se solapaba con el. Al agrupar el menu en cinco
   entradas (una de ellas megamenu) el problema desaparecio de raiz.

   Todo lo que hacia aquel parche es configurable en Opciones del tema:
     - Ancho del encabezado -> Content width + Full width header content
     - Alineacion del menu   -> Menu align
     - Espaciado del menu    -> Menu margin / padding

   Es preferible tenerlo ahi: se ve en el admin, aplica a todo el sitio por igual
   y no se pisa con el CSS que el tema genera. Si el encabezado vuelve a
   descuadrarse, la primera parada son esas opciones, no este archivo.
   ---------------------------------------------------------------------- */


/* =========================================================================
   SISTEMA VISUAL BASE  (Plan de trabajo 2026-08-02)

   Kit reutilizable en todo el sitio institucional: hero, franjas de ritmo,
   contadores de cifras, tarjetas elevadas, placeholders de imagen etiquetados
   y accesos. Objetivo: que cada pagina "tenga forma", no sea una pila de textos.

   Reglas respetadas:
   - Solo clases acs-; no se toca ninguna .congreso-.
   - Tokens del tema: teal #125a69 / texto #16363c / acento #398cac /
     CTA naranja #e2944c (via .acs-btn, ya en style.css) / fondos
     claros #ffffff #f7f7f7 #e4efef #c5d8dc / Poppins (display) + Roboto (cuerpo).
   - Sin animaciones nuevas (el congreso no las tiene); solo transiciones suaves.
   ========================================================================= */

/* Franjas full-bleed: las paginas institucionales necesitan secciones a todo el
   ancho, igual que /congreso. El tema deja padding y ancho maximo en
   #e89-main-content; aqui se anulan (mismo enfoque que body.page-id-2 usa para el
   congreso en style.css). El ancho de lectura lo pone .acs-wrapper por dentro.

   La clase la anade inc/menu.php a todo lo que pinte una plantilla del tema hijo
   (ver acsex_es_fullbleed). Antes habia ademas una regla body.home, que sobra:
   la portada tambien se sirve con una plantilla del child. */
body.acsex-fullbleed #e89-main-content {
    padding: 0;
    max-width: none;
}

/* -- Franjas de ritmo (fondos alternados) --------------------------------
   La franja aporta solo el fondo a todo el ancho; el ancho de lectura y el
   padding los pone .acs-wrapper (ya definido) en su interior. */
.acs-franja {
    position: relative;
}
.acs-franja--claro  { background: #ffffff; }
.acs-franja--gris   { background: #f7f7f7; }
.acs-franja--acento { background: #e4efef; }
.acs-franja--suave  { background: #eff7f7; }
.acs-franja--teal   { background: #125a69; color: #fff; }

/* -- Boletin (seccion reutilizable, p.ej. al cierre del Inicio) ----------- */
.acs-boletin__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
}
.acs-boletin__texto .acs-title { margin-top: 0; }
.acs-boletin__form .acs-form { margin: 0; max-width: 460px; }
.acs-boletin__form .acs-campo { margin-bottom: 12px; }
@media (max-width: 782px) {
    .acs-boletin__inner { grid-template-columns: 1fr; gap: 16px; }
}

/* -- ¿Dónde estudiar? (tarjetas de programa) ----------------------------- */
.acs-programas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.acs-programa {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e4efef;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(18, 90, 105, .06);
    overflow: hidden;
}
.acs-programa__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    background: #eff7f7;
    color: #398cac;
}
.acs-programa__logo img {
    max-height: 96px;
    width: auto;
    object-fit: contain;
}
.acs-programa__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    flex: 1;
}
.acs-programa__uni {
    margin: 0;
    font-weight: 600;
    color: #398cac;
    font-size: .9em;
}
.acs-programa__titulo {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    color: #125a69;
    line-height: 1.25;
}
.acs-programa__desc {
    margin: 4px 0 0;
    color: #16363c;
}
.acs-programa__cta {
    margin: auto 0 0;
    padding-top: 8px;
}
.acs-vacio--destacado {
    text-align: center;
    padding: 48px 20px;
    background: #eff7f7;
    border-radius: 16px;
}

/* -- Paginación (directorio y otros listados institucionales) ------------ */
body.acsex-nav-institucional .navigation.pagination {
    margin-top: 36px;
}
body.acsex-nav-institucional .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
body.acsex-nav-institucional .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #c5d8dc;
    border-radius: 10px;
    background: #ffffff;
    color: #125a69;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
body.acsex-nav-institucional a.page-numbers:hover,
body.acsex-nav-institucional a.page-numbers:focus-visible {
    background: #eff7f7;
    border-color: #398cac;
}
body.acsex-nav-institucional .page-numbers.current {
    background: #125a69;
    border-color: #125a69;
    color: #ffffff;
}
body.acsex-nav-institucional .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    min-width: 0;
    padding: 0 4px;
}

/* -- Formulario de postulación ------------------------------------------- */
.acs-fieldset {
    border: 1px solid #e4efef;
    border-radius: 12px;
    padding: 20px 24px 8px;
    margin: 0 0 24px;
}
.acs-fieldset > legend {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #125a69;
    padding: 0 8px;
}
.acs-postulacion .acs-campo { margin-bottom: 16px; }
.acs-postulacion input[type="file"] {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px dashed #c5d8dc;
    border-radius: 8px;
    background: #f7f7f7;
}
.acs-tarifa-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.acs-tarifa-radio {
    flex: 1 1 200px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid #c5d8dc;
    border-radius: 10px;
    cursor: pointer;
}
.acs-tarifa-radio:has(input:checked) {
    border-color: #125a69;
    background: #eff7f7;
}
.acs-tarifa-radio__nombre { font-weight: 600; color: #125a69; }
.acs-tarifa-radio__precio { margin-left: auto; font-weight: 700; }

/* En franja teal, titulos y etiquetas cambian a claro para contraste AA. */
.acs-franja--teal .acs-title,
.acs-franja--teal .acs-subtitle {
    color: #fff;
}
.acs-franja--teal .acs-desc,
.acs-franja--teal .acs-prosa {
    color: #e4efef;
}
.acs-franja--teal .acs-tag {
    color: #c5d8dc;
}
.acs-franja--teal .acs-tag:before {
    border-color: #c5d8dc;
}

/* -- Hero de pagina -------------------------------------------------------
   Bloque de apertura: titulo Poppins grande + bajada Roboto + CTAs + media.
   Fondo teal por defecto; el congreso usa su propio banner, este es aparte. */
.acs-hero {
    position: relative;
    overflow: hidden;
    background: #125a69;
    color: #fff;
}
.acs-hero__inner {
    max-width: 1200px;
    margin: auto;
    padding: 56px 20px;
    display: grid;
    gap: 32px;
    align-items: center;
}
.acs-hero__eyebrow {
    color: #c5d8dc;
}
.acs-hero__title {
    font-family: 'Poppins';
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    color: #fff;
    margin: 0 0 .4em;
}
.acs-hero__lead {
    font-size: 1.12em;
    line-height: 1.5;
    max-width: 54ch;
    color: #e4efef;
    margin: 0 0 1.6em;
}
.acs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* CTA secundario sobre fondo oscuro: borde/texto claros (patron del congreso
   en su seccion invitation, replicado con clases acs- para no depender de el). */
.acs-hero .acs-btn.alt,
.acs-franja--teal .acs-btn.alt {
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
    background: transparent;
}
.acs-hero .acs-btn.alt:hover,
.acs-franja--teal .acs-btn.alt:hover {
    background: #fff;
    border-color: #fff;
    color: #125a69;
}

/* -- Contadores de cifras -------------------------------------------------
   Los numeros de ACSEX como dato grande en Poppins, no como frase.
   Estaticos: sin count-up (el congreso no anima). */
.acs-cifras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.acs-cifra {
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 22px 14px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .06);
}
.acs-cifra__num {
    display: block;
    font-family: 'Poppins';
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1;
    color: #125a69;
}
.acs-cifra__label {
    display: block;
    margin-top: .45em;
    font-size: .85em;
    line-height: 1.25;
    color: #16363c;
}
.acs-cifras__nota {
    text-align: center;
    margin: 1.3em 0 0;
    font-size: .85em;
    color: #398cac;
}

/* -- Tarjeta elevada (variante de .acs-card, no altera la base) ----------- */
.acs-card--elevada {
    box-shadow: 0 4px 18px rgba(18, 90, 105, .08);
    border-color: #e4efef;
}

/* -- Placeholder de imagen etiquetado ------------------------------------
   Todo bloque que llevara foto se maqueta YA a tamano final (aspect-ratio
   fijo) para que el layout no salte al llegar la imagen real. Nunca en blanco.
   Prioridad: imagen real -> este placeholder gris con etiqueta. */
.acs-imgph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
    text-align: center;
    padding: 1.2em;
    aspect-ratio: 4 / 3;
    background: #e4efef;
    border-radius: 1em;
    overflow: hidden;
    color: #398cac;
}
.acs-imgph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acs-imgph__icon {
    width: 40px;
    height: 40px;
    opacity: .75;
}
.acs-imgph__label {
    font-size: .85em;
    font-weight: 600;
    line-height: 1.3;
    max-width: 24ch;
}
.acs-imgph--redonda {
    aspect-ratio: 1;
    border-radius: 50%;
}
.acs-imgph--panoramica {
    aspect-ratio: 16 / 10;
}

/* -- Bloque a dos columnas (texto + media) -------------------------------- */
.acs-split {
    display: grid;
    gap: 32px;
    align-items: center;
}
.acs-split__media {
    min-width: 0;
}

/* -- Accesos (dos tarjetas grandes de navegacion) ------------------------- */
.acs-accesos {
    display: grid;
    gap: 20px;
}
.acs-acceso {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(18, 90, 105, .08);
}
.acs-acceso__media {
    aspect-ratio: 16 / 9;
}
.acs-acceso__media .acs-imgph {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    height: 100%;
}
.acs-acceso__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .6em;
    padding: 26px;
}
.acs-acceso__icon {
    width: 42px;
    height: 42px;
    color: #125a69;
}
.acs-acceso__title {
    font-family: 'Poppins';
    font-weight: 700;
    color: #125a69;
    font-size: 1.3em;
    line-height: 1.15;
    margin: 0;
}
.acs-acceso__text {
    flex: 1;
    margin: 0;
}
.acs-acceso__cta {
    margin-top: .4em;
}

/* Iconos de linea heredables en cualquier bloque acs- */
.acs-icon {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -- Responsive del sistema visual base ----------------------------------- */
@media (min-width: 600px) {

    .acs-cifras {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 768px) {

    .acs-hero__inner {
        padding: 88px 20px;
    }
    .acs-cifras {
        grid-template-columns: repeat(5, 1fr);
    }
    .acs-accesos {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 900px) {

    .acs-hero--split .acs-hero__inner {
        grid-template-columns: 1.05fr .95fr;
    }
    .acs-split {
        grid-template-columns: 1fr 1fr;
    }
    .acs-split--invertido .acs-split__media {
        order: 2;
    }

}


/* =========================================================================
   AFILIACION  (Plan de trabajo 2026-08-02, seccion "Afiliacion")

   Beneficios en tarjetas con icono, "como afiliarse" en 4 pasos numerados,
   tarifas 2026 en dos tarjetas de precio, y aviso de postulacion. Reutiliza
   el sistema visual base; solo se anaden las piezas propias de esta pagina.
   ========================================================================= */

/* -- Beneficios (grid de tarjetas con icono) ------------------------------ */
.acs-beneficios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.acs-beneficio {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .05);
}
.acs-beneficio__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: #398cac;
    margin-top: 2px;
}
.acs-beneficio__text {
    margin: 0;
    line-height: 1.4;
}

/* -- Como afiliarse: 4 pasos numerados ------------------------------------ */
.acs-pasos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: acs-paso;
}
.acs-paso {
    position: relative;
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 24px 22px;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .05);
}
.acs-paso__num {
    counter-increment: acs-paso;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #125a69;
    color: #fff;
    font-family: 'Poppins';
    font-weight: 800;
    font-size: 1.2em;
    line-height: 1;
    margin-bottom: .7em;
}
.acs-paso__num:before {
    content: counter(acs-paso);
}
.acs-paso__title {
    font-family: 'Poppins';
    font-weight: 700;
    color: #125a69;
    font-size: 1.05em;
    line-height: 1.2;
    margin: 0 0 .3em;
}
.acs-paso__text {
    margin: 0;
    font-size: .92em;
    line-height: 1.4;
}

/* -- Tarifas 2026 (dos tarjetas de precio) -------------------------------- */
.acs-tarifas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.acs-tarifa {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 32px 28px;
    box-shadow: 0 4px 18px rgba(18, 90, 105, .08);
}
.acs-tarifa--destacada {
    border-color: #398cac;
    box-shadow: 0 6px 22px rgba(18, 90, 105, .14);
}
.acs-tarifa__nombre {
    font-family: 'Poppins';
    font-weight: 700;
    color: #125a69;
    font-size: 1.3em;
    margin: 0 0 .3em;
}
.acs-tarifa__quien {
    font-size: .9em;
    line-height: 1.4;
    color: #16363c;
    margin: 0 0 1.2em;
}
.acs-tarifa__precio {
    font-family: 'Poppins';
    font-weight: 800;
    color: #125a69;
    font-size: 2.3em;
    line-height: 1;
    margin: 0;
}
.acs-tarifa__moneda {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: .32em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #398cac;
    margin-top: .7em;
}
.acs-tarifa__periodo {
    font-size: .85em;
    color: #16363c;
    margin: .7em 0 1.6em;
}
.acs-tarifa .acs-btn {
    align-self: center;
    margin-top: auto;
}

/* -- Aviso informativo (postulacion, tiempos, legal) ---------------------- */
.acs-nota-info {
    background: #eff7f7;
    border-left: 4px solid #398cac;
    border-radius: .5em;
    padding: 1em 1.25em;
    margin: 1.5em 0 0;
    line-height: 1.5;
}
.acs-nota-info strong {
    color: #125a69;
}

/* -- Responsive de Afiliacion --------------------------------------------- */
@media (min-width: 600px) {

    .acs-beneficios {
        grid-template-columns: repeat(2, 1fr);
    }
    .acs-tarifas {
        grid-template-columns: repeat(2, 1fr);
        max-width: 760px;
        margin: 0 auto;
    }

}

@media (min-width: 768px) {

    .acs-pasos {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (min-width: 900px) {

    .acs-beneficios {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================================
   NOSOTROS  (Plan de trabajo 2026-08-02, seccion "Nosotros")

   Tarjetas de info (frentes / mision-vision / logros), tarjetas de perfil de
   la Junta y linea de tiempo de la Historia. Reutiliza el sistema visual base.
   ========================================================================= */

/* -- Tarjetas de informacion (frentes de trabajo, mision/vision, logros) --- */
.acs-info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.acs-info-card {
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 26px 24px;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .06);
}
.acs-info-card__icon {
    width: 40px;
    height: 40px;
    color: #125a69;
    margin-bottom: .6em;
}
.acs-info-card__title {
    font-family: 'Poppins';
    font-weight: 700;
    color: #125a69;
    font-size: 1.15em;
    line-height: 1.2;
    margin: 0 0 .4em;
}
.acs-info-card__text {
    margin: 0;
    line-height: 1.5;
}
.acs-info-card__nota {
    display: inline-block;
    margin-top: .8em;
    font-size: .78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #398cac;
}

/* -- Tarjetas de perfil (Junta directiva) --------------------------------- */
.acs-perfiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.acs-perfil {
    text-align: center;
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 28px 22px;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .06);
}
.acs-perfil__foto {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: #e4efef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #398cac;
}
.acs-perfil__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.acs-perfil__nombre {
    font-family: 'Poppins';
    font-weight: 700;
    color: #125a69;
    font-size: 1.15em;
    line-height: 1.2;
    margin: 0 0 .2em;
}
.acs-perfil__cargo {
    color: #e2944c;
    font-weight: 600;
    font-size: .9em;
    margin: 0 0 .8em;
}
.acs-perfil__bio {
    font-size: .9em;
    line-height: 1.45;
    color: #16363c;
    margin: 0;
}

/* -- Linea de tiempo (Historia) ------------------------------------------- */
.acs-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.acs-timeline:before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 20px;
    width: 2px;
    background: #c5d8dc;
}
.acs-timeline__item {
    position: relative;
    padding: 0 0 32px 56px;
}
.acs-timeline__item:last-child {
    padding-bottom: 0;
}
.acs-timeline__dot {
    position: absolute;
    left: 12px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #125a69;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #c5d8dc;
}
.acs-timeline__year {
    font-family: 'Poppins';
    font-weight: 800;
    color: #125a69;
    font-size: 1.5em;
    line-height: 1;
    margin: 0 0 .5em;
}
.acs-timeline__card {
    background: #fff;
    border: 1px solid #e4efef;
    border-radius: 1em;
    padding: 20px 22px;
    box-shadow: 0 2px 12px rgba(18, 90, 105, .06);
}
.acs-timeline__card p {
    margin: 0;
    line-height: 1.5;
}

/* -- Responsive de Nosotros ----------------------------------------------- */
@media (min-width: 600px) {

    .acs-perfiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .acs-info-cards--2 {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 768px) {

    .acs-info-cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (min-width: 900px) {

    .acs-perfiles {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Timeline alternada a ambos lados del eje central en escritorio.
       En movil queda en columna unica con el eje a la izquierda. */
    .acs-timeline:before {
        left: 50%;
        margin-left: -1px;
    }
    .acs-timeline__item {
        width: 50%;
        padding: 0 0 40px;
    }
    .acs-timeline__item:nth-child(odd) {
        padding-right: 48px;
    }
    .acs-timeline__item:nth-child(even) {
        margin-left: 50%;
        padding-left: 48px;
    }
    .acs-timeline__item:nth-child(odd) .acs-timeline__dot {
        left: auto;
        right: -9px;
    }
    .acs-timeline__item:nth-child(even) .acs-timeline__dot {
        left: -9px;
    }

}


/* =========================================================================
   DIRECTORIO ENRIQUECIDO  (Plan de trabajo 2026-08-02)

   Reutiliza .acs-perfil(es) como tarjeta de ficha; anade barra de filtros
   sticky, meta de ciudad, insignias de modalidad y detalles de la ficha.
   ========================================================================= */

/* Barra de filtros pegajosa. top:0; si el tema montara un header fijo, habria
   que darle un offset igual a su altura (ajustar al verificar en vivo). */
.acs-filtros--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* La tarjeta de ficha reusa .acs-perfil (foto circular + nombre + cargo). */
.acs-perfil__nombre a {
    color: inherit;
}
.acs-dir-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .85em;
    color: #398cac;
    margin: 0 0 .6em;
}
.acs-dir-meta .acs-icon {
    flex: 0 0 auto;
}
.acs-dir-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 .6em;
}
.acs-modalidad {
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
    background: #125a69;
    color: #fff;
    border-radius: 50px;
    padding: .4em .85em;
    text-decoration: none;
}
a.acs-modalidad:hover {
    background: #16363c;
}
.acs-chips--centro {
    justify-content: center;
}

/* Detalles de la ficha individual (poblacion, idiomas, temas). */
.acs-ficha-detalles {
    margin: 1.5em 0 0;
}
.acs-ficha-detalles dt {
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #125a69;
    margin-top: 1em;
}
.acs-ficha-detalles dd {
    margin: .3em 0 0;
    line-height: 1.5;
}


/* =========================================================================
   CONTACTO  (Plan de trabajo 2026-08-02)

   Dos columnas: formulario + bloque de datos. Sin direccion ni telefono.
   ========================================================================= */

.acs-contacto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

/* Formulario */
.acs-form {
    margin: 0;
}
.acs-campo {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.2em;
}
.acs-campo label {
    font-size: .85em;
    font-weight: 600;
    color: #125a69;
    margin-bottom: .4em;
}
.acs-campo input,
.acs-campo select,
.acs-campo textarea {
    width: 100%;
    padding: .7em .8em;
    border: 1px solid #c5d8dc;
    border-radius: 10px;
    background: #fff;
    color: #16363c;
    font: inherit;
}
.acs-campo textarea {
    resize: vertical;
    min-height: 8em;
}

/* Consentimiento (capa legal) */
.acs-form__consent {
    margin: 0 0 1.4em;
}
.acs-form__consent label {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    font-size: .9em;
    line-height: 1.45;
    color: #16363c;
}
.acs-form__consent input {
    flex: 0 0 auto;
    margin-top: .2em;
}

/* Honeypot: fuera de la vista pero accesible a los bots. */
.acs-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bloque de datos */
.acs-redes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.acs-redes a {
    display: inline-block;
    font-size: .85em;
    font-weight: 600;
    color: #125a69;
    background: #e4efef;
    border-radius: 50px;
    padding: .45em .9em;
    text-decoration: none;
}
.acs-redes a:hover {
    background: #c5d8dc;
}
.acs-contacto__nota {
    margin: 1.5em 0 0;
    font-size: .85em;
    line-height: 1.5;
    color: #398cac;
}

/* Foco visible en los campos del formulario de contacto. */
.acs-form input:focus-visible,
.acs-form select:focus-visible,
.acs-form textarea:focus-visible {
    outline: 2px solid #398cac;
    outline-offset: 2px;
}

@media (min-width: 900px) {

    .acs-contacto {
        grid-template-columns: 3fr 2fr;
        gap: 48px;
    }

}


/* =========================================================================
   SECCIONES NUEVAS  (Plan de trabajo 2026-08-02)

   FAQ (acordeon nativo) y buscador. Noticias, Documentos, Boletin y Prensa
   reutilizan piezas ya definidas (.acs-grid, .acs-descargas, .acs-form,
   .acs-info-card).
   ========================================================================= */

/* -- FAQ: acordeon con <details> ------------------------------------------ */
.acs-faq {
    border-top: 1px solid #e4efef;
}
.acs-faq__item {
    border-bottom: 1px solid #e4efef;
}
.acs-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 1.1em 2em 1.1em 0;
    position: relative;
    font-family: 'Poppins';
    font-weight: 600;
    color: #125a69;
    line-height: 1.3;
}
.acs-faq__q::-webkit-details-marker {
    display: none;
}
.acs-faq__q:after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 400;
    color: #398cac;
    line-height: 1;
}
.acs-faq__item[open] .acs-faq__q:after {
    content: "–";
}
.acs-faq__a {
    padding: 0 0 1.3em;
}
.acs-faq__a p {
    margin: 0;
    line-height: 1.6;
    max-width: 70ch;
}
.acs-faq__a a {
    color: #398cac;
    font-weight: 600;
}

/* -- Buscador -------------------------------------------------------------- */
.acs-buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5em;
    max-width: 560px;
}
.acs-buscador input[type="search"] {
    flex: 1 1 240px;
    padding: .8em 1em;
    border: 1px solid #c5d8dc;
    border-radius: 50px;
    background: #fff;
    color: #16363c;
    font: inherit;
}
.acs-buscador input[type="search"]:focus-visible {
    outline: 2px solid #398cac;
    outline-offset: 2px;
}
.acs-hero .acs-buscador input[type="search"] {
    border-color: transparent;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}


/* =========================================================================
   FOOTER INSTITUCIONAL + REDES  (Plan de trabajo 2026-08-02)

   TODO se acota a body.acsex-nav-institucional para NO afectar al footer de
   /congreso (que no lleva esa clase). El congreso conserva su footer del tema.
   ========================================================================= */

/* Iconos de red en linea (contacto y footer) */
.acs-red-icon {
    display: block;
}

/* Redes en el bloque de contacto: icono + nombre */
.acs-redes a {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.acs-redes .acs-red-icon {
    width: 18px;
    height: 18px;
}

/* --- Footer institucional (solo fuera de /congreso) ---
   El pie institucional se arma con widgets en las areas «Footer» del tema, asi que
   su maquetado (columnas, tipografia, espaciados) lo pone el propio tema. Aqui solo
   queda lo que el tema no cubre: el color de la franja y el foco visible. */
body.acsex-nav-institucional #e89-footer {
    background: #125a69;
    color: #e4efef;
}
/* Titulos y enlaces, en claro.
   Los titulos hay que forzarlos porque otros dos sitios les ponen un color
   oscuro que aqui seria ilegible, o directamente invisible:

     style.css:1196            #e89-footer h3 { color:#125a69 }  <- el MISMO
                               color que el fondo de esta franja. Es del pie del
                               congreso, que va sobre fondo claro.
     el tema (css-generator)   #e89-footer .widget-title { color: "Footer title
                               color" }, que se configura para ese mismo pie.

   Se cubren h2-h4 y .widget-title porque el titulo puede venir de un widget de
   bloque (que emite el encabezado tal cual) o de un widget clasico (que lo
   envuelve en .widget-title). */
body.acsex-nav-institucional #e89-footer h2,
body.acsex-nav-institucional #e89-footer h3,
body.acsex-nav-institucional #e89-footer h4,
body.acsex-nav-institucional #e89-footer .widget-title,
body.acsex-nav-institucional #e89-footer a {
    color: #e4efef;
}
body.acsex-nav-institucional #e89-footer a:hover {
    color: #fff;
}
body.acsex-nav-institucional #e89-footer a:focus-visible {
    outline: 2px solid #e2944c;
    outline-offset: 3px;
    border-radius: 4px;
}


/* =========================================================================
   LOGIN DE ASOCIADOS  (formulario en la Zona, con el diseno del sitio)
   ========================================================================= */

.acs-login #loginform {
    margin: 0;
}
.acs-login p {
    margin: 0 0 1.1em;
}
.acs-login label {
    display: block;
    font-size: .85em;
    font-weight: 600;
    color: #125a69;
    margin-bottom: .4em;
}
.acs-login input[type="text"],
.acs-login input[type="password"] {
    width: 100%;
    padding: .7em .8em;
    border: 1px solid #c5d8dc;
    border-radius: 10px;
    background: #fff;
    color: #16363c;
    font: inherit;
}
.acs-login input:focus-visible {
    outline: 2px solid #398cac;
    outline-offset: 2px;
}
.acs-login .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 400;
    color: #16363c;
}
.acs-login .login-submit input[type="submit"] {
    display: inline-block;
    border: 2px solid #e2944c;
    background: #e2944c;
    color: #fff;
    padding: .8em 1.6em;
    border-radius: 50px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all .3s ease;
}
.acs-login .login-submit input[type="submit"]:hover {
    background: #16363c;
    border-color: #16363c;
}
.acs-login__extra {
    margin: 0 0 1em;
}
.acs-login__extra a,
.acs-login__nota a {
    color: #398cac;
    font-weight: 600;
}
.acs-login__nota {
    font-size: .9em;
    line-height: 1.5;
    color: #16363c;
    border-top: 1px solid #e4efef;
    padding-top: 1.2em;
}


/* =========================================================================
   ENCABEZADO: acceso de asociados

   El acceso lo sirve el filtro e89_element_custom_1 (inc/menu.php), asi que se
   coloca desde Opciones del tema como cualquier otro elemento del encabezado y
   comparte fila con el buscador del tema (element_search).

   El buscador propio que habia aqui se elimino: duplicaba el del tema.

   EN EL CONGRESO los dos elementos se ocultan. Su encabezado es el de la landing
   -logo, menu de anclas y nada mas- y ni el buscador ni el acceso de asociados
   pintan nada alli. Se hace por CSS porque el tema envuelve cada elemento en su
   propio div antes de aplicar el filtro del contenido: aunque este venga vacio, el
   contenedor se imprime igual y dejaria un hueco en la fila.
   ========================================================================= */

body.acsex-nav-congreso .e89-elements.element_search,
body.acsex-nav-congreso .e89-elements.element_custom_1 {
    display: none;
}

/* Acceso (Iniciar sesion / Zona de asociados)
   ------------------------------------------------------------------------
   NIVEL 0: aqui solo va la COLOCACION. Tipografia y color NO se tocan.

   El tema ya estiliza los elementos del encabezado igual que los items del menu
   (bacata/inc/css-generator.php:532):

     #e89-header-nav .e89-elements    -> font-style/weight/size, text-transform y
                                         letter-spacing de "Top menu font", mas su
                                         padding y su margen
     #e89-header-nav .e89-elements a  -> color y :hover de "Elements color"

   Antes se declaraban aqui color, font-weight y font-size, que pisaban esa
   herencia: el acceso se veia con otro tamano y otro color que el resto del menu
   por culpa de este archivo. Al quitarlo, se alinea solo y sigue las Opciones del
   tema como cualquier item. */
.acs-header-login,
.acs-header-user__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
}
.acs-header-user__toggle {
    cursor: pointer;
}
.acs-header-login .acs-icon {
    stroke: currentColor;
    fill: none;
}

/* Saludo del asociado logueado + submenú (Mi cuenta / Cerrar sesión) */
.acs-header-user {
    position: relative;
    display: flex;
}
.acs-header-user__avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}
.acs-header-user__chevron {
    stroke: currentColor;
    fill: none;
    transition: transform .15s ease;
}
.acs-header-user:hover .acs-header-user__chevron,
.acs-header-user:focus-within .acs-header-user__chevron {
    transform: rotate(180deg);
}
/* PANEL desplegable del acceso.
   Estilo propio, no heredado del submenu del tema: fondo oscuro, sin radio y
   apertura por margen. El hueco entre el enlace y el panel lo cubre el :before de
   arriba, para que el raton pueda bajar sin que se cierre. */
.acs-header-user__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    background: #16363c;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 30;
}
.acs-header-user:hover .acs-header-user__menu,
.acs-header-user:focus-within .acs-header-user__menu {
    opacity: 1;
    visibility: visible;
    margin-top: 15px;
}
.acs-header-user__menu li { 
    margin: 0;
}
#e89-header-nav .acs-header-user__menu a {
    display: block;
    margin: 5px;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    font-size: .85em;
    line-height: 1.2em;
}
/* El #e89-header-nav es necesario aqui: sin el, esta regla (0,2,2) pierde contra
   la de arriba (1,1,1) y el color del hover no llega a aplicarse. */
#e89-header-nav .acs-header-user__menu li:hover a,
#e89-header-nav .acs-header-user__menu a:focus-visible {
    color: #c5d8dc;
}

/* El ancho del encabezado NO se fija aqui: lo pone el tema con Content width
   (1200px) mientras "Full width header content" este en Disabled. Habia una regla
   que lo repetia a mano y solo servia para tapar esa opcion mal puesta.

   En movil tampoco hace falta ocultar nada: los elementos del encabezado viven
   dentro de #e89-header-nav, que el tema ya oculta por debajo de 1024px
   (bacata/css/stylesheet.css:752). Alli el buscador esta en el menu deslizante y
   el acceso, en el menu hamburguesa (inc/login.php). */


/* =========================================================================
   MODERNIZACIÓN VISUAL (2026-08) — SOLO institucional (body.acsex-nav-institucional);
   /congreso NO lleva esa clase, así que queda intacto. No cambia la paleta ni las
   tipografías: solo esquinas más redondeadas, sombras más suaves y micro-interacciones
   sutiles (respetando prefers-reduced-motion). Reversible con el tag
   pre-rediseno-2026-08-03.
   ========================================================================= */
body.acsex-nav-institucional {
    --acs-r: 18px;       /* radio de tarjetas */
    --acs-r-sm: 12px;    /* radio de campos */
    --acs-shadow: 0 4px 18px rgba(18, 90, 105, .07);
    --acs-shadow-hover: 0 14px 34px rgba(18, 90, 105, .15);
}

/* Tarjetas: radio y sombra homogéneos + leve elevación al pasar el ratón */
body.acsex-nav-institucional .acs-card,
body.acsex-nav-institucional .acs-perfil,
body.acsex-nav-institucional .acs-programa,
body.acsex-nav-institucional .acs-tarifa,
body.acsex-nav-institucional .acs-acceso,
body.acsex-nav-institucional .acs-cifra,
body.acsex-nav-institucional .acs-fieldset {
    border-radius: var(--acs-r);
    box-shadow: var(--acs-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
body.acsex-nav-institucional .acs-card:hover,
body.acsex-nav-institucional .acs-perfil:hover,
body.acsex-nav-institucional .acs-programa:hover,
body.acsex-nav-institucional .acs-tarifa:hover,
body.acsex-nav-institucional .acs-acceso:hover {
    transform: translateY(-4px);
    box-shadow: var(--acs-shadow-hover);
}

/* Imágenes y placeholders más redondeados */
body.acsex-nav-institucional .acs-imgph,
body.acsex-nav-institucional .acs-card-img,
body.acsex-nav-institucional .acs-ficha-img,
body.acsex-nav-institucional .acs-programa__logo {
    border-radius: var(--acs-r);
}

/* Campos de formulario: esquinas suaves y anillo de foco claro */
body.acsex-nav-institucional .acs-form input:not([type=checkbox]):not([type=radio]),
body.acsex-nav-institucional .acs-form select,
body.acsex-nav-institucional .acs-form textarea,
body.acsex-nav-institucional .acs-filtro select,
body.acsex-nav-institucional .acs-filtro input[type="search"] {
    border-radius: var(--acs-r-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.acsex-nav-institucional .acs-form input:not([type=checkbox]):not([type=radio]):focus,
body.acsex-nav-institucional .acs-form select:focus,
body.acsex-nav-institucional .acs-form textarea:focus,
body.acsex-nav-institucional .acs-filtro select:focus,
body.acsex-nav-institucional .acs-filtro input[type="search"]:focus {
    border-color: #398cac;
    box-shadow: 0 0 0 3px rgba(57, 140, 172, .18);
    outline: none;
}

/* Botones: transición + leve elevación (solo institucional) */
body.acsex-nav-institucional .acs-btn {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.acsex-nav-institucional .acs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(226, 148, 76, .28);
}

/* Profundidad sutil en las franjas teal (mismos tokens: #125a69 → #16363c) */
body.acsex-nav-institucional .acs-hero,
body.acsex-nav-institucional .acs-franja--teal {
    background-image: linear-gradient(155deg, #125a69 0%, #16363c 100%);
}

/* Filtros del directorio: tarjeta más suave */
body.acsex-nav-institucional .acs-filtros {
    border-radius: var(--acs-r);
    box-shadow: var(--acs-shadow);
}

@media (prefers-reduced-motion: reduce) {
    body.acsex-nav-institucional .acs-card,
    body.acsex-nav-institucional .acs-perfil,
    body.acsex-nav-institucional .acs-programa,
    body.acsex-nav-institucional .acs-tarifa,
    body.acsex-nav-institucional .acs-acceso,
    body.acsex-nav-institucional .acs-btn {
        transition: none;
    }
    body.acsex-nav-institucional .acs-card:hover,
    body.acsex-nav-institucional .acs-perfil:hover,
    body.acsex-nav-institucional .acs-programa:hover,
    body.acsex-nav-institucional .acs-tarifa:hover,
    body.acsex-nav-institucional .acs-acceso:hover,
    body.acsex-nav-institucional .acs-btn:hover {
        transform: none;
    }
}

/* -- Trazabilidad en Mi cuenta (afiliaciones + congresos) ----------------- */
.acs-traza { margin-top: 2.5em; }
.acs-traza__titulo { color: #125a69; margin: 1.4em 0 .5em; font-size: 1.1em; }
.acs-traza__tabla { width: 100%; border-collapse: collapse; }
.acs-traza__tabla th,
.acs-traza__tabla td { text-align: left; padding: .6em .8em; border-bottom: 1px solid #e4efef; font-size: .92em; }
.acs-traza__tabla th { color: #125a69; }
.acs-membresia__cert { margin: 1em 0 0; }

/* -- Formulario ACF de "Mi ficha": integrarlo con la marca -------------- */
body.acsex-nav-institucional .acf-form .acf-label label { color: #125a69; font-weight: 600; }
body.acsex-nav-institucional .acf-form .acf-fields.-top > .acf-field { border-top-color: #e4efef; }
body.acsex-nav-institucional .acf-form .acf-field .description { color: #6b7f83; }