/**************************************************
 * Hoja de estilos específica para iescarpetania.es
 *************************************************/

/* ===== VARIABLES DE COLOR ===== */

:root {
    --primary-color: #1a365d;       /* Azul oscuro */
    --secondary-color: #2d3748;     /* Gris azulado */
    --accent-color: #c53030;        /* Rojo */
    --light-color: #f7fafc;         /* Gris muy claro */
    --text-color: #2d3748;          /* Texto principal */
    --dark-bg: #0f172a;            /* Fondo oscuro */
}

 /******************************************
 *          CABECERA Y MENÚ SUPERIOR
 *******************************************/

/* Cabecera fija con fondo transparente */
#cabecera {
    position: relative;
    position: fixed;
    flex-direction: row;
    top: 0px;
    width: 100%;
    height: 55px;
    background: none; /* Fondo transparente */
    z-index: 100 !important; /* Asegura que la cabecera esté por encima de otros elementos */
}

/* capa-transparente */
#capa-transparente {
    width: 100%;
    background: rgba(255, 255, 255, 0.3) !important; /* Fondo blanco con opacidad */
    backdrop-filter: blur(10px) !important; /* Efecto de desenfoque */
}

/* Logo en la cabecera */
#Logo_cabecera {
    height: auto !important;
    width: auto !important;
}

/******************************************************
* Estilos para el icono de hamburguesa y la X del menú
******************************************************/

/* Se oculta el Checkbox y los iconos*/
#check-hamburguesa { display: none; }
.contenedor-iconos { display: none; }

/* Posición y tamaño del contenedor de los iconos */
.contenedor-iconos { position: relative; top: 10px; width: 30px; height: 30px; }
.icono { position: absolute; transition: opacity 0.3s; cursor: pointer; }

/* La X empieza invisible */
.icono-x { opacity: 0; }

/* Al marcar: la hamburguesa se va, la X aparece */
#check-hamburguesa:checked + label .icono-hamb { opacity: 0; }
#check-hamburguesa:checked + label .icono-x { opacity: 1; transform: rotate(180deg); }


/* Contenedor del menú superior*/
.menu-superior {
    position: relative;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* Caracteríasticas generales de todos los elementos del menú*/
.menu-superior li {
    color: #000000 !important;
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 10px 10px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
    /* text-decoration: none !important; */
}

.menu-superior li:link {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

.menu-superior li:hover {
    background: #f777b8 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/*Elementos del menú de primer nivel*/
.menu-superior ul > li { 
    display: flex;
    position: relative; 
}

/*Contenedor de los elementos del menú de segundo nivel*/
.menu-superior ul > li > ul {
    display: grid !important;
    position: absolute !important;
    grid-template-columns: auto auto;
    grid-gap: 5px;
    left: -50px !important;
    width: auto !important;
    padding: 5px !important;
    border-radius: 10px !important;      
    /* border: 3px solid rgb(34, 180, 121) !important; */
}

/*Elementos del menú de segundo nivel*/
.menu-superior > ul > li > ul > li {
    display: flex;
    padding: 0px !important;
    margin: 0px !important;
    width: 150px;
    text-align: center !important;
    /* border: 3px solid rgb(180, 99, 45) !important; */
}

.menu-superior > ul > li > ul > li > a{
    justify-content: center !important;
    /* border: 3px solid rgb(29, 169, 235) !important; */
}


/****************************************************
* Estilo para pantallas MENORES o iguales a 1100px
*****************************************************/

@media screen and (max-width: 1100px) {

    /* Se muestran los iconos hamburguesa y equis del menú*/
    .contenedor-iconos { display: block; }

    /* Cuando el checkbox esté marcado, se muestra la capa de navegación */
    #check-hamburguesa:checked ~ #capa-navegacion { 
        display: flex !important; 
    }  

    /* Capa de navegación para pantallas pequeñas */
    #capa-navegacion {
        display: none;
        overflow: initial; 
        position: absolute;
        top: 55px;
        left: 1px;
        padding: 5px;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        background: rgba(255, 255, 255, 0.3) !important; /* Fondo blanco con opacidad */
        backdrop-filter: blur(10px) !important; /* Efecto de desenfoque */        
    }

    /* Estilo para el contenedor del menú superior en pantallas pequeñas */
    .menu-superior ul{
        flex-direction: column;
        align-items: start;
        /* border: 3px solid rgba(57, 45, 180, 1) !important; */
    }

    /* Estilo para los elementos del menú superior en pantallas pequeñas */
    .menu-superior ul >li{
        width: 130px;
    }

    /* Estilo para el contenedor de los elementos del menú de segundo nivel en pantallas pequeñas */
    .menu-superior ul > li > ul {
        top: -15px !important;
        left: 150px !important;
        z-index: -100;
    }      

} /* FIN Estilo para pantallas MENORES o iguales a 1100px */

/****************************************************
* Estilo para pantallas MENORES o iguales a 600px
*****************************************************/

@media screen and (max-width: 600px) { 

/*Contenedor de los elementos del menú de segundo nivel*/
.menu-superior ul > li > ul {
    grid-template-columns: auto;
    min-width: 150px !important;
    /* border: 3px solid rgb(135, 188, 207) !important; */
}   

} /* FIN Estilo para pantallas MENORES o iguales a 600px */

/*************************************************
*   ICONOS DEL MENÚ
*************************************************/
.menu-svg > a::before {
    content: "";
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    margin-right: 5px;
    vertical-align: middle;
    background-color: #000000; /* Cambia el color aquí fácilmente */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;    
}

.menu-svg-inicio a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_inicio.svg');
    mask-image: url('https://carpetania2.icespace.es//wp-content/uploads/2026/02/ico_inicio.svg');
}

.menu-svg-secretaria a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_secretaria.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_secretaria.svg');
}

.menu-svg-departamentos a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_departamentos.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_departamentos.svg');
}

.menu-svg-actividades a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_actividades.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_actividades.svg');
}

.menu-svg-orientacion a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_orientacion.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_orientacion.svg');
}

.menu-svg-ampa a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_departamentos.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_departamentos.svg');
}

.menu-svg-conocenos a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_secretaria.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_secretaria.svg');
}

.menu-svg-contacto a::before {    
    -webkit-mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_contacto.svg');
    mask-image: url('https://carpetania2.icespace.es/wp-content/uploads/2026/02/ico_contacto.svg');
}

.menu-svg:hover > a::before {
    background-color: #ffffff; /* Cambia el color al hacer hover */
}


/******************************************************************************
*                    PÁGINA INICIO - ESTILOS GENERALES
*******************************************************************************/

/**********************************
*        CARRUSEL PRINCIPAL
**********************************/
#logo-carrusel {
  animation: flaxup 1s ease 0s 1 normal forwards;
}

/**********************************
*        SECCIÓN BIENVENIDOS
**********************************/
/* Damos efecto a la sección bienvenidos */
#grupo-bienvenidos {
    animation: flaxup 1s ease 0s 1 normal forwards;
}

/* ===== TÍTULOS PRINCIPALES ===== */

#bienvenidos {
    color: var(--primary-color) !important;
    /* color:#1a365d !important; */
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin: 40px 0 20px !important;
    text-align: center !important;
    position: relative !important;
    padding-bottom: 15px !important;
    animation: flaxup 1s ease 0s 1 normal forwards;
}

/* Gradiente del violeta al rosa en IES Carpetania */
#bienvenidos mark {
    background: linear-gradient(90deg, #823cea, #f074ed) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Párrafo bajo el título principal */
#bienvenidos-text-1 {
    font-size: 1.2rem !important;
    color:#2d3748 !important;
    max-width: 800px !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
    line-height: 1.8 !important;
}

/* ===== COLUMNAS DE SERVICIOS ===== */
#bienvenidos-tarjetas {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    margin: 40px 0 !important;
    cursor: pointer;
    text-align: center !important;
}

#bienvenidos-tarjetas .wp-block-column {
    background: white !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 1s ease !important;
    animation: flaxup 1s ease 0s 1 normal forwards;
}

#bienvenidos-tarjetas .wp-block-column:hover {
    transform: translateY(-5px) !important;
    box-shadow: 20px 15px 35px rgba(0, 0, 0, 0.5) !important;
    border-color:#abbfda !important;
}

#bienvenidos-tarjetas h2 {
    color:#1a365d !important;
    font-size: 1.5rem !important;
    margin-bottom: 15px !important;
}

#bienvenidos-tarjetas p {
    color:#2d3748 !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}


/*****************************************
* GRID DE NOTICIAS EN LA PÁGINA PRINCIPAL
******************************************/
/* Damos efecto al grupo de noticias */
#noticias {
    animation: flaxup 1s ease 0s 1 normal forwards;
}

/* Creamos el grid en este caso de 3 imágenes,
podrías crear el grid que quisieras dependiendo de del numero de elementos
que le estas pidiendo con el WP_Query */

.blocks-notices {
    display: grid;
    grid-template-areas:
        'Area Area2'
        'Area Area3';
    grid-gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.8) !important;
}

.block-notice {
    width: 100%;
    min-height: 300px;
    overflow: hidden;
    position: relative;
}
.alignwide {
    max-width: unset;
    width: unset;
}

/* Es importante nombrar cada uno de nuestros elementos para luego posicionarlos con el grid */
/* Esta es una sección que deberas aumentar siempre que tu diseño tenga mas de 3 elementos */

.block-notice-0 {
    grid-area: Area;
}
.block-notice-1 {
    grid-area: Area2;
}
.block-notice-2 {
    grid-area: Area3;
}

/* Capa superpuesta para resaltar el texto */

.overlay:before {
    content: "";
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    position: absolute;
}
.block-notice p {
    position: absolute;
    bottom: 0;
    padding: .5rem 1rem;
    color: #ffffff;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 0.5s linear;
    transition: visibility 0s, opacity 0.5s linear;
}

/* La clase overlay me sirve para animar los textos cuando se hace hover en ella */

.overlay:hover > .block-notice-text {
    top: 0;
    -webkit-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}
.overlay:hover > .block-notice-text h2 {
    bottom: 50px;
    -webkit-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}
.overlay:hover > .block-notice-text p {
    visibility: visible;
    opacity: 1;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.overlay:hover:before {
    content: "";
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
}

/* En este caso he querido añadir una tipografía responsive que va de:
30px la mas grande a 20px la mas pequeña para moviles */

.block-notice-text h2 {
    font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300)));
}
.block-notice h2 {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    color: #ffffff;
}
@media (max-width: 921px){
    .blocks-notices {
        grid-template-areas:
            'Area'
            'Area2'
            'Area3';
    }
}
/********************************************
* FIN GRID DE NOTICIAS EN LA PÁGINA PRINCIPAL
********************************************/

/*********************************************************************************
*                        FIN PÁGINA INICIO - ESTILOS GENERALES
*********************************************************************************/
#titulo p{
    max-width: 700px;
}

#tarjetas p {
    color: var(--text-color);
}


/*********************************************************************************
*                        PÁGINAS  - ESTILOS GENERALES
*********************************************************************************/

/* Efecto de aparición y movimiento de arriba a abajo para las páginas */
#titulo {
    animation: flaxdown 1s ease 0s 1 normal forwards;
}

/* Efecto de aparición y movimiento de abajo a arriba para las páginas */
#tarjetas {
    animation: flaxup 1s ease 0s 1 normal forwards;
}


/*********************************************************************************
*                        FIN PÁGINAS  - ESTILOS GENERALES
*********************************************************************************/

/***************************************************
* EFECTO DE APARICIÓN Y MOVIMIENTO DE ABAJO A ARRIBA
***************************************************/
/* Genera un efecto de aparición y movimiento de abajo a arriba */
@keyframes flaxup {
  0% {
    opacity: 0;
    transform: translateY(30px);}
  25% {
    opacity: 0.25;    }
  75% {
    opacity: 0.75;}
  100% {
    opacity: 1;
    transform: translateY(0);}
}
/* Fin del efecto de aparición y movimiento de abajo a arriba */

/***********************************************************
/* EFECTO DE APARICIÓN Y MOVIMIENTO DE ABAJO A ARRIBA
***********************************************************/
@keyframes flaxdown {
  0% {
    opacity: 0;
    transform: translateY(-30px);}
  25% {
    opacity: 0.25;    }
  75% {
    opacity: 0.75;}
  100% {
    opacity: 1;
    transform: translateY(0);}
}

/*************************************************
*                PIÉ DE PÁGINA
*************************************************/
/* Estilo para el pie de página */
#pie-pagina{
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-around;
}

#pie-pagina .wp-block-group{
    min-width: 60px;
    max-width: 300px;
}

#pie-pagina li{
    list-style-type: none;
    margin-left: -40px;
}