/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
      footer#jas-footer {
        background-image: none;
    }
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
          footer#jas-footer {
							background-color:#e8fdff;
        background-image: none;
    }
}
.wa__btn_popup .wa__btn_popup_txt {
    background-color: #d3e9ff !important;
}
/* Asegura que el contenedor del logo sea la base del efecto */
.jas-branding a {
    position: relative; /* Esencial para el pseudo-elemento de brillo */
    display: inline-block; /* Permite aplicar overflow y definir el tamaño del contenedor */
    overflow: hidden; /* **MUY IMPORTANTE**: Oculta el brillo cuando está fuera del logo */
    vertical-align: middle; /* Ayuda a alinear el logo si está en línea con otros elementos */
    /* No hay transiciones de transformación ni sombras aquí para evitar elevación o drop-shadow */
}

/* Pseudo-elemento para crear el efecto de brillo (shining) */
.jas-branding a::before {
    content: ''; /* Necesario para que el pseudo-elemento exista */
    position: absolute; /* Posiciona el brillo de forma absoluta dentro del enlace */
    top: 0;
    left: -100%; /* Inicia completamente a la izquierda, fuera del logo */
    width: 60%; /* Ancho del "rayo" de brillo. Ajusta este valor si quieres un brillo más ancho o más estrecho */
    height: 100%; /* El brillo ocupa toda la altura del logo */
    background: linear-gradient(to right,
                                rgba(255, 255, 255, 0) 0%,     /* Transparente al inicio del brillo */
                                rgba(255, 255, 255, 0.3) 50%,  /* Punto más brillante (ajusta la transparencia 0.3) */
                                rgba(255, 255, 255, 0) 100%    /* Transparente al final del brillo */
                                );
    transform: skewX(-20deg); /* Inclina el brillo para darle un aspecto de "raya" diagonal. Ajusta el grado si quieres otra inclinación */
    transition: transform 0.8s ease-out; /* Controla la velocidad y suavidad del movimiento del brillo */
    pointer-events: none; /* Asegura que el pseudo-elemento no interfiera con los eventos del ratón */
    z-index: 1; /* Asegura que el brillo esté por encima de la imagen */
}
ul.wp-block-list li {
    line-height: 2em !important;
}
/* Animación del brillo al pasar el ratón sobre el logo */
.jas-branding a:hover::before {
    transform: translateX(200%) skewX(-20deg); /* Mueve el brillo completamente de izquierda a derecha a través del logo */
}

/* Controla la visibilidad de las imágenes del logo */
.jas-branding img {
    display: block; /* Asegura que las imágenes se comporten como bloques y no generen espacio extra */
    max-width: 100%; /* Las imágenes se ajustan al ancho de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    /*z-index: 0; /* Asegura que la imagen esté debajo del brillo, si es necesario */
}

/* OCULTAR EL LOGO RETINA por defecto en pantallas no retina */
.jas-branding .retina-logo {
    display: none;
}

/* SI NECESITAS MOSTRAR EL LOGO RETINA EN PANTALLAS DE ALTA DENSIDAD */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
    .jas-branding .regular-logo {
        display: none; /* Oculta el logo normal */
    }
    .jas-branding .retina-logo {
        display: block; /* Muestra el logo retina */
    }
}
h3.product-title.pr.fs__14.mg__0.fwm {
    font-weight: 900;
}
h1.tu.mb__10.cw {
    font-size: 1em !important;
    margin-top: -.65em;
}
.summary.entry-summary h2 {
    font-size: 1.25em;
}
.page-head.pr.tc {
background: #4a0459;
background: linear-gradient(43deg,rgba(255, 255, 255, 1) 0%, rgba(87, 173, 199, 1) 51%, rgba(48, 104, 255, 1) 100%);}
img.regular-logo {
height:100%;
	width:100%;
}
ul.wp-block-list li {
    line-height: 1.75em;
}
.post-content p {
    font-size: 1.2em !important;
    line-height: 1.75em;
	padding:.25em 0em;
}
h1,h2,h3,h4,h5{font-weight:700;}
.page-head h1 {
    font-size: .85em !important;
    font-weight: 500;
	height:1em;
	overflow:hidden;
}
.jas-row.jas-page{margin:0 !important;line-height:1.25em !important;}
@media only screen and (max-width: 1024px) {
    .footer__top div[class*=jas-col]:not(:last-child) {
        margin-bottom: 1em !important;
    }
}
.jas-container.pr .jas-col-md-3{min-width:25%;}
.jas-container.pr .jas-col-md-2{min-width:20%;}
.jas-social {
    text-align: left;
	margin-top:-2em;
}
a.cd.chp{
	font-size:1.15em;line-height:1em;
}
@media (max-width: 991.98px) { /* Esto afectará a pantallas de tablet y móvil */
    .jas-col-md-2.jas-col-sm-4.jas-col-xs-3 {
        display: none !important; /* Añadimos !important para asegurar que se aplique */
    }
}
@media (max-width: 991.98px) { /* Esto afectará a pantallas de tablet y móvil */
    h1.product_title.entry-title {
        font-size: 1.75em !important;
    }
}

a.btn-quickview.pa.cd.br__40.pl__25.pr__25.bgw.tc.dib {
    display: none;
}
.page-head.pr.tc{height:2em !important;}
.jas-col-md-12.jas-col-xs-12.mt__60.mb__60 p {
 font-size: 1em; line-height: 1.5em; padding: .25em 0;
}

.posts img {
    border-radius: 1.25em;
    border: 3px solid #2271b1;
	margin:1em 0;
	width:100%;
}
nav.woocommerce-MyAccount-navigation {
    font-size: 0.75em;
}
.u-column1.col-1.woocommerce-Address {
    font-size: .65em !important;
}
span.log {
    font-size: 0.7em;
 	font-family:'Open Sans',sans-serif;
	color:#000;
}
.post-content ul li {
    font-size: 1.2em;
    color: #0e161c;
    margin: 0em 1em 0.25em 1em;
    border-left: 1px dotted rgba(27, 127, 204, .8);
    padding: 0em 0em 1.25em 1em;
	list-style-type: none;
}
h3.widget-title.tu.fwsb {
    color: #9cc3d2;
}
h4.mg__0.mb__30.tu {
    color: #ff00b3;
}

ul li.wc-block-grid__product {
    margin: 1em 0em 0em 0em;
    padding: 1em 1.5em 0 0;
    list-style: none;
    border:none;
}
h3#reply-title {
color: #9cc3d2;
}
.tag-comment {
    border: 1px solid #4f94d4;
    padding: 15px 20px;
    background-color: #d9edff;
    border-radius: 1em;
}
h2.woorelated-title {
    color: #7fb0c7;
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
          footer#jas-footer {
							background-color:#e8fdff;
        background-image: none;
    }
}
.jas-icon-cart.pr {
    display: none;
}
.jas-menu ul li a {
    line-height: 1em;
    font-weight: bold;
    color: #527d94;
}
.page-description {
    margin-left: auto;   /* Pushes element to the right as much as possible */
    margin-right: auto;  /* Pushes element to the left as much as possible */
    max-width: 98%; /* Optional: Set a max-width to control its size */
    /* Or, if you just want equal manual margins: */
    /* margin-left: 1em; */
    /* margin-right: 1em; */
}
mark.has-inline-color.has-vivid-cyan-blue-color {
    font-size: 0.75em;
	font-family:'Open Sans',sans-serif;
}
figure.wp-block-image.size-full a img{border:6px solid #0693e3;border-radius:1em;filter:drop-shadow(6px 6px 12px rgba(0,0,150,0.1));transition:all 0.3s ease-in-out;transform-origin:center center;margin:0.25em !important;}
figure.wp-block-image.size-full a img:hover{border:4px solid #e700ab;filter:drop-shadow(6px 6px 12px rgba(0,0,150,0.3));transform:scale(1.05);}
.jas-col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%}
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart:hover {
    background: #ccf6fc;
    color: #337ab7;
    font-weight: 700;
}
.mt__60 {
    margin-top: 10px;
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
         footer#jas-footer {
					 	background-color:#e8fdff;
        background-image: none;
    }
}
.woocommerce-message {
    background: #99f6ff;
    border: 3px dotted #35baed;
    color: #d50057;
}
.woocommerce-message {
    background: #99f6ff;
    border: 3px dotted #35baed;
    color: #d50057;
}
.woocommerce-error a, .woocommerce-message a{margin-bottom:0px;}
.header__top { background-color: #e8f3fc; max-height: 36px; overflow: hidden; }
body{
	background-color:#e8fdff;
    }
.filter-sidebar.bgbl.pf.left {
	-webkit-box-shadow: 10px 10px 46px -8px rgba(45,134,181,1);
-moz-box-shadow: 10px 10px 46px -8px rgba(45,134,181,1);
box-shadow: 10px 10px 46px -8px rgba(45,134,181,1);
}
      footer#jas-footer {
       background-image:url(https://www.nostalgicplay.com/wp-content/uploads/fondo-footer.jpg)
    }
	.jas-container.pr ul li a {
    color: #004355;
    font-size: 0.9em;
   text-shadow: #00beff;
}
#jas-mobile-menu ul ul li a {
    text-transform: none;
    border-bottom: 1px solid #9ec3c9;
    font-weight: 300;
    color: #204453;
    font-weight: 700;
    line-height: 1.35em;
}
.cegg-mb5 img {
    width: 18px;
    height: 18px;
}
	.jas-container.pr ul li a:hover {
    color: #ff0047;
    font-weight: 700;
    font-size: 0.9em; 
}
.cegg-mb10 img { height: 14px; width: 14px; }
.footer__bot.pt__20.pb__20.lh__1 ul li a{
text-shadow:none;
	color:#3a4147;
}
span.sku {
    color: #42518c;
}
h3.widget-title.fwsb.fs__16.mg__0.mb__30{
	text-shadow:none;
	color: #06212b;
	font-size:1.75em;
	line-height:1em;
	   text-shadow: 1px 0px 1px #00beff, 0px 1px 1px #d3fbff, 2px 1px 1px #00beff, 1px 2px 1px #d3fbff, 3px 2px 1px #00beff, 2px 3px 1px #d3fbff, 4px 3px 1px #00beff, 3px 4px 1px #d3fbff, 5px 4px 1px #00beff, 4px 5px 1px #d3fbff, 6px 5px 1px #00beff, 5px 6px 1px #d3fbff, 7px 6px 1px #00beff;
}
.jas-row.jas-page {
    font-size: 1.25em;
    margin: 1em 4em;
    line-height: 1.90em;
}

.video-container {
  position: relative;
  padding-bottom: calc(56.25% * 0.75); /* 16:9 */
  width: 75%;
  height: 0;
}
.cegg-btn-row.cegg-mb20 img {
    height: 14px;
    width: 14px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
iframe#aswift_1 {
    height: auto;
    clear: both;
    min-height: auto;
}
iframe {
	clear:both;
  min-height: 10em;
	 -webkit-border-radius:2em;
	border-radius:2em;
	margin:0;
	padding:0;
	width:100%;
  aspect-ratio: 16 / 9;
}
.post-content img {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	border:2px solid #00beff;
	}
td.actions p {
    font-size: 0.8em;
    line-height: 1.5em;
}
.woocommerce-message {
    font-size: 0.8em;
    line-height: 1.2em;
}
a.button {
    font-size: 0.9em;
    min-width: 220px;
    clear: both;
    margin: 0.25em;
    position: relative;
}

.filter-sidebar { width: 270px; top: 0; bottom: 0; left: -270px; transition: all .3s; z-index: 999; box-shadow: 0 0 1px 0 rgba(0,0,0,.15); overflow-y: auto; } .bgbl { border-bottom: solid 1px #96e4ff; background: #e7f6ff; color: A0B8CD; }
/* === SLIDER YOUTUBE - Jas Footer Slider CSS v2.0 === */

/* 1) Contenedor principal */
#jas-footer-hook {
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 2) Slider interno: flex container para header + slider */
.jas-footer-slider-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  overflow: visible;
}

/* 3) Encabezado */
.jas-slider-header {
  flex: 0 0 200px;
  margin-right: 20px;
}
.jas-slider-header h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  color: #333;
  user-select: none;
  white-space: nowrap;
}
.jas-slider-header h2 span {
  display: block;
  color: #00beff;
  font-weight: 400;
  font-size: 1.6rem;
  margin-top: 0.1em;
}

/* 4) Contenedor Swiper */
.swiper {
  flex: 1 1 auto;
  position: relative;
  background: transparent;
  padding-bottom: 60px;
  overflow: visible;
}
.swiper-wrapper {
  display: flex;
  align-items: flex-start;
}

/* 5) Slides */
.swiper-slide {
  flex-shrink: 0 !important;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  outline: none;
  min-width: 160px;
}

/* 6) Imágenes con filtro monocromático azul y hover */
.swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 190, 255, 0.3);
  filter: grayscale(100%) sepia(100%) hue-rotate(180deg) brightness(1.2);
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
  display: block;
}
.swiper-slide:hover img,
.swiper-slide:focus-within img {
  filter: none;
  opacity: 1;
  animation: bounce 0.6s;
  z-index: 2;
}

/* 7) Bounce keyframes */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

/* 8) Texto */
.jas-video-title {
  font-size: 1.05em;
  font-weight: 700;
  margin: 8px 0 4px;
  color: #222;
  user-select: none;
}
.jas-video-title a {
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  display: inline-block;
}
.jas-video-title a:hover,
.jas-video-title a:focus {
  text-decoration: underline;
}
.jas-video-channel a {
  font-size: 0.75em;
  color: #0073aa;
  text-decoration: none;
  user-select: none;
  pointer-events: auto;
  display: inline-block;
}
.jas-video-channel a:hover,
.jas-video-channel a:focus {
  text-decoration: underline;
}

/* 9) Paginación */
.swiper-pagination {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  user-select: none;
}
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #00beff;
  opacity: 0.4;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}

/* 10) Ocultar flechas siempre */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* 11) Responsive */

/* Mobile */
@media (max-width: 575px) {
  #jas-footer-hook {
    padding-left: 16px;
    padding-right: 16px;
  }
  .jas-footer-slider-container {
    display: block;
  }
  .jas-slider-header {
    width: 100%;
    margin-bottom: 16px;
    text-align: left;
  }
  .jas-slider-header h2 {
    font-size: 1.6rem;
    font-weight: 900;
    color: #333;
    margin: 0;
    line-height: 1.2;
    white-space: normal;
  }
  .jas-slider-header h2 span {
    display: inline;
    color: #0073aa;
    font-weight: 400;
    font-size: 1.4rem;
    margin-left: 6px;
  }
  .swiper {
    width: 100%;
  }
  .swiper-slide {
    width: 100% !important;
    min-width: unset;
    padding: 0;
    box-sizing: border-box;
  }
  .swiper-slide img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .jas-video-title,
  .jas-video-channel {
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
  }
  .swiper-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 12px;
    justify-content: flex-start;
    padding-left: 4px;
    gap: 10px;
  }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 767px) {
  .swiper-slide {
    width: calc(50% - 10px) !important;
    min-width: unset;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .swiper-slide {
    width: calc(33.333% - 16px) !important;
    min-width: unset;
  }
}

/* Desktop */
@media (min-width: 992px) {
  #jas-footer-hook {
    padding-left: 20px;
    padding-right: 20px;
  }
  .jas-footer-slider-container {
    flex-wrap: nowrap;
  }
  .jas-slider-header {
    flex: 0 0 200px;
    margin-right: 20px;
    margin-bottom: 0;
    user-select: none;
  }
  .jas-slider-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .jas-slider-header h2 span {
    font-size: 1.6rem;
    color: #00beff;
    margin-top: 0.1em;
  }
  .swiper {
    padding-bottom: 0;
    overflow: visible;
  }
  .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px;
    align-items: start;
  }
  .swiper-slide {
    width: auto !important;
    cursor: pointer;
    min-width: unset;
  }
  .swiper-slide img {
    width: 100%;
    height: auto;
  }
  .swiper-pagination {
    display: none !important;
  }
}

/* Accesibilidad */
.jas-video-slide > a,
.jas-video-title a,
.jas-video-channel a {
  pointer-events: auto;
}

.jas-video-slide:focus-within img {
  filter: none !important;
  opacity: 1 !important;
  animation: bounce 0.6s !important;
  z-index: 2 !important;
}
.quote {
  text-align: center;
  font-size: 1.75em;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  line-height: 1.5em;
  /* Por defecto, en mobile no hay margin-top */
  margin-top: 0; 
}

/* Aplica margin-top negativo solo para pantallas más grandes (desktop) */
@media (min-width: 768px) { /* Puedes ajustar este valor según tu definición de "desktop" */
  .quote {
    margin-top: -7em;
  }
}
.quote-author {
    text-align: center;
    font-style: italic;
    color: #ef004b;
}
blockquote.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
    background: #89c7ff;
}
h3.jas-video-title a:hover { color: #ff0050d1; text-decoration: none; }
p.jas-video-channel a:hover {
    color: #ff0050;
    text-decoration: none;
}

ul.wp-block-list {
  list-style: none; /* Elimina los bullets por defecto del navegador */
  padding: 0; /* Quita el padding predeterminado de la lista */
  margin: 0; /* Quita el margen predeterminado de la lista */
}
blockquote, q {
	background-color:#b9ebff !important;
}
hr {
  border: none; /* Elimina el borde predeterminado */
  height: 2px; /* Define el grosor de la línea */
  background-color: #87CEEB; /* Azul claro (SkyBlue). Puedes ajustar el código hexadecimal si quieres un tono diferente */
  margin: 20px 0; /* Añade un poco de espacio arriba y abajo de la línea */
}

/* Estilos para cada elemento de la lista */
ul.wp-block-list li {
  line-height: 1.35em;
  padding: 0.55em 0 0.55em 1.5em; /* Padding ajustado para el bullet personalizado */
  border: none !important; /* Asegura que no haya bordes predeterminados */
  font-style: italic !important;
  position: relative; /* Necesario para el posicionamiento del bullet y el efecto hover */
  overflow: hidden; /* Importante para ocultar el "brillo" del hover fuera del elemento */

  /* Efecto de aparición */
  opacity: 0; /* Empieza invisible */
  transform: translateY(20px); /* Empieza un poco más abajo */
  animation: fadeInSlideUp 0.6s ease-out forwards; /* Aplica la animación */

  /* Transiciones para el efecto hover */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transiciones suaves para hover */

  /* Sombra inicial sutil para dar profundidad */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Retraso para el efecto de aparición escalonado */
ul.wp-block-list li:nth-child(1) { animation-delay: 0.1s; }
ul.wp-block-list li:nth-child(2) { animation-delay: 0.2s; }
ul.wp-block-list li:nth-child(3) { animation-delay: 0.3s; }
ul.wp-block-list li:nth-child(4) { animation-delay: 0.4s; }
ul.wp-block-list li:nth-child(5) { animation-delay: 0.5s; }
/* Añade más :nth-child(n) si tu lista tiene más de 5 elementos para mantener el efecto escalonado */


/* Estilos para el bullet personalizado */
ul.wp-block-list li::before {
  content: '➤'; /* Carácter Unicode para un bullet elegante */
  color: #ff0050; /* Tu color rojo vibrante */
  position: absolute;
  left: 0; /* Posiciona el bullet al inicio del padding */
  top: 50%;
  transform: translateY(-50%); /* Centra verticalmente el bullet */
  font-size: 0.8em; /* Tamaño del bullet */
  line-height: 1; /* Asegura que no afecte la altura de línea */
}

/* Animación de entrada de los elementos de la lista */
@keyframes fadeInSlideUp {
  to {
    opacity: 1; /* Se vuelve completamente visible */
    transform: translateY(0); /* Vuelve a su posición original */
  }
}

/* Nuevo efecto Hover: Brillo Parcial y Elevación */
ul.wp-block-list li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1); /* Brillo blanco semitransparente */
  transform: translateX(-100%) skewX(-45deg); /* Empieza fuera de vista a la izquierda y sesgado */
  transition: transform 0.5s ease-out; /* Transición para el movimiento del brillo */
  z-index: -1; /* Asegura que el brillo esté por debajo del texto */
}

ul.wp-block-list li:hover {
  transform: translateY(-5px); /* Se eleva 5px al hacer hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* La sombra se expande y oscurece */
	padding-left:1.75em;
}

ul.wp-block-list li:hover::after {
  transform: translateX(100%) skewX(-45deg); /* El brillo se mueve a través del elemento */
}
/* Animación para cada elemento de la lista con un pequeño retraso */
ul.wp-block-list li:nth-child(1) { animation-delay: 0.1s; }
ul.wp-block-list li:nth-child(2) { animation-delay: 0.2s; }
ul.wp-block-list li:nth-child(3) { animation-delay: 0.3s; }
ul.wp-block-list li:nth-child(4) { animation-delay: 0.4s; }
ul.wp-block-list li:nth-child(5) { animation-delay: 0.5s; }
/* Puedes añadir más para cada elemento si tu lista es más larga */

ul.wp-block-list li::before {
  content: '➤'; /* Carácter Unicode para un bullet elegante */
  color: #ff0050; /* Color del bullet */
  position: absolute;
  left: 0; /* Posiciona el bullet al inicio del padding */
  top: 50%;
  transform: translateY(-50%); /* Centra verticalmente el bullet */
  font-size: 0.8em; /* Tamaño del bullet, puedes ajustarlo */
  line-height: 1;
}

@keyframes fadeInSlideUp {
  to {
    opacity: 1; /* Se vuelve visible */
    transform: translateY(0); /* Vuelve a su posición original */
  }
}
h1.wp-block-heading { font-size: 2em; line-height: 1em; padding: .65em 0; font-weight: 700; color: #194dae; }

ol.wp-block-list li {
font-size: 1.2em !important; line-height: 1.75em; padding: .25em 0em;
padding: .55em 0 .55em .25em;
	margin-bottom:1em;
	color:#212121;
	font-style:italic;
list-style-type: none; 
	overflow:hidden;
}
.price-filter-bar {
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, #fff 0%, #d4faff 62%, #eefdff 99%);
  font-family: 'Open Sans', sans-serif;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
figure.wp-block-image.size-full img {
    /* Desenfoque inicial muy sutil */
    filter: blur(0.5px); 
    
    /* Sombra con un mayor 'spread' (extensión) pero baja opacidad */
    /* Los valores son: offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 20px 10px rgba(110, 198, 255, 0.15); /* Sombra inicial extendida y muy suave */
    
    /* Prepara la imagen para el escalado y las transiciones */
    transform: scale(1); 
    
    /* Transiciones suaves para todos los efectos */
    transition: filter 0.7s ease-out, box-shadow 0.7s ease-out, transform 0.7s ease-out;
}


.filter-label {
  color: #5da9c8;
  font-weight: 400;
  font-size: 0.7rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.filters {
  display: inline-flex;
  gap: 0.5rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.25rem 0;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.filters::-webkit-scrollbar {
  display: none;
}

.filters .filter {
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  border: 2px solid #295171;
  border-radius: 999px;
  background: #fff;
  color: #295171;
  font-weight: 800;
  font-size: 0.8rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  animation: fadeInUp 0.6s ease;
  z-index: 1;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.filters .filter:hover {
  background: #eb0f47;
  color: #fff;
  transform: translateY(-4px);
  z-index: 2;
}

@media (min-width: 1024px) {
  .price-filter-bar {
    padding: 0.75rem 2rem;
  }
  .filter-label {
    font-size: 0.9rem;
  }
  .filters .filter {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
  .filters {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 767px) {
  .price-filter-bar {
    padding: 0.5rem 1rem;
  }
  .filter-label {
    font-size: 0.65rem;
  }
  .filters .filter {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
}
.wp-block-media-text.alignwide.is-stacked-on-mobile.has-background {
    background-color: linear-gradient(43deg, rgba(255, 255, 255, 1) 0%, rgba(87, 173, 199, 0.27) 79%, rgba(48, 104, 255, 0.17) 89%, rgba(0, 19, 94, 0.21) 100%) !important;
    margin-bottom: 1em;
}

/* CSS */
@media screen and (min-width: 900px) {
    .wp-block-group__inner-container.is-layout-flow.wp-block-group-is-layout-flow p {
        font-size: 1.em !important;
    }
}
/* Estilos generales de la columna del footer */
.footer-col {
    /* Por defecto, ocupa todo el ancho en móviles */
    width: 100%; 
    /* Espacio inferior para separación */
    margin-bottom: 20px; 
}

/* Estilos para el título del widget */
.widget-title {
    /* fwsb (font-weight: semi-bold) */
    font-weight: 600; 
    /* fs__16 */
    font-size: 16px;   
    /* mg__0 */
    margin: 0;         
    /* mb__30 */
    margin-bottom: 30px; 
}

/* Lista de iconos de redes sociales */
.social-icons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Para que los iconos estén en línea */
    display: flex; 
    /* Alinea los iconos al inicio */
    justify-content: flex-start; 
    /* Espacio entre los iconos */
    gap: 15px; 
}

.social-icons-list li {
    /* Asegura que los elementos de la lista sean bloques en línea */
    display: inline-block; 
}

.social-icons-list a {
    /* Color por defecto de los iconos */
    color: #0681e5; 
    /* Ajusta el tamaño de los iconos según sea necesario */
    font-size: 30px; 
    /* Suaviza la transición de color al pasar el ratón */
    transition: color 0.3s ease; 
    /* Asegúrate de que apunte a tu fuente Font Awesome.
       Para iconos 'solid' o 'regular', podrías necesitar 'Font Awesome 5 Free'.
       Para 'brands', 'Font Awesome 5 Brands'.
       'Font Awesome 5 Free' suele incluir ambos. */
    font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free'; 
    font-weight: normal; /* Esto se ajustará por la clase del icono (ej. fas para bold) */
    font-style: normal;
    /* Ajusta la altura de línea */
    line-height: 1; 
}

.social-icons-list a:hover {
    /* Color al pasar el ratón */
    color: #eb0f47; 
}

/* Media Queries para responsividad */
@media (min-width: 768px) {
    .footer-col {
        /* Ajusta el ancho para tabletas y escritorios, o utiliza un sistema de columnas */
        width: auto; 
    }

    .social-icons-list {
        /* Mantiene la alineación en pantallas más grandes */
        justify-content: flex-start; 
    }

}
/* Animación de Fade In al cargar */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de Bounce (leve) al hacer hover */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Contenedor principal para el cuadrado del blog */
.blog-square-container {
    width: 100%; /* Ocupa el 100% del espacio asignado */
    max-width: 300px; /* Establece un ancho máximo para evitar que sea demasiado grande en pantallas amplias */
    margin: 20px auto; /* Centra el contenedor y da un poco de margen */
    box-sizing: border-box; /* Incluye padding y border en el width/height */
    opacity: 0; /* Oculto por defecto para la animación de fade-in */
    animation: fadeIn 1s ease-out forwards; /* Aplica la animación de fade-in */
    animation-delay: 0.5s; /* Pequeño retraso para que no sea instantáneo */
}

/* Estilos del cuadrado del blog */
.blog-square {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1; /* Hace que el cuadrado sea perfecto (ancho igual a alto) */
    border: 2px solid #295171;
    border-radius: 8px;
    background-color: transparent;
    color: #295171;
    text-decoration: none; /* Elimina el subrayado del enlace */
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease; /* Transiciones para hover */
    padding: 15px; /* Espaciado interno */
    box-sizing: border-box;
    text-align: center;
}

/* Estilos del icono */
.blog-square .blog-icon {
    font-size: 3.5em; /* Tamaño del icono, usa 'em' para que sea relativo al font-size del padre */
    margin-bottom: 10px; /* Espacio entre el icono y el texto */
    transition: color 0.4s ease;
}

/* Estilos del texto */
.blog-square .blog-text {
    font-size: 1.2em; /* Tamaño del texto */
    font-weight: 600; /* Negrita */
    transition: color 0.4s ease;
}

/* Efectos al hacer hover */
.blog-square:hover {
    background-color: #eb0f47; /* Relleno al hacer hover */
    color: #fff; /* Texto y color del borde se vuelven blancos (o usa la variable --white) */
    transform: scale(1.02); /* Ligeramente más grande al hacer hover */
    animation: bounce 0.6s ease-in-out; /* Aplica la animación de bounce */
}

.blog-square:hover .blog-icon,
.blog-square:hover .blog-text {
    color: #fff; /* Icono y texto blancos al hacer hover */
}

/* Media Queries para responsividad (ajustes finos si es necesario) */
@media (max-width: 768px) {
    .blog-square-container {
        max-width: 250px; /* Ajusta el tamaño máximo para tablets */
    }
}

@media (max-width: 480px) {
    .blog-square-container {
        max-width: 200px; /* Ajusta el tamaño máximo para móviles pequeños */
    }
    .blog-square .blog-icon {
        font-size: 3em;
    }
    .blog-square .blog-text {
        font-size: 1em;
    }
}
#blogtexto a.chp {
    font-size: 2.65em !important; /* 
   Tamaño de fuente para escritorio */
	font-weight:900;
    line-height: 1em;
    text-transform: none !important;
    color: #202c2d !important;
    /* Sombras para escritorio */
    text-shadow: 
        0 1px #808d93, 
        -1px 0 #cdd2d5, 
        -1px 2px #808d93, 
        -2px 1px #cdd2d5, 
        -2px 3px #808d93, 
        -3px 2px #cdd2d5, 
        -3px 4px #808d93, 
        -4px 3px #cdd2d5, 
        -4px 5px #808d93, 
        -5px 4px #cdd2d5, 
        -5px 6px #808d93, 
        -6px 5px #cdd2d5, 
        -6px 7px #808d93, 
        -7px 6px #cdd2d5, 
        -7px 8px #808d93, 
        -8px 7px #cdd2d5 !important;
}

/* Media Query para tabletas y móviles */
@media (max-width: 768px) {
    #blogtexto a.chp {
        font-size: 1.25em !important; /* Tamaño de fuente para móvil y tableta */
        line-height: 1em; /* Ajustar line-height para el nuevo tamaño de fuente */
        /* Sombras reducidas proporcionalmente para móvil y tableta */
        text-shadow: 
            0 0.5px #808d93, 
            -0.5px 0 #cdd2d5, 
            -0.5px 1px #808d93, 
            -1px 0.5px #cdd2d5, 
            -1px 1.5px #808d93, 
            -1.5px 1px #cdd2d5, 
            -1.5px 2px #808d93, 
            -2px 1.5px #cdd2d5, 
            -2px 2.5px #808d93, 
            -2.5px 2px #cdd2d5, 
            -2.5px 3px #808d93, 
            -3px 2.5px #cdd2d5, 
            -3px 3.5px #808d93, 
            -3.5px 3px #cdd2d5, 
            -3.5px 4px #808d93, 
            -4px 3.5px #cdd2d5 !important;
    }
}
figure.alignright img {
    border: none !important;
    box-shadow: none !important;
}
figure.alignleft img {
    border: none !important;
    box-shadow: none !important;
}
div#wc-stripe-express-checkout-element {
    margin-bottom: -4.5em;
}
figure.aligncenter.size-full img { border: none !important;
margin-bottom:1em;
}
li.wc-block-product.post-58786.product.type-product.status-publish.has-post-thumbnail.product_cat-pop.product_tag-terror.first.instock.taxable.shipping-taxable.purchasable.product-type-simple {
    border: none !important;
    padding: 0 !important;
}
img.attachment-shop_single.size-shop_single.wp-post-image { overflow: hidden; }
figure.alignleft.size-full.is-resized {
    height: 25%;
    width: 25%;
}
.post-title a.chp {
    transition: all 0.3s ease-in-out;
}

.post-title a.chp:hover {
    color: #ef004b !important; 
    transform: translateY(-3px);
}
#blogtexto a.chp:hover{
    color: #ef004b !important; 
    transform: translateY(-3px);
}
#blogtexto a.chp {
  transition: all 0.3s ease-in-out;
}/* Estilos para cada bloque de producto individual */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca {
    background: linear-gradient(to bottom right, #e6f7ff, #ffffff) !important;
    border: 1px solid #9ad1ed !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 25px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, flex-direction 0.3s ease-in-out !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 25px !important;
}

/* Efecto hover para el bloque completo */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px rgba(239, 0, 75, 0.3) !important; /* Sombra principal del bloque rosa */
    flex-direction: column !important;
    align-items: center !important;
}

/* Contenedor de la imagen (figure) */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !1important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin: 0 25px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: 3px solid transparent !important; /* Mantenemos este borde transparente en el contenedor, si es para espacio */
    border-radius: 5px !important; /* Border-radius pequeño para el contenedor (y por ende la imagen si overflow:hidden) */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out !important; /* Quitamos border-color de la transición aquí */
    /* NO TOCAR LA SOMBRA DE LA IMAGEN EN EL CONTENEDOR, SE PONE DIRECTAMENTE EN LA IMG */
}

/* NO APLICAR BORDES ROSAS AL CONTENEDOR EN HOVER, SOLO CAMBIO DE TAMAÑO Y POSICIÓN */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image {
    /* border-color: #ef004b !important; -- ELIMINAMOS ESTA LÍNEA */
    width: 90% !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: none !important;
    margin: 0 auto 15px auto !important;
    order: -1 !important;
}

/* Estilos para la imagen dentro del figure */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-position: center !important;
    /* Transición para el box-shadow */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    border-radius: 5px !important; /* Aseguramos border-radius directamente en la imagen */
}

/* APLICAR BOX-SHADOW ROSA CLARITO A LA IMAGEN (IMG) EN HOVER */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image img {
    box-shadow: 0 0 15px rgba(239, 0, 75, 0.2) !important; /* Sombra rosa clarito */
}


/* Estilos para el párrafo de texto */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca p {
    flex-grow: 1 !important;
    color: #333 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transition: text-align 0.3s ease-in-out !important;
}

/* Alineación del texto al centro cuando el bloque está en hover */
.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover p {
    text-align: center !important;
}

.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca p strong {
    background: linear-gradient(to top, #cceeff 0%, #cceeff 30%, transparent 30%, transparent 100%) !important; /* Subrayado azul claro por defecto */
    padding-bottom: 2px !important;
    display: inline !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca {
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px !important;
    }

    /* En móviles, el hover solo afectará el tamaño de la imagen, no la dirección del flex */
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover {
        flex-direction: column !important; /* Asegura que siga en columna */
        align-items: center !important;
    }

    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image {
        margin: 0 0 15px 0 !important;
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        min-height: 150px !important;
        border: none !important; /* Asegurar que no haya bordes en mobile tampoco */
        border-radius: 5px !important; /* Border radius en mobile */
    }

    /* Hover en imagen para móviles: crece más grande y aplica sombra */
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image {
        width: 80% !important; /* Crece al 80% del ancho del bloque en mobile */
        height: auto !important;
        margin: 0 auto 15px auto !important;/
    }

    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image img {
        width: 150px !important; /* Este width y height inicial pueden ser el problema si no crecen */
        height: 150px !important;
        border-radius: 5px !important; /* Aseguramos border-radius directamente en la imagen en mobile */
    }
    /* APLICAR BOX-SHADOW ROSA CLARITO A LA IMAGEN (IMG) EN HOVER PARA MOBILE */
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image img {
        width: 100% !important; /* Asegura que la imagen dentro del figure crezca a su 100% del figure */
        height: 100% !important;
        box-shadow: 0 0 15px rgba(239, 0, 75, 0.2) !important; /* Sombra rosa clarito */
    }


    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca p {
        text-align: center !important;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca {
        padding: 15px !important;
    }

    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
    }

    /* Hover en imagen para móviles pequeños: crece aún más, ajustado y aplica sombra */
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image {
        width: 85% !important; /* Ligeramente más grande en móviles pequeños */
        height: auto !important;
        margin: 0 auto 15px auto !important;
    }

    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca > .wp-block-image img {
        width: 120px !important; /* Este width y height inicial pueden ser el problema si no crecen */
        height: 120px !important;
    }
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca:hover > .wp-block-image img {
        width: 100% !important; /* Asegura que la imagen dentro del figure crezca a su 100% del figure */
        height: 100% !important;
        box-shadow: 0 0 15px rgba(239, 0, 75, 0.2) !important;
    }
    .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-ad2f72ca p {
        font-size: 0.9rem !important;
    }
}
a.customize-unpreviewable {
    font-weight: 400;
}
figure.wp-block-image {
    margin: 1em 0;
}
a{text-decoration:none !important;}
.post-content figure.wp-block-image.size-full img {
    /* Desenfoque inicial muy sutil */
    filter: blur(0.5px); 
    
    /* Sombra con un mayor 'spread' (extensión) pero baja opacidad */
    /* Los valores son: offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 20px 10px rgba(110, 198, 255, 0.15); /* Sombra inicial extendida y muy suave */
    
    /* Prepara la imagen para el escalado y las transiciones */
    transform: scale(1); 
    
    /* Transiciones suaves para todos los efectos */
    transition: filter 0.7s ease-out, box-shadow 0.7s ease-out, transform 0.7s ease-out;
}

.post-content figure.wp-block-image.size-full img:hover {
    /* Quita el desenfoque al pasar el ratón */
    filter: blur(0px); 
    
    /* La sombra se hace un poco más visible y ligeramente más extendida al pasar el ratón */
    box-shadow: 0 0 30px 15px rgba(110, 198, 255, 0.25); /* Sombra más notoria al hover */
    
    /* Escala ligeramente la imagen para un efecto interactivo */
    transform: scale(1.01); 
}

/* Estilos opcionales para el contenedor de la imagen dentro de .post-content */
.post-content figure.wp-block-image.size-full {
    margin-bottom: 2em; /* Espacio debajo de la imagen */
    border-radius: 8px; /* Esquinas ligeramente redondeadas */
    overflow: hidden; /* Asegura que la sombra o el escalado se comporten bien */
}/* Estilos base para las imágenes de productos (dentro de .product-inner.pr) */
.product-inner.pr img {
    /* Asegura que la imagen sea un bloque y responsiva */
    display: block !important;
    max-width: 100% !important;
    height: auto !important;

    /* Propiedades de transición para suavizar el efecto */
    transition: filter 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.4s ease-out !important;
    transform-origin: center center !important; /* El efecto se aplica desde el centro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Sombra sutil en estado normal */
    
    /* En estado normal, la imagen conserva su color original.
       No se aplica ningún filtro de color aquí. */
}

/* Efecto al pasar el ratón sobre las imágenes de productos */
.product-inner.pr img:hover {
    /* Efecto Duotono Azul (simulado con filtros CSS) */
    /* Puedes ajustar los valores de saturate, hue-rotate, brightness y sepia
       para conseguir el tono de duotono azul exacto que prefieras. */
    filter: saturate(150%) hue-rotate(190deg) brightness(110%) sepia(50%) !important; 
    
    /* Elevación y Zoom */
    transform: translateY(-5px) scale(1.02) !important; /* Eleva 5px y agranda un 2% */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; /* Sombra más pronunciada al elevarse */
}
.jas-menu>li>ul>li {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(76 203 250 / 27%) 79%, rgb(120 221 255 / 36%) 89%, rgb(88 226 255 / 69%) 100%) !important;
}
/* Estilos para el contenedor de cada guía */
.guias-entry {
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    opacity: 0; /* Oculto por defecto para el efecto de entrada */
    transform: translateY(20px); /* Posición inicial para el efecto */
    animation: fadeInSlideUp 0.8s forwards; /* Animación de entrada */
}

/* Efecto de entrada para cada elemento. Retraso para que no entren todos a la vez */
.guias-entry:nth-child(2) { animation-delay: 0.1s; }
.guias-entry:nth-child(3) { animation-delay: 0.2s; }
.guias-entry:nth-child(4) { animation-delay: 0.3s; }
.guias-entry:nth-child(5) { animation-delay: 0.4s; }
.guias-entry:nth-child(6) { animation-delay: 0.5s; }

/* Definición de la animación de entrada */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para la imagen destacada */
.guias-featured-image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guias-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: drop-shadow(4px 4px 10px rgba(0, 100, 255, 0.2)); /* Sombra azul difuminada */
    transition: filter 0.3s ease;
}

/* Hover para la imagen */
.guias-entry:hover .guias-featured-image {
    transform: translateY(-5px); /* Levanta la imagen */
}

/* Estilos para el título de la guía */
.guias-title a {
    font-size: 1.8em;
    font-weight: 900;
    line-height: 1.2em;
    text-transform: none;
    color: #202c2d;
    text-decoration: none;
    text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -2px 2px #808d93;
    transition: color 0.3s ease; /* Transición para el color */
}

/* Hover para el título */
.guias-title a:hover {
    color: #eb0f47; /* Color rosa */
}

/* Estilos para el excerpt (descripción) */
.guias-excerpt p {
    font-size: 1em;
    line-height: 1.5em;
    padding: .25em 0;
}

/* Estilos para el botón de 'Leer Más' */
.more-link-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #202c2d;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Efecto hover para el botón */
.more-link-arrow:hover {
    background-color: #eb0f47; /* Color rosa */
    border-color: #eb0f47; /* Borde rosa */
}

/* Estilos para la flecha dentro del botón */
.arrow-icon {
    font-size: 1.5em;
    line-height: 1;
    color: #202c2d;
    transition: color 0.3s ease;
}

/* Estilos para la flecha al hacer hover */
.more-link-arrow:hover .arrow-icon {
    color: #fff; /* Color blanco */
}
/* Estilo del título para pantallas de escritorio */
.archive-title {
    font-size: 3.5em; /* Tamaño del título en desktop */
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: #202c2d;
    
    /* Múltiples text-shadows para el efecto 3D */
    text-shadow: 
        1px 1px 0 #fff,
        2px 2px 0 #cdd2d5,
        3px 3px 0 #cdd2d5,
        4px 4px 0 #cdd2d5,
        5px 5px 0 #cdd2d5,
        6px 6px 0 #cdd2d5,
        7px 7px 0 #cdd2d5,
        8px 8px 0 #808d93,
        9px 9px 0 #808d93,
        10px 10px 0 #808d93,
        11px 11px 10px rgba(0, 0, 0, 0.4);
}

/* Estilo para la descripción */
.archive-description {
    font-size: 1.2em;
    line-height: 1.5;
    color: #587da4;
    margin-top: 10px;
}

/* --- Media Query para móviles (pantallas de hasta 767px) --- */
@media (max-width: 767px) {
    .archive-title {
        font-size: 2.2em; /* Tamaño más pequeño en móvil */
        
        /* Text-shadow simplificado para evitar que se corte */
        text-shadow: 
            1px 1px 0 #fff,
            2px 2px 0 #cdd2d5,
            3px 3px 0 #cdd2d5,
            4px 4px 5px rgba(0, 0, 0, 0.3);
    }
}
/* Media query para móviles */
@media (max-width: 767px) {
    /* Forzar que cada producto ocupe el 100% del ancho */
    .jas-product-items .jas-col-xs-6,
    .jas-product-items .jas-col-xs-12,
    .jas-product-items .jas-col-sm-6,
    .jas-product-items .jas-col-md-4,
    .jas-product-items .jas-col-lg-3 {
        width: 100% !important; /* Forzar el ancho al 100% */
        flex: 0 0 100% !important; /* Usar flexbox para el ancho */
    }

    /* Ajustar el margen y el padding */
    .jas-product-items .jas-col-xs-6,
    .jas-product-items .jas-col-xs-12,
    .jas-product-items .jas-col-sm-6,
    .jas-product-items .jas-col-md-4,
    .jas-product-items .jas-col-lg-3 {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 30px; /* Separación entre productos */
    }

    /* Centrar el texto en los productos */
    .product-info-wrap {
        text-align: center;
    }
}