/*
 Theme Name:   OANI Teatro Child
 Theme URI:    https://oaniteatro.com/
 Description:  Tema hijo para la compañía de teatro OANI (Lambe Lambe).
 Author:       Estudio GRA
 Author URI:   https://studio-gra.net/
 Description: Child theme personalizado para GeneratePress con menú dual
 Template:     generatepress
 Version:      1.0.0
 Text Domain: generatepress-child
*/


@font-face {
    font-family: 'JosefinSans';
    src: url('assets/fonts/JosefinSans-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* El rango completo de pesos */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JosefinSans';
    src: url('assets/fonts/JosefinSans-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* El rango completo de pesos */
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* El rango completo de pesos */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* El rango completo de pesos */
    font-style: italic;
    font-display: swap;
}
/* @font-face {
    font-family: 'SpaceGrotesk';
    src: url('assets/fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
} */



/* ============================================
   1. VARIABLES GLOBALES (ROOT)
   ============================================ */
   :root {
    /* --- COLORES PRINCIPALES --- */
    --color-verde-agua: #20B4BF;
    --color-amarillo: #F09B00;
    --color-rojo: #EA4F25;
    --color-gris-oscuro: #1A1A1A;

    --color-primary: #20B4BF;      /* Azul profundo */
    --color-primary-dark: #1A1A1A; /* Azul más oscuro para hover */
    --color-secondary: #F09B00;    /* Ámbar/naranja */
    --color-secondary-dark: #EA4F25;
    
    /* --- COLORES NEUTROS --- */
    --color-dark: #1f2937;          /* Texto principal */
    --color-gray: #6b7280;          /* Texto secundario */
    --color-light: #f3f4f6;         /* Fondos claros */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* --- COLORES DE ESTADO --- */
    --color-success: #20B4BF;
    --color-error: #EA4F25;
    --color-warning: #F09B00;
    --color-info: #1a1a1a;


    /* --- TIPOGRAFÍAS --- */

    --font-primary: 'JosefinSans', Roboto, sans-serif; 
    --font-secondary: 'Lora', Helbetica, serif;
    /* --font-mono: 'SpaceGrotesk', RobotoMono, monospace; */
    
    /* --- TAMAÑOS DE FUENTE (escala tipográfica) --- */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    
    /* --- ESPACIADOS --- */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-2xl: 4rem;    /* 64px */
    --footer-top-spacing-sm : 3rem;
    --footer-top-spacing-md : 3rem;
    --footer-top-spacing-lg : 3rem;
    --footer-top-spacing-xl : 3rem;
    
    /* --- SOMBRAS --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* --- BORDES Y TRANSICIONES --- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --transition: all 0.3s ease;

    --img-flecha-05 : url("assets/imgs/flecha.png");
    --img-flecha-03 : url("assets/imgs/flecha-0.3.png");
}

/* ============================================
   2. RESET Y ESTILOS BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-white);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* --- Encabezados --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
    word-break: keep-all;      
    overflow-wrap: break-word; 
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* --- Párrafos y texto --- */
p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark);
    font-weight: 500;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--color-primary);
}

a:hover, a:focus, a:active {
    color: var(--color-primary);
}

/* Listas */
ul, ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
}

/* Imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   3. HEADER Y NAVEGACIÓN PRINCIPAL
   ============================================ */
.site-header {
    background-color: transparent;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    max-height: 111px;
    overflow-x: clip;
    overflow-y: visible;
}

/* Para Chrome, Edge y Safari */
.site-header::-webkit-scrollbar {
    display: none;
}
  /* Para Firefox */
.site-header {
    scrollbar-width: none;
}
  /* Para Internet Explorer y versiones antiguas de Edge */
.site-header {
    -ms-overflow-style: none;
}

.site-header .inside-header{
    min-width: 100vw;
    max-width: 100vw;
    z-index: 0;
    position: relative;
    padding-top: 0px;
    padding-right: 15px;
    padding-left: 15px;
    word-break: keep-all;      
    overflow-wrap: break-word; 
}
.site-header .site-branding-container{
    position: relative;
    max-width: 90px;
}
.site-header .header-image.is-logo-image {
    max-width: 80px;
    left: -3px;
}

.site-branding {
    display: none;
}
.site-header .oblique-block {
    min-width: 150%;
    min-height: 150%;
    background-color: transparent;
    position: absolute;
    transform: rotate(-6deg);
    left: -10px;
    top: -97px;
    background-image: url("assets/imgs/background-verde-.png");
    background-position: bottom;
    background-size: cover;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    background-repeat: no-repeat;
}
.site-logo {
    background-image: url("assets/imgs/backgroound-logo-rondo.png");
    background-repeat: no-repeat ;
    background-size: contain;
    background-position: center;
    width: 85%;
}

.site-logo a {
    display: inline-block;
}
.site-header .header-image.is-logo-image {
    position: relative;
}

button.menu-toggle {
    padding: 0px 9px;
    line-height: 54px;
    width: 50px;
    height: 50px;
    font-size: 1.7em;
    border-radius: 1px;
    border: 2px solid #fff;
    box-shadow: 0px 2px 7px rgba(0,0,0,0.5);
}

button.menu-toggle:hover, 
button.menu-toggle:active{
    transform: rotate(90deg);
}

.main-navigation .menu-toggle{
    color: var(--color-rojo);
}
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled{
    background-color: var(--color-amarillo);
}

.new-element-menu,
.main-navigation ul,
.gen-sidebar-nav,
.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,
.has-inline-mobile-toggle #site-navigation .inside-navigation > :not(.navigation-search):not(.main-nav) {
    display: none;
}

.main-navigation.toggled .main-nav > ul,
.main-navigation.toggled .new-element-menu > ul,
.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .new-element-menu,
.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation .oblicuo-menu{
    display: block;
}

button.menu-toggle:hover, button.menu-toggle:focus{
    color: var(--color-rojo);
}

label,
.wp-block-search__label {
    font-family: var(--font-primary);
    font-weight: 300;
    text-transform: uppercase;
    border-radius: 0px;
}
/* Estilos para el menú principal (escritorio) */

.mobile-menu-control-wrapper {
    max-width: 0px; 
    position: fixed;
    right: 50px;
    top: 50px;
}
.main-navigation {
    position: fixed;
    left: 0px;
    top: 0px;
}

.mobile-menu-control-wrapper button.menu-toggle {
    position: fixed;
    right: 20px;
    top: 20px;
}

.inside-navigation {
    position: unset;
}
#site-navigation.main-navigation.toggled {
    position: fixed;
    top: 0px;
    left: 0px;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
    background-color: var(--color-secondary);
    z-index: 99;
    margin-top: 0px;
    overflow: hidden;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items {
    color: #fff;
}

.main-navigation .menu-item a,
.inside-navigation .new-element-menu a{
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-size: 2.5rem;
    color: #fff;
    padding: inherit;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a,
.main-navigation a:hover    {
    color: #fff;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.7);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--color-primary);
}

.menu-duplicado-header ul li a{
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.main-navigation, .menu-duplicado-header #menu-menu-principal-1 {
    background-color: var(--color-white);
    padding: var(--spacing-sm) 0;
}
#menu-menu-principal{
    padding-top: 5em;
    margin-left: 3em;
}
.main-navigation ul, .menu-duplicado-header ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.main-navigation li, .menu-duplicado-header li {
    position: relative;
}

.main-navigation a , .menu-duplicado-header a{
    font-weight: 700;
    padding: var(--spacing-xs) var(--spacing-sm);
    display: block;
    transition: var(--transition);
}

.menu-duplicado-header a:hover,
.menu-duplicado-header #menu-menu-principal-1 li a:hover {
    text-shadow: 1px 1px 7px white;
}

/* Submenús */
.main-navigation .sub-menu , .menu-duplicado-header .sub-menu{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
}

.main-navigation li:hover .sub-menu , .menu-duplicado-header li:hover .sub-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.new-element-menu {
    display: block;
    position: relative;
    max-width: 1200px;
    flex-basis: 100%;
    order: 3;
    margin: 2em auto;
}
.new-element-menu ul{
    display: flex;
    flex-wrap: wrap;
    margin-left: 3em;
    margin-bottom: 3em;
}
.new-element-menu ul li{
    list-style: none;
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 0px;
}
.new-element-menu ul li a,
.inside-navigation .new-element-menu a {
    font-size: 1.5rem;
    padding-left: 20px;
    line-height: 1.5;
}
.logo-in-menu {
    max-width: 15%;
    position: absolute;
    right: 2em;
    bottom: 2em;
}

.oblicuo-menu {
    min-width: 120vw;
    background-color: transparent;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100px;
    position: fixed;
    top: -3.2em;
    left: -1em;
    transform: rotate(-2deg);
    filter: drop-shadow(0px 3px 24px rgba(0,0,0,0.6));
}

a.generate-back-to-top {
    background-image: var(--img-flecha-05);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: visible;
    /* background-size: cover; */
    background-color: transparent;
    filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.3));
    z-index: 20;
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
    background-color: transparent;
    filter: drop-shadow(2px 5px 4px rgba(0,0,0,0.6));
}

a.generate-back-to-top .gp-icon svg, 
.icon-categories,
.comments-area,
.inside-article .featured-image,
.entry-meta{
    display: none;
}

 /* ============================================
    4. MENÚ MÓVIL OCULTO (VERSIÓN DUAL)
    ============================================ */

 /* Mostrar botón hamburguesa */
 .mobile-menu-toggle {
    display: block;
}

 /* ============================================
    5. CONTENIDO PRINCIPAL (MAIN)
    ============================================ */

.home #page{
    margin-top: -5em;
    overflow: visible;
}

.site-main {
    margin-top: 80px; 
    padding: var(--spacing-lg) 0;
    min-height: calc(100vh - 200px);
}

/* Contenedor principal */
.container {
    max-width: 100vw;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.site-content{ /* Page */
    position: relative;
    top: -7em;
    background-color: var(--color-amarillo);
    z-index: 0;
    padding-bottom: 5em;
}
body:not(.home) .site-content{
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

.archive .site-content{
    background-color: var(--color-secondary-dark);
}
.single-post .site-content{
    background-color: #fff;
}

body:not(.home).page .site-content a {
    color: var(--color-secondary-dark);
    font-weight: bold;
}
body:not(.home).page .site-content a:hover{
    color: #fff;
}
.page .entry-title {
    color: #fff;
}


article,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
    background-color: transparent;
}
.content-area{
    flex: 2;
    min-width: 0; 

}
body:not(.no-sidebar) #main{
    margin-top: 0px;
    padding-top: 0px;
}

/* ============================================
    6. ARTÍCULOS Y ENTRADAS
    ============================================ */
article {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color:transparent;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.home article {
    padding-top: 0px;
}

.home h1.entry-title{
    display: none;
}

.home article .entry-content{
    margin-top: 0px;
}

.entry-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-xs);
}

.entry-meta {
    font-size: var(--text-sm);
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
}

.entry-content {
    margin-top: var(--spacing-sm);
}

/* ============================================
    HOME ARTICLES THUMNAILS
    ============================================ */


.featured-image.page-header-image {
    display: none;
}
.home article .wp-block-query ul.wp-block-post-template{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 3px;
}

.wp-block-post,
body:not(.home).archive article {
    background-image: url("assets/imgs/thumbnail-background-01.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(7px 5px 10px rgba(0, 0, 0, 0.2));
    padding: 3rem;
    transition : transform 0.3s ease;
}

.wp-block-post.category-talleres,
body:not(.home).archive article.category-talleres{
    background-image: url("assets/imgs/thumbnail-background-01.png");
}
.wp-block-post.category-formacion,
body:not(.home).archive article.category-formacion{
    background-image: url("assets/imgs/thumbnail-background-02.png");
}
.wp-block-post.category-lambe-lambe,
body:not(.home).archive article.category-lambe-lambe{
    background-image: url("assets/imgs/thumbnail-background-03.png");
}
.wp-block-post.category-obras ,
body:not(.home).archive article.category-obras{
    background-image: url("assets/imgs/thumbnail-background-04.png");
}
.wp-block-post.category-cartelera, 
body:not(.home).archive article.category-cartelera{
    background-image: url("assets/imgs/thumbnail-background-05.png");
}
.wp-block-post.category-noticias, 
body:not(.home).archive article.category-noticias{
    background-image: url("assets/imgs/thumbnail-background-06.png");
}

body:not(.home).archive article:hover {
    filter: drop-shadow(5px 13px 10px rgba(0,0,0,0.4) );
}

.wp-block-post.category-talleres:hover,
.wp-block-post.category-formacion:hover{
    filter: drop-shadow(5px 13px 10px #a5700e98 );
}
.wp-block-post.category-lambe:hover,
.wp-block-post.category-obras:hover,
.wp-block-post.category-cartelera:hover{
    filter: drop-shadow(5px 13px 10px #99321696);
}
.wp-block-post.category-noticias:hover,
.wp-block-post.category-uncategorized:hover{
    filter: drop-shadow(5px 13px 10px #108a938a);
}

.wp-block-post:hover {
    transform: rotate(0deg) !important;
}

.home article .wp-block-query .wp-block-post figure.alignwide {
    margin-left: 0px;
    width : 100%;
    max-width : 100%;
    min-width: 100%;
    position: relative;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-radius: 7px;
}
.home article .wp-block-query .wp-block-post figure.alignwide img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    transition: transform 0.3s ease;
}

.home article .wp-block-query .wp-block-post figure:hover img{
    transform: scale(1.05);
}

.home article .wp-block-query .wp-block-post h2 {
    margin-top: var(--spacing-sm);
}
.search-results .entry-title a {
    font-size: 2rem;
    color: var(--color-secondary-dark);
}
.search-results .entry-title a:hover{
    color: var(--color-primary);
}
article .wp-block-post-title a {
    color: var(--color-secondary);
    text-transform: uppercase;
    font-size: var(--text-lg);
    display: block;
}
article .wp-block-post-title a:hover,
.entry-title a{
    color: var(--color-secondary-dark);
}

.home article .wp-block-query .wp-block-post .wp-block-separator{
    display: none;
}

.home-oani-presentacion {
    max-width: 100%;
    margin: auto;
    color: #fff;
    padding: 3em;
    background-image: url("assets/imgs/bg-verde.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: drop-shadow(0px -5px 10px rgba(0,0,0,0.3));
    padding-bottom: 30em;
    position: relative;
    top: -10em;
}

.home-oani-presentacion .custom-post-title {
    color: #fff;
    text-align: center;
    margin-bottom: 1em;
}

.home-oani-presentacion .custom-post-content figure {
    margin-bottom: 3em;
}

.home-oani-presentacion .custom-post-content p{
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

body:not(.home).archive .sidebar,
body:not(.home).wp-singular .sidebar,
body:not(.home).error404 .sidebar,
body:not(.home).search-results .sidebar{
    display: none;
}

body:not(.home).archive #page,
body:not(.home).wp-singular #page,
body:not(.home).error404 #page,
body:not(.home).search-results #page{
    margin-top: 2em;
}

body:not(.home).archive .site-content,
body:not(.home).wp-singular .site-content,
body:not(.home).search-results .site-content {
    padding-bottom: 20em;
    padding-top: 3em;

}
body:not(.home).error404 .site-content {
    padding-bottom: 20em;
    padding-top: 7rem;
}

body:not(.home).archive .page-title,
body:not(.home).wp-singular article .entry-title,
body:not(.home).error404 .inside-article .entry-title,
body:not(.home).search-results .inside-article .entry-title {
    text-align: right;
    font-size: 3em;
    padding-right: 0.5em;
}

body:not(.home).archive .page-title,
body:not(.home).search-results .page-title {
    color: #fff;
    text-transform: uppercase;
}

.separate-containers .comments-area,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation {
    padding: 1em;
}

.archive-grid-wrapper {
    padding-left: 2em;
    padding-right: 2em;
}
.archive-grid-wrapper .inside-article .entry-meta {
    display: none;
} 
.archive-grid-wrapper .inside-article a img{
    border-radius: 7px;
}

body:not(.home).archive .inside-article {
    display: flex;
    flex-direction: column;
}
body:not(.home).archive .post-image {
    order: 1;
    margin-bottom: 1rem;
    margin-top: 0px;
}

body:not(.home).archive .entry-header {
    order: 2;
    margin-bottom: 0.5rem;
}

body:not(.home).archive .entry-summary {
    order: 3;
    margin-top: 0px;
    font-size: 0.9rem;
}

body:not(.home).archive .entry-meta,
body:not(.home).archive .entry-footer {
    display: none;
}
body:not(.home).archive article {
    /* background-color: #fff; */
    border-radius: 10px;
    padding: 1rem;
}



/* ============================================
    7. FOOTER
    ============================================ */
.site-footer {
    background-color: transparent;
    color: var(--color-light);
    padding: var(--spacing-xl) 0 var(--spacing-md);
    margin-top: var(--spacing-xl);
    background-image: url("assets/imgs/footer-oani-grisoscuro-volantines.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -30rem;
    padding-top: 20rem;
    position: relative;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

.site-footer a {
    color: var(--color-light);
}

.site-footer a:hover {
    color: var(--color-secondary);
    font-weight: bold;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    background-color: var(--color-gris-oscuro);
    margin-bottom: 0;
    padding-bottom: 3em;
    position: relative;
    top: -10em;
}
.site-info {
    background-color: var(--color-gris-oscuro);
    padding-bottom: 1em;
    position: absolute;
    min-width: 100vw;
}
.relleno-footer {
    background-color: var(--color-gris-oscuro);
    position: absolute;
    min-width: 100vw;
    min-height: 300px;
    z-index: -2;
    bottom: 0;
}

.footer-widgets .widget_text p {
    font-weight: 300;
}

.wp-social-link-facebook.wp-block-social-link:hover{
    box-shadow: 0 0 5px #1877F2;
}
.wp-social-link-instagram.wp-block-social-link:hover{
    box-shadow: 0 0 7px #ad14c1;
}
.wp-social-link-youtube.wp-block-social-link:hover{
    box-shadow: 0 0 7px #FF0000;
}
.wp-social-link-x.wp-block-social-link:hover{
    box-shadow: 0 0 7px #fff;
}

/* ============================================
    8. GALERÍA DE IMÁGENES
    ============================================ */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: var(--spacing-sm);
    transform: translateY(100%);
    transition: var(--transition);
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* ============================================
    9. SIDEBAR
    ============================================ */
.sidebar {
    padding: var(--spacing-lg);
    background-color: transparent;
    background-image: url("assets/imgs/background-con-borde-naranjo.png");
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 0;
    position: relative;
    display: flex;
    align-items: stretch;
}
.is-right-sidebar,
.is-left-sidebar.sidebar,
.is-right-sidebar.sidebar{
    width: 27%;
}

.sidebar .widget {
    background-color: transparent;
}
.inside-right-sidebar{
    background-color: transparent;
}
.separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar{
    padding: 0.5em;
    margin-top: -1em;
    margin-left: 0.3em;
    min-width: 100%;
}

.widget {
    margin-bottom: var(--spacing-lg);
}

.widget-title {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-xs);
}
.sidebar .widget li .wp-block-latest-posts__featured-image a {
    position: relative;
    min-width: 100%;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3/2;
    overflow-y: hidden;
    border-radius: 3px;
}

.sidebar .widget img.attachment-thumbnail, 
.sidebar .widget img.attachment-medium {
    min-width: 100%;
    width: 100%;

    /* max-width: 100% !important; */
    /* max-height: 300px; */
    aspect-ratio: 3 / 2 ;
    min-height: auto;
    /* border-radius: 5px; */
    height: auto;
    object-fit: cover;
    object-position: center;
    /* max-width: 100% !important; */
}
.inside-right-sidebar aside .wp-block-social-links  {
    display: none;
}

.wp-block-latest-posts__list:last-child {
    padding-bottom: 3em;
    border-bottom: 2px solid var(--color-secondary);
}



/* ============================================
    10. BOTONES Y FORMULARIOS
    ============================================ */
button,
.button,
.wp-block-button__link,
input[type="submit"],
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background){
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: var(--spacing-sm);
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 400;
    font-family: var(--font-primary);
    text-transform: uppercase;
    line-break: auto;
    word-break: inherit;
}


button:hover,
.button:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary-dark);
    /* transform: translateY(-2px); */
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
    background-color: var(--color-secondary);
}

input,
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-primary);
    /* border-radius: var(--radius-md); */
    font-family: var(--font-primary);
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus{
    outline: none;
    border-color: var(--color-primary);
}


/* ============================================
   11. RESPONSIVE DESIGN (MOBILE FIRST)
   ============================================ */

/* === ESTILOS BASE (MÓVIL - < 480px por defecto) === */

/* Ocultar menú escritorio en móvil */
.menu-duplicado-header  {
    display: none;
}

/* Ajustes del header para móvil */
.site-header {
    padding: var(--spacing-xs) 0;
}

.site-branding {
    text-align: center;
}

/* Contenido principal */
.site-main {
    margin-top: 60px;
}

article {
    padding: var(--spacing-md);
}

/* Galería en móvil */
.image-gallery {
    grid-template-columns: 1fr;  /* Una columna en móvil pequeño */
    gap: var(--spacing-sm);
}

.gallery-item img {
    height: 200px;
}

/* Sidebar en móvil */
.sidebar {
    margin-top: var(--spacing-lg);
}
.wp-block-latest-posts.wp-block-latest-posts__list li{
    margin-bottom: var(--spacing-xl);
}
.widget-area .widget h2.wp-block-heading {
    text-align: center;
    text-transform: uppercase;
}
.widget-area .widget h2.wp-block-heading {
    position: relative;
    background: white;
    padding: var(--spacing-sm) 0 ;
    text-align: center;
    overflow: hidden;
}

.widget-area .widget h2.wp-block-heading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--color-amarillo),
        var(--color-amarillo) 10px,
        transparent 10px,
        transparent 20px
    );
    animation: borderRun 1.5s steps(2) infinite; 
}

.widget-area .widget h2.wp-block-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--color-amarillo),
        var(--color-amarillo) 10px,
        transparent 10px,
        transparent 20px
    );
    animation: borderRun 1.5s steps(2) infinite reverse; 
}

@keyframes borderRun {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 20px 0;
    }
}

@keyframes dashPulse {
    0%, 100% {
        border-color: #F09B00;
        border-width: 4px;
    }
    50% {
        border-color: #EA4F25;
        border-width: 4px;
    }
}


/* Capa blanca interior (crea el efecto de borde) */

.widget-area .widget h2.wp-block-heading span {
    color: var(--color-secondary-dark);
}

/* Tamaños responsivos */
@media (max-width: 480px) {
    .widget-area .widget h2.wp-block-heading span {
        font-size: clamp(1.2rem, 6vw, 2rem);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .widget-area .widget h2.wp-block-heading span {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .widget-area .widget h2.wp-block-heading span {
        font-size: clamp(1rem, 2vw, 2rem);
    }
}

@media (min-width: 1025px) {
    .widget-area .widget h2.wp-block-heading span {
        font-size: clamp(1.2rem, 2vw, 3rem);
    }
}

@keyframes rotate {
     100% {
          transform: rotate(1turn);
     }
}


@keyframes broadwayGlow {
    0% {
        filter: brightness(0.9);
        text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    }
    100% {
        filter: brightness(1.2);
        text-shadow: 2px 2px 5px rgba(255,215,0,0.5);
    }
}  

/* Hover: intensifica la letra */
.widget-area .widget h2.wp-block-heading span:hover {
    animation: none;
    filter: brightness(1.3);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.widget-area .widget a.wp-block-latest-posts__post-title{
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--text-xl);
    margin-top: var(--spacing-sm);
    display: block;
    line-height: 1.5rem;
}
.widget-area .widget a.wp-block-latest-posts__post-title:hover{
    color: var(--color-secondary-dark);
}

.site-content .oblique-block {
    display: none;
}

/* Footer en móvil */
.footer-widgets {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--color-amarillo);
}

.footer-widgets-container {
    min-width: 100vw;
    font-family: var(--font-primary);
    font-weight: 300;
}

.footer-widgets-container figure.wp-block-image {
    max-width: 70%;
    margin: auto;
}

.footer-widgets-container .widget_text p{
    color: #fff;
}

.entry-title {
    font-size: var(--text-xl);
}

.mobile-navigation {
    width: 85%;
}
.widget_nav_menu .widget-title{
    display: none;
}
#menu-menu-principal-2 {
    text-transform: uppercase;
}

.social-footer-parent {
    position: absolute;
    bottom: 1em;
  }
.footer-widgets-container figure.wp-block-image.logo-paoc {
    margin-left: 0px;
    max-width: 50%;
}
.copyright-bar {
    font-family: var(--font-primary);
    font-weight: 300;
}
a.gra-studio-link:hover {
    color: #fff;
}
.gra-studio-info,
.creative-commons-label{
    clear: both;
    display: block;
    margin-top: 1em;
}

form.wp-block-search .wp-block-search__inside-wrapper {
    border: 2px solid var(--color-primary);
}

footer form.wp-block-search .wp-block-search__inside-wrapper {
    border: 2px solid #fff;
}

form.wp-block-search .wp-block-search__input {
    background-color: transparent;
    border: 0px;
    color: var(--color-primary);
}
form.wp-block-search .wp-block-search__button { 
    font-size: 2.5em;
    line-height: 0;
    background-color: transparent;
    position: relative;
    top: -2px;
    color: var(--color-primary);    
}
form.wp-block-search .wp-block-search__button:hover {
    color: var(--color-secondary);
}

.footer-widget-3 {
    display: none;
}



.otw-sc-toggle {
    border: 0px;
    /* padding: 1rem 2rem; */
    /* -webkit-box-shadow: 0 14px 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 14px 15px rgba(0,0,0,0.3);
    box-shadow: 0 14px 15px rgba(0,0,0,0.3); */
    filter: drop-shadow(0 14px 15px rgba(0,0,0,0.3));
}
.otw-sc-toggle:hover{
    /* -webkit-box-shadow: 0 14px 15px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 14px 15px rgba(0,0,0,0.5);
    box-shadow: 0 14px 15px rgba(0,0,0,0.5); */
    filter: drop-shadow(0 14px 15px rgba(0,0,0,0.5));
}
.otw-sc-toggle .toggle-trigger {
    font-weight: bold;
    font-family: var(--font-primary);
    border-bottom: 0px !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.otw-sc-toggle .toggle-trigger.closed {
    border-radius: 5px;
}
.otw-sc-toggle .toggle-content {
    border: 0px !important;
    padding: 1rem 2rem;
    box-shadow: unset !important;
    padding: 3em 4em !important;
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


/* === MÓVIL MEDIANO (≥ 480px) === */
@media screen and (min-width: 480px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    .footer-widgets {
        top: -7em;
    }

}
@media screen and (min-width: 668px) {
    .footer-widgets {
        top: 0em;
    }
}

/* === TABLET (≥ 769px) === */
@media screen and (min-width: 769px) {
    :root {
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
        --text-2xl: 1.5rem;
    }
    .site-header .site-branding-container{
        max-width: 110px;
    }
    .site-logo{
        max-width: 110px;
        width: 110px;
    }
    .site-header .header-image.is-logo-image {
        max-width: 115px;
    }
    .site-header .oblique-block {
        top: -13.7vw;
        transform: rotate(-4deg);
        background-size: cover;
    }

    .home .site-content {
        background-color: transparent;
        z-index: 0;
        top: -2em;
    }
     .wp-block-post.has-post-thumbnail {
        padding: 1.5rem;
    }

    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Controles de menú móvil */
    .mobile-menu-control-wrapper, 
    .menu-toggle {
        display: block;
    }
    
    #site-navigation .menu-toggle {
        display: none;
    }
    
    .main-navigation ul,
    .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
        display: none;
    }
    
    .toggled .main-navigation ul,
    .toggled .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
        display: block;
    }

    .home article .wp-block-query ul.wp-block-post-template{
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar{
        right: 3em;
    }
    .widget-area .inside-right-sidebar .widget {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .widget-area .inside-right-sidebar > .widget:first-child {
        padding-top: 4em;
    }
    .widget-area .widget h2.wp-block-heading {
        font-size: 1.2rem;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .separate-containers .inside-left-sidebar,
    .separate-containers .inside-right-sidebar {
        margin-top: -2em;
        margin-left: 0.3em;
        min-width: 97%;
        margin-bottom: -1.5em;
    }
    .site-content .oblique-block {
        display: block;
        background-image: url("assets/imgs/bw-w-l.png");
        background-color: transparent;
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        min-width: 150%;
        transform: rotate(-2deg);
        filter: drop-shadow(7px 41px 14px rgba(0,0,0,0.15));
        position: relative;
        min-height: 250px;
        left: -5em;
        top: -12em;
        z-index: -1;
    }

    .home-oani-presentacion {
        max-width: 840px;
        padding-bottom: 30em;
        top: -20em;
        background-size: 100% 100%;
    }

    body:not(.home).archive #page,
    body:not(.home).wp-singular #page{
        margin-top: 3em;
        padding-bottom: 15em;
        max-width: 777px;
    }
    body:not(.home).archive .site-content,
    body:not(.home).wp-singular .site-content{
        padding-bottom: 20em;
    }
    body:not(.home).archive #main,
    body:not(.home).wp-singular #main{
        padding-top: 2em;
    }

    .site-footer {
        margin-top: -38rem;
    }
    .footer-widgets {
        top: -1em;
    }

    .home-oani-presentacion .custom-post-content p{
        font-size: 1.2rem;
    }

    .site-footer .footer-widgets-container .inner-padding {
        padding: 0px;
    }
    .footer-widgets {
        top: -3em;
        padding-top: 3em;
        max-width: 100vw;;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .footer-widgets-container figure.wp-block-image {
        max-width: 90%;
        margin: 0;
    }
    .footer-widgets-container.grid-container,
    .inside-footer-widgets {
        max-width: 100vw;
        min-width: 100vw;
        padding-left: 5%;
        padding-right: 5%;
    }
    .inside-footer-widgets .footer-widget-1,
    .inside-footer-widgets .footer-widget-2{
        padding-left: 2em;
        padding-right: 2em;
        position: relative;
    }
    .inside-footer-widgets .footer-widget-1{
        top: -6em;

    }
    .relleno-footer{
        min-height: 760px;
    }
    .widget_nav_menu .widget-title{
        display: none;
    }
    #menu-menu-principal-2{
        padding-top: 6em;
        text-align: right;
        text-transform: uppercase;
    }
    #menu-menu-principal-2 li{
        margin-bottom: .2rem;
    }
    .social-footer-parent {
        bottom: -6.2em;
      }
    .footer-widgets-container figure.wp-block-image.logo-paoc {
        max-width: 80%;
    }
    .inside-right-sidebar aside .wp-block-social-links {
        display: none;
    }
    .logo-in-menu {
        max-width: 155px;
        position: absolute;
        right: 2em;
        bottom: 2em;
    }

    body:not(.home).archive .site-content  {
        display: flex; 
        
    }
    body:not(.home).archive .site-main .archive-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding-left: 1em;
        padding-right: 1em;
    }
    
    
}
@media screen and (min-width: 850px){
    .footer-widgets-container.grid-container,
    .inside-footer-widgets {
        max-width: 840px;
        min-width: 840px;
        padding-left: 2em;
        padding-right: 2em;
        margin: auto;
    }
    .footer-widgets {
        grid-template-columns: unset;
    }
    .footer-widgets-container figure.wp-block-image{
        filter: grayscale(1) contrast(2.5);
    }
    .footer-widgets-container figure.wp-block-image:hover{
        filter: grayscale(0);
    }
    
}

/* === ESCRITORIO (≥ 1024px) === */
@media screen and (min-width: 1024px) {
    /* Estilos para pantallas grandes */
 
    .site-header .site-branding-container{
        /* max-width: 11%; */
        max-width: 145px;
    }
    .site-logo{
        width: 100%;
    }
    .site-branding-container .site-logo{
        margin-right: 0px;
        margin-left: 2em;
    }
    .inside-header{
        /* padding-top: 10px; */
        padding-top: 0.3vw;
    }
    .menu-duplicado-header  {
        display: block;
        position: inherit;
        left: 13%;
        margin-top: -3vw;
    }
    .site-header .oblique-block {
        top: -11.7vw;
        transform: rotate(-3deg);
        background-size: cover;
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    }
    .menu-duplicado-header #menu-menu-principal-1{
        padding: 0px;
        background-color: transparent;
    }
    .menu-duplicado-header #menu-menu-principal-1 li a {
        color: #ffffff;
    }
    .site-header .header-image.is-logo-image {
        /* max-width: 150px; */
        max-width: 105%;
        left: -5%;
    }

    .menu-toggle.menu-no-visible{
        display: none;
    }

    .site-header .header-image.is-logo-image:hover{
        transform: rotate(30deg);
        scale: 1.2;
    }

    .site-content {
        margin: auto;
        max-width: 1280px;

    }

    .separate-containers .site-main{
        margin: 0 20px;
        padding-top: 0;
    }

    .home article .wp-block-query ul.wp-block-post-template{
        grid-template-columns: repeat(3, 1fr);
    }

    .sidebar {
        top: -27rem;
        position: relative;
        z-index: 15;
    }
    .is-right-sidebar {
        width: 25%;
    }

    .separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar{
        margin-top: -1em;
        margin-bottom: -0.8em;
    }

    .home-oani-presentacion {
        padding-bottom: 30em;
        top: -15em;
    }
  
    body:not(.home).archive #page,
    body:not(.home).wp-singular #page,
    body:not(.home).search-results #page {
        padding-bottom: 13em;
        max-width: 840px;
    }
    body:not(.home).archive .site-content,
    body:not(.home).wp-singular .site-content,
    body:not(.home).search-results .site-content {
        padding-bottom: 20em;
    }
    body:not(.home).archive #main,
    body:not(.home).wp-singular #main, 
    body:not(.home).search-results #main {
        padding-top: 2em;
    }

    .footer-widgets {
        top: 0em;
        padding-top: 2em;
        max-width: 100%;
    }
    .sidebar aside .wp-block-social-links .wp-social-link svg {
        height: 0.6em;
        width: 0.6em;
    }
    .inside-right-sidebar aside .wp-block-social-links {
        display: block;
    }
    body:not(.home).archive .site-main .archive-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

}
@media screen and (min-width: 1040px){
    .widget-area .widget h2.wp-block-heading {
        font-size: 2rem;
    }
    .site-footer {
        margin-top: -40rem;
    }   
}

/* === PANTALLAS GRANDES (≥ 1280px) - Opcional === */
@media screen and (min-width: 1280px) {

    .menu-duplicado-header  {
        left: 12%;
        margin-top: -4vw;
    }
    .site-header .oblique-block {
        top: -10vw;
        transform: rotate(-4deg);
        background-size: cover;
    }
}

/* ============================================
   12. UTILIDADES Y CLASES AUXILIARES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.hidden { display: none; }
.visible { display: block; }

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}



/* ============================================
   CARRUSEL DE POSTS DESTACADOS (VEDETTE)
   Versión optimizada para GeneratePress
   ============================================ */

.featured-carousel-section {
    margin-bottom: 0; 
    overflow: visible;
    position: relative;
    display: grid;
    width: 100%;
    z-index: 1;
}

.carousel-container {
    position: relative;
    overflow: visible;
    margin-left: -1rem;
    width: 100%;
    margin: 0;
}

/* Contenedor de imágenes */
.carousel-images {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: var(--color-dark);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}
#carouselShadow{
    min-width: 100%;
    min-height: 100%;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.5) 0%,
        transparent 10%,
        transparent 90%,
        rgba(0,0,0,0.5) 100%);
    position: absolute;
    z-index: 2;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-gray) 0%, var(--color-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--text-lg);
    text-align: center;
}

.carousel-content {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--color-gris-oscuro);
    padding: var(--spacing-xl) var(--spacing-lg) 2em;
    z-index: 15;
    background-color: transparent;
    background-image: url("assets/imgs/carouselContent_bckg_c.png");
    background-repeat: no-repeat;
    background-size: 110% 100%;
    background-position: center center;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
    min-height: 220px;
    height: auto;
}

.carousel-info {
    display: none;
    max-width: 650px;
    animation: slideUp 0.5s ease-out;
}

.carousel-info.active {
    display: block;
    padding: 2em;
}

.carousel-title {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 4px var(--color-secondary-dark);
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.3); */
}

.carousel-title a {
    color: var(--color-secondary);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition);
}

.carousel-title a:hover {
    color: #fff;
}

.carousel-excerpt {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    opacity: 0.95;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-weight: 600;

}

.carousel-read-more {
    display: inline-block;
    background-color: transparent;
    color: #fff;
    padding: 1px 0;
    opacity: 0.85;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 700;
    font-size: var(--text-sm);
}

.carousel-read-more:hover {
    color: #fff;
    opacity: 1;
}

/* Botones de navegación */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 37%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
    z-index: 20;
    backdrop-filter: blur(4px);
}
.carousel-prev:focus,
.carousel-next:focus{
    background: transparent;
}

.carousel-prev {
    left: var(--spacing-md);
}

.carousel-next {
    right: var(--spacing-md);
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}

/* Indicadores (dots) */
.carousel-dots {
    position: absolute;
    bottom:4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-xs);
    z-index: 20;
    background: rgba(0,0,0,0.1);
    padding: 5px 10px;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(1px);
}

.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.carousel-dot.active {
    background: var(--color-secondary);
    transform: scale(1.3);
}

.carousel-dot:hover {
    background: var(--color-white);
    transform: scale(1.2);
}

/* Animación */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE DEL CARRUSEL
   ============================================ */


@media screen and (min-width: 769px) {

    .carousel-content {
        top: -55px;
    }

    .carousel-info {
        max-width: 444px;
    }
    .sidebar{
        top: -18em;
        z-index: 15;
    }
    .home .site-content{
        z-index: 15;
    }
    .separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar{
        padding: 0px;
    }
    
}
@media screen and (min-width: 1024px) {

    .carousel-info.active {
        padding: 0rem 6rem;
        margin: 0rem 0rem 1rem 0rem;
    }
    .carousel-info {
        max-width: 666px;
    }
}

@media screen and (min-width: 1280px) {

    .carousel-content {
        top: -45px;
        padding-bottom: 3em;
    }
    .carousel-info.active {
        padding: 0 10rem 0 0rem;
        margin: 0rem 2rem 0 8rem;
    }
    .carousel-info {
        max-width: 777px;
    }
}


/* Tablet */
@media (max-width: 768px) {
    
    .carousel-content {
        padding: var(--spacing-md);
        top: -40px;
    }
    .carousel-title {
        font-size: 2em;
    }
    
    .carousel-excerpt {
        font-size: var(--text-sm);
        -webkit-line-clamp: 2;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .widget-area .widget {
        padding-top: 3em;
        padding-right: 2em;
        padding-bottom: 3em;
        padding-left: 2em;
        max-width: 85%;
        margin: auto;
      }
      .is-left-sidebar.sidebar, .is-right-sidebar.sidebar{
        width: 80%;
        margin: auto;
    }

}

/* Móvil */
@media (max-width: 480px) {
    .carousel-images {
        height: 300px;
    }
    
    .carousel-content {
        padding: var(--spacing-md);
        top: -4em;
    }
    
    .carousel-title {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .carousel-read-more {
        padding: 5px 12px;
        font-size: 12px;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .carousel-dots {
        padding: 5px 10px;
    }
    
    .carousel-dot {
        width: 8px;
        height: 8px;
    }
}


body.is-mobile { /* Estilos para móvil */ }
body.is-tablet { /* Estilos para tablet */ }
body.is-desktop { /* Estilos para desktop */ }
body.scroll-top { /* Scroll entre 0-300px */ }
body.scroll-past { /* Scroll > 300px */ }
body.scrolling-up { /* Scroll hacia arriba */ }
body.scrolling-down { /* Scroll hacia abajo */ }