/* =========================================================================
   Mastercoip 2026 — página «Política de privacidad» de Mastercoip APP.

   No hay artboard en el XD: la página se viste como su gemela «Borra tu
   cuenta» (borrar-cuenta.css), con piezas que ya existen. El titular Bold
   40/48 en negro sobre blanco de «Legal» (legal.css) y sus fichas de borde de
   1 px y radio 20 —aquí una por apartado, ya abiertas—, y la tarjeta crema
   con sombra de los formularios de consulta, que aquí hace de índice.
   ========================================================================= */

.coip-privacidad {
	padding-block: 100px;
	background: var(--coip-white);
	color: var(--coip-charcoal);
}

.coip-privacidad__inner {
	width: 100%;
	max-width: calc(var(--coip-container) + (var(--coip-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--coip-gutter);
}

/* -------------------------------------------------------------------------
   Cabecera
   ---------------------------------------------------------------------- */

/* El ancho de lectura de las fichas de «Legal». */
.coip-privacidad__head {
	max-width: 851px;
	margin-bottom: 60px;
}

/* El antetítulo de «Borra tu cuenta», pero sin versalitas: aquí lleva «iOS»,
   que en mayúsculas se leería «IOS». */
.coip-privacidad__eyebrow {
	margin: 0 0 14px;
	color: var(--coip-violet);
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.coip-privacidad__title {
	margin: 0;
	color: var(--coip-ink);
	font-size: var(--coip-fs-h2);
	line-height: var(--coip-lh);
	font-weight: 700;
}

.coip-privacidad__intro {
	margin: 20px 0 0;
	font-size: var(--coip-fs-body);
	line-height: 1.4;
	font-weight: 400;
}

.coip-privacidad__intro strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Rejilla: el texto a la izquierda y el índice a la derecha
   ---------------------------------------------------------------------- */

/* `align-items: start` no es opcional: estirado al alto de la fila, el índice
   no tendría recorrido y el `sticky` no haría nada. */
.coip-privacidad__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
	gap: 60px;
}

/* En el HTML el índice va primero; aquí cada uno a su columna. */
.coip-privacidad__doc {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	gap: 20px;
}

/* -------------------------------------------------------------------------
   Índice: la tarjeta crema de los formularios, pegada al desplazarse
   ---------------------------------------------------------------------- */

/* La cabecera del sitio no es fija, así que se pega a 30 px del borde, como
   la tarjeta de compra de los cursos (curso.css). En una ventana más baja que
   el índice, se desplaza por dentro. Sin `data-lenis-prevent` a propósito: su
   `overscroll-behavior: contain` (base.css) dejaría la rueda muerta encima
   del índice cuando éste no tiene nada que desplazar. */
.coip-privacidad__indice {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 30px;
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	padding: 28px;
	background: var(--coip-cream);
	border-radius: var(--coip-radius);
	box-shadow: var(--coip-shadow);
	color: var(--coip-ink);
	scrollbar-width: thin;
}

.coip-privacidad__indice-titulo {
	margin: 0 0 14px;
	font-size: var(--coip-fs-card-sub);
	line-height: var(--coip-lh-sub);
	font-weight: 700;
}

.coip-privacidad__indice-lista {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El número va en su propia columna: un título de dos renglones sigue
   alineado con su primera línea en vez de volver debajo de la cifra. */
.coip-privacidad__indice-lista a {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	padding: 5px 0;
	color: var(--coip-charcoal);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

/* Gesto 2 en su versión de enlace, como en «Legal»: cambia el color, no la
   caja. */
.coip-privacidad__indice-lista a:hover,
.coip-privacidad__indice-lista a:focus-visible {
	color: var(--coip-violet);
}

/* La cifra de cada apartado, en el índice y en los titulares. El violeta
   pasa de 7:1 sobre blanco y sobre crema. */
.coip-privacidad__num {
	color: var(--coip-violet);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Apartados: las fichas de «Legal», ya abiertas
   ---------------------------------------------------------------------- */

/* El ancla deja por encima de la ficha el mismo aire que el índice pegado;
   sin él, el borde de arriba quedaría rozando la ventana. */
.coip-privacidad__apartado {
	padding: 36px 40px;
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
	font-size: var(--coip-fs-ui);
	line-height: 1.5;
	scroll-margin-top: 30px;
}

.coip-privacidad__apartado > * {
	margin: 0;
}

.coip-privacidad__apartado > * + * {
	margin-top: 14px;
}

.coip-privacidad__h2 {
	margin-bottom: 20px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-list);
	line-height: var(--coip-lh);
	font-weight: 700;
}

.coip-privacidad__apartado > .coip-privacidad__h3 {
	margin-top: 30px;
	color: var(--coip-ink);
	font-size: var(--coip-fs-card-sub);
	line-height: var(--coip-lh-sub);
	font-weight: 700;
}

.coip-privacidad__apartado strong {
	font-weight: 600;
}

/* Dos frases que el texto subraya: en la app no se compra nada y nada se usa
   para seguimiento. */
.coip-privacidad__destacado {
	padding: 16px 20px;
	background: var(--coip-cream);
	border-radius: var(--coip-radius-sm);
	color: var(--coip-ink);
}

/* Los datos del responsable, rótulo y valor en dos columnas. */
.coip-privacidad__datos > div {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 20px;
	padding-block: 12px;
	border-top: 1px solid rgba(41, 43, 50, 0.15);
}

.coip-privacidad__datos > div:first-child {
	padding-top: 0;
	border-top: 0;
}

.coip-privacidad__datos > div:last-child {
	padding-bottom: 0;
}

.coip-privacidad__datos dt {
	color: var(--coip-ink);
	font-weight: 600;
}

.coip-privacidad__datos dd {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Listas: el punto coral de «Borra tu cuenta»
   ---------------------------------------------------------------------- */

.coip-privacidad__lista {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
}

/* La primera línea mide 24 px y el punto 8: 8 px arriba lo centran. */
.coip-privacidad__lista li {
	position: relative;
	padding-left: 20px;
}

.coip-privacidad__lista li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--coip-coral);
}

/* Siete entradas de dos o tres palabras: a dos columnas se leen de un
   vistazo. Columnas de texto y no rejilla, para que el orden siga siendo de
   arriba abajo. */
.coip-privacidad__lista--dos {
	display: block;
	columns: 2;
	column-gap: 40px;
}

.coip-privacidad__lista--dos li {
	margin-bottom: 10px;
	break-inside: avoid;
}

/* La dirección debajo de su rótulo, como en la página anterior. */
.coip-privacidad__lista--enlaces a {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Enlaces del texto: los de «Legal»
   ---------------------------------------------------------------------- */

.coip-privacidad__apartado a {
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
	transition: color var(--coip-dur-rapida) var(--coip-ease),
		text-decoration-thickness var(--coip-dur-rapida) var(--coip-ease);
}

/* Además del violeta, la línea engorda: es lo que separa «el que estoy
   apuntando» del de al lado. */
.coip-privacidad__apartado a:hover,
.coip-privacidad__apartado a:focus-visible {
	color: var(--coip-violet);
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
   Breakpoints
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.coip-privacidad {
		padding-block: 70px;
	}

	.coip-privacidad__head {
		margin-bottom: 40px;
	}

	.coip-privacidad__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sin sitio para una segunda columna: el texto se lee de corrido y los
	   titulares numerados ya hacen de guía. */
	.coip-privacidad__indice {
		display: none;
	}
}

@media (max-width: 767px) {
	.coip-privacidad {
		padding-block: 50px;
	}

	.coip-privacidad__head {
		margin-bottom: 32px;
	}

	.coip-privacidad__intro {
		margin-top: 14px;
	}

	.coip-privacidad__doc {
		gap: 16px;
	}

	.coip-privacidad__apartado {
		padding: 24px 20px;
	}

	.coip-privacidad__lista--dos {
		columns: 1;
	}

	/* El rótulo encima de su valor: a dos columnas, una dirección de ochenta
	   caracteres se quedaría en una tira de 120 px. */
	.coip-privacidad__datos > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}