/*!
 * CLICKMEX Premium Storefront — ampliaciones para tableta y escritorio.
 * Base mobile first en storefront.css; aquí solo se añade a partir de 480/768/1024 px.
 */

@media (min-width: 480px) {
	.cmx-hero.has-image .cmx-hero__copy { max-width: 56%; }
	.cmx-categories__grid { gap: 22px 14px; }
	.cmx-cat__media { width: 72px; height: 72px; }
	.cmx-benefit__text strong { font-size: 14px; }
	.cmx-products__grid { gap: 16px; }
}

@media (min-width: 768px) {
	:root { --cmx-gutter: 24px; --cmx-section-gap: 56px; }
	.admin-bar .cmx-header { top: 32px; }

	.cmx-psf .cmx-search__submit { display: inline-flex; align-items: center; }
	.cmx-psf .cmx-search__input { padding-right: 96px; }

	/* Hero en dos columnas */
	.cmx-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: 32px;
		min-height: 400px;
		padding-top: 48px;
		padding-bottom: 56px;
	}
	.cmx-hero.has-image .cmx-hero__inner { min-height: 420px; padding-bottom: 0; }
	.cmx-hero.has-image .cmx-hero__copy { max-width: none; padding-bottom: 56px; }
	.cmx-hero.has-image .cmx-hero__media {
		position: relative;
		right: auto; bottom: auto;
		width: auto;
		height: 100%;
		align-self: end;
	}
	.cmx-hero__img { max-height: 440px; }
	.cmx-hero__title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: var(--cmx-fw-black); }
	.cmx-hero__subtitle { font-size: 17px; margin-top: 16px !important; }
	.cmx-hero__copy .cmx-btn { margin-top: 28px; }
	.cmx-hero__brandmark {
		display: flex; align-items: center; justify-content: center;
		width: min(100%, 360px); aspect-ratio: 1; margin-left: auto;
		border-radius: 40px;
		background: rgba(255, 255, 255, .06);
		color: #fff;
	}
	.cmx-hero__brandmark .cmx-logo__mark { width: 62%; height: auto; }

	.cmx-hero__products { position: relative; justify-items: end; }
	.cmx-hero-card { width: min(100%, 340px); }
	.cmx-hero-card--2, .cmx-hero-card--3 { display: flex; }
	.cmx-hero__products--2 .cmx-hero-card--2,
	.cmx-hero__products--3 .cmx-hero-card--2 { margin-right: 48px; }
	.cmx-hero.has-image .cmx-hero__products {
		display: grid;
		position: absolute;
		left: -24px; bottom: 32px;
		justify-items: start;
	}
	.cmx-hero.has-image .cmx-hero-card { width: 260px; }
	.cmx-hero.has-image .cmx-hero-card--2,
	.cmx-hero.has-image .cmx-hero-card--3 { display: none; }

	.cmx-shape--ring { width: 520px; height: 520px; right: -160px; top: -220px; border-width: 70px; }
	.cmx-shape--blob-t { width: 360px; height: 240px; left: -140px; bottom: -120px; }
	.cmx-shape--blob-o { width: 140px; height: 100px; left: 120px; bottom: -60px; }

	/* Beneficios en una fila */
	.cmx-benefits__list,
	.cmx-benefits__list--3 { grid-template-columns: repeat(var(--cmx-cols, 4), minmax(0, 1fr)); }
	.cmx-benefits__list--1 { --cmx-cols: 1; }
	.cmx-benefits__list--2 { --cmx-cols: 2; }
	.cmx-benefits__list--3 { --cmx-cols: 3; }
	.cmx-benefits__list > li,
	.cmx-benefits__list--3 > li + li {
		border-top: 0 !important;
		padding: 20px 16px !important;
		justify-content: center;
	}
	.cmx-benefits__list > li + li { border-left: 1px solid var(--cmx-border) !important; }
	.cmx-benefit__icon { width: 48px; height: 48px; }

	.cmx-categories__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.cmx-cat__media { width: 84px; height: 84px; }
	.cmx-psf .cmx-cat__media .cmx-icon { width: 32px; height: 32px; }
	.cmx-cat__name { font-size: 13.5px; }

	.cmx-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.cmx-card__body { padding: 16px; gap: 10px; }
	.cmx-card__title { font-size: 15px !important; }
	.cmx-price { font-size: 20px; }
	.cmx-card:hover { transform: translateY(-4px); box-shadow: var(--cmx-shadow); }

	/* Banners: el primero ancho, los demás en mosaico */
	.cmx-banners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.cmx-banner--wide { grid-column: 1 / -1; min-height: 300px; }
	.cmx-banners__grid--2 .cmx-banner--tile { grid-column: 1 / -1; }
	.cmx-banner__content { padding: 36px 32px; }
	.cmx-banner--wide .cmx-banner__content { max-width: 56%; padding: 48px; }
	.cmx-banner--wide .cmx-banner__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: var(--cmx-fw-black); }
	.cmx-banner--wide .cmx-banner__media { width: 44%; }
	.cmx-banner--tile { min-height: 280px; }
	.cmx-banner__deco span:first-child { width: 260px; height: 200px; right: -70px; top: -80px; }

	.cmx-footer { padding-top: 64px; margin-top: 72px; }
	.cmx-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
	.cmx-footer__brand { grid-column: 1 / -1; }
	.cmx-footer__contact { grid-column: auto; }
}

@media (min-width: 1024px) {
	.cmx-announce__list {
		display: flex;
		justify-content: center;
		gap: 40px;
	}
	.cmx-announce__item { opacity: 1; transform: none; grid-area: auto; }

	.cmx-header__bar {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo search actions";
		column-gap: 32px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.cmx-search { max-width: 620px; width: 100%; justify-self: center; }
	.cmx-psf .cmx-search__input { height: 48px; }
	.cmx-header__actions { gap: 8px; }
	.cmx-icon-btn { padding: 0 10px; }
	.cmx-logo__img { height: 42px; max-width: 220px; }
	.cmx-logo__mark { width: 48px; height: 42px; }
	.cmx-logo__word { font-size: 31px; }

	.cmx-hero__inner { min-height: 480px; }
	.cmx-hero.has-image .cmx-hero__inner { min-height: 500px; }
	.cmx-hero__img { max-height: 500px; }

	.cmx-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

	.cmx-banners__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cmx-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
	.cmx-footer__brand { grid-column: auto; }
}

@media (min-width: 1280px) {
	.cmx-categories__grid { gap: 24px; }
	.cmx-cat__media { width: 96px; height: 96px; }
}