/*
 * El bloque de reserva, en la ficha.
 *
 * Trae lo imprescindible para que funcione y se lea bien en cualquier tema:
 * la rejilla, el panel plegado y el señuelo fuera de la vista. El color, la
 * tipografía y la forma de los botones los pone el tema de cada web.
 */

/* La tarjeta de reserva: dos puertas y un solo destino.
   Todo lo de aquí es mensaje —gancho, botones, pie—, así que va centrado en
   cualquier ancho. El color y la forma del botón principal los pone el tema;
   esto pone la estructura. */

.psr__tarjeta {
	display: grid;
	gap: 12px;
	justify-items: center;
	text-align: center;
	padding: 22px 20px;
	border: 1px solid rgba( 0, 0, 0, .12 );
	border-radius: 16px;
}

/* Dentro de una columna que ya tiene su propio marco, la tarjeta es solo las
   dos puertas. */
.psr__tarjeta--desnuda {
	padding: 0;
	border: 0;
	gap: 10px;
	/* Dentro del marco de la página, el texto se lee alineado como el resto
	   del cuerpo; los botones siguen centrando su etiqueta por su cuenta. */
	justify-items: stretch;
	text-align: left;
}

.psr__gancho {
	margin: 0 0 2px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Dentro del marco de la página, el gancho es el título de la ficha de
   reserva: se lee alineado con todo lo demás y respira por debajo. */
.psr__tarjeta--desnuda .psr__gancho {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.psr__abrir,
.psr__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	padding: 14px 22px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
}

/* La primera puerta lleva el color de la marca, el mismo que declara la
   receta para el panel. Un tema puede vestirla a su gusto con una regla más
   específica; mientras no lo haga, el botón principal se ve como principal. */
.psr__abrir {
	border: 0;
	background: var( --psr-acento, #1d2327 );
	color: #fff;
}

/* La segunda puerta se lee como botón sin competir con la primera. */
.psr__wa {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
}

.psr__icono {
	flex: 0 0 auto;
}

/* El verde de WhatsApp es la única nota de color que no pone el tema: es la
   marca que el ojo reconoce antes de leer el botón. */
.psr__wa .psr__icono {
	color: #25D366;
}

.psr__tarjeta-antes,
.psr__tarjeta-pie {
	margin: 2px 0 0;
	max-width: 46ch;
	font-size: .875rem;
	line-height: 1.55;
	opacity: .75;
}

.psr__tarjeta-antes {
	margin: 0 0 4px;
}

/* La invitación a hablar, cuando la cotización no es firme. Se lee como una
   nota del equipo, no como una advertencia. */
.psr__tarjeta-opciones {
	margin: 0;
	max-width: 46ch;
	font-size: .875rem;
	line-height: 1.55;
	opacity: .8;
}

.psr__tarjeta--desnuda .psr__tarjeta-opciones {
	max-width: none;
}

/* Dentro de una columna que ya tiene su marco, esta línea se lee como el
   párrafo de la página, alineada con lo que viene antes. */
.psr__tarjeta--desnuda .psr__tarjeta-antes,
.psr__tarjeta--desnuda .psr__tarjeta-pie {
	max-width: none;
	opacity: .85;
}

.psr__panel {
	margin-top: 18px;
}

.psr__panel[hidden] { display: none; }

.psr__titulo {
	margin: 0 0 4px;
	font-size: 1.125rem;
	font-weight: 700;
}

.psr__entradilla {
	margin: 0 0 18px;
	max-width: 56ch;
	opacity: .85;
}

.psr__form {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px 20px;
	/* Arriba, no abajo. Alineando por el pie, una casilla que lleva una línea
	   de ayuda debajo empuja su propia casilla hacia arriba y desencaja la
	   fila entera: en el escritorio se veía el rótulo de WhatsApp más alto
	   que el de al lado. Alineando por la cabeza, los rótulos empiezan a la
	   misma altura y la ayuda cuelga por debajo sin mover nada. */
	align-items: start;
}

.psr__campo { margin: 0; }
.psr__campo--ancho { grid-column: 1 / -1; }

/* La fecha ocupa la fila entera: así los dos contadores de gente quedan uno
   al lado del otro, que es como se leen. */
.psr__campo--fecha { grid-column: 1 / -1; }

.psr__campo label {
	display: block;
	margin-bottom: 6px;
	font-size: .9375rem;
	font-weight: 600;
}

.psr__campo label span {
	font-weight: 400;
	opacity: .6;
}

.psr__campo input,
.psr__campo textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	border: 1px solid rgba( 0, 0, 0, .18 );
	border-radius: 10px;
	background: #fff;
}

.psr__campo textarea { resize: vertical; }

/* La pista que acompaña a una casilla: la capacidad de la máquina, dicha
   donde se necesita saberla. */
.psr__pista {
	display: block;
	margin-top: 6px;
	/* Al mismo tamaño que las demás líneas de apoyo del bloque: aquí vive la
	   frase que explica para qué se pide el teléfono, y es la que decide si
	   alguien lo escribe. */
	font-size: .875rem;
	opacity: .7;
}

.psr__pista[hidden] { display: none; }

.psr__nota-dia {
	display: block;
	margin-top: 6px;
	font-size: .875rem;
}

.psr__aviso {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba( 0, 0, 0, .05 );
	font-size: .9375rem;
}

.psr__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 4px 0 0;
}

.psr__pie span {
	font-size: .875rem;
	opacity: .75;
}

/* El botón que cierra la solicitud. Como la primera puerta, lleva el color de
   la marca y una zona de toque cómoda: es el gesto que de verdad importa de
   toda esta pantalla. */
.psr__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var( --psr-acento, #1d2327 );
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.psr__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.psr__gracias { max-width: 56ch; }

.psr__codigo {
	display: inline-block;
	margin: 2px 0 14px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .06 );
	font-weight: 700;
	letter-spacing: .04em;
}

/* La vía rápida de la pantalla de gracias es un botón, no un enlace suelto:
   es la única acción que queda en esa pantalla. */
.psr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 13px 24px;
	border-radius: 999px;
	background: var( --psr-acento, #1d2327 );
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.psr__resumen {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.psr__resumen li {
	padding: 8px 0;
	border-bottom: 1px solid rgba( 0, 0, 0, .1 );
}

.psr__resumen li:last-child { border-bottom: 0; }


/* Los extras: una línea por cada uno, el nombre a la izquierda y la casilla a
   la derecha, que es como se lee una lista de añadidos. */

.psr__extras {
	margin: 0;
	padding: 0;
	border: 0;
}

.psr__extras legend {
	margin-bottom: 8px;
	padding: 0;
	font-size: .9375rem;
	font-weight: 600;
}

.psr__extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba( 0, 0, 0, .1 );
}

.psr__extra:last-child { border-bottom: 0; }

.psr__extra label {
	margin: 0;
	font-weight: 600;
	font-size: .9375rem;
}

.psr__extra label span {
	display: block;
	font-weight: 400;
	/* Es un precio, y un precio se lee: no baja de 14 px. */
	font-size: .875rem;
	opacity: .75;
}

.psr__extra input[type="number"] {
	width: 5.5rem;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 10px 12px;
	font: inherit;
	text-align: center;
	border: 1px solid rgba( 0, 0, 0, .18 );
	border-radius: 10px;
	background: #fff;
}

.psr__extra-toque {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	/* Lo que se ve son 22 px; lo que se toca, 48. */
	width: 48px;
	height: 48px;
	margin: -12px 0;
	cursor: pointer;
}

.psr__extra input[type="checkbox"] {
	width: 1.375rem;
	height: 1.375rem;
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

/* El total. Es la cifra que el visitante va a recordar, así que se lee grande
   y sola; y cuando hay una condición que hablar, lo dice debajo con sus
   palabras en lugar de enseñar un número que no se sostiene. */

.psr__total {
	margin: 2px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba( 0, 0, 0, .05 );
}

.psr__total-cifra {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 1.0625rem;
}

.psr__total-cifra strong {
	font-size: 1.375rem;
	letter-spacing: -.01em;
}

.psr__total-nota {
	margin: 6px 0 0;
	font-size: .875rem;
	line-height: 1.5;
	opacity: .85;
}

.psr__total-cifra + .psr__total-nota {
	padding-top: 8px;
	border-top: 1px solid rgba( 0, 0, 0, .1 );
}

/* La norma del estudio: en móvil se centra lo que es mensaje y se deja a la
   izquierda lo que es dato. Aquí, el titular y el pie se centran; las
   casillas y el resumen se leen alineados. */
@media ( max-width: 780px ) {

	.psr__form { grid-template-columns: 1fr; }

	.psr__titulo,
	.psr__entradilla { text-align: center; }

	.psr__entradilla { margin-inline: auto; }

	.psr__pie {
		flex-direction: column;
		text-align: center;
	}

	.psr__gracias { text-align: center; }
	.psr__resumen li { text-align: left; }

	/* El total es dato: se queda alineado y con la cifra a la derecha, como en
	   cualquier cuenta. La nota de debajo es mensaje y se centra. */
	.psr__total-cifra { text-align: left; }
	.psr__total-nota { text-align: center; }
}

/* =========================================================================
 * LA BARRA FIJA DEL TELÉFONO
 *
 * El precio a la izquierda porque es dato y el ojo lo busca ahí; las dos
 * puertas a la derecha, en el orden en que se usan. Vive sólo en pantalla
 * estrecha: en el escritorio la tarjeta se queda a la vista por sí sola.
 * ====================================================================== */

.psr__barra {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	/* Los botones a la derecha, haya precio o no: la excursión que no enseña
	   cifra no deja la barra coja. */
	justify-content: flex-end;
	gap: 10px;
	padding: 10px 16px;
	padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	background: #fff;
	border-top: 1px solid rgba( 0, 0, 0, .12 );
	box-shadow: 0 -6px 22px rgba( 0, 0, 0, .09 );
}

.psr__barra[hidden] { display: none; }

/* Sin cifra a la izquierda, el botón ocupa el sitio que queda. Dos botones
   pequeños arrinconados a la derecha dejan la barra con aire de sobra y el
   dedo con menos blanco al que apuntar. */
.psr__barra:not( :has( .psr__barra-precio ) ) .psr__barra-boton {
	flex: 1 1 auto;
}

/* En el escritorio no aparece nunca, ni aunque el guion se despiste. */
@media ( min-width: 781px ) {
	.psr__barra { display: none !important; }
}

.psr__barra-precio {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.25;
	opacity: .85;
}

.psr__barra-precio strong {
	display: block;
	font-size: 1.0625rem;
	opacity: 1;
}

.psr__barra-wa,
.psr__barra-boton {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	/* Zona de toque cómoda: nadie acierta un botón de 32 px en un autobús. */
	min-height: 48px;
}

.psr__barra-wa {
	width: 48px;
	border: 1px solid rgba( 0, 0, 0, .2 );
	background: transparent;
	color: inherit;
}

.psr__barra-wa .psr__icono {
	width: 22px;
	height: 22px;
	color: #25D366;
}

.psr__barra-boton {
	padding: 0 20px;
	border: 0;
	background: var( --psr-acento, #1d2327 );
	color: #fff;
	font-size: .9375rem;
}

/* Mientras la barra está puesta, la página se hace un poco más alta para que
   el pie no quede debajo de ella. */
html.psr-con-barra body {
	padding-bottom: 78px;
}

/* La tarjeta pegada al scroll, para los temas que la ponen en una columna. */
@media ( min-width: 992px ) {

	.psr--lateral {
		position: sticky;
		top: var( --psr-lateral-top, 24px );
	}
}