/* ==========================================================================
   COMPONENTES DE CONTENIDO - Blog Grael
   Bloques que el editor puede insertar dentro de un artículo.
   Se cargan tanto en el blog público como en el editor del gestor, por eso
   usan px (el gestor no aplica el html{font-size:62.5%} del sitio).
   ========================================================================== */

/* --- Tarjetas con icono (horarios, datos de sede, etc.) --- */
.bloque-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.card-info {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 15px;
    box-shadow: 0 2px 14px rgba(6, 40, 70, .13);
    padding: 26px 22px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.card-info:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(6, 40, 70, .22);
}

.card-info__icono {
    width: 50px;
    height: 50px;
    color: #00609B;
    margin: 0 auto 14px;
    display: block;
}

.card-info__titulo {
    font-size: 24px;
    font-weight: 600;
    color: #00609B;
    margin: 0 0 10px;
    line-height: 1.25;
}

.card-info__texto {
    font-size: 16px;
    color: #333;
    margin: 0 0 20px;
}

a.card-info__boton {
    display: inline-block;
    background: #2B6AA8;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s;
}

a.card-info__boton:hover {
    background: #45A6D1;
    color: #fff;
}

/* --- Bloque destacado (barra azul arriba) --- */
.bloque-destacado {
    background: #fff;
    border-top: 4px solid #0056b3;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(6, 40, 70, .18);
    padding: 30px 32px;
    margin: 36px 0;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bloque-destacado:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(6, 40, 70, .26);
}

.bloque-destacado h3,
.bloque-destacado h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin: 0 0 20px;
}

.bloque-destacado p {
    text-align: justify;
    font-size: 16px;
    color: #515151;
    line-height: 1.6;
    margin: 0 0 16px;
}

.bloque-destacado ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.bloque-destacado li {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 12px;
    text-align: justify;
}

.bloque-destacado li p {
    margin: 0;
    text-align: justify;
}

/* --- Barra con botón centrado --- */
.barra-cta {
    background: #00609B;
    border-radius: 50px;
    padding: 10px;
    display: flex;
    justify-content: center;
    margin: 32px 0;
}

.barra-cta a {
    background: #4BA8D6;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 13px 30px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: background .2s;
}

.barra-cta a:hover {
    background: #3895C2;
    color: #fff;
}

/* --- Banner degradado con botón --- */
.banner-cta {
    background: linear-gradient(90deg, #045a8d 0%, #1674a9 100%);
    border-radius: 24px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 36px 0;
    box-shadow: 0 6px 20px rgba(4, 90, 141, .2);
}

.banner-cta__titulo {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

a.banner-cta__boton {
    background: #4BA8D6;
    color: #fff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s, transform .2s;
}

a.banner-cta__boton:hover {
    background: #3895C2;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Preguntas frecuentes (acordeón nativo) --- */
.faq {
    margin: 24px 0 32px;
}

.faq__item {
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq__item summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #1f2124;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::before {
    content: "+";
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #2B6AA8;
    width: 16px;
    flex-shrink: 0;
}

.faq__item[open] summary::before {
    content: "–";
}

.faq__item[open] summary {
    color: #00609B;
}

.faq__cuerpo {
    padding: 0 18px 18px 46px;
    font-size: 15px;
    color: #515151;
    line-height: 1.7;
}

.faq__cuerpo p {
    margin: 0 0 12px;
}

.faq__cuerpo p:last-child {
    margin-bottom: 0;
}

/* Respeta a quien pide menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
    .card-info,
    .bloque-destacado {
        transition: none;
    }

    .card-info:hover,
    .bloque-destacado:hover {
        transform: none;
    }
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .bloque-destacado {
        padding: 24px 18px;
    }

    .bloque-destacado p,
    .bloque-destacado li {
        text-align: left;
    }

    .banner-cta {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }

    .banner-cta__boton {
        width: 100%;
        text-align: center;
    }

    .barra-cta a {
        width: 100%;
    }

    .faq__cuerpo {
        padding-left: 18px;
    }
}