:root {
  --font-primary: "encode-sans-expanded-latin", sans-serif;
  --font-secondary: "Modak-Regular", sans-serif;
}




html , body{
  width: 100%;
  overflow-x: visible;

  
}

@media screen and (max-width: 1024px) {
  h1 {
    font-size: 80px;
	
  }
  .hero {
    flex-direction: column;
    text-align: center;
    min-height: auto !important;
  }
  .hero-content {
    padding: 10px;
  }
  .hero-image {
    width: 80%;
  }

  .hero-content h2 {
    font-size: 170px;
    margin: 0;
    line-height: 1.1;
  }
	.entry-content{
	margin-right: 10px !important;
}
	
}





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

  html {
    width: 100%;
    overflow-x: hidden;
  }
  
  body {
    width: 100%;
    overflow-x: hidden;
    
  }


  h1 {
    font-size: 60px;
  }
 
  .button-one, .button-two {
    font-size: 14px;
    padding: 8px 16px;
  }
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: auto !important;
  }
  .hero-content {
    width: 90%;
  }
  .hero img {
    max-width: 100%;
    height: auto;
  }

  .hero-content h2 {
    font-size: 100px;
  }
 /* formulario*/
  .formulario-container {
    flex-direction: column;
    text-align: center;
    max-height: 800px !important;
  }

  .formulario-info {
    width: 100%;
    align-items: center;
  }

  .formulario-campos {
    width: 100%;
  }

  .imagen-formulario {
    margin-bottom: 15px;
  }

/* Imagen */
.imagen-formulario {
  max-width: 100px !important;
  height: auto;
  margin-top: 10px;
}

/* Sección de los campos del formulario */
.formulario-campos {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  padding: auto;

}
/* slick carrusel blog*/
.autoplay .slick-slide {
  width: 100%;
}

.carousel-card {
  max-width: 90%;
  margin: 0 auto;
}

.carousel-image {
  height: 180px;
}

/* sigle post */

.single-post-container {
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}

.single-post-content,
.single-post-sidebar {
  width: 100%;
}

.single-post-sidebar {
  position: static;
}
	

}


@media screen and (max-width: 480px) {
  h1 {
    font-size: 40px;
    line-height: 5%;
  }

  .single-post-container {
    flex-direction: column !important;
    align-items: center;
    margin: auto 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-content {
    padding: 5px;
  }
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    min-height: auto !important;
 
  }
  .hero-content {
    width: 100%;
  }
  .hero img {
    max-width: 100%;
    height: auto;
    margin-top: 90px;
  }

   .hero-content h1{
    line-height: 1;
   }

  .hero-content h2 {
    font-size: 90px !important;
    margin: 0;
    line-height: 1.1;
  }
   /* formulario*/
   .formulario-container {
    flex-direction: column;
    text-align: center;
    width: 90% !important;
    
  }

  .formulario-info {
    width: 100%;
    align-items: center;
  }

  .formulario-campos {
    width: 100%;
  
  }

  .imagen-formulario {
    margin-bottom: 15px;
  }

  .contac-page-title {
    font-size: 60px;
    padding-top: 30px !important;
  }

/* Imagen */
.imagen-formulario {
  max-width: 120px !important;
  height: auto;
  margin-top: 10px;
}

/* Sección de los campos del formulario */
.formulario-campos {
  display: flex ;
  flex-direction: column ;
  width: 100% !important;
  padding: 0 !important;
  
}

.ast-container{
  padding: 0%;
}
.slider-image{
  padding: 20px;
}
.droop-texto{
  padding-top: 0 !important;
}

.droop-texto h2 {
  padding: 20px;
}


.blog-grid {
        grid-template-columns: repeat(1, minmax(320px, 1fr)) !important; 
    }

/**** blog *****/
h1.title-blog-section {
  font-size: 40px !important;
  
	
}
.hero-blog {
  padding: 2rem 1rem;
}


.hero-blog-section {
  font-size: 1.1rem;
  padding: 0 1rem; 
}

.title-info-blog {
  font-size: 0.9rem;
}
.hero-blog-img {
  width: 100%; 
  margin: 0% !important;
  display: block;
 
  gap: 10px;
}

.ast-separate-container #content .ast-container{
  padding: 0px;
}



/***** single post ******/

.single-post-main{
  max-width: 370px;
  align-content: center;


}

.grid-content {
  flex-direction: column;
}

.post-content {
  flex: 0 0 100%;
}

.single-post-sidebar {
  flex: 0 0 100%;
  margin-top: 20px;
  max-height: 600px;
  
}

.title-single-post {
  font-size: 48px !important;
  line-height: 60px; 
}

.post-title {
  font-size: 25px  !important; 
  line-height: 32px !important;
}

.hero-banner-section {
  padding: 10px;
}

.attachment-full {
  max-height: 250px; 
}

.colaborador-info {
  margin-bottom: 20px;
}

.sidebar-section {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
 
}

.colaborador-contacto {
  align-items: center;
  text-align: center;
}

.recommended-banner {
  align-items: center;
}

.recommended-link {
  text-align: center;
}
	



}




/********* estilos generales **********/

.site-main {
  max-width: 100vw;
  overflow-x: hidden;
}


.site-content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0%;
}

.ast-desktop .ast-primary-header-bar.main-header-bar{
  max-height: 150px;
}

body {
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

h1 {
  font-family: var(--font-secondary);
  color: #EA4C29;
  font-size: 120px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 1280px;
  text-align: center;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-primary);
  color: #EA4C29;
}

h3 {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--font-primary);
  color: #EA4C29;
}

h4 {
  font-size: 18px;
  font-family: var(--font-primary);
  color: #EA4C29;
}

h5 {
  font-size: 16px;
  font-family: var(--font-primary);
  color: #EA4C29;
}

h6 {
  font-size: 14px;
  font-family: var(--font-primary);
  color: #EA4C29;
}

p {
  font-size: 17px;
  font-weight: 300;
  font-family: var(--font-primary);
  color: #EA4C29;
}

.small-text {
  font-size: var(--small-text-size);
  font-weight: var(--light);
  font-family: var(--font-primary);
}

a{
  color: #EA4C29;
}

/* Boton primary*/
/*Boton one/two*/

.cta-btn-primary{
  min-width: 160px;
  min-height: 45px;
  margin-top: 20px;
  padding: 10px 20px; 
}
.button-one, .button-two{
  display: inline-block;
  margin-top: 20px; 
  padding: 10px 20px; 
  font-size: 1rem; 
  color: #F5F2E8; 
  background-color: #EA4C29; 
  text-decoration: none; 
  border-radius: 25px; 
  min-width: 160px;
  text-align: center;
}

.button-two{
  
  font-size: 1rem; 
  color: #EA4C29; 
  background-color: #DBDCFC; 
  border-radius: 25px; 
}


/**** home page styles  ****/
/***************************/

/* Estilos para la sección hero */
.hero {
  display: flex;
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  min-height: 100vh; 
  background-color: #F5F2E8; 
  width: 100%; 
  max-width: 1280px; 
  margin: 0 auto;
  padding: 20px; 
  box-sizing: border-box; 
}

/* Estilos para el contenido dentro de .hero */
.hero-content {
  max-width: 1280px; 
  width: 100%; 
  padding: 20px; 
  box-sizing: border-box;
  height: 100%;
}

/* Estilos para el h1 dentro de .hero */
.hero-content h2 {
  margin: 0; /* Elimina el margen predeterminado */
  font-family: var(--font-secondary);
  color: #EA4C29;
  font-size: 120px;
  font-weight: 400;
  width: 100%; /* Ocupa el 100% del ancho disponible */
  text-align: center; /* Centra el texto */
  max-height:80px ;
}

/* Estilos para el h2 dentro de .hero */
.hero-content h1 {
  margin: 10px 0; /* Espaciado entre h1 y h2 */
  font-size: 22px; /* Tamaño de fuente opcional */
  color: #EA4C29; /* Color de texto opcional */
  font-family: var(--font-primary);
}

/* Estilos para el párrafo dentro de .hero */
.hero-content p {
  margin: 10px 0; /* Espaciado entre h2 y p */
  font-size: 1.2rem; /* Tamaño de fuente opcional */
  color: #EA4C29; /* Color de texto opcional */
}

.hero-image {
  width: 50%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen se vea bien */
  margin-top: 0%;
  padding-top: 0%;
}

.hero-cta{
  display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 10px; 
}
.hero-cta p {
  flex-grow: 1;
  margin: 0;
}

.hero-cta a {
  white-space: nowrap; 
}

/* slick fade style**/

/* Estilos para el slider */
.slick-slider {
  width: 100%;
  max-width: 1280px; 
  margin: 0 auto;
}

.slick-slider img {
  width: 100%;
  height: auto;
  border-radius: 34px; 
}

/* Estilos para las flechas de navegación */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #EA4C29;
  color: #F5F2E8;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}


.droop-texto{
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    max-width: 800px; 
    width: 100%; 
    padding-top: 120px;
    box-sizing: border-box; 
    height: 100%;
    margin: auto;
  
}

.droop-texto h2{
  color: #EA4C29;
}

.btn-cta{
  justify-content: center;
  align-items: center;
  margin: auto;
  display: flex;

}

/** cards de categorias*/

.category-intro-h2{
  justify-content: center;
  display: flex;
  gap: 40px;
  text-align: center;
  padding-top: 70px;
  padding-bottom: 40px;
  max-width: 1280px;
}

.category-article{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 20px;
  padding: 20px;
  
}
.card-article{
  width: 300px;
  overflow: hidden;
  margin: 20px auto;
  
}

.card-img{
  border-radius: 12px;
}
.card-text{
  padding: 0px;
}
.title-card{
  margin-top: 10px;
}

/* section cta blog*/

.text-cta-blog{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  padding-top: 70px;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

/* Formulario contact form7 */

.form-contact{
  padding-top: 70px;
}

.formulario-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  max-height: 700px;
  border: 2px solid #EA4C29;
  border-radius: 24px;
  background: #F5F2E8;
}

/* Sección de información (título + imagen) */
.formulario-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 50%; /* Toma el 40% del espacio */
}

/* Título */
.titulo-formulario {
  text-align: left;
  font-size: 24px;
  color: #EA4C29;
  margin-bottom: 10px;
  
}

/* h1 de la pagina de contacto*/
.contac-page-title{
  padding-top: 90px; 
  
}

/* Imagen */
.imagen-formulario {
  max-width: 380px;
  height: auto;
  margin-top: 10px;
}

/* Sección de los campos del formulario */
.formulario-campos {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  width: 60%; /* Toma el 60% del espacio */
  padding-right: 50px;
  
}

/* Estilos para las etiquetas */
.formulario-campos label {
  font-size: 18px;
  color: #EA4C29;
  
}
/* placeholders colores internos*/
#nombre::placeholder{
  color: #EA4C29;
}
#email::placeholder{
  color: #EA4C29;
}
#mensaje::placeholder{
  color: #EA4C29;
}

/* Estilos para los campos de entrada */
.formulario-campos input.form-control,
.formulario-campos textarea.form-control {
  width: 100%;
  padding: 10px;
  border: 2px solid #EA4C29;
  border-radius: 18px;
  box-sizing: border-box;
  background: #F5F2E8;
  color: #EA4C29;
  font-size: 16px;
}

.wpcf7 form.sent .wpcf7-response-output{
  border-color: #EA4C29;
  border-radius: 18px;
  text-align: center;
  max-width: 500px;
}

/* Estilos para el botón */
.boton-enviar {
  width: 100%;
  background: #EA4C29;
  color: #F5F2E8;
  border: none;
  padding: 12px;
  border-radius: 22px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}
.contactanos{
  padding: 20px;
}
.icon-contact{
  max-width: 45px;
  padding: 5;
  margin-left: 10px;
}
.text-icons{
  font-size: 16px;
  gap: 12px;
  margin-left: 10px;
  padding-bottom: 20px;
}



/* boton flecha de scrol */
#ast-scroll-top {
  background-color: #EA4C29;
}

/********* Blog Page ***********/
/*******************************/

/* section hero */
.hero-section{
  align-items: center;
  justify-content: center;
  display: grid;
  align-items: center; 
  text-align: center; 
  min-height: 100vh; 
  background-color: #F5F2E8; 
  width: 100%; 
  max-width: 1280px; 
  margin: 0 auto; 
  padding: 20px; 
}
.hero-blog-img{
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 20px;
  max-width: 1160px;
  gap: 40px;
}
.title-info-blog{
  font-size: 14px;
  max-width: 550px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  margin: auto;
  padding: 50px 0px 50px 0px;

}

h1, .entry-content h1{
  line-height: 0.8;
}



/* Contenedor de la cuadrícula */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr))!important;
    gap: 20px;
    padding: 20px;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 30px;
	
}

@media (max-width: 480px) {
    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; 
    }
}



/* Estilo de las cards */
.blog-card {
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid #EA4C29;
    border-color: #EA4C29;
    transition: transform 0.3s ease;
    text-align: center;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.blog-card-content {
    padding: 15px;
}

.blog-card-title {
    font-size: 1.5rem;
    margin: 0 0 10px;
    text-transform: uppercase;
    padding-top: 40px;
    padding-bottom: 20px;
    font-size: 18px;
    text-align: center;
}

.blog-card-excerpt {
    font-size: 1rem;
    font-weight: 400;
    color: #EA4C29;
    padding: 15px;
}

.blog-card-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: #EA4C29;
    color: #F5F2E8;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.blog-card-button:hover {
    background: #DBDCFC;
    color: #EA4C29;
}



/* Estilos de paginación */
.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    display: inline-block;
    margin: 5px;
    padding: 10px 15px;
    text-decoration: none;
    background: #EA4C29;
    color: #F5F2E8;
    border-radius: 5px;
}

.pagination .current {
    background: #EA4C29;
    padding: 10px 15px;
    color: #F5F2E8;
    border-radius: 5px;
}


/* Carrusel de posts*/

.blog-carousel {
  max-width: 1280px;
  margin: auto;
  padding-bottom: 70px;
  
}

.autoplay {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.carousel-card {
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: #F5F2E8;
  border: 2px solid #EA4C29;
  transition: transform 0.3s ease;
  padding: 30px;
  margin: 20px;
  min-height: 430px;
}

.carousel-card:hover {
  transform: translateY(-5px);
}

.carousel-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.carousel-title {
  font-size: 0.80rem;
  margin-top: 10px;
  color: #EA4C29;
  font-weight: 600;
  text-transform: uppercase;
}
.slick-prev, .slick-next{
  top:80%;
  padding: 8px;
  margin: 14px;
}
.blog-carousel-title{
  text-align: center;
  padding-top: 70px;
  padding-bottom: 30px;
  
}


/***** Single Post ******/
/***** Estilos generales ******/
.estudio-blog-title{
  text-align: start;
  margin: auto;
  padding-top: 50px;
}

span.author-name{
  font-weight: 600;
  font-size: 16px;
}
.single-post-container {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

.attachment-full {
  border-radius: 24px;
  margin-bottom: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 1280px;
  max-height: 450px;

}

/* Contenedor que engloba el contenido y el sidebar */
.grid-content {
  display: flex;
  
}

/* Sección del contenido principal: 70% del ancho */
.post-content {
  flex: 0 0 70%;
}

/* Sidebar: 30% del ancho */
.single-post-sidebar {
  flex: 0 0 30%;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  border: 2px solid #EA4C29;
  border-radius: 18px;
  background-color: #C6EDFD;
  padding: 18px;
  height: fit-content;
}

/* sidebar  */
.author-avatar img {
  border-radius: 50%;
  margin-right: 15px;
  max-width: 120px;
  max-height: 120px;
}
.author-name {
  font-size: 1.2rem;
  font-weight: bold;
}
.colaborador-info {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  border-bottom: 2px solid #EA4C29;
  margin-bottom: 34px;
}
.colaborador-contacto {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  text-align: right; 
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%; 
  font-size: 16px;	
}
.contact-text{
  margin: 0;
  font-size: 16px !important;	
}
.colaborador-foto {
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  margin-bottom: 20px !important;
}

.sidebar-section {
  text-align: left; 
  margin-top: 30px;
  margin-bottom: 35px;
  width: 100%; 
}
.recommended-banner {
  display: flex;
  flex-direction: column;
}
.title-links{
  font-weight: 600;
  padding-bottom: 10px;
}
.recommended-link a {
  text-decoration: none;
  color: #EA4C29;
  font-weight: bold;
}

.recommended-link a:hover {
  color: #111111;
}
.entry-content {
  margin-right: 5px;
}
.wp-block-image img{
	border-radius: 16px;
}


/* Banner hero */
.hero-banner-section {
  display: grid;
  grid-template-columns: 1fr; /* Una columna por defecto */
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}
.post-title {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 800;
  line-height: 50px;
  padding: 0px 20px 40px 20px;
  max-width: 880px;
  text-align: center;
  margin: auto;
}
.title-single-post{
  font-family: var(--font-secondary) !important;
  font-size: 78px;
  text-align: center;
  margin: auto;
  
}

.hero-banner-section .post-featured-image img {
  width: 100%; /* Hacer que la imagen ocupe todo el ancho disponible */
  height: auto;
  object-fit: cover;
  border-radius: 24px; /* Agregar bordes redondeados */
  margin-bottom: 20px;
}


.social-sharing {
  margin: 20px 0;
}

.social-sharing a {
  margin-right: 10px;
  text-decoration: none;
  color: #0073e6;
}

.related-posts-carousel {
  margin: 40px 0;
}

.ast-container {
  min-width: 1280px;
}

.entry-header .entry-title {
  font-family: var(--font-primary);
  font-size: 180px;
  padding-top: 60px;
}

.icon-rrss{
  max-width: 25px;
  max-height: 25px;
  margin-top: 20px;

}

/******** pagina 404 ***********/

#primary-error-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 800px;
  width: 100% !important;
  
}

.cta-error-page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
  
.error-texto{
  display: flex;
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  max-width: 800px; 
  width: 100%; 
  box-sizing: border-box; 
  height: 100%;
  margin: auto;

}

.error-text-404{
  font-size: 18px;
}

.h1-error{
  font-size: 170px;
  
}


/****  Wocoomerce    *****/

.woocommerce-js div.product .product_title {
  font-family: var(--font-primary) !important;
  font-size: 20px;
  text-align: start;
}



.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a{
  color: #EA4C29;
}

.woocommerce-js div.product .woocommerce-tabs .shop_attributes th {
  color: #EA4C29;
}

.woocommerce-breadcrumb{
  margin-left: 36px !important;
  padding-bottom: 30px !important;
  
}
.woocommerce-js .woocommerce-breadcrumb {
  color: #EA4C29 !important;
}

.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
  display: none;
}
.woocommerce-js .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select {
  display: none;
}
.woocommerce-js ul.products li.product .ast-woo-product-category, .woocommerce-page ul.products li.product .ast-woo-product-category{
  font-size: 16px;
  color: #EA4C29;
  font-family: var(--font-primary);
  opacity: 90%;
}

.woocommerce-js ul.products li.product a img, .woocommerce-page ul.products li.product a img {
  border-radius: 16px;
}

.woocommerce-js div.product div.images img{
	border-radius: 16px;
}

.thankyoucustom_wrapper {
	border-radius: 16px;
}
.woocommerce-order-details__title{
	border-radius:  16px !important;
    margin-bottom: 30px !important;
	border-style: none !important;
}

/***** recaptcha ******/

/* Ocultar el widget reCAPTCHA flotante */
div[data-sitekey] .grecaptcha-badge {
    display: none !important;
}