/*
 * Baby Bloom — Página "Contacto".
 * Se encola solo en is_page('contacto'). Reutiliza tokens.css, base.css y el
 * sistema de franjas .bbet-* (estimulacion.css). Aquí viven únicamente los
 * componentes propios de contacto: hero suave, métodos, acordeón accesible,
 * "visítanos" con mapa, horarios y CTA final rosa. Sin scroll horizontal.
 */

.bb-contact-main { overflow-x: clip; }
.bb-contact { display: block; }
/* La última franja (CTA) toca el footer, sin línea intermedia. */
.bb-contact > .bb-contact-cta { margin-bottom: 0; }

/* ===================================================================== *
 * 1. Hero (azul muy suave, texto navy, apoyo gráfico de marca)
 * ===================================================================== */
.bb-contact-hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-block: var(--bb-hero-pad-y);
}
.bb-contact-hero h1 {
	font-family: var(--bb-font-heading);
	font-size: var(--bb-text-4xl);
	line-height: 1.15;
	color: var(--bb-ink);
	margin: 0.5rem 0 0.9rem;
}
.bb-contact-hero__lead {
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--bb-text-default);
	max-width: 50ch;
	margin: 0 0 1.6rem;
}
.bb-contact-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.bb-contact-hero__micro {
	margin: 1.2rem 0 0;
	display: grid;
	gap: 0.25rem;
	color: var(--bb-confianza-700);
	font-size: 0.95rem;
}
.bb-contact-hero__micro-line { display: inline-flex; align-items: center; gap: 0.45rem; }
.bb-contact-hero__micro-line::before {
	content: "";
	width: 14px; height: 14px; flex: none;
	background: var(--bb-equilibrio);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%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%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.bb-contact-hero__visual { position: relative; display: grid; place-items: center; min-height: var(--bb-hero-flor); }
.bb-contact-hero__flor {
	width: var(--bb-hero-flor);
	height: var(--bb-hero-flor);
	background: linear-gradient(145deg, var(--bb-amor) 0%, var(--bb-alegria) 55%, var(--bb-calma) 110%);
	display: block;
}
.bb-contact-hero__heart {
	position: absolute;
	right: 12%;
	bottom: 8%;
	width: 64px;
	height: 64px;
	color: var(--bb-amor-700);
}

/* ===================================================================== *
 * 2. Alivio (franja cálida, contenido centrado, sin tarjeta gigante)
 * ===================================================================== */
.bb-contact-alivio__inner { text-align: center; }
.bb-contact-alivio__heart {
	width: 46px; height: 46px;
	color: var(--bb-amor);
	margin: 0 auto 0.8rem;
	display: block;
}
.bb-contact-alivio h2 {
	font-family: var(--bb-font-heading);
	font-size: var(--bb-text-2xl);
	color: var(--bb-ink);
	line-height: 1.25;
	margin: 0.4rem auto 0.9rem;
	max-width: 24ch;
}
.bb-contact-alivio p {
	color: var(--bb-text-default);
	line-height: 1.7;
	max-width: 58ch;
	margin: 0 auto;
}
.bb-contact-alivio__cta { margin-top: 1.6rem; }

/* ===================================================================== *
 * 3. Formas de contacto (WhatsApp dominante; los demás, ligeros)
 * ===================================================================== */
.bb-contact-methods__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.4rem;
	justify-content: center;
	align-items: stretch;
}
.bb-contact-method {
	background: #fff;
	border: 1px solid var(--bb-border-default);
	border-radius: var(--bb-radius-lg);
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 460px;
}
.bb-contact-method h3 {
	font-family: var(--bb-font-heading);
	font-size: 1.2rem;
	color: var(--bb-ink);
	margin: 0;
}
.bb-contact-method p { margin: 0; color: var(--bb-text-muted); line-height: 1.55; }
.bb-contact-method__note { font-size: 0.9rem; color: var(--bb-confianza-700); }
.bb-contact-method .bb-btn { margin-top: auto; align-self: flex-start; }
.bb-contact-method__link { color: var(--bb-action-secondary); font-weight: 600; text-decoration: none; font-size: 1.15rem; }
.bb-contact-method__link:hover { text-decoration: underline; }
/* WhatsApp: visualmente dominante. */
.bb-contact-method--wa {
	background: var(--bb-equilibrio-100);
	border-color: var(--bb-equilibrio);
	box-shadow: var(--bb-shadow-sm);
}
.bb-contact-method__ico { width: 40px; height: 40px; color: var(--bb-wa); display: block; }

/* ===================================================================== *
 * 4. Preguntas rápidas (acordeón accesible)
 * ===================================================================== */
.bb-accordion {
	background: #fff;
	border: 1px solid var(--bb-border-default);
	border-radius: var(--bb-radius-lg);
	overflow: hidden;
}
.bb-accordion__item + .bb-accordion__item { border-top: 1px solid var(--bb-border-subtle); }
.bb-accordion__heading { margin: 0; font: inherit; }
.bb-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	padding: 1.15rem 1.3rem;
	min-height: 56px;
	font-family: var(--bb-font-heading);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--bb-ink);
	line-height: 1.35;
}
.bb-accordion__trigger:hover { background: var(--bb-calma-100); }
.bb-accordion__chevron { flex: none; color: var(--bb-confianza); transition: transform 0.2s ease; }
.bb-accordion__trigger[aria-expanded="true"] .bb-accordion__chevron { transform: rotate(180deg); }
.bb-accordion__panel { color: var(--bb-text-default); }
/* Sin JS (.bb-js ausente) los paneles quedan visibles: el contenido nunca se
   esconde si el script falla. Con JS se colapsan en pintura (sin parpadeo) y el
   script alterna .is-open + aria-expanded. */
.bb-js .bb-accordion__panel { display: none; }
.bb-js .bb-accordion__panel.is-open { display: block; }
.bb-accordion__inner { padding: 0 1.3rem 1.25rem; }
.bb-accordion__inner p { margin: 0; line-height: 1.65; max-width: 62ch; }

/* ===================================================================== *
 * 5. Visítanos (info + mapa)
 * ===================================================================== */
.bb-contact-visit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.6rem);
	align-items: start;
}
.bb-contact-visit__grid.is-no-map { grid-template-columns: 1fr; max-width: 64ch; margin-inline: auto; text-align: center; }
.bb-contact-visit__address {
	font-size: 1.1rem;
	line-height: 1.5;
	color: var(--bb-ink);
	margin: 0 0 1.1rem;
}
.bb-contact-visit__meta { margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.bb-contact-visit__meta dt {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-confianza-700);
	font-size: 0.92rem;
	margin-bottom: 0.15rem;
}
.bb-contact-visit__meta dd { margin: 0; color: var(--bb-text-muted); line-height: 1.55; }
.bb-contact-visit__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--bb-radius-md);
	overflow: hidden;
	border: 1px solid var(--bb-border-default);
	background: var(--bb-gris-100);
}
.bb-contact-visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===================================================================== *
 * 6. Horarios (franja verde suave)
 * ===================================================================== */
.bb-contact-hours__list { margin: 0; display: grid; gap: 0.2rem; }
.bb-contact-hours__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: baseline;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--bb-equilibrio-100);
}
.bb-contact-hours__row:last-child { border-bottom: 0; }
.bb-contact-hours__row dt {
	font-family: var(--bb-font-heading);
	font-weight: 700;
	color: var(--bb-ink);
}
.bb-contact-hours__row dd { margin: 0; color: var(--bb-text-default); text-align: right; }

/* ===================================================================== *
 * 7. CTA final (rosa, conecta con el footer)
 * ===================================================================== */
.bb-contact-cta { background: var(--bb-amor); }
.bb-contact-cta__inner { text-align: center; }
.bb-contact-cta__kicker { color: #FCE3F0; }
.bb-contact-cta h2 {
	font-family: var(--bb-font-heading);
	font-size: var(--bb-text-3xl);
	color: #fff;
	line-height: 1.2;
	margin: 0.5rem auto 0.9rem;
	max-width: 22ch;
}
.bb-contact-cta p { color: #FBE7F1; line-height: 1.65; max-width: 56ch; margin: 0 auto; }
.bb-contact-cta__actions {
	margin-top: 1.8rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
}

/* ===================================================================== *
 * Responsive
 * ===================================================================== */
@media (max-width: 860px) {
	.bb-contact-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.bb-contact-hero__lead { margin-inline: auto; }
	.bb-contact-hero__ctas, .bb-contact-hero__micro { justify-content: center; }
	.bb-contact-hero__micro { justify-items: center; }
	.bb-contact-hero__visual { order: -1; min-height: 0; }
	.bb-contact-visit__grid { grid-template-columns: 1fr; }
	.bb-contact-visit__grid.is-no-map { text-align: left; }
}

@media (max-width: 480px) {
	.bb-contact-hero__ctas .bb-btn,
	.bb-contact-alivio__cta .bb-btn,
	.bb-contact-method .bb-btn,
	.bb-contact-cta__actions .bb-btn { width: 100%; justify-content: center; }
	.bb-contact-method .bb-btn { align-self: stretch; }
	.bb-contact-hours__row { grid-template-columns: 1fr; gap: 0.15rem; }
	.bb-contact-hours__row dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.bb-accordion__chevron { transition: none; }
}