/* =========================================================
   aTEMPS — hoja de estilos principal
   Paleta: azul suave #87A4CE · granate #710036 · crema #EAE8E4 · negro #1D1D1B
   Tipos: Poppins (títulos) · Inter (cuerpo) · Fraunces itálica (acento/eslóganes)
   ========================================================= */

:root {
	--azul: #87A4CE;
	--azul-suave: #E7ECF4;
	--granate: #710036;
	--granate-suave: #F2E3EA;
	--crema: #EAE8E4;
	--negro: #1D1D1B;
	--blanco: #FFFFFF;

	--font-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-titulos: "Poppins", var(--font-cuerpo);
	--font-acento: "Fraunces", Georgia, serif;

	--radio: 18px;
	--radio-pill: 999px;
	--sombra: 0 12px 30px -14px rgba(29, 29, 27, 0.25);
	--ancho-contenido: 1180px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-cuerpo);
	color: var(--negro);
	background: var(--blanco);
	line-height: 1.6;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-titulos);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.6em;
	color: var(--negro);
}
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
.container {
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	padding-inline: 24px;
}
section { padding-block: clamp(56px, 8vw, 96px); }

.acento {
	font-family: var(--font-acento);
	font-style: italic;
	font-weight: 500;
}
.eyebrow {
	font-family: var(--font-titulos);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--granate);
	display: inline-block;
	margin-bottom: 0.9em;
}
.centrado { text-align: center; }
.medida-texto { max-width: 640px; }
.medida-texto.centrado { margin-inline: auto; }

/* ---------- Botones (pill, como el manual de marca) ---------- */
.boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 14px 30px;
	border-radius: var(--radio-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton--granate { background: var(--granate); color: var(--blanco); }
.boton--granate:hover { box-shadow: var(--sombra); }
.boton--azul { background: var(--azul); color: var(--blanco); }
.boton--azul:hover { box-shadow: var(--sombra); }
.boton--contorno { background: transparent; border-color: currentColor; color: var(--negro); }
.boton--blanco { background: var(--blanco); color: var(--granate); }
.boton--whatsapp { background: #25D366; color: var(--blanco); }
.boton .flecha { transition: transform 0.15s ease; }
.boton:hover .flecha { transform: translate(2px, -2px); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--blanco);
	border-bottom: 1px solid rgba(29, 29, 27, 0.08);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 14px;
}
.site-header .logo img { height: 42px; width: auto; }
.nav-principal { display: flex; align-items: center; gap: 4px; }
.nav-principal ul { display: flex; gap: 4px; }
.nav-principal a {
	font-family: var(--font-titulos);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: var(--radio-pill);
	transition: background 0.15s ease, color 0.15s ease;
}
.nav-principal a:hover,
.nav-principal .current-menu-item > a {
	background: var(--azul-suave);
	color: var(--granate);
}
.header-cta { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--negro);
	margin: 5px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
	.nav-principal { position: fixed; inset: 72px 0 0 0; background: var(--blanco); flex-direction: column; align-items: stretch; padding: 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
	.nav-principal.abierto { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.nav-principal ul { flex-direction: column; gap: 4px; }
	.nav-principal a { display: block; padding: 14px 18px; }
	.menu-toggle { display: block; }
	.header-cta .boton span.texto-larga { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 48px;
	padding-block: clamp(48px, 7vw, 88px);
}
.hero__texto h1 { margin-bottom: 0.4em; }
.hero__texto .lead { font-size: 1.15rem; color: #4b4b49; max-width: 520px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6em; }
.hero__foto { position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4/5; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__sello { position: absolute; width: 108px; height: 108px; right: -20px; bottom: -20px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; }
	.hero__foto { order: -1; aspect-ratio: 16/10; max-width: 420px; margin-inline: auto; }
}

/* ---------- Secciones con fondo ---------- */
.seccion--crema { background: var(--crema); }
.seccion--negro { background: var(--negro); color: var(--crema); }
.seccion--negro h2, .seccion--negro h3 { color: var(--blanco); }
.seccion--azul { background: var(--azul); color: var(--blanco); }
.seccion--azul h2, .seccion--azul h3 { color: var(--blanco); }
.seccion--granate { background: var(--granate); color: var(--crema); }
.seccion--granate h2, .seccion--granate h3 { color: var(--blanco); }

/* ---------- Grid de tarjetas genérico ---------- */
.grid-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
	margin-top: 2.4em;
}
.tarjeta {
	background: var(--blanco);
	border-radius: var(--radio);
	padding: 32px 28px;
	box-shadow: var(--sombra);
}
.tarjeta h3 { margin-bottom: 0.5em; }
.tarjeta ul { margin-top: 0.8em; }
.tarjeta li { position: relative; padding-left: 22px; margin-bottom: 0.5em; }
.tarjeta li::before { content: "→"; position: absolute; left: 0; color: var(--granate); }

/* ---------- Ideas clave (lista con check) ---------- */
.lista-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 32px; margin-top: 2em; }
.lista-ideas li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; }
.lista-ideas li::before {
	content: "";
	flex: none;
	width: 22px; height: 22px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

/* ---------- Pasos de la sesión (Método) ---------- */
.pasos { counter-reset: paso; margin-top: 2.4em; display: grid; gap: 22px; }
.paso { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.paso__numero {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--granate-suave);
	color: var(--granate);
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.2rem;
	display: flex; align-items: center; justify-content: center;
}
.paso h3 { margin-bottom: 0.25em; }

/* ---------- Tarifas ---------- */
.tarifas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 2.4em; }
.tarifa-tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 30px 26px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.tarifa-tarjeta h3 { color: var(--azul); }
.tarifa-tarjeta .precio { font-family: var(--font-titulos); font-weight: 700; font-size: 2.2rem; color: var(--granate); margin: 0.2em 0; }
.tarifa-tarjeta .precio .antes { font-size: 1.1rem; font-weight: 500; text-decoration: line-through; color: #9a9a97; margin-right: 8px; }
.tarifa-tarjeta .precio .periodo { font-size: 0.95rem; font-weight: 500; color: var(--negro); }
.tarifa-badge { display: inline-block; background: var(--granate); color: var(--blanco); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--radio-pill); margin-bottom: 1em; align-self: flex-start; }
.tarifas-nota { margin-top: 2.4em; padding: 20px 24px; background: var(--azul-suave); border-radius: var(--radio); font-size: 0.95rem; }

/* ---------- Tabla horario ---------- */
.tabla-horario { width: 100%; border-collapse: collapse; margin-top: 2em; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.tabla-horario th, .tabla-horario td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--crema); font-size: 0.92rem; }
.tabla-horario th { background: var(--negro); color: var(--blanco); font-family: var(--font-titulos); font-weight: 600; }
.tabla-horario tr:last-child td { border-bottom: none; }
.tabla-horario td.libre { color: #c7c5c0; }
.tabla-wrapper { overflow-x: auto; }

/* ---------- Formularios ---------- */
.formulario { max-width: 720px; margin-top: 2.2em; }
.formulario fieldset { border: none; padding: 0; margin: 0 0 2em; }
.formulario legend { font-family: var(--font-titulos); font-weight: 600; font-size: 1.1rem; margin-bottom: 1em; padding: 0; }
.campo { margin-bottom: 1.3em; }
.campo label { display: block; font-weight: 500; margin-bottom: 0.4em; font-size: 0.95rem; }
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="date"],
.campo select,
.campo textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid #d8d6d1;
	border-radius: 12px;
	font-family: var(--font-cuerpo);
	font-size: 1rem;
	background: var(--blanco);
}
.campo textarea { min-height: 110px; resize: vertical; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones label {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1.5px solid #d8d6d1; border-radius: var(--radio-pill);
	padding: 9px 16px; font-weight: 400; font-size: 0.92rem; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.opciones input { accent-color: var(--granate); }
.opciones label:has(input:checked) { border-color: var(--granate); background: var(--granate-suave); }
.aviso-formulario { margin-top: 1.2em; padding: 14px 18px; border-radius: 12px; font-size: 0.95rem; }
.aviso-formulario.ok { background: #e4f4ea; color: #1c6b3f; }
.aviso-formulario.error { background: #fbe7e7; color: #a3242c; }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 2em; align-items: start; }
.contacto-datos li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.4em; font-size: 1.02rem; }
.contacto-datos .icono { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--azul-suave); color: var(--granate); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mapa-wrapper { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4/3; }
.mapa-wrapper iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final reutilizable ---------- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 640px; margin-inline: auto; }
.cta-final .hero__cta { justify-content: center; margin-top: 1.4em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--negro); color: var(--crema); padding-block: 64px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid .logo img { height: 40px; margin-bottom: 16px; }
.footer-grid p { color: #b9b8b4; }
.site-footer h4 { color: var(--blanco); font-size: 1rem; margin-bottom: 1em; }
.site-footer ul li { margin-bottom: 0.7em; color: #cfcecb; }
.site-footer a:hover { color: var(--azul); }
.footer-social { display: flex; gap: 12px; margin-top: 1em; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; font-size: 0.85rem; color: #9a9a96; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
	position: fixed; right: 22px; bottom: 22px; z-index: 200;
	width: 60px; height: 60px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
	font-size: 1.6rem;
}

/* ---------- Utilidades ---------- */
.solo-movil { display: none; }
@media (max-width: 900px) { .solo-movil { display: block; } .solo-escritorio { display: none; } }

/* ---------- Utilidades para bloques de Gutenberg (className) ------- */
/* Estas clases se aplican vía "className" en bloques Group/Paragraph
   del editor — evitan usar atributos "style" JSON de Gutenberg que no
   siempre coinciden con el HTML guardado (causa del aviso "bloque con
   contenido inesperado"). Todo el estilo vive aquí, no en el bloque. */
.bloque-seccion { padding-block: 64px; }
.bloque-seccion--chica { padding-block: 40px; }
.bloque-seccion--cta { padding-block: 56px; }
.paso-numero {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--granate-suave);
	color: var(--granate);
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.2rem;
	display: flex; align-items: center; justify-content: center;
	margin: 0 0 12px;
}
.precio-tarifa {
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 2.2rem;
	color: var(--granate);
	margin: 0.2em 0;
}
.detalle-tarifa { color: #6b6b68; font-size: 0.95rem; margin-bottom: 0.2em; }
.equipo-foto { border-radius: 50%; overflow: hidden; width: 140px; margin-inline: auto; }
.equipo-foto img { aspect-ratio: 1/1; object-fit: cover; }
.aviso-pendiente { color: #a3242c; }
.nota-suave {
	background: var(--azul-suave);
	padding: 20px 24px;
	border-radius: var(--radio);
	margin-top: 24px;
}
.container-texto { max-width: 760px; margin-inline: auto; padding-inline: 24px; }
.tarjeta--centrada { text-align: center; }
.filas-tarifas-espacio { margin-top: 28px; }
.precio-tarifa { white-space: nowrap; }

/* ---------- Horario: cuadrícula semanal tipo Google Calendar ------- */
.calendario-titulo-turno {
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--granate);
	margin: 2.8em 0 1em;
}
.calendario-titulo-turno:first-child { margin-top: 0; }
.calendario-wrapper { overflow-x: auto; margin-top: 12px; }
.calendario-semana { min-width: 640px; }
.calendario-dias {
	display: grid;
	grid-template-columns: 64px repeat(5, 1fr);
	margin-bottom: 14px;
}
.calendario-dias span {
	text-align: center;
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--negro);
}
.calendario-cuerpo {
	position: relative;
	display: grid;
	grid-template-columns: 64px repeat(5, 1fr);
	grid-template-rows: repeat(54, 17px);
	background: var(--blanco);
	background-image: repeating-linear-gradient(to bottom, #ececea 0, #ececea 1px, transparent 1px, transparent 68px);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 20px 16px;
}
.calendario-hora {
	grid-column: 1;
	font-size: 0.72rem;
	color: #9a9a97;
	text-align: right;
	padding-right: 12px;
	transform: translateY(-7px);
}
.calendario-linea {
	grid-row: 1 / -1;
	border-left: 1px solid #ececea;
}
.calendario-evento {
	background: var(--azul);
	color: var(--blanco);
	border-radius: 8px;
	margin: 1px 4px;
	padding: 4px 6px;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
}

/* ---------- Hero a pantalla completa con foto de fondo y degradado -- */
/* El hero rompe el .container centrado a propósito: el bloque de
texto debe anclarse cerca del borde real de la ventana, no quedarse
centrado dentro de los 1180px con márgenes grandes a los lados en
pantallas anchas. */
.hero-full .container { max-width: none; margin-inline: 0; padding-left: 6vw; padding-right: 24px; }
.hero-full {
	position: relative;
	min-height: 580px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.hero-full__fondo { position: absolute; inset: 0; z-index: 0; }
.hero-full__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 38%;
}
.hero-full__degradado {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		var(--blanco) 0%,
		var(--blanco) 24%,
		rgba(255, 255, 255, 0.9) 38%,
		rgba(255, 255, 255, 0.45) 55%,
		rgba(255, 255, 255, 0) 72%);
}
.hero-full__contenido {
	position: relative;
	z-index: 2;
	max-width: 520px;
	padding: 56px 40px 56px 4px;
}
.hero-full__contenido .hero__cta { margin-top: 1.5em; }
@media (max-width: 900px) {
	.hero-full { min-height: 620px; align-items: flex-start; }
	.hero-full__fondo img { object-position: 68% 30%; }
	.hero-full__degradado {
		background: linear-gradient(180deg,
			var(--blanco) 0%,
			var(--blanco) 40%,
			rgba(255, 255, 255, 0.92) 58%,
			rgba(255, 255, 255, 0.5) 76%,
			rgba(255, 255, 255, 0) 100%);
	}
	.hero-full__contenido { max-width: 100%; padding: 36px 24px; }
}