/* ==========================================================================
   AGUARIS · Loop de proyectos  (CPT `proyectos`)
   Usado por el shortcode [aguaris_proyectos]
   ========================================================================== */

.aguaris-loop-wrap {
	--ink:         #0B1F24;   /* petróleo casi negro */
	--paper:       #EEF2F1;   /* mineral muy claro */
	--teal:        #01437d;   /* teal marca */
	--aqua:        #35C4BE;   /* aqua brillante (aura / focus) */
	--line:        rgba(11,31,36,.12);
	--card-radius: 6px;
	--gap:         22px;
	--cols:        4;         /* slots visibles en desktop */
	--ratio:       3 / 4;     /* proporción de la foto (cambia a 4/3 o 1/1 si tus fotos son apaisadas) */

	font-family: inherit;
	color: var(--ink);
	box-sizing: border-box;
	margin: 0 auto;
}
.aguaris-loop-wrap *,
.aguaris-loop-wrap *::before,
.aguaris-loop-wrap *::after { box-sizing: border-box; }

/* Variante sección oscura (banda cinematográfica en la home).
   Uso: añade la clase is-dark al contenedor si algún día quieres el bloque a sangre oscuro. */
.aguaris-loop-wrap.is-dark {
	--ink: #EEF2F1;
	--paper: #0B1F24;
	--line: rgba(238,242,241,.14);
	background:
		radial-gradient(120% 80% at 15% 0%, rgba(53,196,190,.16), transparent 55%),
		radial-gradient(90% 70% at 100% 100%, rgba(20,128,124,.20), transparent 60%),
		#0B1F24;
	max-width: none;
	padding-left: max(32px, calc((100vw - 1240px) / 2 + 32px));
	padding-right: max(32px, calc((100vw - 1240px) / 2 + 32px));
}

/* ---- Viewport + track ---- */
.aguaris-loop__viewport { position: relative; }
.aguaris-loop__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.aguaris-loop__track::-webkit-scrollbar { display: none; }

/* ---- Card (tile de foto) ---- */
.aguaris-loop__card {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: block;
	outline: none;
}
.card__media {
	position: relative;
	aspect-ratio: var(--ratio);
	border-radius: var(--card-radius);
	overflow: hidden;
	background: #0B1F24;
	isolation: isolate;
}
.card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card__img--empty {
	background: linear-gradient(135deg, #12414a, #0B1F24);
}
.aguaris-loop__card:hover .card__img { transform: scale(1.05); }

.card__media::after {                 /* degradado inferior para legibilidad */
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(4,14,16,.85) 0%, rgba(4,14,16,.30) 42%, transparent 66%);
	z-index: 1;
}
.card__sector {
	position: absolute; top: 14px; left: 14px;
	z-index: 2;
	font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: #fff;
	background: rgba(11,31,36,.42);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.22);
	padding: 6px 11px;
	border-radius: 100px;
}
.card__overlay {
	position: absolute; z-index: 2;
	left: 18px; right: 18px; bottom: 18px;
	color: #fff;
}
.card__title {
	font-weight: 600;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 8px;
	color: #fff;
}
.card__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: rgba(255,255,255,.85);
	margin: 0;
}
.card__location svg { width: 14px; height: 14px; flex: none; }

.aguaris-loop__card:focus-visible .card__media {
	box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--aqua);
}

/* ---- Flechas (JS las muestra solo si hay overflow) ---- */
.aguaris-loop__nav {
	display: none;
	gap: 10px;
	margin-top: 24px;
	justify-content: flex-end;
}
.aguaris-loop__arrow {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	display: grid; place-items: center;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.aguaris-loop__arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.aguaris-loop__arrow:active:not(:disabled) { transform: scale(.94); }
.aguaris-loop__arrow:disabled { opacity: .3; cursor: default; }
.aguaris-loop__arrow svg { width: 18px; height: 18px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) { .aguaris-loop-wrap { --cols: 3; } }
@media (max-width: 720px)  { .aguaris-loop-wrap { --cols: 2; padding: 44px 20px; } }
@media (max-width: 520px)  {
	.aguaris-loop-wrap { --cols: 1; }
	.aguaris-loop__card { flex-basis: 82%; }   /* peek de la siguiente card */
	.aguaris-loop__nav { display: none !important; }  /* móvil: se navega con swipe */
}

@media (prefers-reduced-motion: reduce) {
	.aguaris-loop__track { scroll-behavior: auto; }
	.card__img, .aguaris-loop__arrow { transition: none; }
}
.aguaris-loop__vacio {
	text-align: center;
	padding: 2rem 1rem;
	color: #6b7280;
	font-size: 1.05rem;
}