/* ==========================================================================
   UNIDAD DE ESTUDIOS — Tarjetas de equipo estáticas
   --------------------------------------------------------------------------
   IMPORTANTE: el tema Nivel3Elementor tiene reglas globales que pisan estas
   tarjetas por especificidad (los elementos viven dentro de
   .main-default .entry-content). Por eso varias propiedades llevan !important
   para GANARLE al tema. Reglas del tema neutralizadas aquí:
     - .main-default .entry-content img  → height:auto + margin:24px 0  (rompía la foto)
     - .main-default .entry-content p    → text-align:justify           (descuadraba el cargo)
     - .main-default .entry-content a... → overflow-wrap:anywhere + word-break:break-word (partía el correo)

   Layout: card = foto + info; info = grid [nombre / cargo flexible / correo]
   → el correo queda anclado abajo y alineado entre cards sin importar el cargo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Grid de tarjetas — alturas uniformes por fila
   -------------------------------------------------------------------------- */

.equipo-unidad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));  /* cards más anchas → correo legible en 1 línea */
    align-items: stretch;
    gap: 28px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.equipo-unidad-grid li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* Neutraliza el bullet diamante naranja del tema (ul li::before) */
.equipo-unidad-grid li::before {
    content: none !important;
    display: none !important;
}


/* --------------------------------------------------------------------------
   Card individual = foto + info
   -------------------------------------------------------------------------- */

.equipo-card {
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e8ebec;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(48, 79, 85, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .equipo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(48, 79, 85, 0.12);
        border-color: var(--main-light-green-color, #49beb6);
    }
}


/* --------------------------------------------------------------------------
   Foto circular — !important para ganarle a .main-default .entry-content img
   (que mete height:auto + margin:24px 0 + border-radius:12px y la descuadra)
   -------------------------------------------------------------------------- */

.equipo-card__foto {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    margin: 28px auto 16px;
    border: 3px solid var(--main-green-color, #01a499);
    flex-shrink: 0;
}

.equipo-card__foto img {
    width: 100% !important;
    height: 100% !important;            /* el tema forzaba height:auto → la foto no llenaba el círculo */
    max-width: none !important;
    margin: 0 !important;               /* el tema forzaba margin:24px 0 → la "bajaba" */
    border-radius: 0 !important;        /* el redondeo lo da el contenedor .foto */
    object-fit: cover !important;
    object-position: center top !important;  /* rostro arriba, encuadre correcto */
    display: block !important;
    transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .equipo-card:hover .equipo-card__foto img {
        transform: scale(1.06);
    }
}


/* --------------------------------------------------------------------------
   Info — grid de 3 filas: nombre / cargo flexible / correo (anclado abajo)
   -------------------------------------------------------------------------- */

.equipo-card__info {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;        /* agrupa y centra el bloque → cards parejas, sin hueco desigual */
    gap: 12px;
    padding: 12px 20px 24px;
    text-align: center;
    min-width: 0;                   /* permite que el contenido se ajuste al ancho (anti-overflow) */
    box-sizing: border-box;
}

/* Permite que los items del grid se encojan (anula el min-width:auto por defecto
   de los grid items, que también contribuía al desbordamiento). */
.equipo-card__nombre,
.equipo-card__cargo,
.equipo-card__correo {
    min-width: 0;
    max-width: 100%;
}

/* Nombre — fila 1, altura uniforme, centrado */
.equipo-card__nombre {
    margin: 0;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    font-weight: 700;
    color: var(--main-darker-green-color, #304f55);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* Cargo — fila 2 (1fr): centrado vertical + horizontal.
   text-align:center !important vence a .main-default .entry-content p {justify}. */
.equipo-card__cargo {
    margin: 0;
    align-self: center;
    text-align: center !important;
    font-size: clamp(0.72rem, 1.7vw, 0.8rem);
    font-weight: 700;
    color: var(--main-orange-color, #e37604);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* Correo — fila 3, anclado abajo, centrado, ícono a la altura del texto.
   word-break:normal + overflow-wrap:break-word (!important) vencen al
   "anywhere" del tema que lo partía en cualquier carácter. Font algo menor
   para que entre en 1 línea en columnas angostas. */
.equipo-card__correo {
    display: inline-flex;
    align-items: center;            /* ícono ✉ a la altura del texto */
    gap: 6px;
    color: var(--main-green-color, #01a499);
    font-size: clamp(0.8rem, 1.4vw, 0.88rem);  /* legible; entra en 1 línea gracias a la card más ancha */
    line-height: 1.35;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    min-height: 44px;                   /* target táctil a11y */
    transition: background 0.2s ease, color 0.2s ease;
    white-space: normal !important;
    word-break: normal !important;      /* el tema forzaba break-word */
    overflow-wrap: break-word !important;  /* el tema forzaba "anywhere" (partía .cl) */
}

.equipo-card__correo:hover,
.equipo-card__correo:focus-visible {
    background: var(--main-lighter-green-color, #f2fbfa);
    color: var(--main-darker-green-color, #304f55);
    text-decoration: underline;
}

.equipo-card__correo:focus-visible {
    outline: 2px solid var(--main-orange-color, #e37604);
    outline-offset: 2px;
}

.equipo-card__correo svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Cargo pendiente — placeholder visible */
.equipo-card__cargo--pendiente {
    color: var(--main-grey-color, #5e6269);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .equipo-unidad-grid { gap: 22px; }
}

@media (max-width: 600px) {
    .equipo-unidad-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .equipo-card__foto {
        width: 120px;
        height: 120px;
        margin: 22px auto 14px;
    }
    .equipo-card__info { padding: 8px 18px 22px; }
    .equipo-card__nombre { min-height: auto; }
    .equipo-card__correo { font-size: 0.8rem; }  /* en 1 columna hay ancho de sobra */
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .equipo-card,
    .equipo-card__foto img {
        transition: none !important;
    }
    .equipo-card:hover { transform: none; }
    .equipo-card:hover .equipo-card__foto img { transform: none; }
}