:root {
	--wp--preset--font-size--small: 18px;
    --wp--preset--font-size--medium: 32px;
    --wp--preset--font-size--large: 53.16px;
    --wp--preset--font-size--x-large: 126.86px;
}

header {
    padding: 25px;
}

.header-nav {
    display: none !important;
    max-width: 940px;
    width: 100%;
}

.header-nav li {
	font-weight: 400;
}

header .content {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	max-width: 1470px;
}

header .logo,
header .header-actions {
	margin: 0 !important;
}

:where(.wp-block-search__input) {
	padding: 0 !important;
}

.wp-block-navigation__responsive-dialog {
    margin: 1em;
}
.wp-block-avatar::before
.wp-block-navigation .wp-block-navigation-item {
	margin: 0 1em;
}

/* 1. Ocultar el icono SVG (la lupa) que trae WordPress por defecto */
.custom-search-icon .wp-block-search__button svg {
    display: none !important;
}

/* 2. Dibujar tu nuevo icono usando máscaras CSS */
.custom-search-icon .wp-block-search__button {
    background-color: #1C3920 !important;
    /* Usa el color de texto del tema (Green Dark) */
    width: 30px;
    /* Ancho de tu SVG */
    height: 30px;
    /* Alto de tu SVG */
    padding: 0;
    border: none;

    /* Aquí está tu SVG codificado */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.6563 28.6563L22.7203 22.7203M25.9271 15.0104C25.9271 21.0395 21.0395 25.9271 15.0104 25.9271C8.98131 25.9271 4.09375 21.0395 4.09375 15.0104C4.09375 8.98131 8.98131 4.09375 15.0104 4.09375C21.0395 4.09375 25.9271 8.98131 25.9271 15.0104Z' stroke='black' stroke-width='2.72917' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.6563 28.6563L22.7203 22.7203M25.9271 15.0104C25.9271 21.0395 21.0395 25.9271 15.0104 25.9271C8.98131 25.9271 4.09375 21.0395 4.09375 15.0104C4.09375 8.98131 8.98131 4.09375 15.0104 4.09375C21.0395 4.09375 25.9271 8.98131 25.9271 15.0104Z' stroke='black' stroke-width='2.72917' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- CUSTOM AVATAR ICON --- */

/* 1. Ocultar la imagen real del avatar (Gravatar) */
.wp-block-avatar img {
    display: none !important;
    visibility: hidden;
}

/* 2. Crear el contenedor para el icono si no existe */
.wp-block-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Aseguramos que el contenedor tenga el tamaño que definiste en el JSON */
    width: 30px;
    height: 30px;
    color: var(--wp--preset--color--green-dark);
    /* Forzamos el color por si acaso */
}

/* 3. Dibujar el SVG usando ::before */
.wp-block-avatar::before {
    content: "";
    display: block;
    width: 30px;
    /* Ancho de tu SVG */
    height: 30px;
    /* Alto de tu SVG */
    background-color: currentColor;
    /* Hereda el color del texto (Green Dark) */

    /* Tu SVG codificado */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.2917 28.6563V25.9271C27.2917 24.4794 26.7166 23.0911 25.693 22.0675C24.6694 21.0438 23.281 20.4688 21.8334 20.4688H10.9167C9.46907 20.4688 8.08072 21.0438 7.05708 22.0675C6.03345 23.0911 5.45837 24.4794 5.45837 25.9271V28.6563M21.8334 9.55208C21.8334 12.5666 19.3896 15.0104 16.375 15.0104C13.3605 15.0104 10.9167 12.5666 10.9167 9.55208C10.9167 6.53753 13.3605 4.09375 16.375 4.09375C19.3896 4.09375 21.8334 6.53753 21.8334 9.55208Z' stroke='black' stroke-width='2.72917' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.2917 28.6563V25.9271C27.2917 24.4794 26.7166 23.0911 25.693 22.0675C24.6694 21.0438 23.281 20.4688 21.8334 20.4688H10.9167C9.46907 20.4688 8.08072 21.0438 7.05708 22.0675C6.03345 23.0911 5.45837 24.4794 5.45837 25.9271V28.6563M21.8334 9.55208C21.8334 12.5666 19.3896 15.0104 16.375 15.0104C13.3605 15.0104 10.9167 12.5666 10.9167 9.55208C10.9167 6.53753 13.3605 4.09375 16.375 4.09375C19.3896 4.09375 21.8334 6.53753 21.8334 9.55208Z' stroke='black' stroke-width='2.72917' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---- 3. CINTILLO (Infinite Loop) ---- */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: var(--wp--preset--color--green-dark);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 2px 0;
    white-space: nowrap;
}

.ticker {
    display: flex;
    animation: marquee 20s linear infinite;
}

.ticker-item {
    font-size: 5.8px;
    font-weight: 100;
    text-transform: uppercase;
    padding-right: 1rem;
    color: #fff;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Mueve a la izquierda */
}

.about-slider {
    padding-top: 1em;
    padding-bottom: 35px;
}

.about {
    width: 100%;
    height: 395px;
    min-height: inherit;
    padding: 3em 1.5em;
    display: block;
}

.about h2,
.brands-slider h2,
.map h2 {
    margin: 0;
}

.about p {
    margin: 0;
    margin-bottom: 1.4em;
    line-height: 1;
    font-size: 24px;
}

.about a {
    font-size: 13px;
}

.about:before {
    content: '';
    background: #0000005c;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
}

.about .wp-block-cover__inner-container {
    z-index: 2;
}

.video {
    margin-bottom: 1em;
}

@media (max-width: 768px) {
    .brands-header {
        text-align: center;
    }

    .brands-header .wp-block-buttons {
        justify-content: center;
        width: 100%;
    }
}

.brands-slider-track,
.gallery-slider-track,
.brands-header,
.gallery-general,
.mapImage {
    max-width: 600px;
	padding: 0 60px !important;
}

.brands-slider-track .wp-block-group {
    height: 180px;
    overflow: hidden;
}

.brands-slider-track .wp-block-image {
    height: 100%;
    display: flex;
    align-items: center;
}

.brands-slider-track img {
    width: auto;
}

.sinners img {
    max-width: 45.38px;
}

.rana_dorada img,
.germania img {
    max-width: 85.09px;
}

.pedro_mandinga img {
    max-width: 49.53px;
}

.irish img {
    max-width: 55px;
}

.colo img {
    max-width: 49px;
}

.gallery-slider-track .wp-block-image img {
    max-height: 180px;
    max-width: 180px;
}

/* SLIDER */
.slick-prev:before,
.slick-next:before {
    display: none;
}

.slick-prev {
    left: -65px !important;
}

.slick-next {
    right: -65px !important;
}

.slick-prev img,
.slick-next img {
    width: 100%;
    height: 100%;
}

.slick-prev,
.slick-next {
    width: 12.9px !important;
    height: 12.9px !important;
}

.slick-initialized .slick-slide.is-layout-flex {
    display: flex !important;
}

.gallery-general {
    margin-top: 2em;
    margin-bottom: 60px;
}

.map {
    min-height: 350px;
}

.map a {
    font-size: 14px !important;
}

footer {
	display: flex;
    justify-content: center;
    align-items: center;
	background-color: var(--wp--preset--color--green-dark) !important;
}

footer .wp-block-separator {
    width: 100%;
}

footer .social .wp-block-column {
    min-width: 280px;
}

footer .content {
    padding-top: 3em;
    padding-right: 3em;
    padding-bottom: 4em;
    padding-left: 3em;
	max-width: 1400px;
    width: 100%;
}

footer .links p {
    margin: .5em 0;
}

footer .links p a {
    text-decoration: none;
}

footer p {
	font-size: 5.2px;
}

footer .logo {
    margin-top: 2em;
    justify-content: center;
}

footer h2 {
	font-weight: 100;
	margin: 0 25px;
}

footer h2 strong {
	font-weight: bold;
}

footer .is-layout-flex {
	flex-wrap: nowrap !important;
}

footer .wp-block-image {
	width: 9.75px;
}

.tiker-group {
    margin: 1em 0;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 1em;
}

.entry-content .content {
    padding: 2em;
}

.entry-content .content h2 {
    margin-top: 0;
}

[aria-current="page"] {
    font-weight: 400;
    text-decoration: underline;
}

.brands-slider.slider-page {
    margin-top: 4em;
}

.mapImage {
    padding-top: 4em;
}

.entry-content {
    padding: 1em;
}

.entry-content a {
    color: var(--wp--preset--color--green-dark);
}

nav .wp-block-navigation-item__content {
	font-size: 10px;
}

.header-nav {
	display: flex !important;
	gap: 10px;
}

header .logo,
.header-actions > * {
	width: 18px;
}

#about-us {
	padding: 20px 60px;
	line-height: 1.07;
	font-size: 8.03px;
}

.brands-slider h2 {
	padding: 0 60px;
}

h2 {
	font-size: 11.57px;
}

footer > div {
	gap: 0;
}

foter figure {
	display: flex;
	align-items: center;
}

@media (min-width: 992px) {
	
	footer .content > div:last-child .wp-block-group {
		margin-top: 12px;
	}
	
	.slick-prev,
	.slick-next {
		width: 59.29px !important;
		height: 59.29px !important;
	}

	.header-nav {
		gap: 60px;
	}

	header .logo {
		width: 68px;
	}
	
	.header-actions > * {
		width: 32px;
	}
	
	nav .wp-block-navigation-item__content {
		font-size: 34px;
	}
	
    header {
		padding-top: 25px;
        padding-bottom: 25px;
    }

    header .custom-logo-link img {
        width: 60px;
    }

    .header-nav-m {
        display: none !important;
    }
	
	h2 {
		font-size: 53.16px;
	}
	
	#about-us {
		padding: 85px 0;
		letter-spacing: -2px;
	}
	
	#about-us p {
		font-size: 37.17px;
	}

    .about {
        padding: 3.5em 4em;
    }

    .about h2,
    .brands-slider h2,
    .map h2 {
        width: inherit;
        letter-spacing: -1px;
    }

    .about p {
        font-size: 27px;
    }

    .video {
        margin-bottom: 25px;
    }

    .brands-slider-track,
    .gallery-slider-track {
        max-width: inherit;
    }
	
    .brands-header {
        max-width: 1200px;
    }

    .brands-slider-track .wp-block-image img {
        max-height: 100px;
        width: auto;
        max-width: 200px;
    }

    .gallery-slider-track .wp-block-image img {
        max-height: 250px;
        max-width: 250px;
    }

    .brands-slider.slider-page {
        margin-top: 96px;
    }

    .about-slider {
        padding-top: 85px;
        padding-bottom: 85px;
		max-width: 960px;
    }

    .slick-prev,
    .slick-next {
        width: 50px !important;
        height: 50px !important;
    }

    .gallery-general,
	.mapImage {
        margin-top: 30px;
        margin-bottom: 90px;
		max-width: inherit;
    }

    .map {
        min-height: 430px;
    }

    .map a {
        font-size: 20px !important;
    }

    footer .content {
        padding-top: 5em;
        padding-bottom: 5em;
		gap: 0;
    }
	
	footer .links {
		width: 100%;
	}

    footer .links p {
        margin: 1em 0;
    }
	
	footer p {
		font-size: 18px
	}

	footer .wp-block-image {
		width: 43.43px;
	}

    .ticker-item {
        font-size: 16px;
        padding-right: 0rem;
    }

    .ticker-wrap {
        padding: 10px 0 6px;
    }

    .tiker-group {
        margin: 2em 0;
    }

    :where(.wp-block-columns.is-layout-flex) {
        gap: 2em;
    }

    .entry-content .content {
        padding: 2em 4em;
    }
	
	#our-brands-company .sinners img {
		max-height: 130px;
	}
	
	#our-brands-company .rana_dorada img {
		max-width: 280px;
	}

	#our-brands-company .colo img {
		max-height: 70px;
	}
	
	.brands-slider-track {
		margin: 90px 0;
	}
	
}

.brands-slider-track .slick-active {
    opacity: .5;
}

.brands-slider-track .slick-current {
    opacity: 1;
}

.entry-content .gallery-general {
    margin: 3em 0 0;
}

.has-text-align-justify {
	text-align: justify;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667) !important;
}

.slick-dots {
	margin-left: -60px !important;
}