/*
 * Páginas secundarias de Agendate (preguntas frecuentes, los documentos legales y el contacto). Van en el documento de las landings y se visten
 * con sus tokens (--ld-*, en landing.css) y sus piezas; acá vive sólo lo que las landings no tienen. Ninguna regla
 * escribe un color, un radio ni un tamaño de letra a mano (ver MARCA.md).
 *
 * 360:  una columna con 16 de margen; los temas del índice de a dos; cada tema, su encabezado y debajo su tarjeta.
 * 768:  portada centrada; el índice de a tres; cada tema en una columna centrada de hasta 880.
 * 1280: el índice en un renglón; cada tema en dos columnas (título a la izquierda, tarjeta a la derecha) dentro de 1240.
 */

/* ---------- La portada: el título, el buscador y el índice de temas ---------- */

.sc-portada {
	display: grid;
	justify-items: start;
	padding-block: 20px 40px;
}

.sc-portada .ld-titular {
	margin-top: 0;
}

.sc-portada .ld-bajada {
	margin-top: 14px;
}

.sc-buscador {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 560px;
	margin-top: 28px;
}

.sc-buscador svg {
	position: absolute;
	left: 20px;
	color: var(--ld-tenue);
	pointer-events: none;
}

/* (La letra del campo mide 16 o más: con menos, el teléfono agranda la página al tocarlo.) */
.sc-buscador input {
	width: 100%;
	min-height: var(--ld-boton);
	margin: 0;
	padding: 0 20px 0 54px;
	border: 1.5px solid var(--ld-linea);
	border-radius: var(--ld-r-pildora);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	box-shadow: var(--ld-sombra);
	font-family: inherit;
	font-size: var(--ld-letra-base);
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 140ms ease;
}

.sc-buscador input::placeholder {
	color: var(--ld-tenue);
	opacity: 1;
}

.sc-buscador input:hover {
	border-color: var(--ld-nube);
}

.sc-buscador input:focus {
	border-color: var(--ld-azul);
}

.sc-temas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}

.sc-temas a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding-inline: 14px;
	border: 1px solid var(--ld-linea);
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	font-size: var(--ld-letra-pieza);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 140ms ease, transform 140ms var(--ld-sale);
}

.sc-temas a svg {
	color: var(--ld-azul-tinta);
}

.sc-temas a:hover {
	border-color: var(--ld-nube);
}

.sc-temas a:active {
	transform: scale(.98);
}

/* ---------- Los temas: su encabezado y su tarjeta de preguntas ---------- */

/* El aire de abajo lo pone el contenedor. */
.sc-cuerpo {
	display: grid;
	gap: 44px;
	padding-bottom: var(--ld-seccion);
}

.sc-tema {
	display: grid;
	gap: 16px;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	scroll-margin-top: 20px;
}

/* El ícono a la izquierda; a su derecha, el título y de qué trata (dos niveles de letra). */
.sc-tema-cabeza {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 2px 14px;
}

.sc-tema-cabeza .ld-numero {
	grid-row: span 2;
}

.sc-tema-titulo {
	font-size: var(--ld-letra-cifra);
	line-height: 1.2;
}

.sc-tema-cabeza p {
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.4;
}

.sc-tema .ld-pregunta {
	scroll-margin-top: 20px;
}

/* Al buscar, la primera que queda a la vista no lleva línea arriba. */
.sc-tema .ld-pregunta.is-primera {
	border-top-color: transparent;
}

/* Los enlaces de una respuesta: debajo de su texto, cada uno de 44 de alto. */
.ld-pregunta .sc-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin-top: -14px;
	padding-bottom: 12px;
}

.sc-enlaces a,
.sc-vacio a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	color: var(--ld-azul-tinta);
	font-weight: 500;
	text-decoration: none;
}

.sc-enlaces a:hover,
.sc-vacio a:hover {
	text-decoration: underline;
}

/* Las respuestas se abren despacio donde el navegador sabe hacerlo; en el resto, de una. */
@supports (interpolate-size: allow-keywords) {
	.agdt-secundaria {
		interpolate-size: allow-keywords;
	}

	.sc-tema .ld-pregunta::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 260ms var(--ld-sale), content-visibility 260ms allow-discrete;
	}

	.sc-tema .ld-pregunta[open]::details-content {
		block-size: auto;
	}
}

/* Cuando la búsqueda no encuentra nada: no parece una tarjeta más (borde punteado, sin fondo). */
.sc-vacio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 8px;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	padding: 20px;
	border: 2px dashed var(--ld-linea);
	border-radius: var(--ld-r-pieza);
	color: var(--ld-gris);
	text-align: center;
}

/* ---------- A quién escribirle ---------- */

.sc-ayuda {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px 14px;
	padding: 20px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.sc-ayuda p {
	display: grid;
	gap: 2px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.35;
}

.sc-ayuda p b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
}

.sc-ayuda .ld-boton {
	grid-column: 1 / -1;
}

/* ---------- Los documentos legales: el índice y la hoja de texto ---------- */

.sc-legal {
	display: grid;
	gap: 24px;
	padding-block: 20px var(--ld-seccion);
}

.sc-legal-lado {
	display: grid;
	gap: 24px;
	align-content: start;
	min-width: 0;
}

.sc-legal-portada {
	display: grid;
	justify-items: start;
	gap: 14px;
}

/* Un documento se titula más bajo que una landing: el tamaño de un título de sección. */
.sc-legal-titulo,
.sc-titulo {
	font-size: var(--ld-letra-seccion);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* El índice es una pieza: en el teléfono, plegada. */
.sc-legal-indice details {
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.sc-legal-indice summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding-inline: 20px;
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.sc-legal-indice summary::-webkit-details-marker {
	display: none;
}

.sc-legal-indice summary svg {
	color: var(--ld-azul-tinta);
	transition: transform 220ms var(--ld-sale);
}

.sc-legal-indice details[open] summary svg {
	transform: rotate(180deg);
}

.sc-legal-indice ol {
	padding: 0 8px 8px;
}

.sc-legal-indice a {
	display: flex;
	align-items: center;
	min-height: var(--ld-toque);
	padding: 6px 12px;
	border-radius: var(--ld-r-chico);
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.3;
	text-decoration: none;
	transition: color 140ms ease, background-color 140ms ease;
}

.sc-legal-indice a:hover {
	color: var(--ld-tinta);
}

/* La sección que se está leyendo. */
.sc-legal-indice a[aria-current] {
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	font-weight: 500;
}

/* El texto: en el teléfono va directo sobre el fondo, sin caja blanca. */
.sc-legal-hoja {
	min-width: 0;
	color: var(--ld-gris);
	font-size: var(--ld-letra-base);
	line-height: 1.65;
	text-wrap: pretty;
}

.sc-legal-hoja > * + *,
.sc-legal-hoja section > * + * {
	margin-top: 14px;
}

.sc-legal-hoja section {
	margin-top: 40px;
	scroll-margin-top: 24px;
}

.sc-legal-hoja h2 {
	color: var(--ld-tinta);
	font-size: var(--ld-letra-cifra);
	line-height: 1.2;
}

.sc-legal-hoja section > h3 {
	margin-top: 24px;
	color: var(--ld-tinta);
	font-size: var(--ld-letra-base);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.sc-legal-hoja section > h3 + * {
	margin-top: 6px;
}

.sc-legal-hoja strong {
	color: var(--ld-tinta);
	font-weight: 600;
}

.sc-legal-hoja ul {
	display: grid;
	gap: 8px;
}

.sc-legal-hoja li {
	position: relative;
	padding-left: 22px;
}

.sc-legal-hoja li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul);
}

/* Una tabla del documento. En el teléfono cada fila es una ficha: el nombre arriba y, debajo, cada dato en su renglón. */
.sc-legal-tabla {
	display: block;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.sc-legal-tabla thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.sc-legal-tabla tbody {
	display: grid;
	gap: 10px;
}

.sc-legal-tabla tr {
	display: grid;
	gap: 2px;
	padding: 14px 16px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.sc-legal-tabla th,
.sc-legal-tabla td {
	display: block;
	padding: 0;
	font-weight: 400;
}

.sc-legal-tabla tbody th {
	color: var(--ld-tinta);
	font-weight: 600;
}

/* Un enlace dentro del texto se dibuja como texto; el área del dedo (44) la pone el pseudo-elemento. */
.sc-legal-hoja a {
	position: relative;
	color: var(--ld-azul-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.sc-legal-hoja a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--ld-toque);
	transform: translateY(-50%);
}

/* ---------- Contacto: los caminos y el formulario ---------- */

.sc-contacto {
	display: grid;
	gap: 32px;
	padding-block: 20px var(--ld-seccion);
}

.sc-contacto-lado {
	display: grid;
	gap: 24px;
	align-content: start;
	min-width: 0;
}

.sc-contacto .ld-bajada {
	margin-top: 0;
}

.sc-canales {
	display: grid;
	gap: 10px;
}

/* Un camino: un renglón entero que se toca. El dato, y lo que lo acompaña. */
.sc-canal {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	padding: 12px 16px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-tinta);
	text-decoration: none;
	transition: transform 140ms var(--ld-sale);
}

/* Los tres íconos miden lo mismo: así los textos empiezan en la misma línea. */
.sc-canal .ld-numero {
	width: 40px;
	height: 40px;
}

.sc-canal:active {
	transform: scale(.985);
}

.sc-canal > svg {
	color: var(--ld-nube);
	transition: transform 180ms var(--ld-sale), color 140ms ease;
}

.sc-canal:hover > svg {
	color: var(--ld-azul-tinta);
	transform: translateX(3px);
}

.sc-canal-texto {
	display: grid;
	gap: 2px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.35;
}

.sc-canal-texto b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
}

.sc-canal-texto > span {
	overflow-wrap: anywhere;
}

/* El formulario: en el teléfono sus campos van directo sobre el fondo, sin caja blanca. */
.sc-contacto-hoja {
	min-width: 0;
	scroll-margin-top: 24px;
}

.sc-form {
	display: grid;
	gap: 16px;
}

.sc-campo {
	display: grid;
	gap: 6px;
}

.sc-campo > span {
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

/* (La letra de un campo mide 16 o más: con menos, el teléfono agranda la página al tocarlo.) */
.sc-campo input,
.sc-campo textarea {
	width: 100%;
	min-height: var(--ld-boton);
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--ld-linea);
	border-radius: var(--ld-r-dia);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	font-family: inherit;
	font-size: var(--ld-letra-base);
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sc-campo textarea {
	display: block;
	min-height: 148px;
	padding-block: 14px;
	resize: vertical;
}

.sc-campo input:hover,
.sc-campo textarea:hover {
	border-color: var(--ld-nube);
}

.sc-campo input:focus,
.sc-campo textarea:focus {
	border-color: var(--ld-azul);
	box-shadow: 0 0 0 4px var(--ld-azul-suave);
	outline: none;
}

.sc-form .ld-boton {
	width: 100%;
	margin-top: 4px;
}

.sc-form .ld-boton[aria-busy='true'] {
	opacity: .6;
	pointer-events: none;
}

.sc-form-aviso {
	padding: 12px 16px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-mal-suave);
	color: var(--ld-mal);
	font-size: var(--ld-letra-pieza);
	line-height: 1.4;
}

/* Enviado: la confirmación ocupa el lugar del formulario. */
.sc-form-listo {
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: 40px 20px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	text-align: center;
	outline: none;
}

.sc-form-tilde {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-ok);
	color: var(--ld-papel);
}

.sc-form-listo p {
	display: grid;
	gap: 6px;
	color: var(--ld-gris);
}

.sc-form-listo p b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
}

/* Sin botón fijo abajo, el pie no le guarda lugar. */
.agdt-secundaria-contacto .ld-pie,
.agdt-secundaria-legal .ld-pie {
	padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Desde la tableta ---------- */

@media (min-width: 768px) {
	.sc-portada {
		justify-items: center;
		padding-block: 44px 56px;
		text-align: center;
	}

	.sc-temas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 560px;
	}

	.sc-temas a {
		justify-content: center;
	}

	.sc-cuerpo {
		gap: 56px;
	}

	.sc-ayuda {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 24px 28px;
	}

	.sc-ayuda .ld-boton {
		grid-column: auto;
	}

	.sc-legal {
		max-width: calc(760px + 2 * var(--ld-margen));
		gap: 28px;
		padding-top: 40px;
	}

	.sc-contacto {
		max-width: calc(640px + 2 * var(--ld-margen));
		gap: 36px;
		padding-top: 40px;
	}

	/* Desde acá el formulario va en una tarjeta. */
	.sc-form {
		padding: 32px 36px 36px;
		border-radius: var(--ld-r-tarjeta);
		background: var(--ld-papel);
		box-shadow: var(--ld-sombra);
	}

	.sc-form-listo {
		padding-block: 64px;
	}

	/* Desde acá la tabla es una tabla, con sus encabezados a la vista y una línea de pelo entre filas. */
	/* (Con la letra de las piezas, un punto menos: así cada dato entra en su renglón en la computadora.) */
	.sc-legal-tabla {
		display: table;
		font-size: var(--ld-letra-pieza);
	}

	.sc-legal-tabla thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		clip-path: none;
	}

	.sc-legal-tabla tbody {
		display: table-row-group;
	}

	.sc-legal-tabla tr {
		display: table-row;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.sc-legal-tabla th,
	.sc-legal-tabla td {
		display: table-cell;
		padding: 12px 16px 12px 0;
		border-bottom: 1px solid var(--ld-linea);
		vertical-align: top;
	}

	.sc-legal-tabla thead th {
		color: var(--ld-tenue);
		font-size: var(--ld-letra-nota);
		font-weight: 500;
	}

	.sc-legal-tabla tbody tr:last-child > * {
		border-bottom: 0;
	}

	/* Desde acá el texto va en una hoja blanca. */
	.sc-legal-hoja {
		padding: 40px 44px 48px;
		border-radius: var(--ld-r-tarjeta);
		background: var(--ld-papel);
		box-shadow: var(--ld-sombra);
	}
}

/* ---------- Escritorio: el título del tema a la izquierda y su tarjeta a la derecha ---------- */

@media (min-width: 1024px) {
	.sc-temas {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		max-width: 940px;
	}

	.sc-cuerpo {
		gap: 64px;
	}

	.sc-tema {
		grid-template-columns: 320px minmax(0, 1fr);
		align-items: start;
		gap: 56px;
		max-width: none;
	}

	/* El encabezado acompaña mientras se recorren las preguntas de su tema. */
	.sc-tema-cabeza {
		position: sticky;
		top: 24px;
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 6px;
		padding-top: 12px;
	}

	.sc-tema-cabeza .ld-numero {
		grid-row: auto;
		margin-bottom: 10px;
	}

	.sc-tema .ld-preguntas-lista {
		max-width: none;
	}

	.sc-vacio {
		max-width: none;
	}

	/* El documento legal: el título y el índice a la izquierda, la hoja a la derecha. */
	.sc-legal {
		grid-template-columns: 320px minmax(0, 1fr);
		align-items: start;
		gap: 56px;
		max-width: calc(var(--ld-ancho) + 2 * var(--ld-margen));
	}

	/* El contacto: el título y los caminos a la izquierda, el formulario a la derecha. */
	.sc-contacto {
		grid-template-columns: minmax(0, 1fr) 520px;
		align-items: start;
		gap: 72px;
		max-width: calc(var(--ld-ancho) + 2 * var(--ld-margen));
		padding-top: 56px;
	}

	.sc-contacto-lado {
		gap: 32px;
		padding-top: 12px;
	}

	.sc-canales {
		max-width: 520px;
	}

	.sc-legal-lado {
		align-self: stretch;
		gap: 28px;
		padding-top: 12px;
	}

	/* El índice acompaña mientras se lee; abierto, su rótulo deja de ser un botón. */
	/* (Se corre 12 hacia afuera: lo que se alinea con el título es el texto de cada sección, no la caja de su enlace.) */
	.sc-legal-indice {
		position: sticky;
		top: 24px;
		margin-left: -12px;
	}

	.sc-legal-indice details {
		background: none;
		box-shadow: none;
	}

	.sc-legal-indice details[data-sc-fijo] summary {
		min-height: 0;
		padding: 0 12px 8px;
		color: var(--ld-tenue);
		font-family: var(--ld-familia);
		font-size: var(--ld-letra-nota);
		font-weight: 500;
		cursor: default;
		pointer-events: none;
	}

	.sc-legal-indice details[data-sc-fijo] summary svg {
		display: none;
	}

	.sc-legal-indice ol {
		padding: 0;
	}

	.sc-legal-hoja {
		padding: 56px 64px 64px;
	}
}

/* Impreso: sólo el documento. */
@media print {
	.agdt-secundaria-legal .ld-barra-acciones,
	.agdt-secundaria-legal .ld-pie,
	.agdt-secundaria-legal .ld-fijo,
	.sc-legal-indice {
		display: none;
	}

	.sc-legal {
		display: block;
	}

	.sc-legal-hoja {
		padding: 0;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-temas a,
	.sc-canal,
	.sc-canal > svg,
	.sc-campo input,
	.sc-campo textarea,
	.sc-legal-indice a,
	.sc-legal-indice summary svg,
	.sc-buscador input,
	.sc-tema .ld-pregunta::details-content {
		transition: none;
	}
}