/* ==========================================================================
   1. HOMEPAGE SLIDER (Mobile-First Base)
   ========================================================================== */

  #contslider { 
    position: relative; 
    overflow: hidden; 
    /* Ya no fuerza el alto acá: #contslider ahora solo envuelve
       (position:relative para posicionar flechas encima) y se ajusta
       al contenido — que es .featured-slides en flujo normal, que a
       su vez se ajusta al único .mySlides visible (el JS del slider
       pone display:none al resto). El alto real se fija más abajo,
       directo en .mySlides — ver esa regla. */
}

.featured-slides {
    background: #202120;
    /* Antes era position:absolute con left/right pero SIN top/bottom,
       así que nunca tenía un alto real propio (quedaba "auto"), y
       .mySlides (su hijo, con height:100%) tampoco lo tenía — por
       eso el recorte nunca se veía, sin importar cuánto forzáramos
       las reglas de abajo. Con position:relative (flujo normal),
       .featured-slides simplemente toma el alto de su contenido: el
       único .mySlides visible en cada momento (los demás están en
       display:none por JS), que es donde ahora se define el alto
       fijo real. */
    position: relative;
    z-index: 1;
}

.mySlides { 
    overflow: hidden; 
    position: relative; 
    display: flex;
    flex-direction: column; /* Apila contenido e imagen en móvil */
    width: 100%;
    /* Alto FIJO en px = alto real de la imagen original del primer
       slide (--slider-height, definida por PHP en el style de
       #contslider; las variables CSS heredan a los descendientes sin
       importar el position de los elementos intermedios). Es el
       MISMO en TODAS las pantallas por defecto: el ancho se ajusta
       solo y la imagen se recorta a los costados (ver .mySlides img
       más abajo). --slider-ratio es el respaldo si no se pudo
       calcular el alto de la imagen. */
    height: var(--slider-height, auto);
    aspect-ratio: var(--slider-ratio, 21 / 9);
    max-height: 720px;
}

/* Si se subió una imagen manual para ≤1024px o ≤450px en el primer
   slide, esa pantalla deja de usar el alto fijo y en cambio usa la
   proporción de ESA imagen tal cual (se ve completa, sin recortar).
   --slider-height-1024/450 llega como "auto" solo cuando hay imagen
   manual (ver SliderWidget::add_manual_breakpoint_override()), lo que
   habilita que --slider-ratio-1024/450 tome el control del alto. */
@media screen and (max-width: 1024px) {
    .mySlides {
        height: var(--slider-height-1024, var(--slider-height, auto));
        aspect-ratio: var(--slider-ratio-1024, var(--slider-ratio, 21 / 9));
    }
}

@media screen and (max-width: 450px) {
    .mySlides {
        height: var(--slider-height-450, var(--slider-height-1024, var(--slider-height, auto)));
        aspect-ratio: var(--slider-ratio-450, var(--slider-ratio-1024, var(--slider-ratio, 21 / 9)));
    }
}

.mySlides picture {
    display: block;
    width: 100%;
    /* .mySlides ahora tiene un alto REAL y directo (no heredado por
       cadena), así que este height:100% sí tiene contra qué calcularse. */
    height: 100%;
}
 
.mySlides img { 
    margin: 0 auto; 
    display: block; 
    width: 100%;
    /* height:auto haría que la imagen siguiera SU PROPIA proporción
       (ignorando el alto fijo de .mySlides). Con height:100% llena
       ese alto fijo y object-fit:cover recorta los costados. */
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.featured-image-class img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
 
.featured-slides picture {
    animation: slide-in 0.8s ease-in-out;
    overflow: hidden;
	
}
 
/* Enlaces envolventes */
.mySlides a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
 
/* Botones de navegación */
.bottonessliders {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 4;
}
 
.previous_btn {
    left: 1%;
    border-radius: 3px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 18px solid var(--primary);
}
 
.next_btn {
    right: 1%;
    border-radius: 3px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 18px solid var(--primary);
}
 
.previous_btn:hover, 
.next_btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}
 
.featuredpost article { overflow: hidden; }
.featuredpost a img { transition: 0.75s ease; margin: 0 auto; display: block; }
.featuredpost a:hover img {
    opacity: 1;
    animation: flash 1s;
    transform: scale(1.1);
}
 
/* --------------------------------------------------------------------------
   ESTILOS Y POSICIONES BASE (MÓVIL)
   -------------------------------------------------------------------------- */
.slide-content-wrapper {
    position: relative;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 2;
    background: #1a1a1a;
    color: #ffffff;
}
 
.slide-content-inner {
    width: 100%;
    text-align: center;
}
 
.slide-title {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-h1, var(--font-headings, sans-serif));
    font-weight: var(--weight-h1, bold);
    color: #ffffff;
    line-height: 1.2;
    font-size: 2.1rem;
}
 
.slide-text {
    font-family: var(--font-text-primary, sans-serif);
    font-weight: var(--weight-text-primary, normal);
    font-size: 1.25rem;
    line-height: 1.4;
}
 
.slide-text p:last-child {
    margin-bottom: 0;
}
 
/* --- Posicionamiento en Móvil --- */
.pos-mobile-top {
    order: -1; /* Texto Arriba de la imagen */
}
 
.pos-mobile-bottom,
.pos-mobile-same {
    order: 2; /* Texto Debajo de la imagen */
}
 
.pos-mobile-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
 
 



/* --------------------------------------------------------------------------
   AJUSTES PARA ESCRITORIO (>= 896px)
   -------------------------------------------------------------------------- */

.featured-image-class img{width:auto}




/* --------------------------------------------------------------------------
   AJUSTES PARA ESCRITORIO (>= 896px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 896px) {
    /* El alto ya lo maneja la regla base de .mySlides (var(--slider-height,
       ...)): en escritorio (>1024px) usa siempre --slider-height, así el
       alto es igual que en las demás pantallas salvo que haya una imagen
       manual. */
 
    .mySlides,
    .mySlides a {
        display: block;
    }
 
    .previous_btn {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 25px solid var(--primary);
    }
    
    .next_btn {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 25px solid var(--primary);
    }
 
    /* En escritorio el texto siempre flota sobre la imagen */
    .slide-content-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        padding: 2.5rem;
        background: transparent;
        pointer-events: none;
        order: 0 !important;
    }
 
    .slide-content-inner {
        pointer-events: auto;
        padding: 1.25rem 1.75rem;
        border-radius: 6px;
        max-width: 550px;
        width: auto;
    }
 
    .slide-title {
        font-size: 1.5rem;
    }
 
    .slide-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }
 
    /* 9 Posiciones de Escritorio */
    .pos-desktop-top-left     { align-items: flex-start; justify-content: flex-start; text-align: left; }
    .pos-desktop-top-center   { align-items: flex-start; justify-content: center; text-align: center; }
    .pos-desktop-top-right    { align-items: flex-start; justify-content: flex-end; text-align: right; }
 
    .pos-desktop-middle-left   { align-items: center; justify-content: flex-start; text-align: left; }
    .pos-desktop-middle-center { align-items: center; justify-content: center; text-align: center; }
    .pos-desktop-middle-right  { align-items: center; justify-content: flex-end; text-align: right; }
 
    .pos-desktop-bottom-left   { align-items: flex-end; justify-content: flex-start; text-align: left; }
    .pos-desktop-bottom-center { align-items: flex-end; justify-content: center; text-align: center; }
    .pos-desktop-bottom-right  { align-items: flex-end; justify-content: flex-end; text-align: right; }
}
 
 


/* ==========================================================================
   WIDGET 2 COLUMNAS FLEXBOX (Mobile-First)
   ========================================================================== */
.sg-two-cols-wrapper {
    display: flex;
    flex-direction: column; /* Móvil: Apilado vertical por defecto */
    gap: 1.5rem;
    width: 100%;
	align-items: center;
}

.sg-col {
    width: 100%;
    box-sizing: border-box;
}

.sg-col-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

.sg-col-body {
    font-family: var(--font-text-primary, sans-serif);
    color: var(--text, #283040);
}

/* Orden Móvil Invertido */
.sg-two-cols-wrapper.stack-reverse {
    flex-direction: column-reverse;
}

/* --------------------------------------------------------------------------
   ESCRITORIO (>= 896px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 896px) {
    .sg-two-cols-wrapper {
        flex-direction: row; /* Pasa a 2 columnas horizontales */
        gap: 2.5rem;
    }

    /* Alineación Vertical */
    .sg-two-cols-wrapper.align-center     { align-items: center; }
    .sg-two-cols-wrapper.align-flex-start { align-items: flex-start; }
    .sg-two-cols-wrapper.align-flex-end   { align-items: flex-end; }
    .sg-two-cols-wrapper.align-stretch    { align-items: stretch; }

    /* Proporciones de Ancho (Flex Basis) */
    .sg-two-cols-wrapper.ratio-50-50 .sg-col-1 { flex: 0 0 calc(50% - 1.25rem); }
    .sg-two-cols-wrapper.ratio-50-50 .sg-col-2 { flex: 0 0 calc(50% - 1.25rem); }

    .sg-two-cols-wrapper.ratio-60-40 .sg-col-1 { flex: 0 0 calc(60% - 1.25rem); }
    .sg-two-cols-wrapper.ratio-60-40 .sg-col-2 { flex: 0 0 calc(40% - 1.25rem); }

    .sg-two-cols-wrapper.ratio-40-60 .sg-col-1 { flex: 0 0 calc(40% - 1.25rem); }
    .sg-two-cols-wrapper.ratio-40-60 .sg-col-2 { flex: 0 0 calc(60% - 1.25rem); }

    .sg-two-cols-wrapper.ratio-70-30 .sg-col-1 { flex: 0 0 calc(70% - 1.25rem); }
    .sg-two-cols-wrapper.ratio-70-30 .sg-col-2 { flex: 0 0 calc(30% - 1.25rem); }

    .sg-two-cols-wrapper.ratio-30-70 .sg-col-1 { flex: 0 0 calc(30% - 1.25rem); }
    .sg-two-cols-wrapper.ratio-30-70 .sg-col-2 { flex: 0 0 calc(70% - 1.25rem); }
}










/* ==========================================================================
   2. PROGRESO RADIAL
   ========================================================================== */
.radial-progress {
    float: left;
    margin: 25px;
    width: 120px;
    height: 120px;
    position: absolute;
    background-color: #d7d7d7;
    border-radius: 50%;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 50%;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill {
    backface-visibility: hidden;
    transition: transform 1s;
}

.radial-progress .circle .mask.reanimate,
.radial-progress .circle .fill.reanimate { transition: transform 0s; }
.radial-progress .circle .mask.reset,
.radial-progress .circle .fill.reset { transform: rotate(0deg) !important; }

.radial-progress .circle .mask { clip: rect(0, 120px, 120px, 60px); }
.radial-progress .circle .mask .fill {
    clip: rect(0, 60px, 120px, 0);
    background-color: var(--accent);
}

.radial-progress .inset {
    width: 100px !important;
    height: 100px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px !important;
    background-color: #fbfbfb;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radial-progress .little { font-size: 22px; color: #d7d7d7; }
.radial-progress .big { font-size: 37px; }

@media (max-width: 480px) {
    .radial-progress { width: 85px; height: 85px; }
    .radial-progress .circle .mask,
    .radial-progress .circle .fill,
    .radial-progress .circle .shadow { width: 85px; height: 85px; }
    .radial-progress .circle .mask { clip: rect(0, 85px, 85px, 42.5px); }
    .radial-progress .circle .mask .fill { clip: rect(0, 42.5px, 85px, 0); }
    .radial-progress .inset {
        width: 66px !important;
        height: 66px !important;
        margin: -33px 0 0 -33px !important;
        line-height: 90px;
    }
    .radial-progress .little { font-size: 12px; }
    .radial-progress .big { font-size: 27px; }
}





/* ==========================================================
   Título (H1): ícono de página + "debajo de la imagen" vs.
   "superpuesto" (ver Personalizar > Título sobre Imagen Destacada,
   y el meta box "Ícono antes del título" en Páginas)
   ========================================================== */
 
.entry-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3em 1em;
  box-sizing: border-box;
  text-align: center;
}
 
.sg-page-icon {
  display: block;

  object-fit: contain;
  margin: 0 auto 16px;
}
 
/* Modo "debajo" (default): no hace falta nada más — el ícono y el
   <h1> quedan en flujo normal, después de la imagen destacada, como
   ya renderiza el tema. */
 
/* Modo "superpuesto": Theme::single_featured_image() imprime el
   ícono + el <h1> DENTRO de .featured-image-class (no es un truco de
   márgenes negativos entre hermanos: el título vive en el DOM sobre
   la imagen). */
.sg-title-overlay .featured-image-class {
  position: relative;
}
 
.sg-title-overlay .sg-featured-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
}
 
.sg-title-overlay .sg-featured-overlay .entry-title {
  color: #ffffff;
  margin: 0;
}
 
.sg-title-overlay .sg-featured-overlay .sg-page-icon {
  filter: brightness(0) invert(1); /* ícono en blanco sobre la imagen */
}


/* ==========================================================================
   3. BLOG
   ========================================================================== */



 .gm-grid { 
                display: grid; 
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
                gap: 20px; 
                margin: 20px 0;
            }
            .gm-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: 0.3s; background: var(--accent);;border-radius: 20px; color:#fff}
            .gm-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1);transform:scale (0.9) }
            .gm-img img { width: 100%; height: 200px; object-fit: cover; }
            .gm-content { padding: 15px; }
            .gm-title { font-size: 1.2rem; margin: 0 0 10px; }
.gm-link {   text-decoration: none; font-weight: bold; background-color: var(--primary); padding:10px;box-sizing:border-box;border-radius:20px; color:#fff}
.gm-link:hover{background-color: #fff !important;color: var(--primary)}
            /* Estilos para la paginación */
            .gm-pagination { margin: 30px 0; text-align: center; }
            .gm-pagination .page-numbers {
                padding: 8px 15px;
                margin: 0 4px;
                border: 1px solid #ddd;
                text-decoration: none;
                border-radius: 4px;
                color: #333;
            }
            .gm-pagination .page-numbers.current {
                background: #0073aa;
                color: #fff;
                border-color: #0073aa;
            }




/* ==========================================================================
   3. ANIMACIONES UTILITARIAS
   ========================================================================== */
.animatable { visibility: hidden; animation-play-state: paused; }
.animated {
    visibility: visible;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
}

.animated.animationDelay { animation-delay: 0.4s; }
.animated.animationDelayMed { animation-delay: 1.2s; }
.animated.animationDelayLong { animation-delay: 1.6s; }

.animated.fadeBgColor { animation-name: fadeBgColor; }
.animated.bounceIn { animation-name: bounceIn; }
.animated.bounceInRight { animation-name: bounceInRight; }
.animated.bounceInLeft { animation-name: bounceInLeft; }
.animated.fadeIn { animation-name: fadeIn; }
.animated.fadeInDown { animation-name: fadeInDown; }
.animated.fadeInUp { animation-name: fadeInUp; }
.animated.moveUp { animation-name: moveUp; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { 0%, 20% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes moveUp { from { opacity: 1; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeBgColor { 0%, 70% { background: none; } 100% { background: #464646; } }
@keyframes slide-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flash { 0% { opacity: 0.4; } 100% { opacity: 1; } }