.elementor-18773 .elementor-element.elementor-element-f792009{--display:flex;--overlay-opacity:0.08;}.elementor-18773 .elementor-element.elementor-element-f792009::before, .elementor-18773 .elementor-element.elementor-element-f792009 > .elementor-background-video-container::before, .elementor-18773 .elementor-element.elementor-element-f792009 > .e-con-inner > .elementor-background-video-container::before, .elementor-18773 .elementor-element.elementor-element-f792009 > .elementor-background-slideshow::before, .elementor-18773 .elementor-element.elementor-element-f792009 > .e-con-inner > .elementor-background-slideshow::before, .elementor-18773 .elementor-element.elementor-element-f792009 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://gabrielacastillo.es/wp-content/uploads/2026/03/Pluma.jpg");--background-overlay:'';background-position:top right;background-repeat:no-repeat;}/* Start custom CSS for html, class: .elementor-element-6813988 *//* ================================================
   GABRIELA CASTILLO — CSS específico: Página BLOG
   v1.1 - 2026
   ================================================ */

/* ------------------------------------------------
   HERO BLOG
   ------------------------------------------------ */
.blog-hero {
  padding: 8rem var(--page-x) var(--space-20);
  border-bottom: 1px solid var(--rule);
}

.blog-hero-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--space-6) 0;
}
.blog-hero-title em {
  font-style: italic;
  color: var(--accent-dark);
  display: inline;
}

.blog-hero-sub {
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--warm-gray);
  line-height: var(--leading-loose);
  max-width: 480px;
  margin-top: var(--space-6);
}


/* ------------------------------------------------
   GRID DE ENTRADAS
   ------------------------------------------------ */
.blog-grid {
  padding: var(--space-20) var(--page-x) var(--space-32);
}

.blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}

.blog-loading {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--warm-gray);
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20) 0;
}

.blog-empty {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--warm-gray);
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20) 0;
}


/* ------------------------------------------------
   TARJETA DE ENTRADA
   ------------------------------------------------ */
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.2s ease;
}
.blog-card:hover { opacity: 0.85; }

.blog-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-dark);
  margin-bottom: var(--space-6);
}
.blog-card__image--empty {
  background: var(--cream-dark);
}
.blog-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__image img {
  transform: scale(1.03);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.blog-card__cat {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-dark);
}

.blog-card__date {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--warm-gray-lt);
}

.blog-card__title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}

.blog-card__excerpt {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--warm-gray);
  flex: 1;
}

.blog-card__link {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-dark);
  transition: color 0.2s ease;
  margin-top: var(--space-2);
}
.blog-card:hover .blog-card__link { color: var(--ink); }


/* ------------------------------------------------
   ANIMACIÓN REVEAL
   ------------------------------------------------ */
.blog-card.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.blog-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------
   PAGINACIÓN
   ------------------------------------------------ */
.blog-paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-20);
  flex-wrap: wrap;
}

.blog-pag-btn,
.blog-pag-num {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.2s ease;
}

.blog-pag-num.activo {
  background: var(--accent-dark);
  color: var(--cream);
  border-color: var(--accent-dark);
}

.blog-pag-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.blog-pag-btn:hover:not(:disabled),
.blog-pag-num:hover:not(.activo) {
  background: var(--cream-dark);
}


/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
  .blog-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .blog-hero { padding: 7rem var(--page-x) var(--space-12); }
  .blog-grid  { padding: var(--space-12) var(--page-x) var(--space-20); }
  .blog-posts { grid-template-columns: 1fr; gap: var(--space-10); }
  .blog-paginacion { gap: 4px; }
  .blog-pag-btn,
  .blog-pag-num { padding: 6px 12px; }
}/* End custom CSS */