/* =================================================
   LISTADO DE RECETAS - LAYOUT GENERAL
================================================= */

.recetas-header {
  text-align: center;
  padding: 0px;
}

.recetas-titulo-brush {
  font-family: 'VasttagBrush', cursive;
  font-size: 110px;
  color: #1a3f16;
  line-height: 1;
  margin: 0;
}

.recetas-listado .recetas-destacadas {
  padding: 40px 0 60px;
}

.recetas-destacadas-titulo {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #2f6b2f;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 60px;
}

/* =================================================
   GRID DE TARJETAS
================================================= */

.recetas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
}

/* =================================================
   TARJETA
================================================= */

.receta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* =================================================
   IMAGEN CON BLOB
================================================= */

.receta-card__imagen {
  position: relative;
  width: 280px;
  height: 280px;
}

.receta-card__blob-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.receta-card__foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.receta-card__foto--1,
.receta-card__foto--2,
.receta-card__foto--3 {
  clip-path: none;
  -webkit-mask-image: var(--blob-mask);
  mask-image: var(--blob-mask);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.receta-card__foto--1 {
  -webkit-mask-image: url('/themes/custom/aires_theme/images/clip-receta-01.svg');
  mask-image: url('/themes/custom/aires_theme/images/clip-receta-01.svg');
}

.receta-card__foto--2 {
  -webkit-mask-image: url('/themes/custom/aires_theme/images/clip-receta-02.svg');
  mask-image: url('/themes/custom/aires_theme/images/clip-receta-02.svg');
}

.receta-card__foto--3 {
  -webkit-mask-image: url('/themes/custom/aires_theme/images/clip-receta-03.svg');
  mask-image: url('/themes/custom/aires_theme/images/clip-receta-03.svg');
}

/*  DESPLAZAMIENTO DE LAS FOTO DE LA TARJETA */
.receta-card__foto.receta-card__foto--1 {margin: 18px -8px;}
.receta-card__foto.receta-card__foto--2 {margin: 15px 20px;}
.receta-card__foto.receta-card__foto--3 {margin: 10px 20px;}

/* =================================================
   INFO DE LA TARJETA
================================================= */

.receta-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.receta-card__titulo a {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #2f6b2f;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 45px;
  transition: background 0.3s ease, color 0.3s ease;
}

.receta-card__titulo a:hover {
  background: #2f6b2f;
  color: #fff;
}

.receta-card__meta {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.receta-card__dato {
  display: flex;
  align-items: center;
  gap: 6px;
}

.receta-card__icono {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.receta-card__numero {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #2f6b2f;
}

.receta-card__label {
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #151515;
  text-transform: uppercase;
}

/* =================================================
   BOTONES DE CATEGORÍA
================================================= */

.receta-categorias {
  padding: 20px 0;
}

.receta-categorias .categorias-lista {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

.receta-categorias .categoria-btn {
  flex: 1;
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 40px;
  border-radius: 50px;
  border: 2px solid #498037;
  color: #498037;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  display: block;
}

.receta-categorias .categoria-btn:hover,
.receta-categorias .categoria-btn.activa {
  background: #498037;
  color: #ffffff;
}



/* =================================================
   HERO SLIDER
================================================= */

.recetas-hero-slider {
  width: 100%;
  margin-bottom: 0px;
}

.recetas-hero-swiper {
  width: 100%;
  height: 675px;
  position: relative;
  overflow: hidden;
}

.recetas-hero-swiper .swiper-wrapper {
  height: 100%;
}

.receta-hero-slide {
  height: 675px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.receta-hero-slide__contenido {
  width: 100%;
  height: 100%;
  position: relative;
}

.receta-hero-slide__mancha {
  position: absolute;
  left: 40px;
  top: 60px;
  width: 600px;
  height: 280px;
}

.receta-hero-slide__mancha-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.receta-hero-slide__mancha-contenido {
  position: relative;
  z-index: 1;
  padding: 60px 50px;
  text-align: center;
}

.receta-hero-slide__titulo {
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;
}

.receta-hero-slide__titulo .titulo-bold {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #557f40;
  text-transform: uppercase;
  line-height: 1;
}

.receta-hero-slide__titulo .titulo-brush {
  font-family: 'VasttagBrush', cursive;
  font-size: 4.5rem;
  color: #233d1a;
  line-height: 1;
}

.receta-hero-slide__meta {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.receta-hero-slide__dato {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #151515;
  font-family: 'Figtree', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.receta-hero-slide__icono {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: none;
}

/* Navegación del swiper */
.recetas-hero-swiper .receta-hero-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.recetas-hero-swiper .receta-hero-btn:hover {
  background: rgba(0,0,0,0.6);
}

.receta-hero-btn:hover {
  background: rgba(0,0,0,0.6);
}

.recetas-hero-swiper .swiper-button-prev {
  left: 20px;
}

.recetas-hero-swiper .swiper-button-next {
  right: 20px;
}

.recetas-hero-swiper .swiper-button-prev::after,
.recetas-hero-swiper .swiper-button-next::after {
  display: none;
}

.recetas-hero-swiper .swiper-pagination {
  bottom: 20px;
}

.recetas-hero-swiper .swiper-pagination-bullet {
  background: transparent;
  opacity: 1;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
}

.recetas-hero-swiper .swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
}


/* =================================================
   HOVER EFFECT
================================================= */

.receta-card__foto {
  transition: transform 0.4s ease;
}

.receta-card__foto-link:hover .receta-card__foto {
  transform: scale(1.05);
}

/* =================================================
   CATEGORÍAS MÓVIL — DROPDOWN
================================================= */

.receta-categorias-movil {
  margin-bottom: 24px;
}

.receta-categorias-movil {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.categoria-select {
  width: 90%;
  padding: 14px 20px;
  border: 2px solid #2f6b2f;
  border-radius: 40px;
  background-color: transparent;
  color: #488037;
  font-family: 'Figtree';
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  cursor: pointer;
}

.categoria-select:hover { 
  background-color: #488037;
  color: #ffffff;
 }

/* =================================================
   BREADCRUMB MÓVIL
================================================= */

@media screen and (max-width: 764px) {
  .breadcrumb-nav {
    margin-left: 20px;
    margin-bottom: 10px;
    margin-top: -20px;
    max-width: 380px;
  }
}

/* =================================================
   RECETAS GRID MÓVIL
================================================= */

@media screen and (max-width: 764px) {
  .recetas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .recetas-destacadas-titulo {
    font-size: 1.4rem;
    margin-bottom: 32px;
  }

  .receta-card__imagen {
    position: relative;
    width: 150px;
    height: 150px;
  }

.receta-card__meta {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .receta-card__dato {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .receta-card__foto.receta-card__foto--2 {
    margin: 15px 5px;
  }

  .receta-card__foto.receta-card__foto--1 {
    margin: 18px 8px;
  }

  .receta-card--3 {
    display: none;
  }

  .recetas-destacadas {
    overflow-x: hidden;
  }

  .recetas-grid {
    width: 100%;
    overflow-x: hidden;
  }

.recetas-hero-swiper {
    height: 500px;
  }

  .receta-hero-slide {
    height: 500px;
  }

  .receta-hero-slide__mancha {
    left: 10px;
    top: 20px;
    width: 96%;
    height: 250px;
  }

  .receta-hero-slide__mancha-contenido {
    padding: 30px 24px;
  }

  .receta-hero-slide__titulo .titulo-bold {
    font-size: 1.8rem;
  }

  .receta-hero-slide__titulo .titulo-brush {
    font-size: 3rem;
  }

  .receta-hero-slide__meta {
    flex-direction: row;
    gap: 16px;
  }

  .receta-hero-slide__dato {
    font-size: 0.9rem;
  }

  .receta-hero-slide__icono {
    width: 22px;
    height: 22px;
  }

  .receta-hero-slide__mancha-svg {
        top: -30px;
  }
}