/* Página pedir-cita: iframe a store.muchachostudio.com/appointment/1 (Odoo,
   calendario de citas sincronizado con Google Calendar). Odoo no ofrece un
   modo "solo cuerpo" ni un parámetro de URL para ocultar su menú/pie/banner
   de cookies, así que se recorta VISUALMENTE con overflow:hidden en un
   contenedor de altura fija + el iframe desplazado con margin-top negativo,
   en vez de tocar su HTML (ver notas-clonado.md — "Página pedir-cita"). No
   se toca el documento de Odoo en ningún momento, así que el calendario y
   la sincronización con Google Calendar funcionan siempre con normalidad.
   El pie/banner de cookies de la tienda quedan fuera del recuadro visible
   porque el iframe es bastante más alto que el propio recuadro (altura de
   contenido real medida en vivo + margen de seguridad) y ambos son
   position:fixed/último elemento respecto a ESA altura total, no a la
   ventana del visitante.

   El scroll propio del iframe está desactivado de raíz (`scrolling="no"`
   en el HTML + `overflow:hidden` aquí) — cualquier contenido que sobre se
   recorta en silencio en vez de mostrar su propia barra. Por eso las
   alturas de abajo no necesitan ser exactas al píxel, solo generosas.

   Alturas medidas en vivo CON las fotos de la galería del showroom ya
   puestas otra vez en la sección "Descripción" de Odoo (el usuario las
   había quitado y las volvió a subir): paso "Fecha y hora" (el que tiene
   la galería) ~1502px a 1140px de ancho, ~1432px a 1366px, ~3520px en
   móvil (390px). El paso "Detalles" (formulario de contacto, sin fotos)
   se queda más corto en todos los anchos.

   IMPORTANTE — orden de las reglas: las media queries de abajo van
   DELIBERADAMENTE después de las reglas base del mismo selector. Una
   regla dentro de una media query NO tiene más especificidad que una
   igual fuera de ella — si la base viniera después en el fichero,
   ganaría ella aunque la media query coincida. */

.appointment-hero {
	/* poco margen superior a propósito: el título queda pegado justo
	   debajo del logo de la cabecera, no centrado en un hueco grande */
	padding: 24px 0 80px;
}

/* título, párrafo y recuadro comparten la MISMA columna centrada (mismo
   max-width y mismo padding) en vez de alinearse cada uno por su cuenta —
   así quedan siempre alineados entre sí sin tener que igualar márgenes a
   mano en cada sitio */
.appointment-hero .container {
	max-width: 1414px;
	margin: 0 auto;
	padding: 0 24px;
}

.appointment-hero h1 {
	color: var(--color-cream, #f2eee3);
	margin: 0 0 16px;
}

.appointment-hero > .container > p {
	color: var(--color-cream, #f2eee3);
	opacity: 0.85;
	/* sin max-width: el texto (ya recortado a una frase) cabe en una sola
	   línea en vez de partirse en 2-3 */
	white-space: nowrap;
	margin: 0 0 32px;
}

.appointment-embed {
	position: relative;
	width: 100%;
	max-width: 1366px;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	/* alto visible tras el recorte (medido en vivo a 1140px de ancho, con
	   fotos: el paso "Fecha y hora" llega a ~1502px de contenido real; se
	   deja margen). Se usa en el rango "tablet" 701-1449px — en pantallas
	   más anchas manda la media query de más abajo. */
	height: 1530px;
}

.appointment-embed iframe {
	display: block;
	width: 100%;
	/* algo más alta que el recuadro visible a propósito: en ese sobrante
	   caen el pie de la tienda y su banner de cookies. */
	height: 1780px;
	border: 0;
	overflow: hidden;
	/* recorta el menú superior de la tienda (100px medidos en vivo en
	   store.muchachostudio.com/appointment/1, igual en escritorio y móvil) */
	margin-top: -100px;
}

/* A partir de 1450px de ventana hay sitio de sobra para que el recuadro
   quepa a un ancho FIJO de 1366px (no fluido) — a ese ancho exacto Odoo
   pone el calendario y las horas en la misma fila (layout más corto que
   en la franja "tablet"). Medido en vivo a 1366px, con fotos: ~1432px de
   contenido real. */
@media (min-width: 1450px) {
	.appointment-embed {
		width: 1366px;
		height: 1460px;
	}
	.appointment-embed iframe {
		height: 1710px;
	}
}

@media (max-width: 700px) {
	.appointment-hero h1 {
		font-size: 32px;
	}
	.appointment-hero > .container > p {
		/* en desktop cabe en una línea a propósito (ver arriba); en móvil
		   el mismo nowrap desbordaba el ancho de la ventana y generaba
		   scroll horizontal — se deja que envuelva con normalidad */
		white-space: normal;
	}
	.appointment-embed {
		border-radius: 0;
		/* En esta versión de la reserva, Odoo trae una fecha/hora
		   preseleccionada por defecto, así que el resumen "Su cita" (título,
		   dirección, duración — que también aparece en el correo de
		   confirmación) ya aparece sin que el usuario toque nada. Medido en
		   vivo a 375px de ancho ajustando el recuadro por prueba y error:
		   a 2820px termina justo tras la última foto de la galería y ANTES
		   de que "Su cita" empiece a asomar — a petición del usuario, más
		   limpio que mostrarlo a medias o agrandar el recuadro para
		   mostrarlo entero (la dirección ya está en el pie de página). */
		height: 2820px;
	}
	.appointment-embed iframe {
		height: 3100px;
	}
}