/* ================================================
   RAU Empresas Cards
   Estética: editorial limpia, tipografía marcada,
   imagen con overlay deslizante al hover.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

/* ── Variables ── */
.rau-ec-grid {
    --rau-ec-accent:       #0d9488;
    --rau-ec-accent-dark:  #0f766e;
    --rau-ec-text:         #0f172a;
    --rau-ec-muted:        #64748b;
    --rau-ec-border:       #e2e8f0;
    --rau-ec-surface:      #f8fafc;
    --rau-ec-bg:           #ffffff;
    --rau-ec-shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --rau-ec-shadow-md:    0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --rau-ec-shadow-lg:    0 20px 48px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07);
    --rau-ec-radius:       16px;
    --rau-ec-radius-sm:    10px;
    --rau-ec-img-ratio:    56%;   /* 16:9 approx */
    --rau-ec-gap:          24px;
    --rau-ec-font-display: 'Syne', sans-serif;
    --rau-ec-font-body:    'DM Sans', sans-serif;
    --rau-ec-cols:         3;
}

/* ── Grid ── */
.rau-ec-grid {
    display:               grid;
    grid-template-columns: repeat(var(--rau-ec-cols), minmax(0, 1fr));
    gap:                   var(--rau-ec-gap);
    width:                 100%;
    box-sizing:            border-box;
}
.rau-ec-grid--cols-1 { --rau-ec-cols: 1; --rau-ec-img-ratio: 42%; }
.rau-ec-grid--cols-2 { --rau-ec-cols: 2; }
.rau-ec-grid--cols-3 { --rau-ec-cols: 3; }
.rau-ec-grid--cols-4 { --rau-ec-cols: 4; --rau-ec-gap: 18px; }

/* Sin resultados */
.rau-ec-empty {
    font-family: var(--rau-ec-font-body, sans-serif);
    color:       var(--rau-ec-muted, #64748b);
    font-size:   15px;
    text-align:  center;
    padding:     40px 0;
}

/* ── Card ── */
.rau-ec-card {
    background:    var(--rau-ec-bg);
    border-radius: var(--rau-ec-radius);
    box-shadow:    var(--rau-ec-shadow-sm);
    border:        1px solid var(--rau-ec-border);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    transition:    transform .28s cubic-bezier(.34,1.4,.64,1),
                   box-shadow .28s ease;
    /* Animación de entrada escalonada */
    animation:     rauEcFadeUp .5s cubic-bezier(.22,1,.36,1) var(--rau-ec-delay, 0ms) both;
}
.rau-ec-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--rau-ec-shadow-lg);
}
@keyframes rauEcFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Imagen ── */
.rau-ec-card__img-wrap {
    position:    relative;
    display:     block;
    width:       100%;
    padding-top: var(--rau-ec-img-ratio);
    overflow:    hidden;
    background:  var(--rau-ec-surface);
    flex-shrink: 0;
    text-decoration: none;
}
.rau-ec-card__img,
.rau-ec-card__img-placeholder {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rau-ec-card__img-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.rau-ec-card__img-placeholder svg {
    width:  100%;
    height: 100%;
}
.rau-ec-card:hover .rau-ec-card__img {
    transform: scale(1.06);
}

/* Shimmer overlay al hover */
.rau-ec-card__img-wrap::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(13,148,136,.12) 100%
    );
    opacity:    0;
    transition: opacity .35s ease;
}
.rau-ec-card:hover .rau-ec-card__img-wrap::after {
    opacity: 1;
}

/* ── Badge categoría — pill pastel dentro del body ── */
.rau-ec-card__cat {
    display:        inline-block;
    background:     #fce7f3;
    color:          #be185d;
    font-family:    var(--rau-ec-font-body);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .1px;
    padding:        4px 12px;
    border-radius:  100px;
    line-height:    1.4;
    pointer-events: none;
    align-self:     flex-start;
}

/* ── Cuerpo ── */
.rau-ec-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        22px 22px 18px;
    gap:            10px;
}

/* ── Título ── */
.rau-ec-card__title {
    font-family:    var(--rau-ec-font-display) !important;
    font-size:      17px !important;
    font-weight:    700 !important;
    line-height:    1.25 !important;
    color:          var(--rau-ec-text) !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    background:     none !important;
    letter-spacing: -.2px !important;
}
.rau-ec-card__title a {
    color:           inherit !important;
    text-decoration: none !important;
    transition:      color .18s ease !important;
}
.rau-ec-card__title a:hover {
    color: var(--rau-ec-accent) !important;
}

/* ── Descripción ── */
.rau-ec-card__desc {
    font-family:  var(--rau-ec-font-body) !important;
    font-size:    13.5px !important;
    line-height:  1.65 !important;
    color:        var(--rau-ec-muted) !important;
    margin:       0 !important;
    padding:      0 !important;
    flex:         1;
    /* Fallback clamp visual por si el PHP no trunca */
    display:      -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:     hidden;
}

/* ── Footer de card ── */
.rau-ec-card__footer {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    padding-top: 12px;
    border-top:  1px solid var(--rau-ec-border);
    margin-top:  auto;
}

/* ── Botón Ver empresa ── */
.rau-ec-card__btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             6px !important;
    font-family:     var(--rau-ec-font-display) !important;
    font-size:       12.5px !important;
    font-weight:     700 !important;
    letter-spacing:  .4px !important;
    text-transform:  uppercase !important;
    color:           var(--rau-ec-accent) !important;
    text-decoration: none !important;
    transition:      color .18s ease, gap .22s ease !important;
    white-space:     nowrap !important;
}
.rau-ec-card__btn:hover {
    color: var(--rau-ec-accent-dark) !important;
    gap:   10px !important;
}
.rau-ec-card__btn-arrow {
    flex-shrink: 0;
    transition:  transform .22s ease;
}
.rau-ec-card__btn:hover .rau-ec-card__btn-arrow {
    transform: translateX(3px);
}

/* ── Links rápidos (web / ig) ── */
.rau-ec-card__links {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}
.rau-ec-card__link {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           30px !important;
    height:          30px !important;
    border-radius:   8px !important;
    background:      var(--rau-ec-surface) !important;
    border:          1px solid var(--rau-ec-border) !important;
    color:           var(--rau-ec-muted) !important;
    text-decoration: none !important;
    transition:      background .18s ease, color .18s ease, border-color .18s ease !important;
}
.rau-ec-card__link:hover {
    background:   var(--rau-ec-accent) !important;
    border-color: var(--rau-ec-accent) !important;
    color:        #fff !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .rau-ec-grid--cols-4 { --rau-ec-cols: 3; }
}
@media (max-width: 820px) {
    .rau-ec-grid--cols-3,
    .rau-ec-grid--cols-4 { --rau-ec-cols: 2; }
}
@media (max-width: 560px) {
    .rau-ec-grid--cols-2,
    .rau-ec-grid--cols-3,
    .rau-ec-grid--cols-4 { --rau-ec-cols: 1; --rau-ec-img-ratio: 52%; }
    .rau-ec-card__body { padding: 18px 18px 14px; }
}
@media (max-width: 400px) {
    .rau-ec-grid--cols-1 { --rau-ec-img-ratio: 60%; }
}