/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Pablo Espinosa Ochoa
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.1708286278
Updated: 2024-02-18 19:57:58

*/

/* 
Bloque de configuraciones para TABS Licenciaturas. 
*/
 

body {
      margin: 0;
      padding: 0;
    }

.nav-tabs-container {
      max-width: 50%; /* Ancho máximo deseado para el contenedor de las pestañas */
      margin: 0 auto; /* Centra el contenedor horizontalmente */
    }


         .nav-tabs {
      border-bottom: 4px solid #602366; /* Línea de separación entre las pestañas y el contenido */
     
    }

    [id^="tab"]  h3 {
        font-family: 'Agdasima', sans-serif;
            font-size: 25px;
            font-weight: bold;
            color: #602366;
    }

        .nav-tabs .nav-link {
            font-family: 'Agdasima', sans-serif;
            font-size: 25px;
            font-weight: bold;
            letter-spacing: 1px;
            width: 280px; /* Ancho de las pestañas */
      height: 50px; /* Altura de las pestañas */
     /* background-color: white; /* Fondo blanco para pestañas inactivas */
      color: #602366; /* Letra negra para pestañas inactivas */
      display: flex; /* Utilizar flexbox */
      justify-content: center; /* Centrar horizontalmente */
      align-items: center; /* Centrar verticalmente */
      border-radius: 15px 15px 0 0; /* Bordes redondeados en la parte superior */
      border: 0px solid transparent;
      margin-bottom: -2px; /* Evitar el espacio entre la pestaña activa y el contenido */
        }
    
        .nav-tabs .nav-link.active {
          background-color: #602366; /* Fondo azul para pestañas activas */
          color: white; /* Letra blanca para pestañas activas */
        }
        .tab-content {
      /*border: 1px solid #dee2e6; /* Borde alrededor del contenido del tab */
      border-top: none; /* Eliminar el borde superior */
      padding-top: 30px; /* Espaciado interno */
    }

    .contenedor {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 20px;
    }

    .cuadro {
      text-align: center;
      flex: 1 1 calc(25% - 20px); /* Permite que los cuadros sean flexibles pero tengan un ancho base de 200px */
      margin: 10px;
      max-width: calc(25% - 20px); /* Asegura que los cuadros no se expandan más allá de 200px */
    }

    .cuadro img {
      width: 100%; /* Ajusta el ancho de la imagen al contenedor */
      height: auto;
      object-fit: cover;
      border: 2px solid #ccc;
      border-radius: 0px;
    }

    .descripcion {
      font-family: 'Agdasima', sans-serif;
      font-size: 20px;
      font-weight: bold;
      color:white;
      display: flex; /* Usamos flexbox para centrar el texto */
      justify-content: center; /* Centra el texto horizontalmente */
      align-items: center; /* Centra el texto verticalmente */
      margin-top: 0px;
      padding: 0px;
      background-color: #06924d;
      border-radius: 0px;
      border: 1px solid #ccc;
      width: 100%; /*       Asegura que la descripción tenga el mismo ancho que la imagen */
      height: 120px;
      box-sizing: border-box;

    }
    
    .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 0, 0.8);
            opacity: 0;
            transition: opacity 0.3s;
        }

.cuadro:hover {
  transition: 0.5s;
  transform: scale(1.1);
  font-family: 'Agdasima', sans-serif;
      
}

.cuadro:hover .descripcion {

            background-color: #CC9902;
 
}

.cuadro:hover {
            opacity: 1;
        }


    #enlacesmaterias {
        text-decoration:none;
    }


    @media (max-width: 1200px) {
      .cuadro {
        flex: 1 1 calc(33.333% - 20px); /* Tres cuadros por fila */
        max-width: calc(33.333% - 20px);
      }
    }

    @media (max-width: 800px) {
      .cuadro {
        flex: 1 1 calc(50% - 20px); /* Dos cuadros por fila */
        max-width: calc(50% - 20px);
      }
    }

    @media (max-width: 500px) {
      .cuadro {
        flex: 1 1 100%; /* Un cuadro por fila */
        max-width: 100%;
      }
    }