/* =========================================================================
 * Rider — home (front-page.php)
 * ========================================================================= */

.rdr-section {
	padding: 88px 0;
	scroll-margin-top: 84px;
}
.rdr-hero {
	scroll-margin-top: 84px;
}

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Hero ---------- */
.rdr-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 80px;
	background: linear-gradient(180deg, #FBFCFF 0%, var(--rdr-surface) 100%);
}

.rdr-hero__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.rdr-hero__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(11, 92, 255, 0.10);
}
.rdr-hero__ring--a {
	width: 640px;
	height: 640px;
	right: -220px;
	top: -260px;
	animation: rdr-spin 90s linear infinite;
}
.rdr-hero__ring--b {
	width: 420px;
	height: 420px;
	right: -80px;
	top: -60px;
	border-color: rgba(17, 215, 245, 0.14);
	animation: rdr-spin 60s linear infinite reverse;
}
@keyframes rdr-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.rdr-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: center;
}

.rdr-hero__title {
	font-size: clamp(36px, 5.2vw, 60px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--rdr-dark);
	margin: 20px 0 0;
}
.rdr-hero__title span {
	background: var(--rdr-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rdr-hero__tagline {
	font-size: 18px;
	line-height: 1.55;
	color: var(--rdr-ink-soft);
	max-width: 460px;
	margin: 20px 0 0;
}

.rdr-hero__form {
	margin-top: 32px;
	max-width: 460px;
}

.rdr-hero__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-weight: 600;
	font-size: 14px;
	color: var(--rdr-ink-soft);
	text-decoration: none;
}
.rdr-hero__whatsapp .rdr-icon {
	width: 18px;
	height: 18px;
	color: var(--rdr-primary);
}
.rdr-hero__whatsapp:hover {
	color: var(--rdr-ink);
}

/* Visual: mapa + tarjeta de viaje */
.rdr-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.rdr-map {
	position: relative;
	width: min(100%, 340px);
	aspect-ratio: 320 / 340;
}
.rdr-map__route {
	width: 100%;
	height: 100%;
	display: block;
}
.rdr-map__route-path {
	animation: rdr-dash 2.4s linear infinite;
}
@keyframes rdr-dash {
	to { stroke-dashoffset: -40; }
}

.rdr-map__pin {
	position: absolute;
	transform: translate(-50%, -100%);
	display: flex;
	filter: drop-shadow(0 6px 10px rgba(11, 27, 58, 0.22));
}
.rdr-map__pin .rdr-icon {
	width: 30px;
	height: 30px;
}
.rdr-map__pin--origin .rdr-icon {
	color: var(--rdr-marker-origin);
}
.rdr-map__pin--destination .rdr-icon {
	color: var(--rdr-marker-destination);
}

.rdr-trip-card {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	width: min(92%, 300px);
	background: var(--rdr-surface-elevated);
	border-radius: var(--rdr-radius-m);
	box-shadow: var(--rdr-shadow-l);
	padding: 16px 18px;
	animation: rdr-float 5s ease-in-out infinite;
}
@keyframes rdr-float {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(-8px); }
}
.rdr-trip-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rdr-trip-card__row strong {
	display: block;
	font-size: 14px;
	color: var(--rdr-dark);
}
.rdr-trip-card__row span {
	font-size: 13px;
	color: var(--rdr-ink-soft);
}
.rdr-trip-card__stops {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--rdr-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rdr-ink);
}
.rdr-trip-card__stop {
	position: relative;
	padding-left: 18px;
}
.rdr-trip-card__stop::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}
.rdr-trip-card__stop--a::before { background: var(--rdr-marker-origin); }
.rdr-trip-card__stop--b::before { background: var(--rdr-marker-destination); }

.rdr-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--rdr-border);
	background: #fff;
	align-items: center;
	justify-content: center;
	color: var(--rdr-ink-soft);
	animation: rdr-bounce 2.2s ease-in-out infinite;
}
@keyframes rdr-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(6px); }
}

@media (min-width: 900px) {
	.rdr-hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
	}
	.rdr-hero__scroll {
		display: flex;
	}
}

/* ---------- Formulario lista de espera ---------- */
.rdr-waitlist__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rdr-waitlist input[type="email"] {
	font-family: var(--rdr-font);
	font-size: 15px;
	padding: 15px 18px;
	border-radius: var(--rdr-radius-full);
	border: 1.5px solid var(--rdr-border);
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rdr-waitlist input[type="email"]:focus {
	border-color: var(--rdr-primary);
	box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.14);
}
.rdr-waitlist__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.rdr-waitlist__note {
	margin: 10px 2px 0;
	font-size: 12.5px;
	color: var(--rdr-ink-faint);
}
.rdr-waitlist__feedback {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	min-height: 0;
}
.rdr-waitlist__feedback.is-success {
	color: var(--rdr-success);
}
.rdr-waitlist__feedback.is-error {
	color: #DC2626;
}
.rdr-waitlist.is-submitting .rdr-btn {
	opacity: 0.7;
	pointer-events: none;
}
.rdr-waitlist.is-done .rdr-waitlist__row {
	display: none;
}

@media (min-width: 520px) {
	.rdr-waitlist__row {
		flex-direction: row;
	}
	.rdr-waitlist input[type="email"] {
		flex: 1;
	}
}

/* ---------- Pilares ---------- */
.rdr-pillars {
	padding-top: 0;
	padding-bottom: 40px;
}
.rdr-pillars__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: -64px;
	position: relative;
	z-index: 2;
}
.rdr-pillars__card {
	background: var(--rdr-surface-elevated);
	border-radius: var(--rdr-radius-l);
	padding: 30px 26px;
	box-shadow: var(--rdr-shadow-m);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rdr-pillars__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--rdr-shadow-l);
}
.rdr-pillars__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--rdr-radius-m);
	background: var(--rdr-soft);
	color: var(--rdr-primary);
	margin-bottom: 18px;
}
.rdr-pillars__icon .rdr-icon {
	width: 26px;
	height: 26px;
}
.rdr-pillars__card h3 {
	font-size: 19px;
	font-weight: 800;
	color: var(--rdr-dark);
	margin: 0 0 8px;
}
.rdr-pillars__card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--rdr-ink-soft);
}

@media (min-width: 720px) {
	.rdr-pillars__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Historia ---------- */
.rdr-story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.rdr-story__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	max-width: 320px;
	margin: 0 auto;
}
.rdr-story__orbit {
	width: 100%;
	height: 100%;
	animation: rdr-spin 40s linear infinite;
}
.rdr-story__orbit-dot {
	animation: rdr-pulse-op 2.4s ease-in-out infinite;
}
@keyframes rdr-pulse-op {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}
.rdr-story__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.rdr-story__badge .rdr-logo-badge {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	box-shadow: var(--rdr-shadow-l);
}

.rdr-story__text p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rdr-ink-soft);
	margin: 18px 0 0;
}
.rdr-story__text em {
	color: var(--rdr-dark);
	font-style: normal;
	font-weight: 700;
}

@media (min-width: 900px) {
	.rdr-story__grid {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

/* ---------- Pet friendly ---------- */
.rdr-pet {
	background: var(--rdr-surface);
}
.rdr-pet__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.rdr-pet__text p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rdr-ink-soft);
	margin: 18px 0 0;
}
.rdr-pet__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rdr-pet__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--rdr-dark);
}
.rdr-pet__list .rdr-icon {
	width: 18px;
	height: 18px;
	color: var(--rdr-success);
	flex-shrink: 0;
}

.rdr-pet__visual {
	position: relative;
	aspect-ratio: 1;
	max-width: 320px;
	margin: 0 auto;
}
.rdr-pet__scene {
	width: 100%;
	height: 100%;
	display: block;
}
/* Same dash-flow language as the hero route (.rdr-map__route-path): a
   trail the pet's steps are following, not a standalone decoration. */
.rdr-pet__trail {
	animation: rdr-dash 2.4s linear infinite;
}
.rdr-pet__print {
	color: var(--rdr-secondary);
}
.rdr-pet__print--a { opacity: 0.35; }
.rdr-pet__print--b { opacity: 0.55; }
.rdr-pet__print--c {
	opacity: 0.8;
	animation: rdr-pulse-op 2.4s ease-in-out infinite;
}

/* Elevated badge at the trail's end — same card treatment as
   .rdr-story__badge .rdr-logo-badge, paw icon instead of the logo. */
.rdr-pet__badge {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--rdr-radius-m);
	background: var(--rdr-soft);
	color: var(--rdr-primary);
	box-shadow: var(--rdr-shadow-l);
}
.rdr-pet__badge .rdr-icon {
	width: 32px;
	height: 32px;
}

@media (min-width: 900px) {
	.rdr-pet__grid {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

/* ---------- Cobertura ---------- */
.rdr-coverage__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.rdr-coverage__visual {
	display: flex;
	justify-content: center;
}
.rdr-chile {
	width: min(100%, 220px);
	height: auto;
}
/* Recorte real de la costa (ver front-page.php) en vez de un garabato: la
   silueta se pinta en el mismo tono suave que el resto de las líneas
   decorativas del sitio (anillos de Historia, etc.), sin competir con el
   punto de Concepción. */
.rdr-chile__shape path {
	fill: #D7E4FF;
}
.rdr-chile__point--concepcion {
	fill: var(--rdr-secondary);
}
.rdr-chile__ring--concepcion {
	fill: none;
	stroke: var(--rdr-secondary);
	stroke-width: 2;
	transform-origin: 503px 512px;
	animation: rdr-ring 2.4s ease-out infinite;
}
@keyframes rdr-ring {
	0% { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(3.4); opacity: 0; }
}
.rdr-coverage__text p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rdr-ink-soft);
	margin: 18px 0 0;
}
.rdr-coverage__address {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--rdr-primary);
	text-decoration: none;
	padding: 12px 18px;
	border-radius: var(--rdr-radius-full);
	background: var(--rdr-soft);
	transition: transform 0.18s ease;
}
.rdr-coverage__address:hover {
	transform: translateY(-2px);
}

@media (min-width: 900px) {
	.rdr-coverage__grid {
		grid-template-columns: 0.7fr 1.3fr;
	}
}

/* ---------- CTA final ---------- */
.rdr-cta {
	background: radial-gradient(120% 140% at 20% 0%, #123CBF 0%, var(--rdr-dark) 60%);
	color: #fff;
}
.rdr-cta__inner {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.rdr-cta__title {
	color: #fff;
}
.rdr-cta__sub {
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.6;
	margin: 16px 0 0;
}
.rdr-cta__form {
	margin-top: 32px;
	width: 100%;
	max-width: 460px;
}
.rdr-cta .rdr-waitlist input[type="email"] {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}
.rdr-cta .rdr-waitlist input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.rdr-cta .rdr-waitlist__note {
	color: rgba(255, 255, 255, 0.5);
}