/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. 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 so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # 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 beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ===========================
   General Styles
=========================== */
body {
  margin: 0;
  padding: 0;
  background-color: #000 !important;
}
/*
 #primary {
  margin: 0 !important;
  padding: 0;
}

.ast-separate-container.ast-right-sidebar #primary {
  margin: 0;
  padding-top: 0;
} */

.entry-header {
  display: none;
}

.site-below-footer-wrap {
  background-color: #000 !important;
  color: white !important;
}

.ast-footer-copyright a,
p {
  color: white !important;
}
.ast-footer-copyright a:hover{
  color: #E94E1B !important;
}

/* ===========================
   Header
=========================== */
.site-header {
  background-color: #000 !important;
  color: white !important;
}

.site-header a {
  color: white !important;
}

.site-header a:hover {
  color: #ffc600 !important;
}

.site-branding img {
  height: 90px;
  margin: 10px;
  max-width: 100%;
  object-fit: contain;
}

/* HEADER STRUCTURE */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50px;
}

.header-left {
  display: flex;
  align-items: center;
}

.menu-toggle {
  cursor: pointer;
  margin-right: 15px;
  border: none;
  color: #fff !important;
}
.menu-toggle .dashicons {
  color: white !important;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* ===========================
   Search Form
=========================== */
/* Make search bar with icon inside */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
}

.search-box input[type="search"] {
  width: 100%;
  padding: 8px 35px 8px 10px;
  background: black;
  border: 1px solid white;
  color: white;
  border-radius: 3px;
  font-size: 14px;
}

.search-box button {
  position: absolute;
  right: 5px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   Side Menu (Off-Canvas)
=========================== */
.side-menu {
  position: fixed;
  top: 0;
  left: -450px;
  width: 450px;
  height: 100%;
  background: #000;
  color: white !important;
  padding-top: 60px;
  transition: left 0.3s ease;
  z-index: 9999;
}

.side-menu.active {
  left: 0;
}

.side-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu .menu li {
  padding: 15px;
}

.side-menu .menu li a {
  color: white;
  text-decoration: none;
  display: block;
  font-size: 24px;
}

.custom-post-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
  margin-bottom: 30px;
}

.custom-post-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.2s ease;
  position: relative;
}
.custom-post-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Hover effect */
.custom-post-card:hover {
  transform: translateY(-4px);
}

/* Post Image */
.custom-post-image {
  position: relative;
}

.custom-post-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Gradient overlay */
.custom-post-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* Post Title */
.custom-post-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  line-height: 1.3;
  z-index: 2;
  letter-spacing: -1px;
}

.custom-post-title a {
  text-decoration: none;
  color: inherit;
}

.custom-post-title a:hover {
  color: #E94E1B;
}

body#primary {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
}

.content-area {
  width: 100%;
}

#secondary {
  width: 100%;
}

.pagination {
  text-align: center;
  margin: 40px 0;
}

.pagination ul {
  list-style: none;
  padding: 0;
  display: inline-flex;
  gap: 8px;
}

.pagination li {
  display: inline;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 12px;
  background-color: #111;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.pagination a:hover {
  background-color: #333;
}

.pagination .current {
  background-color: #ffc600;
}
/* ===========================
   Sidebar and Archive Titles
=========================== */
.ast-separate-container .ast-archive-description {
  margin: 0;
  padding: 0 !important;
}

.ast-archive-title {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding: 0;
  color: #fff;
  font-weight: 800 !important;
}

body.single-post #primary {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

body.single-post .content-area {
  width: 100%;
  margin: 0;
}

.single-post-wrapper {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px !important;
  background: white;
  display: flex;
  gap: 40px;
  padding: 40px 20px;
  box-sizing: border-box;
}

.post-main-content {
  width: 70%;
}

.post-sidebar {
  width: 30%;
}

body.single-post #secondary {
  width: 100%;
  display: block;
  padding: 30px 20px;
  margin: 0 auto;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

body.single-post #secondary * {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ===========================
   Home Page
=========================== */
h4.uagb-heading-text {
  transform: rotate(-5deg); /* o cualquier ángulo */
  display: inline-block; /* necesario si es inline */
}
.btn-programacion{
  width: 200px !important;
}
.btn-sumate{
  width: 150px !important;
}


.uagb-block-da9f6d2b.uagb-taxonomy__outer-wrap.uagb-layout-grid{
  grid-template-columns: repeat(7, 1fr) !important;
}
/* ===========================
   Responsive Styles
=========================== */
@media (max-width: 993px) {
  .ast-right-sidebar #secondary {
      padding-left: 2px;
  }
	/* HOME: Post Grid and Categories */
	.uagb-block-da9f6d2b.uagb-taxonomy__outer-wrap.uagb-layout-grid{
  grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 993px) {
  .ast-right-sidebar #secondary {
      padding-left: 10px;
  }
}
@media (max-width: 768px) {
  /* Header */
  .header-inner {
    flex-direction: column;
    align-items: flex-end; /* Align all children to the right */
    padding: 10px 20px;
  }

  .header-left {
    width: 100%;
    justify-content: space-between;
  }

  .header-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .search-box {
    width: 100%;
    max-width: 300px; /* control width on mobile */
  }

  .site-branding img {
    height: 40px;
    margin: 10px 0 10px 10px;
  }

  /* Side Menu */
  .side-menu {
    left: -350px;
    width: 350px;
  }
/* HOME: Post Grid and Categories */
	.uagb-block-da9f6d2b.uagb-taxonomy__outer-wrap.uagb-layout-grid{
  grid-template-columns: repeat(2, 1fr) !important;
}
  /* Post Grid and Categories responsive*/
  .custom-category-nav {
    gap: 10px;
    text-align: center;
    padding: 10px 0 0 0 !important;
	margin-bottom: 10 !important;
    align-items: center;
  }
	.custom-category-nav a{
    	font-size: 0.75rem !important;		
	}
	.single-post-wrapper{
		padding: 0;
	}
  .custom-post-card {
    padding: 8px;
  }

  .custom-post-title {
    font-size: 0.95rem;
  }

  .custom-post-grid {
    grid-template-columns: 1fr !important;
    padding: 0 10px;
  }

  /* Archive Description */
  .ast-separate-container .ast-archive-description {
    padding: 0 0 10px 0;
    margin: 0;
  }

  /* Sidebar adjustments */
  .ast-right-sidebar #secondary {
    margin: 0;
    padding: 0 !important;
  }

  .category-layout-flex {
    flex-direction: column;
  }

  #primary {
    width: 100% !important;
  }

  #secondary {
    width: 100% !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Archive and Single Post Sidebar */
  body.archive.category #secondary,
  body.single-post #secondary {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }
    /* Search results */
  body.single-post-wrapper{
    padding: 0;
  }

  /* Responsive layout for search results */
  body.search .single-post-layout {
    flex-direction: column;
    gap: 20px;
  }

  body.search .post-main-content,
  body.search .post-sidebar {
    width: 100% !important;
  }
	/* ===========================
   Single post responsive
=========================== */
	.custom-single-post-container {
      flex-direction: column;
    }

    .post-main-content,
    .post-sidebar {
      width: 100% !important;
    }

    .custom-single-post-container {
      gap: 20px;
      padding: 20px 10px;
    }
}

/* ===========================
   Spectra Post Grid Styling on Homepage
=========================== */
.home .uagb-post__inner-wrap {
  background: white;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  position: relative;
}

.home .uagb-post__inner-wrap:hover {
  transform: translateY(-4px);
}

.home .uagb-post__image {
  position: relative;
}

.home .uagb-post__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Gradient overlay for Spectra image */
.home .uagb-post__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* Post Title over the image */
.home .uagb-post__title {
  position: absolute;
  bottom: 30px;
  left: 16px;
  right: 16px;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  line-height: 1.3;
  z-index: 2;
  margin: 0;
}

.home .uagb-post__title a {
  text-decoration: none;
  color: inherit;
}

.home .uagb-post__title a:hover {
  color: #E94E1B;
}
.uagb-block-64d731fd .uagb-post-grid-byline{
  padding: 0;
}
.uagb-block-64d731fd .uagb-post__image{
  padding-bottom: 0;
}


/* ===========================
   Single Post Layout
=========================== */
body.single-post #single-primary {
  display: flex;
  justify-content: center;
  background-color: #000;
}

.single-post-wrapper {
  max-width: 1300px;
  width: 100%;
  background: white;
}

.single-post-layout {
  display: flex;
  gap: 40px;
  padding: 40px 20px;
}

.post-main-content {
  width: 70%;
}

.post-sidebar {
  width: 30%;
}

/* Post Meta Styles */
.single-post-layout .post-categories,
.single-post-layout .acf-entrevistado,
.single-post-layout .acf-autor {
  padding-top: 10px;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #111;
}
.single-post-layout .post-categories,
.single-post-layout .acf-entrevistado{
  font-weight: 700;
}
.single-post-layout .acf-autor{
  padding-bottom: 20px;
  font-weight: 700;
  border-bottom: 2px solid black;
}
.single-post-layout .post-categories a{
  color: #111;
}
.single-post-layout .post-categories a:hover{
  color: #E94E1B;
}
/* Resumen block */
.single-post-layout .acf-resumen {
  margin-top: 10px;
  font-size: 1rem;
  font-family: 'Playfair Display';
  font-weight: 600;
}

/* Post Title */
.single-post-layout .post-title {
  padding-top: 10px;
}

.single-post-layout .post-title h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 600;
  color: #111;
}

.single-post-layout .post-content {
  font-size: 1rem;
  line-height: 1.5;
  font-family: 'Georgia Regular', sans-serif;
  padding-top: 30px;
}

.single-post-layout .post-content p{
  color: #111 !important;
}
.single-post-layout .post-content a{
  color: #E94E1B;
}
.single-post-layout .post-content a:hover{
  color: #333;
}
.single-post-layout figure{
  padding: 20px 0;
}
.heateor_sss_sharing_container{
  padding-bottom: 20px !important;
}
/* ===========================
   Search Results
=========================== */
body.search .ast-archive-title {
  display: none;
}

/* ===========================
   Custom Category Nav - Single Post Context
=========================== */
body.single-post .custom-category-nav a {
  color: black !important;
  border-bottom: 2px solid #E94E1B;
}

body.single-post .custom-category-nav a:hover {
  border-bottom: 2px solid #FFD700;
}
body.single-post .custom-category-nav {
  justify-content: flex-start;
}

/* ===========================
   Post Grid and Archive
=========================== */
.custom-category-nav {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	border-bottom: 2px solid white;
	padding: 40px 0 40px 0;
	margin-bottom: 30px;
}

.custom-category-nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3rem;
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 2px solid #E94E1B;
  padding-bottom: 4px;
  transition: border-color 0.3s ease;
}

.custom-category-nav a:hover {
  border-bottom: 2px solid #FFD700;
}

.custom-category-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}