/* =========================================================================
 * Rider — tokens de marca + header
 * Colores y tipografía calcados de shared/lib/design_system (RiderVisualStyle
 * "classic") y shared/lib/utils/themes/rider_typography.dart — no inventados
 * para el sitio. Ver PROYECTO.md.
 * ========================================================================= */

:root {
	--rdr-primary: #0B5CFF;
	--rdr-secondary: #11D7F5;
	--rdr-dark: #0B1B3A;
	--rdr-soft: #EAF2FF;

	--rdr-ink: #111827;
	--rdr-ink-soft: #526076;
	--rdr-ink-faint: #8B96A8;

	--rdr-surface: #F6F8FB;
	--rdr-surface-elevated: #FFFFFF;
	--rdr-border: #E3E9F3;

	--rdr-success: #16A34A;
	--rdr-marker-origin: #E53935;
	--rdr-marker-destination: #16A34A;

	--rdr-gradient: linear-gradient(135deg, var(--rdr-primary), var(--rdr-secondary));

	--rdr-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--rdr-radius-s: 10px;
	--rdr-radius-m: 18px;
	--rdr-radius-l: 28px;
	--rdr-radius-full: 999px;

	--rdr-shadow-s: 0 2px 8px rgba(11, 27, 58, 0.06);
	--rdr-shadow-m: 0 12px 32px rgba(11, 27, 58, 0.10);
	--rdr-shadow-l: 0 24px 64px rgba(11, 27, 58, 0.16);

	--rdr-container: 1180px;
}

html.rdr-smooth-scroll {
	scroll-behavior: smooth;
}

.rdr-full-bleed #primary,
.rdr-full-bleed .site-content,
.rdr-full-bleed .ast-container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.rdr-home,
.rdr-header,
.rdr-footer {
	font-family: var(--rdr-font);
	color: var(--rdr-ink);
	-webkit-font-smoothing: antialiased;
}

.rdr-home *,
.rdr-header *,
.rdr-footer * {
	box-sizing: border-box;
}

.rdr-container {
	max-width: var(--rdr-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/*
 * Salvavidas de overflow horizontal: los hijos directos de grid/flex tienen
 * min-width:auto por defecto, que en Chrome/Firefox se resuelve al ancho
 * min-content del contenido (ej. un botón con texto sin salto de línea). En
 * columnas angostas (mobile) eso puede forzar a toda la columna a ser más
 * ancha que el viewport y desbordar la página completa, aunque el resto del
 * texto sí haga wrap con normalidad. min-width:0 se lo permite encoger.
 */
.rdr-hero__grid > *,
.rdr-story__grid > *,
.rdr-pet__grid > *,
.rdr-coverage__grid > *,
.rdr-waitlist__row > * {
	min-width: 0;
}

.rdr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rdr-primary);
	background: var(--rdr-soft);
	padding: 7px 14px;
	border-radius: var(--rdr-radius-full);
}
.rdr-eyebrow--light {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
}
.rdr-eyebrow__icon {
	width: 14px;
	height: 14px;
}

.rdr-section-title {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rdr-dark);
	margin: 16px 0 0;
}

.rdr-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Botones */
.rdr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--rdr-font);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 22px;
	border-radius: var(--rdr-radius-full);
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rdr-btn .rdr-icon {
	width: 16px;
	height: 16px;
}
.rdr-btn--solid {
	background: var(--rdr-gradient);
	color: #fff;
	box-shadow: 0 10px 24px rgba(11, 92, 255, 0.28);
}
.rdr-btn--solid:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(11, 92, 255, 0.36);
}
.rdr-btn--solid:active {
	transform: translateY(0);
}

/* Header */
.rdr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rdr-header.is-scrolled {
	border-bottom-color: var(--rdr-border);
	box-shadow: var(--rdr-shadow-s);
}

.rdr-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 76px;
}

.rdr-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	margin-right: auto;
}
.rdr-logo-badge {
	display: inline-flex;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	overflow: hidden;
	box-shadow: var(--rdr-shadow-s);
	flex-shrink: 0;
}
.rdr-logo-badge img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.rdr-header__wordmark {
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: var(--rdr-dark);
}

.rdr-header__nav {
	display: none;
}
.rdr-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rdr-header__menu a {
	text-decoration: none;
	color: var(--rdr-ink-soft);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.15s ease;
}
.rdr-header__menu a:hover {
	color: var(--rdr-primary);
}

.rdr-header__cta {
	display: none;
}

.rdr-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--rdr-radius-s);
	border: 1px solid var(--rdr-border);
	background: #fff;
	cursor: pointer;
}
.rdr-header__toggle-bars,
.rdr-header__toggle-bars::before,
.rdr-header__toggle-bars::after {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: var(--rdr-dark);
	border-radius: 2px;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.rdr-header__toggle-bars::before { position: absolute; top: -6px; }
.rdr-header__toggle-bars::after { position: absolute; top: 6px; }
.rdr-header__toggle[aria-expanded="true"] .rdr-header__toggle-bars {
	background: transparent;
}
.rdr-header__toggle[aria-expanded="true"] .rdr-header__toggle-bars::before {
	transform: rotate(45deg) translate(4px, 5px);
}
.rdr-header__toggle[aria-expanded="true"] .rdr-header__toggle-bars::after {
	transform: rotate(-45deg) translate(4px, -5px);
}

.rdr-mobile-panel {
	background: #fff;
	border-bottom: 1px solid var(--rdr-border);
	padding: 8px 24px 20px;
}
.rdr-mobile-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rdr-mobile-panel__menu a {
	display: block;
	padding: 12px 4px;
	text-decoration: none;
	color: var(--rdr-ink);
	font-weight: 600;
	border-bottom: 1px solid var(--rdr-border);
}
.rdr-mobile-panel__menu li:last-child a {
	border-bottom: none;
	margin-top: 8px;
}

@media (min-width: 900px) {
	.rdr-header__nav { display: block; }
	.rdr-header__cta { display: inline-flex; }
	.rdr-header__toggle { display: none; }
	.rdr-mobile-panel { display: none !important; }
}

/* Accesibilidad: respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}