/* ==========================================================================
   NUDA — Páginas internas del maquetador con diseño claro (body.nuda-light-page)
   Se activan cuando la primera fila lleva la clase .nuda-page-hero (ver
   nuda_is_light_pb_page() en functions.php). Hoy: «Nosotros».
   Filas: .nuda-page-hero (banner rojo), .nuda-about (historia), .nuda-values.
   ========================================================================== */

/* ── Base: blanca, sobre el negro que avg-site.css da a .avg-pb-page ─────── */
html body.avg-pb-page.nuda-light-page,
html body.avg-pb-page.nuda-light-page .site,
html body.avg-pb-page.nuda-light-page .site-main,
html body.avg-pb-page.nuda-light-page .entry-content,
html body.avg-pb-page.nuda-light-page .entry-content > .oz-pb-root { background: #fff !important; }
html body.nuda-light-page .oz-pb-root { color: var(--nuda-ink); font-family: var(--nuda-body); }
html body.nuda-light-page .oz-pb-root p { margin: 0; color: inherit; line-height: 1.5; }
html body.nuda-light-page .oz-pb-root :is(h1, h2, h3, h4) {
	margin: 0;
	color: var(--nuda-ink);
	font-family: var(--nuda-display);
	font-weight: 700;
	letter-spacing: 0 !important;
	text-transform: none;
}
.nuda-light-page .oz-pb-root ul { margin: 0; padding: 0; list-style: none; }
.nuda-light-page .oz-pb-root *,
.nuda-light-page .oz-pb-root *::before,
.nuda-light-page .oz-pb-root *::after { box-sizing: border-box; }

/* Títulos de sección con raya roja (igual que la portada). */
html body.nuda-light-page .oz-pb-root .nuda-title {
	font-size: clamp(2rem, 2.6vw, 2.875rem);
	line-height: 1.1;
	text-align: center;
}
.nuda-light-page .nuda-title--line::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--nuda-red);
}

/* Icono de línea roja en círculo (tarjetas de historia y valores). */
.nuda-light-page .nuda-ico {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	border: 1px solid var(--nuda-line);
	border-radius: 50%;
	background: #fff;
	color: var(--nuda-red);
}
.nuda-light-page .nuda-ico svg { width: 28px; height: 28px; }

/* ── Banner rojo con migas (mismo aspecto que el de la tienda) ───────────── */
html body.nuda-light-page .oz-pb-root .nuda-page-hero {
	display: flex;
	align-items: center;
	min-height: 102px;
	background: var(--nuda-red);
	color: #fff;
	text-align: center;
}
.nuda-page-hero > .oz-pb-inner { width: 100%; }
.nuda-page-hero .oz-pb-text { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; }
html body.nuda-light-page .oz-pb-root .nuda-page-hero__title { color: #fff; font-size: 1.75rem; line-height: 1.1; }
.nuda-page-hero__crumbs { color: rgba(255, 255, 255, .9); font-size: .8125rem; }
.nuda-page-hero__crumbs a { color: #fff; text-decoration: none; }
.nuda-page-hero__crumbs a:hover { text-decoration: underline; }

/* ── Nuestra historia ────────────────────────────────────────────────────── */
html body .nuda-about .oz-pb-grid { align-items: center; }

.nuda-about__media { position: relative; margin: 0; }
.nuda-about__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 627 / 854;
	object-fit: cover;
	border-radius: 14px;
}

/* Sello «Más de 10 años de experiencia»: rojo con escudo + negro con texto. */
.nuda-about__badge {
	position: absolute;
	right: 22px;
	bottom: 16px;
	display: flex;
	overflow: hidden;
	border-radius: 18px;
	background: #111;
	box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6);
}
.nuda-about__badge-icon {
	display: grid;
	place-items: center;
	width: 120px;
	background: var(--nuda-red);
	color: #fff;
}
.nuda-about__badge-icon svg { width: 72px; height: 72px; stroke-width: 1.9; }
.nuda-about__badge-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 26px 30px 26px 20px;
	color: #9b9b9b;
	font: 400 1.75rem/1.2 var(--nuda-body);
}
.nuda-about__badge-text strong { color: #fff; font: 700 2.875rem/1.1 var(--nuda-display); }

.nuda-about__body .nuda-title { margin-bottom: 38px !important; }
.nuda-about__text { display: grid; gap: 1.6em; color: #4a4a4a; font-size: .9375rem; line-height: 1.5; }
html body.nuda-light-page .oz-pb-root .nuda-about__lead {
	margin: 44px 0 50px;
	color: var(--nuda-ink);
	font: 600 1.375rem/1.3 var(--nuda-display);
}

.nuda-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nuda-feat {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 132px;
	padding: 24px 28px;
	border: 1px solid var(--nuda-line);
	border-radius: 14px;
	transition: border-color .25s, box-shadow .25s, translate .25s var(--nuda-ease);
}
.nuda-feat:hover { border-color: #f1c4c4; box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .35); translate: 0 -2px; }
html body.nuda-light-page .oz-pb-root .nuda-feat h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.nuda-feat p { margin-top: 8px !important; color: #555; font-size: .9375rem; line-height: 1.4; }

/* ── Lo que nos mueve ────────────────────────────────────────────────────── */
.nuda-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 41px;
	margin-top: 44px !important;
}
.nuda-value {
	padding: 40px 40px 44px;
	border: 1px solid #ececec;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .25);
	transition: box-shadow .25s, translate .25s var(--nuda-ease);
}
.nuda-value:hover { box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .35); translate: 0 -3px; }
html body.nuda-light-page .oz-pb-root .nuda-value h3 { margin-top: 26px; font-size: 1.5625rem; font-weight: 600; line-height: 1.2; }
.nuda-value p { margin-top: 12px !important; color: #555; font-size: 1.0625rem; line-height: 1.55; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1366px) {
	.nuda-feat { gap: 18px; padding: 22px; }
	.nuda-about__badge-text { font-size: 1.375rem; padding: 20px 24px 20px 16px; }
	.nuda-about__badge-text strong { font-size: 2.25rem; }
	.nuda-about__badge-icon { width: 96px; }
	.nuda-about__badge-icon svg { width: 56px; height: 56px; }
}
@media (max-width: 1024px) {
	.nuda-about__media img { aspect-ratio: 4 / 3; max-height: 70vh; }
	.nuda-values__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 680px) {
	.nuda-feats,
	.nuda-values__grid { grid-template-columns: 1fr; }
	.nuda-about__body .nuda-title { margin-bottom: 28px !important; }
	html body.nuda-light-page .oz-pb-root .nuda-about__lead { margin: 32px 0 28px; }
	.nuda-feat { min-height: 0; padding: 18px; }
	.nuda-ico { width: 56px; height: 56px; }
	.nuda-value { padding: 28px 24px 32px; }
	.nuda-about__badge { right: 12px; bottom: 12px; border-radius: 14px; }
	.nuda-about__badge-icon { width: 72px; }
	.nuda-about__badge-icon svg { width: 40px; height: 40px; }
	.nuda-about__badge-text { padding: 14px 18px 14px 12px; font-size: 1rem; }
	.nuda-about__badge-text strong { font-size: 1.625rem; }
}