/**
 * Ultra Desnivel — components.css
 * Componentes reutilizables: botones, inputs, badges, chips, tarjetas y
 * las secciones modulares de la home.
 */

/* ============================================================
   Botones
   ============================================================ */
.ud-btn {
	--btn-bg: var(--ud-color-primary);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.3em;
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-bold);
	font-size: var(--ud-fs-base);
	line-height: 1.1;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1px solid var(--btn-bg);
	border-radius: var(--ud-radius-pill);
	cursor: pointer;
	transition: background var(--ud-dur) var(--ud-ease), border-color var(--ud-dur) var(--ud-ease), transform var(--ud-dur) var(--ud-ease);
	text-align: center;
}

.ud-btn:hover,
.ud-btn:focus-visible {
	text-decoration: none;
	transform: translateY(-1px);
}

.ud-btn--primary {
	--btn-bg: var(--ud-color-accent);
	--btn-fg: #fff;
}
.ud-btn--primary:hover,
.ud-btn--primary:focus-visible {
	--btn-bg: var(--ud-color-accent-dark);
}

.ud-btn--outline {
	--btn-bg: transparent;
	--btn-fg: var(--ud-color-primary);
	border-color: var(--ud-color-primary);
}
.ud-btn--outline:hover,
.ud-btn--outline:focus-visible {
	--btn-bg: var(--ud-color-primary);
	--btn-fg: #fff;
}

.ud-btn--ghost {
	--btn-bg: var(--ud-color-surface);
	--btn-fg: var(--ud-color-primary);
	border-color: var(--ud-color-border);
}
.ud-btn--ghost:hover,
.ud-btn--ghost:focus-visible {
	--btn-bg: var(--ud-color-surface-alt);
}

.ud-btn--lg {
	padding: 0.9em 1.8em;
	font-size: var(--ud-fs-large);
}

.ud-btn--block {
	display: flex;
	width: 100%;
}

/* ============================================================
   Formularios
   ============================================================ */
.ud-input,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.7em 0.9em;
	font: inherit;
	color: var(--ud-color-text);
	background: var(--ud-color-background);
	border: var(--ud-border);
	border-radius: var(--ud-radius-sm);
	transition: border-color var(--ud-dur) var(--ud-ease), box-shadow var(--ud-dur) var(--ud-ease);
}

.ud-input:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ud-color-accent);
	box-shadow: 0 0 0 3px rgba(47, 125, 79, 0.18);
}

.ud-form-msg {
	display: inline-block;
	font-size: var(--ud-fs-small);
	font-weight: var(--ud-weight-bold);
}
.ud-form-msg--success { color: var(--ud-color-success); }
.ud-form-msg--error { color: var(--ud-color-error); }

/* ============================================================
   Badges y chips
   ============================================================ */
.ud-badge {
	display: inline-block;
	padding: 0.25em 0.6em;
	font-size: 0.72rem;
	font-weight: var(--ud-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--ud-radius-sm);
	background: var(--ud-color-primary);
	color: #fff;
	line-height: 1.2;
}
.ud-badge--sale { background: var(--ud-color-promo); }
.ud-badge--new { background: var(--ud-color-accent); }
.ud-badge--low { background: var(--ud-color-warning); }
.ud-badge--out { background: var(--ud-color-muted); }

.ud-chip {
	display: inline-block;
	padding: 0.4em 0.9em;
	font-size: var(--ud-fs-small);
	border: var(--ud-border);
	border-radius: var(--ud-radius-pill);
	background: var(--ud-color-background);
	color: var(--ud-color-text);
	transition: border-color var(--ud-dur) var(--ud-ease), background var(--ud-dur) var(--ud-ease);
}
.ud-chip:hover,
.ud-chip:focus-visible {
	border-color: var(--ud-color-accent);
	text-decoration: none;
}

/* ============================================================
   Beneficios
   ============================================================ */
.ud-benefits__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ud-space-40);
}
.ud-benefit {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: var(--ud-space-40);
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	background: var(--ud-color-background);
}
.ud-benefit__icon {
	width: 28px;
	height: 28px;
	color: var(--ud-color-accent);
}
.ud-benefit__icon svg { width: 28px; height: 28px; }
.ud-benefit__title { margin: 0; font-size: var(--ud-fs-large); }
.ud-benefit__text { margin: 0; color: var(--ud-color-muted); font-size: var(--ud-fs-small); }

/* ============================================================
   Hero
   ============================================================ */
.ud-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 56vh, 640px);
	background: var(--ud-color-secondary);
	color: #fff;
	overflow: hidden;
}
.ud-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ud-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ud-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(15, 20, 15, 0.72) 0%, rgba(15, 20, 15, 0.32) 60%, rgba(15, 20, 15, 0.05) 100%);
}
.ud-hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding-block: var(--ud-space-60);
}
.ud-hero--has-image .ud-hero__title,
.ud-hero--has-image .ud-hero__text {
	color: #fff;
}
.ud-hero__title {
	color: #fff;
	margin-bottom: 0.4em;
	text-wrap: balance;
}
.ud-hero__text {
	font-size: var(--ud-fs-large);
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 1.4em;
	max-width: 48ch;
}
.ud-hero__actions {
	display: flex;
	gap: var(--ud-space-30);
	flex-wrap: wrap;
}
.ud-hero:not(.ud-hero--has-image) .ud-hero__actions .ud-btn--outline {
	border-color: #fff;
	color: #fff;
}
.ud-hero:not(.ud-hero--has-image) .ud-hero__actions .ud-btn--outline:hover {
	background: #fff;
	color: var(--ud-color-primary);
}

/* ============================================================
   Activities (Sección B)
   ============================================================ */
.ud-activities__grid,
.ud-goals__grid,
.ud-packs__grid,
.ud-guides__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ud-activities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ud-space-40);
}
.ud-activity-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	overflow: hidden;
	background: var(--ud-color-background);
	color: inherit;
	transition: box-shadow var(--ud-dur) var(--ud-ease), transform var(--ud-dur) var(--ud-ease);
}
.ud-activity-card__link:hover,
.ud-activity-card__link:focus-visible {
	text-decoration: none;
	box-shadow: var(--ud-shadow);
	transform: translateY(-2px);
}
.ud-activity-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ud-color-surface-alt);
	overflow: hidden;
}
.ud-activity-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ud-ease);
}
.ud-activity-card__link:hover .ud-activity-card__img {
	transform: scale(1.04);
}
.ud-activity-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--ud-color-surface) 0%, var(--ud-color-surface-alt) 100%);
}
.ud-activity-card__body {
	padding: var(--ud-space-40);
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.ud-activity-card__title {
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-heading);
	font-size: var(--ud-fs-large);
}
.ud-activity-card__text {
	color: var(--ud-color-muted);
	font-size: var(--ud-fs-small);
}

/* ============================================================
   Goals (Sección D)
   ============================================================ */
.ud-goals__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ud-space-30);
}
.ud-goal-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	height: 100%;
	padding: var(--ud-space-40);
	border: var(--ud-border);
	border-left: 3px solid var(--ud-color-accent);
	border-radius: var(--ud-radius);
	background: var(--ud-color-surface);
	color: var(--ud-color-primary);
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-bold);
	transition: background var(--ud-dur) var(--ud-ease), transform var(--ud-dur) var(--ud-ease);
}
.ud-goal-card__link:hover,
.ud-goal-card__link:focus-visible {
	text-decoration: none;
	background: var(--ud-color-surface-alt);
	transform: translateX(2px);
}
.ud-goal-card__arrow { color: var(--ud-color-accent); }

/* ============================================================
   Packs (Sección F)
   ============================================================ */
.ud-packs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ud-space-40);
}
.ud-pack-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	overflow: hidden;
	background: var(--ud-color-background);
	color: inherit;
	transition: box-shadow var(--ud-dur) var(--ud-ease), transform var(--ud-dur) var(--ud-ease);
}
.ud-pack-card__link:hover,
.ud-pack-card__link:focus-visible {
	text-decoration: none;
	box-shadow: var(--ud-shadow);
	transform: translateY(-2px);
}
.ud-pack-card__media {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--ud-color-secondary) 0%, var(--ud-color-accent-dark) 100%);
}
.ud-pack-card__body {
	padding: var(--ud-space-40);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}
.ud-pack-card__title {
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-heading);
	font-size: var(--ud-fs-large);
}
.ud-pack-card__cta {
	color: var(--ud-color-accent-dark);
	font-weight: var(--ud-weight-bold);
	font-size: var(--ud-fs-small);
}

/* ============================================================
   Editorial (Sección G)
   ============================================================ */
.ud-editorial__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ud-space-50);
	align-items: center;
}
.ud-editorial--reverse .ud-editorial__media { order: 2; }
.ud-editorial__img,
.ud-editorial__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ud-radius-lg);
}
.ud-editorial__placeholder {
	display: block;
	background: linear-gradient(135deg, var(--ud-color-surface) 0%, var(--ud-color-surface-alt) 100%);
}
.ud-editorial__title { text-wrap: balance; }
.ud-editorial__text { color: var(--ud-color-muted); font-size: var(--ud-fs-large); }

/* ============================================================
   Guides (Sección H)
   ============================================================ */
.ud-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ud-space-40);
}
.ud-guide-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}
.ud-guide-card__link:hover { text-decoration: none; }
.ud-guide-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--ud-radius);
	overflow: hidden;
	background: var(--ud-color-surface-alt);
	margin-bottom: 0.8em;
}
.ud-guide-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ud-ease); }
.ud-guide-card__link:hover .ud-guide-card__img { transform: scale(1.04); }
.ud-guide-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ud-color-surface) 0%, var(--ud-color-surface-alt) 100%); }
.ud-guide-card__title {
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-bold);
	font-size: var(--ud-fs-large);
	color: var(--ud-color-primary);
}
.ud-guide-card__link:hover .ud-guide-card__title { color: var(--ud-color-accent-dark); }
.ud-guide-card__meta { font-size: var(--ud-fs-small); color: var(--ud-color-muted); margin-top: 0.3em; }
.ud-guides__topics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ud-space-30);
}
.ud-guide-topic {
	padding: var(--ud-space-40);
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	background: var(--ud-color-surface);
	font-family: var(--ud-font-heading);
	font-weight: var(--ud-weight-bold);
}

/* ============================================================
   Reviews (Sección I)
   ============================================================ */
.ud-reviews__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ud-space-40);
}
.ud-review-card {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	padding: var(--ud-space-40);
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	background: var(--ud-color-background);
}
.ud-review-card__stars { color: #c9a227; letter-spacing: 0.1em; }
.ud-review-card__text {
	margin: 0;
	font-size: var(--ud-fs-large);
	line-height: var(--ud-lh-snug);
}
.ud-review-card__meta { margin: 0; display: flex; flex-direction: column; }
.ud-review-card__name { font-weight: var(--ud-weight-bold); }
.ud-review-card__product { font-size: var(--ud-fs-small); color: var(--ud-color-muted); }

/* ============================================================
   Brands (Sección E)
   ============================================================ */
.ud-brands__rail {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--ud-space-30);
}
.ud-brand-chip__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: var(--ud-space-30);
	border: var(--ud-border);
	border-radius: var(--ud-radius);
	background: var(--ud-color-background);
	transition: border-color var(--ud-dur) var(--ud-ease);
}
.ud-brand-chip__link:hover { border-color: var(--ud-color-accent); }
.ud-brand-chip__logo {
	max-height: 44px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--ud-dur) var(--ud-ease), opacity var(--ud-dur) var(--ud-ease);
}
.ud-brand-chip__link:hover .ud-brand-chip__logo { filter: grayscale(0); opacity: 1; }
.ud-brand-chip__name { font-family: var(--ud-font-heading); font-weight: var(--ud-weight-bold); color: var(--ud-color-muted); }

/* ============================================================
   Community (Sección K)
   ============================================================ */
.ud-community__grid {
	list-style: none;
	margin: 0 0 var(--ud-space-40);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
}
.ud-community__cell {
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--ud-color-surface) 0%, var(--ud-color-surface-alt) 100%);
	border-radius: var(--ud-radius-sm);
}
.ud-community__cta { text-align: center; }

/* ============================================================
   Newsletter (Sección L)
   ============================================================ */
.ud-newsletter {
	background: var(--ud-color-primary);
	color: #fff;
	padding-block: var(--ud-space-60);
}
.ud-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ud-space-50);
	align-items: center;
}
.ud-newsletter__title { color: #fff; text-wrap: balance; }
.ud-newsletter__text { color: rgba(255, 255, 255, 0.85); margin: 0; }
.ud-newsletter-form__row {
	display: flex;
	gap: 0.6em;
	margin: 0 0 0.8em;
}
.ud-newsletter-form__row .ud-input { flex: 1; }
.ud-newsletter-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: var(--ud-fs-small);
	color: rgba(255, 255, 255, 0.8);
}
.ud-newsletter-form__consent input { width: auto; margin-top: 0.2em; }
.ud-newsletter-form__status { margin: 0.6em 0 0; min-height: 1.2em; }
.ud-newsletter-form--compact .ud-newsletter-form__consent { color: var(--ud-color-muted); }

/* Newsletter dentro del footer (fondo claro) */
.ud-footer .ud-newsletter-form__consent { color: var(--ud-color-muted); }

/* ============================================================
   Product rail (scroll horizontal en móvil)
   ============================================================ */
.ud-product-rail,
.ud-brands__rail {
	scroll-snap-type: x proximity;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.ud-breadcrumbs {
	font-size: var(--ud-fs-small);
	color: var(--ud-color-muted);
	padding-block: var(--ud-space-30);
}
.ud-breadcrumbs a { color: var(--ud-color-muted); }
.ud-breadcrumbs a:hover { color: var(--ud-color-accent-dark); }
.ud-breadcrumbs__sep { margin: 0 0.5em; opacity: 0.6; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.ud-activities__grid,
	.ud-packs__grid,
	.ud-guides__grid,
	.ud-guides__topics,
	.ud-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ud-goals__grid { grid-template-columns: repeat(2, 1fr); }
	.ud-brands__rail { grid-template-columns: repeat(4, 1fr); }
	.ud-community__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
	.ud-section { padding-block: var(--ud-space-50); }
	.ud-editorial__inner,
	.ud-newsletter__inner {
		grid-template-columns: 1fr;
	}
	.ud-editorial--reverse .ud-editorial__media { order: 0; }
	.ud-activities__grid,
	.ud-packs__grid,
	.ud-guides__grid,
	.ud-guides__topics,
	.ud-reviews__grid,
	.ud-goals__grid {
		grid-template-columns: 1fr;
	}
	.ud-benefits__grid { grid-template-columns: 1fr; }
	.ud-brands__rail {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.ud-brand-chip {
		flex: 0 0 45%;
		scroll-snap-align: start;
	}
	.ud-newsletter-form__row { flex-direction: column; }
	.ud-hero__actions { flex-direction: column; align-items: stretch; }
}

/* Rail de productos a scroll en móvil: lo afina woocommerce.css según .products */
@media (max-width: 680px) {
	.ud-product-rail .products {
		display: flex !important;
		overflow-x: auto;
		gap: var(--ud-space-30);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5em;
	}
	.ud-product-rail .products > * {
		flex: 0 0 70%;
		scroll-snap-align: start;
	}
}