/* ============================================================
   directorio_contratistas.css
   Estilos para la pagina publica /directorio-contratistas
   Direccion de diseno: "plano tecnico" — paleta de marca
   (azules --primary-* + acento --accent-info + grises) y
   tipografia Oswald/Martel Sans. Tokens anclados a
   core/variables.css.
   ============================================================ */

:root {
    /* Marca — azules primarios (core/variables.css: --primary-*) */
    --dir-navy-950: #141c25;   /* gradientes, profundidad extra */
    --dir-navy-900: #1a252f;   /* --primary-dark */
    --dir-navy-800: #232f3d;   /* intermedio */
    --dir-navy-700: #2c3e50;   /* --primary-blue: acciones, titulos */
    --dir-navy-600: #34495e;   /* --primary-light */
    --dir-navy-500: #465a6e;   /* azul-gris claro */

    /* Marca — acento azul info (core/variables.css: --accent-info) */
    --dir-accent-dark:  #2874a6;
    --dir-accent:       #3498db;
    --dir-accent-light: #5dade2;

    /* Tintes claros para chips y fondos */
    --dir-tint-200: #bcd9ec;
    --dir-tint-100: #dcebf6;
    --dir-tint-50:  #eef4f9;

    /* Texto y neutros (core/variables.css) */
    --dir-ink:       #1a252f;   /* titulos */
    --dir-text:      #5a6c7d;   /* --text-secondary */
    --dir-muted:     #6b7280;   /* --text-muted */
    --dir-line:      #e1e8ed;   /* --border-light */
    --dir-line-soft: #eef1f4;
    --dir-surface:   #ffffff;

    /* Acento ambar — avisos (semantico, se mantiene) */
    --dir-amber:        #d97706;
    --dir-amber-bg:     #fffbeb;
    --dir-amber-border: #fde68a;
    --dir-amber-text:   #78350f;

    /* Forma y profundidad */
    --dir-radius:      16px;
    --dir-radius-sm:   10px;
    --dir-radius-pill: 999px;
    --dir-shadow-card:  0 1px 2px rgba(26,37,47,.05), 0 2px 8px rgba(26,37,47,.05);
    --dir-shadow-hover: 0 18px 38px -14px rgba(26,37,47,.32);
    --dir-shadow-float: 0 18px 44px -16px rgba(26,37,47,.28), 0 2px 8px rgba(0,0,0,.05);
    --dir-ease: cubic-bezier(.16, 1, .3, 1);
}

.directorio-hero *,
.directorio-page *,
.dir-modal-overlay * {
    box-sizing: border-box;
}

/* ============================================================
   1. HERO  (ancho completo, fuera del contenedor)
   ============================================================ */
.directorio-hero {
    position: relative;
    width: 100%;
    align-self: stretch;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(5rem, 8vw, 7rem);
    text-align: center;
    background:
        linear-gradient(168deg, var(--dir-navy-950) 0%, var(--dir-navy-900) 38%, var(--dir-navy-700) 82%, var(--dir-navy-600) 100%);
}

/* Cuadricula tipo plano tecnico, difuminada hacia los bordes */
.directorio-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 58px 58px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 32%, #000 38%, transparent 100%);
            mask-image: radial-gradient(ellipse 78% 72% at 50% 32%, #000 38%, transparent 100%);
}

/* Halos de luz para dar profundidad */
.directorio-hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 56% 46% at 50% -4%, rgba(93,173,226,.22), transparent 70%),
        radial-gradient(ellipse 44% 50% at 88% 108%, rgba(52,152,219,.34), transparent 72%),
        radial-gradient(ellipse 40% 46% at 6% 100%, rgba(40,116,166,.34), transparent 72%);
}

.directorio-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.directorio-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(93,173,226,.32);
    color: var(--dir-accent-light);
    font-family: var(--font-family-heading);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.36rem 0.95rem;
    border-radius: var(--dir-radius-pill);
    margin-bottom: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.directorio-hero-badge svg {
    flex-shrink: 0;
    color: var(--dir-accent-light);
}

.directorio-hero-title {
    font-family: var(--font-family-heading);
    font-size: clamp(2.05rem, 5vw, 3.35rem);
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.85rem;
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(0,0,0,.32);
}

.hero-title-accent {
    color: var(--dir-accent-light);
}

.directorio-hero-desc {
    font-size: 1.06rem;
    color: rgba(255,255,255,.82);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.62;
}

.directorio-hero-desc strong {
    color: var(--dir-accent-light);
    font-weight: 700;
}

/* --- Stats reales en el hero --- */
.directorio-hero-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.25rem;
    margin: 2.2rem auto 0;
    max-width: 600px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    padding: 1rem 0.75rem;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.hero-stat {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    padding: 0.15rem 0.85rem;
}

.hero-stat-icon {
    color: var(--dir-accent-light);
    margin-bottom: 0.2rem;
}

.hero-stat-num {
    font-family: var(--font-family-heading);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hero-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,.64);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.35;
}

.hero-stat-sep {
    width: 1px;
    align-self: center;
    height: 46px;
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
}

/* ============================================================
   2. PAGINA  (se monta sobre el borde inferior del hero)
   ============================================================ */
.directorio-page {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: -3rem auto 0;
    padding: 0 1.5rem 5rem;
}

/* ============================================================
   3. FILTROS
   ============================================================ */
.directorio-filtros {
    position: relative;
    background: var(--dir-surface);
    border: 1px solid var(--dir-line);
    border-radius: var(--dir-radius);
    padding: 1.35rem 1.5rem 1.45rem;
    margin-bottom: 1.85rem;
    box-shadow: var(--dir-shadow-float);
    overflow: hidden;
}

/* Filo de marca en el borde superior de la tarjeta de filtros */
.directorio-filtros::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dir-navy-700), var(--dir-accent), var(--dir-navy-700));
}

.directorio-filtros-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-family: var(--font-family-heading);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dir-navy-700);
}

.directorio-filtros-head svg {
    color: var(--dir-accent);
}

.directorio-filtros-grid {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtro-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 150px;
}

.filtro-group label {
    font-family: var(--font-family-heading);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dir-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filtro-input {
    height: 44px;
    width: 100%;
    border: 1.5px solid var(--dir-line);
    border-radius: var(--dir-radius-sm);
    padding: 0 0.8rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--dir-ink);
    background: #f7f9fb;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.filtro-input::placeholder {
    color: #9aa6b2;
}

.filtro-input:hover {
    border-color: #cdd6de;
}

.filtro-input:focus {
    border-color: var(--dir-accent);
    box-shadow: 0 0 0 3.5px rgba(52,152,219,.15);
    background: #fff;
}

.filtro-btn-group {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.filtro-btn-buscar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 44px;
    padding: 0 1.4rem;
    background: var(--dir-navy-700);
    color: #fff;
    border: none;
    border-radius: var(--dir-radius-sm);
    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(26,37,47,.38);
    transition: background .15s, box-shadow .15s, transform .1s;
}

.filtro-btn-buscar:hover {
    background: var(--dir-navy-900);
    box-shadow: 0 6px 18px -3px rgba(26,37,47,.46);
}

.filtro-btn-buscar:active {
    transform: translateY(1px);
}

.filtro-btn-limpiar {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 1rem;
    border: 1.5px solid var(--dir-line);
    border-radius: var(--dir-radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dir-muted);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.filtro-btn-limpiar:hover {
    border-color: #c5cfd8;
    color: var(--dir-ink);
    background: #f7f9fb;
}

/* ============================================================
   4. RESULTADOS
   ============================================================ */
.directorio-resultados-head {
    margin-bottom: 1.25rem;
}

.directorio-conteo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.32rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dir-navy-700);
    background: var(--dir-tint-50);
    border: 1px solid var(--dir-tint-200);
    border-radius: var(--dir-radius-pill);
    padding: 0.34rem 0.95rem;
    margin: 0;
}

.directorio-conteo strong {
    font-family: var(--font-family-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--dir-accent-dark);
}

/* --- Grid de cards --- */
.directorio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}

@media (min-width: 760px) {
    .directorio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .directorio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   5. CARD DE CONTRATISTA
   ============================================================ */
.directorio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--dir-surface);
    border: 1.5px solid var(--dir-line);
    border-radius: var(--dir-radius);
    padding: 1.35rem 1.35rem 1.3rem;
    box-shadow: var(--dir-shadow-card);
    transition: box-shadow .25s var(--dir-ease),
                border-color .25s var(--dir-ease),
                transform .25s var(--dir-ease);
    /* Entrada escalonada — translate (independiente de transform del hover) */
    animation: dir-card-in .55s var(--dir-ease) both;
    animation-delay: .5s;
}

/* Barra de acento que se revela al pasar el cursor */
.directorio-card::before {
    content: '';
    position: absolute;
    top: -1.5px;
    left: 1.3rem;
    right: 1.3rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--dir-navy-700), var(--dir-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--dir-ease);
}

.directorio-card:hover {
    transform: translateY(-4px);
    border-color: var(--dir-accent-light);
    box-shadow: var(--dir-shadow-hover);
}

.directorio-card:hover::before {
    transform: scaleX(1);
}

.card-verificado {
    border-color: var(--dir-tint-200);
}

/* --- Card "Aliado PresuCosto" (cuenta con plan de pago) --- */
.card-aliado {
    overflow: hidden;
    border-color: var(--dir-accent-light);
    box-shadow: 0 1px 2px rgba(26,37,47,.05), 0 14px 30px -16px rgba(40,116,166,.5);
}

/* El banner reemplaza la barra de acento superior del hover */
.card-aliado::before {
    content: none;
}

.card-aliado-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    margin: -1.35rem -1.35rem 1.1rem;
    padding: 0.45rem 1rem;
    background: linear-gradient(90deg, var(--dir-navy-700) 0%, var(--dir-accent) 100%);
    color: #fff;
    font-family: var(--font-family-heading);
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.card-aliado-banner svg {
    flex-shrink: 0;
    color: var(--dir-tint-200);
}

@keyframes dir-card-in {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

/* Escalonado de la entrada (lista renderizada en servidor) */
.directorio-grid > .directorio-card:nth-child(1)  { animation-delay: .04s; }
.directorio-grid > .directorio-card:nth-child(2)  { animation-delay: .09s; }
.directorio-grid > .directorio-card:nth-child(3)  { animation-delay: .14s; }
.directorio-grid > .directorio-card:nth-child(4)  { animation-delay: .19s; }
.directorio-grid > .directorio-card:nth-child(5)  { animation-delay: .24s; }
.directorio-grid > .directorio-card:nth-child(6)  { animation-delay: .29s; }
.directorio-grid > .directorio-card:nth-child(7)  { animation-delay: .34s; }
.directorio-grid > .directorio-card:nth-child(8)  { animation-delay: .39s; }
.directorio-grid > .directorio-card:nth-child(9)  { animation-delay: .44s; }
.directorio-grid > .directorio-card:nth-child(10) { animation-delay: .49s; }

/* --- Cabecera: logo + meta --- */
.card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.card-logo-wrap {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 13px;
    overflow: hidden;
    border: 1.5px solid var(--dir-line);
    background: #f7f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    display: block;
}

.card-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dir-tint-50) 0%, var(--dir-tint-100) 100%);
}

.card-logo-iniciales {
    font-family: var(--font-family-heading);
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--dir-navy-700);
    line-height: 1;
    user-select: none;
}

.card-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding-top: 0.1rem;
}

.card-nombre-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}

.card-nombre {
    font-family: var(--font-family-heading);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--dir-ink);
    margin: 0;
    line-height: 1.22;
    letter-spacing: 0.01em;
}

.card-verificado-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-top: 1px;
    background: var(--dir-tint-50);
    color: var(--dir-accent-dark);
    border: 1px solid var(--dir-tint-200);
    border-radius: var(--dir-radius-pill);
    font-family: var(--font-family-heading);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.18rem 0.5rem 0.18rem 0.42rem;
}

.card-verificado-chip svg {
    color: var(--dir-accent);
}

.card-ubicacion {
    display: flex;
    align-items: center;
    font-size: 0.84rem;
    color: var(--dir-muted);
}

.card-ubicacion svg {
    color: var(--dir-accent);
    flex-shrink: 0;
    margin-right: 0.32rem;
}

/* --- Especialidades (tags) --- */
.card-especialidades {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.tag-especialidad {
    background: var(--dir-tint-50);
    color: var(--dir-navy-700);
    border: 1px solid var(--dir-tint-200);
    border-radius: var(--dir-radius-pill);
    font-size: 0.71rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

/* --- Cuerpo / descripcion --- */
.card-body {
    flex: 1;
}

.card-descripcion {
    font-size: 0.86rem;
    color: var(--dir-text);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Acciones --- */
.card-acciones {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dir-line-soft);
}

.btn-contactar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.62rem 1rem;
    background: #fff;
    border: 1.5px solid var(--dir-navy-700);
    border-radius: var(--dir-radius-sm);
    font-family: var(--font-family-heading);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--dir-navy-700);
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}

.btn-contactar:hover {
    background: var(--dir-navy-700);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(26,37,47,.45);
}

.btn-contactar:active {
    transform: translateY(1px);
}

/* ============================================================
   6. ESTADO VACIO
   ============================================================ */
.directorio-vacio {
    text-align: center;
    padding: 4rem 1.5rem;
}

.vacio-icono {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dir-tint-50);
    border: 1.5px solid var(--dir-tint-100);
    color: var(--dir-accent);
}

.vacio-titulo {
    font-family: var(--font-family-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--dir-ink);
    margin: 0 0 0.4rem;
}

.directorio-vacio p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--dir-muted);
}

.vacio-link {
    display: inline-flex;
    margin-top: 1.25rem;
    padding: 0.6rem 1.4rem;
    background: var(--dir-navy-700);
    color: #fff;
    border-radius: var(--dir-radius-sm);
    font-family: var(--font-family-heading);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, transform .1s;
}

.vacio-link:hover {
    background: var(--dir-navy-900);
    transform: translateY(-1px);
}

/* ============================================================
   7. CTA — inscripcion de contratistas
   ============================================================ */
.directorio-cta-inscribir {
    position: relative;
    overflow: hidden;
    margin-top: 3.5rem;
    border-radius: var(--dir-radius);
    padding: 2.1rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--dir-navy-900) 0%, var(--dir-navy-700) 100%);
    box-shadow: 0 16px 36px -14px rgba(26,37,47,.55);
}

.cta-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 60% 120% at 100% 50%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 120% at 100% 50%, #000, transparent 75%);
}

.cta-texto {
    position: relative;
    z-index: 1;
    color: #fff;
}

.cta-texto strong {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.28rem;
}

.cta-texto p {
    font-size: 0.92rem;
    color: rgba(255,255,255,.84);
    margin: 0;
}

.cta-btn-inscribir {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    background: #fff;
    color: var(--dir-navy-900);
    border-radius: var(--dir-radius-sm);
    font-family: var(--font-family-heading);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: transform .15s var(--dir-ease), box-shadow .15s;
}

.cta-btn-inscribir svg {
    transition: transform .2s var(--dir-ease);
}

.cta-btn-inscribir:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
}

.cta-btn-inscribir:hover svg {
    transform: translateX(3px);
}

/* ============================================================
   8. MODAL DE CONTACTO
   ============================================================ */
.dir-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 28, 37, 0.64);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.dir-modal-overlay[hidden] {
    display: none;
}

.dir-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 18px;
    padding: 1.85rem;
    box-shadow: 0 30px 70px rgba(20,28,37,.45);
    animation: dir-modal-in .22s var(--dir-ease);
}

@keyframes dir-modal-in {
    from { opacity: 0; transform: scale(.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dir-modal-cerrar {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
    border: none;
    border-radius: var(--dir-radius-sm);
    color: var(--dir-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.dir-modal-cerrar:hover {
    background: #e1e8ed;
    color: var(--dir-ink);
}

.dir-modal-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    padding-right: 2.5rem;
}

.dir-modal-icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--dir-tint-50);
    color: var(--dir-accent);
}

.dir-modal-titulo {
    font-family: var(--font-family-heading);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--dir-ink);
    margin: 0 0 0.1rem;
}

.dir-modal-empresa {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dir-navy-700);
    margin: 0;
}

.dir-modal-aviso {
    display: flex;
    gap: 0.65rem;
    background: var(--dir-amber-bg);
    border: 1px solid var(--dir-amber-border);
    border-radius: var(--dir-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.3rem;
    color: var(--dir-amber-text);
}

.dir-modal-aviso svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--dir-amber);
}

.dir-modal-aviso p {
    font-size: 0.81rem;
    line-height: 1.55;
    margin: 0;
}

.dir-modal-aviso strong {
    font-weight: 700;
}

.dir-modal-contactos {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dir-modal-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.78rem 1rem;
    border-radius: var(--dir-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .1s, filter .15s;
}

.dir-modal-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

/* WhatsApp conserva su verde de marca propia (affordance reconocible) */
.dir-modal-btn-wa {
    background: #25d366;
    color: #fff;
}

.dir-modal-btn-correo {
    background: var(--dir-tint-50);
    border: 1.5px solid var(--dir-tint-200);
    color: var(--dir-accent-dark);
    word-break: break-all;
}

.dir-modal-btn-web {
    background: #f5f6fa;
    border: 1.5px solid var(--dir-line);
    color: var(--dir-navy-700);
}

.dir-modal-vacio {
    color: var(--dir-muted);
    font-size: 0.9rem;
    text-align: center;
    margin: 0.5rem 0;
}

/* ============================================================
   9. ACCESIBILIDAD — foco visible por teclado
   ============================================================ */
.filtro-btn-buscar:focus-visible,
.filtro-btn-limpiar:focus-visible,
.btn-contactar:focus-visible,
.vacio-link:focus-visible,
.cta-btn-inscribir:focus-visible,
.dir-modal-cerrar:focus-visible,
.dir-modal-btn:focus-visible {
    outline: 2.5px solid var(--dir-accent);
    outline-offset: 2px;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .directorio-hero {
        padding: 2.75rem 1.25rem 5rem;
    }

    .directorio-hero-stats {
        padding: 0.85rem 0.5rem;
    }

    .hero-stat-sep {
        display: none;
    }

    .directorio-page {
        padding: 0 1rem 4rem;
    }

    .directorio-filtros-grid {
        flex-direction: column;
    }

    .filtro-btn-group {
        width: 100%;
    }

    .filtro-btn-buscar {
        flex: 1;
        justify-content: center;
    }

    .directorio-cta-inscribir {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem 1.4rem;
    }

    .cta-btn-inscribir {
        width: 100%;
        justify-content: center;
    }

    .dir-modal {
        padding: 1.4rem;
    }
}

/* ============================================================
   11. MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .directorio-card,
    .dir-modal {
        animation: none;
    }

    .directorio-card,
    .directorio-card::before,
    .directorio-card:hover,
    .btn-contactar,
    .cta-btn-inscribir,
    .cta-btn-inscribir svg,
    .vacio-link,
    .filtro-btn-buscar {
        transition: none;
    }

    .directorio-card:hover {
        transform: none;
    }

    .directorio-card:hover::before {
        transform: scaleX(1);
    }
}