/*!
Theme Name: IESTP
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: iestp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

IESTP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# NAV HEADER
	- Typography
	- Elements
	- Links
	- Forms
# CAROUSEL
	- Navigation
	- Posts and pages
	- Comments
--------------------------------------------------------------*/


/* === Global Styles === */
body {
    overflow-x: hidden; /* Evita desplazamiento horizontal */
    font-size: 1rem;
    line-height: 1.5;
}

/* Logo */
.custom-logo {
    width: auto;
    height: 5rem;
}

.other-logo{
    height: 5rem;
    width: auto;
    padding: 1rem;
}

.link-span{
    background-color: var(--bs-iestp-color);
    padding: .5rem;
}
/* === Secciones === */

#titular {
    background-color: var(--bs-iestp-secondary);
}

/* Evita desbordamientos en títulos */
h2, h5 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Texto resaltado */
.text-resaltado {
    background-color: var(--bs-white);
}

/* === Enlaces === */
.link-iestp {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.link-iestp::before {
    content: "";
    display: block;
    width: 0;
    height: 0.15rem;
    background: var(--bs-iestp-secondary);
    transition: width 0.3s;
    position: absolute;
    bottom: -0.1rem;
    left: 0;
}

.link-iestp:hover::before {
    width: 100%;
}

/* === Navbar === */
.navbar-nav > li::after {
    content: "";
    display: block;
    width: 0;
    height: 0.2rem;
    background: var(--bs-iestp-secondary);
    transition: width 0.3s;
    margin-top: -0.5rem;
    margin-left: 0.5rem;
}

.navbar-nav > li:hover::after {
    width: 50%;
}

/* === Social Menu === */
.social-menu {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.social-menu ul, 
.social-menu li {
    display: inline-flex;
    margin: 0;
}

/* === Branding === */
.title-site {
    font-family: "Literata", serif;
    font-weight: 700;
    color: var(--bs-body);
    text-decoration: none;
}

.brand-site {
    padding: 0.5rem;
}

/* === Responsividad === */
@media (max-width: 576px) {
    .title-site {
        font-size: 1rem;
        text-align: center;
    }
}

/* === Carousel === */
#carousel-principal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.026));
    mix-blend-mode:overlay;
    z-index: 1;
}

.carousel-text {
    position: absolute;
    top: 10%;
    left: 15%;
    right: 15%;
    padding: 1.25rem 0;
    color: var(--bs-white);
    text-align: start;
    z-index: 99;
}

/* === Tarjetas === */
.card-wrap {
    background-color: var(--bs-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-wrap-top {
    background-size: cover;
    background-position: center;
    height: var(--min-h, 200px);
}

.card-wrap:hover,
.card-wrap:focus {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.132);
}

/* Tamaños dinámicos */
.card-wrap-top[data-size="large"] { --min-h: 40vh; }
.card-wrap-top[data-size="medium"] { --min-h: 30vh; }
.card-wrap-top[data-size="small"] { --min-h: 20vh; }
.card-wrap-top[data-size="xsmall"] { --min-h: 10vh; }

/* Contenido de la tarjeta */
.card-wrap-body {
    padding: var(--pad, 1.5rem);
}

.card-wrap-body[data-size="large"] { 
    --pad: 2rem;
    background-color: var(--bs-iestp-color);
    color: var(--bs-white);
}

.card-wrap-body[data-size="medium"] { --pad: 1rem; }
.card-wrap-body[data-size="small"] { --pad: 0.7rem; }

/* Footer de la tarjeta */
.card-wrap-bottom {
    padding: var(--pad, .25rem 1.5rem);
    background-color: var(--bs-iestp-color);
}

.card-category{

    background-color: var(--bs-iestp-color);
    padding: .5rem;
}
/* === Animaciones === */
.featured-card, .item {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.featured-card.fade-out { opacity: 0; transform: translateY(-10px); }
.featured-card.fade-in { opacity: 1; transform: translateY(0); }

.item.fade-out { opacity: 0; transform: translateX(10px); }
.item.fade-in { opacity: 1; transform: translateX(0); }

/* === Mapas === */
.map-container {
    position: relative;
    width: 100%;
    height: 450px;
    box-sizing: border-box;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.card-title{
    padding: 1rem 0;
}

.card-custom {
    position: absolute;
    top: 120px;
    left: 10px;
    width: auto;
    max-height: 25%;
    background-color: var(--bs-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    z-index: 1;
}

@media (max-width: 768px) {
    .card-custom {
        top: 10px;
        width: auto;
        max-width: 95%;
        bottom: -150px;
    }
}


/* === Contacto === */
#contact{
    background-color: var(--bs-iestp-secondary);
}

#contact .container {
    position: relative;
}

#contact .container>.row::after {
    content: '';
    position: absolute;
    bottom: -4vh; 
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    border-width: 2rem 2rem 0;
    border-style: solid;
    border-color: var(--bs-iestp-secondary) transparent transparent;
    z-index: 1;
}

.title-item {
    padding: 0 1rem;
    display: inline-block;
    color: var(--bs-blue);
}

@media (max-width: 768px) {
    .title-item {
        display: block;
    }
}

/* === Efecto hover en People === */
#people {
    position: relative;
    min-height:80vh;
}

#people ::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.205), rgba(255, 255, 255, 0));
    z-index: -1;
}

@media (min-width: 768px) {
    #people:hover ::before {
        background: none;
    }
}

@media (max-width: 767px) {
    #people ::before{
        z-index: -1;
    }

    #people {
        min-height:50vh;
    }

    #people .card-bottom{
        z-index: 1;
    }
}

/* === Noticias === */
.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Estilos específicos para la primera noticia destacada */
.card-wrap.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.post-icons {
    color: var(--bs-white);
    padding-left: .2rem;
}

/* Diseño responsivo */
@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 767px) {
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100%;
    background-color: var(--bs-white);
    z-index: 0;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 767.98px) {
    #custom-slider .slider-container {
        height: 80vh;
        /* Reducir la altura en móviles */
    }

    #custom-slider .carousel-item {
        height: auto !important;
        /* Ajustar la altura automáticamente */
    }

    #custom-slider .row.align-items-center,
    #custom-slider .row.align-items-end {
        height: auto !important;
        /* Ajustar la altura automáticamente */
    }

    #custom-slider .col-12 {
        padding: 1rem !important;
        /* Reducir el padding en móviles */
    }

    #custom-slider p {
        font-size: 0.9rem;
        /* Reducir el tamaño del texto en móviles */
    }

    #custom-slider .btn-iestp-complementary {
        width: 40px;
        /* Ancho fijo para los botones */
        height: 40px;
        /* Altura fija para los botones */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #custom-slider .carousel-control-icon {
        font-size: 1rem;
        /* Reducir el tamaño de los íconos */
    }
}

#call-to-action {
    position: relative;
}

.custom-image {
    position: absolute;
    bottom: 85%; /* Ajuste para que sobresalga */
    left: 38%;
    max-width: 25%;
}