/* ============================================================================
 * SOMNO · reserva.css
 * Estilos de la pagina Reserva (plantilla reserva-nueva.php).
 * Consume las variables de tokens.css. No redefine paleta.
 * ============================================================================ */

.somno-reserva {
	max-width: var(--somno-header-max);
	margin: 0 auto;
	padding: 48px 20px 64px;
	font-family: var(--somno-font);
	color: var(--somno-text);
}

/* -- Hero de reserva (2 columnas: texto | CTAs) -- */
.somno-reserva__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	background: linear-gradient(135deg, var(--somno-hero-grad-1, oklch(0.96 0.018 250)) 0%, var(--somno-surface) 100%);
	border: 1px solid var(--somno-border);
	border-radius: var(--somno-radius-lg);
	padding: 40px;
	margin-bottom: 32px;
}
.somno-reserva__hero-text { min-width: 0; }
.somno-reserva__title {
	font-size: 38px;
	font-weight: 800;
	color: var(--somno-navy);
	margin: 0 0 12px;
	line-height: 1.1;
}
.somno-reserva__subtitle {
	font-size: 16.5px;
	color: var(--somno-text-muted);
	margin: 0;
	line-height: 1.55;
}
.somno-reserva__hero-cta { display: flex; flex-direction: column; gap: 14px; }

/* -- Controles de accesibilidad (A+ / A-) -- */
.somno-reserva__a11y {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
}
.somno-reserva__a11y-label { font-size: 13px; color: var(--somno-text-muted); margin-right: 4px; }
.somno-reserva__a11y button.increaseFont,
.somno-reserva__a11y button.decreaseFont,
.somno-reserva__a11y button {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--somno-border) !important;
	background: var(--somno-surface) !important;
	color: var(--somno-primary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.somno-reserva__a11y button:hover {
	background: var(--somno-hover-bg, oklch(0.97 0.01 250));
	border-color: var(--somno-primary);
}

/* -- CTA (botones dentro del hero, horizontales) -- */
.somno-reserva__cta-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-radius: var(--somno-radius);
	text-decoration: none;
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	border: 1px solid transparent;
}
.somno-reserva__cta-btn svg { width: 28px; height: 28px; flex-shrink: 0; }
.somno-reserva__cta-main { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.somno-reserva__cta-sub { display: block; font-size: 12.5px; font-weight: 500; opacity: 0.85; margin-top: 2px; }
.somno-reserva__cta-btn:hover { transform: translateY(-2px); box-shadow: var(--somno-shadow); text-decoration: none; }
.somno-reserva__cta-btn--primary {
	background: var(--somno-accent);
	color: var(--somno-text-invert);
}
.somno-reserva__cta-btn--primary:hover { background: var(--somno-accent-600); color: var(--somno-text-invert); }
.somno-reserva__cta-btn--ghost {
	background: var(--somno-surface);
	color: var(--somno-primary);
	border-color: var(--somno-border);
}
.somno-reserva__cta-btn--ghost:hover { border-color: var(--somno-primary); color: var(--somno-primary); }

/* -- Aviso (mas angosto, con icono, alineado) -- */
.somno-reserva__aviso {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--somno-surface);
	border: 1px solid var(--somno-border);
	border-left: 3px solid var(--somno-accent);
	border-radius: var(--somno-radius);
	padding: 16px 20px;
	max-width: 760px;
	margin: 0 auto 48px;
}
.somno-reserva__aviso svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--somno-accent); margin-top: 1px; }
.somno-reserva__aviso p { margin: 0; font-size: 14px; color: var(--somno-text-muted); line-height: 1.55; }
.somno-reserva__aviso a { color: var(--somno-primary); font-weight: 600; text-decoration: none; }
.somno-reserva__aviso a:hover { text-decoration: underline; }

/* -- Secciones genericas -- */
.somno-reserva__section { margin-bottom: 48px; }
.somno-reserva .somno-reserva__section-title {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: rgb(71, 82, 93) !important;
	text-align: center !important;
	margin: 0 0 28px !important;
	font-family: var(--somno-font) !important;
}

/* -- Guia de especialista (2 tarjetas) -- */
.somno-reserva__guia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
}
.somno-guia-card {
	background: var(--somno-surface);
	border: 1px solid var(--somno-border);
	border-radius: var(--somno-radius-lg);
	padding: 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.somno-guia-card__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--somno-hero-grad-1, oklch(0.96 0.018 250));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--somno-primary);
}
.somno-guia-card__icon svg { width: 24px; height: 24px; }
.somno-guia-card__body strong { display: block; color: var(--somno-navy); font-size: 15px; margin-bottom: 4px; }
.somno-guia-card__body p { margin: 0; font-size: 14.5px; color: var(--somno-text-muted); line-height: 1.5; }

/* -- Paso a paso -- */
.somno-reserva__pasos { max-width: 760px; margin: 0 auto; }
.somno-paso {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--somno-border);
	align-items: flex-start;
}
.somno-paso:last-child { border-bottom: none; }
.somno-paso__num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--somno-accent);
	color: var(--somno-text-invert);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}
.somno-paso__body strong { display: block; color: var(--somno-navy); font-size: 16px; margin-bottom: 4px; }
.somno-paso__body p { margin: 0; font-size: 14.5px; color: var(--somno-text-muted); line-height: 1.55; }

/* -- FAQs (acordeon nativo) -- */
.somno-reserva__faqs { max-width: 760px; margin: 0 auto; }
.somno-faq {
	border: 1px solid var(--somno-border);
	border-radius: var(--somno-radius);
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--somno-surface);
}
.somno-faq__q {
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 18px 20px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--somno-navy);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-family: var(--somno-font);
}
.somno-faq__q:hover { color: var(--somno-primary); }
.somno-faq__icon {
	flex-shrink: 0;
	width: 20px; height: 20px;
	position: relative;
	transition: transform 0.2s ease;
}
.somno-faq__icon::before, .somno-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--somno-primary);
	border-radius: 2px;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.somno-faq__icon::before { width: 14px; height: 2px; }
.somno-faq__icon::after { width: 2px; height: 14px; transition: transform 0.2s ease; }
.somno-faq.is-open .somno-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.somno-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.somno-faq__a-inner {
	padding: 0 20px 18px;
	font-size: 14.5px;
	color: var(--somno-text-muted);
	line-height: 1.6;
}
.somno-faq__a-inner a { color: var(--somno-primary); text-decoration: none; }
.somno-faq__a-inner a:hover { text-decoration: underline; }

/* -- Form de contacto -- */
.somno-reserva__form-wrap {
	max-width: 720px;
	margin: 0 auto;
	background: var(--somno-surface);
	border: 1px solid var(--somno-border);
	border-radius: var(--somno-radius-lg);
	padding: 32px;
}
.somno-reserva__form-wrap .somno-reserva__section-title { margin-bottom: 8px; }
.somno-reserva__form-intro { text-align: center; color: var(--somno-text-muted); font-size: 14.5px; margin: 0 0 24px; }

/* El the_content() de Elementor se inyecta aqui; le damos un contenedor neutro */
.somno-reserva__content { margin: 0 auto; }

/* -- Responsive -- */
@media (max-width: 767.98px) {
	.somno-reserva__hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
	.somno-reserva__guia { grid-template-columns: 1fr; }
	.somno-reserva__title { font-size: 30px; }
	.somno-reserva__section-title { font-size: 22px; }
	.somno-reserva__form-wrap { padding: 22px; }
}

/* -- Bottombar sticky SOLO en reserva-nueva: 2 botones anchos (Llamar + WhatsApp).
   El .somno-bottombar base (footer.css) esta oculto y se muestra en <=991px.
   Aqui la variante --reserva usa 2 botones con texto en vez de circulos. -- */
.somno-bottombar--reserva .somno-bottombar__btn {
	flex: 1 1 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 13px 14px !important;
	border-radius: var(--somno-radius-sm) !important;
}
.somno-bottombar--reserva .somno-bottombar__btn--phone {
	background: var(--somno-surface) !important;
	color: var(--somno-primary) !important;
	border: 1px solid var(--somno-border) !important;
}
.somno-bottombar--reserva .somno-bottombar__btn--wa {
	background: var(--somno-whatsapp) !important;
	color: var(--somno-text-invert) !important;
	border: none !important;
}