/* =========================================================================
   VuePod — setup.css
   Image-rich install guide (page-setup.php). Deep-sea glass aesthetic, real
   TSCloud app screenshots in phone frames. Loads only on the /setup/ page.
   Tokens come from vuepod.css (:root).
   ========================================================================= */

.vp-setup { position: relative; z-index: 1; }
.vp-setup .vp-section { padding-block: clamp( 56px, 8vw, 104px ); }
.vp-setup .vp-section__head { max-width: 64ch; margin-bottom: clamp( 28px, 4vw, 48px ); }
.vp-setup .vp-section__head .vp-lede { margin-top: 14px; }

/* Section rhythm: alternate faint tints + hairline separators. */
.vp-setup-app,
.vp-setup-using { background: rgba( 255, 255, 255, 0.018 ); }
.vp-setup-box,
.vp-setup-steps,
.vp-setup-tips,
.vp-setup-faq { border-top: 1px solid var( --vp-border-soft ); }

.vp-ic { width: 24px; height: 24px; flex: none; }

/* Shared glass card. */
.vp-setup-card {
	background: var( --vp-surface );
	border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius );
	box-shadow: var( --vp-shadow );
}

/* ---------- 1. Hero ---------- */
.vp-setup-hero { padding-top: clamp( 40px, 6vw, 76px ); }
.vp-setup-hero__grid {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp( 28px, 5vw, 64px );
	align-items: center;
}
.vp-setup-hero__title {
	font-family: var( --vp-font-display );
	font-size: clamp( 2.1rem, 5.2vw, 3.5rem );
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 14px 0 18px;
	color: #fff;
}
.vp-setup-hero__copy .vp-lede { max-width: 46ch; }

/* Two tidy rows of three chips; pills keep natural width, text never breaks
   mid-chip. Drops to two columns on narrow screens. */
.vp-setup-chips {
	/* Flex-wrap (not a fixed 3-col grid): the rigid "repeat(3, auto)" sized each
	   column to its widest no-wrap pill and could not shrink, so longer
	   translated labels (es/fr/de, e.g. "Garantía de 365 días" + "Wi-Fi de 2.4 y
	   5 GHz") pushed the row past the viewport at tablet widths. Flowing pills
	   wrap to as many rows as needed and can never overflow the container. */
	display: flex; flex-wrap: wrap; justify-content: start;
	gap: 10px; list-style: none; padding: 0; margin: 24px 0 20px;
}
.vp-setup-chips li {
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap; justify-self: start;
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 0.86rem;
	color: var( --vp-text-dim );
	background: var( --vp-surface-2 );
	border: 1px solid var( --vp-border-soft );
	border-radius: 999px; padding: 8px 14px 8px 11px;
}
.vp-setup-chips .vp-ic { width: 17px; height: 17px; color: var( --vp-sky ); }

.vp-setup-hero__help { color: var( --vp-text-mut ); font-size: 0.95rem; margin: 0; }
.vp-setup-hero__help a { color: var( --vp-sky ); }

.vp-setup-hero__media { position: relative; }
.vp-setup-hero__card {
	background: #fff;
	border-radius: var( --vp-radius-lg );
	padding: clamp( 18px, 3vw, 34px );
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	box-shadow: 0 30px 70px -28px rgba( 2, 6, 23, 0.9 );
}
.vp-setup-hero__card img { width: 100%; height: auto; border-radius: 10px; }
.vp-setup-hero__tag {
	position: absolute; left: 18px; bottom: -14px;
	font-family: var( --vp-font-display ); font-weight: 700; font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var( --vp-ink );
	background: linear-gradient( 180deg, var( --vp-sky ), var( --vp-sky-deep ) );
	padding: 7px 14px; border-radius: 999px;
	box-shadow: 0 12px 26px -10px rgba( 56, 189, 248, 0.6 );
}

/* ---------- 2. What's in the box ---------- */
.vp-setup-box__grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 16px; }
.vp-setup-tile {
	display: flex; align-items: center; gap: 14px;
	background: var( --vp-surface ); border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius-sm ); padding: 16px 18px;
	transition: transform 0.2s var( --vp-ease ), border-color 0.2s ease;
}
.vp-setup-tile:hover { transform: translateY( -2px ); border-color: var( --vp-border ); }
.vp-setup-tile__ic {
	display: grid; place-items: center; width: 46px; height: 46px; flex: none;
	border-radius: 12px; color: var( --vp-sky );
	background: rgba( 125, 211, 252, 0.1 );
	border: 1px solid rgba( 125, 211, 252, 0.22 );
}
.vp-setup-tile__ic .vp-ic { width: 24px; height: 24px; }
.vp-setup-tile__name { font-family: var( --vp-font-display ); font-weight: 600; color: var( --vp-text ); line-height: 1.2; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vp-setup-tile__qty { color: var( --vp-text-mut ); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

.vp-setup-note { color: var( --vp-text-mut ); font-size: 0.92rem; margin: 20px 0 0; }
.vp-setup-note a { color: var( --vp-sky ); }
.vp-setup-note--tip {
	margin-top: 26px; padding: 16px 18px;
	background: rgba( 125, 211, 252, 0.06 ); border: 1px solid rgba( 125, 211, 252, 0.18 );
	border-radius: var( --vp-radius-sm ); color: var( --vp-text-dim );
}

/* ---------- 3. Install in 5 steps ---------- */
.vp-setup-steps__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat( auto-fit, minmax( 196px, 1fr ) ); gap: 16px;
}
.vp-setup-step {
	position: relative;
	background: var( --vp-surface ); border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius ); padding: 26px 24px 24px;
	transition: transform 0.2s var( --vp-ease ), border-color 0.2s ease;
}
.vp-setup-step:hover { transform: translateY( -3px ); border-color: var( --vp-border ); }
.vp-setup-step__num {
	position: absolute; top: 18px; right: 20px;
	font-family: var( --vp-font-display ); font-weight: 800; font-size: 2.4rem;
	line-height: 1; color: rgba( 125, 211, 252, 0.16 );
}
.vp-setup-step__ic {
	display: grid; place-items: center; width: 50px; height: 50px;
	border-radius: 14px; color: var( --vp-sky );
	background: rgba( 125, 211, 252, 0.1 ); border: 1px solid rgba( 125, 211, 252, 0.22 );
	margin-bottom: 16px;
}
.vp-setup-step__ic .vp-ic { width: 26px; height: 26px; }
.vp-setup-step__title { font-family: var( --vp-font-display ); font-size: 1.18rem; color: #fff; margin: 0 0 8px; }
.vp-setup-step__body p { color: var( --vp-text-dim ); margin: 0; font-size: 0.98rem; }

/* ---------- 4. Connect with TSCloud ---------- */
.vp-setup-appstep {
	display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp( 22px, 4vw, 52px );
	align-items: center;
	padding: clamp( 24px, 4vw, 40px ) 0;
	border-bottom: 1px solid var( --vp-border-soft );
}
.vp-setup-appstep:first-of-type { padding-top: 0; }
.vp-setup-appstep__copy { align-self: start; }
.vp-setup-appstep__n {
	display: inline-grid; place-items: center; width: 38px; height: 38px;
	font-family: var( --vp-font-display ); font-weight: 700; font-size: 1.05rem;
	color: var( --vp-ink ); border-radius: 50%;
	background: linear-gradient( 180deg, var( --vp-sky ), var( --vp-sky-deep ) );
	margin-bottom: 16px;
}
.vp-setup-appstep__copy h3 { font-family: var( --vp-font-display ); font-size: clamp( 1.3rem, 2.4vw, 1.7rem ); color: #fff; margin: 0 0 12px; }
.vp-setup-appstep__copy p { color: var( --vp-text-dim ); margin: 0; }
.vp-setup-appstep__shots { display: flex; flex-wrap: wrap; gap: clamp( 12px, 2vw, 20px ); justify-content: flex-start; }

/* Phone frame. */
.vp-phone { margin: 0; width: 100%; max-width: 188px; }
.vp-phone img {
	width: 100%; height: auto; display: block; border-radius: 18px;
	padding: 7px; background: linear-gradient( 165deg, #0e1c3c, #07122b );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 22px 48px -22px rgba( 2, 6, 23, 0.95 ), inset 0 0 0 1px rgba( 255, 255, 255, 0.04 );
}
/* App-step screenshots vary in source height; normalise every frame to one
   uniform phone size (shorter shots centre with bezel-coloured bars, no crop). */
.vp-setup-appstep__shots .vp-phone img {
	aspect-ratio: 0.48;
	object-fit: contain;
	object-position: center;
}
.vp-phone figcaption {
	margin-top: 12px; text-align: center;
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 0.8rem;
	color: var( --vp-text-mut );
}

.vp-setup-live {
	display: grid; grid-template-columns: auto 1fr; gap: clamp( 24px, 5vw, 60px );
	align-items: center; margin-top: clamp( 32px, 5vw, 56px );
	padding: clamp( 26px, 4vw, 44px );
	background: linear-gradient( 180deg, rgba( 56, 189, 248, 0.08 ), rgba( 255, 255, 255, 0.02 ) );
	border: 1px solid rgba( 125, 211, 252, 0.2 ); border-radius: var( --vp-radius-lg );
}
.vp-phone--feature { max-width: 230px; }
.vp-setup-live__copy h3 { font-family: var( --vp-font-display ); font-size: clamp( 1.5rem, 3vw, 2.1rem ); color: #fff; margin: 12px 0 12px; }
.vp-setup-live__copy p { color: var( --vp-text-dim ); margin: 0; max-width: 48ch; }

/* ---------- 5. Tips ---------- */
.vp-setup-tips__grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: 16px; }
.vp-setup-tip { padding: 26px 24px; }
.vp-setup-tip__ic {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: 14px; color: var( --vp-sky );
	background: rgba( 125, 211, 252, 0.1 ); border: 1px solid rgba( 125, 211, 252, 0.22 );
	margin-bottom: 16px;
}
.vp-setup-tip__ic .vp-ic { width: 24px; height: 24px; }
.vp-setup-tip h3 { font-family: var( --vp-font-display ); font-size: 1.1rem; color: #fff; margin: 0 0 8px; }
.vp-setup-tip p { color: var( --vp-text-dim ); margin: 0; font-size: 0.96rem; }

/* ---------- 6. Using your VuePod ---------- */
.vp-setup-using__grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 270px, 1fr ) ); gap: 16px; }
.vp-setup-feat { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px; }
.vp-setup-feat__ic {
	display: grid; place-items: center; width: 46px; height: 46px; flex: none;
	border-radius: 12px; color: var( --vp-sky );
	background: rgba( 125, 211, 252, 0.1 ); border: 1px solid rgba( 125, 211, 252, 0.22 );
}
.vp-setup-feat__ic .vp-ic { width: 24px; height: 24px; }
.vp-setup-feat h3 { font-family: var( --vp-font-display ); font-size: 1.05rem; color: #fff; margin: 2px 0 6px; }
.vp-setup-feat p { color: var( --vp-text-dim ); margin: 0; font-size: 0.94rem; }

/* ---------- 7. FAQ ---------- */
.vp-setup-faq__list { max-width: 840px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.vp-setup-qa {
	background: var( --vp-surface ); border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius-sm ); overflow: hidden;
}
.vp-setup-qa summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 20px; cursor: pointer; list-style: none;
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 1.02rem; color: #fff;
}
.vp-setup-qa summary::-webkit-details-marker { display: none; }
.vp-setup-qa__plus { position: relative; width: 16px; height: 16px; flex: none; }
.vp-setup-qa__plus::before,
.vp-setup-qa__plus::after {
	content: ''; position: absolute; inset: 0; margin: auto;
	background: var( --vp-sky ); border-radius: 2px;
}
.vp-setup-qa__plus::before { width: 16px; height: 2px; }
.vp-setup-qa__plus::after { width: 2px; height: 16px; transition: transform 0.25s var( --vp-ease ); }
.vp-setup-qa[open] .vp-setup-qa__plus::after { transform: scaleY( 0 ); }
.vp-setup-qa__a { padding: 0 20px 20px; }
.vp-setup-qa__a p { color: var( --vp-text-dim ); margin: 0; }
.vp-setup-qa__a a { color: var( --vp-sky ); }

/* ---------- 8. Need help ---------- */
.vp-setup-help__card { text-align: center; max-width: 720px; margin-inline: auto; padding: clamp( 30px, 5vw, 54px ); }
.vp-setup-help__ic {
	display: inline-grid; place-items: center; width: 56px; height: 56px;
	border-radius: 16px; color: var( --vp-sky );
	background: rgba( 125, 211, 252, 0.1 ); border: 1px solid rgba( 125, 211, 252, 0.22 );
	margin-bottom: 18px;
}
.vp-setup-help__ic .vp-ic { width: 28px; height: 28px; }
.vp-setup-help__card h2 { font-family: var( --vp-font-display ); font-size: clamp( 1.6rem, 3vw, 2.2rem ); color: #fff; margin: 0 0 12px; }
.vp-setup-help__card p { color: var( --vp-text-dim ); margin: 0 auto; max-width: 52ch; }
.vp-setup-help__card a { color: var( --vp-sky ); }
.vp-setup-help__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.vp-setup-help__links .vp-btn { color: var( --vp-text ); }

/* ---------- Get the app (download QR) ---------- */
.vp-getapp__grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.vp-getapp__card {
	display: flex; align-items: center; gap: 18px;
	padding: 18px; min-width: 260px;
	border: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
	border-radius: 18px; background: var( --vp-surface, rgba( 255, 255, 255, 0.035 ) );
}
.vp-getapp__qr {
	flex: 0 0 104px; width: 104px; height: 104px;
	border-radius: 12px; overflow: hidden;
	background: rgba( 255, 255, 255, 0.96 );
	display: flex; align-items: center; justify-content: center;
}
.vp-getapp__qr img { width: 100%; height: 100%; object-fit: contain; }
.vp-getapp__qr-ph {
	width: 84px; height: 84px; padding: 10px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	border: 2px dashed rgba( 10, 22, 40, 0.28 ); border-radius: 8px;
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 0.76rem;
	line-height: 1.25; color: #5a6b86;
}
.vp-getapp__meta { display: flex; flex-direction: column; gap: 4px; }
.vp-getapp__store { font-family: var( --vp-font-display ); font-weight: 700; font-size: 1.15rem; color: #fff; }
.vp-getapp__sub { color: var( --vp-text-dim ); font-size: 0.9rem; }
.vp-getapp__btn { margin-top: 10px; align-self: flex-start; }

/* ---------- Responsive ---------- */
@media ( max-width: 860px ) {
	.vp-setup-hero__grid { grid-template-columns: 1fr; }
	.vp-setup-hero__media { order: -1; max-width: 460px; }
	.vp-setup-appstep { grid-template-columns: 1fr; gap: 20px; }
	.vp-setup-live { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.vp-setup-live__copy p { margin-inline: auto; }
	/* Drop to two columns so each box tile is wide enough for the icon + the
	   item name on one row. At three columns the name column was starved
	   (~65px), which made CJK / long German names wrap one character per line. */
	.vp-setup-box__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.vp-setup-tile { min-width: 0; }
}
@media ( max-width: 560px ) {
	/* One column on phones: the fixed icon (46px) + no-wrap qty + padding leave a
	   two-up tile only ~65px for the name, which stacks CJK text vertically. Full
	   width lets the name sit on one line in every language. minmax/1fr also avoids
	   the min-content floor that used to push the grid past the viewport. */
	.vp-setup-box__grid { grid-template-columns: 1fr; }
	.vp-phone { max-width: 152px; }
	.vp-setup-appstep__shots { gap: 12px; }
	.vp-getapp__card { width: 100%; }
}