/* ================================
   Estilos base para bloques Gutenberg
   ================================ */

/* Bloques de columnas */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* espacio entre columnas */
    align-items: center; /* 👈 centra verticalmente el contenido */
    margin: 2rem 0;
}

.wp-block-column {
    flex: 1;
    min-width: 0;
}

/* Responsivo: columnas apiladas en móvil */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}

/* Bloques de imagen */
.wp-block-image img {
    width: 100%;
    height: auto;
    max-width: 500px; /* 👈 ajusta el valor a tu gusto */
    margin: 0 auto; /* 👈 centra la imagen */
    border-radius: 0.5rem;
}

/* ================================
   Subtítulos personalizados + colores
   ================================ */
.is-style-text-subtitle {
    font-family: "Nexa", sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-align: center; /* mantiene el alineado según WP */
    color: #5f4191; /* color por defecto */
    position: relative;
    display: inline-block; /* para que el ::before se posicione relativo al texto */
}

.is-style-text-subtitle::before {
    content: none !important;
}

/* Subtítulo con colores de Gutenberg */
.is-style-text-subtitle.has-accent-1-color {
    color: #00a657 !important; /* verde */
}
.is-style-text-subtitle.has-accent-2-color {
    color: #f57e25 !important; /* naranja */
}
.is-style-text-subtitle.has-accent-3-color {
    color: #5f4191 !important; /* morado */
}
.is-style-text-subtitle.has-accent-4-color {
    color: #0bb89b !important; /* turquesa */
}
.is-style-text-subtitle.has-accent-5-color {
    color: #5263a4 !important; /* azul */
}

/* ================================
     Botones
     ================================ */
.wp-block-button .wp-block-button__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #fff;
    border-radius: 9999px; /* 👈 súper redondeado */
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer; /* 👈 cursor de mano */
}

/* Centrar todos los botones dentro de contenedores WP */
.wp-block-buttons {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 1.5rem;
}

/* accent-1 (verde #00A657) */
.has-accent-1-background-color {
    background-color: #00a657 !important;
}
.has-accent-1-background-color:hover {
    background-color: #5f4191 !important; /* hover → morado */
}

/* accent-2 (naranja #F57E25) */
.has-accent-2-background-color {
    background-color: #f57e25 !important;
}
.has-accent-2-background-color:hover {
    filter: brightness(90%);
}

/* accent-3 (morado #5F4191) */
.has-accent-3-background-color {
    background-color: #5f4191 !important;
}
.has-accent-3-background-color:hover {
    background-color: #00a657 !important; /* hover → verde */
}

/* ================================
     Textos por color
     ================================ */
.has-base-color {
    color: #ffffff !important;
}
.has-base-background-color {
    background-color: #ffffff !important;
}

.has-contrast-color {
    color: #000000 !important;
}
.has-contrast-background-color {
    background-color: #000000 !important;
}

.has-accent-1-color {
    color: #00a657 !important;
}
.has-accent-2-color {
    color: #f57e25 !important;
}
.has-accent-3-color {
    color: #5f4191 !important;
}
.has-accent-4-color {
    color: #0bb89b !important;
}
.has-accent-5-color {
    color: #5263a4 !important;
}

.has-accent-4-background-color {
    background-color: #0bb89b !important;
}
.has-accent-5-background-color {
    background-color: #5263a4 !important;
}

/* ================================
     Listas y citas
     ================================ */
.wp-block-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.wp-block-quote {
    border-left: 4px solid #5f4191;
    padding-left: 1rem;
    font-style: italic;
    color: #555;
    margin: 1.5rem 0;
}

/* ================================
     Encabezados y párrafos
     ================================ */
.wp-block-heading {
    font-weight: 700;
    font-size: 2rem;
    margin: 1.5rem 0 1rem;
}

.wp-block-paragraph {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1rem;
}

/* ================================
   Tamaños de fuente de Gutenberg
   ================================ */
.has-small-font-size {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.4;
}

.has-medium-font-size {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5;
}

.has-large-font-size {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.6;
}

.has-x-large-font-size {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.6;
}

.has-xx-large-font-size {
    font-size: 2rem !important; /* 32px */
    line-height: 1.2;
}

/* Extra opcional: si usas títulos gigantes */
.has-huge-font-size {
    font-size: 3rem !important; /* 48px */
    line-height: 1.1;
}

/* ================================
   Animación global de botones WP
   ================================ */
.wp-block-button .wp-block-button__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #fff;
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease,
        transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover → efecto de escala + sombra */
.wp-block-button .wp-block-button__link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Activo (cuando se clickea) → efecto de "click" */
.wp-block-button .wp-block-button__link:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ================================
   Videos y Embeds (Gutenberg)
   ================================ */

/* Contenedores base de video/embeds */
.wp-block-video,
.wp-block-embed {
    margin: 1.5rem auto;
    max-width: 800px; /* ⬅️ limita el ancho como con imágenes */
}

/* Video nativo (subido a WP) */
.wp-block-video video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Iframes (YouTube/Vimeo/etc.) 100% ancho + relación 16:9 por defecto */
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Fallback clásico para mantener 16:9 incluso sin aspect-ratio */
    padding-bottom: 56.25%; /* 16/9 = 56.25% */
    height: 0;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.5rem;
}

/* Navegadores modernos: usa aspect-ratio si está disponible */
@supports (aspect-ratio: 16 / 9) {
    .wp-block-embed__wrapper {
        padding-bottom: 0; /* ignoramos el fallback */
        height: auto;
    }
    .wp-block-embed__wrapper iframe,
    .wp-block-embed__wrapper embed,
    .wp-block-embed__wrapper object {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* default */
    }
}

/* Variantes típicas de Gutenberg:
   - Cuando el usuario elige "ancho amplio" o "ancho completo", deja que crezcan */
.alignwide .wp-block-embed,
.alignfull .wp-block-embed {
    max-width: none;
}

/* Media & Text (cuando el video va en wp-block-media-text) */
.wp-block-media-text__media video,
.wp-block-media-text__media img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Caption (leyenda) centrada y discreta como con imágenes */
.wp-element-caption {
    text-align: center;
    color: #6b7280; /* gray-500 */
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* ================================
   Tipografía fluida + reducción en móviles
   (añadir al FINAL del archivo)
   ================================ */

/* Contenedor WP (ajústalo si usas otro) */
.wp-content-render {
    /* escala general para móviles */
    --wp-mobile-scale: 0.9; /* 90% en móviles */
    --wp-mobile-scale-lg: 0.85; /* para tamaños muy grandes */
}

/* Encabezados fluidos usando clamp (respetan tamaños en desktop) */
.wp-content-render h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    line-height: 1.15;
}
.wp-content-render h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
}
.wp-content-render h3 {
    font-size: clamp(1.25rem, 3.2vw, 1.75rem);
    line-height: 1.3;
}
.wp-content-render h4 {
    font-size: clamp(1.125rem, 2.8vw, 1.5rem);
    line-height: 1.35;
}
.wp-content-render h5 {
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1.4;
}
.wp-content-render h6 {
    font-size: clamp(0.95rem, 2.2vw, 1.125rem);
    line-height: 1.45;
}

/* Párrafos y listas fluidos */
.wp-content-render p,
.wp-content-render li,
.wp-content-render .wp-block-paragraph {
    font-size: clamp(0.95rem, 2.4vw, 1.125rem);
    line-height: 1.7;
}

/* Subtítulo personalizado: baja suave en móviles */
.wp-content-render .is-style-text-subtitle {
    font-size: clamp(1.125rem, 3.2vw, 1.5rem);
}

/* Gutenberg font-size classes (versiones fluidas)
   — así respetas lo que eligió WP pero con reducción en pantallas pequeñas */
.wp-content-render .has-small-font-size {
    font-size: clamp(0.8rem, 2.4vw, 0.875rem) !important;
    line-height: 1.45;
}
.wp-content-render .has-medium-font-size {
    font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
    line-height: 1.5;
}
.wp-content-render .has-large-font-size {
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
    line-height: 1.6;
}
.wp-content-render .has-x-large-font-size {
    font-size: clamp(1.125rem, 3.6vw, 1.5rem) !important;
    line-height: 1.6;
}
.wp-content-render .has-xx-large-font-size {
    font-size: clamp(1.25rem, 4.8vw, 2rem) !important;
    line-height: 1.25;
}
.wp-content-render .has-huge-font-size {
    font-size: clamp(1.75rem, 7vw, 3rem) !important;
    line-height: 1.1;
}

/* Ajustes extra para móviles (<= 640px) para “apretar” un poco más) */
@media (max-width: 640px) {
    .wp-content-render p,
    .wp-content-render li,
    .wp-content-render .wp-block-paragraph {
        font-size: calc(1em * var(--wp-mobile-scale));
    }

    /* Subtítulo personalizado aún más compacto */
    .wp-content-render .is-style-text-subtitle {
        font-size: calc(1em * var(--wp-mobile-scale));
    }
}

/* ======= PLATAFORMAS: color de card por estilo de WP ======= */
/*======== reconoce los colores de estilo de fondo de columnas y filas ========= */

/* Prioriza las clases que llegan desde WordPress */
.wp-block-columns.is-style-section-1,
.wp-block-columns.has-accent-5-background-color {
    /* por si usan palette */
    background-color: #5263a4; /* estilo 1 */
    color: #ffffff;
}

.wp-block-columns.is-style-section-2,
.wp-block-columns.has-accent-2-background-color {
    background-color: #f57e25; /* estilo 2 */
    color: #ffffff;
}

.wp-block-columns.is-style-section-3,
.wp-block-columns.has-accent-1-background-color {
    background-color: #00a657; /* estilo 3 */
    color: #ffffff;
}

.wp-block-columns.is-style-section-4,
.wp-block-columns.has-accent-3-background-color {
    background-color: #5f4191; /* estilo 4 */
    color: #ffffff;
}

.wp-block-columns.is-style-section-5,
.wp-block-columns.has-contrast-background-color {
    background-color: #000000; /* estilo 5 */
    color: #ffffff;
}

/* Asegurar legibilidad dentro del card pintado */
.wp-block-columns.is-style-section-1 a,
.wp-block-columns.is-style-section-2 a,
.wp-block-columns.is-style-section-3 a,
.wp-block-columns.is-style-section-4 a,
.wp-block-columns.is-style-section-5 a {
    color: #ffffff; /* enlaces claros sobre fondo oscuro */
}

/* Botones: tu hoja ya los estiliza; aquí garantizamos contraste cuando el card es oscuro */
.wp-block-columns.is-style-section-1 .wp-block-button__link,
.wp-block-columns.is-style-section-2 .wp-block-button__link,
.wp-block-columns.is-style-section-3 .wp-block-button__link,
.wp-block-columns.is-style-section-4 .wp-block-button__link,
.wp-block-columns.is-style-section-5 .wp-block-button__link {
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Si WP trae un background inline (style="background-color:…"), no lo pisamos.
   Estas reglas ganan solo cuando se usen las clases anteriores. */

/* justificacion de todo el texto normal sin modificar lo demas*/

/* === FIX: también colorear CADA COLUMNA según su estilo === */
.wp-block-column.is-style-section-1,
.wp-block-column.has-accent-5-background-color {
    background-color: #5263a4 !important;
    color: #ffffff !important;
}

.wp-block-column.is-style-section-2,
.wp-block-column.has-accent-2-background-color {
    background-color: #f57e25 !important;
    color: #ffffff !important;
}

.wp-block-column.is-style-section-3,
.wp-block-column.has-accent-1-background-color {
    background-color: #00a657 !important;
    color: #ffffff !important;
}

.wp-block-column.is-style-section-4,
.wp-block-column.has-accent-3-background-color {
    background-color: #5f4191 !important;
    color: #ffffff !important;
}

.wp-block-column.is-style-section-5,
.wp-block-column.has-contrast-background-color {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Enlaces dentro de columnas oscuras */
.wp-block-column.is-style-section-1 a,
.wp-block-column.is-style-section-2 a,
.wp-block-column.is-style-section-3 a,
.wp-block-column.is-style-section-4 a,
.wp-block-column.is-style-section-5 a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Botones dentro de columnas oscuras */
.wp-block-column.is-style-section-1 .wp-block-button__link,
.wp-block-column.is-style-section-2 .wp-block-button__link,
.wp-block-column.is-style-section-3 .wp-block-button__link,
.wp-block-column.is-style-section-4 .wp-block-button__link,
.wp-block-column.is-style-section-5 .wp-block-button__link {
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ================================
   TABLAS GUTENBERG (wp-block-table)
   ================================ */

/* Contenedor de la tabla (figure) */
.wp-block-table {
    width: 100%;
    margin: 2rem auto;
    overflow-x: auto; /* responsive horizontal */
    -webkit-overflow-scrolling: touch;
}

/* Tabla base */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px; /* evita que se rompa en móvil */
    background: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* Celdas */
.wp-block-table th,
.wp-block-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: middle;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e7eb; /* gris suave */
}

/* Header */
.wp-block-table thead th,
.wp-block-table tbody tr:first-child td strong {
    background-color: #5f4191;
    color: #ffffff;
    font-weight: 700;
}

/* Fila header alternativa (cuando WP no usa <thead>) */
.wp-block-table tbody tr:first-child td {
    background-color: #5f4191;
    color: #ffffff;
    font-weight: 700;
}

/* Filas alternadas */
.wp-block-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* Hover fila */
.wp-block-table tbody tr:hover {
    background-color: #f3f4f6;
}

/* Links dentro de tabla */
.wp-block-table a {
    color: #00a657;
    font-weight: 700;
    text-decoration: none;
}

/* Link DESCARGAR como botón */
.wp-block-table a[href$=".pdf"],
.wp-block-table a[href*="uploads"] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: #00a657;
    color: #ffffff !important;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Hover botón */
.wp-block-table a[href$=".pdf"]:hover,
.wp-block-table a[href*="uploads"]:hover {
    background: #5f4191;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Quitar bordes vacíos extra (filas vacías WP) */
.wp-block-table td:empty {
    display: none;
}
.wp-block-table tr:has(td:empty) {
    display: none;
}

/* ================================
   RESPONSIVE MOBILE
   ================================ */
@media (max-width: 640px) {
    .wp-block-table table {
        min-width: 520px; /* scroll horizontal controlado */
    }

    .wp-block-table th,
    .wp-block-table td {
        padding: 0.65rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Botón descargar más compacto */
    .wp-block-table a[href$=".pdf"],
    .wp-block-table a[href*="uploads"] {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }
}


/* =========================================================
   FIX: Párrafo plano de WordPress a 16px (sin romper estilos)
   Poner AL FINAL del CSS que se carga último
   ========================================================= */

/* 1) Base: todos los <p> dentro del render, excepto subtítulos */
.wp-content-render p:not(.is-style-text-subtitle) {
    font-size: 18px !important;
    line-height: 1.7;
}

/* 2) Si WordPress trae clases de tamaño, se respeta lo que ya definiste */
.wp-content-render p.has-small-font-size,
.wp-content-render p.has-medium-font-size,
.wp-content-render p.has-large-font-size,
.wp-content-render p.has-x-large-font-size,
.wp-content-render p.has-xx-large-font-size,
.wp-content-render p.has-huge-font-size {
    /* No hace falta poner nada aquí.
       Tus reglas existentes con !important ya ganan. */
}

/* Párrafos “planos” (sin class) a 16px SIEMPRE */
.wp-content-render p:not([class]),
.wp-content-render p[class=""] {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* En móvil tu CSS actual los baja con calc(...), así que lo anulamos */
@media (max-width: 640px) {
  .wp-content-render p:not([class]),
  .wp-content-render p[class=""] {
    font-size: 18px !important;
  }
}