/**
 * El equipo: las burbujas del home y la parrilla de /estudio/.
 *
 * Hoja aparte y no dentro de app.css a propósito: el 17 de septiembre de 2026
 * había dos sesiones trabajando sobre el mismo sitio y app.css estaba tomado.
 * Separarlo salió gratis y encima se carga sólo donde se usa, como ya hacen
 * casos.css y su JS.
 *
 * Las variables (--flama, --tiza, --ceniza, --curva...) salen de app.css, que
 * siempre va antes: esta hoja se encola con 'dk-app' como dependencia.
 */

/* ============================================================ el bloque común */

.dk-equipo {
	position: relative;
	/* Vertical corto a propósito: la regla del sitio es que la sección quepa
	   entera en una pantalla, y el titular más una fila de burbujas más los
	   botones ya ocupan casi todo a 900 px de alto. */
	padding-block: clamp(48px, 6vh, 84px);
}

/**
 * Sin esto la parrilla se cae a una sola columna.
 *
 * `.dk-seccion` es un flex en columna y `.dk-contenedor` lleva `margin: 0 auto`.
 * En flexbox, un margen `auto` en el eje cruzado APAGA el estirado: la caja deja
 * de ocupar el ancho disponible y se encoge al de su contenido. Al resto de las
 * secciones no les pasa nada porque su contenido ya es ancho — un titular, una
 * foto grande. Una parrilla de pistas `1fr` no tiene ancho propio, así que se
 * quedaba en 131 px y las veintidós burbujas salían una debajo de otra: 534% de
 * pantalla en escritorio.
 *
 * `width: 100%` devuelve el estirado sin tocar app.css y sin perder ni el
 * `max-width` ni el centrado.
 */
.dk-equipo > .dk-contenedor {
	width: 100%;
}

.dk-equipo__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: end;
	margin-bottom: clamp(28px, 4vh, 52px);
}

.dk-equipo__texto {
	max-width: 46ch;
	margin: 0;
	color: var(--ceniza);
}

/* ============================================================ las burbujas */

/**
 * Flex y no grid, aunque grid parezca lo obvio para una retícula.
 *
 * Con `grid-template-columns: repeat(auto-fit, minmax(128px, 1fr))` las pistas
 * se reparten TODO el ancho: con cuatro personas marcadas salían cuatro
 * columnas de 340 px y las burbujas quedaban separadas por medio metro. El
 * panel deja marcar de una a ocho, así que la fila tiene que verse bien con
 * cualquiera de esas cantidades.
 *
 * Flex con un ancho base fijo las mantiene del mismo tamaño siempre y las
 * agrupa en el centro; lo que cambia con la cantidad es el aire alrededor, no
 * el tamaño de las caras.
 */
.dk-burbujas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(18px, 2.2vh, 30px) clamp(16px, 2vw, 34px);
}

.dk-burbuja {
	flex: 0 1 168px;
	max-width: 168px;
	min-width: 0;
}

.dk-burbuja__enlace {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

/* --------------------------------------------------------------- la foto */

.dk-burbuja__foto {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--superficie);
	border: 1px solid var(--linea);
	transition: transform 0.5s var(--curva), border-color 0.3s;
}

.dk-burbuja__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Las caras casi nunca están en el centro exacto del cuadro: casi siempre
	   quedan en el tercio superior. Mismo criterio que el recorte de las
	   portadas de caso. */
	object-position: center 35%;
	transition: filter 0.4s;
}

/* Sin foto: la inicial sobre el naranja de la marca. Nunca un hueco gris. */
.dk-burbuja__inicial {
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1;
	color: var(--tiza);
	background: var(--flama-honda);
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

/* El distintivo de LinkedIn, sólo en quien tiene perfil. */
.dk-burbuja__in {
	position: absolute;
	right: 6%;
	bottom: 6%;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--flama);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}

/* ------------------------------------------------------------- el texto */

.dk-burbuja__nombre {
	font-weight: 600;
	font-size: clamp(0.88rem, 1vw, 1rem);
	line-height: 1.25;
	color: var(--tiza);
	text-wrap: balance;
}

.dk-burbuja__cargo {
	font-size: clamp(0.72rem, 0.8vw, 0.82rem);
	line-height: 1.3;
	color: var(--ceniza);
	text-wrap: balance;
}

/* ------------------------------------------------------------ al pasar */

a.dk-burbuja__enlace:hover .dk-burbuja__foto,
a.dk-burbuja__enlace:focus-visible .dk-burbuja__foto {
	transform: translateY(-4px) scale(1.03);
	border-color: var(--flama);
}

a.dk-burbuja__enlace:hover .dk-burbuja__in,
a.dk-burbuja__enlace:focus-visible .dk-burbuja__in {
	opacity: 1;
	transform: scale(1);
}

a.dk-burbuja__enlace:hover .dk-burbuja__nombre,
a.dk-burbuja__enlace:focus-visible .dk-burbuja__nombre {
	color: var(--flama);
}

/* El foco tiene que verse en la burbuja entera, no en la caja cuadrada. */
.dk-burbuja__enlace:focus-visible {
	outline: none;
}

.dk-burbuja__enlace:focus-visible .dk-burbuja__foto {
	outline: 2px solid var(--flama);
	outline-offset: 3px;
}

/* ============================================================== el pie */

.dk-equipo__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: clamp(28px, 4vh, 48px) 0 0;
}

.dk-equipo__sumarme {
	font-size: 0.9rem;
	color: var(--ceniza);
	border-bottom: 1px solid transparent;
	transition: color 0.3s, border-color 0.3s;
}

.dk-equipo__sumarme:hover,
.dk-equipo__sumarme:focus-visible {
	color: var(--flama);
	border-bottom-color: var(--flama);
}

.dk-equipo__sumarme span {
	display: inline-block;
	transition: transform 0.3s var(--curva);
}

.dk-equipo__sumarme:hover span {
	transform: translateX(4px);
}

/* ==================================================== la parrilla de /estudio/ */

.dk-equipo-todo__grupo + .dk-equipo-todo__grupo {
	margin-top: clamp(32px, 5vh, 56px);
}

.dk-equipo-todo__area {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--flama);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--linea);
}

/* Más apretada que la del home: aquí caben las veintiocho personas y la unidad
   que tiene que leerse de un golpe es el grupo, no la página. Alineadas a la
   izquierda porque cada grupo arranca bajo su rótulo de área. */
.dk-equipo-todo .dk-burbujas {
	justify-content: flex-start;
}

.dk-equipo-todo .dk-burbuja {
	flex-basis: 132px;
	max-width: 132px;
}

.dk-equipo-todo__vacio {
	color: var(--ceniza);
	margin: 0;
}

/* ============================================================== teléfono */

@media (max-width: 860px) {
	.dk-equipo__cabeza {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 16px;
	}

	.dk-equipo__texto {
		max-width: none;
	}
}

@media (max-width: 620px) {
	/* En vertical las burbujas dejan de apilarse y pasan a una tira que se
	   desliza: ocho caras apiladas son cuatro pantallas de scroll y la regla
	   del sitio no lo admite. El mismo patrón que la parrilla de casos.
	   `scroll-padding-inline` es obligatorio: sin él el snap alinea contra el
	   borde del scrollport y se come el margen lateral. */
	/* Ojo con el `overflow-x: auto` de aquí abajo si algún día metes un
	   `backdrop-filter` o un halo dentro de esta lista. Hace dos cosas a la vez:
	   recorta lo que sobresalga de una burbuja, y convierte la lista en
	   contenedor de scroll —el navegador lo rasteriza aparte y aparece un
	   rectángulo claro detrás de las caras—. El segundo síntoma no se conecta
	   solo con su causa; ya costó encontrarlo una vez en la variante flotante. */
	.dk-burbujas {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 38%;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 20px;
		padding-bottom: 8px;
		margin-inline: -20px;
		padding-inline: 20px;
		scrollbar-width: none;
	}

	.dk-burbujas::-webkit-scrollbar {
		display: none;
	}

	.dk-burbuja {
		scroll-snap-align: start;
	}

	.dk-burbuja__foto {
		max-width: 108px;
	}

	.dk-equipo-todo .dk-burbujas {
		grid-auto-columns: 33%;
	}

	.dk-equipo__pie {
		gap: 12px 20px;
	}
}

/* Quien pidió menos movimiento no ve ninguno: las burbujas siguen siendo
   enlaces y el color ya dice que responden. */
@media (prefers-reduced-motion: reduce) {
	.dk-burbuja__foto,
	.dk-burbuja__in,
	.dk-equipo__sumarme span {
		transition: none;
	}

	a.dk-burbuja__enlace:hover .dk-burbuja__foto,
	a.dk-burbuja__enlace:focus-visible .dk-burbuja__foto {
		transform: none;
	}
}