/*
Theme Name: Clumvi
Theme URI: https://clumvi.com.ar
Author: Navega mi Sitio
Author URI: https://navegamisitio.com.ar
Description: Un tema de WordPress personalizado para Clumvi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clumvi
*/

/* Colores principales */
:root {
    --color-primary: #fff;  /* Color oscuro principal para fondos */
    --color-secondary: #827CA6; /* Color secundario para textos y acentos */
    --color-accent: #BF849A;    /* Color para acentos y detalles */
    --color-light: #E5C07B;     /* Amarillo vintage para bordes y acentos */
    --color-pink: #FF7EB9;      /* Rosa suave */
    --color-deep-purple: #7B3FF3; /* Púrpura intenso */
    --color-blue: #6EC4FF;      /* Azul pastel */
    --color-hot-pink: #FF5F6D; /* Rosa fuerte */
    --color-sunset: #FFC371;   /* Amarillo/Naranja suave */
    --color-dark-blue: #2E2E4D; /* Azul oscuro para fondos */
    --color-dark:#0D0D0D;

}

@font-face {
    font-family: 'Altgot2n';
    src: url('./fonts/ALTGOT2N.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Aplicar Playfair Display a los títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Altgot2n', serif;
}

.carousel-caption {
    top:12%;
    text-align: left;
    color: #fff;
    font-size: 1.25em;
}

/* Estilos generales para el carrusel */
.carousel-item img {
    object-fit: cover;
    width: 100%;
    height: auto; /* Altura por defecto para desktop */
}


.carousel-caption h5 {
    font-size: 1.5em !important;
}

.carousel-caption h5 span { 
    display: block;
}

.carousel-caption h5 span.rosa {
    color: var(--color-pink);
}
.carousel-caption h5 span.negro {
    color: var(--color-dark);
}
.carousel-caption h5 span.amarillo {
    color: var(--color-sunset);
}
.carousel-caption h5 span.azul {
    color: var(--color-dark-blue);
}
.carousel-caption h5 span.gris {
    color: var(--color-secondary);
}
.carousel-caption h5 span.azulPetroleo {
    color: var(--color-blue);
}
.carousel-caption h5 span.verde {
    color: var(--color-dark-blue);
}

/* General Styles for Animation */
.carousel-caption {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(50px); /* Comienza desplazado hacia abajo */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animación de entrada */
}

/* Caption activo: Animación */
.carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0); /* Vuelve a la posición normal */
}

/* Animación específica para spans */
.carousel-caption h5 span {
    opacity: 0;
    transform: scale(0.8); /* Inicia más pequeño */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.2s; /* Retraso para animación secuencial */
}

/* Spans activos */
.carousel-item.active .carousel-caption h5 span {
    opacity: 1;
    transform: scale(1); /* Retorna al tamaño normal */
}



/* General Styles */
body {
    background-color: var(--color-primary);
    color: var(--color-light);
    font-family: 'Roboto', sans-serif;

}
main {
    min-height: 90vh; /* Este flex crece para ocupar el espacio disponible */
}

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

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

/* Header Styles */
.site-header {
    background-color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
}

/* Gradientes */
/* Ejemplo de uso en gradientes */
.gradient-header {
    background: linear-gradient(90deg, var(--color-hot-pink), var(--color-sunset));
}

.gradient-card {
    background: linear-gradient(135deg, var(--color-pink), var(--color-blue));
}

.gradient-footer {
    background: linear-gradient(180deg, var(--color-deep-purple), var(--color-dark-blue));
}
/* Qué es Clumvi */
#que-es-clumvi .custom-logo{
width: 100px;
}

#que-es-clumvi p {
    max-width: 760px;
    margin: 0 auto;
}
/* INTEGRANTES */
/* Estilos para la sección de integrantes */
.integrantes .col-lg-2, .integrantes .col-md-4, .integrantes .col-6 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para las imágenes de los logos como botones redondos */
.integrantes img {
    width: 120px; /* Tamaño fijo del botón */
    height: 120px; /* Mantener la proporción */
    border-radius: 20%; /* Hacer las imágenes redondas */
    object-fit: contain; /* Asegurar que el logo se ajuste sin deformarse */
    background-color: #fff; /* Fondo blanco para los logos */
    padding: 10px; /* Espacio interno alrededor del logo */
    border: 2px solid #ddd; /* Opcional: borde para resaltar los botones */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en los botones redondos */
.integrantes img:hover {
    transform: scale(1.05); /* Aumentar el tamaño ligeramente al pasar el ratón */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
}


/* CONTACTO */
/* Estilo personalizado para los inputs y textarea */
.wpcf7-form-control {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark-blue); 
    background-color: transparent; /* Fondo transparente */
    background-clip: padding-box;
    border: 2px solid var(--color-light); /* Bordes amarillos */
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus state for inputs and textarea */
.wpcf7-form-control:focus {
    color: var(--color-dark-blue); /* Texto en blanco */
    background-color: transparent; /* Fondo transparente en focus */
    border-color: var(--color-light); /* Bordes amarillos en focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(229, 192, 123, 0.25); /* Sombra amarilla */
}

/* Estilo para labels */
.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-light); /* Color amarillo vintage para los labels */
}

/* Estilos para el botón de envío */
.wpcf7-submit {
    display: inline-block;
    font-weight: 600;
    color: #000000; /* Texto en negro para contraste */
    background-color: var(--color-light); /* Fondo amarillo vintage */
    border-color: var(--color-light);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Hover state for submit button */
.wpcf7-submit:hover {
    background-color: #d1a657; /* Un amarillo más oscuro en hover */
    border-color: #d1a657;
}
/* ACtividades */ 
article {
    max-width: 760px;
}
.entry-title {
    font-size: 2rem;
    color: #E5C07B; /* Amarillo vintage */
}

.entry-meta {
    color: #999;
    font-size: 0.9rem;
}

.share-buttons .btn {
    margin-right: 10px;
    background-color: #E5C07B;
    border-color: #E5C07B;
    color: #000;
}
/* Imagenes destacadas */
.post-thumbnail {
    margin-bottom: 20px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Añade bordes redondeados si lo deseas */
}

/* INTEGRANTES */

.integrantes-template-default p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1em;

}

.logoIntegrantes {
    width: 150px;
    height:150px;
}

.site-header .navbar-brand {
    color: var(--color-light);
    font-size: 1.5rem;
    font-weight: bold;
}

.site-header .primary-menu .navbar-nav .nav-link {
    color: var(--color-light);
    margin-right: 1rem;
    font-weight: bold;
}

.site-header .primary-menu .navbar-nav .nav-link:hover {
    color: var(--color-accent);
}

.site-header .social-icons a {
    color: var(--color-light);
}

.site-header .social-icons a:hover {
    color: var(--color-accent);
}

/* Carousel Styles */
.carousel-inner img {
    width: 100%;
    height: auto;
}

#galleryCarousel .carousel-inner {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--color-light);
}

#galleryCarousel .carousel-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
/* Estilo personalizado para las cards */
/* Estilo personalizado para las cards con variables del theme */
.card {
    display: flex;
    background-color: transparent; /* Fondo transparente */
    border: 2px solid var(--color-light); /* Borde amarillo */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover */
}

.card-img-top {
    background-color: #fff;
    border-radius: 8px 8px 0 0; /* Bordes superiores redondeados */
    object-fit: cover;
    height: 200px; /* Altura fija para uniformidad */
}

.post-type-archive-integrantes .card-img-top {
    width: 100%; /* Ajustar al 100% del contenedor */
    height: 150px; /* Fijar una altura consistente para los logos */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro sin recortarse */
    background-color: #fff; /* Fondo blanco para los logos con fondo transparente */
    padding: 10px; /* Espacio adicional alrededor del logo */
    border: 1px solid #ddd; /* Borde ligero para dar estructura */
    border-radius: 8px; /* Bordes redondeados opcionales */
}


.card-title {
    font-size: 1.5rem; /* Título más grande */
    font-weight: 700; /* Título en negrita */
    color: var(--color-secondary); /* Color de texto oscuro */
    margin-bottom: 0.5rem;
}

.card-text {
    font-size: 1rem; /* Tamaño de texto estándar */
    color: var(--color-dark); /* Color de texto oscuro */
    margin-bottom: 1rem;
}

.card-body {
    padding: 20px; /* Espaciado interno */
}

.btn-primary {
    align-self: flex-end; /* Mantiene el botón alineado al final del contenido */
    border-color: var(--color-light); /* Color del borde del botón */
    background-color: transparent;
    color: var(--color-light); /* Color de texto */
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-light); /* Oscurecer un poco el color en hover */
    border-color: var(--color-light);
}


/* Section: Novedades */
#novedades .container h2 {
    color: var(--color-light);
}

#novedades .card-title {
    color: var(--color-light);
}

#novedades .card-text {
    color: var(--color-dark);
}

#novedades a.btn {
    background-color: var(--color-light);
    color: var(--color-primary);
    border-radius: 0;
    border: none;
}

#novedades a.btn:hover {
    background-color: var(--color-accent);
}

/* Section: Logos de Integrantes */
.bg-light {
    background-color: var(--color-secondary);
}

.bg-light h2 {
    color: var(--color-light);
}

.bg-light img {
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.bg-light img:hover {
    filter: none;
    transform: scale(1.05);
}

/* Footer Styles */
.site-footer {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

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

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

.site-footer p {
    margin: 0;
}

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

.site-footer .social-icons a:hover {
    color: var(--color-accent);
}

/* Single Integrantes Styles */
.single-integrantes .carousel {
    margin-bottom: 2rem;
}

.single-integrantes .carousel-item img {
    max-height: 500px;
    object-fit: cover;
}

.single-integrantes .table {
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: var(--color-light);
    border: 1px solid var(--color-light);
}

.single-integrantes .table th {
    width: 30%;
    color: var(--color-secondary);
}

.single-integrantes .display-4 {
    font-size: 2.5rem;
    color: var(--color-light);
}


h1 {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
    color: var(--color-light);
}

h2 {
    font-size: 2rem;
    color: var(--color-accent);
}

h3 {
    font-size: 1.75rem;
    color: var(--color-secondary);
}

h4 {
    font-size: 1.5rem;
    color: var(--color-light);
}

blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-style: italic;
    border-left: 5px solid var(--color-secondary);
    padding-left: 1rem;
    margin: 2rem 0;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Navbar Customization */
.navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

/* Container Styles */


.custom-logo {
    width:200px;
    height: auto;
    max-width: 100%;
}

.box {
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-light);
}


/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
    .carousel-item {
        height: 100vh; /* Ocupa todo el alto del viewport */
    }

    
    main.site-content .carousel-item {
        height: auto; /* Ocupa todo el alto del viewport */
    }
    .carousel-caption h5 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .carousel-caption p {
        font-size: 1rem;
    }

    .carousel-caption a {
        font-size: 0.9rem;
        margin-top: 10px;
    }

    .carousel-item img {
        height: 100vh; /* La imagen también ocupa el 100% del alto */
        object-fit: cover; /* Asegura que la imagen no se distorsione */
        object-position: left;
    }

    .carousel-caption {
        position: absolute; /* Asegura que el caption no esté fijo */
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%; /* Centrar verticalmente dentro del slide */
        padding:40px 20px; /* Espaciado interno para mejor legibilidad */
    }

    .carousel-caption h5 {
        font-size: 1.8rem; /* Tamaño adecuado para móviles */
        margin-bottom: 10px;
    }

    .carousel-caption p {
        font-size: 1rem; /* Texto legible */
    }

    .carousel-caption a {
        font-size: 0.9rem;
        margin-top: 10px;
    }
    
    .carousel-caption {
        top: 7%;
        left:7%;
        right:7%;
        height: 100%;
        text-align: center;
        padding: 20px;
    }
    
}