/*
Theme Name: Teules Child
Template: astra
Author: Child Theme Configurator
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
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: 4.13.4.1781529609
Updated: 2026-06-15 15:20:09

*/
#ast-desktop-header .site-primary-header-wrap {
  /* Color blanco con 70% de opacidad. Ajusta el 0.7 a tu gusto */
  background-color: rgba(255, 255, 255, 0.7) !important;

  /* El efecto de desenfoque del fondo */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* Fundamental para Safari/iPhone */

  /* Opcional: Un borde inferior muy sutil para darle volumen al cristal */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  margin-top: 10px;
}

/* Marcador para items del menú de Astra (barra detrás del texto y del ancho exacto de las palabras) */
.main-header-menu .menu-item>a {
  position: relative;
}

.main-header-menu .menu-item>a .menu-text {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.main-header-menu .menu-item>a .menu-text::after {
  content: "";
  position: absolute;
  bottom: 29px;
  /* Ajustado justo detrás de la base del texto */
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #e5a3a3;
  opacity: 0;
  /* Oculto por defecto */
  border-radius: 3px;
  z-index: -1;
  /* Posicionado por detrás del texto */
  transition: opacity 0.3s ease;
}

/* Mostrar marcador en hover y elemento activo */
.main-header-menu .current-menu-item>a .menu-text::after,
.main-header-menu .current_page_item>a .menu-text::after,
.main-header-menu .menu-item>a:hover .menu-text::after {
  opacity: 0.7;
  /* Hace la barra semitransparente al activarse/hover */
}

.elementor-page .page {
  padding: 0 !important;

}

/* Teules Habitat CPT Proyectos Styles */

:root {
  --primary-color: #da424d;
  /* Brand primary red/coral color */
  --text-dark: #1e2530;
  --text-muted: #64748b;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.teules-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* Header & Separators */
.archive-header {
  padding: 60px 0 40px;
}

.archive-title,
.proyecto-title {
  font-size: 2.8rem;
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.5px;

}

.archive-subtitle {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 15px;
}

.title-separator {
  width: 60px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 15px auto 0;
  border-radius: 2px;
}

.title-separator.white {
  background-color: #ffffff;
}

/* Grid of Projects */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 20px;
  margin-bottom: 60px;
}

@media (max-width: 1024px) {
  .proyectos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .proyectos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.proyecto-card {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  border: 1px solid var(--border-color);
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.proyecto-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(218, 66, 77, 0.3);
}

.proyecto-card-link {
  display: block !important;
  text-decoration: none !important;
  width: 100% !important;
  height: 100% !important;
}

.proyecto-card-image-container {
  position: relative;
  width: 100% !important;
  padding-top: 66.66% !important;
  /* Premium 3:2 aspect ratio */
  overflow: hidden !important;
  background-color: #f1f5f9;
  display: block !important;
}

.proyecto-card-image-container img.proyecto-card-image,
.proyecto-card-image-container .proyecto-card-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: 100% !important;
  transition: var(--transition-smooth) !important;
}

.proyecto-card:hover .proyecto-card-image {
  transform: scale(1.06) !important;
}

.proyecto-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(30, 37, 48, 0.7) 0%, rgba(30, 37, 48, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-smooth);
}

.proyecto-card:hover .proyecto-card-overlay {
  opacity: 1;
}

.proyecto-card-btn {
  background: #ffffff;
  color: var(--text-dark);
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(15px);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-md);
}

.proyecto-card:hover .proyecto-card-btn {
  transform: translateY(0);
}

.proyecto-card-info {
  padding: 24px;
}

.proyecto-card-title {
  font-size: 1.4rem;
  color: var(--text-dark);
  margin: 0 0 6px 0;
  font-weight: 700;
  transition: var(--transition-smooth);
}

.proyecto-card:hover .proyecto-card-title {
  color: var(--primary-color);
}

.proyecto-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
}

/* Pagination */
.proyectos-pagination {
  margin: 40px 0 80px;
  text-align: center;
}

.proyectos-pagination .nav-links {
  display: inline-flex;
  gap: 10px;
}

.proyectos-pagination .page-numbers {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.proyectos-pagination .page-numbers.current,
.proyectos-pagination .page-numbers:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

/* Single View styles */
.proyecto-hero {
  position: relative;
  height: 600px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.proyecto-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(30, 37, 48, 0.4) 0%, rgba(30, 37, 48, 0.75) 100%);
}

.proyecto-hero-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 900px;
}

.proyecto-category-tag {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--primary-color);
  padding: 8px 20px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.proyecto-hero .proyecto-title {
  color: #ffffff;
  font-size: 3.8rem;
  margin-bottom: 20px;
  line-height: 1.15;
}

.proyecto-standard-header {
  padding: 80px 0 50px;
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.proyecto-body-wrapper {
  padding-top: 0;
  padding-bottom: 100px;
}

/* Transparent header adjustments for proyecto single pages */
/* The header keeps its white background but becomes position:absolute (via Astra's CSS),
   overlapping the hero image that starts at top: 0 */




.single-proyecto .site-content .ast-container {
  max-width: none;
  padding: 0;
}

.single-proyecto .site-content .proyecto-detalle {
  padding: 0;
}

/* Make hero taller to compensate for the header overlay */
.single-proyecto .proyecto-hero {
  height: 55vh;
  margin-top: 0;
}

/* Remove top padding from the content area so hero starts at position 0 */
.single-proyecto #primary.teules-project-single {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ensure page content wrapper has no top spacing */
.ast-theme-transparent-header.single-proyecto .site-content {
  padding-top: 0 !important;
}

/* Meta info grid */
.proyecto-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  background: transparent !important;
  padding: 20px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.proyecto-meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 600;
}

.meta-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Content description */
.proyecto-descripcion {
  margin-bottom: 60px;
}

.section-title-small {
  font-size: 2rem;
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  position: relative;
}

.proyecto-entry-content {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #334155;
}

/* Gallery styles */
.proyecto-galeria-seccion {

  padding-top: 40px;
  margin-bottom: 60px;
}

.section-desc {
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 35px;
  margin-top: -15px;
}

.proyecto-galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.proyecto-galeria-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.proyecto-galeria-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.proyecto-galeria-link {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 75%;
  /* 4:3 Aspect Ratio */
}

.proyecto-galeria-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.proyecto-galeria-item:hover .proyecto-galeria-img {
  transform: scale(1.04);
}

.proyecto-galeria-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 37, 48, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-smooth);
  backdrop-filter: blur(2px);
}

.proyecto-galeria-item:hover .proyecto-galeria-overlay {
  opacity: 1;
}

.proyecto-galeria-zoom-icon {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 300;
  background: #da424d;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}

.proyecto-galeria-item:hover .proyecto-galeria-zoom-icon {
  transform: scale(1.1);
}

/* Navigation footer */
.proyecto-navigation-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 50px;
  margin-top: 80px;
}

.proyecto-nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.proyecto-nav-links a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
}

.proyecto-nav-links a:hover {
  color: var(--text-dark);
}

.btn-back-archive {
  display: inline-block;
  background-color: var(--text-dark);
  color: #ffffff !important;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--shadow-md);
}

.btn-back-archive:hover {
  background-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .proyectos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .proyecto-hero {
    height: 400px;
  }

  .proyecto-hero .proyecto-title {
    font-size: 2.5rem;
  }

  .proyecto-nav-links {
    flex-direction: column;
    text-align: center;
  }

  .nav-back-to-archive {
    order: 3;
    width: 100%;
  }

  .btn-back-archive {
    display: block;
  }
}

/* Custom Lightbox Styles */
.teules-lightbox {
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 37, 48, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.teules-lightbox-content {
  max-width: 90%;
  max-height: 85%;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  animation: zoom 0.3s ease-out;
}

@keyframes zoom {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.teules-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f5f9;
  font-size: 40px;
  font-weight: 300;
  cursor: pointer;
  transition: var(--transition-smooth);
  user-select: none;
}

.teules-lightbox-close:hover {
  color: var(--primary-color);
}

.teules-lightbox-prev,
.teules-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #f1f5f9;
  font-size: 45px;
  font-weight: 300;
  cursor: pointer;
  padding: 20px;
  user-select: none;
  transition: var(--transition-smooth);
}

.teules-lightbox-prev {
  left: 20px;
}

.teules-lightbox-next {
  right: 20px;
}

.teules-lightbox-prev:hover,
.teules-lightbox-next:hover {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .main-header-menu .menu-item>a .menu-text::after {
    content: none;
  }

  .teules-lightbox-prev,
  .teules-lightbox-next {
    font-size: 35px;
    padding: 10px;
  }

  .teules-lightbox-prev {
    left: 5px;
  }

  .teules-lightbox-next {
    right: 5px;
  }
}