/* Baby Bloom — base y componentes. Port fiel del mockup (babybloom-design-system.html).
   Componentes con prefijo bb-. Sin reset destructivo global. */

body {
	font-family: var(--bb-font-body);
	font-size: 1rem;
	color: var(--bb-text-default);
	background: var(--bb-bg-page);
	line-height: 1.6;
}
h1, h2, h3, h4,
.bb-home h1, .bb-home h2, .bb-home h3 {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-text-heading);
	line-height: 1.2;
}
.bb-home img { max-width: 100%; display: block; }

/* ---- Accesibilidad ---- */
.bb-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--bb-action-secondary); color: #fff;
	padding: .75rem 1rem; border-radius: 0 0 var(--bb-radius-sm) 0; font-weight: 500;
}
.bb-skip-link:focus { left: 0; }
.bb-screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible, .bb-btn:focus-visible {
	outline: 3px solid var(--bb-focus-ring); outline-offset: 2px; border-radius: var(--bb-radius-sm);
}

/* ---- Plantilla genérica de página (page.php): contenido centrado, sin sidebar ---- */
.bb-page { padding: clamp(2rem, 1.4rem + 3vw, 4rem) 0; }
.bb-page__inner { max-width: 780px; margin-inline: auto; padding-inline: 1.4rem; }
.bb-page__inner > h1 { font-family: var(--bb-font-heading); color: var(--bb-ink); font-size: var(--bb-text-3xl); line-height: 1.15; margin: 0 0 1rem; }
.bb-page__inner > h2 { font-family: var(--bb-font-heading); color: var(--bb-ink); margin: 2rem 0 .8rem; }
.bb-page__inner p { color: var(--bb-text-muted); line-height: 1.7; margin: 0 0 1rem; }
.bb-page__inner .bb-btn { margin-top: 1rem; }

/* ---- Contenedor / secciones ---- */
.bb-container { max-width: var(--bb-container); margin-inline: auto; padding-inline: 1.4rem; }
.bb-section { max-width: var(--bb-container); margin-inline: auto; padding: var(--section-pad) 1.4rem; }
.bb-section-head { text-align: center; max-width: 60ch; margin: 0 auto 2.6rem; }
.bb-section-head h2 { font-size: var(--bb-text-3xl); }
.bb-section-head p { margin-top: .6rem; color: var(--bb-text-muted); }
.bb-kicker {
	font-family: var(--bb-font-heading); font-weight: 700; color: var(--bb-text-accent);
	font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---- Botones (DESIGN_BRIEF §6) ---- */
.bb-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--bb-font-body); font-weight: 500;
	border-radius: var(--bb-radius-full); padding: .85rem 1.7rem; font-size: 1rem;
	border: none; cursor: pointer; text-decoration: none;
	min-height: 44px; box-sizing: border-box;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.bb-btn:hover { transform: translateY(-2px); box-shadow: var(--bb-shadow-md); }
.bb-btn--primary { background: var(--bb-action-primary); color: var(--bb-action-primary-text); }
.bb-btn--primary:hover { background: var(--bb-action-primary-hover); color: #fff; }
.bb-btn--secondary { background: var(--bb-action-secondary); color: #fff; }
.bb-btn--secondary:hover { background: var(--bb-action-secondary-hover); color: #fff; }
.bb-btn--ghost { background: transparent; color: var(--bb-action-ghost); border: 2px solid var(--bb-action-ghost); }
.bb-btn--ghost:hover { background: var(--bb-action-ghost); color: #fff; }
.bb-btn--ghost-light { background: transparent; color: #fff; border: 2px solid #fff; }
.bb-btn--ghost-light:hover { background: #fff; color: var(--bb-action-secondary); }
.bb-btn--wa { background: var(--bb-wa); color: #fff; }
.bb-btn--wa:hover { background: #34af53; color: #fff; }
.bb-btn__ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Badges de servicio (tinte 100 + texto 700) ---- */
.bb-badge {
	display: inline-block; font-family: var(--bb-font-body); font-weight: 500;
	font-size: .8rem; border-radius: var(--bb-radius-full); padding: .3rem .9rem;
}
.bb-badge--lenguaje { background: var(--bb-calma-100); color: var(--bb-calma-700); }
.bb-badge--neuromotor { background: var(--bb-equilibrio-100); color: var(--bb-equilibrio-700); }
.bb-badge--conductiva { background: var(--bb-alegria-100); color: var(--bb-alegria-700); }
.bb-badge--habilidades { background: var(--bb-creatividad-100); color: var(--bb-creatividad-700); }
.bb-badge--natacion { background: var(--bb-amor-100); color: var(--bb-amor-700); }
.bb-badge--alegria { background: var(--bb-alegria); color: var(--bb-ink); }
.bb-badge--ghost { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.45); }

/* ---- Motivos de marca: flor y corazón recolorables (SVG real como máscara) ---- */
.bb-mask-flor, .bb-mask-corazon { display: inline-block; background-color: currentColor; }
.bb-mask-flor {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20119.82%20118.3%22%3E%3Cpath%20d%3D%22M118.48%2C43.84c-4.04-13.34-16.29-21.93-29.54-21.92C85.1%2C9.23%2C73.33%2C0%2C59.39%2C0c-12.85%2C0-23.87%2C7.86-28.51%2C19.03-12.1%2C0-23.58%2C7.16-28.51%2C19.03-5.35%2C12.87-1.33%2C27.28%2C8.9%2C35.7-5.09%2C12.23-1.85%2C26.84%2C8.91%2C35.69%2C10.77%2C8.85%2C25.72%2C9.19%2C36.74%2C1.83%2C10.23%2C8.42%2C25.15%2C9.56%2C36.74%2C1.82%2C11.59-7.74%2C16.26-21.95%2C12.41-34.63%2C11.02-7.35%2C16.44-21.3%2C12.4-34.63Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20119.82%20118.3%22%3E%3Cpath%20d%3D%22M118.48%2C43.84c-4.04-13.34-16.29-21.93-29.54-21.92C85.1%2C9.23%2C73.33%2C0%2C59.39%2C0c-12.85%2C0-23.87%2C7.86-28.51%2C19.03-12.1%2C0-23.58%2C7.16-28.51%2C19.03-5.35%2C12.87-1.33%2C27.28%2C8.9%2C35.7-5.09%2C12.23-1.85%2C26.84%2C8.91%2C35.69%2C10.77%2C8.85%2C25.72%2C9.19%2C36.74%2C1.83%2C10.23%2C8.42%2C25.15%2C9.56%2C36.74%2C1.82%2C11.59-7.74%2C16.26-21.95%2C12.41-34.63%2C11.02-7.35%2C16.44-21.3%2C12.4-34.63Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.bb-mask-corazon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20116.16%20116.11%22%3E%3Cpath%20d%3D%22M81.93%2C0h0c-18.91%2C0-34.23%2C15.33-34.23%2C34.23v7.78c0%2C3.14-2.54%2C5.68-5.68%2C5.68h-7.78C15.33%2C47.69%2C0%2C63.02%2C0%2C81.93h0c0%2C18.59%2C14.82%2C33.68%2C33.29%2C34.19l59.67-.27c13.12-1.93%2C23.2-13.2%2C23.2-26.85v-54.75C116.16%2C15.33%2C100.83%2C0%2C81.93%2C0Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20116.16%20116.11%22%3E%3Cpath%20d%3D%22M81.93%2C0h0c-18.91%2C0-34.23%2C15.33-34.23%2C34.23v7.78c0%2C3.14-2.54%2C5.68-5.68%2C5.68h-7.78C15.33%2C47.69%2C0%2C63.02%2C0%2C81.93h0c0%2C18.59%2C14.82%2C33.68%2C33.29%2C34.19l59.67-.27c13.12-1.93%2C23.2-13.2%2C23.2-26.85v-54.75C116.16%2C15.33%2C100.83%2C0%2C81.93%2C0Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
/* Composición dentro de la flor de marca (hero) */
.bb-foto-flor {
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20119.82%20118.3%22%3E%3Cpath%20d%3D%22M118.48%2C43.84c-4.04-13.34-16.29-21.93-29.54-21.92C85.1%2C9.23%2C73.33%2C0%2C59.39%2C0c-12.85%2C0-23.87%2C7.86-28.51%2C19.03-12.1%2C0-23.58%2C7.16-28.51%2C19.03-5.35%2C12.87-1.33%2C27.28%2C8.9%2C35.7-5.09%2C12.23-1.85%2C26.84%2C8.91%2C35.69%2C10.77%2C8.85%2C25.72%2C9.19%2C36.74%2C1.83%2C10.23%2C8.42%2C25.15%2C9.56%2C36.74%2C1.82%2C11.59-7.74%2C16.26-21.95%2C12.41-34.63%2C11.02-7.35%2C16.44-21.3%2C12.4-34.63Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20119.82%20118.3%22%3E%3Cpath%20d%3D%22M118.48%2C43.84c-4.04-13.34-16.29-21.93-29.54-21.92C85.1%2C9.23%2C73.33%2C0%2C59.39%2C0c-12.85%2C0-23.87%2C7.86-28.51%2C19.03-12.1%2C0-23.58%2C7.16-28.51%2C19.03-5.35%2C12.87-1.33%2C27.28%2C8.9%2C35.7-5.09%2C12.23-1.85%2C26.84%2C8.91%2C35.69%2C10.77%2C8.85%2C25.72%2C9.19%2C36.74%2C1.83%2C10.23%2C8.42%2C25.15%2C9.56%2C36.74%2C1.82%2C11.59-7.74%2C16.26-21.95%2C12.41-34.63%2C11.02-7.35%2C16.44-21.3%2C12.4-34.63Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Foto real dentro de la flor de marca (hero): llena y se recorta a la flor. */
.bb-foto-flor { overflow: hidden; }
.bb-foto-flor > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Divisor ondulado real ---- */
.bb-divisor { display: block; width: min(860px, 92%); margin: 0 auto; height: auto; }

/* ---- Reveal (aparición suave) — solo oculta si hay JS (.bb-js); si JS falla, visible ---- */
.bb-js .bb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.bb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bb-reveal { opacity: 1; transform: none; transition: none; }
	.bb-btn:hover, .bb-svc:hover, .bb-prod:hover { transform: none; }
	* { scroll-behavior: auto !important; }
}