/* ============================================================
   SAMURAI RIDERR · HOME 2026
   Estilos del template-home.php (theme samurai-2026).
   Depende de los tokens CSS de style.css (--sr-*)
   ============================================================ */

.sr-home {
	background: var(--sr-bg);
	color: var(--sr-text);
	overflow-x: hidden;
}
.sr-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--sr-s-4);
}

/* ============================================================
   HERO
   ============================================================ */
.sr-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle at 20% 20%, rgba(201, 0, 0, 0.25), transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255, 26, 26, 0.18), transparent 55%),
		linear-gradient(180deg, #0a0a0a 0%, var(--sr-bg) 100%);
}

/* Stage 3D */
.sr-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sr-hero__spline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: auto;
}
spline-viewer { width: 100%; height: 100%; }

/* Fallback: anillos animados */
.sr-hero__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: -1;
}
.sr-hero__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--sr-red-glow);
	animation: sr-ring-rotate 22s linear infinite;
}
.sr-hero__ring--1 { width: 720px; height: 720px; border-color: rgba(255, 26, 26, 0.18); }
.sr-hero__ring--2 { width: 1100px; height: 1100px; border-color: rgba(255, 26, 26, 0.10); animation-duration: 38s; animation-direction: reverse; }
.sr-hero__ring--3 { width: 1500px; height: 1500px; border-color: rgba(255, 26, 26, 0.05); animation-duration: 60s; }
@keyframes sr-ring-rotate {
	0%   { transform: rotate(0deg)   scale(1); }
	50%  { transform: rotate(180deg) scale(1.04); }
	100% { transform: rotate(360deg) scale(1); }
}
.sr-hero__glow {
	position: absolute;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--sr-red-glow) 0%, transparent 70%);
	filter: blur(80px);
	animation: sr-glow-pulse 8s ease-in-out infinite;
}
@keyframes sr-glow-pulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.15); }
}

/* Veil para legibilidad — vignette radial centrada */
.sr-hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.8) 100%),
		linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.7) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Content centrado */
.sr-hero__content {
	position: relative;
	z-index: 2;
	padding: 0 var(--sr-s-5);
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	will-change: transform;
}
.sr-hero__eyebrow {
	display: inline-block;
	font-family: var(--sr-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.4em;
	color: var(--sr-red-bright);
	margin-bottom: var(--sr-s-4);
	padding: 8px 16px;
	border: 1px solid var(--sr-red-glow);
	border-radius: 999px;
	background: rgba(201, 0, 0, 0.08);
	backdrop-filter: blur(8px);
	animation: sr-fade-up 0.8s var(--sr-ease) 0.1s both;
}
.sr-hero__title {
	font-family: var(--sr-font-display);
	font-size: clamp(3.5rem, 9vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sr-s-4);
	color: var(--sr-text);
	text-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.sr-hero__title-line {
	display: block;
	animation: sr-fade-up 0.9s var(--sr-ease) both;
}
.sr-hero__title-line:nth-child(1) { animation-delay: 0.2s; }
.sr-hero__title-line:nth-child(2) { animation-delay: 0.35s; }
.sr-hero__title-line--accent {
	background: linear-gradient(135deg, var(--sr-red-bright) 0%, var(--sr-red) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.sr-hero__sub {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	color: var(--sr-text-muted);
	max-width: 580px;
	margin: 0 auto var(--sr-s-5);
	line-height: 1.6;
	animation: sr-fade-up 1s var(--sr-ease) 0.5s both;
}
.sr-hero__cta {
	display: flex;
	gap: var(--sr-s-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--sr-s-7);
	animation: sr-fade-up 1.1s var(--sr-ease) 0.65s both;
}
.sr-hero__cta .button {
	position: relative;
	overflow: hidden;
	padding: 18px 42px;
	font-size: 1.15rem;
	letter-spacing: 0.12em;
}
.sr-hero__cta .button svg { transition: transform var(--sr-duration) var(--sr-ease); }
.sr-hero__cta .button:hover svg { transform: translateX(5px); }

/* Botón principal: degradado + glow + destello al hover */
.sr-hero__cta .button:not(.is-outline) {
	background: linear-gradient(135deg, var(--sr-red-bright) 0%, var(--sr-red) 55%, var(--sr-red-dark) 100%);
	border-color: transparent;
	box-shadow: 0 10px 34px var(--sr-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sr-hero__cta .button:not(.is-outline)::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s var(--sr-ease);
	pointer-events: none;
}
.sr-hero__cta .button:not(.is-outline):hover {
	background: linear-gradient(135deg, var(--sr-red-bright) 0%, var(--sr-red-bright) 45%, var(--sr-red) 100%);
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 46px var(--sr-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sr-hero__cta .button:not(.is-outline):hover::after { left: 130%; }

/* Botón secundario: cristal esmerilado que se enciende en rojo */
.sr-hero__cta .button.is-outline {
	background: rgba(28, 28, 28, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-color: rgba(245, 245, 245, 0.3);
}
.sr-hero__cta .button.is-outline:hover {
	background: rgba(201, 0, 0, 0.16);
	border-color: var(--sr-red-bright);
	transform: translateY(-3px);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

/* Pulso sutil del glow para atraer la mirada (se pausa al hover) */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sr-cta-pulse {
		0%, 100% { box-shadow: 0 10px 34px var(--sr-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
		50%      { box-shadow: 0 10px 48px rgba(255, 26, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
	}
	.sr-hero__cta .button:not(.is-outline) { animation: sr-cta-pulse 2.8s ease-in-out infinite; }
	.sr-hero__cta .button:not(.is-outline):hover { animation: none; }
}

/* Móvil: CTAs a ancho completo, más cómodos de pulsar */
@media (max-width: 560px) {
	.sr-hero__cta { flex-direction: column; align-items: stretch; }
	.sr-hero__cta .button { width: 100%; justify-content: center; padding: 16px 24px; }
}

.sr-hero__metrics {
	display: flex;
	gap: var(--sr-s-6);
	flex-wrap: wrap;
	justify-content: center;
	border-top: 1px solid var(--sr-border);
	padding-top: var(--sr-s-4);
	animation: sr-fade-up 1.2s var(--sr-ease) 0.8s both;
}
.sr-hero__metric { text-align: center; align-items: center; }
.sr-hero__metric { display: flex; flex-direction: column; gap: 2px; }
.sr-hero__metric strong {
	font-family: var(--sr-font-display);
	font-size: 2.5rem;
	color: var(--sr-text);
	line-height: 1;
}
.sr-hero__metric span {
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sr-text-muted);
}

/* Scroll hint */
.sr-hero__scroll {
	position: absolute;
	bottom: var(--sr-s-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sr-s-2);
	color: var(--sr-text-muted);
	text-decoration: none;
	font-family: var(--sr-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
.sr-hero__scroll-line {
	width: 2px;
	height: 40px;
	background: linear-gradient(to bottom, var(--sr-red-bright), transparent);
	animation: sr-scroll-pulse 2s ease-in-out infinite;
}
@keyframes sr-scroll-pulse {
	0%, 100% { transform: scaleY(1);   opacity: 1; }
	50%      { transform: scaleY(0.4); opacity: 0.4; }
}

@keyframes sr-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTIONS GENÉRICAS
   ============================================================ */
.sr-section {
	padding: var(--sr-s-8) 0;
	background: var(--sr-bg);
	position: relative;
}
.sr-section__head {
	text-align: center;
	margin-bottom: var(--sr-s-6);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.sr-section__eyebrow {
	display: inline-block;
	font-family: var(--sr-font-display);
	font-size: 0.9rem;
	letter-spacing: 0.4em;
	color: var(--sr-red-bright);
	margin-bottom: var(--sr-s-3);
	text-transform: uppercase;
}
.sr-section__title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin: 0 0 var(--sr-s-3);
	line-height: 1;
}
.sr-section__lead {
	font-size: 1.1rem;
	color: var(--sr-text-muted);
}
.sr-section__cta { text-align: center; margin-top: var(--sr-s-6); }

/* ============================================================
   PRÓXIMAS RODADAS (cards)
   ============================================================ */
.sr-rodadas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sr-s-4);
}
.sr-rodada {
	display: block;
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--sr-text);
	transition: transform var(--sr-duration) var(--sr-ease),
	            border-color var(--sr-duration) var(--sr-ease),
	            box-shadow var(--sr-duration) var(--sr-ease);
	position: relative;
}
.sr-rodada:hover {
	transform: translateY(-8px);
	border-color: var(--sr-red);
	box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--sr-red-glow);
}
.sr-rodada__image {
	aspect-ratio: 16 / 10;
	background-color: var(--sr-surface-3);
	background-size: cover;
	background-position: center;
	position: relative;
}
.sr-rodada__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.sr-rodada .sr-urgency {
	position: absolute;
	top: var(--sr-s-3);
	left: var(--sr-s-3);
	z-index: 1;
}
.sr-rodada__body { padding: var(--sr-s-4); }
.sr-rodada__title {
	font-family: var(--sr-font-display);
	font-size: 1.6rem;
	line-height: 1.1;
	margin: 0 0 var(--sr-s-2);
	color: var(--sr-text);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.sr-rodada__price {
	color: var(--sr-red-bright);
	font-family: var(--sr-font-display);
	font-size: 1.4rem;
	margin-bottom: var(--sr-s-3);
}
.sr-rodada__price del {
	color: var(--sr-text-dim);
	font-size: 1rem;
	margin-right: 6px;
}
.sr-rodada__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sr-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sr-text-muted);
	transition: color var(--sr-duration) var(--sr-ease), gap var(--sr-duration) var(--sr-ease);
}
.sr-rodada:hover .sr-rodada__cta {
	color: var(--sr-red-bright);
	gap: 10px;
}

/* ============================================================
   CIRCUITOS 3D · Rueda con perspectiva (Fase 4)
   ============================================================ */
.sr-circuitos-3d {
	background:
		radial-gradient(circle at 50% 100%, rgba(201, 0, 0, 0.2), transparent 60%),
		linear-gradient(180deg, var(--sr-bg) 0%, var(--sr-surface) 100%);
	overflow: hidden;
	text-align: center;
}
.sr-circuitos-3d > .sr-container { text-align: center; }

.sr-ring {
	position: relative;
	height: 640px;
	perspective: 1600px;
	perspective-origin: 50% 50%;
	margin: 0 auto;
	max-width: 1200px;
	display: block;
}

.sr-ring__floor {
	position: absolute;
	left: 50%;
	bottom: 60px;
	transform: translateX(-50%) rotateX(70deg);
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(255, 26, 26, 0.18) 0%, transparent 60%),
		repeating-conic-gradient(from 0deg, rgba(255,255,255,0.03) 0deg 6deg, transparent 6deg 12deg);
	filter: blur(2px);
	pointer-events: none;
	z-index: 0;
}

.sr-ring__stage {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translateZ(0) rotateY(0deg);
	transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 2;
}

.sr-ring__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 320px;
	height: 460px;
	margin-top: -230px;
	margin-left: -160px;
	transform-style: preserve-3d;
	transition: opacity 0.6s var(--sr-ease);
	backface-visibility: hidden;
	will-change: transform;
}

.sr-ring__card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sr-surface-2);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	overflow: hidden;
	text-decoration: none !important;
	color: var(--sr-text) !important;
	transition: border-color var(--sr-duration) var(--sr-ease),
	            box-shadow var(--sr-duration) var(--sr-ease),
	            transform var(--sr-duration) var(--sr-ease);
}

.sr-ring__card.is-active .sr-ring__card-inner {
	border-color: var(--sr-red);
	box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--sr-red-glow);
}

/* Las cards no-activas se ven más apagadas/lejanas */
.sr-ring__card:not(.is-active) .sr-ring__card-inner {
	opacity: 0.55;
	filter: saturate(0.7);
}
.sr-ring__card:not(.is-active):hover .sr-ring__card-inner {
	opacity: 0.85;
	cursor: pointer;
}

.sr-ring__card-image {
	position: relative;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: var(--sr-surface-3);
}
.sr-ring__card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(20,20,20,0.85) 100%);
}

.sr-ring__tags {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 24px);
}
.sr-ring__tag {
	font-family: var(--sr-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sr-red);
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 12px var(--sr-red-glow);
}

.sr-ring__card-body {
	padding: var(--sr-s-3) var(--sr-s-4) var(--sr-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--sr-s-2);
	flex: 1;
}
.sr-ring__card-name {
	font-family: var(--sr-font-display);
	font-size: 2.1rem;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	color: var(--sr-text);
}
.sr-ring__card-loc {
	color: var(--sr-text-muted);
	font-size: 0.95rem;
	margin: 0;
}
.sr-ring__card-specs {
	display: flex;
	gap: var(--sr-s-4);
	margin: var(--sr-s-2) 0 0;
	padding-top: var(--sr-s-3);
	border-top: 1px solid var(--sr-border);
}
.sr-ring__card-specs > div { display: flex; flex-direction: column; gap: 2px; }
.sr-ring__card-specs dt {
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sr-text-dim);
}
.sr-ring__card-specs dd {
	font-family: var(--sr-font-display);
	font-size: 1.15rem;
	color: var(--sr-text);
	margin: 0;
}
.sr-ring__card-cta {
	margin-top: auto;
	padding-top: var(--sr-s-3);
	font-family: var(--sr-font-display);
	letter-spacing: 0.15em;
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--sr-red-bright);
	transition: gap 0.3s var(--sr-ease);
}
.sr-ring__card.is-active .sr-ring__card-cta { color: var(--sr-red-bright); }

/* Flechas navegación */
.sr-ring__nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%) !important;
	z-index: 10;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	background: var(--sr-surface) !important;
	border: 1px solid var(--sr-border) !important;
	color: var(--sr-text) !important;
	font-size: 2rem !important;
	font-family: serif;
	border-radius: 50% !important;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
	transition: background 0.3s var(--sr-ease), border-color 0.3s var(--sr-ease) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.sr-ring__nav:hover {
	background: var(--sr-red) !important;
	border-color: var(--sr-red) !important;
	transform: translateY(-50%) scale(1.08) !important;
}
.sr-ring__nav--prev { left: var(--sr-s-3); }
.sr-ring__nav--next { right: var(--sr-s-3); }

/* Dots / pickers de circuito */
.sr-ring__dots {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 5;
	background: rgba(28,28,28,0.6);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	border: 1px solid var(--sr-border);
}
.sr-ring__dots button {
	background: transparent !important;
	border: none !important;
	color: var(--sr-text-muted) !important;
	padding: 10px 16px !important;
	font-family: var(--sr-font-display) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 999px !important;
	box-shadow: none !important;
	transition: color 0.3s var(--sr-ease), background 0.3s var(--sr-ease) !important;
}
.sr-ring__dots button:hover { color: var(--sr-text) !important; transform: none !important; }
.sr-ring__dots button.is-active {
	color: #fff !important;
	background: var(--sr-red) !important;
}

/* Responsive */
@media (max-width: 900px) {
	.sr-ring { height: 540px; perspective: 1100px; }
	.sr-ring__card { width: 260px; height: 400px; margin-top: -200px; margin-left: -130px; }
	.sr-ring__card-image { height: 160px; }
	.sr-ring__card-name { font-size: 1.7rem; }
	.sr-ring__floor { width: 540px; height: 540px; }
}
@media (max-width: 600px) {
	.sr-ring__nav { width: 44px !important; height: 44px !important; font-size: 1.5rem !important; }
	.sr-ring__dots { font-size: 0.7rem; }
	.sr-ring__dots button { padding: 8px 10px !important; }
}

/* ============================================================
   RESEÑAS
   ============================================================ */
.sr-resenas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sr-s-4);
}
.sr-resena {
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-s-5);
	margin: 0;
}
.sr-resena__stars {
	color: #FFB400;
	font-size: 1.1rem;
	letter-spacing: 3px;
	margin-bottom: var(--sr-s-3);
}
.sr-resena blockquote {
	margin: 0 0 var(--sr-s-3);
	padding: 0;
	border: none;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--sr-text);
	font-style: italic;
}
.sr-resena figcaption {
	font-family: var(--sr-font-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sr-red-bright);
	font-size: 0.95rem;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.sr-cta-final {
	background:
		radial-gradient(circle at 50% 50%, rgba(201, 0, 0, 0.3), transparent 60%),
		linear-gradient(180deg, var(--sr-surface) 0%, var(--sr-bg) 100%);
	text-align: center;
}
.sr-cta-final h2 {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	margin: 0 0 var(--sr-s-3);
}
.sr-cta-final p {
	color: var(--sr-text-muted);
	font-size: 1.15rem;
	margin-bottom: var(--sr-s-5);
}

/* ============================================================
   SERVICIOS EN CIRCUITO
   ============================================================ */
.sr-servicios {
	background: linear-gradient(180deg, var(--sr-surface) 0%, var(--sr-bg) 100%);
}
.sr-servicios-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sr-s-4);
}
.sr-servicio {
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-s-5);
	position: relative;
	transition: transform var(--sr-duration) var(--sr-ease),
	            border-color var(--sr-duration) var(--sr-ease),
	            box-shadow var(--sr-duration) var(--sr-ease);
}
.sr-servicio:hover {
	transform: translateY(-6px);
	border-color: var(--sr-red);
	box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--sr-red-glow);
}
.sr-servicio__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--sr-radius);
	background: rgba(201, 0, 0, 0.14);
	border: 1px solid rgba(255, 26, 26, 0.25);
	display: grid;
	place-items: center;
	color: var(--sr-red-bright);
	margin-bottom: var(--sr-s-3);
}
.sr-servicio__tag {
	position: absolute;
	top: var(--sr-s-4);
	right: var(--sr-s-4);
	font-family: var(--sr-font-display);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sr-red-bright);
	border: 1px solid rgba(255, 26, 26, 0.35);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}
.sr-servicio__title {
	font-family: var(--sr-font-display);
	font-size: 1.5rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 var(--sr-s-2);
	color: var(--sr-text);
}
.sr-servicio__text {
	color: var(--sr-text-muted);
	font-size: 0.98rem;
	line-height: 1.6;
	margin: 0;
}
.sr-servicios__cta {
	text-align: center;
	margin-top: var(--sr-s-6);
}
.sr-servicios__cta-note {
	color: var(--sr-text-muted);
	font-size: 1rem;
	max-width: 560px;
	margin: 0 auto var(--sr-s-4);
}
.sr-servicios__cta-buttons {
	display: flex;
	justify-content: center;
	gap: var(--sr-s-3);
	flex-wrap: wrap;
}

/* ============================================================
   PARTNERS / PATROCINADORES
   ============================================================ */
.sr-partners {
	background: var(--sr-bg);
	border-top: 1px solid var(--sr-border);
	border-bottom: 1px solid var(--sr-border);
	padding: var(--sr-s-6) 0;
}
.sr-partners > .sr-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sr-s-5);
	flex-wrap: wrap;
}
.sr-partners__label {
	font-family: var(--sr-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--sr-text-dim);
}
.sr-partners__row {
	display: flex;
	align-items: center;
	gap: var(--sr-s-4);
	flex-wrap: wrap;
	justify-content: center;
}
.sr-partner {
	display: flex;
	align-items: baseline;
	gap: var(--sr-s-3);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius);
	padding: var(--sr-s-3) var(--sr-s-4);
	background: var(--sr-surface);
}
.sr-partner__wordmark {
	font-family: var(--sr-font-display);
	font-size: 1.6rem;
	letter-spacing: 0.25em;
	color: var(--sr-text);
}
.sr-partner img {
	max-height: 44px;
	width: auto;
	display: block;
}
.sr-partner__desc {
	color: var(--sr-text-muted);
	font-size: 0.9rem;
}

.sr-proximas-empty {
	text-align: center;
	color: var(--sr-text-muted);
	font-size: 1.05rem;
	max-width: 560px;
	margin: 0 auto;
}
.sr-proximas-empty a { color: var(--sr-red-bright); }

/* ============================================================
   PÁGINA SERVICIOS · "cómo contratarlos" + CTA contacto
   ============================================================ */
.sr-serv-como { background: var(--sr-bg); }
.sr-serv-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sr-s-4);
	max-width: 1000px;
	margin: 0 auto;
}
.sr-serv-step {
	background: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-s-5);
	position: relative;
}
.sr-serv-step__num {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sr-red);
	color: #fff;
	font-family: var(--sr-font-display);
	font-size: 1.4rem;
	box-shadow: 0 8px 24px var(--sr-red-glow);
	margin-bottom: var(--sr-s-3);
}
.sr-serv-step h3 {
	font-family: var(--sr-font-display);
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 var(--sr-s-2);
	color: var(--sr-text);
}
.sr-serv-step p { color: var(--sr-text-muted); margin: 0; line-height: 1.6; }

.sr-serv-cta {
	text-align: center;
	background:
		radial-gradient(circle at 50% 50%, rgba(201, 0, 0, 0.25), transparent 60%),
		linear-gradient(180deg, var(--sr-surface) 0%, var(--sr-bg) 100%);
}
.sr-serv-cta h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 var(--sr-s-3); }
.sr-serv-cta p { color: var(--sr-text-muted); font-size: 1.1rem; margin-bottom: var(--sr-s-5); }
.sr-serv-cta__buttons {
	display: flex;
	justify-content: center;
	gap: var(--sr-s-3);
	flex-wrap: wrap;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s var(--sr-ease), transform 0.8s var(--sr-ease);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.sr-hero__content {
		margin: 0 auto;
		padding: 0 var(--sr-s-4);
		max-width: 100%;
	}
	.sr-hero__metrics { gap: var(--sr-s-4); }
	.sr-hero__metric strong { font-size: 1.8rem; }
	.sr-section { padding: var(--sr-s-7) 0; }
}