/* =========================================================
   Cards - Capacitacion Digital Online
   Degradado #049dbf -> #023f4c, sombra en hover,
   descripcion desplegable (details, sin JS) y boton de inscripcion fijo.
   ========================================================= */

.cajacontenedora {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start; /* al abrir una card, las vecinas no se estiran */
}

.cajacontenedora .box {
    width: 23%;
    margin: 1%;
    padding: 20px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    float: none;
    text-align: center;
    color: #fff;
    background: #049dbf;
    background: linear-gradient(180deg, #049dbf 0%, #023f4c 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 rgba(2, 63, 76, 0);
    transition: box-shadow .3s ease;
}

.cajacontenedora .box:hover {
    box-shadow: 0 14px 30px rgba(2, 63, 76, .45);
}

.cajacontenedora .box img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
}

.cajacontenedora .box h4 {
    color: #fff;
    margin: 10px 0 12px;
    letter-spacing: .5px;
}

/* ---------- Boton "Leer descripcion" (summary de <details>, sin JS) ---------- */
.cajacontenedora .box-toggle {
    display: inline-block;
    margin: 0 auto 12px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 60px;
    cursor: pointer;
    list-style: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.cajacontenedora .box-toggle::-webkit-details-marker { display: none; }
.cajacontenedora .box-toggle::marker { content: ""; }

.cajacontenedora .box-toggle:hover {
    background-color: rgba(255, 255, 255, .15);
    border-color: #fff;
}

.cajacontenedora .box-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Cambia el texto del boton segun este abierto o cerrado */
.cajacontenedora .box-toggle .t-cerrar { display: none; }
.cajacontenedora .box-desc[open] .box-toggle .t-abrir { display: none; }
.cajacontenedora .box-desc[open] .box-toggle .t-cerrar { display: inline; }

/* ---------- Descripcion desplegable ----------
   Usa <details>: funciona nativo, sin JavaScript.
   La animacion es una mejora progresiva (navegadores recientes);
   en los demas se abre/cierra al instante. */
.cajacontenedora .box-desc {
    overflow: hidden;
}

@supports (interpolate-size: allow-keywords) {
    .cajacontenedora .box-desc {
        interpolate-size: allow-keywords;
    }
    .cajacontenedora .box-desc::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .35s ease, content-visibility .35s ease allow-discrete;
    }
    .cajacontenedora .box-desc[open]::details-content {
        block-size: auto;
    }
}

.cajacontenedora .box p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 12px;
}

/* ---------- Pie de la card (siempre visible) ---------- */
.cajacontenedora .box hr {
    width: 100%;
    margin: auto 0 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.cajacontenedora .box .register {
    display: block;
    float: none;
    width: 120px;
    margin: 0 auto;
    padding: 10px 8px 8px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 600;
    color: #023f4c;
    background-color: #fff;
    border-radius: 60px;
    transition: background-color .2s ease, color .2s ease;
}

.cajacontenedora .box .register:hover,
.cajacontenedora .box .register:focus {
    color: #fff;
    background-color: #023f4c;
    text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .cajacontenedora .box { width: 48%; }
}

@media (max-width: 480px) {
    .cajacontenedora .box { width: 98%; }
}