/*
Theme Name: tema consulado
Theme URI: https://wpastra.com/
Template: astra
Author: Ronaldo
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.1718121766
Updated: 2024-06-11 18:02:46

*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&family=Staatliches&family=Montserrat:wght@100&display=swap');

:root{
    /* FUENTES*/
--fuente-principal:'Montserrat', sans-serif;
--fuente-heading:'Staatliches', cursive;

    /* Colores*/
    --primario:#256179;
    --gris-oscuro:#2f2e2e;
    --gris-claro:#EBEBEB;
    --blanco:#FFF;
    --negro:#000;

}

html{
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *:before, *:after{
    box-sizing: inherit;
} 

body{
    font-family: var(--fuente-principal);
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;
}

/** HEADINGS**/

h1,h2,h3,h4{
    font-family: var(--fuente-principal);
    margin: 0 0 5rem 0;
    line-height: 1.2;
}

h1{
    font-size: 4rem;
}
h2{
    font-size: 5rem;
}
h3{
    font-size: 3.6rem;
}

/* estilos.css */

h4 {
    color: white;
    margin: 0;
    font-size: 18px;
  }
  h3 {
    color: white;
    margin: 0;
    font-size: 30px;
  }
  
  p {
    color: var(--negro);
    font-size: 15px;
    text-align: justify;
    text-justify: inter-word;
  }
  .d-block-s
  {
    color: rgb(0, 0, 0);
  }
  a{
    color: white;
  }
  i{
    color: white;
  }

  .btn-social i {
    font-size: 20px; /* Tamaño deseado para los iconos */
    display: flex;
    justify-content: left;
    align-items: center;
    margin-right: 50px; /* Espaciado derecho */
    margin-left: 50px; /* Espaciado izquierdo */
  }

/* Globales*/

a{
    text-decoration: none;
}
ul{
    list-style: none;
    margin:0;
    padding: 0;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

.imagen-destacada{
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.contenedor{
    width: min(90%, 140rem);
    margin: 0 auto;
}

.contenido-centrado{
    width: min(95%, 80rem);
}

hr{
    border: solid;
    color: var(--gris-claro);
}

.contenedor-boton{
    display: flex;
    justify-content: flex-end;
}

.contenedor-content {
    text-align: justify;
  }

/*Boton*/

.form-submit .submit,
.boton{
    background-color: var(--blanco);
    color: var(--negro);
    padding: 1rem 3rem;
    display: block;
    flex: 1;
    width: 100%;
    text-align :center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: .5rem;
    margin: 1rem 0;
    border: none;
}
@media (min-width: 768px)
{
    .boton{
        display: inline-block;
        flex: 0 0 auto;
        width: auto;
    }
}

.boton-primario{
    background-color: var(--primario);
    color: var(--blanco);
}



/* Utilidades*/

.text-center{
    text-align: center;
    font-size: 25px;
    margin-bottom: 0%;
}

.text-primary{
    color:var(--primario);
}

.text-blanco{
    color: var(--blanco);
}

.seccion{
    padding: 0 0;
}

/*Header*/

body.home .header{
    padding-top: 2rem;
    height: auto;
    min-height: 90rem;
    background-size: cover;
    background-position: center center;
}
@media (min-width: 768px)
{
    .body.home .header{
        height: 100vh;
        max-height: 90rem;
    }
}

.tagline{
    color: var(--blanco);
    margin-top: 5rem;
}

@media (min-width: 768px)
{
    .tagline{
        margin-top: 15rem;
    }
}

.tagline p{
    font-size: 2rem;
}

@media (min-width: 992px)
{
    .fixed-top{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: var(--gris-oscuro);
        padding: 1rem 5rem; /*Espacio de arriba abajo y izquierda derecha*/
        z-index: 1000;/*Siempre adelante el menu*/
        transition: background-color 300ms ease-in-out;
    }
    .fixed-top .logo{
        width: 12rem;
    }
}

.header{
    background-color: var(--gris-oscuro);
}

.barra-navegacion{
    display:flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px)
{
    .barra-navegacion{
        flex-direction: row;
        justify-content: space-between;
    }
}

/* .menu-principal {
    display: none;
} */

.hamburguer-menu:hover{
    cursor: pointer;

}
@media ( min-width: 768px){
    .hamburguer-menu{
        display: none;
    }
}
.contenedor-menu{
    opacity: 0;
    max-height: 0;
    transition-delay: 100ms,300ms;
    transition-property: opacity,max-height;
    transition-timing-function: ease-in-out;
    transition-duration: 300ms;
}
@media ( min-width: 768px){
    .contenedor-menu{
        all:unset;
    }
}

.mostrar{
    opacity: 1;
    max-height: 35rem;
    transition-delay: 100ms,300ms;
    transition-property: max-height, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 300ms;
}


@media ( min-width: 768px){
    .menu-principal {
        display: block;
    }
    .menu-principal .menu{
        display: flex;
    }
}


.menu-principal a{
    font-family: var(--fuente-heading);
    display: block;
    text-align: center;
    color: var(--blanco);
    font-size: 2.2rem;
    padding: .5rem 2rem;
}


@media  ( min-width: 768px){
    .menu-principal .current_page_item{
        border-bottom:  3px solid var(--primario);
    }
    .menu-principal a{
        position: relative;
        z-index: 1;
    }
    .menu-principal a::before, 
    .menu-principal a::after {
        position: absolute;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--primario);
        z-index: -1;
        transform: scaleX(0);
        transition: transform .6s;
    }
    .menu-principal a::before {
        top: 0;
        transform-origin: left;
    }
    .menu-principal a::after {
        top:50%;
        transform-origin: right;
    }
    .menu-principal a:hover::before {
        transform: scaleX(1);
    }
    .menu-principal a:hover::after {
        transform: scaleX(1);
    }
}

/** FOOTER  **/
.contenido-footer{
    padding: 4rem 0;
}

@media  ( min-width: 768px){
    .contenido-footer{
        display: flex;
        justify-content: space-between;
    }
}

.footer .menu-principal a{
    color: var(--negro);
    text-align: center;
    font-size: 2.4rem;
    padding: 0 1rem;
}

.footer .menu-principal a::before, 
.footer .menu-principal a::after {
    display: none;
}


.copyrigth{
    text-align: center;
    font-family: var(--fuente-heading);
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
}
@media  ( min-width: 768px){
    .copyrigth{
        font-size: 2.4rem;
        margin:0;
    }
}

/* CARDS */

.listado-grid{
    margin-top:1rem;
    display: grid;
    gap:2rem;
}

@media (min-width:768px)
{
    .listado-grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        width: auto;
        height: 100%;
    }
}

.card{
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    height: auto;
    width: auto;
    position: relative;
    overflow: hidden;
}

.card:hover img{
    transform: scale(1.1);
}

.card img{
    display: block;
    position: relative;
    z-index: -1;
    height: 40rem;
    object-fit: cover;
    transition: transform 300ms ease;
}
.card .contenido{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;    
}

.card .contenido h2{
    color: var(--blanco);
    text-transform: uppercase;
    margin: 0;
    font-size: 2rem;
}
.card .contenido p,
.card .contenido a{
    color: var(--blanco);
    font-size: 6rem;
}

.card .meta{
    font-size: 1.4rem;
    font-weight: 700;
}

.card .meta span{
    color: var(--primario);
}
/* LISTADO NOTICIAS PIE*/
.listado-grid-p{
    margin-top:1rem;
    display: grid;
    gap:1rem;
}
@media (min-width:768px)
{
    .listado-grid-p{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
.card-p{
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    height: auto;
    width: auto;
    position: relative;
    overflow: hidden;
}
.card-p:hover img{
    transform: scale(1.1);
}

.card-p img{
    display: block;
    position: relative;
    z-index: -1;
    height: 40rem;
    object-fit: cover;
   transition: transform 300ms ease;
}

.card-p .contenido-p{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;    
}

.card-p .contenido-p h3{
    color: var(--blanco);
    text-transform: uppercase;
    margin: 0;
    font-size: 1rem;
}


@media (min-width:768px)
{
    .card-p .contenido-p h3{
        color: var(--blanco);
        text-transform: uppercase;
        margin: 0;
        font-size: 1rem;
    }
}



.card-p .contenido-p p,
.card-p .contenido-p a{
    color: var(--blanco);
    font-size: 6rem;
}

/* LISTADO NOTICIAS VER TODAS LAS NOTICIAS*/
.listado-grid-v{
    margin-top:1rem;
    display: grid;
    gap:2rem;
}
@media (min-width:768px)
{
    .listado-grid-v{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
.card-v{
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    height: auto;
    width: auto;
    position: relative;
    overflow: hidden;
}
.card-v:hover img{
    transform: scale(1.1);
}

.card-v img{
    display: block;
    position: relative;
    z-index: -1;
    height: 100rem;
    object-fit: cover;
    transition: transform 300ms ease;
}

.card-v .contenido-v{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;    
}

.card-v .contenido-v h3{
    color: var(--blanco);
    text-transform: uppercase;
    margin: 0;
    font-size: 1.3rem;
}
@media (min-width:768px)
{
    .card-v .contenido-v h3{
        color: var(--blanco);
        text-transform: uppercase;
        margin: 0;
        font-size: 1.2rem;
    }   
}
.card-v .contenido-v p,
.card-v .contenido-v a{
    color: var(--blanco);
    font-size: 8rem;
}




/* Categorias en cards*/
.card .post-categories{
    position: absolute;
    top :2rem;
    left: 2rem;
    display: flex;
    gap: 2rem;
}
.card .post-categories li{
    background-color: var(--primario);
    padding: .5rem 1rem;
    border-radius: .5rem;
}
.card .post-categories a{
    color: var(--blanco);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.6rem;
}

.card-n .contenido .boton{
    color:var(--negro);
    font-size: 1rem;
    margin-top: 0;
}

/*Sidebar*/

@media (min-width:768px)
{
    .con-sidebar{
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
    }
}

.informacion-clase{
    font-weight: 700;
    font-size: 2.2rem;
    text-align: center;
}

/* Listado de clases sidebar*/

.clases-sidebar{
 
}

.clases-sidebar li{
    border-bottom:1px solid var(--gris-claro);
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap:2rem;
}
.clases-sidebar li:last-of-type {
    border: none;
}

.clases-sidebar .contenido-clase h3{
    margin: 0;
    font-size: 2.2rem;

}

.clases-sidebar .contenido-clase a{
    color: var(--primario);
}

.clases-sidebar .contenido-clase p{
    font-size: 1.2rem;
}
/* Galeria de imagenes*/

.galeria-imagenes{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 300px);
    gap:2rem;
}

@media (min-width:768px)
{
    .galeria-imagenes{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }
}
.galeria-imagenes li{

}
.galeria-imagenes li:nth-child(4){
    grid-row: 2 /4;
    grid-column: 2 /3;
    
}
.galeria-imagenes li:nth-child(6){
    grid-row: 4 /6;
    grid-column: 1 /2;
    
}
@media (min-width:768px)
{
    .galeria-imagenes li:nth-child(4){
        grid-column: 4 /5;
        grid-row: 1 /3;
    }
    .galeria-imagenes li:nth-child(6){
        grid-column: 2 /3;
        grid-row: 2 /4;
    }
}
.galeria-imagenes li:nth-child(4) img,
.galeria-imagenes li:nth-child(6) img{
    height: 620px;
}
.galeria-imagenes img{
    height: 300px;
    object-fit: cover;
}

/* Informcion Meta*/

.meta-info {
    background-color: var(--gris-claro);
    padding: 2rem;
}

@media (min-width:992px){
    .meta-info{
        display: flex;
        justify-content: space-between;
    }
}

.meta-info p,
.meta-info a{
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--negro);
}

.meta-info span{
    color:var(--primario);
}

.meta-info .categoria{
    display: flex;
    align-items: center;
    gap: .5rem;
}
.meta-info .post-categories{
    display: flex;
    gap: .5rem;
}

/* Formulario de Contacto*/

.wpcf7-form label{
    font-weight: 700; /*negrita*/
}

.wpcf7-form .wpcf7-form-control{
    width: 100%; /*Tamaño completo */ 
    border:1px solid var(--gris-claro);
}
.wpcf7-form .wpcf7-submit{
    background-color: var(--primario);
    font-size: 2rem;
    font-family:var(--fuente-heading);
    padding: 1.2rem;
    color: var(--blanco);
}

.wpcf7-form .wpcf7-submit{
    cursor: pointer;
}
.wpcf7-form .wpcf7-not-valid-tip{
    background-color: rgb(169, 0, 0);
    color:var(--blanco);
    padding: .5rem;
    margin: .5rem 0;
    display: block;
    font-size: 1.4rem;
}

.wpcf7-form .ajax-loader{
    display:  block;
    margin: 2rem auto 0 auto;
}

.wpcf7-form .wpcf7-spinner{
    display: block;
    margin: 2rem auto 0 auto;
    background-color: var(--primario);
    opacity: 1;
}


.mapa
{
    margin-bottom: 5rem; /*margen abajo*/
}

/*Pagina Principal*/
.bienvenida p {
    max-width: 80rem;
    margin: 0 auto;
}
.areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

.area {
    display: flex;
    justify-content: center;
    align-items: center;
}


.area img {
    max-height: 10rem;
    object-fit: contain;
}

@media (min-width: 768px) {
    .areas {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* Mayor tamaño para pantallas más grandes */
    }
}

.area p {
    position: center;
    color: var(--blanco);
    z-index: 100;
    font-weight: 900;
}

@media (min-width: 768px) {
    .area p {
        opacity: 0;
        transition: opacity .5s ease-out;
    }
    
    .area:hover p {
        opacity: 1;
    }
}

.seccion_a{
    padding: 0 1rem;
    background-color: var(--gris-claro);
}

/*INSTRUCTORES*/

.sin-espaciado {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sin-espaciado .instructor {
    display: inline-block;
    margin-right: 0;
}

.sin-espaciado .instructor:last-child {
    margin-right: 0;
}

@media (min-width: 992px){
    .instructor{
        position: static;
    }
}

.instructor .contenido{
    padding: 2rem;
}



.instructor img{
    height: 40rem;
    object-fit: cover; /*PARA Q LA IMAGEN SE AJUSTE A DIFERENTES PANTALLAS*/
}


@media (min-width: 992px){
    .instructor .contenido{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .6));
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--blanco);
        opacity: 0;
        transition: opacity .5s ease-in-out;
        transition-delay: .2s ;
    }
    .instructor:hover .contenido{
        opacity: 1;
    }
}


.enlace a{
    color: #000;
    font-size: 15px;
    line-height: 1;
    margin: 0;   
}
.instructor h3{
    margin-bottom: 2rem;
    color: var(--primario);
}

.especialidad{
    margin-top: 2rem;
}

.instructor:last-of-type{
    border:none;
}


.instructor .etiqueta{
    background-color: var(--primario);
    color: var(--blanco);
    text-transform: uppercase; /*CONVIERTE LA LETRA EN MAYUSCULA*/
    font-family: var(--fuente-heading);
    margin-right: 2rem;
    font-size: 2.2rem;
    border-radius: .5rem;
    padding: .5rem 2rem;
}
.instructor .etiqueta:last-of-type
{
    margin-right: 0;
}

/*Testimoniales*/

.testimoniales{
    background: linear-gradient(
        rgb(0 0 0 / .75),
        rgb(0 0 0 / .75)
    ), url(img/testimonial-bg.jpg);
    background-size: cover;
    background-position: center center;
    padding: 12rem;
}

.contenedor-testimoniales{
    width: min(95%, 80rem);
    margin: 0 auto;
}
.testimonial{
    color: var(--blanco);
}

.testimonial blockquote{
    position: relative;
    padding-left: 12rem;
}

.testimonial blockquote::before{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-image: url(img/quote.svg);
    background-repeat: no-repeat;
    width: 10rem;
    height: 9rem;
}

.testimonial-footer{
    display: flex;
    justify-content:center;
    gap: 2rem;
    align-items: center;
}

@media (min-width:768px){
    .testimonial-footer{
        
        justify-content: flex-end;
    }
}
.testimonial-footer img{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;

}
.testimonial-footer p{
    font-weight: 700;
    color:var(--primario);
}
/* ANIMACION LETRA*/
.ml2 {
    font-weight: 900;
    font-size: 3.5em;
  }
  
  .ml2 .letter {
    display: inline-block;
    line-height: 1em;
  }

  /*Comentarios*/

  .comentarios
  {
    width: min(95%, 60rem);
    margin: 5rem auto 0 auto;
  }

.comment-reply-title{
    color:var(--primario);
    text-align: center;
}

.logged-in-as a{
    color: var(--primario);
}

.comment-form-comment label{
    font-weight: 700;
    margin-bottom: 2rem;
    display: block;
}
.comment-form-comment textarea,
.comentarios input[type="text"]{
    border: 1px solid var(--gris-claro);
    width: 100%;
}
.form-submit .submit{
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1rem;
}

.comentarios input[type="text"]{
    
    margin: .5rem 0;
}

h3.comentarios{
    margin: 3rem 0;
}

.lista-comentarios .comment{
    background-color: var(--gris-claro);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: .5rem;
}
.lista-comentarios a{
    color: var(--primario);
}
.lista-comentarios cite{
    color: var(--primario);
    font-weight: 700;
    font-size: 2rem;
}

.lista-comentarios .childrean .comment{
    background-color: var(--blanco);
    margin: 2rem 0;
}

/*Paginacion*/
.pagination .screen-reader-text{
    visibility: hidden;
}

.nav-links{
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.nav-links a{
    font-size: 1.4rem;
    color: var(--primario);
    font-weight: 700;
    padding: .5rem;
}

.nav-links .current{
    font-size: 1.4rem;
    padding: .5rem;
}

/*Listado Imagen*/

.enlace-servicio-imagen {
    width: auto; /* Ajusta el ancho de la imagen según tus necesidades */
    height: auto;
    transition: transform 0.3s;
}
.enlace-servicio-imagen:hover {
transform: scale(1.2);
}

/*tabla*/

table{
    font-size: 12px;
}

.list-group
{
    font-size: 12px;
}

/* CARD DE PREGUNTAS*/
.card-pr {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 0 auto;
  }
  
  .card-pr-body {
    font-size: 14px;
    color: #333;
    padding-top: .2;
  }
  .card-pr-header {
    border-bottom: 1px solid #ccc; /* Agrega una línea separadora en la parte inferior del encabezado */
    padding-bottom: .2; /* Opcional: Añade un espacio entre la línea separadora y el contenido del encabezado */
}

.ic{
    color: #8C8C8C;
  }

  ul {
    list-style: disc;
  } 

  li{
    font-size: 15px;
  }
  .nav-pills .nav-link {
    background-color: #ffffff; /* Cambia el color de fondo */
    color: #333; /* Cambia el color del texto */
  }
  .nav-pills .nav-link.active {
    background-color: #4D1717; /* Cambia el color de fondo del enlace activo */
    color: #fff; /* Cambia el color del texto del enlace activo */
  } 

  /* CARDS */

.listado-grid-n{
    margin-top:1rem;
    display: grid;
    gap:2rem;
}

@media (min-width:768px)
{
    .listado-grid-n{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        width: auto;
        height: 100%;
    }
}

.card-n{
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    height: auto;
    width: auto;
    position: relative;
    overflow: hidden;
}

.card-n:hover img{
    transform: scale(1.1);
}

.card-n img{
    display: block;
    position: relative;
    z-index: -1;
    height: 40rem;
    object-fit: cover;
   transition: transform 300ms ease;
}
.card-n .contenido{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;    
}

.card-n .contenido h2{
    color: var(--blanco);
    text-transform: uppercase;
    margin: 0;
    font-size: 1.2rem;
    
}
@media (min-width:768px)
{
    .card-n .contenido h2{
        color: var(--blanco);
        text-transform: uppercase;
        margin: 0;
        font-size: 2rem;
        margin-bottom: -40px;
    }   
}


.card-n .contenido p,
.card-n .contenido a{
    color: var(--blanco);
    font-size: 6rem;
}

.card-n .meta{
    font-size: 1.4rem;
    font-weight: 700;
}

.card-n .meta span{
    color: var(--primario);
}
.card-n .contenido .boton{
    color:var(--negro);
    font-size: 1rem;
    
}
.image-container img {
    height: 550px;
    width: 1300px;
    object-fit: cover;
}