/* Baby Bloom — Página "Nosotros".
   Estilos acotados a .bb-about. Reutiliza el sistema de franjas (.bbet-band/.bbet-wrap),
   botones (.bb-btn--*), eyebrow (.bb-kicker) y máscaras de marca (.bb-mask-*).
   Sin fotografías: los visuales son composición gráfica de marca (fallback limpio). */

/* Restablece el ancho/padding propio de Storefront para que las franjas manden. */
.bb-about-main { margin: 0; max-width: none; padding: 0; }

/* ---- Tintes de sección (full width) ----
   El default va primero; los modificadores (misma especificidad) lo sobreescriben
   por orden de cascada. */
.bb-about__section { width: 100%; background: var(--bb-blanco); }
.bb-about__hero            { background: var(--bb-amor-100); }
.bb-about__section--blanco { background: var(--bb-blanco); }
.bb-about__section--azul   { background: var(--bb-calma-100); }
.bb-about__section--verde  { background: var(--bb-equilibrio-100); }
.bb-about__testimonial     { background: var(--bb-creatividad-100); }
.bb-about__values-band     { background: var(--bb-alegria-100); }
.bb-about__cta             { background: var(--bb-amor-100); }

/* ---- Tipografía base de la página ---- */
.bb-about h2 {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-text-heading);
	font-size: var(--bb-text-3xl);
	line-height: 1.15;
	margin: 0 0 .6em;
}
.bb-about h3 {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-text-heading);
	font-size: var(--bb-text-xl);
	line-height: 1.2;
	margin: 0 0 .4em;
}
.bb-about p {
	color: var(--bb-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
	max-width: 64ch;
}
.bb-about__head { max-width: 760px; }
.bb-about__intro { font-size: 1.1rem; }
.bb-about__lead {
	font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
	color: var(--bb-text-default);
	max-width: 60ch;
}

/* ---- Botonera ---- */
.bb-about__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 1.6rem;
}
.bb-about__cta-row--center { justify-content: center; }

/* ---- Hero ---- */
.bb-about__hero-inner,
.bb-about__split {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
/* Alinea la altura del hero de Nosotros con el resto (padding compartido). */
.bb-about__hero-inner { padding-block: var(--bb-hero-pad-y); }
.bb-about__split--reverse .bb-about__split-text { order: 2; }
.bb-about__split--reverse .bb-about__visual { order: 1; }
.bb-about__hero h1 {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-text-heading);
	font-size: var(--bb-text-4xl);
	line-height: 1.1;
	margin: .3em 0 .5em;
}

/* ---- Visual de marca (sustituye fotografía) ---- */
.bb-about__visual {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}
.bb-about__shape {
	width: clamp(120px, 22vw, 200px);
	height: clamp(120px, 22vw, 200px);
	opacity: .92;
}
.bb-about__shape--flor    { color: var(--bb-amor); }
.bb-about__shape--corazon { color: var(--bb-calma); margin-left: -40px; margin-top: 60px; }
.bb-about__visual .bb-about__shape:only-child { color: var(--bb-creatividad); margin: 0; }

/* ---- Cita editorial ---- */
.bb-about__quote { margin: 1.8rem 0 0; padding: 0; }
.bb-about__quote blockquote {
	margin: 0;
	padding: 0 0 0 1.1rem;
	border-left: 4px solid var(--bb-amor);
}
.bb-about__quote blockquote p {
	font-family: var(--bb-font-heading);
	font-weight: 600;
	font-style: italic;
	color: var(--bb-text-heading);
	font-size: var(--bb-text-xl);
	line-height: 1.4;
	max-width: 52ch;
	margin: 0;
}
.bb-about__quote figcaption {
	margin-top: .7rem;
	padding-left: 1.1rem;
	font-weight: 600;
	color: var(--bb-text-accent);
}
.bb-about__quote--feature {
	max-width: 760px;
	margin: 0 auto 2.4rem;
	text-align: center;
}
.bb-about__quote--feature blockquote {
	border-left: 0;
	padding: 0;
}
.bb-about__quote--feature blockquote p {
	font-size: var(--bb-text-2xl);
	max-width: none;
}
.bb-about__quote--feature figcaption { padding-left: 0; }
.bb-about__quote--editorial {
	text-align: center;
	max-width: none;
}
.bb-about__quote--editorial blockquote { border-left: 0; padding: 0; }
.bb-about__quote--editorial blockquote p {
	font-size: var(--bb-text-2xl);
	max-width: none;
	color: var(--bb-confianza-900);
}
.bb-about__quote--editorial figcaption { padding-left: 0; }
.bb-about__disclaimer {
	margin-top: 1.2rem;
	font-size: .92rem;
	color: var(--bb-text-muted);
	text-align: center;
}

/* ---- Pilares (3 mensajes) ---- */
.bb-about__pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.4rem, 3vw, 2.4rem);
}
.bb-about__pillar { margin: 0; }
.bb-about__pillar p { margin-bottom: 0; }
.bb-about__pillar-ico {
	width: 44px;
	height: 44px;
	color: var(--bb-amor);
	margin-bottom: .8rem;
}

/* ---- Proceso (timeline numerada) ---- */
.bb-about__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.4rem, 3vw, 2.2rem);
}
.bb-about__step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.bb-about__step-num {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--bb-radius-full);
	background: var(--bb-equilibrio-700);
	color: #fff;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-about__step-body h3 { margin-bottom: .25em; }
.bb-about__step-body p { margin-bottom: 0; }
.bb-about__note {
	margin-top: 1.8rem;
	font-size: .92rem;
	font-style: italic;
	color: var(--bb-text-muted);
}

/* ---- Equipo ---- */
.bb-about__team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.2rem, 3vw, 2rem);
	margin-top: 1.5rem;
}
.bb-about__member {
	background: var(--bb-surface-card);
	border: 1px solid var(--bb-border-default);
	border-radius: var(--bb-radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--bb-shadow-sm);
}
.bb-about__member-ico {
	width: 40px;
	height: 40px;
	color: var(--bb-confianza);
	margin-bottom: .8rem;
}
.bb-about__member-avatar {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1rem;
	background: var(--bb-surface-muted, #eef2f6);
	box-shadow: 0 0 0 4px var(--bb-surface-card), 0 0 0 5px var(--bb-border-default);
}
.bb-about__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-about__member-name { margin-bottom: .15em; }
.bb-about__member-role {
	color: var(--bb-text-accent);
	font-weight: 600;
	margin-bottom: .8rem;
}
.bb-about__member-note {
	font-size: .92rem;
	font-style: italic;
}
.bb-about__team-foot {
	margin-top: 1.6rem;
	max-width: 70ch;
}

/* ---- Valores ---- */
.bb-about__values {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.bb-about__value {
	background: var(--bb-blanco);
	border: 1px solid var(--bb-border-default);
	border-radius: var(--bb-radius-full);
	padding: .55rem 1.3rem;
	font-family: var(--bb-font-heading);
	font-weight: 600;
	color: var(--bb-text-heading);
}

/* ---- CTA final ---- */
.bb-about__cta-inner { text-align: center; }
.bb-about__cta-inner p { margin-left: auto; margin-right: auto; }

/* ---- Fotografías reales (split + proceso) ---- */
.bb-about__media { margin: 0; }
.bb-about__img,
.bb-about__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: cover;
	border-radius: var(--bb-radius-lg);
	box-shadow: var(--bb-shadow-md);
}
.bb-about__media--wide {
	max-width: 760px;
	margin: 2rem auto 0;
}
.bb-about__media--wide img { max-height: 460px; }
/* En split inverso (historia), la imagen va a la izquierda en desktop. */
.bb-about__split--reverse .bb-about__media { order: 1; }

/* ---- Galería "El espacio" (CSS Grid estático) ---- */
.bb-about__gallery {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	margin-top: 2rem;
}
.bb-about__gallery-item { margin: 0; }
.bb-about__gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bb-radius-md);
	box-shadow: var(--bb-shadow-sm);
}
.bb-about__gallery-item--main { grid-column: 1; grid-row: 1 / 3; }
.bb-about__gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.bb-about__gallery-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.bb-about__gallery-item:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.bb-about__gallery-item:nth-child(2) img,
.bb-about__gallery-item:nth-child(3) img { aspect-ratio: 4 / 3; }
.bb-about__gallery-item:nth-child(4) img { aspect-ratio: 18 / 7; }

/* ---- Foto de Jessica sticky (solo sección historia, solo 2 columnas) ----
   Acotado a .bb-about__story para no afectar el hero ni la sección 2, que usan
   las mismas clases .bb-about__split / .bb-about__media. Ningún padre tiene
   overflow/transform/filter/contain que rompa el sticky (auditado). El header
   es sticky (~81px), por eso el offset superior lo despeja. */
@media (min-width: 861px) {
	.bb-about__story .bb-about__split { align-items: start; }
	.bb-about__story .bb-about__media {
		position: sticky;
		top: calc(var(--bb-header-offset, 96px) + 24px);
		align-self: start;
	}
	.bb-about__story .bb-about__media img {
		max-height: calc(100vh - 150px);
		object-fit: cover;
		object-position: center top;
	}
}
@media (max-width: 860px) {
	.bb-about__story .bb-about__media { position: static; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.bb-about__hero-inner,
	.bb-about__split { grid-template-columns: 1fr; }
	.bb-about__split--reverse .bb-about__split-text { order: 1; }
	.bb-about__split--reverse .bb-about__visual,
	.bb-about__split--reverse .bb-about__media { order: 2; }
	.bb-about__visual { min-height: 180px; }
	.bb-about__media img { max-height: 70vh; }
	.bb-about__pillars { grid-template-columns: 1fr; }
	.bb-about__steps { grid-template-columns: 1fr; }
	.bb-about__team-grid { grid-template-columns: 1fr; }
	/* Galería: 2 columnas, sin spans complejos */
	.bb-about__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.bb-about__gallery-item,
	.bb-about__gallery-item--main,
	.bb-about__gallery-item:nth-child(2),
	.bb-about__gallery-item:nth-child(3),
	.bb-about__gallery-item:nth-child(4) { grid-column: auto; grid-row: auto; }
	.bb-about__gallery-item--main { grid-column: 1 / -1; }
	.bb-about__gallery-item img,
	.bb-about__gallery-item:nth-child(4) img { aspect-ratio: 4 / 3; }
	.bb-about__gallery-item--main img { aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
	.bb-about p { font-size: 1rem; }
	.bb-about__values { justify-content: flex-start; }
	.bb-about__value { padding: .5rem 1rem; font-size: .95rem; }
	.bb-about__shape--corazon { margin-left: -24px; margin-top: 36px; }
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
	.bb-about * { animation: none !important; transition: none !important; }
}