/* ============================================================
   Recomendaciones de LinkedIn — carrusel

   Va entre el portfolio y los demos: el productor ya vio las marcas y las
   piezas, y el testimonio confirma justo antes de que escuche.

   ⚠️ AVANZA SOLO CON LA FLECHA, NUNCA SOLO. Un carrusel automatico con texto
   para leer es la peor combinacion posible: te cambia la cita a la mitad de la
   frase. Ademas, al no moverse solo, no hay nada que apagar con
   prefers-reduced-motion — el problema se evita de raiz en vez de parchearse.

   La navegacion real la hace scroll-snap, no JavaScript. El JS mueve el scroll
   y sincroniza los indicadores, pero si no carga el carrusel SIGUE siendo
   usable: se arrastra con el dedo o con la barra. Es la diferencia entre un
   componente que degrada y uno que se rompe.
   ------------------------------------------------------------ */

.fp-rec {
	--fp-rec-borde: #E6E6E6;
	--fp-rec-gris: #8A8A8A;
	padding: 0;
}

.fp-rec__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--fp-rec-borde);
}

.fp-rec__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* La barra amarilla del titulo: el mismo gesto que "BIO /" en el resto de la
   pagina. El amarillo aparece en tres lugares y en ninguno mas: aca, en la
   barra de la cita y en el punto activo. Los tres marcan el mismo eje vertical
   izquierdo, asi que se leen como un sistema y no como tres acentos sueltos. */
.fp-rec__titulo::after {
	content: " /";
	color: #ffe01b;
	font-weight: 900;
}

.fp-rec__controles {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.fp-rec__cuenta {
	min-width: 56px;
	text-align: center;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--fp-rec-gris);
	font-variant-numeric: tabular-nums;
}

.fp-rec__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #111111;
	border-radius: 0;          /* la marca es angular */
	background: transparent;
	color: #111111;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.fp-rec__flecha:hover,
.fp-rec__flecha:focus-visible {
	background: #111111;
	color: #ffffff;
}

/* ⚠️ Las flechas de los extremos se DESHABILITAN, no se ocultan. Si
   desaparecieran, los controles se moverian de lugar al llegar al principio o
   al final y el usuario perderia el blanco al que le estaba apuntando. */
.fp-rec__flecha[disabled] {
	opacity: .25;
	cursor: default;
	pointer-events: none;
}

.fp-rec__flecha svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ── La pista ─────────────────────────────────────────────────────────── */

.fp-rec__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fp-rec__viewport::-webkit-scrollbar {
	display: none;
}

/* Con reduced-motion el salto entre citas es instantaneo en vez de deslizado.
   El carrusel no se mueve solo, asi que esto es lo unico que hay que atender. */
@media (prefers-reduced-motion: reduce) {
	.fp-rec__viewport {
		scroll-behavior: auto;
	}
}

.fp-rec__pista {
	display: flex;
}

/* ⚠️ ACA NO VA NINGUN `min-height`, Y ES A PROPOSITO.

   Las citas van de 39 a 285 caracteres, asi que el miedo era el obvio: que la
   seccion pegue un salto al pasar de una larga a una corta y baile todo lo de
   abajo. Se le puso un minimo de 190px para reservar el alto de la mas larga.

   Estaba de mas. Los 27 slides son items de UN SOLO flex row —no se muestran
   de a uno, estan todos puestos al lado— y `align-items` es `stretch` por
   defecto, asi que la fila ya mide lo que mide el slide mas alto y los otros 26
   se estiran solos. El alto no puede cambiar al navegar: navegar es scrollear
   la fila, no reemplazarla. Verificado pasando por 5 citas a 1440, 1024, 768 y
   390px: 158 / 191 / 224 / 302px, sin variar un pixel en ninguna.

   Lo unico que hacia el minimo era blanco muerto —38px debajo de CADA cita a
   1440px, mas el agujero entre la firma y los puntos en la cita mas corta, que
   ademas va primera—. Y encima quedaba mal calibrado solo: a 768px el valor era
   24px MENOR que el contenido real.

   Si alguna vez el carrusel pasa a mostrar de a uno (`display:none` en los que
   no estan activos), el problema vuelve y ahi si hace falta el minimo. Mientras
   sea scroll-snap sobre una fila, no. */
.fp-rec__slide {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	padding-right: 8px;
	box-sizing: border-box;
}

/* ⚠️ EL PREFIJO `#top` NO ES DECORATIVO, ES LO QUE HACE QUE LA CITA SE LEA.
   La cita es un `<blockquote>` y Enfold lo pinta con `.main_color blockquote`
   —gris #969696—, que con especificidad (0,1,1) le gana a `.fp-rec__cita`
   (0,1,0). El resultado era gris claro sobre blanco: la seccion existia pero
   casi no se veia. Mismo caso que el nombre, abajo. Verificado con
   `CSS.getMatchedStylesForNode`, no a ojo.

   La barra amarilla venia tambien de Enfold, de rebote. Se queda porque es lo
   que le da peso a la cita, pero declarada: 4px en vez de 7 y con el amarillo
   de marca #ffe01b, no el #ffe11b del tema —que se parece pero no es. */
#top .fp-rec__cita {
	margin: 0 0 18px;
	padding-left: 18px;
	border-left: 4px solid #ffe01b;
	font-size: 22px;
	line-height: 1.5;
	color: #111111;
}

.fp-rec__cita::before { content: "“"; }
.fp-rec__cita::after  { content: "”"; }

.fp-rec__firma {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

/* Sin `#top`, `.main_color a` lo pintaba del amarillo de marca: un nombre
   propio en amarillo sobre blanco es practicamente ilegible, y encima competia
   con la barra de la cita. El amarillo queda solo para el hover y el "/". */
#top .fp-rec__nombre {
	font-weight: 800;
	letter-spacing: .02em;
	color: #111111;
	text-decoration: none;
	border-bottom: 1px solid #111111;
}

#top .fp-rec__nombre:hover,
#top .fp-rec__nombre:focus-visible {
	color: #000000;
	border-bottom-color: #ffe01b;
	border-bottom-width: 2px;
}

.fp-rec__cargo {
	display: block;
	margin-top: 3px;
	color: var(--fp-rec-gris);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── Puntos ───────────────────────────────────────────────────────────── */

.fp-rec__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 26px;
}

.fp-rec__punto {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #D8D8D8;
	cursor: pointer;
	transition: background-color .15s ease;
}

.fp-rec__punto[aria-current="true"] {
	background: #ffe01b;
}

.fp-rec__punto:hover {
	background: #111111;
}

/* ── El pie ───────────────────────────────────────────────────────────── */

/* ⚠️ NO ES OPCIONAL. Las 28 originales estan en castellano; traducidas ya no
   son textualmente lo que esa persona escribio, y decirlo es lo que mantiene
   la cita irreprochable. */
.fp-rec__nota {
	margin: 22px 0 0;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fp-rec-gris);
}

/* ── Movil ────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 767px) {
	.fp-rec__cabecera {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	#top .fp-rec__cita {
		padding-left: 14px;
		border-left-width: 3px;
		font-size: 18px;
	}
}