:root {
	--cap-bg: #0a0a0a;
	--cap-bg-alt: #121212;
	--cap-card: rgba(255, 255, 255, 0.06);
	--cap-border: rgba(255, 255, 255, 0.1);
	--cap-text: #d1d5db;
	--cap-white: #ffffff;
	--cap-pink: #ff008c;
	--cap-purple: #6d28ff;
	--cap-gradient: linear-gradient(90deg, #ff008c, #6d28ff);
	--cap-radius: 16px;
	--cap-max: 1200px;
}

* { box-sizing: border-box; }

body {
	background: var(--cap-bg);
	color: var(--cap-text);
	font-family: 'Inter', Arial, sans-serif;
	margin: 0;
	line-height: 1.6;
}

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

/* Native <select> dropdowns inherit the page's light text color, but the
   OS-rendered option list keeps its own (often light) background — without
   explicit styling here, unselected options are effectively invisible until
   hovered/highlighted. Force a dark background + white text everywhere. */
select {
	background: var(--cap-bg-alt);
	color: #ffffff;
	border: 1px solid var(--cap-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
}
select option {
	background: var(--cap-bg-alt);
	color: #ffffff;
}
/* WooCommerce's own .variations select rule uses the `background` shorthand
   (for its dropdown-arrow icon), which resets background-color to transparent
   at equal specificity — override with !important so the dark fill sticks. */
.variations select,
table.variations select {
	background-color: var(--cap-bg-alt) !important;
	color: #ffffff !important;
	border: 1px solid var(--cap-border) !important;
}

a { color: var(--cap-pink); text-decoration: none; }
a:hover { color: var(--cap-purple); }

h1, h2, h3, h4, h5, h6 {
	color: var(--cap-white);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 20px;
}

.cap-container {
	max-width: var(--cap-max);
	width: 92%;
	margin: 0 auto;
}

.cap-gradient-text {
	position: relative;
	display: inline-block;
	background: linear-gradient(90deg, #ff008c, #6d28ff, #ff008c);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: cap-gradient-move 5s ease-in-out infinite;
}
.cap-gradient-text::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%);
	background-size: 300% 100%;
	background-position: -120% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: cap-shine-sweep 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes cap-gradient-move {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes cap-shine-sweep {
	0% { background-position: -120% 0; }
	45%, 100% { background-position: 220% 0; }
}

/* Real CAP logo image inside the hero heading, sitting next to the
   animated "SPORTSWEAR" text, with its own light sweep overlay so it
   gets the same "spark" treatment as the text next to it. */
.cap-hero-logo-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
}
.cap-hero-logo-img {
	height: clamp(90px, 13vw, 170px);
	width: auto;
	display: block;
	filter:
		drop-shadow(0 0 2px rgba(210, 205, 215, 0.55))
		drop-shadow(0 0 5px rgba(180, 175, 195, 0.3));
}
/* The shine sweep is masked with the logo's own artwork, so the light
   only travels across the actual icon/letters — never a rectangle
   over the transparent gaps between them. */
.cap-hero-logo-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
	background-size: 260% 100%;
	background-position: -100% 0;
	-webkit-mask-image: url('../images/logo-horizontal.webp');
	mask-image: url('../images/logo-horizontal.webp');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mix-blend-mode: screen;
	animation: cap-logo-shine-sweep 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes cap-logo-shine-sweep {
	0% { background-position: -100% 0; }
	45%, 100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cap-hero-logo-shine { display: none; }
}

/* Hero content fades/slides up on load, staggered per element via
   --cap-in-delay, so the first thing a visitor sees feels alive
   instead of a static wall of text. */
.cap-hero-in {
	opacity: 0;
	transform: translateY(22px);
	animation: cap-fade-up .7s ease forwards;
	animation-delay: var(--cap-in-delay, 0s);
}
@keyframes cap-fade-up {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-gradient-text, .cap-gradient-text::before, .cap-hero-in {
		animation: none;
	}
	.cap-hero-in { opacity: 1; transform: none; }
}

.cap-btn {
	display: inline-block;
	padding: 16px 36px;
	background: var(--cap-gradient);
	color: #fff;
	border-radius: 12px;
	font-weight: 800;
	font-size: 16px;
	border: none;
	cursor: pointer;
	transition: transform .2s ease;
}
.cap-btn {
	box-shadow: 0 0 18px rgba(255, 0, 140, 0.35), 0 0 36px rgba(109, 40, 255, 0.2);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cap-btn:hover { transform: scale(1.04); color: #fff; box-shadow: 0 0 26px rgba(255, 0, 140, 0.55), 0 0 48px rgba(109, 40, 255, 0.35); }

.cap-btn-outline {
	display: inline-block;
	padding: 15px 34px;
	background: transparent;
	color: var(--cap-white);
	border: 1px solid rgba(255, 0, 140, 0.45);
	border-radius: 12px;
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 0 18px rgba(255, 0, 140, 0.18);
	transition: border-color .25s ease, box-shadow .25s ease;
}
.cap-btn-outline:hover {
	border-color: var(--cap-pink);
	color: var(--cap-white);
	box-shadow: 0 0 26px rgba(255, 0, 140, 0.4);
}

/* Header */
.cap-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cap-border);
}
.cap-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	gap: 20px;
}
.cap-logo img,
.cap-footer .cap-footer-logo {
	height: 48px;
	width: auto;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.25)) brightness(1.15);
}
.cap-logo img { height: 44px; }
.cap-nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.cap-nav a {
	position: relative;
	color: var(--cap-white);
	font-weight: 600;
	font-size: 15px;
	transition: color .2s ease;
	padding-bottom: 4px;
}
.cap-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--cap-gradient);
	transition: width .25s ease;
}
.cap-nav a:hover { color: var(--cap-pink); }
.cap-nav a:hover::after { width: 100%; }

/* "Uniform Builder" nav entry — new/experimental, so it gets a pill
   badge with a slow pulse to draw the eye while we test whether it's
   worth keeping; easy to strip back to a plain link later either way. */
.cap-nav li.cap-nav-highlight > a {
	background: var(--cap-gradient);
	color: #fff;
	padding: 8px 16px;
	border-radius: 50px;
	animation: cap-nav-highlight-pulse 2.6s ease-in-out infinite;
}
.cap-nav li.cap-nav-highlight > a::after { display: none; }
.cap-nav li.cap-nav-highlight > a:hover { color: #fff; }
@keyframes cap-nav-highlight-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 140, 0.5); }
	50% { box-shadow: 0 0 14px 4px rgba(255, 0, 140, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-nav li.cap-nav-highlight > a { animation: none; }
}

/* AWARDS nav item — pill DORADO de trofeo. Resalta como línea nueva de
   premiaciones y se distingue del rosa (Uniform Builder) y el morado
   (CAPXXI). Mismo patrón de píldora + pulso que cap-nav-highlight. */
.cap-nav li.cap-nav-awards > a {
	background: linear-gradient(100deg, #a9791a 0%, #ffd76a 45%, #f0a500 100%);
	color: #2a1c00;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 50px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
	animation: cap-nav-awards-pulse 2.6s ease-in-out infinite;
}
.cap-nav li.cap-nav-awards > a::after { display: none; }
.cap-nav li.cap-nav-awards > a:hover { color: #2a1c00; filter: brightness(1.08); }
@keyframes cap-nav-awards-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(240, 190, 40, 0.55); }
	50% { box-shadow: 0 0 15px 4px rgba(240, 190, 40, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-nav li.cap-nav-awards > a { animation: none; }
}

/* ============================================================
   CAP ORIGINALS (hub /product-category/blank-apparel/):
   los cuadros de subcategoría como TARJETAS BLANCAS limpias.
   Las fotos S&S vienen en blanco → sobre tarjeta blanca la
   prenda "flota" sin el bloque blanco-sobre-negro. Etiqueta
   oscura + conteo en rosa de marca + hover con elevación.
   Acotado a body.term-blank-apparel (no afecta otras cats).
   ============================================================ */
body.term-blank-apparel ul.products li.product-category {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
	transition: transform .2s ease, box-shadow .2s ease;
}
body.term-blank-apparel ul.products li.product-category:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(255, 0, 140, .30);
}
body.term-blank-apparel ul.products li.product-category > a { display: block; }
body.term-blank-apparel ul.products li.product-category img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	background: #fff;
	border-radius: 0;
	margin: 0;
	display: block;
}
body.term-blank-apparel ul.products li.product-category .woocommerce-loop-category__title {
	color: #17171a;
	background: #fff;
	margin: 0;
	padding: 12px 10px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}
body.term-blank-apparel ul.products li.product-category .woocommerce-loop-category__title .count {
	color: #ff008c;
	background: transparent;
	font-weight: 700;
}

/* ===== CAP ORIGINALS — banner de cabecera (hero) =====
   La imagen se muestra completa (width:100%); el título se superpone a la
   izquierda, sobre el espacio negro del arte. El H1 plano del tema se oculta. */
body.term-blank-apparel .page-title,
body.term-champro-gear .page-title,
body.term-custom-uniforms .page-title,
body.term-dtf .page-title,
body.term-uv-dtf .page-title,
body.term-stickers-decals .page-title,
body.term-signage-banners .page-title,
body.term-promotional-items .page-title { display: none; }
.cap-orig-hero {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	margin: 2px 0 28px;
	background: #0e0e12;
}
.cap-orig-hero-img { display: block; width: 100%; height: auto; }
.cap-orig-hero-inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 50%;
	padding: 0 clamp(20px, 4vw, 56px);
}
.cap-orig-hero-title {
	font-size: clamp(28px, 5.2vw, 58px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 clamp(6px, 1.2vw, 14px);
	line-height: 1.04;
	letter-spacing: .5px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.cap-orig-hero-sub {
	color: rgba(255, 255, 255, .9);
	font-size: clamp(12px, 1.7vw, 19px);
	line-height: 1.5;
	margin: 0;
	max-width: 26ch;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
@media (max-width: 480px) {
	.cap-orig-hero-sub { display: none; }
	.cap-orig-hero-inner { max-width: 60%; }
}

/* Dropdown submenus (e.g. Shop → category pages).
   El indicador se dibuja con ::before + flex order:2 porque ::after ya lo
   ocupa la barrita de hover — con order:2 el símbolo queda visualmente
   DESPUÉS del texto ("Shop ▾") aunque sea ::before. */
.cap-nav li.menu-item-has-children { position: relative; }
.cap-nav li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
}
.cap-nav li.menu-item-has-children > a::before {
	content: '▾';
	order: 2;
	margin-left: 6px;
	font-size: 10px;
	opacity: .7;
}
.cap-nav .sub-menu {
	display: none;
	position: absolute;
	/* No margin-top gap here on purpose: a gap between the trigger link and
	   the panel falls outside both elements' hoverable box, so the mouse
	   "leaves" while crossing it and :hover drops before a click can land.
	   The visual breathing room comes from padding-top instead, which is
	   still part of the sub-menu's own (continuously hoverable) box. */
	top: 100%;
	left: 0;
	min-width: 230px;
	flex-direction: column;
	gap: 0;
	/* Vidrio esmerilado: se separa del fondo del home (que usa los mismos
	   grises) desenfocando lo que queda detrás, con acento rosa sutil. */
	background: rgba(12, 12, 16, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 0, 140, 0.28);
	border-radius: 12px;
	padding: 14px 10px 10px;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 0, 140, 0.08);
	z-index: 200;
}
.cap-nav li.menu-item-has-children:hover > .sub-menu,
.cap-nav li.menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}
.cap-nav .sub-menu li { width: 100%; }
.cap-nav .sub-menu a {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.35;
}
.cap-nav .sub-menu a::after { display: none; }
.cap-nav .sub-menu a:hover { background: var(--cap-card); }
/* Ítems del panel que abren flyout: la flecha '›' va empujada al borde
   derecho (margin-left:auto) para que todos los textos queden alineados. */
.cap-nav .sub-menu li.menu-item-has-children > a::before {
	content: '›';
	order: 2;
	margin-left: auto;
	padding-left: 14px;
	font-size: 15px;
	opacity: .7;
}
/* A second-level flyout (e.g. Custom Uniforms' sports) opens to the
   right of its parent row instead of stacking below; el pequeño solape
   de 4px evita huecos que rompan el :hover continuo. */
.cap-nav .sub-menu .sub-menu {
	top: -6px;
	left: calc(100% - 4px);
	padding: 10px;
}
@media (max-width: 782px) {
	/* Móvil = acordeón: los submenús arrancan cerrados y cada rama se
	   despliega al tocar su padre (clase cap-open desde main.js). El panel
	   completo hace scroll si el árbol abierto no cabe. */
	.cap-nav.is-open {
		max-height: calc(100vh - 64px);
		overflow-y: auto;
	}
	.cap-nav .sub-menu {
		display: none;
		position: static;
		min-width: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: none;
		border-left: 2px solid rgba(255, 0, 140, 0.35);
		border-radius: 0;
		box-shadow: none;
		margin: 2px 0 2px 8px;
		padding: 0 0 0 8px;
	}
	.cap-nav .sub-menu a {
		padding: 5px 10px;
		font-size: 13px;
		line-height: 1.3;
	}
	/* el gap de 16px del menú abierto es solo para el nivel superior;
	   las ramas anidadas van compactas */
	.cap-nav.is-open .sub-menu { gap: 2px; }
	.cap-nav li.cap-open > .sub-menu { display: flex; }
	.cap-nav li.menu-item-has-children > a::before { transition: transform .2s ease; }
	.cap-nav li.cap-open > a::before { transform: rotate(180deg); }
	.cap-nav .sub-menu li.cap-open > a::before { transform: rotate(90deg); }
}
.cap-header-actions { display: flex; align-items: center; gap: 18px; }
.cap-cart-link { position: relative; color: var(--cap-white); font-size: 20px; }
.cap-cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
	background: var(--cap-gradient);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 50px;
	padding: 2px 6px;
}
.cap-menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--cap-border);
	color: var(--cap-white);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 18px;
}

/* Hero */
.cap-promo-banner { width: 100%; line-height: 0; background: #0a0a0e; }
.cap-promo-banner img { display: block; width: 100%; height: auto; max-width: 1659px; margin: 0 auto; }
.cap-hero {
	position: relative;
	padding: 90px 0 60px;
	text-align: center;
	background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.85)), var(--hero-bg-image, none);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* ============================================================
   HOME hero ÉPICO (.cap-hero.cap-hero-epic): imagen de acción a pantalla
   completa (atletas + productos), texto a la IZQUIERDA sobre un
   velo oscuro, con zoom lento + glow neón pulsante. Mantiene el
   ribbon, badge, logo, botones y perks (solo se realinean).
   ============================================================ */
.cap-hero.cap-hero-epic{text-align:left;padding:clamp(40px,5.5vw,80px) 0 0;min-height:min(56.25vw,860px);display:flex;align-items:flex-start;background:#07070c}
/* contain = imagen COMPLETA visible (nada recortado); alto atado al ancho (16:9) para no dejar franjas. */
.cap-hero.cap-hero-epic::before{content:'';position:absolute;inset:0;z-index:0;background:var(--hero-bg-image) no-repeat;background-size:contain;background-position:center}
.cap-hero.cap-hero-epic::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,12,.9) 0%,rgba(6,6,12,.56) 27%,rgba(6,6,12,.10) 50%,transparent 68%),radial-gradient(52% 62% at 70% 45%,rgba(255,0,140,.14),transparent 60%),linear-gradient(rgba(7,7,12,.08),rgba(7,7,12,.08));animation:cap-hero-eglow 6s ease-in-out infinite}
@keyframes cap-hero-eglow{0%,100%{opacity:.9}50%{opacity:1}}
.cap-hero.cap-hero-epic .cap-container{position:relative;z-index:2;align-items:flex-start;text-align:left;max-width:1200px}
.cap-hero.cap-hero-epic .cap-corner-ribbon-wrap{z-index:3}
.cap-hero.cap-hero-epic .badge,.cap-hero.cap-hero-epic .subheading,.cap-hero.cap-hero-epic p.lead{text-align:left}
.cap-hero.cap-hero-epic p.lead{max-width:34ch;margin-left:0;margin-right:0;font-size:clamp(17px,2.1vw,23px);line-height:1.55;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.78)}
.cap-hero.cap-hero-epic .subheading{max-width:40ch;font-size:clamp(13px,1.6vw,18px);text-shadow:0 1px 10px rgba(0,0,0,.72)}
.cap-hero.cap-hero-epic .cap-hero-logo-img{width:clamp(240px,34vw,400px);height:auto}
.cap-hero.cap-hero-epic .cap-hero-actions{justify-content:flex-start}
.cap-hero.cap-hero-epic .cap-hero-perks{justify-content:flex-start}
.cap-hero.cap-hero-epic h1.cap-hero-logo-heading{margin-left:0}
@media(max-width:820px){
	.cap-hero.cap-hero-epic{min-height:auto;padding:70px 0 54px}
	.cap-hero.cap-hero-epic .cap-container{align-items:center;text-align:center}
	.cap-hero.cap-hero-epic::before{background-size:cover;background-position:64% center}
	.cap-hero.cap-hero-epic::after{background:linear-gradient(180deg,rgba(6,6,12,.74) 0%,rgba(6,6,12,.5) 42%,rgba(6,6,12,.9) 100%)}
	.cap-hero.cap-hero-epic .cap-hero-actions,.cap-hero.cap-hero-epic .cap-hero-perks{justify-content:center}
	.cap-hero.cap-hero-epic p.lead,.cap-hero.cap-hero-epic .subheading{max-width:none;text-align:center}
	.cap-hero.cap-hero-epic .badge,.cap-hero.cap-hero-epic .subheading{text-align:center}
}
@media(prefers-reduced-motion:reduce){.cap-hero.cap-hero-epic::before,.cap-hero.cap-hero-epic::after{animation:none}}
/* Force the hero's badge/heading/tagline/buttons onto their own rows.
   They're individually display:inline-block (so their borders hug their
   own content width), but as plain inline-level siblings that can let
   the browser park two of them on the same line whenever there's enough
   horizontal room — which is exactly what happened on wider screens. */
.cap-hero .cap-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cap-hero .badge {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 50px;
	background: var(--cap-card);
	border: 1px solid rgba(255, 0, 140, 0.45);
	box-shadow: 0 0 18px rgba(255, 0, 140, 0.18);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	margin-bottom: 26px;
}
/* "Full Shop — Coming Soon" badge replacing the old category carousel —
   bigger and gradient-filled (vs. the plain hero badge) since this is
   the section actively steering visitors toward the quote flow while
   the shop itself isn't fully open yet. */
.cap-coming-soon-badge {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 50px;
	background: var(--cap-gradient);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .04em;
	margin-bottom: 22px;
	animation: cap-nav-highlight-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.cap-coming-soon-badge { animation: none; }
}
/* Diagonal "Coming Soon" corner ribbon over the hero — swapped in for
   the earlier full-width bar, which read as flat. This is the same
   corner-badge convention shoppers already know from "Sale"/"New"
   tags on product photos, so it reads as an attention-grabbing shop
   badge rather than a disclaimer, and doubles as a quote-funnel entry
   point (it's a real link, not decoration). Relies on .cap-hero's own
   position:relative + overflow:hidden to clip it to the corner. */
.cap-corner-ribbon-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	height: 190px;
	overflow: hidden;
	z-index: 6;
}
.cap-corner-ribbon {
	position: absolute;
	top: 30px;
	left: -58px;
	width: 240px;
	display: block;
	overflow: hidden;
	text-align: center;
	padding: 9px 0 8px;
	background: var(--cap-gradient);
	color: #fff;
	font-weight: 800;
	letter-spacing: .03em;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	transform: rotate(-45deg);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cap-corner-ribbon::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: -120% 0;
	animation: cap-shine-sweep 4s ease-in-out infinite;
}
.cap-corner-ribbon:hover {
	transform: rotate(-45deg) scale(1.06);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.cap-corner-ribbon-icon {
	display: block;
	font-size: 20px;
	line-height: 1;
	margin-bottom: 2px;
}
.cap-corner-ribbon-text {
	display: block;
	font-size: 12.5px;
	line-height: 1.2;
}
@media (max-width: 640px) {
	.cap-corner-ribbon-wrap { width: 140px; height: 140px; }
	.cap-corner-ribbon { top: 22px; left: -50px; width: 190px; padding: 6px 0 5px; }
	.cap-corner-ribbon-icon { font-size: 16px; }
	.cap-corner-ribbon-text { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.cap-corner-ribbon::before { animation: none; }
}
.cap-hero h1 {
	display: inline-block;
	font-size: clamp(38px, 6vw, 68px);
	margin-bottom: 18px;
	padding: 12px 34px;
	border: 2px solid rgba(255, 0, 140, 0.45);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	opacity: 0;
	transform: translateY(22px);
	animation-name: cap-fade-up, cap-hero-glow-pulse;
	animation-duration: .7s, 3.2s;
	animation-timing-function: ease, ease-in-out;
	animation-delay: var(--cap-in-delay, .12s), 1s;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards, none;
}
@media (max-width: 480px) {
	.cap-hero h1 { padding: 10px 20px; border-radius: 14px; }
}
/* The hero heading is now the real logo image rather than a boxed
   wordmark, so it doesn't need the nameplate border/background/padding
   that the text version used — just let the image itself be the focus. */
.cap-hero h1.cap-hero-logo-heading {
	padding: 0;
	border: none;
	background: none;
	margin-bottom: 22px;
}
@keyframes cap-hero-glow-pulse {
	0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 0, 140, 0.3)); }
	50% { filter: drop-shadow(0 0 32px rgba(255, 0, 140, 0.55)); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-hero h1 { animation: none; opacity: 1; transform: none; }
}
.cap-hero .subheading {
	color: var(--cap-pink);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .03em;
	margin: 0 0 14px;
}
.cap-hero p.lead {
	font-size: 19px;
	color: var(--cap-text);
	max-width: 700px;
	margin: 0 auto 36px;
}
.cap-hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* Trust badges */
.cap-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	padding: 24px 0 40px;
}
.cap-trust span {
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: #fff;
	padding: 12px 20px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 14px;
}

/* Section */
.cap-section { padding: 80px 0; }
.cap-section-tight { padding: 48px 0; }
.cap-section-alt { background: var(--cap-bg-alt); }
.cap-section-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.cap-section-head p { color: var(--cap-text); font-size: 17px; }

/* Key sections get a faint corner-to-corner ambient tint (instead of a
   flat dead background) plus a small gradient accent bar and a subtle
   dot-grid texture under the heading — quiet enough not to fight the
   product/content below it. */
.cap-section-glow { position: relative; overflow: hidden; }
/* A dedicated background layer (not the section itself) carries the
   texture + fade mask, so the mask never touches real content — on
   mobile these sections stack tall and a mask on the section itself
   would fade actual cards/content to invisible past a fixed height. */
.cap-section-bg {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, black, black 260px, transparent 460px);
	mask-image: linear-gradient(to bottom, black, black 260px, transparent 460px);
	pointer-events: none;
	z-index: 0;
}
.cap-section-glow::before,
.cap-section-glow::after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
}
.cap-section-glow::before {
	top: -160px;
	left: -100px;
	background: radial-gradient(circle, rgba(255, 0, 140, 0.35), transparent 72%);
}
.cap-section-glow::after {
	top: -160px;
	right: -100px;
	background: radial-gradient(circle, rgba(109, 40, 255, 0.35), transparent 72%);
}
.cap-section-glow > .cap-container { position: relative; z-index: 1; }
.cap-section-glow .cap-section-head h2 {
	color: var(--cap-pink);
	text-shadow: 0 0 10px rgba(255, 0, 140, 0.75), 0 0 22px rgba(255, 0, 140, 0.4);
}
.cap-section-glow .cap-section-head h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 2px;
	background: var(--cap-gradient);
	box-shadow: 0 0 10px rgba(255, 0, 140, 0.6);
}
@media (max-width: 700px) {
	.cap-section-glow::before { width: 90vw; height: 260px; }
}

/* Shop category filter pills */
.cap-filter-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 30px;
}
.cap-filter-pill {
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: var(--cap-text);
	padding: 9px 20px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cap-filter-pill.is-active,
.cap-filter-pill:hover {
	background: var(--cap-gradient);
	color: #fff;
	border-color: transparent;
}
ul.products li.product.cap-is-hidden { display: none !important; }

/* Homepage shop-by-category carousel */
.cap-carousel-wrap { position: relative; }
.cap-shop-carousel { display: none; text-align: center; }
.cap-shop-carousel.is-active { display: block; }
.cap-shop-carousel ul.products.cap-carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 20px;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 16px;
	margin: 0 0 10px;
	text-align: left;
	scrollbar-width: none;
}
.cap-shop-carousel ul.products.cap-carousel-track::-webkit-scrollbar { display: none; }
.cap-shop-carousel ul.products.cap-carousel-track li.product {
	flex: 0 0 240px;
	max-width: 240px;
	scroll-snap-align: start;
}
.cap-carousel-empty { color: var(--cap-text); padding: 40px 0; }

/* "Our Work" photo carousel — same scroll/autoplay behavior as the shop
   carousel above, just plain photo cards instead of product cards. */
.cap-photo-track.cap-carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 20px;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 16px;
	margin: 0;
	scrollbar-width: none;
}
.cap-photo-track.cap-carousel-track::-webkit-scrollbar { display: none; }
.cap-photo-card {
	flex: 0 0 240px;
	max-width: 240px;
	scroll-snap-align: start;
}
.cap-photo-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--cap-radius);
	border: 1px solid var(--cap-border);
	transition: transform .3s ease, border-color .3s ease;
}
.cap-photo-card img:hover {
	transform: scale(1.03);
	border-color: var(--cap-pink);
}

.cap-no-products-found {
	text-align: center;
	color: var(--cap-text);
	padding: 50px 20px;
	font-size: 16px;
}
.cap-no-products-found a { color: var(--cap-pink); font-weight: 700; }
.cap-carousel-viewall { display: inline-block; margin-top: 4px; }
.cap-carousel-arrow {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	transition: background .2s ease, border-color .2s ease;
}
.cap-carousel-arrow:hover { background: var(--cap-gradient); border-color: transparent; }
.cap-carousel-arrow.prev { left: -8px; }
.cap-carousel-arrow.next { right: -8px; }
@media (max-width: 700px) {
	.cap-carousel-arrow { display: none; }
}

/* Services grid */
.cap-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 x 2 balanceado (no deja huecos) */
	gap: 30px;
}
@media (max-width: 860px) { .cap-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cap-services-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.cap-service-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 36px 26px;
	min-height: 220px;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cap-service-card:hover {
	border-color: var(--cap-pink);
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 12px 30px rgba(255, 0, 140, 0.25);
}
.cap-service-card .icon { font-size: 34px; margin-bottom: 16px; }
.cap-service-card { overflow: hidden; }
/* Foto fotorealista arriba de la tarjeta, borde a borde, esquinas superiores redondeadas. */
.cap-service-card .cap-service-img {
	display: block;
	width: calc(100% + 52px);
	margin: -36px -26px 18px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-top-left-radius: var(--cap-radius);
	border-top-right-radius: var(--cap-radius);
}
.cap-service-card h3 { font-size: 19px; margin-bottom: 8px; transition: color .25s ease, text-shadow .25s ease; }
.cap-service-card p { margin: 0; font-size: 14.5px; }
.cap-service-card:hover h3 {
	color: var(--cap-pink);
	text-shadow: 0 0 10px rgba(255, 0, 140, 0.75), 0 0 22px rgba(255, 0, 140, 0.4);
}

/* Our Work masonry gallery */
.cap-work-grid {
	columns: 4 220px;
	column-gap: 20px;
}
.cap-work-item {
	position: relative;
	break-inside: avoid;
	margin-bottom: 20px;
	border-radius: var(--cap-radius);
	overflow: hidden;
	cursor: pointer;
}
.cap-work-item img {
	width: 100%;
	display: block;
	transition: transform .4s ease;
}
.cap-work-item:hover img { transform: scale(1.08); }
.cap-work-item .cap-work-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(10,10,10,0) 40%, rgba(10,10,10,.9));
	display: flex;
	align-items: flex-end;
	padding: 18px;
	opacity: 0;
	transition: opacity .3s ease;
}
.cap-work-item:hover .cap-work-overlay { opacity: 1; }
.cap-work-overlay span { color: #fff; font-weight: 700; font-size: 15px; }
@media (max-width: 782px) {
	.cap-work-grid { columns: 2 160px; }
}

/* Products grid (WooCommerce) */
ul.products {
	display: grid !important;
	/* minmax(260px) + 26px gaps settles on exactly 4 columns within the
	   1200px container — capping at 4 per row without forcing a fixed
	   column count, so an incomplete row (last row, or a filtered view
	   with fewer matches) collapses its unused tracks instead of leaving
	   visible empty grid cells. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
	gap: 26px;
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}
/* WooCommerce's own stylesheet still applies a `content`+`display:table`
   clearfix (left over from the old float-based grid) to ul.products. Since
   the container is now display:grid, those ::before/::after pseudo-elements
   become real grid items — an invisible first cell that shoves every actual
   product card over by one column. They're not needed for a grid layout. */
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}
ul.products li.product {
	position: relative;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: 320px;
	justify-self: center;
	float: none !important;
	margin: 0 !important;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 20px;
	text-align: center;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
ul.products li.product:hover {
	transform: translateY(-6px) scale(1.02);
	border-color: var(--cap-pink);
	box-shadow: 0 16px 32px rgba(255, 0, 140, 0.2);
}
ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; }
/* Real product photos are shot on light studio backdrops, which clash
   hard against this dark theme's card interior. Mounting each photo on
   a light "mat" (like a physical print mount) makes that light backdrop
   read as deliberate instead of a stray white box floating in black. */
ul.products li.product img {
	width: calc(100% - 16px);
	min-height: 284px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin: 8px auto 16px;
	background: #f2f2f0;
	box-shadow: 0 0 0 8px #f2f2f0;
}
ul.products li.product .woocommerce-loop-product__title {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	margin: 10px 0 6px;
}
.cap-product-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--cap-gradient);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 50px;
}
ul.products li.product .price {
	color: var(--cap-pink);
	font-weight: 800;
	font-size: 16px;
	margin-top: auto;
	padding-top: 10px;
}
ul.products li.product .button {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 22px;
	background: var(--cap-gradient);
	color: #fff !important;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
}
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; background: transparent; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: #fff;
	background: var(--cap-card);
	border-radius: 8px;
	margin: 2px;
}
.woocommerce .star-rating { color: var(--cap-pink); }

/* Single product / cart / checkout base fixes for dark theme */
.woocommerce, .woocommerce-page {
	color: var(--cap-text);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce table.shop_table,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select,
.woocommerce #order_review, .woocommerce-checkout .woocommerce-additional-fields {
	background: var(--cap-bg-alt);
	border-color: var(--cap-border) !important;
	color: var(--cap-text);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--cap-border); color: var(--cap-text); }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select {
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: #fff;
	border-radius: 8px;
	padding: 10px 12px;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--cap-gradient) !important;
	color: #fff !important;
	border-radius: 10px !important;
	border: none !important;
	font-weight: 700 !important;
}
.woocommerce span.onsale {
	background: var(--cap-gradient) !important;
}

/* Stats / trust numbers section */
.cap-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	text-align: center;
}
.cap-stat-card {
	background: var(--cap-card);
	border: 1px solid rgba(255, 0, 140, 0.35);
	border-radius: var(--cap-radius);
	padding: 32px 20px;
	box-shadow: 0 0 22px rgba(255, 0, 140, 0.12);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cap-stat-card:hover {
	border-color: var(--cap-pink);
	box-shadow: 0 0 28px rgba(255, 0, 140, 0.3);
	transform: translateY(-4px);
}
.cap-stat-number {
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	color: var(--cap-pink);
	text-shadow: 0 0 12px rgba(255, 0, 140, 0.55), 0 0 26px rgba(255, 0, 140, 0.25);
	margin-bottom: 6px;
}
.cap-stat-label { color: var(--cap-text); font-weight: 600; font-size: 14px; }

/* Quote form */
.cap-quote-form {
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 40px;
	max-width: 720px;
	margin: 0 auto;
}
.cap-quote-form .cap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.cap-quote-form label { display: block; font-weight: 600; color: #fff; font-size: 14px; margin-bottom: 6px; }
.cap-quote-form input, .cap-quote-form select, .cap-quote-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 10px;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
}
.cap-quote-form input:focus, .cap-quote-form select:focus, .cap-quote-form textarea:focus {
	outline: none;
	border-color: var(--cap-pink);
}
.cap-quote-form .field { margin-bottom: 18px; }
.cap-quote-form input[type="file"] { padding: 10px 14px; cursor: pointer; }
.cap-field-hint { color: var(--cap-text); opacity: .7; font-size: 12.5px; margin: 6px 0 0; }
.cap-form-success {
	background: rgba(46, 204, 113, .12);
	border: 1px solid rgba(46, 204, 113, .4);
	color: #2ecc71;
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 24px;
	font-weight: 600;
}
.cap-form-error {
	background: rgba(255, 0, 76, .1);
	border: 1px solid rgba(255, 0, 76, .4);
	color: #ff4d6d;
	padding: 16px 20px;
	border-radius: 10px;
	margin-bottom: 24px;
	font-weight: 600;
}

/* Quantity price tiers table */
table.cap-qty-tiers {
	width: 100%;
	max-width: 420px;
	border-collapse: collapse;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: 12px;
	overflow: hidden;
	margin: 18px 0 24px;
}
table.cap-qty-tiers caption {
	text-align: left;
	color: #fff;
	font-weight: 800;
	padding: 12px 16px;
	background: var(--cap-gradient);
	caption-side: top;
}
table.cap-qty-tiers th, table.cap-qty-tiers td {
	padding: 10px 16px;
	text-align: left;
	border-top: 1px solid var(--cap-border);
	color: var(--cap-text);
	font-size: 14px;
}
table.cap-qty-tiers th { color: #9ca3af; font-weight: 600; border-top: none; }
table.cap-qty-tiers td:last-child { color: var(--cap-pink); font-weight: 700; }

/* Live design mockup preview */
.cap-mockup-wrap { margin-bottom: 24px; }
.cap-mockup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cap-mockup-label { color: #fff; font-weight: 700; font-size: 14px; margin: 0; }
.cap-mockup-toggle { display: flex; gap: 6px; }
.cap-mockup-tab {
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: var(--cap-text);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 50px;
	cursor: pointer;
}
.cap-mockup-tab.is-active {
	background: var(--cap-gradient);
	color: #fff;
	border-color: transparent;
}
.cap-mockup-stage {
	position: relative;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--cap-border);
	background: var(--cap-bg-alt);
	touch-action: none;
}
.cap-mockup-base { width: 100%; height: 100%; object-fit: contain; display: block; }
.cap-mockup-design-wrap {
	position: absolute;
	top: 26%;
	left: 34%;
	width: 32%;
	cursor: grab;
}
.cap-mockup-design {
	width: 100%;
	display: none;
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.cap-mockup-resize-handle {
	position: absolute;
	right: -9px;
	bottom: -9px;
	width: 14px;
	height: 14px;
	background: rgba(10, 10, 10, .7);
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 3px;
	cursor: nwse-resize;
	display: none;
	opacity: .55;
	transition: opacity .15s ease;
}
.cap-mockup-design-wrap:hover .cap-mockup-resize-handle,
.cap-jersey-wrap:hover .cap-mockup-resize-handle,
.cap-mockup-resize-handle:hover {
	opacity: 1;
}
.cap-mockup-design-wrap.has-image .cap-mockup-resize-handle { display: block; }
.cap-mockup-rotate-handle {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	background: rgba(10, 10, 10, .7);
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	cursor: grab;
	display: none;
	opacity: .55;
	transition: opacity .15s ease;
	font-size: 9px;
	line-height: 11px;
	text-align: center;
	color: #fff;
}
.cap-mockup-rotate-handle::before {
	content: '';
	position: absolute;
	top: 13px;
	left: 50%;
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, .5);
	transform: translateX(-50%);
}
.cap-mockup-design-wrap:hover .cap-mockup-rotate-handle,
.cap-mockup-rotate-handle:hover {
	opacity: 1;
}
.cap-mockup-design-wrap.has-image .cap-mockup-rotate-handle { display: block; }
.cap-jersey-wrap.has-content .cap-mockup-rotate-handle { display: block; }
.cap-mockup-drag-hint {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 50px;
	white-space: nowrap;
	margin: 0;
}
.cap-shirt-back-silhouette { width: 60%; height: 60%; margin: 20% 20%; display: block; }
.cap-mockup-stage-back { display: flex; align-items: center; justify-content: center; }
.cap-jersey-wrap {
	position: absolute;
	top: 28%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: grab;
	touch-action: none;
	padding: 4px 10px;
}
.cap-jersey-wrap:active { cursor: grabbing; }
#cap-jersey-number-wrap { top: 50%; }
.cap-mockup-jersey-text {
	font-family: 'Anton', 'Inter', sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	color: #ffffff;
	-webkit-text-stroke: 1.5px #000000;
	paint-order: stroke fill;
	white-space: nowrap;
	display: none;
	pointer-events: none;
}
.cap-mockup-jersey-text.cap-jersey-number {
	font-size: 46px;
	-webkit-text-stroke: 2.5px #000000;
}
.cap-jersey-curve-svg {
	width: 220px;
	height: 70px;
	display: none;
	pointer-events: none;
	overflow: visible;
}
.cap-jersey-curve-svg text {
	font-family: 'Anton', 'Inter', sans-serif;
	letter-spacing: 1px;
	paint-order: stroke fill;
}
.cap-jersey-wrap .cap-mockup-resize-handle { display: block; right: -10px; bottom: -10px; }
#cap-back-text-wrap .cap-mockup-resize-handle,
#cap-back-text-wrap .cap-mockup-rotate-handle { display: none; }
#cap-back-text-wrap.has-content .cap-mockup-resize-handle,
#cap-back-text-wrap.has-content .cap-mockup-rotate-handle { display: block; }
.cap-mockup-disclaimer { font-size: 12px; color: #9ca3af; margin-top: 8px; }

/* Custom design upload field on product pages */
/* Unified "Customize Your Order" panel — groups preview, upload, and
   optional add-ons into one organized block with numbered steps instead
   of separate same-weight floating cards. */
.cap-customize-panel {
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 32px;
	margin-bottom: 24px;
}
.cap-customize-panel-head { margin-bottom: 8px; }
.cap-customize-panel-head h3 { font-size: 20px; margin-bottom: 6px; }
.cap-customize-panel-head p { font-size: 14px; color: var(--cap-text); margin: 0 0 8px; }
.cap-customize-step {
	padding: 28px 0 0;
	margin-top: 28px;
	border-top: 1px solid var(--cap-border);
}
.cap-customize-step:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.cap-customize-step-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 18px;
}
.cap-customize-step-label em {
	font-style: normal;
	color: #9ca3af;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
}
.cap-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cap-gradient);
	color: #fff;
	font-size: 12px;
	flex-shrink: 0;
}
.cap-step-num-optional {
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: var(--cap-pink);
	font-weight: 800;
}

.cap-design-upload {
	padding: 0;
	margin-bottom: 0;
}
.cap-design-upload label { display: block; color: #fff; font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.cap-design-upload input[type="file"] {
	width: 100%;
	padding: 10px;
	background: var(--cap-bg-alt);
	border: 1px dashed var(--cap-border);
	border-radius: 10px;
	color: var(--cap-text);
	margin-bottom: 8px;
}
.cap-design-hint { font-size: 13px; color: #9ca3af; margin: 0 0 18px; }
.cap-design-preview {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 18px;
}
.cap-design-preview img {
	max-width: 90px;
	max-height: 90px;
	border-radius: 6px;
	border: 1px solid var(--cap-border);
	object-fit: cover;
}
.cap-design-preview-name {
	color: var(--cap-text);
	font-size: 13px;
	word-break: break-all;
}
.cap-design-upload textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 10px;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}
.cap-design-upload textarea:focus, .cap-design-upload input[type="file"]:focus { outline: none; border-color: var(--cap-pink); }

.cap-resolution-warning {
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.4);
	color: #fbbf24;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 18px;
}
.cap-quality-ack {
	align-items: flex-start;
	font-weight: 400;
	font-size: 13px;
	color: var(--cap-text);
	line-height: 1.5;
	margin-bottom: 18px;
}
.cap-quality-ack input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }

/* Customize landing page */
.cap-customize-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px;
}
.cap-customize-card {
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 34px 26px;
	text-align: center;
	transition: border-color .2s ease, transform .2s ease;
}
.cap-customize-card:hover { border-color: var(--cap-pink); transform: translateY(-4px); }
.cap-customize-card .icon { font-size: 42px; margin-bottom: 18px; }
.cap-customize-card h3 { font-size: 19px; margin-bottom: 6px; }
.cap-customize-card p { font-size: 14px; margin-bottom: 18px; }

/* Name & Number on back */
.cap-name-number {
	padding: 0;
	margin-bottom: 0;
}
.cap-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.cap-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--cap-pink);
}
.cap-checkbox-label-inline { font-size: 13px; margin: 14px 0; }
.cap-custom-size-quote {
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 20px;
	margin: 18px 0;
}
.cap-custom-size-quote p { margin: 0 0 14px; color: var(--cap-text); font-size: 14.5px; }
.cap-mockup-drag-hint-static {
	position: static;
	display: inline-block;
	transform: none;
	margin: 0 0 14px;
}
.cap-name-number-fields {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--cap-border);
}
.cap-name-number-fields .cap-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 12px;
}
.cap-name-number-fields label {
	display: block;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
}
.cap-name-number-fields input {
	width: 100%;
	padding: 10px 12px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
}
.cap-name-number-fields input:focus { outline: none; border-color: var(--cap-pink); }

/* Back Logo & Info (company orders) */
.cap-back-info {
	padding: 0;
	margin-bottom: 0;
}
.cap-back-info-fields {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--cap-border);
}
.cap-back-info-fields label {
	display: block;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
}
.cap-back-info-fields input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
	margin-bottom: 14px;
}
.cap-back-info-fields input[type="file"] {
	width: 100%;
	padding: 10px;
	background: var(--cap-bg-alt);
	border: 1px dashed var(--cap-border);
	border-radius: 10px;
	color: var(--cap-text);
	margin-bottom: 14px;
}
.cap-mockup-back-text {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #ffffff;
	-webkit-text-stroke: 0.5px #000000;
	white-space: nowrap;
	display: none;
	pointer-events: none;
}

/* Quote CTA box */
.cap-quote-cta {
	display: flex;
	align-items: center;
	gap: 26px;
	background: var(--cap-gradient);
	padding: 30px 40px;
	border-radius: 20px;
	box-shadow: 0 0 40px rgba(255, 0, 140, 0.25), 0 0 70px rgba(109, 40, 255, 0.15);
}
.cap-quote-cta-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 16px;
}
.cap-quote-cta-icon img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); }
.cap-quote-cta-text { flex: 1; text-align: left; }
.cap-quote-cta-text h2 { font-size: clamp(19px, 2.4vw, 24px); margin-bottom: 4px; }
.cap-quote-cta-text p { color: rgba(255, 255, 255, 0.9); font-size: 14.5px; margin: 0; }
.cap-quote-cta-btn.cap-btn {
	flex-shrink: 0;
	background: #000;
	box-shadow: none;
	padding: 16px 32px;
	white-space: nowrap;
}
.cap-quote-cta-btn.cap-btn:hover { background: #000; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
@media (max-width: 700px) {
	.cap-quote-cta { flex-direction: column; text-align: center; padding: 30px 24px; }
	.cap-quote-cta-text { text-align: center; }
}

/* Contact cards */
.cap-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 26px;
}
.cap-contact-card {
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 36px 28px;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cap-contact-card:hover {
	transform: translateY(-6px);
	border-color: var(--cap-pink);
	box-shadow: 0 12px 30px rgba(255, 0, 140, 0.25);
}
.cap-contact-card .icon { font-size: 40px; margin-bottom: 16px; }
.cap-contact-card a { font-weight: 700; font-size: 16px; }
.cap-contact-card .cap-response-time { display: block; margin-top: 8px; font-size: 12.5px; color: #9ca3af; }

/* Footer */
.cap-footer {
	background: #000;
	border-top: 1px solid var(--cap-border);
	padding: 50px 0 24px;
}
.cap-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 30px;
}
.cap-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.cap-footer ul { list-style: none; padding: 0; margin: 0; }
.cap-footer li { margin-bottom: 10px; }
.cap-footer p { font-size: 14px; }
.cap-footer-bottom {
	border-top: 1px solid var(--cap-border);
	padding-top: 20px;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
}
.cap-footer-social {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}
.cap-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	color: #fff;
	font-size: 16px;
	transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.cap-footer-social a:hover {
	transform: translateY(-3px);
	border-color: var(--cap-pink);
	color: var(--cap-pink);
}

/* Page content fallback */
.cap-page-content { padding: 70px 0; }

/* Policy pages (Returns & Exchanges, etc.) */
.cap-policy-block { max-width: 780px; margin: 0 auto; }
.cap-policy-block h2 { font-size: 24px; margin-top: 44px; }
.cap-policy-block h2:first-child { margin-top: 0; }
.cap-policy-block p { margin: 0 0 18px; }
.cap-policy-block ul,
.cap-policy-block ol { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: cap-step; }
.cap-policy-block ul li,
.cap-policy-block ol li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}
.cap-policy-block ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--cap-pink);
	font-weight: 800;
}
.cap-policy-block ol li { counter-increment: cap-step; }
.cap-policy-block ol li::before {
	content: counter(cap-step);
	position: absolute;
	left: 0;
	top: -1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cap-gradient);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 782px) {
	.cap-nav { display: none; }
	.cap-menu-toggle { display: inline-flex; }
	.cap-nav.is-open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--cap-bg);
		border-bottom: 1px solid var(--cap-border);
		padding: 20px;
	}
	.cap-nav.is-open ul { flex-direction: column; gap: 16px; }
	.cap-footer-grid { grid-template-columns: 1fr; gap: 30px; }
	.cap-quote-form { padding: 26px; }
	.cap-quote-form .cap-row { grid-template-columns: 1fr; }
}

/* "Pay Your Invoice" custom amount/reference fields on the private
   pay-invoice product page. */
.cap-invoice-fields {
	margin: 20px 0;
	padding: 20px;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: 12px;
}
.cap-invoice-fields .field { margin-bottom: 16px; }
.cap-invoice-fields .field:last-child { margin-bottom: 0; }
.cap-invoice-fields label {
	display: block;
	font-weight: 600;
	color: #fff;
	font-size: 14px;
	margin-bottom: 6px;
}
.cap-invoice-fields input {
	width: 100%;
	padding: 12px 14px;
	background: var(--cap-bg-alt);
	border: 1px solid var(--cap-border);
	border-radius: 10px;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
}
.cap-invoice-fields input:focus {
	outline: none;
	border-color: var(--cap-pink);
}
/* The pay-invoice product's "photo" is really just the brand logo, not a
   product shot — constrain it to a clean centered badge instead of
   letting WooCommerce's gallery stretch it edge-to-edge like a real
   product image. */
.cap-pay-invoice-page .woocommerce-product-gallery {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}
.cap-pay-invoice-page .woocommerce-product-gallery__image,
.cap-pay-invoice-page .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	padding: 30px;
}
.cap-pay-invoice-page .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	max-height: 140px;
	object-fit: contain;
}
.cap-edit-cart-link {
	max-width: var(--cap-max);
	width: 92%;
	margin: 20px auto 0;
}
.cap-edit-cart-link a {
	color: var(--cap-pink);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.cap-edit-cart-link a:hover { text-decoration: underline; }

/* Punto verde "EN VIVO" pulsante del badge del hero — señal inequívoca de
   que el negocio está tomando pedidos AHORA. */
.cap-live-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22c55e;
	margin-right: 4px;
	vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: cap-live-pulse 1.8s ease-out infinite;
}
@keyframes cap-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
	70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Marquee "estamos vendiendo" — cinta corrida infinita entre el hero y las
   estadísticas, estilo marca deportiva. El track contiene el contenido
   duplicado, así que animar a -50% empalma perfecto en loop. */
.cap-marquee {
	overflow: hidden;
	background: var(--cap-bg-alt);
	border-top: 1px solid rgba(255, 0, 140, 0.25);
	border-bottom: 1px solid rgba(255, 0, 140, 0.25);
	padding: 13px 0;
}
.cap-marquee-track {
	display: flex;
	align-items: center;
	gap: 26px;
	width: max-content;
	animation: cap-marquee-run 26s linear infinite;
}
.cap-marquee:hover .cap-marquee-track { animation-play-state: paused; }
.cap-marquee-item {
	font-weight: 800;
	font-size: 14.5px;
	letter-spacing: .08em;
	color: #fff;
	white-space: nowrap;
}
.cap-marquee-item.alt {
	background: var(--cap-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cap-marquee-sep {
	font-size: 12px;
	opacity: .55;
}
@keyframes cap-marquee-run {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-marquee-track { animation: none; flex-wrap: wrap; width: auto; }
	.cap-live-dot { animation: none; }
}

/* CAPXXI — el logotipo de la marca propia reemplaza el texto del menú:
   el PNG actúa como máscara sobre el gradiente animado de la marca (misma
   técnica que el brillo del logo del hero), con glow al pasar el mouse. */
.cap-nav li.cap-nav-capxxi > a {
	display: inline-block;
	vertical-align: middle;
	width: 110px;
	height: 38px;
	font-size: 0;
	color: transparent;
	/* dos capas enmascaradas por el logo: destello de luz + gradiente de marca */
	background-image:
		linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%),
		linear-gradient(90deg, #ff008c, #6d28ff, #ff008c);
	background-size: 250% 100%, 200% 100%;
	background-position: -120% 0, 0% 50%;
	background-repeat: no-repeat, repeat;
	-webkit-mask: url('../images/capxxi.png') no-repeat center / contain;
	mask: url('../images/capxxi.png') no-repeat center / contain;
	animation: capxxi-magic 4.5s ease-in-out infinite;
	filter: drop-shadow(0 0 6px rgba(255, 0, 140, 0.35));
	transition: transform .22s ease, filter .22s ease;
}
.cap-nav li.cap-nav-capxxi > a::after { display: none; }
.cap-nav li.cap-nav-capxxi > a:hover {
	transform: scale(1.14) rotate(-2deg);
	filter: drop-shadow(0 0 14px rgba(255, 0, 140, 0.85)) drop-shadow(0 0 26px rgba(109, 40, 255, 0.5));
}
@keyframes capxxi-magic {
	0%   { background-position: -120% 0, 0% 50%; }
	45%  { background-position: 220% 0, 60% 50%; }
	100% { background-position: 220% 0, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.cap-nav li.cap-nav-capxxi > a { animation: none; }
}

/* Nota de disponibilidad en productos Champro (inventario del proveedor
   sincronizado por períodos — cantidades bajas pueden variar). */
.cap-stock-note {
	background: rgba(255, 180, 0, 0.08);
	border: 1px solid rgba(255, 180, 0, 0.35);
	border-radius: 10px;
	padding: 12px 16px;
	color: var(--cap-text);
	font-size: 13px;
	line-height: 1.55;
	margin: 14px 0;
}

/* Team Package Deals — per-player bundle cards grouped by division.
   Cards lean on real job photos; the price is the hero element since a
   concrete number is what pushes a coach/organizer to actually ask for
   a quote. */
.cap-division-chip {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 50px;
	background: var(--cap-card);
	border: 1px solid rgba(255, 0, 140, 0.45);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .03em;
	margin-bottom: 22px;
}
.cap-packages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
	margin-bottom: 26px;
}
.cap-package-card {
	display: flex;
	flex-direction: column;
	background: var(--cap-card);
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cap-package-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 0, 140, 0.55);
	box-shadow: 0 12px 30px rgba(255, 0, 140, 0.15);
}
.cap-package-img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cap-bg-alt);
}
.cap-package-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.cap-package-card:hover .cap-package-img img { transform: scale(1.05); }
.cap-package-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	text-align: left;
}
.cap-package-body h3 {
	color: #fff;
	font-size: 17px;
	line-height: 1.35;
	margin-bottom: 12px;
}
.cap-package-includes {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	flex: 1;
}
.cap-package-includes li {
	position: relative;
	padding-left: 22px;
	color: var(--cap-text);
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 7px;
}
.cap-package-includes li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--cap-pink);
	font-weight: 800;
}
.cap-package-price { line-height: 1; margin-bottom: 4px; }
.cap-package-price .amount {
	font-size: 34px;
	font-weight: 800;
	background: var(--cap-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cap-package-price .per { color: var(--cap-text); font-size: 14px; font-weight: 600; }
.cap-package-min {
	color: var(--cap-text);
	opacity: .7;
	font-size: 12.5px;
	margin-bottom: 14px;
}
.cap-package-btn { text-align: center; }
.cap-package-note {
	text-align: center;
	color: var(--cap-text);
	opacity: .85;
	font-size: 14px;
	max-width: 640px;
	margin: 0 auto;
}

/* ---------- Buscador del header ---------- */
.cap-search { position: relative; display: flex; align-items: center; }
/* Píldora "Search": misma familia visual que el botón Uniform Builder
   (redonda, acento rosa) pero en versión contorno para no competirle —
   al hover/abierto se llena con el gradiente de la marca. */
.cap-search-toggle {
	background: rgba(255, 0, 140, 0.08);
	border: 1px solid rgba(255, 0, 140, 0.45);
	color: var(--cap-white);
	cursor: pointer;
	padding: 7px 15px;
	display: flex;
	align-items: center;
	gap: 7px;
	border-radius: 50px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
	box-shadow: 0 0 10px rgba(255, 0, 140, 0.12);
}
.cap-search-toggle svg { flex-shrink: 0; }
.cap-search-toggle:hover,
.cap-search.cap-search-open .cap-search-toggle {
	background: var(--cap-gradient);
	border-color: transparent;
	box-shadow: 0 0 14px 3px rgba(255, 0, 140, 0.35);
}
@media (max-width: 782px) {
	.cap-search-label { display: none; }
	.cap-search-toggle { padding: 7px 9px; }
}
.cap-search-panel {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	right: -8px;
	width: 340px;
	background: rgba(12, 12, 16, 0.9);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 0, 140, 0.28);
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 0, 140, 0.08);
	z-index: 200;
}
.cap-search.cap-search-open .cap-search-panel { display: block; }
#cap-search-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: var(--cap-white);
	font-size: 14px;
	padding: 9px 12px;
	outline: none;
}
#cap-search-input:focus { border-color: rgba(255, 0, 140, 0.5); }
#cap-search-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.cap-search-results { max-height: 52vh; overflow-y: auto; }
.cap-search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	color: var(--cap-white);
	text-decoration: none;
	transition: background .15s ease;
}
.cap-search-item:hover { background: rgba(255, 0, 140, 0.12); }
.cap-search-item img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.05);
}
.cap-search-item-info { min-width: 0; }
.cap-search-item-title {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cap-search-item-meta { font-size: 12px; opacity: .6; }
.cap-search-item-price { margin-left: auto; font-size: 13px; font-weight: 700; color: #ff5fb8; white-space: nowrap; }
.cap-search-msg { padding: 12px 8px; font-size: 13px; opacity: .7; text-align: center; }
.cap-search-all {
	display: block;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: #ff5fb8;
	text-decoration: none;
	padding: 8px;
	margin-top: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cap-search-all:hover { color: #ff008c; }
@media (max-width: 782px) {
	.cap-search { position: static; }
	.cap-search-panel {
		position: fixed;
		top: 64px;
		left: 10px;
		right: 10px;
		width: auto;
	}
}

/* ---------- FAQ (acordeon nativo details/summary) ---------- */
.cap-faq-section h2 { text-align: center; margin-bottom: 26px; }
.cap-faq-item {
	max-width: 760px;
	margin: 0 auto 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--cap-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .2s ease;
}
.cap-faq-item[open] { border-color: rgba(255, 0, 140, 0.4); }
.cap-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 18px;
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cap-faq-item summary::-webkit-details-marker { display: none; }
.cap-faq-item summary::after {
	content: '+';
	font-size: 19px;
	color: #ff5fb8;
	flex-shrink: 0;
	transition: transform .2s ease;
}
.cap-faq-item[open] summary::after { transform: rotate(45deg); }
.cap-faq-item p {
	padding: 0 18px 15px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	opacity: .85;
}

/* ---------- Barra de filtro por género (arriba de categorías) ---------- */
/* El título de la categoría (WooCommerce) trae un margen grande abajo; lo
   reducimos para pegar la barra al título y que no quede tan baja. */
/* Sube el bloque de título + barra en páginas de categoría (menos aire arriba). */
.tax-product_cat .cap-page-content,
.post-type-archive-product .cap-page-content { padding-top: 34px; }
.woocommerce-products-header__title.page-title { margin-top: 0; margin-bottom: 6px; }
.cap-gender-bar {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: -2px 0 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cap-border);
	border-radius: 50px;
}
.cap-gender-opt {
	display: inline-block;
	padding: 8px 22px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cap-white);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cap-gender-opt:hover { background: rgba(255, 0, 140, 0.12); }
.cap-gender-opt.cap-gender-active {
	background: var(--cap-gradient);
	color: #fff;
	box-shadow: 0 0 14px rgba(255, 0, 140, 0.35);
}
@media (max-width: 600px) {
	.cap-gender-bar { display: flex; width: 100%; }
	.cap-gender-opt { flex: 1; text-align: center; padding: 8px 10px; }
}

/* ---------- Size Guide (Champro) ---------- */
.cap-sizeguide-btn {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 10px 0 4px; padding: 8px 16px;
	background: rgba(255,255,255,.05); color: var(--cap-white);
	border: 1px solid rgba(255,0,140,.4); border-radius: 50px;
	font-size: 13.5px; font-weight: 600; cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}
.cap-sizeguide-btn:hover { background: rgba(255,0,140,.12); box-shadow: 0 0 12px rgba(255,0,140,.25); }
.cap-sizeguide {
	display: none; position: fixed; inset: 0; z-index: 9999;
	background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	align-items: center; justify-content: center; padding: 20px;
}
.cap-sizeguide.cap-sg-open { display: flex; }
.cap-sizeguide-box {
	position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
	background: #14141a; border: 1px solid rgba(255,0,140,.35); border-radius: 16px;
	padding: 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.cap-sizeguide-box h3 { margin: 0 0 4px; font-size: 20px; }
.cap-sg-note { font-size: 12.5px; opacity: .7; margin: 0 0 18px; line-height: 1.5; }
.cap-sizeguide-close {
	position: absolute; top: 12px; right: 14px; background: none; border: none;
	color: var(--cap-white); font-size: 30px; line-height: 1; cursor: pointer; opacity: .7;
}
.cap-sizeguide-close:hover { opacity: 1; color: #ff008c; }
.cap-sizeguide-grid { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.cap-sg-silhouette { width: 130px; flex-shrink: 0; filter: invert(1) brightness(.85); opacity: .9; }
.cap-sg-tables { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }
.cap-sg-table-wrap h4 { margin: 0 0 6px; font-size: 14px; color: #ff5fb8; }
.cap-sg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cap-sg-table th, .cap-sg-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.cap-sg-table th { background: rgba(255,255,255,.05); font-weight: 700; }
.cap-sg-table td:first-child { font-weight: 700; }
.cap-sg-pdf { margin: 18px 0 0; font-size: 12.5px; opacity: .8; }
.cap-sg-pdf a { color: #ff5fb8; font-weight: 600; }
@media (max-width: 480px) { .cap-sg-silhouette { display: none; } }

/* ---------- Hero perks (FREE Graphic Design destacado) ---------- */
.cap-hero-perks {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
	margin-top: 20px;
}
.cap-hero-perk {
	display: inline-flex; align-items: center;
	padding: 7px 16px; border-radius: 50px;
	font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
	color: var(--cap-white);
	background: rgba(255,255,255,.06);
	border: 1px solid var(--cap-border);
}
.cap-hero-perk-star {
	background: var(--cap-gradient); color: #fff; border-color: transparent;
	box-shadow: 0 0 16px rgba(255,0,140,.4);
	animation: cap-perk-pulse 2.4s ease-in-out infinite;
}
@keyframes cap-perk-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(255,0,140,.5); }
	50% { box-shadow: 0 0 18px 4px rgba(255,0,140,.35); }
}
@media (prefers-reduced-motion: reduce) { .cap-hero-perk-star { animation: none; } }

/* ---------- Tarjeta del Team Order Form ---------- */
.cap-orderform-card {
	display: flex; align-items: center; gap: 20px;
	max-width: 760px; margin: 28px auto 0; padding: 22px 26px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,0,140,.28); border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.cap-orderform-icon {
	flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; background: var(--cap-gradient);
	box-shadow: 0 0 18px rgba(255,0,140,.35);
}
.cap-orderform-text { flex: 1; min-width: 0; }
.cap-orderform-text h3 { margin: 0 0 4px; font-size: 17px; }
.cap-orderform-text p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .78; }
.cap-orderform-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 620px) {
	.cap-orderform-card { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px; }
	.cap-orderform-btn { width: 100%; }
}

/* ---------- Popup de lanzamiento (email capture 10% OFF) ---------- */
.cap-promo { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; }
.cap-promo.cap-promo-open { display:flex; animation:capPromoFade .3s ease; }
@keyframes capPromoFade { from{opacity:0} to{opacity:1} }
.cap-promo-box {
	position:relative; width:100%; max-width:440px; text-align:center;
	background:#14141a; border:1px solid rgba(255,0,140,.4); border-radius:20px;
	padding:38px 30px 28px; box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 40px rgba(255,0,140,.15);
	animation:capPromoPop .4s cubic-bezier(.2,.9,.3,1.3);
	overflow:hidden;
}
.cap-promo-box::before { content:""; position:absolute; top:-60%; left:-30%; width:160%; height:120%; background:radial-gradient(circle, rgba(255,0,140,.18), transparent 60%); pointer-events:none; }
@keyframes capPromoPop { from{transform:scale(.85) translateY(20px); opacity:0} to{transform:none; opacity:1} }
.cap-promo-close { position:absolute; top:12px; right:16px; background:none; border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; opacity:.6; z-index:2; }
.cap-promo-close:hover { opacity:1; color:#ff5fb8; }
.cap-promo-badge { display:inline-block; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 14px; border-radius:50px; background:var(--cap-gradient); color:#fff; margin-bottom:14px; box-shadow:0 0 16px rgba(255,0,140,.4); position:relative; }
.cap-promo-box h2 { margin:0 0 10px; font-size:30px; line-height:1.15; font-weight:900; position:relative; }
.cap-promo-box h2 span { background:var(--cap-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cap-promo-sub { margin:0 0 20px; font-size:14px; opacity:.85; line-height:1.55; position:relative; }
.cap-promo-form { display:flex; flex-direction:column; gap:10px; position:relative; }
.cap-promo-form input { width:100%; padding:13px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-size:15px; text-align:center; outline:none; }
.cap-promo-form input:focus { border-color:rgba(255,0,140,.6); }
.cap-promo-form button { width:100%; padding:14px; border-radius:12px; border:none; background:var(--cap-gradient); color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 0 20px rgba(255,0,140,.4); transition:transform .15s ease; }
.cap-promo-form button:hover { transform:translateY(-2px); }
.cap-promo-form button:disabled { opacity:.6; cursor:default; transform:none; }
.cap-promo-err { color:#ff8fb3; font-size:13px; margin:8px 0 0; min-height:16px; position:relative; }
.cap-promo-fine { font-size:11.5px; opacity:.55; margin:12px 0 0; position:relative; }
.cap-promo-success { position:relative; }
.cap-promo-check { font-size:44px; margin-bottom:6px; }
.cap-promo-success h3 { margin:0 0 8px; font-size:24px; }
.cap-promo-code { display:inline-block; font-size:22px; font-weight:900; letter-spacing:2px; padding:6px 18px; border-radius:10px; background:rgba(255,0,140,.15); border:1px dashed rgba(255,0,140,.6); color:#ff5fb8; margin:4px 0; }
@media (max-width:480px){ .cap-promo-box h2{font-size:26px} }

/* ---------- Account link (header) ---------- */
.cap-account-link { display:inline-flex; align-items:center; gap:6px; color:var(--cap-white); text-decoration:none; font-size:13.5px; font-weight:600; transition:color .2s ease; }
.cap-account-link:hover { color:#ff5fb8; }
@media (max-width:782px){ .cap-account-label { display:none; } }

/* ---------- My Account (login/register) con el look de la marca ---------- */
.cap-account-notice {
	max-width:900px; margin:0 auto 24px; padding:16px 20px; border-radius:14px;
	background:rgba(255,0,140,.08); border:1px solid rgba(255,0,140,.35);
	font-size:14px; line-height:1.55;
}
.cap-account-code { display:inline-block; font-weight:800; letter-spacing:1px; padding:2px 10px; border-radius:8px; background:rgba(255,0,140,.15); border:1px dashed rgba(255,0,140,.6); color:#ff5fb8; }
.woocommerce-account .woocommerce { max-width:940px; margin:0 auto; }
.woocommerce-account .u-columns { display:flex; gap:24px; flex-wrap:wrap; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { flex:1; min-width:280px; }
.woocommerce form.login, .woocommerce form.register {
	background:rgba(255,255,255,.04); border:1px solid var(--cap-border); border-radius:16px; padding:24px;
}
.woocommerce-account h2 { font-size:20px; margin:0 0 16px; }
.woocommerce form .form-row label { display:block; font-size:13px; margin-bottom:5px; opacity:.85; }
.woocommerce form .form-row input.input-text {
	width:100%; padding:11px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
	background:rgba(255,255,255,.06); color:#fff; font-size:14px;
}
.woocommerce form .form-row input.input-text:focus { border-color:rgba(255,0,140,.55); outline:none; }
.woocommerce-account .button, .woocommerce form .button {
	background:var(--cap-gradient) !important; color:#fff !important; border:none !important;
	padding:12px 24px !important; border-radius:50px !important; font-weight:800 !important; cursor:pointer;
	box-shadow:0 0 16px rgba(255,0,140,.3);
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.woocommerce-account nav.woocommerce-MyAccount-navigation li a { display:inline-block; padding:8px 16px; border-radius:50px; background:rgba(255,255,255,.05); border:1px solid var(--cap-border); color:var(--cap-white); text-decoration:none; font-size:13.5px; }
.woocommerce-account nav.woocommerce-MyAccount-navigation li.is-active a { background:var(--cap-gradient); border-color:transparent; }

/* ---------- Header compacto (evita que el nav se parta al agregar Account) ---------- */
.cap-nav > ul > li > a { white-space: nowrap; }
.cap-nav ul { gap: 22px; }
.cap-account-label { display: none; }          /* Account = solo icono, ahorra espacio */
.cap-account-link { padding: 4px; }
@media (min-width: 783px) and (max-width: 1180px) {
	.cap-nav ul { gap: 16px; }
	.cap-search-label { display: none; }        /* en pantallas medianas, buscador solo icono */
}

/* ---------- My Account: pestañas en vez de dos columnas repetitivas ---------- */
.cap-acct-tabs { display:flex; gap:6px; max-width:460px; margin:0 auto 20px; background:rgba(255,255,255,.04); border:1px solid var(--cap-border); border-radius:50px; padding:5px; }
.cap-acct-tab { flex:1; padding:10px; border:none; background:none; color:var(--cap-white); font-weight:700; font-size:14px; border-radius:50px; cursor:pointer; transition:background .2s ease; }
.cap-acct-tab:hover { background:rgba(255,0,140,.12); }
.cap-acct-tab.is-on { background:var(--cap-gradient); color:#fff; box-shadow:0 0 14px rgba(255,0,140,.3); }
/* una sola forma centrada, sin lado a lado */
.woocommerce-account .u-columns { flex-direction:column; align-items:center; gap:0; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { max-width:460px; width:100%; min-width:0; }
.woocommerce-account .u-column1 > h2, .woocommerce-account .u-column2 > h2 { display:none; } /* los reemplazan las pestañas */

/* ===== Uniform Builder ===== */
.cap-ub{max-width:1180px;margin:0 auto;padding:8px 0 40px}
.cap-ub-intro{text-align:center;max-width:760px;margin:0 auto 22px}
.cap-ub-intro h2{font-size:30px;margin:0 0 8px}
.cap-ub-intro p{color:#b9bec7;font-size:15px;line-height:1.6}
.cap-ub-intro strong{color:#5ac8fa}
.cap-ub-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.cap-ub-filter{background:#1c1f27;color:#cfd3da;border:1px solid #2c313c;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.cap-ub-filter:hover{border-color:#3d94ff}
.cap-ub-filter.is-on{background:#2f7cf6;border-color:#2f7cf6;color:#fff}
.cap-ub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cap-ub-card{display:flex;flex-direction:column;text-align:left;background:#171a21;border:1px solid #262b35;border-radius:14px;overflow:hidden;cursor:pointer;padding:0;transition:.18s}
.cap-ub-card:hover{border-color:#3d94ff;transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.cap-ub-thumb{display:block;background:#0f1116}
.cap-ub-thumb img{display:block;width:100%;height:auto}
.cap-ub-cardinfo{padding:11px 13px 14px;display:flex;flex-direction:column;gap:2px}
.cap-ub-cardname{font-weight:700;color:#fff;font-size:15px}
.cap-ub-tag{font-style:normal;font-size:10px;font-weight:700;background:#2c313c;color:#9aa0ab;padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle}
.cap-ub-cardgarment{font-size:12.5px;color:#9299a4}
/* modal */
.cap-ub-modal{position:fixed;inset:0;background:rgba(6,8,12,.82);z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.cap-ub-modal.is-open{display:flex}
.cap-ub-dialog{position:relative;background:#14171d;border:1px solid #2a2f3a;border-radius:16px;max-width:900px;width:100%;margin:auto}
.cap-ub-close{position:absolute;top:10px;right:12px;background:none;border:0;color:#aab0bb;font-size:30px;line-height:1;cursor:pointer;z-index:2}
.cap-ub-close:hover{color:#fff}
.cap-ub-dialoggrid{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.cap-ub-preview{background:#0f1116;border-radius:16px 0 0 16px;padding:18px;display:flex;flex-direction:column;justify-content:center}
.cap-ub-preview img{width:100%;height:auto;border-radius:8px}
.cap-ub-previewnote{color:#8891a0;font-size:12px;margin:12px 2px 0;line-height:1.5}
.cap-ub-config{padding:22px 22px 24px}
.cap-ub-config h3{font-size:20px;margin:0}
.cap-ub-modalgarment{color:#9299a4;font-size:13px;margin:2px 0 16px}
#cap-ub-form label{display:block;font-size:12.5px;color:#aeb4be;font-weight:600;margin-bottom:11px}
#cap-ub-form input,#cap-ub-form select,#cap-ub-form textarea{display:block;width:100%;margin-top:5px;background:#1c1f27;border:1px solid #2f343f;border-radius:8px;color:#fff;padding:9px 10px;font-size:14px;font-weight:400}
#cap-ub-form input:focus,#cap-ub-form select:focus,#cap-ub-form textarea:focus{outline:none;border-color:#3d94ff}
.cap-ub-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cap-ub-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.cap-ub-file input{padding:7px}
.cap-ub-roster{background:#12151b;border:1px solid #262b35;border-radius:10px;padding:12px;margin:4px 0 14px}
.cap-ub-rosterhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.cap-ub-rosterhead strong{color:#fff;font-size:13px}
.cap-ub-rosterhead span{color:#7f8794;font-size:11px}
.cap-ub-rrow{display:grid;grid-template-columns:1fr 56px 84px 60px 26px;gap:6px;align-items:center;margin-bottom:6px}
.cap-ub-rrow input,.cap-ub-rrow select{margin-top:0!important;padding:7px 8px!important;font-size:13px!important}
.cap-ub-rrow .cap-ub-num{text-align:center}
.cap-ub-delrow{background:none;border:0;color:#8891a0;font-size:20px;cursor:pointer;line-height:1}
.cap-ub-delrow:hover{color:#ff5b5b}
.cap-ub-addrow{background:#1c1f27;border:1px dashed #3a4150;color:#bcc2cc;border-radius:8px;padding:8px;width:100%;font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
.cap-ub-addrow:hover{border-color:#3d94ff;color:#fff}
.cap-ub-submit{width:100%;background:linear-gradient(135deg,#2f7cf6,#7b3ff2);border:0;color:#fff;font-size:16px;font-weight:700;padding:13px;border-radius:10px;cursor:pointer;margin-top:6px}
.cap-ub-submit:hover{filter:brightness(1.08)}
.cap-ub-submit:disabled{opacity:.6;cursor:default}
.cap-ub-err{color:#ff6b6b;font-size:13px;margin:8px 0 0;min-height:1px}
.cap-ub-success{background:#123524;border:1px solid #1e6b44;color:#9ff0c4;border-radius:10px;padding:16px;font-size:15px;text-align:center;font-weight:600}
@media(max-width:760px){
.cap-ub-dialoggrid{grid-template-columns:1fr}
.cap-ub-preview{border-radius:16px 16px 0 0}
.cap-ub-row3{grid-template-columns:1fr}
.cap-ub-intro h2{font-size:24px}
}

/* ===== Uniform Builder — hero collage + fondo ===== */
.cap-ubhero{position:relative;overflow:hidden;padding:78px 0 66px;
  background:radial-gradient(1100px 520px at 50% -12%, rgba(123,63,242,.42), transparent 60%),
             radial-gradient(900px 520px at 82% 118%, rgba(47,124,246,.34), transparent 60%),
             #0d1017;}
.cap-ubhero-collage{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:.42;filter:saturate(1.12)}
.cap-ubm-track{display:flex;gap:16px;width:max-content;animation:cap-ubm 70s linear infinite;will-change:transform}
.cap-ubm-track.rev{animation-duration:88s;animation-direction:reverse}
.cap-ubm-item{flex:0 0 auto;width:288px;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.cap-ubm-item img{display:block;width:100%;height:auto}
@keyframes cap-ubm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cap-ubhero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,16,23,.60) 0%,rgba(13,16,23,.34) 42%,rgba(13,16,23,.92) 100%)}
.cap-ubhero-inner{position:relative;z-index:2;text-align:center;max-width:740px;margin:0 auto;padding:0 20px}
.cap-ubhero-badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#eaf0ff;font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:16px;backdrop-filter:blur(4px)}
.cap-ubhero-inner h1{font-size:48px;line-height:1.05;margin:0 0 14px;color:#fff}
.cap-ubhero-inner p{color:#cdd5e2;font-size:16.5px;line-height:1.6;max-width:600px;margin:0 auto}
.cap-ubhero-inner p strong{color:#8fd0ff}
.cap-ubhero-scroll{margin-top:22px;color:#aab3c4;font-size:13px;font-weight:600;letter-spacing:.4px}
.cap-ubhero-scroll span{display:inline-block;margin-left:4px;animation:cap-ubbounce 1.6s ease-in-out infinite}
@keyframes cap-ubbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.cap-ubformwrap{position:relative;padding:44px 0 60px;
  background:radial-gradient(760px 380px at 50% -6%, rgba(47,124,246,.16), transparent 62%),
             linear-gradient(180deg,#12151d 0%,#0f1117 100%)}
@media(prefers-reduced-motion:reduce){.cap-ubm-track{animation:none}}
@media(max-width:680px){
  .cap-ubhero{padding:52px 0 44px}
  .cap-ubhero-inner h1{font-size:34px}
  .cap-ubm-item{width:210px}
}

/* ===== Uniform Builder — collage de fondo alrededor del formulario ===== */
.cap-ubformwrap{position:relative;overflow:hidden}
.cap-ubcols{position:absolute;inset:0;z-index:0;display:flex;gap:14px;justify-content:center;opacity:.34;filter:saturate(1.12);pointer-events:none}
.cap-ubcol{flex:0 0 auto;width:230px;display:flex;flex-direction:column;gap:14px;animation:cap-ubup 70s linear infinite;will-change:transform}
.cap-ubcol.down{animation-name:cap-ubdown;animation-duration:86s}
.cap-ubcol img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.4)}
@keyframes cap-ubup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes cap-ubdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.cap-ubfw-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(760px 380px at 50% 0, rgba(47,124,246,.20), transparent 62%),
            radial-gradient(760px 520px at 50% 100%, rgba(123,63,242,.18), transparent 62%),
            rgba(12,15,22,.58)}
.cap-ubformwrap .cap-container{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.cap-ubcol{animation:none}}
@media(max-width:900px){.cap-ubcol:nth-child(n+4){display:none}}
@media(max-width:600px){.cap-ubcols{display:none}}

/* ===== Uniform Builder — refinamiento fondo calmado + fixes móvil ===== */
.cap-ubcols{opacity:.15;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cap-ubcol{animation-duration:120s}
.cap-ubcol.down{animation-duration:145s}
.cap-ubfw-overlay{background:
  radial-gradient(700px 560px at 50% 42%, rgba(12,15,22,.92), rgba(12,15,22,.55) 58%, transparent 76%),
  radial-gradient(760px 380px at 50% 0, rgba(47,124,246,.15), transparent 60%),
  radial-gradient(760px 520px at 50% 100%, rgba(123,63,242,.13), transparent 60%),
  rgba(12,15,22,.48)}
/* roster: evita overflow en móvil (por eso "no se veían" campos) */
.cap-ubf-row input,.cap-ubf-row select{min-width:0;box-sizing:border-box}
@media(max-width:600px){
  .cap-ubf-head{text-align:center}
  .cap-ubf-badges{justify-content:center}
  .cap-ubf-row{grid-template-columns:1fr 36px 60px 42px 18px !important;gap:5px !important}
  .cap-ubf{border-radius:16px}
}

/* Hero: fotos de Our Work (aspecto variado) parejas en la fila */
.cap-ubhero .cap-ubm-item{width:250px}
.cap-ubhero .cap-ubm-item img{height:150px;object-fit:cover}

/* ============================================================
   UNIFORM BUILDER — hero cinematográfico v2 (imagen + efectos):
   fondo con zoom lento, glow neón pulsante, rejilla tipo cancha
   en movimiento, velo oscuro a la izquierda, título con brillo
   de marca y CTA que late. Sustituye el collage sencillo.
   ============================================================ */
.cap-ubhero-v2{padding:0;min-height:min(90vh,780px);display:flex;align-items:center;background:#08080d}
.cap-ubhero-v2 .cap-ubhero-bg{position:absolute;inset:-5%;z-index:0;background-image:var(--ubhero-img);background-size:cover;background-position:72% center;background-repeat:no-repeat;animation:cap-ubhero-zoom 20s ease-in-out infinite alternate}
@keyframes cap-ubhero-zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.cap-ubhero-v2 .cap-ubhero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(55% 75% at 75% 55%,rgba(255,0,140,.30),transparent 62%),radial-gradient(48% 68% at 92% 42%,rgba(109,40,255,.34),transparent 62%);mix-blend-mode:screen;animation:cap-ubhero-pulse 5.5s ease-in-out infinite}
@keyframes cap-ubhero-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.cap-ubhero-v2::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,12,.95) 0%,rgba(6,6,12,.75) 30%,rgba(6,6,12,.20) 56%,transparent 72%)}
.cap-ubhero-v2 .cap-ubhero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 55%);mask-image:linear-gradient(90deg,#000 0%,transparent 55%);animation:cap-ubhero-gridmove 14s linear infinite}
@keyframes cap-ubhero-gridmove{from{background-position:0 0,0 0}to{background-position:46px 0,0 46px}}
.cap-ubhero-v2 .cap-ubhero-inner{position:relative;z-index:2;text-align:left;max-width:640px;margin:0;padding:0 clamp(22px,5vw,72px)}
.cap-ubhero-v2 .cap-ubhero-badge{background:rgba(255,0,140,.14);border:1px solid rgba(255,0,140,.5);color:#ffd7ec;box-shadow:0 0 18px rgba(255,0,140,.25);margin-bottom:18px}
.cap-ubhero-v2 h1{font-size:clamp(42px,7.5vw,92px);font-weight:900;line-height:.96;letter-spacing:-.5px;margin:0 0 18px;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.cap-ubhero-v2 p{color:#e7ecf5;font-size:clamp(15px,1.9vw,20px);line-height:1.6;max-width:34ch;margin:0;text-align:left;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.cap-ubhero-v2 p strong{color:#ff8ec8}
.cap-ubhero-v2 .cap-ubhero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:linear-gradient(100deg,#ff008c,#6d28ff);color:#fff;font-weight:800;font-size:clamp(15px,1.8vw,19px);padding:15px 34px;border-radius:999px;text-decoration:none;letter-spacing:.3px;box-shadow:0 10px 30px rgba(255,0,140,.4);animation:cap-ubcta 2.6s ease-in-out infinite;transition:transform .2s ease}
.cap-ubhero-v2 .cap-ubhero-cta:hover{transform:translateY(-3px) scale(1.03);color:#fff}
.cap-ubhero-v2 .cap-ubhero-cta span{animation:cap-ubbounce 1.6s ease-in-out infinite}
@keyframes cap-ubcta{0%,100%{box-shadow:0 10px 30px rgba(255,0,140,.35)}50%{box-shadow:0 12px 42px rgba(255,0,140,.6),0 0 30px rgba(109,40,255,.4)}}
@media(max-width:600px){.cap-ubhero-v2{min-height:78vh}.cap-ubhero-v2::before{background:linear-gradient(180deg,rgba(6,6,12,.68) 0%,rgba(6,6,12,.42) 38%,rgba(6,6,12,.88) 100%)}.cap-ubhero-v2 .cap-ubhero-bg{background-position:60% center}.cap-ubhero-v2 p{max-width:none}}
@media(prefers-reduced-motion:reduce){.cap-ubhero-v2 .cap-ubhero-bg,.cap-ubhero-v2 .cap-ubhero-glow,.cap-ubhero-v2 .cap-ubhero-grid,.cap-ubhero-v2 .cap-ubhero-cta,.cap-ubhero-v2 .cap-ubhero-cta span{animation:none}}

/* ===== Custom Uniforms por deporte (estilo Orlando) ===== */
.cap-sportpg{max-width:1180px;margin:0 auto;padding:8px 0 50px}
.cap-sportpg-hero{text-align:center;max-width:760px;margin:0 auto 30px;padding:28px 16px 6px}
.cap-sportpg-badge{display:inline-block;background:rgba(255,0,140,.14);border:1px solid rgba(255,0,140,.4);color:#ff5bb0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.cap-sportpg-hero h1{font-size:40px;line-height:1.08;margin:0 0 12px}
.cap-sportpg-hero p{color:#b9bec7;font-size:16px;line-height:1.6;margin:0 auto;max-width:600px}
.cap-sportpg-perks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:16px;color:#8fd0ff;font-size:13px;font-weight:600}
.cap-sportpg-gridhead{text-align:center;margin:14px 0 18px}
.cap-sportpg-gridhead h2{font-size:24px;margin:0 0 4px}
.cap-sportpg-gridhead p{color:#9299a4;font-size:14px;margin:0}
.cap-sportpg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.cap-sportpg-card{position:relative;display:block;border-radius:14px;overflow:hidden;background:#0f1116;border:1px solid #262b35;transition:.18s;text-decoration:none}
.cap-sportpg-card:hover{border-color:#ff008c;transform:translateY(-4px);box-shadow:0 14px 34px rgba(255,0,140,.22)}
.cap-sportpg-img{display:block;background:#0f1116}
.cap-sportpg-img img{display:block;width:100%;height:190px;object-fit:cover}
.cap-sportpg-cardcta{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,8,12,.9));display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(6px);transition:.18s}
.cap-sportpg-card:hover .cap-sportpg-cardcta{opacity:1;transform:none}
.cap-sportpg-custom{margin-top:36px;background:linear-gradient(135deg,#171a21,#1b1526);border:1px solid #33284a;border-radius:18px;padding:28px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.cap-sportpg-custom-txt{flex:1;min-width:260px}
.cap-sportpg-custom-badge{display:inline-block;background:rgba(123,63,242,.2);border:1px solid rgba(123,63,242,.5);color:#b79bff;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:10px}
.cap-sportpg-custom h2{font-size:24px;margin:0 0 8px}
.cap-sportpg-custom p{color:#aeb4be;font-size:14.5px;line-height:1.55;margin:0;max-width:520px}
.cap-sportpg-custom-actions{display:flex;gap:12px;flex-wrap:wrap}
.cap-sportpg-btn-primary{background:linear-gradient(135deg,#2f7cf6,#7b3ff2);color:#fff;font-weight:700;font-size:15px;padding:13px 22px;border-radius:11px;text-decoration:none;white-space:nowrap}
.cap-sportpg-btn-primary:hover{filter:brightness(1.08)}
.cap-sportpg-btn-ghost{background:#1c1f27;border:1px solid #3a4150;color:#fff;font-weight:600;font-size:14px;padding:13px 18px;border-radius:11px;text-decoration:none;white-space:nowrap}
@media(max-width:600px){
.cap-sportpg-hero h1{font-size:30px}
.cap-sportpg-img img{height:160px}
.cap-sportpg-custom{padding:22px 18px}
.cap-sportpg-btn-primary,.cap-sportpg-btn-ghost{flex:1;text-align:center}
}

/* ===== Reseñas de Google (home) ===== */
.cap-reviews{text-align:center}
.cap-reviews-previewbar{background:#2a2350;border:1px solid #4b3a7a;color:#c9b8ff;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:10px;display:inline-block;margin-bottom:18px}
.cap-reviews-head{margin-bottom:24px}
.cap-reviews-kicker{display:inline-block;color:#8891a0;font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.cap-reviews-head h2{font-size:28px;margin:0 0 12px}
.cap-reviews-rating{display:inline-flex;align-items:center;gap:12px;background:#171a21;border:1px solid #2b3242;border-radius:14px;padding:11px 20px}
.cap-reviews-score{font-size:34px;font-weight:800;color:#fff;line-height:1}
.cap-reviews-rating>span:last-child{text-align:left}
.cap-reviews-stars{color:#ffc531;font-size:17px;letter-spacing:2px;line-height:1;display:block}
.cap-reviews-count{color:#aeb4be;font-size:12.5px;display:block;margin-top:3px}
.cap-g{font-weight:700}
.cap-reviews-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;text-align:left}
.cap-review-card{background:#171a21;border:1px solid #262b35;border-radius:14px;padding:16px 16px 18px;flex:0 1 300px}
.cap-review-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cap-review-avatar{width:40px;height:40px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cap-review-who{min-width:0}
.cap-review-name{display:block;color:#fff;font-weight:700;font-size:14px}
.cap-review-via{display:block;color:#7f8794;font-size:11.5px}
.cap-review-g{margin-left:auto;flex-shrink:0;display:flex}
.cap-review-stars{color:#ffc531;font-size:14px;letter-spacing:1.5px;margin-bottom:8px}
.cap-review-text{color:#c8cdd6;font-size:13.5px;line-height:1.55}
.cap-reviews-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media(max-width:600px){.cap-reviews-head h2{font-size:23px}.cap-reviews-actions .cap-btn,.cap-reviews-actions .cap-btn-outline{flex:1;text-align:center}}

.cap-reviews-sub{color:#aeb4be;font-size:14.5px;line-height:1.6;max-width:520px;margin:16px auto 0}