/* ==========================================================================
   local_anuario — design-system del anuario público (prefijo an-*).
   Réplica en modo oscuro navy del diseño original (design-specs/spec-listado.md
   y spec-verificacion-layout-mapa.md), con la paleta sofrocay real:
   sofrocay-500 #305B91 · sofrocay-800 #1a3461 (navy welcome) · grises Tailwind.
   Las fuentes (Google Sans Flex + Cormorant Garamond) se cargan con
   <link preconnect> en el <head> desde lib.php, NO con @import aquí
   (el @import es render-blocking en cascada). Ver local_anuario_setup_public_page.
   ========================================================================== */

/* ===== Tokens ===== */
/* Tokens de diseño en :root (loop c27): además del layout público
   .local-anuario-page, las páginas ADMIN del plugin (editar.php, espace.php,
   moderar.php…) usan estas variables pero corren en el layout del campus SIN
   la clase .local-anuario-page → sin :root, var(--an-sofrocay-*) quedaba
   undefined y el hero del tour de bienvenue salía blanco (texto ilegible).
   Los tokens son solo VALORES (no reglas de layout), seguros en :root. */
:root,
.local-anuario-page {
    --an-sofrocay-300: #7a9cc4;
    --an-sofrocay-400: #5e87b7;
    --an-sofrocay-500: #305B91;
    --an-sofrocay-600: #2a5083;
    --an-sofrocay-700: #224272;
    --an-sofrocay-800: #1a3461;
    --an-sofrocay-900: #0f2140;
    /* MODO LIGHT (foco actual, Mario 2026-07-07) — valores base Tailwind del
       diseño original. Fondos claros; la escala de grises de TEXTO se invierte
       respecto al dark (gray-100..300 pasan a oscuros = texto; gray-600 a claro
       = bordes/dots). El hero (imagen+overlay) y el footer (gradiente navy) se
       mantienen oscuros como en el original. La variante dark queda al final. */
    --an-bg: #f9fafb;          /* gray-50 — fondo página */
    --an-surface: #ffffff;     /* white — cards */
    --an-border: #e5e7eb;      /* gray-200 */
    --an-border-soft: #f3f4f6; /* gray-100 (breadcrumb) */
    --an-gray-600: #9ca3af;    /* bordes suaves / dots / dim */
    --an-gray-500: #6b7280;    /* texto terciario */
    --an-gray-400: #4b5563;    /* texto secundario */
    --an-gray-300: #374151;    /* texto */
    --an-gray-200: #1f2937;    /* texto fuerte */
    --an-gray-100: #111827;    /* texto principal (gray-900) */
    --an-shadow: rgba(0, 0, 0, 0.08);
    /* Elevación light (sombras suaves grises tipo Doctolib/Tailwind). En dark
       estas 4 variables se redefinirían a rgba(17,24,39,X) fuertes. */
    --an-elev-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --an-elev-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --an-elev-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --an-elev-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --an-emerald-400: #059669; /* emerald-600, más legible sobre blanco */
    --an-emerald-500: #10b981;
    /* Tipografía de marca (directiva Mario 2026-07-08): Trade Gothic Next LT
       Pro en TODO el anuario — también en el rol "serif" de los titulares
       (antes Cormorant Garamond; sus @font-face siguen en fonts.css para poder
       revertir cambiando solo estos dos tokens). */
    --an-serif: 'Trade Gothic Next LT Pro', 'Helvetica Neue', Arial, sans-serif;
    --an-sans: 'Trade Gothic Next LT Pro', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
}

/* ===== Reset del layout embedded de Moodle ===== */
body.local-anuario-page {
    background: var(--an-bg);
    margin: 0;
}
.local-anuario-page #page,
.local-anuario-page #page-content,
.local-anuario-page #region-main,
.local-anuario-page [role="main"] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
}
.local-anuario-page #page-wrapper::after { display: none; }

.an-page {
    min-height: 100vh;
    background: var(--an-bg);
    font-family: var(--an-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--an-gray-100);
    -webkit-font-smoothing: antialiased;
}
.an-page a { text-decoration: none; }
.an-page a:hover { text-decoration: none; }
.an-page svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Contenedor estándar (max-w-7xl) */
.an-container {
    max-width: 80rem;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px)  { .an-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .an-container { padding-left: 2rem; padding-right: 2rem; } }

/* WCAG 2.2 · 2.4.11 Focus Not Obscured (Minimum, AA): el header (.an-header) es
   sticky en top:0 (nav 4rem + breadcrumbbar; +utilbar en ≥1024px). Sin esto, al
   TABULAR o saltar a un ancla, el navegador desplaza el elemento enfocado al
   borde superior del viewport, donde el header lo taparía por completo. El
   scroll-padding-top del contenedor de scroll (html) reserva la altura del header
   al hacer scroll-into-view, así el foco de teclado nunca queda oculto. Cubre la
   altura del header en el peor caso (utilbar + nav + breadcrumbbar ≈ 132px medidos
   en :8091), despejándolo por completo. (Reemplaza el scroll-margin-top puntual de
   #an-search, que solo cubría ese ancla.) */
html { scroll-padding-top: 8.5rem; }

/* ==========================================================================
   HEADER (PublicLayout B.1)
   ========================================================================== */
.an-header {
    /* Sin sticky: el header del WP real de sofrocay.com se va con el scroll
       (verificado c65 — 0 elementor-sticky). El sticky heredado del spec B.1
       tapaba la contact bar (z50 sobre z30) y el panel lateral. Al scrollear
       quedan las barras de acción finas, patrón Doctolib. */
    background: var(--an-bg);
    border-bottom: 1px solid rgba(55, 65, 81, 0.6);
}

/* Utility bar (solo ≥1024px) */
.an-utilbar {
    display: none;
    border-bottom: 1px solid var(--an-border);
    background: rgba(31, 41, 55, 0.8);
}
@media (min-width: 1024px) { .an-utilbar { display: block; } }
.an-utilbar-inner {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 2rem;
}
.an-utilbar-links a {
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    color: var(--an-gray-500);
    transition: color 0.15s ease;
}
.an-utilbar-links a:hover { color: var(--an-sofrocay-400); }

/* Nav principal */
.an-nav {
    max-width: 80rem;
    margin: 0 auto;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}
@media (min-width: 640px)  { .an-nav { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .an-nav { padding: 0 2rem; } }
.an-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
}
.an-nav-brand img { border-radius: 8px; display: block; }
.an-nav-items { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 1024px) { .an-nav-items { display: flex; } }
.an-nav-items a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-gray-300);
    transition: background 0.15s ease, color 0.15s ease;
}
.an-nav-items a:hover { background: var(--an-surface); color: var(--an-gray-100); }
.an-nav-items a svg { width: 14px; height: 14px; opacity: 0.7; }
.an-nav-cta { display: flex; align-items: center; gap: 0.5rem; }
.an-nav-connect {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-gray-300);
    transition: background 0.15s ease, color 0.15s ease;
}
.an-nav-connect:hover { background: var(--an-surface); color: var(--an-gray-100); }

/* Breadcrumb bar (B.2) */
.an-breadcrumbbar { border-top: 1px solid var(--an-border-soft); }
.an-breadcrumb {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}
@media (min-width: 640px)  { .an-breadcrumb { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .an-breadcrumb { padding-left: 2rem; padding-right: 2rem; } }
.an-breadcrumb a { color: var(--an-gray-400); transition: color 0.15s ease; }
.an-breadcrumb a:hover { color: var(--an-sofrocay-400); }
.an-breadcrumb .an-crumb-current { color: var(--an-gray-300); font-weight: 500; }
.an-crumb-sep { width: 14px; height: 14px; color: var(--an-gray-600); }

.an-main { display: block; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.an-hero { position: relative; overflow: hidden; }
.an-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.an-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(15, 33, 64, 0.70) 0%,
        rgba(15, 33, 64, 0.60) 50%,
        rgba(15, 33, 64, 0.80) 100%);
}
.an-hero-inner {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 3.5rem 1rem 2.5rem;
    text-align: center;
}
@media (min-width: 640px) { .an-hero-inner { padding-top: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .an-hero-inner { padding-left: 2rem; padding-right: 2rem; } }
.an-hero-title {
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: #fff;
    margin: 0;
}
@media (min-width: 640px)  { .an-hero-title { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .an-hero-title { font-size: 3rem; line-height: 1; } }
.an-hero-sub {
    margin: 1rem auto 0;
    max-width: 42rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 640px) { .an-hero-sub { font-size: 1.125rem; } }
.an-hero-sub strong { color: #fff; }

/* 2. Chips */
.an-chips-wrap { margin: 2rem auto 0; max-width: 48rem; }
.an-chips-label {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}
.an-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.an-chip {
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: all 0.15s ease;
}
.an-chip:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
.an-chip-active,
.an-chip-active:hover {
    background: #fff;
    color: var(--an-sofrocay-700);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 3. Búsqueda */
.an-search { margin: 1.5rem auto 0; max-width: 42rem; }
.an-search-box { position: relative; }
.an-search-icon {
    pointer-events: none;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--an-gray-500);
}
.an-search-box input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 1rem;
    background: var(--an-surface);
    padding: 1rem 1.5rem 1rem 3.5rem;
    font: inherit;
    font-size: 1rem;
    color: var(--an-gray-100);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    transition: box-shadow 0.15s ease;
}
.an-search-box input::placeholder { color: var(--an-gray-500); }
.an-search-box input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* 4. Trust bar */
.an-trust {
    margin: 2rem auto 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}
.an-trust strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.an-trust-sep { display: none; }
@media (min-width: 640px) { .an-trust-sep { display: inline; } }

/* ==========================================================================
   5. CARD DE FILTROS (overlap)
   ========================================================================== */
.an-filters-card {
    margin-top: -3rem;
    position: relative;
    z-index: 10;
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1.25rem;
    box-shadow: var(--an-elev-lg);
}
.an-filters-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 640px) {
    .an-filters-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
.an-filters-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-gray-400);
}
.an-filters-title svg { width: 16px; height: 16px; }
.an-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
@media (min-width: 640px) {
    .an-filter-group { flex-direction: row; align-items: center; gap: 0.5rem; }
}
.an-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--an-gray-500);
    flex-shrink: 0;
}
.an-filter-opts { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.an-filter-btn {
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--an-border);
    color: var(--an-gray-400);
    transition: all 0.15s ease;
}
/* Hover AA (auditoría c130): gray-600 sobre gray-300 daba 4.06:1 (<4.5). */
.an-filter-btn:hover { background: var(--an-sofrocay-500); color: #fff; }
.an-filter-btn-active,
.an-filter-btn-active:hover {
    background: var(--an-sofrocay-500);
    color: #fff;
    box-shadow: var(--an-elev-sm);
}
.an-filter-sep {
    display: none;
    height: 1.5rem;
    width: 1px;
    background: var(--an-gray-600);
}
@media (min-width: 640px) { .an-filter-sep { display: block; } }

/* ==========================================================================
   6. MAPA
   ========================================================================== */
.an-map-section { padding-top: 2.5rem; }
.an-map-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.an-map-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--an-gray-300);
}
.an-map-title svg { width: 16px; height: 16px; color: var(--an-sofrocay-500); }
.an-map-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    box-shadow: var(--an-elev-sm);
}
.an-map-canvas {
    height: 300px;
    width: 100%;
    background: var(--an-surface);
    z-index: 0;
}
@media (min-width: 640px) { .an-map-canvas { height: 400px; } }
.an-map-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
    transition: color 0.15s ease;
}
.an-map-toggle:hover { color: var(--an-sofrocay-300); }

/* Popup Leaflet en oscuro (el wrapper por defecto es blanco) */
.an-map-canvas .leaflet-popup-content-wrapper {
    background: var(--an-surface);
    color: var(--an-gray-100);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}
.an-map-canvas .leaflet-popup-tip { background: var(--an-surface); }
.an-map-popup { min-width: 180px; padding: 0.25rem; font-family: var(--an-sans); }
.an-map-popup strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--an-gray-100); }
.an-map-popup p { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--an-gray-400); }
.an-map-popup a {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-sofrocay-300) !important;
}
.an-map-canvas .leaflet-control-attribution {
    background: rgba(31, 41, 55, 0.8);
    color: var(--an-gray-500);
}
.an-map-canvas .leaflet-control-attribution a { color: var(--an-gray-400); }

/* Highlight de tarjeta al pulsar un pin (anillo sofrocay 2s) */
.an-card-highlight {
    box-shadow: 0 0 0 2px var(--an-sofrocay-500), 0 0 0 4px var(--an-bg) !important;
}

/* ==========================================================================
   7. TOOLBAR DE RESULTADOS
   ========================================================================== */
.an-results { padding-top: 3rem; padding-bottom: 3rem; }
.an-results-header {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .an-results-header { flex-direction: row; align-items: center; justify-content: space-between; }
}
.an-results-count {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
/* Heading de recuento de las landings (lieu/departement/pays/region): nivel h2
   entre el h1 del título y los h3 de las tarjetas (heading-order, c62). Discreto
   para no competir con el h1. */
.an-lieu-count {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--an-gray-400);
}
.an-results-sub {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--an-gray-400);
}
.an-results-tools { display: flex; align-items: center; gap: 1rem; }

/* Dropdown de ordenación (details/summary, SSR) */
.an-sort { position: relative; }
.an-sort summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid var(--an-gray-600);
    background: var(--an-surface);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-gray-400);
    transition: background 0.15s ease;
}
.an-sort summary::-webkit-details-marker { display: none; }
.an-sort summary:hover { background: var(--an-border); }
.an-sort summary svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.an-sort[open] summary svg { transform: rotate(180deg); }
.an-sort-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    margin-top: 0.25rem;
    width: 11rem;
    border-radius: 0.5rem;
    border: 1px solid var(--an-gray-600);
    background: var(--an-surface);
    padding: 0.25rem 0;
    box-shadow: var(--an-elev-lg);
}
.an-sort-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-align: left;
    color: var(--an-gray-400);
}
.an-sort-menu a:hover { background: var(--an-border); }
.an-sort-menu a.an-sort-active {
    background: rgba(15, 33, 64, 0.3);
    font-weight: 600;
    color: var(--an-sofrocay-300);
}
.an-verify-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
    transition: color 0.15s ease;
}
.an-verify-link:hover { color: var(--an-sofrocay-300); }
.an-verify-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   8. TARJETA DE SOFRÓLOGO
   ========================================================================== */
.an-cards { display: flex; flex-direction: column; gap: 1rem; }

/* «Autour de moi» (Mario 2026-07-11): rail vertical de distancias a la
   izquierda de la lista — línea continua + hito «à X km» por resultado. */
/* Geometría del rail (barrido c55: el punto no enhebraba la línea — estaban
   anclados a contenedores distintos con ~60px de desfase). Ahora TODO se ancla
   al borde izquierdo de la card: línea en -28px (centro -27), label de -96 a
   -38 (gap 10px con la línea), punto de 10px centrado sobre la línea. */
.an-cards-geo { margin-left: 96px; position: relative; }
.an-cards-geo::before {
    content: "";
    position: absolute; top: 14px; bottom: 14px; left: -28px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--an-sofrocay-400), #d4dce8);
}
.an-cards-geo .an-card { position: relative; }
.an-card-dist {
    position: absolute; left: -96px; top: 18px;
    width: 58px; text-align: right;
    font-size: 12.5px; font-weight: 600; color: var(--an-sofrocay-700);
    line-height: 1.2;
}
.an-card-dist i {
    position: absolute; left: 64px; top: 3px;
    width: 10px; height: 10px; border-radius: 9999px;
    background: var(--an-sofrocay-500);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d4dce8;
}
@media (max-width: 640px) {
    /* En móvil el rail cede: la distancia pasa a chip dentro de la tarjeta. */
    .an-cards-geo { margin-left: 0; }
    .an-cards-geo::before { display: none; }
    .an-card-dist {
        position: static; width: auto; text-align: left;
        display: inline-block; background: #eef2f8; border-radius: 999px;
        padding: 2px 10px; margin: 0 0 6px;
    }
    .an-card-dist i { display: none; }
}

/* Aviso sereno de radio ampliado — dato, no urgencia. */
.an-radius-notice {
    margin: 0 0 16px; padding: 10px 16px;
    background: #eef2f8; border-left: 3px solid var(--an-sofrocay-400);
    border-radius: 8px; color: var(--an-sofrocay-800); font-size: 14px;
}
/* Fallback/filtro visio (idea 55): verde suave — es una PUERTA, no un límite. */
.an-visio-notice {
    background: #ecfdf5; border-left-color: var(--an-emerald-500);
    color: #065f46;
}
.an-visio-notice a { color: #047857; font-weight: 600; text-decoration: underline; }

.an-card {
    position: relative; /* ancla del stretched-link (::after del nombre) */
    display: flex;
    gap: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1.25rem;
    box-shadow: var(--an-elev-sm);
    transition: box-shadow 0.15s ease;
}
.an-card:hover {
    box-shadow: var(--an-elev-md);
}
/* Tarjeta entera clicable (patrón Doctolib): el nombre es el enlace y su ::after
   se estira sobre toda la tarjeta. Enlace único con texto descriptivo (el nombre)
   → WCAG 2.4.4; un solo tab-stop por tarjeta → navegación de teclado limpia. */
.an-card-namelink {
    color: inherit;
    text-decoration: none;
}
.an-card-namelink::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.an-card-namelink:hover { text-decoration: underline; }
/* Foco visible a nivel de TARJETA (2.4.7): el ring del enlace solo rodearía el
   nombre; se muestra en toda la superficie clicable. */
.an-card:focus-within {
    outline: 2px solid var(--an-sofrocay-500);
    outline-offset: 2px;
    box-shadow: var(--an-elev-md);
}
.an-card-namelink:focus,
.an-card-namelink:focus-visible { outline: none; }
/* El CTA es afford. visual: reacciona al hover de la TARJETA, no propio. */
.an-card:hover .an-card-cta { color: var(--an-sofrocay-300); }
.an-card-sophrosite { border-left: 2px solid var(--an-emerald-500); }
.an-card-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    width: 6rem;
    border-radius: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.an-card-info { flex: 1; min-width: 0; }
.an-card-namerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.an-card-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
.an-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    background: rgba(15, 33, 64, 0.5);
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-sofrocay-300);
}
.an-card-badge svg { width: 12px; height: 12px; }
.an-card-sophrosite-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--an-emerald-400);
}
.an-card-location {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--an-gray-400);
}
.an-card-excerpt {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--an-gray-400);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.an-card-cta {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
    transition: color 0.15s ease;
}
.an-card-cta:hover { color: var(--an-sofrocay-300); }
.an-card-cta svg { width: 14px; height: 14px; }

/* Paginación */
.an-pagination {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.an-pagination-info { font-size: 0.75rem; color: var(--an-gray-500); }

/* 9. Estado vacío */
.an-empty {
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 5rem 1rem;
    text-align: center;
    box-shadow: var(--an-elev-sm);
}
.an-empty svg { width: 40px; height: 40px; color: var(--an-gray-600); }
.an-empty h3 {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--an-gray-300);
}
.an-empty p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--an-gray-500); }

/* ==========================================================================
   10. BLOQUE DE TRANQUILIZACIÓN
   ========================================================================== */
.an-reassure { padding-top: 3rem; padding-bottom: 4rem; }
.an-reassure-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .an-reassure-grid { grid-template-columns: 1fr 1fr; } }
.an-reassure-card {
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 2rem;
}
.an-reassure-card-navy {
    border-color: var(--an-sofrocay-800);
    background: rgba(15, 33, 64, 0.2);
}
.an-reassure-card h3 {
    margin: 0;
    font-family: var(--an-serif);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--an-gray-100);
}
.an-reassure-card ul {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.an-reassure-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--an-gray-400);
}
.an-bullet {
    margin-top: 0.375rem;
    height: 0.375rem;
    width: 0.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--an-gray-600);
}
.an-bullet-blue { background: var(--an-sofrocay-400); }

/* ==========================================================================
   FOOTER (PublicLayout B.3)
   ========================================================================== */
.an-footer {
    background: linear-gradient(135deg, #1a2332 0%, #111827 50%, #0f1420 100%);
    color: var(--an-gray-400);
}
.an-footer a { color: inherit; transition: color 0.15s ease; }
.an-footer-top {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--an-border-soft);
}
@media (min-width: 640px) {
    .an-footer-top { flex-direction: row; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; }
}
.an-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}
.an-footer-brand img { border-radius: 6px; display: block; }
.an-footer-brand-dim { color: var(--an-gray-500); font-size: 0.75rem; font-weight: 400; }
.an-footer-newsletter {
    border-radius: 0.5rem;
    border: 1px solid var(--an-border);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-gray-400);
    transition: all 0.15s ease;
}
.an-footer-newsletter:hover { border-color: var(--an-sofrocay-500); color: #fff; }
.an-footer-quote-row {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--an-border-soft);
}
@media (min-width: 640px) { .an-footer-quote-row { padding-left: 1.5rem; padding-right: 1.5rem; } }
.an-footer-quote {
    margin: 0;
    text-align: center;
    font-family: var(--an-serif);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--an-gray-300);
}
@media (min-width: 640px)  { .an-footer-quote { text-align: left; font-size: 1rem; } }
@media (min-width: 1024px) { .an-footer-quote { font-size: 1.125rem; } }
.an-footer-quote > span { color: var(--an-sofrocay-400); }
.an-footer-quote-author {
    font-family: var(--an-sans);
    font-style: normal;
    font-size: 0.75rem;
    color: var(--an-gray-400) !important;
    margin-left: 0.5rem;
}
.an-footer-contact {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 0.375rem;
    font-size: 11px;
    color: var(--an-gray-500);
}
@media (min-width: 640px) { .an-footer-contact { justify-content: flex-start; font-size: 0.75rem; } }
.an-footer-contact a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--an-gray-500); }
.an-footer-contact a:hover { color: #fff; }
.an-footer-contact svg { width: 12px; height: 12px; color: var(--an-gray-600); }
.an-footer-sep { height: 0.625rem; width: 1px; background: var(--an-border); }
.an-footer-bottom {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
    .an-footer-bottom { flex-direction: row; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; }
}
.an-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--an-gray-500);
}
.an-footer-legal a:hover { color: var(--an-gray-300); }
.an-footer-pipe { color: var(--an-border); }

/* Aviso de degradación */
.an-erp-down { padding-bottom: 3rem; }

/* ==========================================================================
   FICHA (spec-ficha.md) — prefijo an-f*
   ========================================================================== */

/* Botones compartidos */
.an-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background: var(--an-sofrocay-500);
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease, transform 0.1s ease;
}
.an-btn-primary:hover { background: var(--an-sofrocay-600); }
.an-btn-primary:active { transform: scale(0.97); }
.an-btn-primary svg { width: 16px; height: 16px; }
.an-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--an-gray-600);
    border-radius: 0.75rem;
    background: var(--an-border);
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-gray-200) !important;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.an-btn-secondary:hover { background: var(--an-gray-600); }
.an-btn-secondary:active { transform: scale(0.97); }
.an-btn-secondary svg { width: 16px; height: 16px; color: var(--an-gray-400); }
.an-btn-icon { padding: 0.625rem 1rem; }

/* Contenedor de la ficha (max-w-6xl) */
.an-fcontainer {
    max-width: 72rem;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px)  { .an-fcontainer { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .an-fcontainer { padding-left: 2rem; padding-right: 2rem; } }

/* 1. Barra breadcrumb propia */
.an-fichabar {
    border-bottom: 1px solid var(--an-border);
    background: var(--an-surface);
}
.an-fichabar-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}
@media (min-width: 640px) { .an-fichabar-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
.an-fichabar-crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--an-gray-500);
}
.an-fichabar-crumb a { color: var(--an-gray-500); }
.an-fichabar-crumb a:hover { color: var(--an-sofrocay-400); }
.an-fichabar-crumb svg { width: 14px; height: 14px; }
.an-fichabar-crumb span {
    font-weight: 500;
    color: var(--an-gray-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.an-fichabar-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-fichabar-retour:hover { color: var(--an-sofrocay-300); }
.an-fichabar-retour svg { width: 14px; height: 14px; }

/* 2. HERO ficha */
.an-fhero {
    position: relative;
    overflow: visible;
    background: var(--an-surface);
    padding-bottom: 2rem;
}
/* Rediseño editorial claro (feedback Mario 2026-07-11): fuera la foto de
   gabinete de stock (misma en todas las fichas = «AI slop»). En su lugar, una
   banda-cabecera baja y serena en tinte de marca, tipo directorio de salud
   (Doctolib/Médoucine). El <picture>/img se ocultan; el layout de solape se
   conserva pero suavizado. */
.an-fhero-band {
    position: relative;
    height: 7rem;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(48, 91, 145, 0.10) 0%, rgba(48, 91, 145, 0) 60%),
        linear-gradient(180deg, #eef2f8 0%, var(--an-bg) 100%);
    border-bottom: 1px solid var(--an-border-soft);
}
@media (min-width: 640px)  { .an-fhero-band { height: 8.5rem; } }
@media (min-width: 1024px) { .an-fhero-band { height: 9.5rem; } }
.an-fhero-band picture,
.an-fhero-band img { display: none; }
.an-fhero-overlay { display: none; }

/* Fondo elegido por el pro (Mario 2026-07-11: catálogo pix/ficha-fonds del
   slideshow). Banda más generosa cuando hay imagen + scrim inferior suave
   para el solape limpio de la tarjeta. */
.an-fhero-band.has-wallpaper {
    height: 11rem;
    background-size: cover;
    background-position: center 38%;
    border-bottom: none;
}
@media (min-width: 640px)  { .an-fhero-band.has-wallpaper { height: 14rem; } }
@media (min-width: 1024px) { .an-fhero-band.has-wallpaper { height: 16rem; } }
.an-fhero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 33, 64, 0.08) 0%,
        rgba(15, 33, 64, 0.02) 55%, rgba(249, 250, 251, 0.55) 100%);
}

/* Selector de fondo en el editor de perfil: los radios del grupo fluyen en
   rejilla; la miniatura es el propio control (borde de marca al elegir). */
.an-wall-thumb {
    width: 148px; height: 84px; object-fit: cover;
    border-radius: 8px; border: 2px solid transparent;
    vertical-align: middle; cursor: pointer;
    box-shadow: var(--an-elev-sm);
}
.an-wall-none {
    display: inline-flex; align-items: center; justify-content: center;
    width: 148px; height: 84px; border-radius: 8px;
    border: 2px dashed #c4cdd9; color: #5a6b81; font-size: 12.5px;
    text-align: center; padding: 4px 10px; vertical-align: middle; cursor: pointer;
    background: linear-gradient(180deg, #eef2f8 0%, #f9fafb 100%);
}
#fgroup_id_wallgroup .form-check,
#fgroup_id_wallgroup .form-check-inline {
    display: inline-flex; align-items: flex-start; gap: 4px;
    margin: 0 10px 12px 0;
}
#fgroup_id_wallgroup input[type="radio"]:checked + label .an-wall-thumb,
#fgroup_id_wallgroup input[type="radio"]:checked ~ label .an-wall-thumb {
    border-color: var(--an-sofrocay-500);
    box-shadow: 0 0 0 2px rgba(48, 91, 145, 0.25);
}
#fgroup_id_wallgroup input[type="radio"]:checked + label .an-wall-none,
#fgroup_id_wallgroup input[type="radio"]:checked ~ label .an-wall-none {
    border-color: var(--an-sofrocay-500); border-style: solid;
    color: var(--an-sofrocay-700);
}
.an-fprofile {
    position: relative;
    z-index: 10;
    margin-top: -3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1.75rem;
    box-shadow: var(--an-elev-md);
    text-align: center;
}
@media (min-width: 640px) {
    .an-fprofile {
        margin-top: -2.5rem;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1.75rem;
        padding: 2rem 2.25rem;
    }
}
.an-fprofile-avatarwrap { position: relative; flex-shrink: 0; }
.an-fprofile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    width: 6rem;
    border-radius: 9999px;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.6), var(--an-elev-sm);
}
@media (min-width: 640px) { .an-fprofile-avatar { height: 6.5rem; width: 6.5rem; } }
.an-fprofile-check {
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 9999px;
    background: var(--an-surface);
    box-shadow: 0 0 0 2px var(--an-surface);
}
.an-fprofile-check svg { width: 18px; height: 18px; color: var(--an-emerald-400); }
.an-fprofile-info { flex: 1; min-width: 0; }
.an-fprofile-info h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
@media (min-width: 640px) { .an-fprofile-info h1 { font-size: 1.875rem; } }
.an-fprofile-cert {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-fprofile-sub { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--an-gray-400); }
.an-fprofile-badges {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
@media (min-width: 640px) { .an-fprofile-badges { justify-content: flex-start; } }
/* Meta del perfil (feedback Mario 2026-07-11): menos «sopa de pills» — chips
   aireados sin relleno pesado, el icono en tono de marca, separación clara. */
.an-fbadge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 8px;
    background: transparent;
    padding: 0.2rem 0.15rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--an-gray-300);
}
.an-fbadge:not(:last-child)::after {
    content: "";
    width: 3px; height: 3px; border-radius: 9999px;
    background: var(--an-gray-600);
    margin-left: 0.75rem;
}
.an-fbadge svg { width: 14px; height: 14px; color: var(--an-sofrocay-400); }
/* «Sophrosite» sí conserva chip (es un estado, no un dato meta). */
.an-fbadge-emerald {
    color: #065f46; background: #ecfdf5; border-radius: 9999px;
    padding: 0.2rem 0.7rem;
}
.an-fbadge-emerald::after { display: none; }
.an-fprofile-ctas {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media (min-width: 640px) { .an-fprofile-ctas { justify-content: flex-start; } }
/* CTAs discretos (feedback Mario 2026-07-11: fuera los «botonacos») — píldoras
   finas de trazo, jerarquía por el borde y el orden, no por la masa de color.
   Elegancia editorial: mismo peso visual que el resto de la tarjeta. */
.an-fprofile-ctas .an-btn-primary,
.an-fprofile-ctas .an-btn-secondary {
    background: transparent;
    /* !important obligado: las bases .an-btn-primary/.an-btn-secondary fijan
       su color con !important y lo pisaban → texto BLANCO invisible sobre la
       tarjeta («botón vacío», visto por Mario en vivo 2026-07-12). Mismo
       patrón documentado en .an-ec-btn-ghost. */
    color: var(--an-sofrocay-700) !important;
    border: 1px solid #cdd8e6;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: border-color .15s, background .15s, color .15s;
}
.an-fprofile-ctas .an-btn-primary:first-child {
    border-color: var(--an-sofrocay-500);
}
.an-fprofile-ctas .an-btn-primary:hover,
.an-fprofile-ctas .an-btn-secondary:hover {
    background: #f2f6fb;
    border-color: var(--an-sofrocay-500);
    color: var(--an-sofrocay-900) !important;
}
.an-fprofile-ctas svg { width: 14px; height: 14px; opacity: 0.75; }
.an-fprofile-ctas .an-btn-icon { padding: 0.5rem 0.7rem; }

/* 3. Sticky contact bar */
.an-fsticky {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--an-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--an-elev-sm);
}
.an-fsticky-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
}
@media (min-width: 640px) { .an-fsticky-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
.an-fsticky-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    /* El overflow-x:auto computa overflow-y:hidden y cortaba verticalmente los
       descendentes (g, y, p) del email/teléfono (feedback Mario 2026-07-11):
       reservar aire vertical dentro del scroller. */
    padding: 0.3rem 0;
    line-height: 1.5;
    font-size: 0.875rem;
}
.an-fsticky-links a { padding: 0.1rem 0; }
.an-fsticky-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    color: var(--an-gray-400);
}
.an-fsticky-links a:hover { color: var(--an-sofrocay-400); }
.an-fsticky-links svg { width: 14px; height: 14px; }
.an-fsticky-links span { display: none; }
@media (min-width: 640px) { .an-fsticky-links span { display: inline; } }

/* Barra de acción fija inferior — SOLO móvil (idea 59, c61). Dos acciones
   máximo, área táctil ≥48px, RDV como primario cuando existe. En local
   convive con la barra de personas (offset vía :has, progresivo). */
.an-fmobilebar { display: none; }
@media (max-width: 639px) {
    .an-fmobilebar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
        display: flex; gap: 1px;
        background: #fff; border-top: 1px solid var(--an-border);
        box-shadow: 0 -4px 16px rgba(15, 33, 64, 0.10);
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }
    .an-fmobilebar a {
        flex: 1; display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; min-height: 48px; border-radius: 12px;
        font-size: 15px; font-weight: 600; text-decoration: none;
    }
    .an-fmobilebar svg { width: 17px; height: 17px; }
    .an-fmobilebar-rdv { background: var(--an-sofrocay-500); color: #fff; }
    .an-fmobilebar-rdv:hover { background: var(--an-sofrocay-600); color: #fff; }
    .an-fmobilebar-contact { border: 1px solid var(--an-sofrocay-500); color: var(--an-sofrocay-700); }
    .an-fmobilebar-contact:first-child { background: var(--an-sofrocay-500); color: #fff; border: none; }
    /* La página respira sobre la barra; la sticky top de iconos queda
       reemplazada por esta en móvil (una sola barra, mejor affordance). */
    body:has(.an-fmobilebar) .an-fmain { padding-bottom: 84px; }
    body:has(.an-fmobilebar) .an-fsticky { display: none; }
    /* Solo-local: si la barra de personas está, la de acción sube. */
    body:has(#personabar) .an-fmobilebar { bottom: 48px; }
}

/* MAIN grid */
.an-fmain { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.an-fgrid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .an-fgrid { grid-template-columns: 2fr 1fr; } }
.an-fcol-main { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.an-fcol-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* Panel lateral pegajoso (idea 51, patrón Doctolib): la columna de acción
   sigue el scroll en desktop — contacto, mapa y CTA siempre a la vista. El
   top deja pasar la sticky de contacto; align-self evita el stretch del grid
   (sin él, sticky no opera). */
@media (min-width: 1024px) {
    .an-fcol-side { position: sticky; top: 4.25rem; align-self: start; }
}
/* Panorámica de la ciudad (Mario 2026-07-12): banda cinemascope serena. */
.an-lieu-panorama {
    margin: 1.75rem 0 2.25rem;
    border-radius: 1rem;
    background-size: cover;
    background-position: center 62%;
    aspect-ratio: 21 / 8;
    box-shadow: var(--an-elev-sm);
}
@media (max-width: 639px) { .an-lieu-panorama { aspect-ratio: 16 / 9; border-radius: 0.75rem; margin: 1rem 0 1.5rem; } }

/* Datos vivos de la landing local (idea 68): línea serena bajo el count y
   el hito de dispo dentro de la card (compacto, sin empujar el layout). */
.an-lieu-live { margin: -0.5rem 0 1.25rem; font-size: 0.875rem; color: var(--an-gray-400); }
.an-card .an-card-rdv { margin: 0.35rem 0 0; font-size: 0.8125rem; }
.an-fside-cta { display: none; }
@media (min-width: 1024px) {
    .an-fside-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; text-align: center; }
    .an-fside-cta .an-btn-primary { justify-content: center; }
    .an-fside-cta .an-rdv-next { margin: 0; }
}

/* Card de sección (columna izquierda, con franja de acento) */
.an-fsection {
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    overflow: hidden;
}
/* Fuera la franja de acento sobre cada card y el icono en cada título
   (feedback Mario 2026-07-11: «AI slop»). El título gana un filete corto de
   marca a la izquierda — ritmo editorial sobrio, sin sopa de iconos. */
.an-fsection-accent { display: none; }
.an-fsection-body { padding: 1.5rem 1.5rem 1.75rem; }
@media (min-width: 640px) { .an-fsection-body { padding: 1.75rem 2rem 2rem; } }
.an-fsection-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--an-border-soft);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--an-gray-100);
}
.an-fsection-title::before {
    content: "";
    width: 3px; height: 1.05em; border-radius: 2px;
    background: var(--an-sofrocay-500);
    flex-shrink: 0;
}
.an-fsection-title svg { display: none; }
.an-fsection-title svg { width: 20px; height: 20px; color: var(--an-sofrocay-500); }

/* Bio */
.an-fbio { margin-top: 1.25rem; font-size: 15px; line-height: 1.625; color: var(--an-gray-400); }
.an-fbio p { margin: 0 0 1rem; }
.an-fbio p:last-child { margin-bottom: 0; }
.an-fapproche {
    margin-top: 1.5rem;
    border-radius: 0.75rem;
    background: rgba(17, 24, 39, 0.5);
    padding: 1.25rem;
    border: 1px solid rgba(55, 65, 81, 0.5);
}
.an-fapproche h3 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
/* Infos pratiques (idea 52): pares étiquette→valeur escaneables. */
.an-finfos { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.an-finfo { display: grid; grid-template-columns: 230px 1fr; gap: 1rem; align-items: baseline; }
.an-finfo dt { font-size: 0.875rem; font-weight: 600; color: var(--an-gray-100); }
.an-finfo dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--an-gray-400); }
@media (max-width: 639px) { .an-finfo { grid-template-columns: 1fr; gap: 0.15rem; } }
.an-fbio-inner { font-size: 0.875rem; line-height: 1.625; color: var(--an-gray-400); }
.an-fbio-inner p { margin: 0 0 0.75rem; }
.an-fbio-inner p:last-child { margin-bottom: 0; }
.an-flangs {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.an-flangs > svg { width: 16px; height: 16px; color: var(--an-gray-400); }
.an-flang {
    display: inline-flex;
    border-radius: 0.375rem;
    background: var(--an-border);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-gray-300);
}

/* Spécialités */
.an-fspecs { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .an-fspecs { grid-template-columns: 1fr 1fr; } }
.an-fspec {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(17, 24, 39, 0.4);
    padding: 0.875rem;
    border: 1px solid rgba(55, 65, 81, 0.5);
    transition: border-color 0.15s ease;
}
.an-fspec:hover { border-color: var(--an-sofrocay-800); }
.an-fspec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--an-surface);
    border: 1px solid var(--an-gray-600);
    color: var(--an-sofrocay-500);
}
.an-fspec-icon svg { width: 16px; height: 16px; }
.an-fspec-name { font-size: 0.875rem; font-weight: 500; color: var(--an-gray-300); }

/* Timeline de formaciones */
.an-ftimeline { margin-top: 1.5rem; }
.an-ftimeline-item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 2rem;
}
.an-ftimeline-item:last-child { padding-bottom: 0; }
.an-ftimeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    width: 1px;
    height: calc(100% - 40px);
    background: var(--an-border);
}
.an-ftimeline-dot {
    position: relative;
    z-index: 10;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--an-border);
    box-shadow: 0 0 0 4px var(--an-surface);
}
.an-ftimeline-dot svg { width: 16px; height: 16px; color: var(--an-sofrocay-500); }
.an-ftimeline-content { flex: 1; min-width: 0; }
.an-ftimeline-title { margin: 0; font-weight: 600; color: var(--an-gray-100); }
.an-ftimeline-meta {
    margin-top: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--an-gray-500);
}
.an-ftimeline-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.an-ftimeline-meta svg { width: 12px; height: 12px; }

/* CTA final */
.an-fcta {
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 2rem;
    text-align: center;
}
@media (min-width: 640px) { .an-fcta { padding: 3rem; } }
.an-fcta h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
@media (min-width: 640px) { .an-fcta h2 { font-size: 1.875rem; } }
.an-fcta p {
    margin: 0.75rem auto 0;
    max-width: 32rem;
    font-size: 0.875rem;
    color: var(--an-gray-400);
}
.an-fcta-btns {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
/* Mismo lenguaje discreto que los CTAs del hero (barrido c55: el botonaco
   volvía por la puerta de abajo). */
.an-fcta-btns .an-btn-primary,
.an-fcta-btns .an-btn-secondary {
    /* !important: la base fija su color con !important (ver .an-fprofile-ctas). */
    background: transparent; color: var(--an-sofrocay-700) !important;
    border: 1px solid #cdd8e6; border-radius: 999px;
    padding: 0.55rem 1.2rem; font-size: 0.9rem; font-weight: 500;
    box-shadow: none;
}
.an-fcta-btns .an-btn-primary { border-color: var(--an-sofrocay-500); }
.an-fcta-btns .an-btn-primary:hover,
.an-fcta-btns .an-btn-secondary:hover {
    background: #f2f6fb; border-color: var(--an-sofrocay-500);
    color: var(--an-sofrocay-900) !important;
}

/* SIDEBAR cards */
.an-fcard {
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.an-fcard h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
.an-fcontact-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.an-fcontact-list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0 -0.5rem;
    font-size: 0.875rem;
    color: var(--an-gray-400);
    transition: background 0.15s ease, color 0.15s ease;
}
.an-fcontact-list a:hover { background: rgba(55, 65, 81, 0.5); color: var(--an-sofrocay-400); }
.an-fcontact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--an-bg);
    border: 1px solid var(--an-border);
}
.an-fcontact-icon svg { width: 16px; height: 16px; color: var(--an-gray-400); }
.an-fcontact-icon-linkedin svg { color: #60a5fa; }
.an-fcontact-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-fcontact-weblink .an-fcontact-text { color: var(--an-sofrocay-400); }

/* Localisation */
.an-fcard-map { padding: 0; overflow: hidden; }
.an-fminimap { height: 200px; width: 100%; z-index: 0; background: var(--an-bg); overflow: hidden; }
.an-fcard-map-body { padding: 1.25rem; }
.an-flocation {
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--an-gray-400);
}
.an-flocation > svg { width: 16px; height: 16px; color: var(--an-sofrocay-500); margin-top: 2px; flex-shrink: 0; }
.an-flocation p { margin: 0; }
.an-flocation-ville { font-weight: 500; color: var(--an-gray-100); }
.an-fgmaps {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-fgmaps:hover { color: var(--an-sofrocay-300); }
.an-fgmaps svg { width: 14px; height: 14px; }

/* Certificat vérifié */
.an-fcert-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.an-fcert-title svg { width: 20px; height: 20px; color: var(--an-emerald-400); }
.an-fcert-row {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--an-gray-400);
}
.an-fcert-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
.an-fcert-banner {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(6, 78, 59, 0.2);
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(6, 95, 70, 0.3);
}
.an-fcert-banner svg { width: 16px; height: 16px; color: var(--an-emerald-400); flex-shrink: 0; }
.an-fcert-banner span { font-size: 0.75rem; font-weight: 500; color: #6ee7b7; }
.an-fcert-verify {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-fcert-verify:hover { color: var(--an-sofrocay-300); }
.an-fcert-verify svg { width: 14px; height: 14px; }

/* Autres professionnels */
.an-fotros { margin-top: 3rem; }
.an-fotros h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
.an-fotros-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px)  { .an-fotros-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .an-fotros-grid { grid-template-columns: 1fr 1fr 1fr; } }
.an-fmini {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.an-fmini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
}
.an-fmini-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    border-radius: 9999px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}
.an-fmini-body { flex: 1; min-width: 0; display: block; }
.an-fmini-name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--an-gray-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-fmini-name svg { width: 16px; height: 16px; color: var(--an-sofrocay-500); flex-shrink: 0; }
.an-fmini-titre {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--an-gray-400);
}
.an-fmini-loc {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--an-gray-500);
}
.an-fmini-loc svg { width: 12px; height: 12px; }
.an-fmini-arrow { width: 16px; height: 16px; color: var(--an-gray-300); margin-top: 0.25rem; flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; }
.an-fmini:hover .an-fmini-arrow { transform: translateX(2px); color: var(--an-sofrocay-500); }

/* Not found */
.an-notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1rem;
}
.an-notfound svg { width: 48px; height: 48px; color: var(--an-gray-600); }
.an-notfound h2 {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--an-gray-100);
}
.an-notfound p { margin: 0.5rem 0 1.5rem; font-size: 0.875rem; color: var(--an-gray-400); }

/* ==========================================================================
   VERIFICACIÓN (spec-verificacion parte A) — prefijo an-v*
   ========================================================================== */

/* A.2 Hero gradiente */
.an-vhero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #224272 0%, #2a5083 50%, #305B91 100%);
}
.an-vhero-inner {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}
.an-vhero-logo {
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.an-vhero-logo img { border-radius: 8px; }
.an-vhero-inner h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    color: #fff;
}
@media (min-width: 640px) { .an-vhero-inner h1 { font-size: 2.25rem; } }
.an-vhero-inner p {
    margin: 0.75rem auto 0;
    max-width: 32rem;
    font-size: 1rem;
    color: #c5d4e6;
}

/* A.3 Card central */
.an-vwrap {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.an-vcard {
    position: relative;
    margin-top: -2.5rem;
    border-radius: 1rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 1.5rem;
    box-shadow: var(--an-elev-xl);
}
@media (min-width: 640px) { .an-vcard { padding: 2rem; } }

/* A.3.a Formulario */
.an-vform label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--an-gray-300);
}
.an-vinput { position: relative; }
.an-vinput svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--an-gray-500);
}
.an-vinput input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    background: var(--an-bg);
    padding: 0.875rem 1rem 0.875rem 3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    color: var(--an-gray-100);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.an-vinput input::placeholder { color: var(--an-gray-500); }
.an-vinput input:focus {
    outline: none;
    border-color: var(--an-sofrocay-500);
    box-shadow: 0 0 0 4px rgba(48, 91, 145, 0.1);
}
.an-vhelp { margin: 0.5rem 0 1.25rem; font-size: 0.75rem; color: var(--an-gray-500); }
.an-vsubmit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background: var(--an-sofrocay-500);
    padding: 0.875rem 1.25rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.an-vsubmit:hover {
    background: var(--an-sofrocay-600);
    box-shadow: 0 10px 15px -3px rgba(48, 91, 145, 0.25);
}
.an-vsubmit:active { transform: scale(0.97); }
.an-vsubmit svg { width: 16px; height: 16px; }

/* A.3.c/d Resultado */
.an-vresult { text-align: center; }

.an-vmono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }

/* ============================================================
   Documento registral de la verificación (rediseño Mario 2026-07-12:
   «más seria»). Extracto sobrio del registro oficial: marco doble
   clásico, membrete, serif para el titular, línea de estado y fecha
   de consulta. Nada de checks animados ni gradientes de celebración.
   ============================================================ */
.an-vdoc {
    margin-top: 0.5rem;
    border: 1px solid var(--an-border);
    border-radius: 4px;
    background: #fdfdfc;
    padding: 10px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(15, 33, 64, 0.06);
}
.an-vdoc-frame {
    border: 1px solid #d8dee8;
    outline: 1px solid #eef1f6;
    outline-offset: 3px;
    padding: 2rem 2rem 1.5rem;
}
.an-vdoc-head { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.an-vdoc-inst {
    margin: 0; text-align: center;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--an-sofrocay-800);
}
.an-vdoc-rule {
    margin: 1.1rem auto 1.4rem; width: 72px; height: 2px;
    background: linear-gradient(90deg, transparent, #b49254, transparent);
}
.an-vdoc-certifies {
    margin: 0; text-align: center; font-size: 0.85rem; font-style: italic;
    color: var(--an-gray-400);
}
.an-vdoc-name {
    margin: 0.5rem 0 0; text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem; font-weight: 600; color: var(--an-gray-200);
}
.an-vdoc-grade {
    margin: 0.35rem 0 0; text-align: center;
    font-size: 0.85rem; letter-spacing: 0.04em; color: var(--an-sofrocay-700);
}
.an-vdoc-registre {
    margin: 1.6rem 0 0; border-top: 1px solid #e8ebf1; padding-top: 0.4rem;
}
.an-vdoc-registre > div {
    display: flex; gap: 1rem; padding: 0.5rem 0;
    border-bottom: 1px solid #f0f2f6; align-items: baseline;
}
.an-vdoc-registre dt {
    flex: 0 0 34%; margin: 0; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-gray-500);
}
.an-vdoc-registre dd { margin: 0; font-size: 0.9rem; color: var(--an-gray-300); }
.an-vdoc-form { display: block; }
.an-vdoc-status {
    margin: 1.4rem 0 0; display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: #14532d;
}
.an-vdoc-checked {
    margin: 0.3rem 0 0; text-align: center; font-size: 0.78rem;
    color: var(--an-gray-500);
}
/* Estado no encontrado: mismo documento, tono neutro factual. */
.an-vdoc-koline {
    margin: 0.4rem 0 0; text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem; font-weight: 600; color: var(--an-gray-300);
}
.an-vdoc-kotext {
    margin: 0.6rem 0 0; text-align: center; font-size: 0.88rem;
    color: var(--an-gray-400);
}
.an-vdoc-ko .an-vreasons { margin-top: 1.2rem; }
@media (max-width: 640px) {
    .an-vdoc-frame { padding: 1.4rem 1rem 1.1rem; }
    .an-vdoc-registre dt { flex-basis: 40%; }
    .an-vdoc-name { font-size: 1.35rem; }
}

/* Badge / warning / reasons */
.an-vbadge, .an-vwarning {
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: left;
}
.an-vbadge {
    background: rgba(6, 78, 59, 0.2);
    box-shadow: 0 0 0 1px rgba(6, 95, 70, 0.5);
}
.an-vbadge > svg { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; color: var(--an-emerald-400); }
.an-vbadge strong { display: block; font-size: 0.875rem; font-weight: 600; color: #6ee7b7; }
.an-vbadge span { font-size: 0.75rem; color: rgba(52, 211, 153, 0.7); }
.an-vwarning {
    background: rgba(127, 29, 29, 0.2);
    box-shadow: 0 0 0 1px rgba(153, 27, 27, 0.5);
}
.an-vwarning > svg { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; color: #f87171; }
.an-vwarning strong { display: block; font-size: 0.875rem; font-weight: 600; color: #fca5a5; }
.an-vwarning span { font-size: 0.75rem; color: rgba(248, 113, 113, 0.7); }
.an-vreasons {
    margin-top: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--an-border);
    background: rgba(17, 24, 39, 0.5);
    padding: 1rem;
    text-align: left;
}
.an-vreasons p { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--an-gray-300); }
.an-vreasons ul {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.an-vreasons li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--an-gray-400);
}

/* Acciones */
.an-vactions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 640px) { .an-vactions { flex-direction: row; } }
.an-vbtn-primary, .an-vbtn-secondary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.an-vbtn-primary {
    background: var(--an-sofrocay-500);
    border: 1px solid transparent;
    font-weight: 600;
    color: #fff !important;
}
.an-vbtn-primary:hover {
    background: var(--an-sofrocay-600);
    box-shadow: 0 10px 15px -3px rgba(48, 91, 145, 0.25);
}
.an-vbtn-secondary {
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    font-weight: 500;
    color: var(--an-gray-400) !important;
}
.an-vbtn-secondary:hover { background: var(--an-border); }
.an-vbtn-primary svg, .an-vbtn-secondary svg { width: 16px; height: 16px; }

/* A.4 Info amber */
.an-vinfo {
    margin: 2rem 0 4rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(146, 64, 14, 0.5);
    background: rgba(120, 53, 15, 0.2);
    padding: 1.25rem;
}
.an-vinfo > svg { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; color: #fbbf24; }
.an-vinfo strong { display: block; font-size: 0.875rem; font-weight: 600; color: #fcd34d; }
.an-vinfo span { font-size: 0.75rem; line-height: 1.625; color: rgba(251, 191, 36, 0.7); }

/* ==========================================================================
   FORMULARIO DE CONTACTO (F7)
   ========================================================================== */
.an-fcontactform { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.an-fcontactform label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--an-gray-300);
}
.an-fcontactform-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .an-fcontactform-row { flex-direction: row; } }
.an-fcontactform input[type="text"],
.an-fcontactform input[type="email"],
.an-fcontactform textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    background: var(--an-bg);
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--an-gray-100);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.an-fcontactform input:focus,
.an-fcontactform textarea:focus {
    outline: none;
    border-color: var(--an-sofrocay-500);
    box-shadow: 0 0 0 4px rgba(48, 91, 145, 0.1);
}
.an-fcontactform textarea { resize: vertical; min-height: 7rem; }
.an-fcontactform .an-btn-primary { align-self: flex-start; }
.an-fcontact-banner { margin-top: 1.25rem; }
/* Honeypot: fuera de vista para humanos, presente para bots. */
.an-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   ACCESIBILIDAD (WCAG 2.2) — skip-link + focus visible
   ========================================================================== */

/* 2.4.1 Bypass Blocks: skip-link oculto hasta recibir foco por teclado */
.an-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--an-sofrocay-500);
    color: #fff !important;
    padding: 0.6rem 1rem;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    font-size: 0.875rem;
}
.an-skiplink:focus {
    left: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* 2.4.7 Focus Visible: anillo de foco claro y consistente en todo interactivo
   navegable por teclado (enlaces, botones, inputs, chips, filtros, details). */
.an-page a:focus-visible,
.an-page button:focus-visible,
.an-page input:focus-visible,
.an-page textarea:focus-visible,
.an-page select:focus-visible,
.an-page summary:focus-visible,
.an-page [tabindex]:focus-visible,
.an-ec a:focus-visible,
.an-ec button:focus-visible,
.an-ec input:focus-visible,
.an-ec [tabindex]:focus-visible {
    outline: 3px solid var(--an-sofrocay-400);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Los inputs con su propio anillo (búsqueda, verificación, contacto) no
   necesitan doble anillo: mantienen su box-shadow de foco existente. */
.an-search-box input:focus-visible,
.an-vinput input:focus-visible,
.an-fcontactform input:focus-visible,
.an-fcontactform textarea:focus-visible {
    outline-offset: 2px;
}

/* ==========================================================================
   LANDING DE CIUDAD (pSEO) + sección VILLES del listado
   ========================================================================== */
.an-lieu { padding-top: 2.5rem; padding-bottom: 3rem; }
.an-lieu-head { margin-bottom: 2rem; }
.an-lieu-verify { margin-top: 0.75rem; }
.an-lieu-title {
    margin: 0;
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 2.25rem;
    color: var(--an-gray-100);
}
@media (min-width: 640px) { .an-lieu-title { font-size: 2.75rem; } }
.an-lieu-intro {
    margin: 0.75rem 0 0;
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--an-gray-400);
}
.an-lieu-back { margin-top: 2rem; }
.an-lieu-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-lieu-back a:hover { color: var(--an-sofrocay-300); }
.an-lieu-back svg { width: 16px; height: 16px; }

/* Sección "Sophrologues par ville" del listado (enlazado interno) */
.an-villes { padding-bottom: 4rem; }
/* Módulos de la landing local embellecidos (Mario 2026-07-11): cards con aire,
   banda acuarela de marca (nano-banana, navy+or sobre crème) como fondo sutil
   anclado abajo-derecha, chips finos. */
/* Módulos DENSOS del pie del listado (c92: 53 départements como pills eran
   una muralla — regla 2). Mismos enlaces, presentación footer-directory:
   columnas de texto compacto, conteo discreto. Villes/accompagnements (pocos,
   navegación primaria) conservan sus chips. */
.an-villes--dense .an-villes-list { display: block; columns: 4 180px; column-gap: 2rem; }
.an-villes--dense .an-ville-chip {
    display: block; border: 0; border-radius: 0; background: transparent;
    padding: 0.22rem 0; white-space: normal;
    font-size: 0.85rem; color: var(--an-gray-400);
    break-inside: avoid;
}
.an-villes--dense .an-ville-chip:hover { color: var(--an-sofrocay-500); background: transparent; text-decoration: underline; }
.an-villes--dense .an-ville-chip span { background: transparent; padding: 0; font-size: 0.78rem; color: var(--an-gray-500); }
.an-villes--dense .an-ville-chip span::before { content: "("; }
.an-villes--dense .an-ville-chip span::after { content: ")"; }
@media (max-width: 640px) { .an-villes--dense .an-villes-list { columns: 2 140px; } }

.an-villes-card {
    margin: 3rem 0 0;
    padding: 2rem 2.25rem 2.5rem;
    border: 1px solid var(--an-border);
    border-radius: 1rem;
    background-color: var(--an-surface);
    background-repeat: no-repeat;
    background-position: right -1rem bottom -30%;
    background-size: 420px auto;
    background-blend-mode: multiply;
}
.an-villes-card .an-villes-list { max-width: calc(100% - 120px); }
@media (max-width: 767px) {
    /* Módulos DENSOS del pie del listado (c92: 53 départements como pills eran
   una muralla — regla 2). Mismos enlaces, presentación footer-directory:
   columnas de texto compacto, conteo discreto. Villes/accompagnements (pocos,
   navegación primaria) conservan sus chips. */
.an-villes--dense .an-villes-list { display: block; columns: 4 180px; column-gap: 2rem; }
.an-villes--dense .an-ville-chip {
    display: block; border: 0; border-radius: 0; background: transparent;
    padding: 0.22rem 0; white-space: normal;
    font-size: 0.85rem; color: var(--an-gray-400);
    break-inside: avoid;
}
.an-villes--dense .an-ville-chip:hover { color: var(--an-sofrocay-500); background: transparent; text-decoration: underline; }
.an-villes--dense .an-ville-chip span { background: transparent; padding: 0; font-size: 0.78rem; color: var(--an-gray-500); }
.an-villes--dense .an-ville-chip span::before { content: "("; }
.an-villes--dense .an-ville-chip span::after { content: ")"; }
@media (max-width: 640px) { .an-villes--dense .an-villes-list { columns: 2 140px; } }

.an-villes-card { padding: 1.5rem 1.25rem 1.75rem; background-size: 300px auto; background-position: right -2rem bottom -40%; }
    .an-villes-card .an-villes-list { max-width: 100%; }
}
/* École/sophrocentre destacados arriba de la landing local. */
.an-lieu-centres { display: flex; flex-direction: column; gap: 0.9rem; margin: 0 0 2.25rem; }
.an-lieu-centre {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem;
    padding: 1.15rem 1.5rem;
    border: 1px solid rgba(201, 169, 110, 0.45);
    border-left: 3px solid #c9a96e;
    border-radius: 0.85rem;
    background: var(--an-surface);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.an-lieu-centre:hover { border-color: #c9a96e; box-shadow: var(--an-elev-sm); text-decoration: none; }
.an-lieu-centre-kicker {
    flex-basis: 100%;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #8a6108;
}
.an-lieu-centre-nom { font-family: var(--an-serif); font-weight: 400; font-size: 1.25rem; color: var(--an-gray-100); }
.an-reseau-ville { font-size: 0.85rem; color: var(--an-gray-400); }
.an-reseau-pays { margin-bottom: 2.25rem; }
.an-lieu-centre-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--an-sofrocay-500); }
.an-villes-heading {
    margin: 0 0 1.25rem;
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--an-gray-100);
}
.an-villes-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.an-ville-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-gray-300);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.an-ville-chip:hover { border-color: var(--an-sofrocay-500); color: #fff; }
.an-ville-chip span {
    font-size: 0.72rem;
    color: var(--an-gray-500);
    background: var(--an-bg);
    border-radius: 9999px;
    padding: 0.05rem 0.4rem;
}

/* Enlace a la ciudad en la card de localización de la ficha */
.an-fville-link {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--an-sofrocay-400);
}
.an-fville-link:hover { color: var(--an-sofrocay-300); }
.an-fville-link svg { width: 14px; height: 14px; }

/* ==========================================================================
   FAQ (acordeón <details> nativo, accesible; FAQPage schema)
   ========================================================================== */
.an-faq { padding-bottom: 3rem; }
.an-faq-heading {
    margin: 0 0 1.25rem;
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--an-gray-100);
}
.an-faq-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 48rem; }
.an-faq-item {
    border-radius: 0.75rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface);
    overflow: hidden;
}
.an-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--an-gray-100);
}
.an-faq-item summary::-webkit-details-marker { display: none; }
.an-faq-item summary:hover { color: #fff; }
.an-faq-item summary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--an-sofrocay-400);
    transition: transform 0.15s ease;
}
.an-faq-item[open] summary svg { transform: rotate(180deg); }
.an-faq-item p {
    margin: 0;
    padding: 0 1.25rem 1.15rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--an-gray-400);
}

/* ==========================================================================
   CTA de activación de la oferta (idea #11) — discreto, al final de la ficha
   ========================================================================== */
.an-fedit-cta {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--an-border);
    background: rgba(15, 33, 64, 0.15);
    padding: 1rem 1.25rem;
    text-align: center;
}
.an-fedit-cta-owner {
    border-style: solid;
    border-color: var(--an-sofrocay-700);
    background: rgba(15, 33, 64, 0.3);
}
.an-fedit-cta-text { font-size: 0.9rem; color: var(--an-gray-400); }
.an-fedit-cta-owner .an-fedit-cta-text { color: var(--an-gray-200); font-weight: 500; }
.an-fedit-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.6rem;
    background: var(--an-sofrocay-500);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff !important;
    transition: background 0.15s ease;
}
.an-fedit-cta-btn:hover { background: var(--an-sofrocay-600); }
.an-fedit-cta-btn svg { width: 15px; height: 15px; }

/* ==========================================================================
   AJUSTES MODO LIGHT — hardcoded que no usan variables. El HERO (imagen +
   overlay sofrocay-900) y el FOOTER (gradiente navy fijo) se quedan OSCUROS
   a propósito, como en el diseño original React.
   ========================================================================== */

/* Contraste WCAG 2.2 AA (medido en :8091 con fórmula de luminancia):
   en light, el rol de enlace/acento de texto "sofrocay-400" (#5e87b7 = 3.73:1
   sobre blanco, FALLA 1.4.3) se redefine a un azul más oscuro #3a6ba0 = 5.54:1.
   Un solo token → todos los enlaces de texto (an-card-cta, an-verify-link,
   an-fgmaps, an-fcert-verify, an-fville-link, an-lieu-back, an-fprofile-cert…)
   pasan AA de golpe. La variante dark mantiene #5e87b7 (fondo oscuro da contraste). */
.local-anuario-page { --an-sofrocay-400: #3a6ba0; }
/* Ídem para el acento de HOVER "sofrocay-300" (c135, hallazgo del workflow):
   en dark aclarar al hover tiene sentido (#7a9cc4 sobre fondo oscuro); en light
   ACLARABA el enlace al pasar el ratón (2.85:1 sobre blanco, falla AA) en los
   12 usos (card-cta, retour, gmaps, verify, popup del mapa…). En light el hover
   OSCURECE: sofrocay-700 (#224272 = 8.6:1), coherente con el fix c128. Cubre
   también el `!important` del popup Leaflet (resuelve la var redefinida). */
.local-anuario-page { --an-sofrocay-300: #224272; }
/* Hover de los enlaces de contacto de la ficha (c135): la pastilla de hover era
   gray-700/50 del dark → sobre la card blanca ensuciaba y bajaba el contraste.
   En light, pastilla gris clara estándar. */
.local-anuario-page .an-fcontact-list a:hover { background: #f3f4f6; }

/* Header: logo legible + utility bar clara */
.local-anuario-page .an-nav-brand { color: var(--an-sofrocay-800); }
.local-anuario-page .an-utilbar { background: #f3f4f6; border-bottom-color: #e5e7eb; }
/* Utility links: #6b7280/#f3f4f6 = 4.39:1 (marginal) → #4b5563 = 6.87:1 */
.local-anuario-page .an-utilbar-links a { color: #4b5563; }
.local-anuario-page .an-header { border-bottom-color: #e5e7eb; }

/* Badge "Certifié" + orden activo: fondo azul claro, texto navy */
.local-anuario-page .an-card-badge,
.local-anuario-page .an-sort-menu a.an-sort-active {
    background: #e8eef5;
    color: var(--an-sofrocay-700);
}

/* Card "C'est votre première fois" (navy) → azul muy claro */
.local-anuario-page .an-reassure-card-navy {
    background: #eef2f8;
    border-color: #c5d4e6;
}

/* Cajas interiores que eran gray-900/sofrocay-900 translúcido → gris/azul claro */
.local-anuario-page .an-fapproche,
.local-anuario-page .an-fspec,
.local-anuario-page .an-vreasons,
.local-anuario-page .an-vinput input,
.local-anuario-page .an-fcontact-icon { background: #f3f4f6; }

/* Slots/badges de experiencia con fondo sofrocay-900 translúcido → azul claro */
.local-anuario-page .an-fexp-badge { background: #e8eef5; }

/* CTA de edición (dashed/owner) → fondos claros */
.local-anuario-page .an-fedit-cta { background: #f6f8fb; }
.local-anuario-page .an-fedit-cta-owner { background: #eef2f8; }

/* Chip de ciudad: hover y contador legibles en claro. Texto del contador
   a #4b5563 (6.87:1 sobre #f3f4f6, Lighthouse c23 pedía ≥4.5). */
.local-anuario-page .an-ville-chip span { background: #f3f4f6; color: #4b5563; }
/* En los módulos densos el conteo va como texto entre paréntesis (c92) —
   esta regla debe ir DESPUÉS del override light para ganarle. */
.local-anuario-page .an-villes--dense .an-ville-chip span { background: transparent; padding: 0; }
/* Hover legible en light (c128). En dark el texto pasaba a #fff sobre una card
   oscura; sobre las cards claras (surface #fff) eso lo volvía INVISIBLE (blanco
   sobre blanco) tanto en el chip de ciudad/motif como en el summary del FAQ —
   un gap que Lighthouse no caza porque no simula :hover. Se recolorea al navy de
   marca sofrocay-700 (#224272 = 8.6:1 sobre blanco, AA holgado), que además
   refuerza el acento del borde del chip. La variante dark conserva su #fff. */
.local-anuario-page .an-ville-chip:hover,
.local-anuario-page .an-faq-item summary:hover { color: var(--an-sofrocay-700); }

/* Sticky contact bar de la ficha → clara en light */
.local-anuario-page .an-fsticky { background: rgba(255, 255, 255, 0.95); border-bottom-color: #e5e7eb; }

/* Badges de estado (paridad light pendiente, hallazgo c13/#21). En dark eran
   emerald/red-900 translúcidos con texto claro (#6ee7b7/#fca5a5) → sobre las
   cards claras el fondo quedaba casi blanco y el texto ilegible. Se rehacen a
   la paleta light: emerald-50/red-50 con texto emerald-800/red-800 (7.29:1 /
   7.6:1 AA). Cubre el badge de certificación de la ficha (an-fcert-banner) y
   los de la vista verificación (an-vbadge éxito, an-vwarning error). */
.local-anuario-page .an-fcert-banner,
.local-anuario-page .an-vbadge {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.local-anuario-page .an-vbadge { box-shadow: 0 0 0 1px #a7f3d0; }
.local-anuario-page .an-fcert-banner span,
.local-anuario-page .an-vbadge strong { color: #065f46; }
.local-anuario-page .an-vbadge span { color: #047857; }
.local-anuario-page .an-vwarning {
    background: #fef2f2;
    box-shadow: 0 0 0 1px #fecaca;
}
.local-anuario-page .an-vwarning > svg { color: #dc2626; }
.local-anuario-page .an-vwarning strong { color: #991b1b; }
.local-anuario-page .an-vwarning span { color: #b91c1c; }
/* Aviso amber inferior (an-vinfo) y título de resultado inválido: en dark eran
   amber-900 translúcido + texto amber-300/400 (#fcd34d, rgba amber-400) y red-400
   (#f87171) → sobre las cards claras, ilegibles (Lighthouse c65 color-contrast,
   a11y 96). Paleta light: amber-50 + texto amber-800 (6.84:1) y red-700 (6.47:1). */
.local-anuario-page .an-vinfo {
    background: #fffbeb;
    border-color: #fde68a;
}
.local-anuario-page .an-vinfo > svg { color: #d97706; }
.local-anuario-page .an-vinfo strong,
.local-anuario-page .an-vinfo span { color: #92400e; }
.local-anuario-page .an-vinvalid-title { color: #b91c1c; }

/* ==========================================================================
   WCAG 2.5.8 (AA) — Target size minimum 24px (auditoría móvil c20).
   Enlaces funcionales sueltos medían h=14-21px (teléfono/email de la sticky,
   retour, breadcrumbs, gmaps, verificar certificado, footer). Se amplía el
   ÁREA TÁCTIL con padding compensado por margen negativo: cero desplazamiento
   visual del layout, hit-area >= 26px. Exentos: attribution de Leaflet
   (third-party) y skip-link (sr-only por diseño).
   ========================================================================== */
.local-anuario-page .an-lieu-back a,
.local-anuario-page .an-fsticky-links a,
.local-anuario-page .an-breadcrumb a,
.local-anuario-page .an-fichabar-crumb a,
.local-anuario-page .an-fichabar-retour,
.local-anuario-page .an-fgmaps,
.local-anuario-page .an-fcert-verify,
.local-anuario-page .an-footer-contact a,
.local-anuario-page .an-footer-legal a,
.local-anuario-page .an-utilbar-links a {
    padding-block: 6px;
    margin-block: -6px;
    display: inline-flex;
    align-items: center;
}

/* Lighthouse c22 color-contrast: el tag «Sophrosite» (10px) usaba
   --an-emerald-400 (#059669 = 3.77:1 sobre blanco, < 4.5). → emerald-700. */
.local-anuario-page .an-card-sophrosite-tag { color: #047857; }

/* Pertenencia a la red verificada (idea #20): línea discreta bajo el badge
   del certificado, enlazada al listado. Color sofrocay-400 (=#3a6ba0 en
   light, 5.54:1 AA) + tap target >=24px integrado. */
.an-fcert-membership {
    display: inline-flex;
    align-items: center;
    margin-top: 0.625rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--an-sofrocay-400);
    text-decoration: none;
    padding-block: 6px;
    margin-block: -6px;
}
.an-fcert-membership:hover { text-decoration: underline; }

/* Lupa de búsqueda en el header móvil (idea #31, paridad con el original y
   patrón Doctolib: la búsqueda siempre a un toque). En desktop el hero ya
   está visible → oculta. Ancla a #an-search del listado. */
.an-nav-search { display: none; }
@media (max-width: 768px) {
    .an-nav-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 0.25rem;
        border-radius: 9999px;
        color: var(--an-sofrocay-800);
    }
    .an-nav-search svg { width: 20px; height: 20px; }
    .an-nav-search:hover { background: #f3f4f6; }
}
/* El offset del ancla del buscador (y de cualquier ancla/foco) lo aporta ahora
   el `scroll-padding-top` global de `html` (WCAG 2.4.11). Se elimina el
   scroll-margin-top puntual: sumado al padding global sobre-desplazaría el salto. */

/* Diferenciador factual de la verificación (idea #46, c38): la certificación
   se consulta contra el ERP oficial en CADA carga — ResaLib solo puede datar
   las suyas. Texto discreto bajo el badge. */
.an-fcert-realtime {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--an-gray-500);
}

/* QR de verificación del certificado (c141, #157 — patrón Credly): escaneable
   en pantalla y en la hoja de impresión (el certificado del gabinete). El SVG
   escala al contenedor; fondo blanco y quiet-zone para lectura fiable. */
.an-fcert-qr {
    margin-top: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.an-fcert-qr-code { display: inline-block; line-height: 0; }
.an-fcert-qr-code svg {
    width: 84px;
    height: 84px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--an-border);
    border-radius: 0.5rem;
}
.an-fcert-qr-caption {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--an-gray-500);
    max-width: 9.5rem;
}

/* Experiencia declarada (gap #61/c53): grado + año de inicio moderados,
   línea sobria en la card del certificado. */
.an-fcert-exp {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--an-gray-300);
}

/* ==========================================================================
   IMPRESIÓN (c95) — un directorio profesional debe imprimir la ficha LIMPIA:
   solo los datos del sofrólogo (nombre, certificación, contacto, formaciones,
   bio/approche). Se oculta el cromo (nav/footer/utilbar), lo interactivo (mapa,
   formulario, CTAs, sticky/fichabar) y se ahorra tinta (fondo blanco, texto
   oscuro). La web del profesional muestra su URL (en papel no es clicable).
   ========================================================================== */
@page { margin: 1.4cm; }
@media print {
    .an-nav, .an-footer, .an-utilbar, .an-utilbar-inner, .an-skiplink,
    .an-fsticky, .an-fichabar,
    .an-fcta, .an-fcta-btns, .an-fedit-cta, .an-fedit-cta-btn, .an-fedit-cta-text,
    .an-fcontactform, .an-fgmaps, .an-fcard-map-body,
    .an-fhero-band, .an-fhero-overlay, .an-fprofile-ctas,
    .an-hero-img, .an-fcert-verify, .an-lieu-back, .an-breadcrumb {
        display: none !important;
    }
    /* El bloque del nombre (.an-fprofile) se solapaba sobre la foto con un
       margin-top NEGATIVO; sin foto en papel ese margen lo saca por arriba y
       corta el nombre → se resetea a un margen pequeño positivo. */
    .an-fprofile, .an-fcard { margin-top: 1rem !important; }
    .an-fcontainer, .an-fgrid { padding-top: 0.5rem !important; }
    body, .local-anuario-page, .an-hero, .an-fhero-band, .an-fcard {
        background: #fff !important;
        color: #111 !important;
    }
    .an-fcard, .an-fcol-side, .an-fcontainer section, .an-fcert-banner {
        box-shadow: none !important;
        border-color: #ccc !important;
        break-inside: avoid;
    }
    a { color: #111 !important; }
    .an-fcontact-weblink::after {
        content: " — " attr(href);
        font-size: 0.85em;
        color: #555;
    }
    /* Sophrosite (c149): el hero navy usa texto #fff hardcodeado; al imprimir,
       el navegador descarta los fondos por defecto → nombre/titular BLANCOS
       sobre papel = invisibles. Se resetea a tinta oscura y se oculta lo
       interactivo (CTAs, aviso de preview, avatar decorativo). */
    .an-ss-hero { background: #fff !important; }
    .an-ss-name, .an-ss-titular, .an-ss-hero .an-fbadge { color: #111 !important; }
    .an-ss-ctas, .an-ss-footer-cta, .an-ss-preview, .an-ss-avatar { display: none !important; }
    .an-ss-section { break-inside: avoid; }
    /* Hero gradiente compartido (c185): verificación, déclaration y landing
       usan .an-vhero con texto blanco — mismo problema que el sophrosite en
       c149: al descartar fondos, texto blanco sobre papel = invisible. La
       verificación IMPRESA es el caso de uso real del certificado. */
    .an-vhero { background: #fff !important; }
    .an-vhero h1, .an-vhero p { color: #111 !important; }
    .an-vhero-circle, .an-vhero-logo { display: none !important; }
    /* Lo interactivo no tiene sentido en papel. */
    .an-vs-cta-row, .an-empty-recovery { display: none !important; }
}

/* ==========================================================================
   SOPHROSITE interno (directiva Mario 2026-07-08; spec loop/SOPHROSITE-SPEC.md).
   Réplica del modelo sites.sofrocay.com/{slug} con los tokens de la casa:
   hero navy (como hero/footer, oscuro a propósito) + cuerpo claro.
   ========================================================================== */
.an-ss-preview {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    color: #92400e;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.an-ss-hero {
    background: linear-gradient(160deg, var(--an-sofrocay-800), var(--an-sofrocay-900));
    color: #fff;
    text-align: center;
}
.an-ss-hero-inner { padding-top: 3.5rem; padding-bottom: 3rem; }
.an-ss-avatar {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.25rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    box-shadow: var(--an-elev-lg);
}
.an-ss-name {
    margin: 0;
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 2.25rem;
    color: #fff;
}
@media (min-width: 640px) { .an-ss-name { font-size: 2.75rem; } }
.an-ss-titular {
    margin: 0.5rem auto 0;
    max-width: 40rem;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
}
.an-ss-badge { margin-top: 1rem; }
.an-ss-ctas {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.an-ss-body { padding-top: 2rem; padding-bottom: 3rem; max-width: 56rem; }
.an-ss-section { margin-bottom: 1.5rem; }
.an-ss-section h2 {
    margin: 0 0 1rem;
    font-family: var(--an-serif);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--an-gray-100);
}
.an-ss-item { padding: 0.75rem 0; }
.an-ss-item + .an-ss-item { border-top: 1px solid var(--an-border-soft); }
.an-ss-item h3 {
    margin: 0 0 0.375rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--an-gray-200);
}
.an-ss-prose {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--an-gray-400);
}
.an-ss-prose p { margin: 0 0 0.75rem; }
.an-ss-prose p:last-child { margin-bottom: 0; }
.an-ss-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.an-ss-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--an-border);
}
.an-ss-footer-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 1rem 0 0;
}

/* Control de PAN del mapa (c155, WCAG 2.5.7 #169): botones direccionales como
   alternativa single-pointer al arrastre — el ejemplo de conformidad del W3C.
   Grid 3x3 compacto bajo el zoom; targets 30px (>24px, 2.5.8). */
.an-map-pan {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    background: #fff;
}
.an-map-pan a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
    color: var(--an-gray-200);
    background: #fff;
}
.an-map-pan a:hover { background: #f4f4f4; color: var(--an-sofrocay-700); }
.an-map-pan-up    { grid-area: 1 / 2; }
.an-map-pan-left  { grid-area: 2 / 1; }
.an-map-pan-right { grid-area: 2 / 3; }
.an-map-pan-down  { grid-area: 3 / 2; }

/* Parcours certificado en la verificación (c156, #158 patrón Credly criteria):
   lista compacta de formaciones, una por línea. */
.an-vparcours { display: flex; flex-direction: column; gap: 0.15rem; }
.an-vparcours-item { display: block; font-size: 0.9rem; }

/* ============ Déclaration d'accessibilité (#170) ============ */
.local-anuario-page .an-a11y h2 {
  font-size: 1.05rem;
  color: var(--an-sofrocay-100);
  margin: 1.4rem 0 0.4rem;
}
.local-anuario-page .an-a11y p {
  color: var(--an-slate-300);
  line-height: 1.65;
  margin: 0 0 0.6rem;
}
/* Subrayado obligado: enlace inline en prosa — solo el color (1.76:1 con el
   texto en light) no lo distingue y falla WCAG 1.4.1 link-in-text-block (c164). */
.local-anuario-page .an-a11y a {
  color: var(--an-sofrocay-300);
  text-decoration: underline;
}
.local-anuario-page .an-a11y-date {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--an-slate-400);
}

/* ============ Landing Votre Sophrosite (#172) ============ */
.local-anuario-page .an-vs .an-vcard h2 {
  font-size: 1.05rem;
  color: var(--an-sofrocay-100);
  margin: 1.6rem 0 0.5rem;
}
.local-anuario-page .an-vs-pitch {
  color: var(--an-slate-200);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
.local-anuario-page .an-vs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.local-anuario-page .an-vs-list li {
  color: var(--an-slate-300);
  line-height: 1.55;
  padding-left: 1.5rem;
  position: relative;
}
.local-anuario-page .an-vs-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--an-emerald-400, #34d399);
  font-weight: 700;
}
.local-anuario-page .an-vs-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--an-slate-300);
  line-height: 1.6;
  display: grid;
  gap: 0.4rem;
}
.local-anuario-page .an-vs-example { color: var(--an-sofrocay-300); font-weight: 600; }
.local-anuario-page .an-vs-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--an-sofrocay-100);
  margin: 0;
}
.local-anuario-page .an-vs-price-note { color: var(--an-slate-400); font-size: 0.92rem; }
.local-anuario-page .an-vs-cta-row { margin: 1.8rem 0 0; text-align: center; }
.local-anuario-page .an-vs-cta {
  display: inline-block;
  background: var(--an-sofrocay-600);
  color: #fff;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  min-height: 24px;
}
.local-anuario-page .an-vs-cta:hover,
.local-anuario-page .an-vs-cta:focus {
  background: var(--an-sofrocay-700);
  color: #fff;
  text-decoration: none;
}

/* Badge «Certifié(e) depuis YYYY» en el hero del sophrosite (#181) */
.local-anuario-page .an-ss-badge-depuis { margin-top: 0.45rem; }

/* ============ Checklist de completitud del editor (#183) ============ */
.an-checklist {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  max-width: 40rem;
}
.an-checklist .an-check-head {
  font-weight: 700;
  color: #1f2b4a;
  margin-bottom: 0.5rem;
}
.an-checklist .an-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.an-checklist .an-check-mark {
  display: inline-block;
  width: 1.2rem;
  color: #94a3b8;
  font-weight: 700;
}
.an-checklist .an-check-mark.an-check-done { color: #059669; }
.an-checklist .an-check-item-done { color: #64748b; }

/* ============ Recovery del estado vacío (#189/#190) ============ */
.local-anuario-page .an-empty-recovery {
  margin-top: 1rem;
  display: grid;
  gap: 0.4rem;
}
.local-anuario-page .an-empty-suggest a {
  color: var(--an-sofrocay-300);
  font-weight: 700;
  text-decoration: underline;
}
.local-anuario-page .an-empty-recovery a { color: var(--an-sofrocay-300); }
.local-anuario-page .an-empty-motif {
  display: inline-block;
  margin: 0.15rem 0.25rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--an-slate-600, #475569);
  border-radius: 999px;
  min-height: 24px;
}

/* Mención informativa RGPD del form de contacto (#191) */
.local-anuario-page .an-fcontact-rgpd {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--an-slate-400);
}
.local-anuario-page .an-fcontact-rgpd a {
  color: var(--an-sofrocay-300);
  text-decoration: underline;
}

/* ============================================================
   Editor del Sophrosite — rejilla de fondos del hero (pulido
   2026-07-12): miniaturas uniformes seleccionables en grid, en vez
   de 8 imágenes de 260px apiladas. La página corre en el layout del
   campus (mform boost): cada advcheckbox es un .fitem row — dentro
   de .an-heros-grid se compactan a tarjetas.
   ============================================================ */
.an-heros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0.25rem 0 0.5rem;
}
.an-heros-grid .fitem,
.an-heros-grid .form-group {
    margin: 0 !important;
    display: block;
}
/* Fuera la columna fantasma del label vacío del mform. */
.an-heros-grid .fitem > .col-md-3 { display: none; }
.an-heros-grid .fitem > .col-md-9,
.an-heros-grid .fitem > [data-fieldtype] {
    flex: 1 1 auto; max-width: 100%; padding: 0;
}
.an-heros-grid .form-check { padding: 0; position: relative; }
.an-heros-grid .form-check-input {
    position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0;
    width: 1.15rem; height: 1.15rem;
}
.an-heros-thumb {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 8px; border: 2px solid transparent;
    transition: border-color .15s;
}
/* La miniatura elegida se marca con el borde de marca, no solo el check
   (markup boost 3.10: el label del advcheckbox va SIN clase, hermano
   directo del input). */
.an-heros-grid .form-check-input:checked + label .an-heros-thumb {
    border-color: var(--an-sofrocay-500);
    box-shadow: 0 0 0 1px var(--an-sofrocay-500);
}

/* Funnel de activación en moderar.php (#182) */
.an-funnel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  max-width: 46rem;
}
.an-funnel .an-funnel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.an-funnel .an-funnel-label { color: #475569; }

/* Banner de activación en el dashboard (#184) */
.an-dash-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem auto;
  max-width: 60rem;
}
.an-dash-invite .an-dash-invite-cta { margin-left: auto; }

/* Horaires del sophrosite (#178) */
.local-anuario-page .an-ss-horaires {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  color: var(--an-slate-300);
}

/* ============ Affiche de cabinet (#204) ============ */
.local-anuario-page .an-affiche-wrap {
  min-height: 100vh;
  background: var(--an-slate-100, #f1f5f9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
}
.local-anuario-page .an-affiche {
  background: #fff;
  width: min(210mm, 100%);
  min-height: 250mm;
  padding: 22mm 18mm;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.18);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.local-anuario-page .an-affiche-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f2b4a;
}
.local-anuario-page .an-affiche-institut { color: #475569; margin: 0; }
.local-anuario-page .an-affiche-nom {
  font-size: 2.2rem;
  color: #111827;
  margin: 1.2rem 0 0;
}
.local-anuario-page .an-affiche-titre {
  color: #224272;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 1rem;
}
.local-anuario-page .an-affiche-qr svg { max-width: 64mm; height: auto; }
.local-anuario-page .an-affiche-scan {
  font-size: 1.05rem;
  color: #111827;
  max-width: 26rem;
  margin: 0.8rem 0 0;
}
.local-anuario-page .an-affiche-membre { color: #475569; margin: 0; }
.local-anuario-page .an-affiche-url { color: #475569; font-size: 0.9rem; margin: 0; }
@media print {
  .local-anuario-page .an-affiche-wrap { background: #fff; padding: 0; min-height: auto; }
  .local-anuario-page .an-affiche { box-shadow: none; width: auto; min-height: auto; }
  .local-anuario-page .an-affiche-print { display: none !important; }
  /* c96: al imprimir, SOLO el póster — fuera todo el chrome del theme
     (antes salía el header WP réplica + footer + nav alrededor del A4). */
  body.an-affiche-page .an-header,
  body.an-affiche-page .an-wph,
  body.an-affiche-page .an-breadcrumbbar,
  body.an-affiche-page .an-footer-v2,
  body.an-affiche-page #page-footer,
  body.an-affiche-page #personabar,
  body.an-affiche-page [data-region="drawer"],
  body.an-affiche-page [data-region="fixed-drawer-toggle"],
  body.an-affiche-page .navbar,
  body.an-affiche-page #nav-drawer { display: none !important; }
  body.an-affiche-page #page,
  body.an-affiche-page #page-content,
  body.an-affiche-page #region-main { margin: 0 !important; padding: 0 !important; }
  body.an-affiche-page { padding: 0 !important; }
}
@page {
  size: A4 portrait;
  margin: 12mm;
}

/* Banners de activación/dummy del sophrosite (encargo 2026-07-08) */
.local-anuario-page .an-ss-preview-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.local-anuario-page .an-ss-preview-btn { min-height: 24px; white-space: nowrap; }

/* ============================================================
   Web standalone de la école (ecole.php — modelo franquicia,
   Mario 2026-07-08; v2 «plus soignée»). Header/footer PROPIOS:
   el nombre de la école es la marca; la afiliación, el sello.
   ============================================================ */
.an-ec {
    --an-ec-elev-card: 0 1px 3px rgba(15, 33, 64, 0.06), 0 8px 24px -12px rgba(15, 33, 64, 0.18);
    --an-ec-r: 16px; --an-ec-r-lg: 20px;
    background: var(--an-surface); min-height: 100vh;
    font-family: var(--an-sans); font-size: 16px; line-height: 1.5;
    color: var(--an-gray-100); -webkit-font-smoothing: antialiased;
}
.an-ec a { text-decoration: none; }
/* Trade Gothic Next: NADA por encima de Regular en la UI de la école
   (directiva Mario 2026-07-08: los cortes gruesos no quedan bien).
   La jerarquía se hace con tamaño, color y tracking, no con Bold. */
.an-ec .an-btn-primary, .an-ec .an-btn-secondary { font-weight: 400; }
.an-ec-container { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

.an-ec-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--an-border);
}
.an-ec-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 68px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.an-ec-brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-weight: 400; font-size: 16px; color: var(--an-gray-100);
    text-decoration: none; letter-spacing: -0.01em; max-width: 46ch; line-height: 1.25;
}
.an-ec-brand img { flex-shrink: 0; display: block; }
.an-ec-brand:hover { color: var(--an-sofrocay-500); text-decoration: none; }
.an-ec-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.an-ec-nav a {
    font-size: 14px; font-weight: 400; color: var(--an-gray-400);
    text-decoration: none; padding: 4px 0;
    border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.an-ec-nav a:hover { color: var(--an-sofrocay-500); border-bottom-color: var(--an-sofrocay-500); text-decoration: none; }
.an-ec-nav .an-ec-nav-cta {
    background: var(--an-sofrocay-500); color: #fff; padding: 9px 18px;
    border-radius: 999px; font-weight: 400; border-bottom: none;
}
.an-ec-nav .an-ec-nav-cta:hover { background: var(--an-sofrocay-600); color: #fff; }

.an-ec-hero {
    background: linear-gradient(155deg, var(--an-sofrocay-900), var(--an-sofrocay-700) 78%);
    color: #fff; text-align: left; min-height: 60vh;
    display: flex; align-items: flex-end; padding: 96px 0 56px;
}
/* Sin imagen elegida (caso Angers, c116): la banda de 60vh dejaba ~900px de
   vacío navy antes del título — el min-height solo tiene sentido CON foto
   (banda cinemascope). Sin foto, dimensiona al contenido como el hero del
   sophrosite pro (paridad regla 6). */
.an-ec-hero:not(.an-ec-hero-img) {
    min-height: 0;
    align-items: flex-start;
    padding: 72px 0 52px;
}
.an-ec-hero .an-ec-container { width: 100%; }
.an-ec-hero-kicker {
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px;
    color: #bcd0e6; margin: 0 0 18px; font-weight: 400;
    text-shadow: 0 1px 2px rgba(15, 33, 64, 0.55);
}
.an-ec-hero h1 {
    font-size: clamp(32px, 4.8vw, 50px); line-height: 1.12; margin: 0 0 18px;
    max-width: 20ch; font-weight: 300; letter-spacing: -0.01em; color: #fff;
    text-shadow: 0 1px 12px rgba(15, 33, 64, 0.45);
}
.an-ec-hero-titular {
    font-size: clamp(16px, 2vw, 19px); color: #d7e2f0; max-width: 52ch;
    margin: 0 0 30px; line-height: 1.6;
    text-shadow: 0 1px 2px rgba(15, 33, 64, 0.5);
}
.an-ec-hero-ctas {
    display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap;
    margin-bottom: 26px;
}
.an-ec-hero-proof {
    margin: 0 0 22px; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.12em; color: #d7e2f0;
    text-shadow: 0 1px 2px rgba(15, 33, 64, 0.55);
}
.an-ec-hero-ctas .an-btn-primary { padding: 12px 26px; font-size: 15px; }
.an-ec-btn-ghost {
    background: rgba(15, 33, 64, 0.34);
    /* !important obligado: .an-btn-secondary (base del anuario) fija su color
       con !important y pisaba el blanco → texto fantasma sobre la foto
       (cazado por QA VISUAL con render real, 2026-07-08). */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.65); padding: 12px 26px; font-size: 15px;
    text-shadow: 0 1px 2px rgba(15, 33, 64, 0.5);
}
.an-ec-btn-ghost:hover { background: rgba(15, 33, 64, 0.5); border-color: rgba(255, 255, 255, 0.85); color: #fff !important; }
.an-ec-hero-affil {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: #d7e2f0; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
    padding: 8px 16px; background: rgba(15, 33, 64, 0.38);
    text-shadow: 0 1px 2px rgba(15, 33, 64, 0.5);
    transition: background 0.15s;
}
.an-ec-hero-affil:hover { background: rgba(15, 33, 64, 0.55); color: #fff; text-decoration: none; }
.an-ec-hero-affil svg { flex-shrink: 0; color: #8fd3b6; }

.an-ec-section { padding: clamp(72px, 9vw, 112px) 0; }
.an-ec-section-alt { background: #f4f7fb; border-top: 1px solid var(--an-border-soft); border-bottom: 1px solid var(--an-border-soft); }
.an-ec-kicker {
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
    font-weight: 400; color: var(--an-sofrocay-500); margin: 0 0 14px;
}
.an-ec-section h2 {
    font-size: clamp(28px, 3.4vw, 40px); font-weight: 300; color: var(--an-gray-100);
    letter-spacing: -0.02em; margin: 0 0 20px; line-height: 1.15;
}
.an-ec-lead {
    font-size: 18px; color: var(--an-gray-400); max-width: 64ch;
    margin: 0 0 40px; line-height: 1.7;
}
.an-ec-prose { max-width: 72ch; }
.an-ec-prose p { line-height: 1.7; }

.an-ec-pillars {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px; margin-bottom: 12px;
}
.an-ec-pillar {
    background: linear-gradient(180deg, #fff, #fbfcfe); border: 1px solid var(--an-border);
    border-radius: var(--an-ec-r); padding: 28px 24px;
    box-shadow: 0 2px 4px rgba(15, 33, 64, 0.05), 0 18px 40px -20px rgba(15, 33, 64, 0.25);
}
.an-ec-pillar-n {
    display: block; font-size: 40px; font-weight: 300; letter-spacing: -0.01em;
    color: var(--an-sofrocay-500); margin-bottom: 8px;
}
.an-ec-pillar p { margin: 0; color: var(--an-gray-400); line-height: 1.6; }
.an-ec-subh {
    font-size: 22px; font-weight: 300; color: var(--an-gray-100);
    margin: 36px 0 16px;
}
.an-ec-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.an-ec-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-ec-r); padding: 24px; box-shadow: var(--an-ec-elev-card);
    transition: transform 0.18s, box-shadow 0.18s;
}
.an-ec-card:hover, .an-ec-member:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 33, 64, 0.08), 0 22px 48px -20px rgba(15, 33, 64, 0.28);
}
.an-ec-card h4 {
    margin: 0 0 10px; font-size: 16px; font-weight: 400; color: var(--an-gray-100);
}

.an-ec-ecole-grid { margin-bottom: 8px; }
.an-ec-ecole-grid-photo {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 36px; align-items: start;
}
.an-ec-ecole-photo {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 16px; box-shadow: var(--an-elev-md);
}
@media (max-width: 760px) {
    .an-ec-ecole-grid-photo { grid-template-columns: 1fr; }
}

.an-ec-team {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.an-ec-member {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-ec-r); padding: 24px; box-shadow: var(--an-ec-elev-card);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform 0.18s, box-shadow 0.18s;
}
.an-ec-member-head { display: flex; align-items: center; gap: 14px; }
.an-ec-member-head h3 {
    margin: 0; font-size: 16px; font-weight: 400; color: var(--an-gray-100);
    line-height: 1.3;
}
.an-ec-member-role {
    margin: 3px 0 0; font-size: 13px; font-weight: 400;
    color: var(--an-sofrocay-500);
}
.an-ec-team-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: #eaf0f7; color: var(--an-sofrocay-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 400; letter-spacing: 0.02em; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(48, 91, 145, 0.16);
}
.an-ec-member-bio {
    font-size: 14px; color: var(--an-gray-400);
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
    overflow: hidden;
}
.an-ec-member-bio p { margin: 0 0 8px; line-height: 1.6; }
.an-ec-member-fiche {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
    font-size: 13px; font-weight: 400; color: var(--an-sofrocay-500);
    text-decoration: none;
}
.an-ec-member-fiche:hover { text-decoration: underline; }
.an-ec-member-fiche svg { color: #10b981; }

.an-ec-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.an-ec-gallery img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--an-ec-r); box-shadow: var(--an-ec-elev-card);
    transition: transform 0.2s ease;
}
.an-ec-gallery img:hover { transform: scale(1.02); }

.an-ec-apres {
    background: var(--an-bg); color: var(--an-gray-100);
    border-top: 1px solid var(--an-border);
    text-align: left; padding: clamp(48px, 6vw, 72px) 0;
}
.an-ec-apres h2 {
    font-size: clamp(26px, 3vw, 34px); font-weight: 300; letter-spacing: -0.02em;
    color: var(--an-gray-100); margin: 0 0 14px;
}
.an-ec-apres-text { color: var(--an-gray-400); max-width: 62ch; margin: 0 0 28px; line-height: 1.65; }
.an-ec-apres-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px; max-width: 720px; margin: 0 0 24px;
}
.an-ec-apres-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-ec-r); padding: 26px; text-align: left;
    box-shadow: var(--an-ec-elev-card);
}
.an-ec-apres-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 400; color: var(--an-gray-100); }
.an-ec-apres-card p { margin: 0; color: var(--an-gray-400); line-height: 1.6; }
.an-ec-apres-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--an-sofrocay-500); font-size: 15px;
}
.an-ec-apres-link:hover { color: var(--an-sofrocay-600); }

.an-ec-contact-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-ec-r-lg); padding: 32px; box-shadow: var(--an-ec-elev-card);
    border-top: 3px solid var(--an-sofrocay-500);
    display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
    justify-content: space-between;
}
.an-ec-contact-next { margin: 14px 0 0; font-size: 13.5px; color: var(--an-gray-500); flex-basis: 100%; }
/* Horaires en la card de contacto (template compartido école/pro, 2026-07-11). */
.an-ec-horaires { flex-basis: 100%; margin: 6px 0 10px; }
.an-ec-horaires-h {
    margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--an-sofrocay-700);
}
.an-ec-horaires ul { margin: 0; padding: 0; list-style: none; }
.an-ec-horaires li { color: var(--an-gray-400); font-size: 14px; line-height: 1.7; }
.an-ec-contact-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.an-ec-contact-list li {
    display: flex; align-items: center; gap: 10px; color: var(--an-gray-300);
    font-size: 15px;
}
.an-ec-contact-list svg { color: var(--an-sofrocay-500); flex-shrink: 0; }
.an-ec-contact-list a { color: var(--an-gray-200); font-weight: 400; }

.an-ec-footer {
    background: var(--an-sofrocay-900); color: #cddaeb;
    padding: 56px 0 32px; font-size: 14px;
    position: relative; overflow: hidden;
}
/* Overlay decorativo súper sutil: glow navy + isotipo como filigrana
   (encargo Mario 2026-07-08 — presencia de marca casi subliminal). */
.an-ec-footer::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 460px at 88% 120%, rgba(122, 156, 196, 0.10), transparent 70%);
}
.an-ec-footer::after {
    content: ''; position: absolute; right: -150px; bottom: -190px;
    width: 580px; height: 580px; pointer-events: none;
    background: url(pix/isotipo-sofrocay-blanco.svg) no-repeat center / contain;
    opacity: 0.045; transform: rotate(-8deg);
}
.an-ec-footer .an-ec-container { position: relative; z-index: 1; }
.an-ec-footer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px; margin-bottom: 40px;
}
.an-ec-footer-name { margin: 0 0 14px; color: #fff; font-size: 17px; line-height: 1.35; }
.an-ec-footer-contact { list-style: none; margin: 0; padding: 0; }
.an-ec-footer-contact li { margin: 0 0 8px; color: #9db4d0; line-height: 1.5; }
.an-ec-footer-contact a { color: #cddaeb; text-decoration: none; }
.an-ec-footer-contact a:hover { color: #fff; text-decoration: underline; }
.an-ec-footer-nav { display: flex; flex-direction: column; gap: 10px; }
.an-ec-footer-nav a { color: #cddaeb; text-decoration: none; width: fit-content; }
.an-ec-footer-nav a:hover { color: #fff; text-decoration: underline; }
.an-ec-footer-reseau img { display: block; margin-bottom: 12px; opacity: 0.92; }
.an-ec-footer-reseau p { margin: 0 0 12px; color: #9db4d0; line-height: 1.55; max-width: 34ch; }
.an-ec-footer-links { display: flex; flex-direction: column; gap: 8px; }
.an-ec-footer-links a { color: #cddaeb; text-decoration: underline; width: fit-content; }
.an-ec-footer-links a:hover { color: #fff; }
.an-ec-footer-bottom {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 18px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.an-ec-footer-copy { color: var(--an-sofrocay-300); font-size: 12.5px; margin: 0; }
.an-ec-footer-legal { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.an-ec-footer-legal a {
    color: var(--an-sofrocay-300); font-size: 12.5px; text-decoration: underline;
}
.an-ec-footer-legal a:hover { color: #fff; }

/* Página mentions légales de la école */
.an-ec-legal { padding: 56px 0 72px; }
.an-ec-legal h1 { font-weight: 300; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; margin: 0 0 28px; }
.an-ec-legal h2 { font-weight: 400; font-size: 20px; margin: 36px 0 12px; color: var(--an-gray-100); }
.an-ec-legal p, .an-ec-legal li { color: var(--an-gray-300); line-height: 1.7; max-width: 74ch; }
.an-ec-legal ul { padding-left: 20px; }
.an-ec-legal a { color: var(--an-sofrocay-500); text-decoration: underline; }

@media (max-width: 640px) {
    .an-ec-hero { padding: 56px 0 48px; }
    .an-ec-section, .an-ec-apres { padding: 44px 0; }
    .an-ec-nav { gap: 14px; }
    .an-ec-nav a { font-size: 13px; }
    .an-ec-contact-card { flex-direction: column; align-items: flex-start; }
}

/* Hero de la école con imagen del catálogo (pix/ecole-heros): la imagen
   entra por style inline; el overlay navy garantiza el contraste del texto
   (mismos tonos que el gradiente de marca, algo más transparente). */
.an-ec-hero-img {
    background-size: cover; background-position: center; position: relative;
}
.an-ec-hero-img::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, rgba(15, 33, 64, 0.90) 0%, rgba(15, 33, 64, 0.62) 45%, rgba(15, 33, 64, 0.30) 100%),
        linear-gradient(0deg, rgba(15, 33, 64, 0.82) 0%, rgba(15, 33, 64, 0.45) 38%, rgba(15, 33, 64, 0) 68%);
}
@media (max-width: 640px) {
    .an-ec-hero-img::before {
        background: linear-gradient(0deg, rgba(15, 33, 64, 0.92) 0%, rgba(15, 33, 64, 0.68) 48%, rgba(15, 33, 64, 0.34) 100%);
    }
}
.an-ec-hero-img .an-ec-container { position: relative; z-index: 2; }

/* Slideshow del hero (crossfade CSS puro, sin JS): capas apiladas con la
   misma animación y delay escalonado de 6 s por imagen. */
.an-ec-hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.an-ec-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
}
.an-ec-slides-1 .an-ec-hero-slide { opacity: 1; }
.an-ec-slides-2 .an-ec-hero-slide { animation: an-ec-hero-fade2 12s infinite; }
.an-ec-slides-3 .an-ec-hero-slide { animation: an-ec-hero-fade3 18s infinite; }
@keyframes an-ec-hero-fade2 {
    0% { opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; }
    58% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes an-ec-hero-fade3 {
    0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; }
    41% { opacity: 0; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .an-ec-hero-slide { animation: none !important; }
    .an-ec-hero-slides .an-ec-hero-slide:first-child { opacity: 1; }
}


/* Franja de reassurance bajo el hero (panel 2026-07-08): certificación y
   financiación — las dos objeciones del adulto francés en reconversión. */
.an-ec-reassure { background: #f4f7fb; border-bottom: 1px solid var(--an-border-soft); }
.an-ec-reassure-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px; padding: 28px 24px;
}
.an-ec-reassure-item {
    display: flex; gap: 12px; margin: 0; font-size: 14px; line-height: 1.5;
    color: var(--an-gray-300);
}
.an-ec-reassure-item::before {
    content: ''; flex: 0 0 3px; align-self: stretch;
    background: var(--an-sofrocay-500); border-radius: 2px;
}

/* Soirée d'information: LA banda de conversión (único navy intermedio,
   intencional — el mecanismo estrella del sector formación). */
.an-ec-soiree {
    color: #fff; padding: clamp(56px, 7vw, 84px) 0;
    background: radial-gradient(120% 120% at 0% 0%, var(--an-sofrocay-700), var(--an-sofrocay-900) 72%);
}
/* AA sobre el punto más claro del degradado (barrido c55). */
.an-ec-soiree .an-ec-kicker { color: #aac3e0; }
.an-ec-soiree h2 { color: #fff; font-weight: 300; }
.an-ec-soiree-lead { color: #cddaeb; max-width: 60ch; margin: 0 0 28px; line-height: 1.65; }
.an-ec-soiree-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.an-ec-soiree-card h4, .an-ec-soiree-card .an-ss-prose { color: #eaf0f7; }
.an-ec-soiree-cta { margin-top: 28px; }


/* Isotipo Sofrocay (franquicia): el sello real en el pill del hero,
   la sección après y el footer. */
.an-ec-hero-affil img { flex-shrink: 0; display: block; }
.an-ec-apres-iso { display: block; margin: 0 0 14px; }
.an-ec-footer-iso { display: block; margin: 4px auto 12px; opacity: 0.9; }


/* Isotipo en el header: co-branding de franquicia — la école es la marca,
   la red es el aval. Separador sutil, extremo derecho del nav. */
.an-ec-nav-reseau {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 6px; padding-left: 18px;
    border-left: 1px solid var(--an-border);
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--an-gray-500) !important; border-bottom: none !important;
}
.an-ec-nav-reseau:hover { color: var(--an-sofrocay-500) !important; }
.an-ec-nav-reseau img { display: block; }
@media (max-width: 640px) {
    /* sr-only, no display:none (c130): el nombre accesible se conserva. */
    .an-ec-nav-reseau span { position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .an-ec-nav-reseau { padding-left: 12px; }
}


/* Header sencillo del anuario (directiva Mario 2026-07-08): solo el logo
   Sofrocay + connexion. Sustituye a utility bar + mega-nav (CSS antiguo
   an-utilbar/an-nav-items queda sin uso; limpieza en un pase futuro). */
.an-header-simple { background: #fff; border-bottom: 1px solid var(--an-border); }
.an-nav-simple {
    max-width: 1280px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.an-nav-simple .an-nav-brand {
    display: inline-flex; align-items: center; gap: 11px;
    color: var(--an-gray-100); text-decoration: none;
    font-size: 19px; letter-spacing: 0.01em;
}
.an-nav-simple .an-nav-brand img { display: block; }
.an-nav-connect-simple {
    font-size: 14px; color: var(--an-gray-400); text-decoration: none;
    border: 1px solid var(--an-border); border-radius: 999px; padding: 8px 18px;
}
.an-nav-connect-simple:hover { color: var(--an-sofrocay-500); border-color: var(--an-sofrocay-400); text-decoration: none; }


/* Barra de dueño en la ficha (Mario 2026-07-08): el sofrólogo/director/
   moderador logueado ve el estado del servicio y los mandos de edición. */
.an-owner-bar { background: #eaf3ee; border-bottom: 1px solid #cfe5d8; }
.an-owner-bar-inner {
    max-width: 1280px; margin: 0 auto; padding: 10px 24px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px;
}
.an-owner-title { font-weight: 600; color: #14532d; }
.an-owner-estado { color: #166534; }
.an-owner-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.an-owner-actions .an-btn-primary, .an-owner-actions .an-btn-secondary {
    padding: 6px 14px; font-size: 13px;
}

/* ============================================================
   Landing Sophrosite «espectacular» (Mario 2026-07-08): hero
   cinematográfico con el mockup del producto real + beneficios.
   ============================================================ */
.an-vs2-hero {
    background-size: cover; background-position: center right;
    background-color: var(--an-sofrocay-900);
    min-height: min(72vh, 760px); display: flex; align-items: center;
    color: #fff; position: relative;
}
.an-vs2-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 22, 44, 0.88) 0%, rgba(10, 22, 44, 0.55) 45%, rgba(10, 22, 44, 0.05) 75%);
}
.an-vs2-hero-inner {
    position: relative; max-width: 1160px; margin: 0 auto; width: 100%;
    padding: 96px 28px 72px;
}
.an-vs2-kicker {
    text-transform: uppercase; letter-spacing: 0.2em; font-size: 13px;
    color: #bcd0e6; margin: 0 0 16px;
}
.an-vs2-hero h1 {
    font-size: clamp(34px, 5vw, 58px); font-weight: 300; line-height: 1.08;
    letter-spacing: -0.02em; color: #fff; margin: 0 0 20px; max-width: 15ch;
    text-shadow: 0 1px 14px rgba(10, 22, 44, 0.5);
}
.an-vs2-sub {
    font-size: clamp(16px, 2vw, 20px); color: #d7e2f0; line-height: 1.6;
    max-width: 46ch; margin: 0 0 32px; text-shadow: 0 1px 2px rgba(10, 22, 44, 0.5);
}
.an-vs2-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.an-vs2-ctas .an-btn-primary { padding: 13px 28px; font-size: 15px; }
.an-vs2-proof {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
    color: #d7e2f0; margin: 0; text-shadow: 0 1px 2px rgba(10, 22, 44, 0.55);
}

.an-vs2-body { background: var(--an-surface); }
.an-vs2-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.an-vs2-section { padding: clamp(64px, 8vw, 96px) 0; }
.an-vs2-section-alt { background: #f4f7fb; border-top: 1px solid var(--an-border-soft); border-bottom: 1px solid var(--an-border-soft); }
.an-vs2-section h2, .an-vs2-showcase h2, .an-vs2-tarif h2 {
    font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; letter-spacing: -0.02em;
    color: var(--an-gray-100); margin: 0 0 32px; line-height: 1.15;
}
.an-vs2-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}
.an-vs2-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 16px; padding: 26px;
    box-shadow: 0 1px 3px rgba(15, 33, 64, 0.06), 0 8px 24px -12px rgba(15, 33, 64, 0.18);
}
.an-vs2-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 400; color: var(--an-sofrocay-500); }
.an-vs2-card p { margin: 0; color: var(--an-gray-400); line-height: 1.65; }

.an-vs2-showcase { background: var(--an-sofrocay-900); color: #fff; padding: clamp(56px, 7vw, 84px) 0; }
.an-vs2-showcase h2 { color: #fff; }
.an-vs2-showcase p { color: #cddaeb; line-height: 1.65; max-width: 48ch; margin: 0 0 24px; }
.an-vs2-showcase-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 44px; align-items: center;
}
.an-vs2-showcase img { width: 100%; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
.an-vs2-example { display: inline-flex; align-items: center; gap: 7px; color: #bcd0e6; font-size: 15px; text-decoration: underline; }
.an-vs2-example:hover { color: #fff; }
@media (max-width: 780px) { .an-vs2-showcase-grid { grid-template-columns: 1fr; } }

.an-vs2-steps { max-width: 60ch; padding-left: 22px; }
.an-vs2-steps li { margin: 0 0 14px; line-height: 1.65; color: var(--an-gray-300); font-size: 17px; }

.an-vs2-tarif { text-align: center; padding: clamp(64px, 8vw, 96px) 0; background: #f4f7fb; border-top: 1px solid var(--an-border-soft); }
/* El precio NO es el centro (Mario 2026-07-09): línea serena tras el
   valor, no display. */
.an-vs2-price {
    font-size: 17px; font-weight: 400; letter-spacing: 0;
    color: var(--an-gray-200); margin: 0 0 6px;
    padding-top: 18px; border-top: 1px solid var(--an-border-soft);
}
.an-vs2-tarif-note { color: var(--an-gray-500); margin: 0 0 28px; }
.an-vs2-ecole { padding: 56px 28px 72px; }


/* Cura de la landing v2 (Mario 2026-07-08): iconos 3D navy+oro en las
   cards, pasos display, tarif como tarjeta con checklist. */
.an-vs2-card { text-align: left; }
.an-vs2-card img { display: block; margin: 0 0 16px; width: 84px; height: 84px; object-fit: contain; }
.an-vs2-steps-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.an-vs2-step {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 16px; padding: 26px;
    box-shadow: 0 1px 3px rgba(15, 33, 64, 0.06), 0 8px 24px -12px rgba(15, 33, 64, 0.18);
}
.an-vs2-step-n {
    display: block; font-size: 44px; font-weight: 300; line-height: 1;
    color: #c9a227; margin-bottom: 12px;
}
.an-vs2-step p { margin: 0; color: var(--an-gray-300); line-height: 1.65; font-size: 16px; }
.an-vs2-tarif-card {
    max-width: 560px; margin: 0 auto;
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 20px; padding: 40px 36px;
    border-top: 3px solid var(--an-sofrocay-500);
    box-shadow: 0 4px 8px rgba(15, 33, 64, 0.08), 0 26px 60px -24px rgba(15, 33, 64, 0.3);
}
.an-vs2-inclus {
    list-style: none; margin: 0 0 22px; padding: 0; text-align: left;
    max-width: 42ch; margin-left: auto; margin-right: auto;
}
.an-vs2-inclus li {
    padding: 8px 0 8px 30px; position: relative; color: var(--an-gray-300);
    line-height: 1.5; border-bottom: 1px solid var(--an-border-soft);
}
.an-vs2-inclus li:last-child { border-bottom: none; }
.an-vs2-inclus li::before {
    content: '✓'; position: absolute; left: 4px; color: #8a6108; font-size: 16px; /* AA 5.53 (c29) */
}
.an-vs2-ecole-card { display: flex; gap: 18px; align-items: flex-start; }
.an-vs2-ecole-card img { flex-shrink: 0; margin-top: 4px; }
.an-vs2-ecole-card h2 { margin-top: 0; }

/* ============================================================
   Footer v2 del anuario (Mario 2026-07-08): 3 columnas + cita
   Caycedo + filigrana del isotipo. Sustituye al footer compacto
   (an-footer-* antiguo queda sin uso; limpieza futura).
   ============================================================ */
.an-footer-v2 {
    background: var(--an-sofrocay-900); color: #cddaeb;
    position: relative; overflow: hidden; font-size: 14px;
    margin-top: 64px;
}
.an-footer-v2::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 460px at 90% 120%, rgba(122, 156, 196, 0.10), transparent 70%);
}
.an-footer-v2::after {
    content: ''; position: absolute; right: -240px; bottom: -300px;
    width: 620px; height: 620px; pointer-events: none;
    background: url(pix/isotipo-sofrocay-blanco.svg) no-repeat center / contain;
    opacity: 0.03; transform: rotate(-8deg);
}
.an-footer-v2-inner {
    position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
    padding: 56px 24px 28px;
}
.an-footer-v2-grid {
    display: grid; grid-template-columns: minmax(280px, 1.4fr) 1fr 1fr;
    gap: 48px; margin-bottom: 44px;
}
@media (max-width: 820px) { .an-footer-v2-grid { grid-template-columns: 1fr; gap: 32px; } }
.an-footer-v2-brand {
    display: inline-flex; align-items: center; gap: 11px;
    color: #fff; font-size: 19px; margin-bottom: 18px;
}
.an-footer-v2-brand img { display: block; opacity: 0.95; }
.an-footer-v2-quote {
    font-style: italic; color: #9db4d0; line-height: 1.7; max-width: 38ch;
    margin: 0 0 20px; font-size: 15px;
}
.an-footer-v2-quote em { color: #d7b45a; font-style: italic; }
.an-footer-v2-quote span { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--an-sofrocay-300); }
.an-footer-v2-news {
    display: inline-block; color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
    padding: 8px 18px; font-size: 13px;
}
.an-footer-v2-news:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.an-footer-v2-h {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
    color: #9db4d0; margin: 4px 0 16px;
}
.an-footer-v2-nav, .an-footer-v2-contact { display: flex; flex-direction: column; gap: 11px; }
.an-footer-v2-nav a, .an-footer-v2-contact a {
    color: #cddaeb; text-decoration: none; width: fit-content; line-height: 1.4;
}
.an-footer-v2-nav a:hover, .an-footer-v2-contact a:hover { color: #fff; text-decoration: underline; }
.an-footer-v2-bottom {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; flex-wrap: wrap; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px; color: var(--an-sofrocay-300);
}
.an-footer-v2-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.an-footer-v2-legal a { color: #cddaeb; text-decoration: underline; }
.an-footer-v2-legal a:hover { color: #fff; }

/* Beneficios de la landing como FILAS editoriales (img izq / texto der) */
.an-vs2-rows { display: flex; flex-direction: column; gap: 22px; }
.an-vs2-row {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0; align-items: stretch;
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 33, 64, 0.06), 0 10px 30px -14px rgba(15, 33, 64, 0.2);
}
.an-vs2-row img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.an-vs2-row-text { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; }
.an-vs2-row-text h3 {
    margin: 0 0 10px; font-size: 21px; font-weight: 400; letter-spacing: -0.01em;
    color: var(--an-gray-100);
}
.an-vs2-row-text p { margin: 0; color: var(--an-gray-400); line-height: 1.7; font-size: 16px; max-width: 56ch; }
@media (max-width: 700px) {
    .an-vs2-row { grid-template-columns: 1fr; }
    .an-vs2-row img { min-height: 180px; }
    .an-vs2-row-text { padding: 24px; }
}


/* Escena «Comment ça marche» + oferta (Mario 2026-07-09): timeline con
   hilo dorado a la izquierda, la card de la oferta a la derecha. */
.an-vs2-commencer {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
    gap: 56px; align-items: start;
}
@media (max-width: 860px) { .an-vs2-commencer { grid-template-columns: 1fr; gap: 36px; } }
.an-vs2-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.an-vs2-timeline li {
    position: relative; display: flex; gap: 20px; padding: 0 0 40px 0;
}
.an-vs2-timeline li:last-child { padding-bottom: 0; }
.an-vs2-timeline li::before {
    content: ''; position: absolute; left: 21px; top: 46px; bottom: 2px;
    width: 1px; background: linear-gradient(180deg, #d8bd6a, rgba(216, 189, 106, 0.25));
}
.an-vs2-timeline li:last-child::before { display: none; }
.an-vs2-tl-n {
    width: 43px; height: 43px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid #8a6108; color: #8a6108; background: #fff; /* AA 5.53 (c29) */
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 400;
}
.an-vs2-timeline h3 {
    margin: 8px 0 6px; font-size: 19px; font-weight: 400;
    letter-spacing: -0.01em; color: var(--an-gray-100);
}
.an-vs2-timeline p { margin: 0; color: var(--an-gray-400); line-height: 1.65; max-width: 46ch; }
.an-vs2-tarif-card-h {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
    color: var(--an-sofrocay-500); margin: 0 0 14px; text-align: left;
}
.an-vs2-commencer .an-vs2-tarif-card { margin: 0; max-width: none; text-align: left; }
.an-vs2-commencer .an-vs2-inclus { margin-left: 0; margin-right: 0; max-width: none; }

/* ============================================================
   Mon espace — hub de autogestión (Mario 2026-07-10). Vive en
   el pagelayout standard del campus (no en el layout público):
   estilos scoped a .an-espace, sobrios y de dashboard.
   ============================================================ */
.an-espace { max-width: 1080px; margin: 0 auto; }
.an-espace-empty { text-align: center; padding: 48px 20px; }
.an-espace-empty h1 { font-weight: 400; margin-bottom: 12px; }
.an-espace-head { margin: 8px 0 28px; }
.an-espace-head h1 { font-weight: 400; letter-spacing: -0.01em; margin: 0 0 8px; }
.an-espace-intro { color: #4b5563; max-width: 70ch; margin: 0; }
.an-espace-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    padding: 24px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(15,33,64,.05);
}
.an-espace-card-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f2f6;
}
.an-espace-card-head h2 { margin: 0; font-size: 20px; font-weight: 400; color: #111827; }
.an-espace-badge {
    font-size: 12.5px; padding: 4px 12px; border-radius: 999px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.an-espace-badge-actif   { background: #e7f5ec; color: #14683a; }
.an-espace-badge-attente { background: #fdf3e2; color: #92600a; }
.an-espace-badge-inactif { background: #f3f4f6; color: #4b5563; }
.an-espace-badge-neutre  { background: #eef2f8; color: #305B91; }
.an-espace-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.an-espace-tile {
    background: #fafbfd; border: 1px solid #eef1f6; border-radius: 12px; padding: 18px 20px;
    display: flex; flex-direction: column;
}
.an-espace-tile h3 {
    margin: 0 0 10px; font-size: 15px; font-weight: 500; color: #305B91;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.an-espace-status { color: #4b5563; margin: 0 0 12px; line-height: 1.5; font-size: 14px; }
.an-espace-value { color: #111827; font-weight: 500; margin: 0 0 10px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.an-espace-help { color: #6b7280; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.an-espace-tile-actions { margin-top: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.an-espace-link { color: #305B91; text-decoration: none; font-size: 14px; }
.an-espace-link:hover { text-decoration: underline; }
/* Botones del hub con el sistema propio (barrido c55: usaban Bootstrap crudo). */
.an-espace-btn {
    display: inline-flex; align-items: center;
    /* !important: combinada con .an-btn-primary, la base fija color #fff
       !important → texto FANTASMA sobre fondo transparente (mismo bug de los
       CTAs del hero, cazado en el barrido 2026-07-12). */
    background: transparent; color: var(--an-sofrocay-700) !important;
    border: 1px solid #cdd8e6; border-radius: 999px;
    padding: 0.5rem 1.1rem; font-size: 0.86rem; font-weight: 500;
    text-decoration: none; transition: border-color .15s, background .15s;
}
a.an-btn-primary.an-espace-btn { border-color: var(--an-sofrocay-500); }
.an-espace-btn:hover {
    background: #f2f6fb; border-color: var(--an-sofrocay-500);
    color: var(--an-sofrocay-900) !important; text-decoration: none;
}
.an-espace-link-strong { color: #305B91; font-weight: 600; text-decoration: underline; }
.an-espace-note { margin: 12px 0 0; }
.an-espace-tile-stats { background: #0f2140; border-color: #0f2140; }
.an-espace-tile-stats h3 { color: #7a9cc4; }
.an-espace-tile-stats .an-espace-status { color: #cddaeb; }
.an-espace-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.an-espace-stats > div { display: flex; flex-direction: column; }
.an-espace-stat-n { font-size: 30px; font-weight: 300; color: #fff; line-height: 1; }
.an-espace-stats > div > span:last-child { color: #9db4d0; font-size: 12.5px; margin-top: 4px; }
/* CTA del propietario en el listado (Mario 2026-07-13): banda fina y serena,
   visible solo para el pro logueado. Dorado de marca WCAG-AA sobre blanco. */
.an-owner-band { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  background: #fff; border-left: 4px solid #b98d4f; border-radius: 8px;
  padding: 14px 20px; margin: 18px 0 0; box-shadow: 0 8px 24px -18px rgba(15, 36, 56, .5); }
.an-owner-band-text { margin: 0; flex: 1 1 320px; color: #22303e; font-size: 15px; }
.an-owner-band-cta { white-space: nowrap; color: #16324f; font-weight: 600;
  font-size: 14.5px; text-decoration: none; border: 1px solid #16324f;
  border-radius: 999px; padding: 7px 18px; }
.an-owner-band-cta:hover { background: #16324f; color: #fff; text-decoration: none; }

/* Verdad temporal de la medición (Mario 2026-07-13): «depuis le …». */
.an-espace-stats-depuis { color: #9db4d0; font-size: 12.5px; margin: 10px 0 0; }

/* Bandeau de renouvellement (#43): recordatorio sereno en los últimos 60 días
   de validez — valor entregado + fecha de visibilidad, SIN urgencia fabricada
   (regla de marca). Acento y CTA en el dorado WCAG-AA #8a6108 (ratio 5.53,
   validado c29), no rojo de alarma. */
.an-espace-renew {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    justify-content: space-between;
    background: #f7f9fc; border: 1px solid #e3e9f2; border-left: 4px solid #8a6108;
    border-radius: 12px; padding: 16px 20px; margin-bottom: 20px;
}
.an-espace-renew-body { flex: 1 1 280px; }
.an-espace-renew-h { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #0f2140; }
.an-espace-renew-val { margin: 0 0 4px; color: #1f2937; font-size: 14px; line-height: 1.5; }
.an-espace-renew-date { margin: 0; color: #4b5563; font-size: 13.5px; }
.an-espace-renew-cta {
    flex: 0 0 auto; background: #8a6108; color: #fff; text-decoration: none;
    font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 8px;
    white-space: nowrap;
}
.an-espace-renew-cta:hover { background: #795200; }

/* ============================================================
   Header réplica del WordPress corporativo (Mario 2026-07-10).
   FIEL AL RENDER REAL (verificado con Chrome + estilos computados
   el 2026-07-10, tras el aviso de Mario de que la v1 no era
   idéntica): topbar #F9F9F9 37px con enlaces 13px Sense gris
   #878787 alineados a la derecha (Communauté en azul) separados
   por barras; franja blanca con logo 228px y nav de DOS LÍNEAS
   (label uppercase 14px Sense light #305B91 + subtítulo 13px
   #5E5E5E). El selector de idiomas es adición propia (el WP es
   solo fr), integrado con los códigos en gris topbar.
   ============================================================ */
.an-wph { background: #fff; border-bottom: 1px solid var(--an-border); font-family: 'Sense', 'Trade Gothic Next LT Pro', sans-serif; }
.an-wph a { text-decoration: none; }

/* Franja 1 — topbar clara, contenido a la derecha */
.an-wph-topbar { background: #F9F9F9; }
.an-wph-topbar-in {
    max-width: 1290px; margin: 0 auto; padding: 0 24px; min-height: 37px;
    display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.an-wph-utils { display: flex; align-items: center; flex-wrap: wrap; }
.an-wph-utils a {
    color: #878787; font-size: 13px; font-weight: normal; padding: 2px 14px;
    border-right: 1px solid #d9d9d9; line-height: 1.3;
}
.an-wph-utils a:last-child { border-right: 0; }
.an-wph-utils a:hover { color: var(--an-sofrocay-500); }
.an-wph-utils a.is-accent { color: var(--an-sofrocay-500); }
.an-wph-social { display: flex; align-items: center; gap: 12px; }
.an-wph-social a { color: #878787; display: flex; }
.an-wph-social svg { width: 14px; height: 14px; }
.an-wph-social a:hover { color: var(--an-sofrocay-500); }
.an-wph-langs { display: flex; align-items: center; gap: 1px; padding-left: 14px; border-left: 1px solid #d9d9d9; }
.an-wph-langs a {
    color: #878787; font-size: 11px; letter-spacing: .05em; padding: 2px 5px;
    border-radius: 4px; line-height: 1.4;
}
.an-wph-langs a:hover { color: var(--an-sofrocay-500); background: #eef2f8; }
.an-wph-langs a.is-active { color: #fff; background: var(--an-sofrocay-500); font-weight: bold; }

/* Franja 2 — logo + nav dos líneas */
.an-wph-main { background: #fff; }
.an-wph-main-in {
    max-width: 1290px; margin: 0 auto; padding: 18px 24px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.an-wph-logo { flex-shrink: 0; display: block; }
.an-wph-logo img { display: block; width: 228px; height: auto; }
.an-wph-nav-desktop { display: flex; align-items: flex-start; gap: 34px; }
.an-wph-nav a { display: block; }
.an-wph-l1 {
    display: block; font-family: 'Sense', sans-serif; font-weight: 100;
    font-size: 14px; line-height: 1.5; text-transform: uppercase;
    color: var(--an-sofrocay-500); letter-spacing: .01em;
}
.an-wph-l2 {
    display: block; font-family: 'Sense', sans-serif; font-weight: 100;
    font-size: 13px; line-height: 1.5; color: #5E5E5E;
}
.an-wph-nav a:hover .an-wph-l1 { color: var(--an-sofrocay-700); }
.an-wph-nav a.is-active .an-wph-l1 { box-shadow: inset 0 -2px 0 var(--an-sofrocay-500); display: inline-block; font-weight: bold; }

/* Móvil: hamburger con <details> (sin JS) */
.an-wph-burger { display: none; position: relative; }
.an-wph-burger summary {
    list-style: none; cursor: pointer; display: flex; flex-direction: column;
    gap: 5px; padding: 10px; border-radius: 8px; border: 1px solid var(--an-border);
}
.an-wph-burger summary::-webkit-details-marker { display: none; }
.an-wph-burger summary span { width: 22px; height: 2px; background: var(--an-sofrocay-500); border-radius: 2px; }
.an-wph-nav-mobile {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: #fff; border: 1px solid var(--an-border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 33, 64, .14); padding: 12px;
    display: flex; flex-direction: column; gap: 10px; min-width: 270px;
}
@media (max-width: 1080px) {
    .an-wph-nav-desktop { display: none; }
    .an-wph-burger { display: block; }
    /* El topbar no envolvía: utils + 6 idiomas en una fila = ~500px → scroll
       horizontal en toda la página (auditoría móvil c59, medido a 375px). */
    .an-wph-topbar-in { flex-wrap: wrap; justify-content: center; row-gap: 2px; gap: 10px; }
    .an-wph-utils a { font-size: 12px; padding: 2px 9px; }
    .an-wph-utils a:nth-child(n+4) { display: none; } /* topbar compacta en móvil */
    .an-wph-logo img { width: 178px; }
    .an-wph-social { display: none; }
}

/* Panel «Vos données dans l'annuaire» del editor (loop edición↔ERP 2026-07-11):
   los datos MAESTROS del PostgreSQL (solo lectura) junto a lo editable. */
.an-erp-panel {
    background: #f4f7fb; border: 1px solid #dbe4ec; border-radius: 12px;
    padding: 18px 22px;
}
.an-erp-head { font-weight: 600; color: var(--an-sofrocay-700); margin-bottom: 12px; }
.an-erp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.an-erp-dl dt { color: var(--an-gray-500); font-size: 13.5px; font-weight: 500; }
.an-erp-dl dd { margin: 0; color: #1f2937; font-size: 14.5px; }
.an-erp-formlist { margin: 0; padding-left: 0; list-style: none; }
.an-erp-formlist li { margin-bottom: 3px; }
.an-erp-ciclo { font-weight: 600; color: var(--an-sofrocay-500); }
.an-erp-help { color: var(--an-gray-500); font-size: 13px; border-top: 1px solid #dbe4ec; padding-top: 10px; }
.an-erp-help a { color: var(--an-sofrocay-500); }
@media (max-width: 640px) { .an-erp-dl { grid-template-columns: 1fr; gap: 2px; } .an-erp-dl dd { margin-bottom: 8px; } }

/* Redes sociales del ERP en la sticky contact bar (loop c3): icono por red
   REAL (clasificada por dominio en view::social_links, no por columna). */
.an-fsticky-social svg { width: 17px; height: 17px; }
.an-fsticky-social { display: inline-flex; align-items: center; }

/* Qualité des données en moderación (loop c24). */
.an-qualite-item { margin: 6px 0; }
.an-qualite-item summary { cursor: pointer; font-weight: 500; color: var(--an-sofrocay-700); }
.an-qualite-list { padding: 8px 0 4px 16px; color: #4b5563; font-size: 14px; line-height: 1.7; }

/* ============================================================
   Tour de bienvenue de l'éditeur (Mario 2026-07-11): accueil
   chaleureux, parcours guidé avec progression, CTA serein vers
   le Sophrosite pour les non-cotisants. Marque Sofrocay.
   ============================================================ */
.an-welcome { max-width: 760px; margin: 0 auto 28px; }
.an-welcome-hero {
    background: linear-gradient(135deg, var(--an-sofrocay-500), var(--an-sofrocay-700));
    color: #fff; border-radius: 18px; padding: 34px 34px 30px;
    box-shadow: 0 10px 34px rgba(15, 33, 64, .18);
}
.an-welcome-kicker {
    text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
    color: #cddaeb; margin: 0 0 8px; font-weight: 500;
}
.an-welcome-title { font-size: 30px; font-weight: 300; margin: 0 0 12px; letter-spacing: -.01em; color: #fff; }
.an-welcome-lead { font-size: 16.5px; line-height: 1.65; color: #eaf1f8; margin: 0 0 18px; max-width: 62ch; }
.an-welcome-aha {
    font-size: 14.5px; line-height: 1.55; color: #eaf1f8; margin: 0 0 18px;
    padding: 10px 14px; border-left: 3px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.08); border-radius: 0 8px 8px 0; max-width: 62ch;
}
.an-welcome-aha.is-real { color: #fff; font-weight: 500; border-left-color: #7bdca0; }
.an-welcome-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.an-welcome-viewpublic {
    display: inline-block; background: rgba(255,255,255,.14); color: #fff;
    padding: 8px 18px; border-radius: 9px; text-decoration: none; font-size: 14.5px;
    border: 1px solid rgba(255,255,255,.28);
}
.an-welcome-viewpublic:hover { background: rgba(255,255,255,.24); color: #fff; }
.an-welcome-pending { font-size: 13.5px; color: #cddaeb; }

/* Progression */
.an-welcome-progress { margin: 22px 4px 10px; }
.an-welcome-progress-bar {
    height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.an-welcome-progress-bar span {
    display: block; height: 100%; background: linear-gradient(90deg, var(--an-sofrocay-400), var(--an-sofrocay-600));
    border-radius: 99px; transition: width .5s ease;
}
.an-welcome-progress-label { font-size: 13.5px; color: var(--an-gray-500); margin: 8px 0 0; }

/* Parcours (étapes) */
.an-welcome-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.an-welcome-step {
    display: flex; align-items: center; gap: 16px; background: #fff;
    border: 1px solid var(--an-border); border-radius: 13px; padding: 15px 18px;
    transition: border-color .15s, box-shadow .15s;
}
.an-welcome-step:hover { border-color: var(--an-sofrocay-300); box-shadow: 0 3px 12px rgba(15,33,64,.06); }
.an-welcome-step.is-done { background: #f6faf7; border-color: #d6ebde; }
.an-welcome-step-mark {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 15px; background: #eef2f8; color: var(--an-sofrocay-500);
}
.an-welcome-step.is-done .an-welcome-step-mark { background: #14683a; color: #fff; }
.an-welcome-step-body { flex: 1; display: flex; flex-direction: column; }
.an-welcome-step-title { font-weight: 500; color: #1f2937; font-size: 15.5px; }
.an-welcome-step-desc { color: var(--an-gray-500); font-size: 13.5px; margin-top: 2px; }
.an-welcome-step-go {
    flex-shrink: 0; background: var(--an-sofrocay-500); color: #fff; padding: 7px 16px;
    border-radius: 8px; text-decoration: none; font-size: 14px;
}
.an-welcome-step-go:hover { background: var(--an-sofrocay-700); color: #fff; }
.an-welcome-step-ok { flex-shrink: 0; color: #14683a; font-size: 13.5px; font-weight: 500; }

/* CTA non-cotisant (serein, prix jamais au centre) */
.an-welcome-cta {
    margin-top: 18px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: #fbfaf6; border: 1px solid #ece5d3; border-radius: 15px; padding: 22px 26px;
}
.an-welcome-cta-body { flex: 1; min-width: 240px; }
.an-welcome-cta-body h2 { font-size: 18px; font-weight: 500; color: #92600a; margin: 0 0 6px; }
.an-welcome-cta-body p { font-size: 14.5px; line-height: 1.6; color: #6b5b3e; margin: 0; }
/* Fondo AA-compliant (auditoría loop c29: #b8860b + blanco = 3.25 < 4.5;
   #8a6108 = 5.53 ✓). Mantiene el ámbar de marca. */
.an-welcome-cta-btn {
    flex-shrink: 0; background: #8a6108; color: #fff; padding: 12px 26px; border-radius: 10px;
    text-decoration: none; font-size: 15px; font-weight: 500;
}
.an-welcome-cta-btn:hover { background: #795200; color: #fff; }
.an-welcome-cta-tarif {
    margin: 0.6rem 0 0; text-align: center; font-size: 0.82rem;
    font-weight: 600; color: #5b4a24;
}

/* GRAN banner del Sophrosite (feedback Mario 2026-07-11): protagonismo real —
   navy de marca, beneficios visibles con check dorado, CTA prominente. */
.an-welcome-cta-grand {
    background: linear-gradient(135deg, #0f2140 0%, #1a3461 60%, #224272 100%);
    border: none; border-radius: 18px; padding: 34px 38px;
    align-items: center;
}
.an-welcome-cta-grand .an-welcome-cta-kicker {
    margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #c9a96e;
}
.an-welcome-cta-grand .an-welcome-cta-body h2 {
    font-size: 24px; font-weight: 500; color: #fff; margin: 0 0 8px;
}
.an-welcome-cta-grand .an-welcome-cta-body > p {
    color: #cddaeb; font-size: 15px; max-width: 56ch;
}
.an-welcome-cta-benefits {
    margin: 16px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
}
.an-welcome-cta-benefits li {
    position: relative; padding-left: 26px;
    color: #e8eef7; font-size: 14.5px; line-height: 1.5;
}
.an-welcome-cta-benefits li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: #c9a96e; font-weight: 700;
}
.an-welcome-cta-action { flex-shrink: 0; }
.an-welcome-cta-grand .an-welcome-cta-btn {
    background: #c9a96e; color: #1b2a3f; font-weight: 600;
    padding: 14px 30px; border-radius: 12px; font-size: 15.5px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.an-welcome-cta-grand .an-welcome-cta-btn:hover { background: #d8bc85; color: #12233d; }

/* Message cotisant (Sophrosite en ligne) */
.an-welcome-live {
    margin-top: 18px; display: flex; align-items: center; gap: 10px;
    background: #f6faf7; border: 1px solid #d6ebde; border-radius: 12px; padding: 14px 20px;
    font-size: 14.5px; color: #14683a;
}
.an-welcome-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.an-welcome-live a { color: var(--an-sofrocay-500); }
@media (max-width: 560px) {
    .an-welcome-hero { padding: 26px 22px; }
    .an-welcome-title { font-size: 24px; }
    .an-welcome-cta { flex-direction: column; align-items: stretch; }
}

/* Publics accueillis en la ficha (loop c33): chips compactos. */
.an-fpublics { display: flex; flex-wrap: wrap; gap: 8px; }
.an-fpublic {
    display: inline-block; background: #eef2f8; color: var(--an-sofrocay-700);
    padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
}

/* Modalités de consultation en la ficha (loop c36): badges con acento navy. */
.an-fmodalites { display: flex; flex-wrap: wrap; gap: 10px; }
.an-fmodalite {
    display: inline-flex; align-items: center; gap: 6px; background: var(--an-sofrocay-500);
    color: #fff; padding: 7px 16px; border-radius: 10px; font-size: 14px; font-weight: 500;
}

/* Sitios reales en línea (idea 63-v1, votre-sophrosite): cards con el fondo
   real del sitio, nombre y tipo — prueba social viva, sin cifras infladas. */
.an-vs2-live-sub { color: var(--an-gray-400); max-width: 62ch; margin: 6px 0 22px; }
.an-vs2-live-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.an-vs2-live-card {
    position: relative; display: block; min-height: 170px;
    border-radius: 14px; overflow: hidden; text-decoration: none;
    background: linear-gradient(135deg, var(--an-sofrocay-800), var(--an-sofrocay-600));
    background-size: cover; background-position: center;
    box-shadow: var(--an-elev-sm); transition: transform .18s, box-shadow .18s;
}
.an-vs2-live-card:hover { transform: translateY(-3px); box-shadow: var(--an-elev-md); text-decoration: none; }
.an-vs2-live-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,33,64,.18) 0%, rgba(15,33,64,.78) 100%);
}
.an-vs2-live-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
}
.an-vs2-live-type {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #d8bc85;
}
.an-vs2-live-nom { color: #fff; font-size: 17px; font-weight: 500; }
.an-vs2-live-go { color: #cddaeb; font-size: 13px; margin-top: 3px; }
.an-vs2-live-card:hover .an-vs2-live-go { color: #fff; }

/* «Prochaine disponibilité» (idea 57): dato vivo del Cal, discreto y sereno —
   verde de disponibilidad, sin urgencia. Oculto hasta que el fetch trae dato. */
.an-rdv-next {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 10px 0 0; padding: 5px 13px;
    background: #ecfdf5; border-radius: 999px;
    color: #065f46; font-size: 13.5px; font-weight: 500;
}
.an-rdv-next::before {
    content: ""; width: 7px; height: 7px; border-radius: 9999px;
    background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.an-ec-hero .an-rdv-next { background: rgba(236, 253, 245, 0.94); }

/* Séance découverte (loop c42, idea 47): nota serena de accesibilidad del
   primer contacto (NO precio). Dorado WCAG-AA #8a6108 sobre fondo cálido,
   sin urgencia — coherente con el bandeau de renouvellement (c39). */
.an-fdecouverte {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0;
    background: #faf6ec; border: 1px solid #ecdfc0; border-radius: 10px;
    padding: 8px 15px; color: #6d4c07; font-size: 14px; font-weight: 500;
}
.an-fdecouverte-ic { color: #8a6108; font-size: 15px; line-height: 1; }

/* ============================================================
   EDITOR DEL SOPHROSITE — «un lugar pro» (rediseño Mario 2026-07-13).
   El moodleform se conserva (contrato POST, Atto, filepicker); esta capa
   lo convierte en un espacio de trabajo de marca: cabecera de producto,
   tarjetas por sección, labels apilados, panel lateral sereno.
   Paleta: navy #16324f · tinta #22303e · dorado #8a6108 (AA sobre blanco)
   · papel #f7f5f1 · línea #e5e0d8.
   ============================================================ */
.an-ssedit { max-width: 1180px; margin: 0 auto; }

/* --- Cabecera de producto --- */
.an-ssedit-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px 28px; flex-wrap: wrap; padding: 6px 0 18px; }
.an-ssedit-kicker { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #8a6108; font-weight: 600; margin-bottom: 4px; }
.an-ssedit-name { font-size: 32px; font-weight: 300; color: #16324f; margin: 0 0 6px;
  letter-spacing: -.01em; }
.an-ssedit-lead { color: #5c6b7a; font-size: 15.5px; max-width: 46em; }
.an-ssedit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 6px; }
.an-ssedit-chip { font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.an-ssedit-chip.is-online { background: #e5efe6; color: #1e5631; }
.an-ssedit-chip.is-moderation { background: #f7ecd8; color: #7a5a10; }
.an-ssedit-chip.is-rework { background: #e3ebf4; color: #16324f; }
.an-ssedit-chip.is-draft { background: #ece9e3; color: #5c6b7a; }
.an-ssedit-preview { color: #16324f; font-weight: 600; font-size: 14.5px;
  text-decoration: none; border: 1px solid #16324f; border-radius: 999px;
  padding: 8px 20px; white-space: nowrap; }
.an-ssedit-preview:hover { background: #16324f; color: #fff; text-decoration: none; }

/* --- Avisos serenos --- */
.an-ssedit-note { background: #fff; border: 1px solid #e5e0d8; border-left: 4px solid #b98d4f;
  border-radius: 8px; padding: 12px 18px; margin: 0 0 14px; color: #22303e; font-size: 14.5px; }
.an-ssedit-note.is-moderation { border-left-color: #caa53d; }

/* --- Grid con panel lateral --- */
.an-ssedit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px; align-items: start; margin-top: 10px; }
.an-ssedit-aside { position: sticky; top: 24px; display: flex;
  flex-direction: column; gap: 16px; }
.an-ssedit-card { background: #fff; border: 1px solid #e5e0d8; border-radius: 12px;
  padding: 20px 22px; }
.an-ssedit-card h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a6108; font-weight: 600; margin: 0 0 10px; }
.an-ssedit-card-text { color: #22303e; font-size: 14.5px; line-height: 1.55; }
.an-ssedit-card-sub { color: #5c6b7a; font-size: 12.5px; margin-top: 8px; }
@media (max-width: 980px) { .an-ssedit-grid { grid-template-columns: 1fr; }
  .an-ssedit-aside { position: static; } }

/* --- El moodleform como tarjetas --- */
.an-ssedit .mform { background: transparent; }
.an-ssedit .mform fieldset.collapsible,
.an-ssedit .mform fieldset.clearfix { background: #fff; border: 1px solid #e5e0d8;
  border-radius: 12px; padding: 24px 28px 18px; margin: 0 0 20px;
  box-shadow: 0 12px 30px -26px rgba(15, 36, 56, .4); }
.an-ssedit .mform legend,
.an-ssedit .mform legend.ftoggler { border: 0; margin: 0 0 14px; padding: 0;
  width: auto; font-size: 19px; }
.an-ssedit .mform legend a.fheader,
.an-ssedit .mform legend .fheader { color: #16324f; font-weight: 600; font-size: 19px;
  text-decoration: none; }
/* Sin acordeón visual: tarjetas siempre abiertas, fuera flechas de colapso. */
.an-ssedit .mform legend a.fheader::before,
.an-ssedit .mform .ftoggler [data-toggle="collapse"]::before { display: none; }
.an-ssedit .mform .collapsible-actions { display: none; }

/* Labels APILADOS (fuera el two-column triste): etiqueta arriba, campo a
   todo el ancho. */
.an-ssedit .mform .form-group.row.fitem { display: block; margin: 0 0 18px; }
.an-ssedit .mform .form-group.row.fitem > .col-md-3,
.an-ssedit .mform .form-group.row.fitem > .col-md-9 { max-width: 100%; flex: none;
  width: 100%; padding: 0; }
.an-ssedit .mform .col-form-label { justify-content: flex-start; text-align: left;
  color: #16324f; font-weight: 600; font-size: 14.5px; margin-bottom: 6px;
  display: block; }
.an-ssedit .mform .form-inline { display: block; }

/* Campos: serenos, generosos, foco dorado. */
.an-ssedit .mform input[type="text"],
.an-ssedit .mform input[type="url"],
.an-ssedit .mform textarea,
.an-ssedit .mform select { border: 1px solid #d7d0c5; border-radius: 8px;
  padding: 10px 14px; font-size: 15px; color: #22303e; background: #fff;
  width: 100%; max-width: 640px; box-shadow: none; }
.an-ssedit .mform input[type="text"]:focus,
.an-ssedit .mform input[type="url"]:focus,
.an-ssedit .mform textarea:focus,
.an-ssedit .mform select:focus { border-color: #b98d4f; outline: 0;
  box-shadow: 0 0 0 3px rgba(185, 141, 79, .18); }

/* Textos de ayuda (statics): guía discreta bajo el campo. */
.an-ssedit .mform .form-control-static,
.an-ssedit .mform .fstatic { color: #5c6b7a; font-size: 13.5px; line-height: 1.5; }

/* Atto: el editor como pieza integrada, no un widget ajeno. */
.an-ssedit .editor_atto_toolbar { background: #f7f5f1; border: 1px solid #d7d0c5;
  border-bottom: 0; border-radius: 8px 8px 0 0; }
.an-ssedit .editor_atto_content_wrap { border: 1px solid #d7d0c5;
  border-radius: 0 0 8px 8px; max-width: 640px; }
.an-ssedit .editor_atto_toolbar { max-width: 640px; }
.an-ssedit .editor_atto_content { padding: 12px 14px; font-size: 15px; }

/* Filemanager: encaja en la tarjeta. */
.an-ssedit .mform .filemanager { max-width: 640px; }
.an-ssedit .mform .fp-restrictions { color: #5c6b7a; font-size: 12.5px; }

/* Botonera: primaria navy en píldora, cancel como enlace tranquilo. */
.an-ssedit .mform .form-group.fitem_actionbuttons { background: transparent;
  border: 0; padding: 4px 0 30px; }
.an-ssedit .mform #fgroup_id_buttonar .btn-primary,
.an-ssedit .mform .fitem_actionbuttons .btn-primary { background: #16324f;
  border-color: #16324f; border-radius: 999px; padding: 11px 34px; font-weight: 600;
  font-size: 15.5px; }
.an-ssedit .mform .fitem_actionbuttons .btn-primary:hover { background: #0f2438; }
.an-ssedit .mform .fitem_actionbuttons .btn-secondary,
.an-ssedit .mform .fitem_actionbuttons .btn-cancel { background: transparent;
  border: 0; color: #5c6b7a; text-decoration: underline; }

/* La rejilla de fondos hero, dentro de su tarjeta. */
.an-ssedit .an-heros-grid { max-width: 100%; }
/* Fuera todo icono/flecha de colapso dentro de los títulos de tarjeta. */
.an-ssedit .mform legend .icon,
.an-ssedit .mform legend i,
.an-ssedit .mform legend a::before,
.an-ssedit .mform legend a::after,
.an-ssedit .mform legend [class*="fa-"] { display: none !important; }

/* Utilitaria sr-only (c130). */
.an-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }