/*
Theme Name: Recreativos Avenida Child
Theme URI: https://recreativosavenida.com
Description: Child theme de Kadence para Grupo Hostelería Avenida (Recreativos Avenida S.L. — Hellín). Implementa el Design System B2B oficial.
Author: Agencia 7 Segundos
Author URI: https://7segundos.es
Template: kadence
Version: 0.3.0
Text Domain: recreativos-child
*/

/*
   Foundation y components.css se cargan via wp_enqueue (functions.php).
   Aquí solo overrides finos sobre Kadence.
*/

/* === Tipografía global — fuerza Barlow sobre Kadence === */
body, .single-content, .entry-content, .wp-site-blocks {
	font-family: var(--font-sans, 'Barlow', system-ui, sans-serif);
	color: var(--fg-1, #1B2230);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.site-branding .site-title {
	font-family: var(--font-display, 'Barlow Semi Condensed', system-ui, sans-serif);
	font-weight: 700;
	color: var(--fg-1, #1B2230);
	letter-spacing: -0.01em;
}

/* === Override paleta Kadence con los tokens del Design ===
   IMPORTANTE: este mapeado sigue el orden del admin de Kadence
   (Appearance › Kadence › General › Color Palette), ya que los
   bloques de contenido referencian los slots por número.          */
:root {
	--global-palette1: var(--logo-navy, #001767);   /* Exact brand navy */
	--global-palette2: var(--blue-700, #0E2F8C);    /* Primary blue */
	--global-palette3: var(--blue-900, #071A4D);    /* Structural dark navy — fondos oscuros */
	--global-palette4: var(--surface-2, #F5F7FB);   /* Section bg light gray */
	--global-palette5: var(--surface-3, #EAF0FA);   /* Section bg light blue */
	--global-palette6: var(--fg-1, #1B2230);        /* Body text */
	--global-palette7: var(--fg-2s, #485162);       /* Secondary text */
	--global-palette8: var(--line, #E2E6EE);        /* Borders */
	--global-palette9: #FFFFFF;                      /* Surface */
}

/* === Kadence Header - logo grande y limpio === */
.site-branding-logo img,
.custom-logo {
	max-height: 64px !important;
	width: auto;
}

/* === Botones Kadence respetan el sistema === */
.wp-block-button__link,
.wp-block-kadence-btn .kt-button,
.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--blue-700, #0E2F8C);
	color: #fff !important;
	font-family: var(--font-display, 'Barlow Semi Condensed', sans-serif);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	padding: 13px 24px;
	border-radius: 5px;
	border: 1.5px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wp-block-button__link:hover,
.wp-block-kadence-btn .kt-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--blue-800, #0B2570) !important;
	color: #fff !important;
}

.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff !important;
	color: var(--blue-700, #0E2F8C) !important;
	border-color: var(--blue-700, #0E2F8C) !important;
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--surface-3, #EAF0FA) !important;
}

/* === Cards genéricos (sin colored borders, sí hairline + shadow xs) === */
.recreativos-card,
.wp-block-kadence-rowlayout > .kt-row-layout-inner .kt-row-column-wrap {
	border-radius: 6px;
}

/* === Section titles uppercase === */
.recreativos-section-title,
.kt-adv-heading.recreativos-section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--blue-900, #071A4D);
	margin: 0 0 24px 0;
}

/* === Eyebrow === */
.recreativos-eyebrow {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--blue-700);
	display: inline-block;
	margin-bottom: 10px;
}

/* === WooCommerce price con tipografía del sistema === */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--blue-700);
	font-size: 24px;
}

/* === Focus accesible 3px tinte azul === */
:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(43, 91, 212, 0.30);
	border-radius: 4px;
}

/* === Utility bar (inyectada via hook PHP) === */
.recreativos-utility {
	background: var(--blue-950, #050E2E);
	color: #cdd6ee;
	font-family: var(--font-sans);
	overflow: hidden;
}
.recreativos-utility__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 38px;
	font-size: 12.5px;
	font-weight: 500;
	gap: 24px;
}
.recreativos-utility__item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.recreativos-utility__item svg {
	color: var(--blue-300, #8FA9E6);
	flex: none;
}
@media (max-width: 1100px) {
	.recreativos-utility__item:nth-child(n+3) { display: none; }
}
@media (max-width: 640px) {
	.recreativos-utility__inner { padding: 0 16px; gap: 12px; font-size: 11.5px; justify-content: center; }
	.recreativos-utility__item:nth-child(n+2) { display: none; }
}

/* === Newsletter band (inyectada antes del footer) === */
.recreativos-news {
	background: var(--blue-900, #071A4D);
	color: #fff;
	padding: 48px 0;
}
.recreativos-news__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 32px;
	align-items: center;
}
.recreativos-news__l {
	display: flex;
	align-items: center;
	gap: 16px;
}
.recreativos-news__l b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
}
.recreativos-news__l span {
	font-size: 14px;
	color: #B9C4DE;
}
.recreativos-news__form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.recreativos-news__form input[type="email"] {
	background: #fff;
	border: 1.5px solid #fff;
	border-radius: 6px;
	padding: 12px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--fg-1);
	min-width: 240px;
}
.recreativos-news__form button {
	background: #fff;
	color: var(--blue-800);
	border: 0;
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	padding: 13px 24px;
	border-radius: 5px;
	cursor: pointer;
}
.recreativos-news__form button:hover {
	background: var(--blue-100);
}
.recreativos-news__phone {
	display: flex;
	flex-direction: column;
	text-align: right;
}
.recreativos-news__phone span {
	font-size: 12px;
	color: #B9C4DE;
}
.recreativos-news__phone b {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: #fff;
}
@media (max-width: 880px) {
	.recreativos-news__inner { grid-template-columns: 1fr; text-align: center; }
	.recreativos-news__l { flex-direction: column; text-align: center; }
	.recreativos-news__phone { text-align: center; }
}

/* === Hero principal — replica el mockup con diagonal clip === */
.recreativos-hero {
	background: #fff;
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.recreativos-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	align-items: stretch;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
}
.recreativos-hero__copy {
	padding: 64px 48px 64px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.recreativos-hero__copy h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0 0 18px;
	color: var(--fg-1);
}
.recreativos-hero__copy h1 .b {
	color: var(--blue-700);
	display: block;
}
.recreativos-hero__lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--fg-2s);
	max-width: 480px;
	margin: 0 0 30px;
}
.recreativos-hero__cta {
	display: flex !important;
	gap: 14px;
	flex-wrap: wrap;
	visibility: visible !important;
}
.recreativos-hero__cta > a,
.recreativos-hero__cta .wp-block-button__link {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.recreativos-hero__media {
	position: relative;
	min-height: 480px;
}
.recreativos-hero__img {
	position: absolute;
	inset: 0 -40vw 0 0;
	background-size: cover;
	background-position: center;
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0% 100%);
}
.recreativos-hero__features {
	border-top: 1px solid var(--line);
	background: #fff;
}
.recreativos-hero__features-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.recreativos-hfeat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 22px;
	border-right: 1px solid var(--line);
}
.recreativos-hfeat:last-child { border-right: 0; }
.recreativos-hfeat svg {
	color: var(--blue-700);
	flex: none;
	width: 32px;
	height: 32px;
}
.recreativos-hfeat b {
	display: block;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--fg-1);
}
.recreativos-hfeat small {
	font-size: 14px;
	color: var(--fg-3);
}
@media (max-width: 900px) {
	.recreativos-hero__grid { grid-template-columns: 1fr; padding: 0; }
	.recreativos-hero__copy { padding: 40px 32px; }
	.recreativos-hero__copy h1 { font-size: 40px; }
	.recreativos-hero__media { min-height: 280px; }
	.recreativos-hero__img { inset: 0; clip-path: none; }
	.recreativos-hero__features-inner { grid-template-columns: 1fr 1fr; }
}

/* === Showcase cards 6-up === */
.recreativos-pgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0;
}
.recreativos-ccard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xs);
	transition: box-shadow .15s ease, transform .15s ease;
	cursor: pointer;
	color: var(--fg-1);
	text-decoration: none;
}
.recreativos-ccard:hover {
	box-shadow: var(--shadow-md);
	color: var(--fg-1);
}
.recreativos-ccard__ph {
	aspect-ratio: 16/10;
	background: var(--surface-2);
	overflow: hidden;
}
.recreativos-ccard__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease-out;
}
.recreativos-ccard:hover .recreativos-ccard__ph img {
	transform: scale(1.03);
}
/* Tarjeta destacada (Maquinaria nueva) */
.recreativos-ccard--featured {
	position: relative;
	box-shadow: 0 0 0 2px var(--blue-700), var(--shadow-md);
}
.recreativos-ccard__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--blue-700);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 4px;
	box-shadow: var(--shadow-sm);
}
.recreativos-ccard__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.recreativos-ccard__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--fg-1);
	margin: 0;
}
.recreativos-ccard__desc {
	font-size: 14.5px;
	color: var(--fg-2s);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.recreativos-ccard__link {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--blue-700);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}
@media (max-width: 900px) {
	.recreativos-pgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.recreativos-pgrid { grid-template-columns: 1fr; }
}

/* === Sections con tints alternos === */
.recreativos-section {
	padding: 80px 0;
}
.recreativos-section--tint {
	background: var(--surface-3);
}
.recreativos-section--gray {
	background: var(--surface-2);
}
.recreativos-section__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

/* === WhyUs 5-up benefits === */
.recreativos-why {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin-top: 32px;
}
.recreativos-why__item {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 16px;
}
.recreativos-why__ic {
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: var(--blue-100);
	color: var(--blue-700);
	display: flex;
	align-items: center;
	justify-content: center;
}
.recreativos-why__item b {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--fg-1);
	line-height: 1.3;
}
@media (max-width: 900px) {
	.recreativos-why { grid-template-columns: repeat(2, 1fr); }
}

/* === Projects integrales 4-tile === */
.recreativos-projects {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 48px;
	align-items: center;
}
.recreativos-ptiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.recreativos-ptile {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	position: relative;
	aspect-ratio: 1;
	cursor: pointer;
	transition: box-shadow .15s ease;
}
.recreativos-ptile:hover { box-shadow: var(--shadow-md); }
.recreativos-ptile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.recreativos-ptile__label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, transparent, rgba(7, 26, 77, 0.85));
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	padding: 24px 16px 16px;
	text-align: center;
}
.recreativos-projects__list {
	list-style: none;
	padding: 0;
	margin: 20px 0 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.recreativos-projects__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	color: var(--fg-2s);
}
.recreativos-projects__list li svg {
	color: var(--success);
	flex: none;
}
@media (max-width: 900px) {
	.recreativos-projects { grid-template-columns: 1fr; }
}

/* === Ocultar page title en home y SAT (los heros llevan el título) === */
.home .entry-hero,
.home .entry-hero-container-inner,
.home .page-title,
.home .entry-header,
.home .entry-title,
.home .page-title-area,
.page-id-23 .entry-hero,
.page-id-23 .entry-hero-container-inner,
.page-id-23 .entry-header,
.page-id-23 .entry-title,
.page-id-23 .page-title,
.page-id-24 .entry-hero,
.page-id-24 .entry-hero-container-inner,
.page-id-24 .entry-header,
.page-id-24 .entry-title,
.page-id-24 .page-title {
	display: none !important;
}
.home .site-container,
.home .site-main,
.home .content-area {
	padding-top: 0 !important;
	max-width: 100% !important;
}
.home .content-container.site-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.home main > article {
	max-width: 100% !important;
}
.home .entry-content {
	max-width: 100% !important;
	padding: 0 !important;
}
.home .entry-content-wrap {
	padding: 0 !important;
	margin: 0 !important;
}
/* Kadence pone background:palette9 (#E2E6EE) en el article.content-bg — quitarlo en home */
.home .entry.content-bg,
.home article.content-bg,
.home .content-bg {
	background: transparent !important;
}

/* === Forzar visibilidad CTAs hero secundario (outline) === */
.recreativos-hero__cta a.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	color: #fff !important;
	background: var(--blue-700, #0E2F8C) !important;
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	border-radius: 5px;
	text-decoration: none;
	border: 1.5px solid var(--blue-700, #0E2F8C);
	transition: background .15s ease;
}
.recreativos-hero__cta .recreativos-cta-outline,
.recreativos-hero__cta a.recreativos-cta-outline {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #0E2F8C !important;
	border: 1.5px solid #0E2F8C !important;
}
.recreativos-hero__cta a.recreativos-cta-outline:hover {
	background: var(--surface-3, #EAF0FA) !important;
	color: var(--blue-800, #0B2570) !important;
}
.recreativos-hero__cta a.wp-block-button__link:hover {
	background: var(--blue-800, #0B2570) !important;
	color: #fff !important;
}
.recreativos-hero__cta a.wp-block-button__link.is-style-outline:hover,
.recreativos-hero__cta a.recreativos-cta-outline:hover {
	background: var(--surface-3, #EAF0FA) !important;
	color: var(--blue-800, #0B2570) !important;
}
@media (max-width: 600px) {
	.recreativos-hero__cta {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		height: auto !important;
	}
	.recreativos-hero__cta a.wp-block-button__link { width: 100% !important; flex: 0 0 auto !important; }
}

/* ============================================================
   HEADER / FOOTER OVERRIDE — Reemplazo Kadence default con custom
   ============================================================ */

/* Ocultar header y footer de Kadence (los reemplazamos via hook) */
#masthead.site-header,
.site-footer-wrap {
	display: none !important;
}

/* === Custom Header ============================================ */
.recreativos-header {
	background: #fff;
	border-bottom: 1px solid var(--line, #E2E6EE);
	position: sticky;
	top: 0;
	z-index: 50;
}
.recreativos-header__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 40px;
	height: 124px;
}
.recreativos-header__logo {
	display: flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}
.recreativos-header__logo img {
	height: 108px;
	width: auto;
	display: block;
}
.recreativos-header__search {
	flex: 1;
	max-width: 640px;
	display: flex;
	align-items: stretch;
	background: var(--surface-2, #F5F7FB);
	border: 1.6px solid var(--line, #E2E6EE);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.recreativos-header__search:focus-within {
	background: #fff;
	border-color: var(--blue-500, #2B5BD4);
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(43,91,212,.30));
}
.recreativos-header__search input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 18px;
	height: 52px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--fg-1);
	min-width: 0;
}
.recreativos-header__search input::placeholder { color: var(--fg-4, #A6AFC0); }
.recreativos-header__search-cat {
	display: flex;
	align-items: center;
	gap: 6px;
	border-left: 1px solid var(--line);
	padding: 0 16px;
	font-family: var(--font-sans);
	font-size: 13.5px;
	color: var(--fg-2s);
	white-space: nowrap;
	cursor: default;
}
.recreativos-header__search-btn {
	background: var(--blue-700, #0E2F8C);
	color: #fff;
	border: 0;
	width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 5px;
	border-radius: 7px;
	transition: background .15s ease;
}
.recreativos-header__search-btn:hover { background: var(--blue-800, #0B2570); }
.recreativos-header__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: none;
}
.recreativos-haction {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	color: var(--fg-1);
	text-decoration: none;
	transition: color .15s ease;
}
.recreativos-haction:hover { color: var(--blue-700); }
.recreativos-haction svg { color: var(--blue-700); flex: none; }
.recreativos-haction__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.recreativos-haction__txt small {
	font-size: 11px;
	color: var(--fg-3);
	font-weight: 400;
}
.recreativos-haction__txt b {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-1);
}
.recreativos-haction__tel {
	text-decoration: none;
	color: inherit;
}
.recreativos-haction__tel + .recreativos-haction__tel b { font-size: 14px; }
.recreativos-haction__tel:hover b { color: var(--blue-700); }
.recreativos-haction__lbl {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13.5px;
}
.recreativos-cart { position: relative; }
.recreativos-cart__count {
	position: absolute;
	top: -7px;
	right: -9px;
	background: var(--blue-700);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	font-family: var(--font-sans);
}
@media (max-width: 1100px) {
	.recreativos-haction__txt,
	.recreativos-haction__lbl { display: none; }
}
@media (max-width: 880px) {
	.recreativos-header__inner { gap: 12px; height: 68px; padding: 0 16px; }
	.recreativos-header__logo img { height: 54px !important; }
	.recreativos-header__search { display: none; }
}

/* === Hamburger button (visible solo en mobile) === */
.recreativos-burger {
	display: none;
	background: transparent;
	border: 1.5px solid var(--line, #E2E6EE);
	border-radius: 6px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--blue-700, #0E2F8C);
	transition: background .15s ease, border-color .15s ease;
	padding: 0;
	flex: none;
}
.recreativos-burger:hover {
	background: var(--surface-3, #EAF0FA);
	border-color: var(--blue-700);
}
@media (max-width: 880px) {
	.recreativos-burger { display: inline-flex; }
	.recreativos-haction { padding: 0; }
	.recreativos-haction[aria-label="Atención al cliente"] { display: none; }
}

/* === Mobile drawer === */
.recreativos-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}
.recreativos-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.recreativos-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(7, 26, 77, 0.55);
	opacity: 0;
	transition: opacity .2s ease;
}
.recreativos-drawer.is-open .recreativos-drawer__overlay { opacity: 1; }
.recreativos-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(360px, 88vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .25s ease-out;
	box-shadow: var(--shadow-lg, 0 12px 28px rgba(7,26,77,0.14));
	overflow-y: auto;
}
.recreativos-drawer.is-open .recreativos-drawer__panel { transform: translateX(0); }
.recreativos-drawer__head {
	padding: 18px 20px;
	border-bottom: 1px solid var(--line, #E2E6EE);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--blue-900, #071A4D);
}
.recreativos-drawer__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--fg-2s, #485162);
	padding: 4px;
}
.recreativos-drawer__close:hover { color: var(--blue-700); }
.recreativos-drawer__search {
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: 8px;
}
.recreativos-drawer__search input {
	flex: 1;
	border: 1.5px solid var(--line);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--fg-1);
}
.recreativos-drawer__search input:focus {
	outline: none;
	border-color: var(--blue-500);
	box-shadow: var(--shadow-focus);
}
.recreativos-drawer__search button {
	background: var(--blue-700, #0E2F8C);
	color: #fff;
	border: 0;
	border-radius: 6px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.recreativos-drawer__nav {
	display: flex;
	flex-direction: column;
	padding: 8px 0;
}
.recreativos-drawer__link {
	padding: 14px 20px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fg-1);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	transition: background .15s ease, color .15s ease;
}
.recreativos-drawer__link:hover,
.recreativos-drawer__link:active {
	background: var(--surface-3, #EAF0FA);
	color: var(--blue-700);
}
.recreativos-drawer__footer {
	padding: 20px;
	background: var(--surface-2, #F5F7FB);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}
.recreativos-drawer__footer a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--fg-1);
	font-size: 14px;
	text-decoration: none;
	font-weight: 500;
}
.recreativos-drawer__footer a svg {
	color: var(--blue-700);
	flex: none;
}
.recreativos-drawer__footer a:hover { color: var(--blue-700); }

/* === Mega Nav (categorías UPPERCASE) === */
.recreativos-nav {
	background: #fff;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-xs);
	position: sticky;
	top: 96px;
	z-index: 40;
}
.recreativos-nav__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.recreativos-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 50px;
	padding: 0 18px;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fg-1);
	border-bottom: 3px solid transparent;
	transition: .12s ease;
	text-decoration: none;
}
.recreativos-nav__link:hover,
.recreativos-nav__link.is-active {
	color: var(--blue-700);
	border-bottom-color: var(--blue-700);
}
@media (max-width: 880px) {
	.recreativos-nav { display: none; }
}

/* === Custom Footer ============================================ */
.recreativos-footer {
	background: var(--blue-900, #071A4D);
	color: var(--on-dark-muted, #B9C4DE);
	font-family: var(--font-sans);
}
.recreativos-footer__top {
	max-width: 1360px;
	margin: 0 auto;
	padding: 72px 32px 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 56px;
}
.recreativos-footer__brand img {
	max-width: 200px;
	max-height: 110px;
	width: auto;
	height: auto;
	display: block;
	margin-bottom: 20px;
	object-fit: contain;
	object-position: left center;
}
.recreativos-footer__brand p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--on-dark-muted, #B9C4DE);
	margin: 0 0 24px;
	max-width: 320px;
}
.recreativos-footer__social {
	display: flex;
	gap: 12px;
}
.recreativos-footer__social a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.recreativos-footer__social a:hover {
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.30);
}
.recreativos-footer__col h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 8px 0 20px;
}
.recreativos-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.recreativos-footer__col li a {
	color: var(--on-dark-muted, #B9C4DE);
	font-size: 14px;
	text-decoration: none;
	transition: color .15s ease;
}
.recreativos-footer__col li a:hover { color: #fff; }
.recreativos-footer__contact h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 8px 0 20px;
}
.recreativos-footer__contact-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
}
.recreativos-footer__contact-row svg {
	color: var(--blue-300, #8FA9E6);
	flex: none;
	margin-top: 2px;
}
.recreativos-footer__contact-row span,
.recreativos-footer__contact-row a {
	color: var(--on-dark-muted, #B9C4DE);
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
}
.recreativos-footer__contact-row a:hover { color: #fff; }
.recreativos-footer__contact-row strong { color: #fff; font-weight: 600; }
.recreativos-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.10);
	background: var(--blue-950, #050E2E);
}
.recreativos-footer__bottom-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 20px 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--blue-300, #8FA9E6);
}
.recreativos-footer__bottom-inner a {
	color: var(--on-dark-muted, #B9C4DE);
	text-decoration: none;
	margin-left: 20px;
	transition: color .15s ease;
}
.recreativos-footer__bottom-inner a:first-child { margin-left: 0; }
.recreativos-footer__bottom-inner a:hover { color: #fff; }
@media (max-width: 1024px) {
	.recreativos-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; padding: 56px 32px 40px; }
}
@media (max-width: 600px) {
	.recreativos-footer__top { grid-template-columns: 1fr; }
	.recreativos-footer__bottom-inner { flex-direction: column; text-align: center; }
	.recreativos-footer__bottom-inner a { margin: 0 10px; }
}

/* === Banner envío gratis del child theme (mantengo) === */
.recreativos-free-shipping-banner {
	background: var(--blue-50, #EEF2FC);
	color: var(--blue-800, #0B2570);
	padding: 10px 32px;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
}

/* ============================================================
   ACCESIBILIDAD — parches de contraste y visibilidad de texto
   ============================================================ */

/* Textos auxiliares de baja jerarquía: --fg-3 (#79839A) sobre blanco da 3.7:1.
   Se sube a --fg-2s (#485162) para cumplir WCAG AA (4.5:1) en tamaños pequeños. */
.recreativos-hfeat small {
	color: var(--fg-2s, #485162);
}
.recreativos-haction__txt small {
	color: var(--fg-2s, #485162);
}

/* Botones WooCommerce — cobertura ampliada para evitar texto invisible:
   el tema padre Kadence y WC Blocks usan selectores adicionales. */
.woocommerce #respond input#submit,
.woocommerce #content input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button__button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--blue-700, #0E2F8C) !important;
	color: #fff !important;
	font-family: var(--font-display, 'Barlow Semi Condensed', sans-serif);
	font-weight: 600;
}

/* Buttons de Kadence Blocks — asegurar texto blanco sobre fondos de paleta oscura */
.kt-btn-wrap .kt-button,
.kt-button-wrap .kt-button,
a.kt-button {
	color: #fff !important;
}

/* Heading sobre fondos de paleta oscura de Kadence (palette1–palette3):
   si Kadence inyecta fondo de color con texto heredado puede quedar invisible */
[class*="has-palette-1-background-color"] h1,
[class*="has-palette-1-background-color"] h2,
[class*="has-palette-1-background-color"] h3,
[class*="has-palette-2-background-color"] h1,
[class*="has-palette-2-background-color"] h2,
[class*="has-palette-2-background-color"] h3,
[class*="has-palette-3-background-color"] h1,
[class*="has-palette-3-background-color"] h2,
[class*="has-palette-3-background-color"] h3,
.has-background.kt-inner-column-height-full > .kt-inside-inner-col > h1,
.has-background.kt-inner-column-height-full > .kt-inside-inner-col > h2,
.has-background.kt-inner-column-height-full > .kt-inside-inner-col > h3 {
	color: #fff;
}

/* Nav activo: resaltar la página actual con color claro bien contrastado */
.recreativos-nav__link[aria-current="page"],
.recreativos-nav__link.current-menu-item {
	color: var(--blue-700);
	border-bottom-color: var(--blue-700);
}

/* Focus en inputs visible también en Firefox (no solo :focus-visible) */
input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(43, 91, 212, 0.30);
}

/* ============================================================
   WOOCOMMERCE — Títulos de categorías y listado de tienda
   ============================================================ */

/* Títulos de categorías en la tienda: forzar color alto contraste.
   Kadence + WC pueden dejar estos en gris medio sobre fondo gris claro. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
ul.products li.product h2 {
	font-family: var(--font-display, 'Barlow Semi Condensed', sans-serif);
	font-weight: 600;
	color: var(--fg-1, #1B2230) !important;
	font-size: 17px;
	line-height: 1.3;
}

/* Subtítulo de conteo en categorías (ej: "12 productos") */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count,
ul.products li.product-category .count {
	color: var(--fg-2s, #485162);
	font-size: 13px;
	font-weight: 400;
}

/* Fondo de listado de productos/categorías si la tienda tiene surface-2 */
.woocommerce-page .site-main,
.post-type-archive-product .site-main {
	background: var(--surface, #FFFFFF);
}

/* Cards de producto WooCommerce en el listado de la tienda */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
	background: #fff;
	border: 1px solid var(--line, #E2E6EE);
	border-radius: var(--r-md, 6px);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Imagen de producto/categoría en listado */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img {
	transition: transform .3s ease-out;
}
.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product-category:hover a img {
	transform: scale(1.03);
}

/* Botón "Añadir al carrito" en listado */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
	background: var(--blue-700, #0E2F8C) !important;
	color: #fff !important;
	font-family: var(--font-display, 'Barlow Semi Condensed', sans-serif);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--r-sm, 4px);
	padding: 10px 18px;
	margin: 12px 16px 16px;
	border: 0;
	transition: background .15s ease;
	display: block;
	width: calc(100% - 32px);
	box-sizing: border-box;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background: var(--blue-800, #0B2570) !important;
}

/* ============================================================
   MODERNIZACIÓN — WhyUs section mejorada
   ============================================================ */

/* Items de "Por qué elegirnos" con fondo tarjeta y sombra sutil */
.recreativos-why__item {
	background: #fff;
	border-radius: var(--r-lg, 10px);
	box-shadow: var(--shadow-xs);
	transition: box-shadow .2s ease, transform .2s ease;
}
.recreativos-why__item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

/* Icono circular de beneficios: borde sutil + fondo más definido */
.recreativos-why__ic {
	border: 2px solid var(--blue-100, #DCE5F8);
	background: var(--blue-50, #EEF2FC);
}

/* ============================================================
   MODERNIZACIÓN — Cards de categorías del homepage
   ============================================================ */

/* Cards de productos del homepage: bordes más suaves, hover más vivo */
.recreativos-ccard {
	border-radius: var(--r-lg, 10px);
	border-color: var(--line, #E2E6EE);
}
.recreativos-ccard:hover {
	transform: translateY(-3px);
	border-color: var(--blue-100, #DCE5F8);
}

/* Link "Ver productos" con animación de flecha */
.recreativos-ccard__link {
	transition: gap .18s ease, color .15s ease;
}
.recreativos-ccard:hover .recreativos-ccard__link {
	color: var(--blue-600, #1542B0);
	gap: 10px;
}

/* ============================================================
   MODERNIZACIÓN — Tiles de proyectos integrales
   ============================================================ */

/* Tiles: radio mayor y hover con zoom de imagen */
.recreativos-ptile {
	border-radius: var(--r-lg, 10px);
	overflow: hidden;
}
.recreativos-ptile img {
	transition: transform .35s ease-out;
}
.recreativos-ptile:hover img {
	transform: scale(1.05);
}

/* Label overlay del tile: gradiente más visible para legibilidad */
.recreativos-ptile__label {
	background: linear-gradient(180deg, transparent 0%, rgba(7, 26, 77, 0.90) 100%);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 16px;
}

/* ============================================================
   MODERNIZACIÓN — Sección hero features bar
   ============================================================ */

/* Features bar debajo del hero: fondo apenas tintado */
.recreativos-hero__features {
	background: var(--surface-2, #F5F7FB);
}

/* ============================================================
   CONTRASTE — Más parches para textos de baja jerarquía
   ============================================================ */

/* Lista de servicios en la sección "Proyectos integrales":
   asegurar que el texto de items tenga suficiente contraste
   sobre fondo --surface-3 (#EAF0FA). fg-2s (#485162) sobre EAF0FA = 4.7:1 OK */
.recreativos-projects__list li {
	color: var(--fg-1, #1B2230);
}

/* Descripción del lead de "Proyectos integrales" — el inline style
   usa #485162 que es OK, pero por si acaso forzamos fg-1 para el titulo */
.recreativos-projects h2 {
	color: var(--fg-1, #1B2230) !important;
}

/* Texto "Ofertas, novedades..." de la newsletter sobre fondo oscuro */
.recreativos-news__l span {
	color: var(--on-dark-muted, #B9C4DE);
}

/* Botón de newsletter en hover: asegurar texto legible */
.recreativos-news__form button:hover {
	background: var(--blue-100, #DCE5F8);
	color: var(--blue-900, #071A4D);
}

/* ============================================================
   MODERNIZACIÓN — Transiciones y detalles globales
   ============================================================ */

/* Enlaces generales: transición suave de color */
a {
	transition: color .15s ease;
}

/* Secciones: línea decorativa bajo los títulos de sección */
.recreativos-section-title {
	position: relative;
	padding-bottom: 16px;
}
.recreativos-section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--blue-700, #0E2F8C);
	border-radius: 2px;
}

/* Centrar la línea cuando el título está centrado (ej: "Nuestros productos") */
.recreativos-section__inner > .recreativos-section-title {
	text-align: left;
}

/* Banner envío gratis: borde inferior para separarlo del contenido */
.recreativos-free-shipping-banner {
	border-bottom: 1px solid var(--blue-100, #DCE5F8);
}

/* ============================================================
   ACCESIBILIDAD — Hover states de todos los links interactivos
   ============================================================ */

/* Nav links: asegurar que hover text quede legible */
.recreativos-nav__link:hover {
	color: var(--blue-700, #0E2F8C);
}

/* Drawer links: asegurar contraste en hover */
.recreativos-drawer__link:hover {
	color: var(--blue-700, #0E2F8C);
}

/* Footer links: asegurar que todos los hover sean blancos sobre fondos oscuros */
.recreativos-footer a:hover {
	color: #fff;
}

/* WooCommerce: badges de oferta / sale */
.woocommerce span.onsale {
	background: var(--danger, #C5384B);
	color: #fff;
	font-family: var(--font-display, 'Barlow Semi Condensed', sans-serif);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--r-sm, 4px);
	padding: 6px 10px;
	min-width: auto;
	min-height: auto;
	line-height: 1;
}

/* WooCommerce: estrellas de rating */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--warning, #B97608);
}

/* WooCommerce: paginación de tienda */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
	font-family: var(--font-sans, 'Barlow', sans-serif);
	font-weight: 600;
	border-radius: var(--r-sm, 4px);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--blue-700, #0E2F8C);
	color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--surface-3, #EAF0FA);
	color: var(--blue-700, #0E2F8C);
}

/* ============================================================
   ENCABEZADO ARCHIVE DE CATEGORÍAS WooCommerce
   Fondo blanco con título en azul marino: limpio y con buen
   contraste (#071A4D sobre #fff = 15:1).
   ============================================================ */

.tax-product_cat .entry-hero,
.tax-product_cat .entry-hero-container-inner,
.tax-product_cat .hero-section-overlay,
.post-type-archive-product .entry-hero,
.post-type-archive-product .entry-hero-container-inner,
.post-type-archive-product .hero-section-overlay {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
}
/* Quitar también el content-bg azulado en archive de categorías */
.tax-product_cat .content-bg,
.tax-product_cat article.content-bg,
.post-type-archive-product .content-bg {
	background: transparent !important;
}

.tax-product_cat .page-title,
.tax-product_cat .entry-title,
.tax-product_cat .woocommerce-products-header__title,
.post-type-archive-product .page-title,
.post-type-archive-product .entry-title {
	color: var(--blue-900, #071A4D) !important;
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tax-product_cat .archive-description,
.tax-product_cat .term-description,
.post-type-archive-product .archive-description {
	color: var(--fg-2s, #485162) !important;
}

/* Si WooCommerce usa su propio header sin Kadence entry-hero */
.woocommerce-products-header {
	background: #fff;
	padding: 40px 32px 32px;
}
.woocommerce-products-header__title {
	color: var(--blue-900, #071A4D) !important;
	font-family: var(--font-display);
}

/* Contraste barra de filtros/ordering WooCommerce */
.woocommerce-result-count {
	color: var(--fg-2s, #485162) !important;
}
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
	color: var(--fg-1, #1B2230) !important;
	background-color: #fff !important;
	border: 1.5px solid var(--line-2, #CFD5E0) !important;
	border-radius: var(--r-sm, 4px);
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	color: var(--fg-1, #1B2230) !important;
}

/* ============================================================
   SAT HERO — Kadence Blocks v3.7+ usa clase .kb-row-layout-id*
   en lugar del ID #kt-layout-id*. La paleta se aplica via
   kadence_global_palette (option en BD). Mantenemos el !important
   como red de seguridad.
   ============================================================ */

.kb-row-layout-idsat-hero {
	background-color: var(--blue-900, #071A4D) !important;
}
/* Los textos del hero SAT llevan color:#fff en inline style,
   pero la descripción usa una clase Gutenberg — la cubrimos */
.kb-row-layout-idsat-hero .has-text-color,
.kb-row-layout-idsat-hero p,
.kb-row-layout-idsat-hero h1,
.kb-row-layout-idsat-hero h2,
.kb-row-layout-idsat-hero h3 {
	color: rgba(255, 255, 255, 0.88) !important;
}

/* ============================================================
   BREADCRUMBS — Kadence + WooCommerce + RankMath
   Por defecto usan un gris muy claro que prácticamente
   desaparece sobre fondos blancos.
   ============================================================ */

.kadence-breadcrumbs,
.woocommerce-breadcrumb,
.rank-math-breadcrumb p,
.rank-math-breadcrumb {
	font-family: var(--font-sans);
	font-size: 13.5px;
	color: var(--fg-2s, #485162) !important;
}

.kadence-breadcrumbs a,
.woocommerce-breadcrumb a,
.rank-math-breadcrumb a {
	color: var(--blue-700, #0E2F8C) !important;
	text-decoration: none;
	font-weight: 500;
}

.kadence-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover,
.rank-math-breadcrumb a:hover {
	color: var(--blue-600, #1542B0) !important;
	text-decoration: underline;
}

/* Separador entre segmentos */
.kadence-breadcrumbs .breadcrumb-sep,
.rank-math-breadcrumb .separator {
	color: var(--fg-3, #79839A);
	margin: 0 4px;
}

/* ============================================================
   PESTAÑAS DE PRODUCTO WooCommerce
   La pestaña inactiva tenía texto apenas visible sobre fondo gris.
   ============================================================ */

/* Contenedor de pestañas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--line, #E2E6EE);
	padding: 0;
	margin-bottom: 0;
}

/* Pestaña inactiva */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--surface-2, #F5F7FB);
	border: 1px solid var(--line, #E2E6EE);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--fg-2s, #485162) !important;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 22px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--blue-700, #0E2F8C) !important;
}

/* Pestaña activa */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fff;
	border-color: var(--line, #E2E6EE);
	border-bottom-color: #fff;
	position: relative;
	z-index: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--blue-700, #0E2F8C) !important;
	font-weight: 700;
}

/* Contenido de la pestaña activa */
.woocommerce div.product .woocommerce-tabs .panel {
	border: 1px solid var(--line, #E2E6EE);
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 28px 32px;
	background: #fff;
}

/* ============================================================
   MOBILE FIXES — Responsive < 768px y < 480px
   Corrige: menu apilado, botones truncados, contraste,
   overflow horizontal, padding, spacing.
   ============================================================ */

/* --- Prevenir overflow horizontal global --- */
html, body {
	overflow-x: hidden;
}
.site, .site-container, .entry-content, .content-container {
	overflow-x: hidden;
	max-width: 100vw;
}

/* --- Utility bar mobile: centrar el unico item visible --- */
@media (max-width: 640px) {
	.recreativos-utility__inner {
		justify-content: center;
		text-align: center;
		height: 34px;
		font-size: 11px;
	}
}

/* --- Header mobile: compactar acciones y mejorar spacing --- */
@media (max-width: 880px) {
	.recreativos-header__inner {
		justify-content: space-between;
		gap: 8px;
		height: 60px;
		padding: 0 12px;
	}
	.recreativos-header__logo img {
		height: 44px !important;
		max-width: 180px !important;
	}
	.recreativos-header__actions {
		gap: 12px;
	}
	/* Icones de acciones: reducir tamano en mobile */
	.recreativos-haction svg,
	.recreativos-haction i {
		width: 20px !important;
		height: 20px !important;
	}
	.recreativos-burger {
		width: 40px;
		height: 40px;
	}
	.recreativos-burger i {
		width: 22px !important;
		height: 22px !important;
	}
	/* Cart badge: reposicionar para iconos mas pequenos */
	.recreativos-cart__count {
		top: -6px;
		right: -7px;
		font-size: 10px;
		min-width: 16px;
		height: 16px;
	}
}

/* --- Nav sticky offset: ajustar al alto real del header mobile --- */
@media (max-width: 880px) {
	.recreativos-nav {
		top: 60px;
	}
}

/* --- Hero: ajustes mobile finos --- */
@media (max-width: 600px) {
	.recreativos-hero__copy {
		padding: 32px 16px;
	}
	.recreativos-hero__copy h1 {
		font-size: 32px;
		line-height: 1.1;
	}
	.recreativos-hero__lead {
		font-size: 15px;
		margin-bottom: 24px;
	}
	.recreativos-hero__media {
		min-height: 220px;
	}
}

/* --- Hero features bar: 1 columna en mobile estrecho --- */
@media (max-width: 600px) {
	.recreativos-hero__features-inner {
		grid-template-columns: 1fr;
	}
	.recreativos-hfeat {
		padding: 16px;
		border-right: 0;
		border-bottom: 1px solid var(--line, #E2E6EE);
	}
	.recreativos-hfeat:last-child {
		border-bottom: 0;
	}
}

/* --- WhyUs grid: 1 columna en mobile estrecho --- */
@media (max-width: 480px) {
	.recreativos-why {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* --- Category cards grid: padding lateral mobile --- */
@media (max-width: 600px) {
	.recreativos-pgrid {
		gap: 16px;
		margin: 24px 0;
	}
}

/* --- Section padding: reducir en mobile --- */
@media (max-width: 768px) {
	.recreativos-section {
		padding: 48px 0;
	}
	.recreativos-section__inner {
		padding: 0 16px;
	}
}

/* --- Projects integrales: texto + tiles apilados, mejor spacing --- */
@media (max-width: 600px) {
	.recreativos-projects {
		gap: 24px;
	}
	.recreativos-ptiles {
		gap: 12px;
	}
	.recreativos-ptile__label {
		font-size: 14px;
		padding: 16px 12px 12px;
	}
}

/* --- Botones WooCommerce: evitar truncado en mobile ---
   Kadence inyecta SVG iconset (flecha, spinner, check) dentro
   del boton. El contenedor necesita flex-wrap y el texto no
   debe truncarse. */
@media (max-width: 768px) {
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product a.add_to_cart_button,
	.woocommerce ul.products li.product a.button {
		font-size: 12px;
		padding: 10px 14px;
		white-space: normal;
		word-break: break-word;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
	}
	/* Iconos SVG del boton: tamano fijo para que no se descontrolen */
	.woocommerce ul.products li.product .button .kadence-svg-iconset,
	.woocommerce ul.products li.product .button svg {
		flex: none;
		width: 16px;
		height: 16px;
	}
	/* Boton generico de WC (checkout, cart, etc.) */
	.wp-block-button__link,
	.wp-block-kadence-btn .kt-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		font-size: 13px;
		padding: 12px 18px;
		white-space: normal;
		word-break: break-word;
	}
}

/* --- Product card details: padding lateral en mobile --- */
@media (max-width: 768px) {
	.woocommerce ul.products li.product .product-details {
		padding: 12px 14px 16px;
	}
	/* Titulo de producto en listado: tamano legible sin truncar */
	.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
		line-height: 1.35;
	}
	/* Precio en mobile: tamano un poco menor */
	.woocommerce ul.products li.product .price {
		font-size: 18px;
	}
	/* Excerpt: limitar lineas visibles para evitar cards gigantes */
	.woocommerce ul.products li.product .product-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.5;
	}
	.woocommerce ul.products li.product .product-excerpt p {
		margin: 0 0 4px;
	}
}

/* --- Newsletter band: stack vertical en mobile --- */
@media (max-width: 600px) {
	.recreativos-news {
		padding: 32px 0;
	}
	.recreativos-news__inner {
		padding: 0 16px;
		gap: 20px;
	}
	.recreativos-news__form {
		flex-direction: column;
	}
	.recreativos-news__form input[type="email"] {
		min-width: 0;
		width: 100%;
	}
	.recreativos-news__form button {
		width: 100%;
		padding: 13px 16px;
	}
	.recreativos-news__phone b {
		justify-content: center;
		font-size: 18px;
	}
}

/* --- Footer: padding y spacing mobile --- */
@media (max-width: 600px) {
	.recreativos-footer__top {
		padding: 40px 16px 32px;
		gap: 32px;
	}
	.recreativos-footer__brand p {
		max-width: 100%;
	}
	.recreativos-footer__bottom-inner {
		padding: 16px;
		font-size: 12px;
		gap: 12px;
	}
	.recreativos-footer__bottom-inner a {
		margin: 0 6px;
		font-size: 12px;
	}
}

/* --- Contraste: SAT hero subtexto --- */
/* Reemplazar rgba(255,255,255,0.88) por blanco solido para
   mejor contraste y legibilidad en pantallas de bajo brillo */
.kb-row-layout-idsat-hero p,
.kb-row-layout-idsat-hero .has-text-color {
	color: #FFFFFF !important;
}

/* --- Contraste: todos los textos sobre fondos de paleta oscura (Kadence blocks) --- */
[class*="has-palette-1-background-color"],
[class*="has-palette-2-background-color"],
[class*="has-palette-3-background-color"],
[class*="has-palette-4-background-color"] {
	color: rgba(255, 255, 255, 0.92) !important;
}
[class*="has-palette-1-background-color"] p,
[class*="has-palette-1-background-color"] li,
[class*="has-palette-1-background-color"] span,
[class*="has-palette-1-background-color"] h1,
[class*="has-palette-1-background-color"] h2,
[class*="has-palette-1-background-color"] h3,
[class*="has-palette-1-background-color"] h4,
[class*="has-palette-1-background-color"] h5,
[class*="has-palette-1-background-color"] h6,
[class*="has-palette-1-background-color"] .wp-block-heading,
[class*="has-palette-2-background-color"] p,
[class*="has-palette-2-background-color"] li,
[class*="has-palette-2-background-color"] span,
[class*="has-palette-2-background-color"] h1,
[class*="has-palette-2-background-color"] h2,
[class*="has-palette-2-background-color"] h3,
[class*="has-palette-2-background-color"] h4,
[class*="has-palette-2-background-color"] h5,
[class*="has-palette-2-background-color"] h6,
[class*="has-palette-2-background-color"] .wp-block-heading,
[class*="has-palette-3-background-color"] p,
[class*="has-palette-3-background-color"] li,
[class*="has-palette-3-background-color"] span,
[class*="has-palette-3-background-color"] h1,
[class*="has-palette-3-background-color"] h2,
[class*="has-palette-3-background-color"] h3,
[class*="has-palette-3-background-color"] h4,
[class*="has-palette-3-background-color"] h5,
[class*="has-palette-3-background-color"] h6,
[class*="has-palette-3-background-color"] .wp-block-heading,
[class*="has-palette-4-background-color"] p,
[class*="has-palette-4-background-color"] li,
[class*="has-palette-4-background-color"] span,
[class*="has-palette-4-background-color"] h1,
[class*="has-palette-4-background-color"] h2,
[class*="has-palette-4-background-color"] h3,
[class*="has-palette-4-background-color"] h4,
[class*="has-palette-4-background-color"] h5,
[class*="has-palette-4-background-color"] h6,
[class*="has-palette-4-background-color"] .wp-block-heading {
	color: rgba(255, 255, 255, 0.95) !important;
}

/* --- Contraste: asegurar que la utility bar text sea legible --- */
.recreativos-utility {
	color: #D0D8EE;
}

/* --- Drawer mobile: safe area para notch/island en iOS --- */
.recreativos-drawer__panel {
	padding-top: env(safe-area-inset-top, 0);
}
.recreativos-drawer__footer {
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}

/* --- Breadcrumbs en mobile: wrapping correcto --- */
@media (max-width: 768px) {
	.kadence-breadcrumbs,
	.woocommerce-breadcrumb,
	.rank-math-breadcrumb {
		font-size: 12px;
		padding: 12px 16px;
		word-break: break-word;
	}
}

/* --- WooCommerce Tabs en mobile: scroll horizontal o stack --- */
@media (max-width: 600px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 10px 16px;
		font-size: 12px;
		white-space: nowrap;
	}
	.woocommerce div.product .woocommerce-tabs .panel {
		padding: 20px 16px;
	}
}

/* --- WooCommerce products header en mobile --- */
@media (max-width: 768px) {
	.woocommerce-products-header {
		padding: 24px 16px 20px;
	}
	.woocommerce-products-header__title {
		font-size: 28px;
	}
}

/* --- Free shipping banner en mobile --- */
@media (max-width: 768px) {
	.recreativos-free-shipping-banner {
		padding: 10px 16px;
		font-size: 12.5px;
		line-height: 1.4;
	}
}

/* --- Kadence blocks: evitar overflow de imagenes y columnas en mobile --- */
@media (max-width: 768px) {
	.kt-row-column-wrap {
		gap: 16px;
	}
	.wp-block-kadence-column {
		min-width: 0;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}

/* --- CTA hero buttons: tamanos tacticos en mobile --- */
@media (max-width: 480px) {
	.recreativos-hero__cta a.wp-block-button__link {
		font-size: 13px;
		padding: 12px 16px;
		min-height: 44px;
	}
}

/* --- WooCommerce notices: margen en mobile --- */
@media (max-width: 768px) {
	.woocommerce-notices-wrapper,
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info {
		margin: 12px 16px;
		font-size: 14px;
		padding: 12px 16px;
	}
}

/* --- Content containers: padding en mobile --- */
@media (max-width: 768px) {
	.content-container.site-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	/* Pero en home el contenido es edge-to-edge */
	.home .content-container.site-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}