/* =========================================================
   SIN LÍMITE - MEGA MENÚ
   Colores del sitio:
   Principal  #FF5A00
   Secundario #111111
   Texto      #434343
   Énfasis    #FA7010
   Blanco     #FAFAF8
   Gris       #6B6B6B
   Gris claro #F5F5F5
========================================================= */

.sl-mega-menu-item {
	position: static !important;
}

.sl-mega-menu-item > a {
	position: relative;
	z-index: 100002;
}

.sl-mm-panel,
.sl-mm-panel * {
	box-sizing: border-box;
}

.sl-mm-panel {
	position: fixed;
	z-index: 100001;
	top: var(--sl-mm-top, 70px);
	left: var(--sl-mm-left, 50vw);
	transform: translate3d(0, 8px, 0);

	width: var(--sl-mm-width, min(1050px, calc(100vw - 30px)));

	background: #FFFFFF;
	border-top: 2px solid #FF5A00;
	box-shadow: 0 14px 32px rgba(17,17,17,.14);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .18s ease,
		transform .18s ease,
		visibility .18s ease;

	font-family: "Inter", sans-serif;
	text-align: left;
}

.sl-mega-menu-item:hover > .sl-mm-panel,
.sl-mega-menu-item.sl-mm-open > .sl-mm-panel,
.sl-mega-menu-item:focus-within > .sl-mm-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

.sl-mm-grid {
	display: grid;
	grid-template-columns: 1.42fr 1fr 1fr 1.08fr 1fr;
	width: 100%;
	margin: 0 auto;
	grid-template-rows: auto auto;
	column-gap: 22px;
	row-gap: 22px;
	padding: 24px 25px 22px;
}

.sl-mm-column,
.sl-mm-featured,
.sl-mm-service {
	min-width: 0;
}

.sl-mm-featured {
	grid-column: 1;
	grid-row: 1 / 3;
	background: #F7F7F7;
	padding: 18px;
	border-radius: 3px;
}

.sl-mm-kicker {
	display: block;
	margin-bottom: 7px;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .45px;
	color: #FF5A00;
}

.sl-mm-column h3,
.sl-mm-featured h3,
.sl-mm-service h3 {
	margin: 0 0 11px;
	padding: 0 0 8px;
	border-bottom: 2px solid #FF5A00;

	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: #111111;
}

.sl-mm-featured h3 {
	font-size: 18px;
}

.sl-mm-featured p {
	margin: 0 0 13px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #666666;
}

.sl-mm-column > a,
.sl-mm-featured-list a,
.sl-mm-service > a {
	display: block;
	margin: 0 0 6px;

	font-family: "Inter", sans-serif;
	font-size: 11.2px;
	font-weight: 400;
	line-height: 1.28;

	color: #555555;
	text-decoration: none !important;

	transition: color .15s ease, transform .15s ease;
}

.sl-mm-column > a:hover,
.sl-mm-featured-list a:hover,
.sl-mm-service > a:hover {
	color: #FF5A00 !important;
	transform: translateX(2px);
}

.sl-mm-featured-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.sl-mm-featured-list li {
	position: relative;
	margin: 0 0 7px;
	padding-left: 11px;
}

.sl-mm-featured-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #FF5A00;
}

.sl-mm-see-all {
	margin-top: 9px !important;
	color: #D75A22 !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
}

.sl-mm-featured-button {
	display: inline-block !important;
	margin: 3px 0 0 !important;
	padding: 9px 12px;

	background: #D75A22;
	color: #FAFAF8 !important;

	border-radius: 4px;

	font-family: "Inter", sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

.sl-mm-featured-button:hover {
	background: #E16A2D !important;
	transform: none !important;
}

.sl-mm-service {
	grid-column: 4 / 6;
	grid-row: 2;
	padding: 16px 17px;
	background: #FBEFE8;
	border-radius: 8px;
}

.sl-mm-service > span {
	display: block;
	margin-bottom: 5px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .35px;
	color: #FA7010;
}

.sl-mm-service h3 {
	margin-bottom: 10px;
}

.sl-mm-service h3::after {
	content: none;
}

.sl-mm-service > a {
	font-size: 11px;
	margin-bottom: 5px;
}

.sl-mm-service-link {
	margin-top: 8px !important;
	color: #D75A22 !important;
	font-weight: 700 !important;
}

.sl-mm-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	min-height: 34px;
	padding: 8px 0;

	background: #111111;
	color: #FAFAF8;

	font-family: "Inter", sans-serif;
	font-size: 10.5px;
}

.sl-mm-bottom-message {
	color: #FAFAF8 !important;
	margin-left: max(20px, calc((100vw - 1120px) / 2));
	text-decoration: none !important;
	font-size: 10.5px;
	line-height: 1.25;
}

.sl-mm-bottom-message strong {
	color: #FF5A00;
	font-weight: 700;
}

.sl-mm-bottom-message:hover strong {
	color: #FA7010;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1050px) {
	.sl-mm-panel {
		width: min(960px, calc(100vw - 24px));
	}

	.sl-mm-grid {
		column-gap: 17px;
		padding: 20px;
	}

	.sl-mm-column > a,
	.sl-mm-featured-list a,
	.sl-mm-service > a {
		font-size: 10.5px;
	}
}

/* =========================================================
   MOBILE
   Royal's mobile menu can remain the navigation container.
   The mega menu becomes an in-flow accordion panel.
========================================================= */
@media (max-width: 767px) {

	.sl-mega-menu-item {
		position: relative !important;
	}

	.sl-mm-panel {
		position: relative;
		top: auto;
		left: auto;
		transform: none;

		width: 100%;
		max-width: none;

		border-top: 2px solid #FF5A00;
		box-shadow: none;

		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.sl-mega-menu-item.sl-mm-open > .sl-mm-panel,
	.sl-mega-menu-item:focus-within > .sl-mm-panel {
		display: block;
	}

	.sl-mm-grid {
		display: block;
		padding: 15px;
	}

	.sl-mm-featured,
	.sl-mm-column,
	.sl-mm-service {
		margin-bottom: 15px;
	}

	.sl-mm-featured {
		padding: 15px;
	}

	.sl-mm-service {
		padding: 15px;
	}

	.sl-mm-bottom {
		display: block;
		padding: 12px 15px;
	}

	.sl-mm-bottom-links {
		margin-top: 9px;
		gap: 12px;
	}
}


/* Desktop: fixed, centered panel matching the reference proportions. */
@media (min-width: 768px) {
	.sl-mm-panel {
		max-width: none;
		max-height: calc(100vh - 75px);
		overflow-y: auto;
	}
}


@media (max-width: 767px) {
	.sl-mm-grid {
		width: 100%;
		margin: 0;
	}

	.sl-mm-bottom-message {
		margin-left: 15px;
	}
}


/* v1.5 product-link colors */
.sl-mm-column > a,
.sl-mm-featured-list a,
.sl-mm-service > a {
    color: #555555 !important;
}

.sl-mm-column > a:hover,
.sl-mm-featured-list a:hover,
.sl-mm-service > a:hover {
    color: #FF5A00 !important;
}

.sl-mm-see-all,
.sl-mm-service-link {
    color: #FF5A00 !important;
}

.sl-mm-see-all:hover,
.sl-mm-service-link:hover {
    color: #FA7010 !important;
}


/* =========================================================
   v1.6 — FORCE MEGA MENU STYLES
   Loaded late + high specificity + !important to avoid
   overrides from Elementor, Royal Addons or the theme.
========================================================= */

html body .sl-mega-menu-item > .sl-mm-panel {
    position: fixed !important;
    left: var(--sl-mm-left, 50vw) !important;
    width: var(--sl-mm-width, min(1050px, calc(100vw - 30px))) !important;
    max-width: none !important;
    background: #FFFFFF !important;
    border-top: 2px solid #FF5A00 !important;
    box-shadow: 0 14px 32px rgba(17,17,17,.14) !important;
    font-family: "Inter", sans-serif !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
    width: 100% !important;
    margin: 0 auto !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column h3,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured h3,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service h3 {
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111111 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
    color: #555555 !important;
    font-family: "Inter", sans-serif !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a:hover,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a:hover,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a:hover {
    color: #FF5A00 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service-link {
    color: #FF5A00 !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom {
    background: #111111 !important;
    color: #FAFAF8 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom-message {
    color: #FAFAF8 !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom-message strong {
    color: #FF5A00 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button {
    background: #FF5A00 !important;
    color: #FAFAF8 !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button:hover {
    background: #FA7010 !important;
    color: #FAFAF8 !important;
}

html body .sl-mega-menu-item,
html body .sl-mega-menu-item > a,
html body .sl-mega-menu-item > .sl-mm-panel,
html body .sl-mega-menu-item > .sl-mm-panel * {
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    html body .sl-mega-menu-item > .sl-mm-panel {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
    }
}


/* v1.7 */
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-kicker,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service-link {
    color: #FF5A00 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button {
    background: #FF5A00 !important;
    color: #FAFAF8 !important;
    border-color: #FF5A00 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button:hover {
    background: #FA7010 !important;
    color: #FAFAF8 !important;
}


/* v1.8 — Category "Ver todo" color */
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all {
    color: #FF5A00 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all:hover,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all:focus {
    color: #FA7010 !important;
}


/* v1.9 — FORCE category "Ver todo" to Sin Límite orange */
html body header .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all:visited,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all:active {
    color: #FF5A00 !important;
    -webkit-text-fill-color: #FF5A00 !important;
    text-shadow: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all:hover,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all:focus {
    color: #FF5A00 !important;
    -webkit-text-fill-color: #FF5A00 !important;
}

html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all::before,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-see-all::after {
    color: #FF5A00 !important;
}


/* =========================================================
   v1.10 — HEADER WIDTH + FINAL COLOR OVERRIDES
========================================================= */

html body .sl-mega-menu-item > .sl-mm-panel {
    left: var(--sl-mm-left) !important;
    width: var(--sl-mm-width) !important;
    max-width: none !important;
}

/* "Ver servicios →" MUST use the site's orange. */
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-service-link,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-service-link:visited,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-service-link:hover,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-service-link:focus,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-mm-service-link:active {
    color: #FF5A00 !important;
    -webkit-text-fill-color: #FF5A00 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* "Ver todos los tableros →" MUST use the site's orange. */
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:visited,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:hover,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:focus,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:active {
    background: #FF5A00 !important;
    border-color: #FF5A00 !important;
    color: #FAFAF8 !important;
    -webkit-text-fill-color: #FAFAF8 !important;
}


/* =========================================================
   v1.13 — RESPONSIVE
   Desktop: normal mega menu
   Tablet: compact multi-column layout
   Mobile: mega menu hidden; normal Products link remains usable
========================================================= */

/* TABLET / SMALL LAPTOP */
@media (min-width: 768px) and (max-width: 1199px) {

    html body .sl-mega-menu-item > .sl-mm-panel {
        left: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        max-height: calc(100vh - 82px) !important;
        overflow-y: auto !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
        width: 100% !important;
        margin: 0 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
        row-gap: 20px !important;
        padding: 20px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        min-width: 0 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        grid-column: 2 / 4 !important;
        grid-row: auto !important;
        min-width: 0 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service h3 {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom {
        padding: 8px 20px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom-message {
        margin-left: 0 !important;
    }
}

/* NARROW TABLET */
@media (min-width: 768px) and (max-width: 819px) {

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 15px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        grid-column: 1 / 3 !important;
    }
}

/* MOBILE — do not display the mega menu */
@media (max-width: 767px) {

    html body .sl-mega-menu-item > .sl-mm-panel,
    html body .sl-mega-menu-item.sl-mm-open > .sl-mm-panel,
    html body .sl-mega-menu-item:hover > .sl-mm-panel,
    html body .sl-mega-menu-item:focus-within > .sl-mm-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* v1.14 — Preserve normal product capitalization on tablet */
@media (min-width: 768px) {

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service-link,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-button,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom-message {
        text-transform: none !important;
    }
}


/* =========================================================
   v1.15 — TABLET COMPACT LAYOUT
   Only affects 768–1199px.
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Prevent the theme/Royal typography from spreading characters apart. */
    html body .sl-mega-menu-item > .sl-mm-panel,
    html body .sl-mega-menu-item > .sl-mm-panel *,
    html body .sl-mega-menu-item > .sl-mm-panel a {
        letter-spacing: normal !important;
        word-spacing: normal !important;
    }

    /* Tighter text blocks. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    /* Keep category headings compact. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service h3 {
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    /* Reduce the spaces between grid rows/columns. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
        column-gap: 16px !important;
        row-gap: 12px !important;
        padding: 16px !important;
    }

    /*
     * IMPORTANT:
     * The service card was being pushed to a new row because it occupied
     * columns 2–3 while Brandeo already occupied column 2.
     * Put Marketing in column 3 so it sits beside Brandeo.
     */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        grid-column: 3 !important;
        grid-row: auto !important;
        align-self: start !important;
        margin: 0 !important;
    }

    /*
     * Do not make Tableros span two grid rows on tablet.
     * This prevents its height from stretching the lower rows.
     */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        grid-row: auto !important;
        align-self: start !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured p {
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom {
        min-height: 30px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    /* Narrow tablet: keep Marketing across the bottom but compact. */
    @media (min-width: 768px) and (max-width: 819px) {

        html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
            column-gap: 13px !important;
            row-gap: 10px !important;
            padding: 14px !important;
        }

        html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
            grid-column: 2 !important;
        }

        html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
        html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
        html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
            font-size: 10px !important;
        }
    }
}

/* =========================================================
   v1.16 — TABLET REBUILD
   Compact 3-column composition with explicit placement.
   No unnecessary empty row/column gaps.
========================================================= */

@media (min-width: 900px) and (max-width: 1199px) {

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "featured sen ident"
            "featured avis imp"
            "brand promo service" !important;
        column-gap: 14px !important;
        row-gap: 16px !important;
        padding: 16px !important;
        align-items: start !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        grid-area: featured !important;
        align-self: start !important;
        min-width: 0 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-senaletica {
        grid-area: sen !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-identificacion-corporativa {
        grid-area: ident !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-avisos-y-publicidad-exterior {
        grid-area: avis !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-impresion-y-papeleria {
        grid-area: imp !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-promocionales-y-souvenirs {
        grid-area: promo !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-brandeo-y-punto-de-venta {
        grid-area: brand !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        grid-area: service !important;
        margin: 0 !important;
        align-self: start !important;
        min-width: 0 !important;
    }

    /* Neutralize old row/column placement rules on these cards. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-row-two {
        grid-row: auto !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
        font-size: 10.5px !important;
        line-height: 1.18 !important;
        margin-bottom: 4px !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service h3 {
        font-size: 16px !important;
        line-height: 1.12 !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        padding: 15px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured p {
        margin-bottom: 9px !important;
        line-height: 1.3 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list {
        margin-bottom: 10px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list li {
        margin-bottom: 5px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-see-all,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service-link {
        margin-top: 6px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        padding: 14px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom {
        min-height: 30px !important;
        padding: 7px 16px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-bottom-message {
        margin-left: 0 !important;
    }
}

/* Narrow tablets: same visual hierarchy, but 2 balanced columns. */
@media (min-width: 768px) and (max-width: 899px) {

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "featured featured"
            "sen ident"
            "avis imp"
            "promo brand"
            "service service" !important;
        column-gap: 14px !important;
        row-gap: 14px !important;
        padding: 14px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured {
        padding: 14px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service {
        grid-column: auto !important;
        width: 100% !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service > a {
        font-size: 10px !important;
        line-height: 1.17 !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-column h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-featured h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-service h3 {
        font-size: 15px !important;
    }
}

/* =========================================================
   v1.17 — TABLET PACKED LAYOUT
   Tablet uses a dedicated two-column content flow so there
   are no artificial vertical gaps between cards.
========================================================= */

.sl-mm-tablet-layout {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {

    /* Hide the desktop grid only on tablet. */
    html body .sl-mega-menu-item > .sl-mm-panel > .sl-mm-grid {
        display: none !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel > .sl-mm-tablet-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 18px !important;
        align-items: start !important;
        padding: 16px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        min-width: 0 !important;
        align-self: start !important;
    }

    /*
     * Every block keeps its own height.
     * There is no CSS Grid row shared by unrelated blocks.
     */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-col > .sl-mm-column,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service {
        width: 100% !important;
        margin: 0 !important;
        align-self: start !important;
    }

    /* Same typography size as desktop. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-column h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-featured h3,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-service h3 {
        font-family: "Montserrat", sans-serif !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-service > a {
        font-family: "Inter", sans-serif !important;
        font-size: 11.2px !important;
        line-height: 1.28 !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        text-transform: none !important;
        color: #555555 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Hover: only the text changes to orange. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-column > a:hover,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-featured-list a:hover,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-service > a:hover {
        color: #FF5A00 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-see-all,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-service-link {
        color: #FF5A00 !important;
        background: transparent !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-top: 6px !important;
        text-decoration: none !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-see-all:hover,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-service-link:hover {
        color: #FF5A00 !important;
        background: transparent !important;
    }

    .sl-mm-tablet-featured {
        background: #F7F7F7 !important;
        padding: 15px !important;
        border-radius: 3px !important;
    }

    .sl-mm-tablet-featured p {
        margin: 0 0 10px !important;
        font-size: 11.2px !important;
        line-height: 1.35 !important;
        color: #666666 !important;
    }

    .sl-mm-tablet-featured .sl-mm-featured-list {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .sl-mm-tablet-featured .sl-mm-featured-list li {
        margin-bottom: 5px !important;
    }

    .sl-mm-tablet-service {
        background: #FBEFE8 !important;
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .sl-mm-tablet-service > span {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        color: #FF5A00 !important;
    }

    /* Main orange button, with no theme hover background. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-featured-button,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-featured-button:visited {
        display: inline-block !important;
        width: fit-content !important;
        margin-top: 2px !important;
        background: #FF5A00 !important;
        color: #FAFAF8 !important;
        border: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-featured-button:hover,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-featured-button:focus {
        background: #FA7010 !important;
        color: #FAFAF8 !important;
    }
}

/* Slightly narrower tablets: smaller gap, same desktop typography. */
@media (min-width: 768px) and (max-width: 899px) {

    html body .sl-mega-menu-item > .sl-mm-panel > .sl-mm-tablet-layout {
        column-gap: 14px !important;
        padding: 14px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-col {
        gap: 14px !important;
    }
}

/* =========================================================
   v1.18 — FINAL TABLET CLEANUP
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Marketing is now a direct child of the tablet grid, so it can span both columns. */
    html body .sl-mega-menu-item > .sl-mm-panel > .sl-mm-tablet-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 18px !important;
        row-gap: 18px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
        align-self: start !important;
    }

    /* Tableros products: same size and behavior as the other tablet products. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list a {
        font-family: "Inter", sans-serif !important;
        font-size: 11.2px !important;
        line-height: 1.28 !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        text-transform: none !important;
        color: #555555 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list a:visited,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list a:active,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list a:focus {
        color: #555555 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Hover changes only the text to orange — never the background. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list a:hover {
        color: #FF5A00 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Prevent the theme from painting the whole list row orange. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list li,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured .sl-mm-featured-list li:hover {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Slightly tighter Marketing content now that it has full width. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service {
        padding: 14px 16px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service > a {
        display: inline-block !important;
        margin-right: 24px !important;
        margin-bottom: 4px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service .sl-mm-service-link {
        margin-right: 0 !important;
    }
}

/* Narrow tablet keeps the same full-width Marketing block. */
@media (min-width: 768px) and (max-width: 899px) {

    html body .sl-mega-menu-item > .sl-mm-panel > .sl-mm-tablet-layout {
        column-gap: 14px !important;
        row-gap: 14px !important;
    }

    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service {
        grid-column: 1 / -1 !important;
    }
}

/* =========================================================
   v1.19 — TABLET MARKETING SPACING
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Marketing products must stack vertically, like every other category. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service > a {
        display: block !important;
        width: 100% !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        line-height: 1.28 !important;
    }

    /* Keep "Ver servicios" below SEO with the same rhythm. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service > a.sl-mm-service-link {
        display: block !important;
        width: fit-content !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* Same vertical rhythm for all tablet category product links. */
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-column > a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-layout .sl-mm-tablet-featured-list a,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-service > a {
        margin-bottom: 5px !important;
    }
}


/* =========================================================
   v1.20 — FORCE TABLEROS BUTTON ORANGE
========================================================= */

html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:visited,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:active,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:focus,
html body .sl-mega-menu-item > .sl-mm-panel a.sl-featured-button:hover {
    background: #FF5A00 !important;
    background-color: #FF5A00 !important;
    border-color: #FF5A00 !important;
    color: #FAFAF8 !important;
    -webkit-text-fill-color: #FAFAF8 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button:visited,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button:active,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button:focus,
html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button:hover {
    background: #FF5A00 !important;
    background-color: #FF5A00 !important;
    border-color: #FF5A00 !important;
    color: #FAFAF8 !important;
    -webkit-text-fill-color: #FAFAF8 !important;
}


/* =========================================================
   v1.21 — DEFINITIVE TABLEROS BUTTON FIX
========================================================= */

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta:link,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta:visited,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta:hover,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta:focus,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta:active {
    background: #FF5A00 !important;
    background-color: #FF5A00 !important;
    border: 0 !important;
    border-color: #FF5A00 !important;
    color: #FAFAF8 !important;
    -webkit-text-fill-color: #FAFAF8 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta::before,
html body .sl-mega-menu-item > .sl-mm-panel .sl-featured-button.sl-tableros-cta::after {
    background: transparent !important;
    color: inherit !important;
    content: none !important;
    box-shadow: none !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button.sl-tableros-cta,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button.sl-tableros-cta:hover,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button.sl-tableros-cta:focus,
    html body .sl-mega-menu-item > .sl-mm-panel .sl-mm-tablet-featured a.sl-featured-button.sl-tableros-cta:active {
        background: #FF5A00 !important;
        background-color: #FF5A00 !important;
        color: #FAFAF8 !important;
        -webkit-text-fill-color: #FAFAF8 !important;
    }
}


/* v1.22 — keep the CTA orange even when inline/theme styles are involved */
html body .sl-mega-menu-item > .sl-mm-panel a.sl-tableros-cta {
    background-color: #FF5A00 !important;
    background: #FF5A00 !important;
    color: #FAFAF8 !important;
    -webkit-text-fill-color: #FAFAF8 !important;
    border-color: #FF5A00 !important;
}