:root{
	--green-600: #2a8f5a;
	--green-400: #78c06b;
	--bg: #f7fbf7;
	--muted: #6b725e;
	--glass: rgba(255,255,255,0.6);
	--radius: 12px;
	--container: 1100px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color-scheme: light;
	--leaf-spin: 8s;
	--accent: #2a8f5a;
	--card-gap: 0.9rem;
	--glass: rgba(255,255,255,0.6);
	--bg1: #f7fbf7;
	--bg2: #eef8ee;
	--glass-2: rgba(255,255,255,0.85);
	--anim-fast: 300ms;
	--anim-medium: 700ms;
	--anim-slow: 1400ms;
	--spark-size: 8px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	background:linear-gradient(180deg,var(--bg),#f0f6f0);
	color:#123;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.5;
}

/* animated page background */
body::before{
	content:"";
	position:fixed; inset:0; z-index:-1;
	background: linear-gradient(120deg, #f0fbf0 0%, #f7fff7 50%, #eef9ee 100%);
	opacity: 0.9;
	filter: blur(14px) saturate(1.02);
	animation: bgShift 18s ease-in-out infinite;
}
@keyframes bgShift{
	0%{ transform: scale(1) rotate(0deg) }
	50%{ transform: scale(1.03) rotate(.3deg) }
	100%{ transform: scale(1) rotate(0deg) }
}

.container{
	max-width:var(--container);
	margin:0 auto;
	padding:2rem;
}

/* Header */
.site-header{
	position:sticky; top:0; z-index:60;
	backdrop-filter: blur(6px);
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
	border-bottom: 1px solid rgba(40,80,40,0.05);
	transition: transform .45s ease, background .45s ease;
}
.site-header.scrolled{ transform: translateY(-6px) scale(.999); box-shadow: 0 8px 30px rgba(10,30,10,0.04); }
.header-inner{
	display:flex; align-items:center; justify-content:space-between;
}
.brand{
	font-family: "Playfair Display", serif;
	font-weight:600; color:var(--green-600); text-decoration:none; font-size:1.15rem;
}
.brand-accent{ color:var(--green-400);
	background: linear-gradient(90deg, rgba(120,192,107,1), rgba(42,143,90,1));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: accentShift 6s linear infinite;
	display:inline-block;
}
@keyframes accentShift{
	0%{ filter: hue-rotate(0deg) }
	50%{ filter: hue-rotate(8deg) }
	100%{ filter: hue-rotate(0deg) }
}

.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ color:var(--muted); text-decoration:none; padding:0.35rem 0.6rem; border-radius:8px; font-weight:600; font-size:0.95rem;
	position:relative; overflow:visible;
	transition: color .28s ease, transform .18s ease;
}
.nav a::after{
	content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--accent),#78c06b);
	transform: scaleX(0); transform-origin:left; transition: transform .28s cubic-bezier(.2,.9,.2,1);
}
.nav a:hover::after{ transform: scaleX(1); }
.nav a.cta{ background:var(--green-600); color:white; padding:0.5rem 0.9rem; border-radius:10px }
.nav a:hover{ color:var(--green-600) }

/* Mobile toggle */
.nav-toggle{ display:none; border:0; background:transparent; padding:0.4rem; cursor:pointer }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--accent); margin:4px 0; border-radius:2px; transition: transform .32s ease, opacity .32s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero{ padding:6rem 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:center }
.hero-content h1{ font-size:2.1rem; margin:0 0 0.6rem; color:#0b3a1f }
.lead{ color:var(--muted); margin-bottom:1rem }
.btn{ display:inline-block; text-decoration:none; padding:0.6rem 1rem; border-radius:10px; background:white; color:var(--green-600); border:1px solid rgba(42,143,90,0.06); margin-right:0.5rem; font-weight:600 }
.btn-primary{ background:var(--green-600); color:white; border:0;
	box-shadow: 0 8px 28px rgba(42,143,90,0.08); transition: transform .22s ease, box-shadow .22s ease;
}
.btn-primary:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 40px rgba(42,143,90,0.12); }
.btn-ghost{ background:transparent; border:1px solid rgba(16,70,20,0.06); color:var(--muted);
	transition: transform .18s ease;
}
.btn-ghost:hover{ transform: translateY(-2px); }

/* Visual */
.hero-visual{ display:flex; align-items:center; justify-content:center; }
@keyframes float{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-10px) rotate(-1deg) } 100%{ transform: translateY(0) } }

/* Sections */
.section{ padding:3.5rem 0 }
.section-muted{ background:linear-gradient(180deg, rgba(120,192,107,0.03), transparent) }
h2{ margin-top:0; color:#0f3e21; font-size:1.4rem }

/* Two column */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }

/* Cards grid */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; list-style:none; padding:0; margin:1rem 0 0 0 }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.9)); padding:1.1rem; border-radius:12px; border:1px solid rgba(10,30,10,0.04); box-shadow:0 6px 20px rgba(10,30,10,0.04);
	transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
	transform-style:preserve-3d;
}
.card:hover{
	transform: translateY(-10px) rotateX(4deg) translateZ(6px);
	box-shadow: 0 20px 40px rgba(10,30,10,0.08);
}
.card:active{ transform: translateY(-6px) rotateX(2deg) translateZ(6px); }

/* Services */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem }
.service{ background:var(--glass); padding:1rem; border-radius:12px; border:1px solid rgba(10,30,10,0.03) }

/* Advantages */
.advantages{ list-style:none; padding:0; margin:1rem 0 0 0; display:grid; gap:0.6rem }
.advantages li{ padding:0.8rem 1rem; border-left:4px solid var(--green-400); background:white; border-radius:8px }

/* CTA */
.section-cta{ background:linear-gradient(90deg, rgba(42,143,90,0.06), rgba(120,192,107,0.02)); border-radius:14px; padding:2.2rem }
.cta-grid{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
.cta-actions{ display:flex; gap:0.6rem }

/* Footer */
.site-footer{ padding:1rem 0; color:var(--muted) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(14px) scale(.995); transition: transform var(--anim-medium) cubic-bezier(.2,.9,.2,1), opacity var(--anim-medium) ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
	/* keep reduced motion preference respected */
	*:not(svg){ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Hero particles container (JS insertará .particle dentro) */
.hero-visual { position:relative; overflow:visible; }
.hero-visual .particle{
	position:absolute;
	width:8px; height:8px; border-radius:50%;
	background:rgba(255,255,255,0.85);
	mix-blend-mode:overlay;
	opacity:0.9;
	filter: blur(.6px);
	animation: particleRise linear infinite;
	pointer-events:none;
	transform: translateY(0) translateX(0);
}
@keyframes particleRise{
	0%{ transform: translateY(8px) scale(.7); opacity:0 }
	10%{ opacity:0.9 }
	80%{ opacity:0.6 }
	100%{ transform: translateY(-220px) scale(1.1); opacity:0 }
}

/* img-box overlay + zoom */
.img-box{ position:relative; overflow:hidden; }
.img-box img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform 600ms cubic-bezier(.2,.9,.2,1); }
.img-box .overlay{
	position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,30,12,0.06));
	opacity:0; transition: opacity 420ms ease, transform 420ms ease; pointer-events:none;
}
.img-box:hover .overlay{ opacity:1; transform: translateY(-2px); }
.img-box:hover img{ transform: scale(1.06) rotate(-0.6deg); }

/* service / card hover 3D pop + subtle flip */
.service, .card{
	transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease;
	will-change: transform;
}
.service:hover, .card:hover{
	transform: translateY(-10px) rotateX(4deg) rotateY(-2deg);
	box-shadow: 0 24px 50px rgba(10,30,10,0.09);
}

/* logo wiggle on hover */
.brand .logo{ transition: transform 420ms ease; transform-origin:center; display:inline-block; }
.brand:hover .logo{ animation: logoWiggle 900ms ease; }
@keyframes logoWiggle{
	0%{ transform: rotate(0) }
	20%{ transform: rotate(-6deg) }
	50%{ transform: rotate(6deg) }
	80%{ transform: rotate(-3deg) }
	100%{ transform: rotate(0) }
}

/* slow gradient drift for page (subtle) */
body::before{ animation: bgShift 30s ease-in-out infinite; }
@keyframes bgShift{ 0%{ transform: translateY(0) scale(1) } 50%{ transform: translateY(-2%) scale(1.02) } 100%{ transform: translateY(0) scale(1) } }

/* small decorative route shimmer for .truck-anim (glow) */
.truck-anim{ filter: drop-shadow(0 8px 20px rgba(42,143,90,0.06)); transition: filter 300ms ease; }
.truck-anim:hover{ filter: drop-shadow(0 14px 34px rgba(42,143,90,0.12)); }

/* stagger helper fallback (if JS sets --stagger) */
[data-stagger] > *{ opacity:0; transform: translateY(8px); transition: transform 620ms cubic-bezier(.2,.9,.2,1), opacity 620ms ease; }
[data-stagger].is-visible > *{ opacity:1; transform:none; }

/* sheen (brillo) that sweeps across cards on hover */
.card{
  position:relative; overflow:visible;
}
.card::before{
  content:"";
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
  transform: skewX(-20deg) translateX(-100%);
  pointer-events:none;
}
.card:hover::before{
  animation: cardSheen 900ms ease forwards;
}
@keyframes cardSheen{
  0%{ transform: skewX(-20deg) translateX(-100%); }
  100%{ transform: skewX(-20deg) translateX(250%); }
}

/* subtle hero image parallax + pulse */
.img-hero{
  transition: transform var(--anim-medium) cubic-bezier(.2,.9,.2,1), box-shadow var(--anim-medium) ease;
  will-change: transform;
}
.img-hero:hover{
  transform: scale(1.02) rotate(-0.6deg);
  box-shadow: 0 30px 80px rgba(10,30,10,0.10);
}

/* crate fruit bounce (if present) */
.fruit{ will-change: transform; transition: transform 900ms ease-in-out; }
.fruit.bounce{ animation: fruitBounce var(--anim-slow) ease-in-out infinite; }
@keyframes fruitBounce{
  0%{ transform: translateY(0) scale(1) }
  50%{ transform: translateY(-8px) scale(1.03) }
  100%{ transform: translateY(0) scale(1) }
}

/* truck pause on hover and subtle tilt on scroll */
.truck-anim{ transition: transform 240ms linear; }
.truck-anim:hover{ animation-play-state: paused!important; transform: translateY(-4px) scale(1.01); }

/* CTA micro-sparkles container and particles */
.btn-primary{ position:relative; overflow:visible; z-index:2; }
.btn-primary .spark{ position:absolute; width:var(--spark-size); height:var(--spark-size); border-radius:50%; background: radial-gradient(circle, #fff, rgba(255,255,255,0.6)); pointer-events:none; transform: translate(-50%,-50%) scale(.6); opacity:0.95; box-shadow: 0 6px 18px rgba(42,143,90,0.12); animation: sparkPop 900ms cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes sparkPop{
  0%{ transform: translate(-50%,-50%) scale(.6); opacity:1; filter: blur(0px) }
  60%{ transform: translate(-50%,-50%) scale(1.2); opacity:0.9; filter: blur(.5px) }
  100%{ transform: translate(-50%,-50%) scale(1.6); opacity:0; filter: blur(2px) }
}

/* small stagger helper using CSS var (JS will set --stagger) */
[data-stagger] > *{ opacity:0; transform: translateY(12px) scale(.995); transition: opacity var(--anim-medium) ease, transform var(--anim-medium) cubic-bezier(.2,.9,.2,1); }
[data-stagger].is-visible > *{ opacity:1; transform: none; }

/* tiny decorative shimmer on brand */
.brand-accent{ display:inline-block; position:relative; }
.brand-accent::after{
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%); pointer-events:none;
}
.brand-accent:hover::after{ animation: brandShine 1100ms ease; }
@keyframes brandShine{ 0%{ transform: translateX(-120%) } 100%{ transform: translateX(120%) } }

/* ensure .img-box img fit */
.img-box img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Screen runner: elemento que atraviesa la pantalla entre secciones */
.screen-runner{
	position:relative;
	width:100%;
	overflow:hidden;
	pointer-events:none;
	margin: 1.6rem 0;
	display:block;
}
.runner-track{
	position:relative;
	height:76px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

/* vehículo; se posiciona fuera a la izquierda y anima a la derecha */
.runner-vehicle{
	width:160px;
	height:auto;
	position:absolute;
	left:-20%;
	transform: translateZ(0);
	filter: drop-shadow(0 12px 30px rgba(10,30,10,0.06));
	animation: driveAcross 14s linear infinite;
	will-change: transform;
}

/* animación de recorrido */
@keyframes driveAcross{
	0%{ left:-28%; transform: translateY(0) rotate(0deg) }
	10%{ transform: translateY(-2px) rotate(-0.4deg) }
	50%{ left:52%; transform: translateY(-6px) rotate(0.6deg) }
	90%{ transform: translateY(-2px) rotate(-0.2deg) }
	100%{ left:120%; transform: translateY(0) rotate(0deg) }
}

/* sombra del "asfalto" sutil bajo el vehículo */
.runner-track::before{
	content:"";
	position:absolute;
	left:0; right:0; bottom:6px;
	height:10px;
	background: linear-gradient(180deg, rgba(10,30,10,0.02), rgba(10,30,10,0.06));
	pointer-events:none;
}

/* respuesta hover (si el usuario pasa por encima, el vehículo hace una pausa) */
.screen-runner:hover .runner-vehicle{ animation-play-state: paused; transform: translateY(-2px) scale(1.01); }

/* accesibilidad: respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
	.runner-vehicle{ animation: none; left:0; opacity:0.98; transform:none; }
}

/* responsive: en móviles el vehículo se vuelve más pequeño y más rápido */
@media (max-width:700px){
	.runner-track{ height:56px }
	.runner-vehicle{ width:120px; animation-duration:10s }
}

/* Responsive */
@media (max-width:900px){
	.hero-grid{ grid-template-columns:1fr; text-align:center }
	.hero-visual{ order:-1; margin-bottom:1rem }
	.header-inner{ gap:0.5rem }
	.nav{ position:fixed; right:0; top:68px; background:white; box-shadow:0 8px 30px rgba(10,30,10,0.06); padding:1rem; border-radius:12px; flex-direction:column; display:none }
	.nav.show{ display:flex }
	.nav-toggle{ display:block }
}

/* small touches */
a:hover{ opacity:0.95 }

/* image-faux micro movement */
.image-faux .pulse{ animation:fadePulse 1600ms ease-in-out infinite, subtleSlide 6s ease-in-out infinite; }
@keyframes subtleSlide{ 0%{ transform: translateX(0) } 50%{ transform: translateX(6px) } 100%{ transform: translateX(0) } }

/* Truck animation: travels horizontally across hero area */
.truck-anim{
	position:absolute; left:-18%; bottom:10px; width:220px; height:auto; z-index:3; pointer-events:none;
	animation: truckDrive 12s linear infinite;
	filter: drop-shadow(0 10px 20px rgba(20,60,20,0.08));
	transform-origin:center;
}
@keyframes truckDrive{
	0%{ transform: translateX(-8vw) translateY(0) scale(.98) }
	50%{ transform: translateX(28vw) translateY(-6px) scale(1) }
	100%{ transform: translateX(68vw) translateY(0) scale(.98) }
}
.truck-anim .wheel{ transform-origin:center; animation: wheelSpin 1s linear infinite; }
@keyframes wheelSpin{ 0%{ transform: rotate(0) } 100%{ transform: rotate(360deg) } }

/* Recuadros de imagen (placeholders) */
.img-box{
	display:block;
	width:100%;
	height:140px;
	border-radius:12px;
	background: linear-gradient(135deg, rgba(42,143,90,0.06), rgba(120,192,107,0.03));
	box-shadow: 0 8px 28px rgba(10,30,10,0.04);
	position:relative;
	overflow:hidden;
	transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
	border: 1px solid rgba(10,30,10,0.03);
	align-items:center; justify-content:center; display:flex;
}
.img-box:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10,30,10,0.08); }

/* hero grande */
.img-hero{ height:200px; max-width:360px; border-radius:14px; margin-bottom:8px; }

/* mini-recuadro para tarjetas y servicios */
.img-card{ height:120px; }

/* misión */
.mission-img{ height:220px; }

/* placeholder text */
.img-placeholder{
	color:rgba(8,28,18,0.6);
	font-weight:700;
	letter-spacing:.6px;
	background:transparent;
	pointer-events:none;
}

/* Si quieres cambiar por una <img> real: estilos aplicables */
.img-box img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Screen runner: elemento que atraviesa la pantalla entre secciones */
.screen-runner{
	position:relative;
	width:100%;
	overflow:hidden;
	pointer-events:none;
	margin: 1.6rem 0;
	display:block;
}
.runner-track{
	position:relative;
	height:76px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

/* vehículo; se posiciona fuera a la izquierda y anima a la derecha */
.runner-vehicle{
	width:160px;
	height:auto;
	position:absolute;
	left:-20%;
	transform: translateZ(0);
	filter: drop-shadow(0 12px 30px rgba(10,30,10,0.06));
	animation: driveAcross 14s linear infinite;
	will-change: transform;
}

/* animación de recorrido */
@keyframes driveAcross{
	0%{ left:-28%; transform: translateY(0) rotate(0deg) }
	10%{ transform: translateY(-2px) rotate(-0.4deg) }
	50%{ left:52%; transform: translateY(-6px) rotate(0.6deg) }
	90%{ transform: translateY(-2px) rotate(-0.2deg) }
	100%{ left:120%; transform: translateY(0) rotate(0deg) }
}

/* sombra del "asfalto" sutil bajo el vehículo */
.runner-track::before{
	content:"";
	position:absolute;
	left:0; right:0; bottom:6px;
	height:10px;
	background: linear-gradient(180deg, rgba(10,30,10,0.02), rgba(10,30,10,0.06));
	pointer-events:none;
}

/* respuesta hover (si el usuario pasa por encima, el vehículo hace una pausa) */
.screen-runner:hover .runner-vehicle{ animation-play-state: paused; transform: translateY(-2px) scale(1.01); }

/* accesibilidad: respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
	.runner-vehicle{ animation: none; left:0; opacity:0.98; transform:none; }
}

/* responsive: en móviles el vehículo se vuelve más pequeño y más rápido */
@media (max-width:700px){
	.runner-track{ height:56px }
	.runner-vehicle{ width:120px; animation-duration:10s }
}

/* Responsive */
@media (max-width:900px){
	.hero-grid{ grid-template-columns:1fr; text-align:center }
	.hero-visual{ order:-1; margin-bottom:1rem }
	.header-inner{ gap:0.5rem }
	.nav{ position:fixed; right:0; top:68px; background:white; box-shadow:0 8px 30px rgba(10,30,10,0.06); padding:1rem; border-radius:12px; flex-direction:column; display:none }
	.nav.show{ display:flex }
	.nav-toggle{ display:block }
}

/* small touches */
a:hover{ opacity:0.95 }

/* image-faux micro movement */
.image-faux .pulse{ animation:fadePulse 1600ms ease-in-out infinite, subtleSlide 6s ease-in-out infinite; }
@keyframes subtleSlide{ 0%{ transform: translateX(0) } 50%{ transform: translateX(6px) } 100%{ transform: translateX(0) } }

/* Truck animation: travels horizontally across hero area */
.truck-anim{
	position:absolute; left:-18%; bottom:10px; width:220px; height:auto; z-index:3; pointer-events:none;
	animation: truckDrive 12s linear infinite;
	filter: drop-shadow(0 10px 20px rgba(20,60,20,0.08));
	transform-origin:center;
}
@keyframes truckDrive{
	0%{ transform: translateX(-8vw) translateY(0) scale(.98) }
	50%{ transform: translateX(28vw) translateY(-6px) scale(1) }
	100%{ transform: translateX(68vw) translateY(0) scale(.98) }
}
.truck-anim .wheel{ transform-origin:center; animation: wheelSpin 1s linear infinite; }
@keyframes wheelSpin{ 0%{ transform: rotate(0) } 100%{ transform: rotate(360deg) } }

/* Recuadros de imagen (placeholders) */
.img-box{
	display:block;
	width:100%;
	height:140px;
	border-radius:12px;
	background: linear-gradient(135deg, rgba(42,143,90,0.06), rgba(120,192,107,0.03));
	box-shadow: 0 8px 28px rgba(10,30,10,0.04);
	position:relative;
	overflow:hidden;
	transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
	border: 1px solid rgba(10,30,10,0.03);
	align-items:center; justify-content:center; display:flex;
}
.img-box:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10,30,10,0.08); }

/* hero grande */
.img-hero{ height:200px; max-width:360px; border-radius:14px; margin-bottom:8px; }

/* mini-recuadro para tarjetas y servicios */
.img-card{ height:120px; }

/* misión */
.mission-img{ height:220px; }

/* placeholder text */
.img-placeholder{
	color:rgba(8,28,18,0.6);
	font-weight:700;
	letter-spacing:.6px;
	background:transparent;
	pointer-events:none;
}

/* Si quieres cambiar por una <img> real: estilos aplicables */
.img-box img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Screen runner: elemento que atraviesa la pantalla entre secciones */
.screen-runner{
	position:relative;
	width:100%;
	overflow:hidden;
	pointer-events:none;
	margin: 1.6rem 0;
	display:block;
}
.runner-track{
	position:relative;
	height:76px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

/* vehículo; se posiciona fuera a la izquierda y anima a la derecha */
.runner-vehicle{
	width:160px;
	height:auto;
	position:absolute;
	left:-20%;
	transform: translateZ(0);
	filter: drop-shadow(0 12px 30px rgba(10,30,10,0.06));
	animation: driveAcross 14s linear infinite;
	will-change: transform;
}

/* animación de recorrido */
@keyframes driveAcross{
	0%{ left:-28%; transform: translateY(0) rotate(0deg) }
	10%{ transform: translateY(-2px) rotate(-0.4deg) }
	50%{ left:52%; transform: translateY(-6px) rotate(0.6deg) }
	90%{ transform: translateY(-2px) rotate(-0.2deg) }
	100%{ left:120%; transform: translateY(0) rotate(0deg) }
}

/* sombra del "asfalto" sutil bajo el vehículo */
.runner-track::before{
	content:"";
	position:absolute;
	left:0; right:0; bottom:6px;
	height:10px;
	background: linear-gradient(180deg, rgba(10,30,10,0.02), rgba(10,30,10,0.06));
	pointer-events:none;
}

/* respuesta hover (si el usuario pasa por encima, el vehículo hace una pausa) */
.screen-runner:hover .runner-vehicle{ animation-play-state: paused; transform: translateY(-2px) scale(1.01); }

/* accesibilidad: respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
	.runner-vehicle{ animation: none; left:0; opacity:0.98; transform:none; }
}

/* responsive: en móviles el vehículo se vuelve más pequeño y más rápido */
@media (max-width:700px){
	.runner-track{ height:56px }
	.runner-vehicle{ width:120px; animation-duration:10s }
}

/* Responsive */
@media (max-width:900px){
	.hero-grid{ grid-template-columns:1fr; text-align:center }
	.hero-visual{ order:-1; margin-bottom:1rem }
	.header-inner{ gap:0.5rem }
	.nav{ position:fixed; right:0; top:68px; background:white; box-shadow:0 8px 30px rgba(10,30,10,0.06); padding:1rem; border-radius:12px; flex-direction:column; display:none }
	.nav.show{ display:flex }
	.nav-toggle{ display:block }
}