/*
Theme Name: HG_Framework
Theme URI: http://www.hectorgarrofe.com
Author: Hector Garrofe
Author URI: http://www.hectorgarrofe.com
Description: Un theme básico sobre el que construir todos mis proyectos.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hg_framework
*/

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* variables */
:root {
  --color-primario: 166, 166, 166;
  --color-secundario: #EBB510;
  --color-purple: #8e44ad;
}

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #EAEAEA;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* RESET END */

/* Estilos básicos */

.link{
	text-decoration: none;
}

article h1{
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-size: 32px;
        margin-bottom: 20px;
        color: #6D57EA;
        line-height: 1.2em;
}

article h2{
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-size: 32px;
        margin-bottom: 20px;
        color: #6D57EA;
        margin: 20px 0;
        padding-bottom: 10px;
        border-bottom: 4px solid rgba(var(--color-primario), 0.15);
}

article h3{
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-size: 32px;
        margin-bottom: 20px;
        color: #6D57EA;
        margin: 20px 0;
        padding-bottom: 10px;
        border-bottom: 4px solid rgba(var(--color-primario), 0.1);
}

article p{
        font-family: "Raleway", sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.6em;
        color: #000000;
        margin-bottom: 20px;
}

p strong{
        font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6{
        font-family: "Pixelify Sans", sans-serif;
        font-weight: 500;
        font-size: 32px;
        color: #6D57EA;
}

header#cabecera{
    float: left;
    width: 100%;
    background-image: linear-gradient(to top, #0f0209, #23061d, #330531, #3e024b, #41056a, #520578, #640385, #770092, #9b0089, #b8007e, #ce1173, #e03168);
    position: sticky;
    top: 0;
    z-index: 1100; /* ensure hamburger remains clickable above mobile menu */
    transition: background 0.3s ease; /* avoid unwanted animations on small scroll */
    overflow: hidden;
    perspective: 800px;
}

header#cabecera::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .2) 1px, transparent 1px);
    transform: rotateX(50deg);
    transform-origin: top center;
    animation: 5s linear infinite crawlingWall;
    background-position-y: top;
    z-index: 0;
}

header#cabecera .header-container {
    position: relative;
    z-index: 1;
}

.home header#cabecera{
	margin-bottom: 20px;
}

.header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 20px;
        box-sizing: border-box;
        transition: padding 0.3s ease;
}

.header-top {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}

.header-top .social-icons {
        position: absolute;
        right: 0;
        display: flex;
        gap: 10px;
        top: 50%;
        transform: translateY(-50%);
}

.header-top .social-icons img {
        max-height: 24px;
        width: auto;
}

.header-top .hamburger {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
}

header#cabecera.shrink .header-container {
	padding: 5px 20px;
}

.header-container .logo {
    margin: 0;
    flex-grow: 0;
}

.header-container .main-navigation {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-container .menu-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 13px;
}

#primary-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#primary-menu .menu-item {
    margin-left: 20px;
}

#primary-menu .menu-item a,
#primary-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    transition: all 0.3s;
    font-family: "Roboto Flex", sans-serif;
    font-weight: 800;
}

#primary-menu .menu-item a:hover{
	color: #FFEA00;
}

#primary-menu .current-menu-item a{
    color: #FFEA00;
}

#primary-menu .telegram-item a {
    color: #00DEFF;
}

.header-container .logo img {
	max-height: 145px;
	height: auto;
	width: auto;
	transition: max-height 0.3s ease;
}

header#cabecera.shrink .header-container .logo img {
        max-height: 100px;
}

header#cabecera.shrink #primary-menu .menu-item a,
header#cabecera.shrink #primary-menu a {
        font-size: 18px;
}

article ul,
article ol {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.8em;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    list-style-type: none; /* Desactiva el estilo de lista predeterminado */
    color: #000000;
}

article ul li,
article ol li {
    position: relative; /* Asegura que el contenido esté correctamente posicionado */
    padding-left: 20px; /* Añade padding para separar el texto del cuadrado */
}

article ul li::before,
article ol li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 11px; /* Ajusta la posición vertical del cuadrado */
    width: 6px; /* Ancho del cuadrado */
    height: 6px; /* Alto del cuadrado */
    background-color: rgba(var(--color-primario), 0.7); /* Color del cuadrado */
    display: inline-block;
}

article ul li strong,
article ol li strong{
	font-weight: 600;
}

/* Contenedor principal */
.container {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
}

footer.site-footer{
        background: #C5C5C5;
        color: #000;
        margin-top: 80px;
}

footer.site-footer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	padding-top: 40px;
	padding-bottom: 40px;
	box-sizing: border-box;	
}

.footer-navigation {
    display: flex;
    justify-content: flex-start; /* Alinea los elementos a la izquierda */
    align-items: flex-start; /* Alinea las columnas arriba */
    gap: 60px;               /* Espaciado entre columnas */
    flex-wrap: wrap;         /* Permite que los elementos se envuelvan en líneas múltiples */
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 60px;               /* Espaciado entre columnas */
    justify-content: flex-start; /* Alinea a la izquierda */
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-menu > li {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-menu > li > a {
    color: #000;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 24px;
    text-decoration: none;
    padding: 10px 0;
    display: block;
}

.footer-menu li ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li ul li a {
    color: #000;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 0;
    display: block;
}

.footer-menu a:hover {
    color: #333;
}

.prefooter-navigation {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.prefooter-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 40px;
}

.prefooter-menu > li > a {
    color: #000;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 20px;
    text-decoration: none;
    padding: 10px 0;
    display: block;
}

.site-info {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin-top: 0;
    color: #000;
    background: #C5C5C5;
    font-size: 12px;
}

.button{
    background: var(--color-purple);
    padding: 10px 20px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
    display: inline-block;
}

.button:hover{
    background: #6d2493;
}

.button-container {
    text-align: right; /* Alinea el contenido del contenedor a la derecha */
    margin-top: 20px; /* Ajusta el margen superior para separar del contenido anterior */
}

.blog #content article{
	border-bottom: 4px solid rgba(var(--color-primario), 0.15);
	margin-bottom: 40px;
}

#breadcrumbs-container {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    min-height: 30px; /* Ajusta según tus necesidades */
    background-color: #D9D9D9;
    padding: 10px; /* Espacio interno para mejor presentación */
    margin-bottom: 20px;
}

#breadcrumbs {
    margin: 0;
    color: #E75EFF;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 500;
    font-size: 14px;
}

#breadcrumbs a{
    color: #E75EFF;
    text-decoration: none;
}

#ultimas-noticias h2,
#ultimas-ofertas h2,
#ultimas-guias h2{
	font-size: 24px;
}


/* Breakpoints RESPONSIVE */
@media (max-width: 1200px) {
    .container {
        max-width: 980px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 880px;
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 660px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 35px;
    }

	.header-container .logo img {
    	max-height: 75px;
    }
    
    .sidebar,
    #ultimas-noticias{
	    display: none;
    }
}

@media (max-width: 420px) {
	.header-container .logo {
        margin-left: 50px !important;
    }
}

@media (max-width: 400px) {
    .footer-navigation {
        flex-direction: column;    /* Disposición en columna en pantallas pequeñas */
        align-items: center;       /* Centra los elementos horizontalmente */
    }

    .footer-menu {
        flex-direction: column;    /* Disposición en columna para los elementos del menú */
        gap: 0px;                 /* Menor espacio entre elementos */
    }

    .footer-menu > li {
        width: 100%;
        align-items: center;
    }

    .footer-menu li ul li a,
    .footer-menu > li > a {
        width: 100%;
        }

    .prefooter-navigation {
        flex-direction: column;
        align-items: center;
    }

    .prefooter-menu {
        flex-direction: column;
        gap: 0px;
    }
}

/* Layout for content and sidebar */
#content.content-wrapper {
    display: flex;
    gap: 40px;
}

.main-content {
    flex: 4;
}

.sidebar {
    flex: 1;
	padding-top: 7px;
    box-sizing: border-box;
}

.test-box {
    height: 100px;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-banner {
    margin-bottom: 20px;
}

.sidebar-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6D57EA;
    text-transform: uppercase;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
}

.sidebar-title .section-icon {
    width: 32px;
    height: auto;
}

.sidebar-offers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.sidebar-offers .offer-item {
    width: 100%;
}

.sidebar-offers .offer-content {
    display: flex;
    gap: 10px;
}

.sidebar-offers .offer-content .button {
    flex: 1;
    text-align: center;
}

@media (max-width: 992px) {
    #content.content-wrapper {
        flex-direction: column;
    }

    .main-content,
    .sidebar {
        flex: 1 0 100%;
    }
}

/* Home page sections */
.home-section {
    margin-bottom: 40px;
}

.home-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-section h2 .section-icon {
    width: 32px;
    height: auto;
}

.news-grid,
.guides-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch; /* ensure equal-height items */
}

.news-item {
    width: calc(50% - 10px);
    display: flex;
}

.guide-item {
    width: calc(50% - 10px);
}

.news-item img {
    width: 100%;
    height: auto;
}

.guide-item img {
    width: 100%;
    height: auto;
}

.news-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.offer-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.news-title {
    background: #E1D7E5;
    color: #000;
    padding: 10px;
    text-align: center;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

.view-more {
    text-align: right;
    margin-top: 20px;
}

.offers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Show the ninth offer */
.offers-grid .offer-item:nth-child(9) {
    display: block; /* always show the ninth offer */
}

.offer-item {
    width: calc(33.333% - 13.33px);
    padding: 0;
    color: #000;
    box-sizing: border-box;
}

.purple-box {
    background: #E1D7E5;
    color: #000;
}

.offer-item img {
    width: 100%;
    height: auto;
    margin-bottom: 0;
}

.offer-title {
    background: #8D2BBB;
    color: #FFFFFF;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 14px;
    padding: 5px 10px;
    text-align: center;
    margin-bottom: 10px;
}

.offer-content {
    color: #000;
    padding: 10px 15px;
    box-sizing: border-box;
}

.offer-content a{
	text-decoration: none;
	color: #8D2BBB;
}

/* Style links inside offer content */
.offer-content a.offer-link {
    color: #E1C1E5;
    background: #7E48B8;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #7E48B8;
}

/* Style video review button */
.offer-content .video-link {
    background: #cc181e;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #cc181e;
}

/* Style coupon button */
.offer-content .coupon-link {
    background: var(--color-secundario);
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-secundario);
    position: relative; /* For floating label */
}

/* Diagonal "cupón" label */
.offer-content .coupon-link::before {
    content: 'cupón';
    position: absolute;
    top: 7px;
    left: 0;
    transform: translate(-35%, -45%) rotate(-30deg);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    pointer-events: none;
}

/* Layout for offer buttons on the homepage */
#ultimas-ofertas .offer-content {
    display: flex;
    gap: 10px;
}

#ultimas-ofertas .offer-content .button {
    flex: 1;
    text-align: center;
}

#ultimas-ofertas .offer-item {
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ultimas-ofertas .offer-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.offer-date {
    font-size: 12px;
    text-align: right;
    padding: 5px 15px 10px;
    color: #555;
}

/* Style hashtags inside offer content and single oferta posts */
.offer-content .hashtag,
.single-oferta .entry-content .hashtag {
    color: #7E48B8;
    background: #E1C1E5;
    padding: 2px 4px;
    border-radius: 4px;
}

.featured-image img {
    width: 100%;
    height: auto;
}


@media (max-width: 1200px) {
    .offer-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .news-item,
    .guide-item {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .offer-item {
        width: 100%;
    }
}

@media (max-width: 960px) {
	.header-container .logo{
		margin: 0 auto;
	}
}


/* HG */
#ultimas-noticias h2,
#ultimas-ofertas h2,
#ultimas-guias h2{
	margin-bottom: 28px;
}


/* END HG */

.footer-logo img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

/* Pagination styles */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    background: #E1D7E5;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-family: "Pixelify Sans", sans-serif;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--color-purple);
    color: #fff;
}

/* Archive layout */
.archive-post {
    margin-bottom: 40px;
    border-bottom: 4px solid rgba(var(--color-primario), 0.15);
    padding-bottom: 20px;
    overflow: hidden;
}

.archive-thumbnail {
    float: left;
    margin-right: 20px;
    width: 200px;
}

.archive-thumbnail img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .archive-post {
        flex-direction: column;
    }
    .archive-thumbnail {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
        float: none;
    }
}

/* Single oferta layout */
.single-oferta .oferta-thumbnail {
    float: left;
    width: 25%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.post-type-archive-oferta .oferta-thumbnail img,
.single-oferta .oferta-thumbnail img{
	max-width: 100%;
	height: auto;
}

.single-oferta .entry-content {
    overflow: hidden; /* ensure text wraps around floated image */
}

@media (max-width: 768px) {
    .single-oferta .oferta-thumbnail {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .single-oferta .entry-content {
        overflow: visible;
    }
}

/* Single post layout */
.single-post .featured-image,
.blog .featured-image {
    margin-bottom: 20px;
}

.single-post .entry-content {
    overflow: hidden;
}

/* Single oferta-web layout */
.single-oferta-web .offer-item {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.single-oferta-web .offer-item img {
    width: 100%;
    height: auto;
    display: block;
}

.single-oferta-web .offer-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.single-oferta-web .entry-content{
        padding: 20px;
        box-sizing: border-box;
}

.single-oferta-web .offer-content {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.single-oferta-web .offer-content .button {
    flex: 1;
    text-align: center;
}

.single-oferta-web .video-row {
    margin-top: 10px;
}

.single-oferta-web .video-row .video-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.single-oferta-web .video-row .video-link span {
    display: inline-block;
}

.single-oferta-web .video-row .video-link img {
    width: 20px;
    height: 20px;
}

.single-oferta-web .oferta-web{
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Home post layout */
.home.blog .featured-image {
    float: left;
    width: 25%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.home.blog .entry-content {
    overflow: hidden;
}

/* Archive oferta layout */
.oferta-archive .oferta-thumbnail {
    float: left;
    width: 25%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.oferta-archive .entry-content {
    overflow: hidden;
}

@media (max-width: 768px) {
    .single-post .featured-image,
    .oferta-archive .oferta-thumbnail {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .single-post .entry-content,
    .oferta-archive .entry-content {
        overflow: visible;
    }
    .home.blog .featured-image {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .home.blog .entry-content {
        overflow: visible;
    }
}

/* Highlight special Berrako price paragraphs */
.precio-berrako {
    font-weight: bold;
}

/* Highlight LINK de compra links */
.highlight-link-de-compra,
article.single-oferta a {
    background: #EBD8EE;
    color: #7E48B8;
    text-decoration: none;
}



/* GENERADOR DE IMÁGENES */
#descargarBtn{
	background: #8e44ad;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 20px;
	padding: 15px;
	box-sizing: border-box;
}

#descargarBtn:hover{
	background: #b069cf;
	cursor: pointer;	
}


#oferta-telegram{
	background: url('img/fondo_oferta.png') no-repeat center center;
	width: 1073px;
	height: 844px;
	position: relative;
}

#oferta-telegram #bar-title{
	width: 978px;
	height: 108px;
	background: #292929;
	position: absolute;
	right: 0;
	top: 54px;
	z-index: 100;
}

#oferta-telegram #bar-title #bar-title-text{
	color: #fff;
	font-size: 48px;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 26px;
	text-align: center;
	background: transparent;
	width: 800px;
}

#oferta-telegram #bar-title #bar-title-text.long-text{
	color: #fff;
	font-size: 42px;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 12px;
	text-align: center;
	background: transparent;
	width: 800px;
}

#oferta-telegram #oferta-logo{
	width: 220px;
	height: 205px;
	background: transparent;
	position: absolute;
	left: 20px;
	top: 10px;
	z-index: 101;
}

#oferta-telegram #tuber-thumbsup{
	width: 320px;
	height: 343px;
	background: transparent;
	position: absolute;
	right: 20px;
	bottom: 0;
	z-index: 101;
}

#oferta-telegram #precio-berrako-telegram{
	width: 520px;
	height: 108px;
	background: #292929;
	position: absolute;
	right: 16px;
	top: 298px;
	z-index: 100;
}

#oferta-telegram #precio-berrako-telegram #berrako-text{
	color: #FFEA00;
	font-size: 48px;
	font-weight: 600;
	position: absolute;
	left: 20px;
	top: 28px;
}

#oferta-telegram #precio-berrako-telegram #berrako-number{
	color: #ffffff;
	font-family: "Roboto Flex", sans-serif;
	font-size: 64px;
	font-weight: 800;
	position: absolute;
	right: 20px;
	top: 23px;
}

#oferta-telegram #precio-normal-telegram{
	width: 520px;
	height: 108px;
	background: transparent;
	position: absolute;
	right: 16px;
	top: 398px;
	z-index: 100;
}

#oferta-telegram #precio-normal-telegram #berrako-text{
	color: #fff;
	font-size: 48px;
	font-weight: 400;
	position: absolute;
	left: 20px;
	top: 28px;
}

#oferta-telegram #precio-normal-telegram #berrako-number{
	color: #ffffff;
	font-size: 64px;
	font-weight: 400;
	position: absolute;
	right: 20px;
	top: 23px;
}

#oferta-telegram #foto-producto-oferta{
        width: 460px;
        height: 375px;
        position: absolute;
        background: transparent;
        top: 244px;
        left: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
}

#oferta-telegram #foto-producto-oferta img {
    display: block;
    border: 10px solid rgba(41,41,41,0.2);
    max-width: 360px;
    width: auto;
    max-height: 375px;
    height: auto;
}

#oferta-telegram #descripcion-oferta{
	width: 596px;
	height: 129px;
	font-weight: 400;
	font-size: 24px;
	color: #fff;
	position: absolute;
	left: 46px;
	bottom: 60px;
	line-height: 30px;
}

#oferta-telegram #descripcion-oferta.long-text{
        width: 596px;
        height: 129px;
        font-weight: 400;
        font-size: 22px;
        color: #fff;
        position: absolute;
        left: 46px;
        bottom: 60px;
        line-height: 28px;
}

@keyframes crawlingWall {
    to {
        background-position-y: bottom;
    }
}

/* Carousel styles */
.carousel {
    position: relative;
}

.carousel .news-grid,
.carousel .guides-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.carousel .news-grid::-webkit-scrollbar,
.carousel .guides-grid::-webkit-scrollbar {
    display: none;
}

.carousel .news-grid.dragging,
.carousel .guides-grid.dragging {
    cursor: grabbing;
}

.carousel .news-item,
.carousel .guide-item {
    flex: 0 0 50%;
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .carousel .news-item,
    .carousel .guide-item {
        flex-basis: 100%;
    }
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #8D2BBB;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 2;
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

.carousel-dots {
    text-align: center;
    margin-top: 10px;
}

.carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.carousel-dot.active {
    background: #8D2BBB;
}

/* Toast message for copied coupon */
.coupon-toast {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    opacity: 0;
    animation: fadeInOut 2s ease forwards;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

#ultimas-guias{
	display: none;
}