/* ==========================================================================
   cargo-base.css
   Estilos base que reproducen el "frontend" de Cargo 3 (layout de páginas,
   pins, overlays, columnas, galerías, marquee, reloj, quick view…).
   El estilo propio del sitio (tipos, colores, tamaños) está en theme.css,
   que es una copia del CSS del sitio en Cargo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	--base-size: 18px;
	--viewport-height: 100vh;
	--site-background-color: #ffffff;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: auto;
}

body {
	margin: 0;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

/* ---- Contenedores principales ------------------------------------------ */

.content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: var(--viewport-height);
	font-size: 14.5px;
}

.pages { position: relative; width: 100%; }

.page {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.page-layout {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	width: 100%;
	max-width: 100%;
	min-height: fit-content;
}

.page-content {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	backdrop-filter: var(--page-content-backdrop-filter, none);
	-webkit-backdrop-filter: var(--page-content-backdrop-filter, none);
}

bodycopy { width: 100%; min-width: 0; }

/* Ancla invisible al principio de cada página apilada */
.page > a.page-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* ---- Pins (cabecera / pie) ---------------------------------------------- */

.pinned { z-index: 400; pointer-events: none; }
.pinned.pinned-top.fixed { position: fixed; top: 0; left: 0; right: 0; }
.pinned.pinned-top:not(.fixed) { position: absolute; top: 0; left: 0; right: 0; }
.pinned.pinned-bottom.fixed { position: fixed; bottom: 0; left: 0; right: 0; }
.pinned.pinned-bottom:not(.fixed) { position: absolute; bottom: 0; left: 0; right: 0; z-index: 390; }
.pinned .page-layout, .pinned .page-content { pointer-events: none; }
.pinned a, .pinned marquee-set, .pinned media-item, .pinned button { pointer-events: auto; }

.pinned[data-visibility="desktop"] { display: none; }
body:not(.mobile) .pinned[data-visibility="desktop"] { display: flex; }
.pinned[data-visibility="mobile"] { display: none; }
body.mobile .pinned[data-visibility="mobile"] { display: flex; }

/* ---- Overlays ------------------------------------------------------------ */

.overlay-content {
	position: fixed;
	inset: 0;
	z-index: 999;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	pointer-events: none;
	overscroll-behavior: contain;
}
.overlay-content .page { pointer-events: none; min-height: var(--viewport-height); }
.overlay-content .page-layout { pointer-events: none; }
.overlay-content .page-content { pointer-events: auto; }
.overlay-content.is-closing { pointer-events: none !important; }
.overlay-content.is-closing * { pointer-events: none !important; }

/* ---- Columnas ------------------------------------------------------------ */

column-set {
	--gutter: 1rem;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	clear: both;
}

column-unit {
	--span: 12;
	display: block;
	position: relative;
	min-width: 0;
	max-width: 100%;
	flex: 0 0 auto;
	width: calc((100% + var(--gutter)) * var(--span) / 12 - var(--gutter));
	word-wrap: break-word;
	overflow-wrap: break-word;
}
column-unit:not(:last-child) { margin-right: var(--gutter); }
column-unit:last-child { flex-grow: 1; }

body.mobile column-set.stack-mobile { flex-direction: column; }
body.mobile column-set.stack-mobile > column-unit {
	width: 100%;
	margin-right: 0;
}
body.mobile column-set.stack-mobile > column-unit:not(:last-child) { margin-bottom: var(--gutter); }
body.mobile column-set.stack-mobile.hide-empty-mobile > column-unit.is-empty { display: none; }

/* ---- Media -------------------------------------------------------------- */

media-item {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
}
media-item .media-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
media-item .media-frame img {
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}
media-item.linked, media-item.zoomable .media-frame { cursor: pointer; }
media-item a.media-link { display: block; color: inherit; text-decoration: none; }

/* Animación al entrar en pantalla (configurada en theme.css con variables) */
media-item .media-frame { will-change: auto; }
media-item.scroll-animate .media-frame {
	animation-name: var(--scroll-animation, none);
	animation-duration: var(--scroll-animation-transition-duration, 1000ms);
	animation-timing-function: var(--scroll-animation-timing, ease);
	animation-fill-mode: both;
}

/* ---- Slideshow ------------------------------------------------------------ */

gallery-slideshow {
	--ss-gutter: 0px;
	--ss-speed: 0s;
	--button-size: 30px;
	--button-inset: 15px;
	--button-icon-color: rgba(255, 255, 255, 0.9);
	--button-background-color: rgba(87, 87, 87, 0.35);
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
body.mobile gallery-slideshow { --button-inset: 10px; }

gallery-slideshow .ss-viewport { position: relative; overflow: hidden; width: 100%; }
gallery-slideshow .ss-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--ss-gutter);
	transition: transform var(--ss-speed) ease-in-out;
	will-change: transform;
}
gallery-slideshow .ss-track.is-dragging { transition: none; }
gallery-slideshow .ss-slide { flex: 0 0 100%; width: 100%; min-width: 0; }
gallery-slideshow .ss-slide .caption { transition: opacity .2s ease-in-out; }
gallery-slideshow .ss-slide:not(.is-active) .caption { opacity: 0; }

gallery-slideshow[data-nav="cursor-zones"] .ss-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
}
gallery-slideshow .ss-zone-prev { left: 0; width: max(40px, 20%); cursor: w-resize; }
gallery-slideshow .ss-zone-next { right: 0; left: max(40px, 20%); cursor: e-resize; }
body.mobile gallery-slideshow[data-mobile-nav="buttons"] .ss-zone { display: none; }

gallery-slideshow .ss-btn {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--button-size);
	height: var(--button-size);
	margin-top: calc(var(--button-size) / -2);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--button-background-color);
	color: var(--button-icon-color);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
gallery-slideshow .ss-btn:active { opacity: .7; }
gallery-slideshow .ss-btn svg { display: block; width: 100%; height: 100%; }
gallery-slideshow .ss-btn-prev { left: var(--button-inset); }
gallery-slideshow .ss-btn-next { right: var(--button-inset); }
gallery-slideshow[data-nav="buttons"] .ss-btn { display: block; }
body.mobile gallery-slideshow[data-mobile-nav="buttons"] .ss-btn { display: block; }
body.mobile gallery-slideshow[data-mobile-nav="none"] .ss-btn { display: none; }
gallery-slideshow[data-count="1"] .ss-btn,
gallery-slideshow[data-count="1"] .ss-zone { display: none !important; }

/* ---- Galería justificada ---------------------------------------------------- */

gallery-justify { display: block; position: relative; width: 100%; }
gallery-justify .gj-row { display: flex; flex-wrap: nowrap; }
gallery-justify .gj-row > media-item { flex: 0 0 auto; }

/* ---- Marquee ------------------------------------------------------------------ */

marquee-set {
	display: block;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	min-height: .5em;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
marquee-set .mq-track {
	display: inline-flex;
	flex-wrap: nowrap;
	will-change: transform;
}
marquee-set .mq-copy { flex: 0 0 auto; white-space: pre; }
marquee-set[data-interactive] { cursor: grab; }
marquee-set.is-dragging { cursor: grabbing; }

/* ---- Reloj ------------------------------------------------------------------------ */

digital-clock { display: inline; font-variant-numeric: tabular-nums; }

/* ---- Iconos (glifos privados de las fuentes de Cargo) ------------------------------ */

.cg-icon {
	display: inline-block;
	width: .555em;
	height: 1em;
	vertical-align: -0.14em;
	overflow: visible;
}
.cg-arrow-right { display: inline-block; transform: rotate(90deg); }

/* ---- Texto ajustado al ancho ("fit text") ------------------------------------------ */

[uses~="fit-text"] { white-space: nowrap; }

/* ---- Quick view (zoom de imágenes) -------------------------------------------------- */

.quick-view-root {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s ease;
}
.quick-view-root.is-open { opacity: 1; }
.quick-view-root .quick-view-background { position: absolute; inset: 0; }
.quick-view-root .quick-view {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quick-view-root .quick-view img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-out;
}
.quick-view-root .qv-btn {
	position: absolute;
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(87, 87, 87, 0.35);
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.quick-view-root .qv-btn svg { display: block; width: 100%; height: 100%; }
.quick-view-root .qv-close { top: 20px; right: 20px; }
.quick-view-root .qv-prev { left: 20px; top: 50%; margin-top: -15px; }
.quick-view-root .qv-next { right: 20px; top: 50%; margin-top: -15px; }
.quick-view-root[data-count="1"] .qv-prev,
.quick-view-root[data-count="1"] .qv-next { display: none; }

/* ---- Formulario de contacto ---------------------------------------------------------- */

.contact-form-page { min-height: var(--viewport-height); }
.contact-form-page .page-layout { align-items: center; justify-content: center; padding: 2.7rem; }
.contact-form-page .page-content {
	max-width: 34rem;
	height: auto;
	border-radius: .7rem;
	background-color: rgba(255, 255, 255, .92);
	box-shadow: 0 .3rem .87rem -.5rem rgba(0, 0, 0, .25);
	--page-content-backdrop-filter: blur(3rem);
}
body.mobile .contact-form-page .page-layout { padding: 1rem; }
.contact-form { display: grid; gap: .75rem; width: 100%; max-width: 32rem; }
.contact-form label { display: grid; gap: .3rem; }
.contact-form input,
.contact-form textarea {
	font: inherit;
	color: inherit;
	width: 100%;
	padding: .55em .7em;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: .35rem;
	background: rgba(255, 255, 255, .6);
}
.contact-form textarea { min-height: 9em; resize: vertical; }
.contact-form button {
	font: inherit;
	justify-self: start;
	padding: .55em 1.2em;
	border: 0;
	border-radius: 10em;
	background: rgba(0, 0, 0, .85);
	color: #fff;
	cursor: pointer;
}
.contact-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .cf-status { min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
	media-item.scroll-animate .media-frame { animation: none !important; }
	gallery-slideshow .ss-track { transition: none !important; }
}