/**
 * Portfolio agrupado por acento — las DOS paginas.
 *
 * La galeria se parte en dos y cada idioma abre con lo que le sirve a su
 * publico: la inglesa con el neutro, la espanola con el argentino. Sin rotular,
 * el agrupamiento no se percibe: son doce miniaturas seguidas y el mercado de
 * cada pieza solo aparece al pasar el mouse. Los rotulos son los que hacen que
 * el orden signifique algo.
 *
 * Son subtitulos, no titulos: el h2 de la seccion ("Algunos trabajos" /
 * "Featured Work") manda, y estos cuelgan de el. De ahi el cuerpo chico y las
 * mayusculas con tracking, que es el gesto de kicker de la marca.
 */
/* Sin ancho ni padding propios: el rotulo hereda el contenedor de Enfold y
   arranca en el mismo borde que el h2 "Featured Work". Con padding propio
   quedaba 50px mas adentro, sin alinearse ni con el titulo ni con la galeria. */

/* El rotulo tiene que pegarse a la galeria que rotula, no a la de arriba: mucho
   aire encima, poco debajo. Al reves (que era como quedaba) se lee como el pie
   del bloque anterior. */
/* El aire de arriba va como PADDING y no como margen: Enfold hace el scroll a
   las anclas por JavaScript, asi que ignora scroll-margin-top. Al estar dentro
   de la caja del elemento, el salto deja el rotulo por debajo del header fijo
   en vez de tapado. */
#top .fp-grupo .fp-grupo__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 22px;
	padding-top: 70px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #000000;
}

/* El acento de marca: la barra amarilla de 3px marca donde empieza el grupo,
   igual que en la barra de contacto del header. Es el mismo gesto en los dos
   lugares, no dos ideas distintas. */
#top .fp-grupo .fp-grupo__titulo::before {
	content: "";
	display: block;
	width: 3px;
	height: 14px;
	background-color: #ffe01b;
	flex: none;
}

/* La galeria trae 50px de aire arriba por su cuenta, que sumados al margen del
   rotulo lo despegaban de su propio grupo. Se los saca: el aire de arriba lo
   pone el rotulo, una sola vez. */
#top .fp-galeria-grupo {
	margin-top: 0;
}

/* Nota: aca hubo una regla con ':first-of-type' para darle menos aire al primer
   rotulo. No servia y encima rompia el ancla: cada rotulo vive en su propia
   <section>, asi que TODOS son "first-of-type" dentro de su padre y la regla los
   agarraba a los dos, dejando el padding en 20px. El salto del indice caia
   entonces con el texto tapado por el header. El aire parejo es mas simple y
   se lee igual de bien. */

@media only screen and (max-width: 767px) {
	#top .fp-grupo .fp-grupo__titulo {
		margin: 8px 0 16px;
		padding-top: 36px;
		font-size: 12px;
	}
}

/* El fondo gris de la galeria de Enfold es lo que convierte un lugar vacio en
   un bache visible. Al partir el portfolio en dos grupos, cada uno puede no
   llenar la ultima fila segun el ancho de la ventana. Las columnas ya se fijaron
   a divisores de 8 y de 4 (4/2/2/1), asi que no deberia sobrar lugar; esto es la
   red por si alguna vez cambia la cantidad de piezas. */
#top .fp-galeria-grupo .av-masonry {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Indice de grupos, debajo del titulo de la seccion.
   Con un primer grupo de dos filas, el segundo rotulo queda abajo del borde de
   la pantalla: sin este indice el visitante no sabe que existe hasta scrollear,
   y el orden —que es toda la gracia de agrupar— no le comunica nada.
   Es subordinado del h2: mas chico, en gris secundario, y el amarillo solo
   aparece al pasar por encima.
   --------------------------------------------------------------------------- */
.fp-indice {
	text-align: center;
}

/* ⚠️ EL ROTULO Y EL INDICE VIVEN EN SECCIONES DISTINTAS, y por eso se apilaban
   DOS paddings de Enfold entre un titulo y lo que ese titulo rotula:

     24px (margen del h2) + 70px (pie de la seccion del titulo)
   + 50px (techo de la seccion siguiente) + 14px (margen del indice) = 158px

   Medido en las dos paginas: daba 159px en la ES y en la EN. El indice se leia
   como un bloque suelto en vez de como subordinado del "Featured Work".
   Bajando los dos paddings queda en ~54px, que es lo que hace que se lea pegado.

   El selector va por adyacencia (`#portfolio + div`) a proposito: asi acota el
   cambio a esas dos secciones y no toca el resto de la pagina, que usa el
   mismo `.content`. */
#top #portfolio .content {
	padding-bottom: 8px;
}

#top #portfolio + div .content {
	padding-top: 8px;
}

/* Y con los dos pegados aparece el filete de 1px que Enfold le pone de techo a
   cada seccion (`border-top: 1px solid #ebebeb`). Con 159px de por medio no se
   notaba; con 55px queda un divisor justo entre el titulo y su indice, diciendo
   lo contrario de lo que buscamos. Solo el de esta seccion. */
#top #portfolio + div {
	border-top: 0;
}

#top .fp-indice .fp-indice__lista {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

#top .fp-indice__lista a {
	color: #555555;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

#top .fp-indice__lista a:hover,
#top .fp-indice__lista a:focus-visible {
	color: #000000;
	border-bottom-color: #ffe01b;
}

.fp-indice__sep {
	color: #8a8a8a;
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
   El aire entre los demos y la bio

   Mismo mecanismo que el hueco del indice, unas lineas mas arriba: Enfold le
   pone `padding: 70px 0` a cada seccion, y entre dos secciones seguidas esos
   paddings se APILAN. Medido entre el borde de abajo del player y el primer
   contenido de la bio: 207px, identicos en las dos paginas.

     79px  el pie de la seccion de demos
     128px el techo de la bio

   Con los demos al final de la pagina daba igual. Ahora que estan segundos, ese
   blanco es de lo primero que se ve, y separa dos cosas que conviene leer
   seguidas: te escucho, y ahora quien sos.

   ⚠️ Esto vive aca y no en `style.css` porque **el `style.css` del child theme
   no se carga**: ni suelto ni fusionado por Enfold. Verificado midiendo una de
   sus reglas contra el navegador —dice 200px y computa 240, que es el valor del
   tema padre—. Son 10 KB de reglas muertas. Si algun dia se conecta, esto se
   muda alla, que es su lugar natural.
   --------------------------------------------------------------------------- */
#top #demos .content {
	padding-bottom: 30px;
}

#top #bio .content {
	padding-top: 30px;
}

/* El header fijo tapa unos 110px: sin esto, saltar a un grupo deja el rotulo
   escondido detras del menu. */
#top .fp-grupo__titulo[id] {
	scroll-margin-top: 120px;
}