:root{
  --bg:#f8fafc; --panel:#ffffff; --brand:#059669; --text:#1e293b; --muted:#64748b; --line:#e2e8f0;
  --radius:16px;
  --shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --spacing-xs:0.5rem;
  --spacing-sm:1rem;
  --spacing-md:1.5rem;
  --spacing-lg:2rem;
  --spacing-xl:3rem;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;color:var(--text);background:linear-gradient(120deg,#f8fafc,#f1f5f9 40%,#e2e8f0);font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.6;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
.site-header,.site-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.site-footer{border-top:1px solid var(--line);border-bottom:none;flex-wrap:wrap}
.site-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:var(--spacing-xs);flex-wrap:wrap}
.site-nav a{padding:var(--spacing-xs) var(--spacing-sm);border-radius:999px;background:rgba(5,150,105,.1);color:var(--text);transition:all 0.2s ease}
.site-nav .is-active a,.site-nav a:hover{background:rgba(5,150,105,.2);color:var(--brand)}
.hero-map{position:relative}
.hero-chip{position:absolute;bottom:var(--spacing-sm);left:var(--spacing-sm);background:rgba(255,255,255,.9);color:var(--text);padding:var(--spacing-xs) var(--spacing-sm);border-radius:999px;font-size:.95rem;box-shadow:var(--shadow)}
.grid-rutas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-lg)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform 0.2s ease, box-shadow 0.2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card img{width:100%;height:200px;object-fit:cover;object-position:center}
figure img{width:100%;height:auto;max-height:400px;object-fit:cover;object-position:center;border-radius:var(--radius)}
.card h2{margin:var(--spacing-sm) var(--spacing-md);font-size:1.25rem;line-height:1.4}
.card p{margin:var(--spacing-xs) var(--spacing-md) var(--spacing-md);color:var(--muted);line-height:1.6}
.split-panels{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--spacing-lg);padding:var(--spacing-xl) var(--spacing-lg)}
.split-panels .btn{margin-top:var(--spacing-sm)}
.split-panels h2{margin-bottom:var(--spacing-sm);font-size:1.5rem}
.split-panels p{margin-bottom:var(--spacing-sm);line-height:1.6}
.btn{display:inline-block;background:var(--brand);color:white;border:none;border-radius:12px;padding:var(--spacing-sm) var(--spacing-md);font-weight:600;transition:all 0.2s ease;cursor:pointer;font-size:1rem}
.btn:hover{background:#047857;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.ghost:hover{background:var(--brand);color:white}
.btn.warn{background:#f59e0b;color:white}
.btn.warn:hover{background:#d97706}
.link{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm)}
.panel-cards .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-lg)}
.market-tip{padding:var(--spacing-lg);color:var(--muted);background:var(--panel);border-radius:var(--radius);margin:var(--spacing-lg) 0}
.market-tip h3{margin-bottom:var(--spacing-sm);color:var(--text)}
.market-tip ul{margin:0;padding-left:var(--spacing-md)}
.market-tip li{margin-bottom:var(--spacing-xs);line-height:1.6}
.layout-serpentine,.layout-zigzag{padding:var(--spacing-xl) var(--spacing-lg);display:grid;gap:var(--spacing-xl)}
.layout-serpentine h1,.layout-zigzag h1{margin-bottom:var(--spacing-lg);font-size:2rem;text-align:center}
.layout-serpentine h2,.layout-zigzag h2{margin-bottom:var(--spacing-sm);font-size:1.5rem;color:var(--text)}
.layout-serpentine p,.layout-zigzag p{margin-bottom:var(--spacing-sm);line-height:1.6}
.layout-serpentine ul,.layout-zigzag ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-md)}
.layout-serpentine li,.layout-zigzag li{margin-bottom:var(--spacing-xs);line-height:1.6}
.etapas,.puntos{padding-left:var(--spacing-lg);margin:var(--spacing-sm) 0}
.microtips{margin:var(--spacing-md) 0;padding:var(--spacing-md);background:var(--panel);border-radius:var(--radius);border:1px solid var(--line)}
.microtips h3{margin-bottom:var(--spacing-sm);color:var(--text);font-size:1.25rem}
.microtips dt{font-weight:700;margin-top:var(--spacing-sm);color:var(--text)}
.microtips dd{margin:0 0 var(--spacing-xs) 0;color:var(--muted);line-height:1.6}
.legal{padding:var(--spacing-xl) var(--spacing-lg);max-width:70ch;margin:0 auto;line-height:1.6}
.legal h1{margin-bottom:var(--spacing-lg);font-size:2rem}
.legal h2{margin:var(--spacing-lg) 0 var(--spacing-sm) 0;font-size:1.5rem;color:var(--text)}
.legal p{margin-bottom:var(--spacing-sm);line-height:1.6}
.contacto .form{display:grid;gap:var(--spacing-sm);padding:var(--spacing-xl) var(--spacing-lg);max-width:60ch;margin:0 auto}
.contacto h1{margin-bottom:var(--spacing-lg);font-size:2rem;text-align:center}
.contacto p{margin-bottom:var(--spacing-md);line-height:1.6;text-align:center}
.form input,.form textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);transition:border-color 0.2s ease;font-size:1rem}
.form label{margin-bottom:var(--spacing-xs);font-weight:600;color:var(--text)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.form .check{font-size:.95rem;color:var(--muted);margin-top:var(--spacing-xs)}
.form .howto{margin-top:var(--spacing-md);padding:var(--spacing-sm);background:rgba(5,150,105,.1);border-radius:8px;font-size:.9rem;color:var(--muted)}
/* FAQ section */
.faq{padding:var(--spacing-xl) var(--spacing-lg);max-width:70ch;margin:0 auto}
.faq h2{margin-bottom:var(--spacing-lg);font-size:1.75rem;text-align:center;color:var(--text)}
.faq details{margin-bottom:var(--spacing-sm);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.faq summary{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-weight:600;color:var(--text);background:rgba(5,150,105,.05);border-radius:var(--radius)}
.faq summary:hover{background:rgba(5,150,105,.1)}
.faq p{padding:var(--spacing-sm) var(--spacing-md);margin:0;line-height:1.6;color:var(--muted)}
/* Product section */
.producto-lite{padding:var(--spacing-xl) var(--spacing-lg);text-align:center;background:var(--panel);margin:var(--spacing-lg) 0;border-radius:var(--radius);border:1px solid var(--line)}
.producto-lite h2{margin-bottom:var(--spacing-sm);font-size:1.5rem;color:var(--text)}
.producto-lite p{margin-bottom:var(--spacing-md);line-height:1.6;color:var(--muted)}
/* Cookie banner */
.cookie-banner{position:fixed;inset:auto var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--spacing-md);max-width:720px;margin:0 auto;z-index:9999;box-shadow:var(--shadow-lg)}
.cookie-inner h2{margin:var(--spacing-xs) 0 var(--spacing-sm) 0;font-size:1.25rem}
.cookie-inner p{margin-bottom:var(--spacing-sm);line-height:1.6}
.cookie-actions{display:flex;gap:var(--spacing-xs);flex-wrap:wrap;margin:var(--spacing-sm) 0}
.cookie-noscript{position:fixed;left:0;right:0;bottom:0;background:var(--text);padding:.75rem;color:white;z-index:9998}
/* Responsive design */
@media (max-width:800px){
  .split-panels{grid-template-columns:1fr;gap:var(--spacing-md)}
  .site-header,.site-footer{flex-direction:column;text-align:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}
  .site-nav ul{justify-content:center}
  .grid-rutas{grid-template-columns:1fr;padding:var(--spacing-md) var(--spacing-sm)}
  .hero-chip{position:static;margin:var(--spacing-sm);text-align:center}
  .layout-serpentine,.layout-zigzag{padding:var(--spacing-md) var(--spacing-sm)}
  .panel-cards .cards{padding:var(--spacing-md) var(--spacing-sm)}
  .faq{padding:var(--spacing-md) var(--spacing-sm)}
  .producto-lite{padding:var(--spacing-md) var(--spacing-sm)}
  .legal{padding:var(--spacing-md) var(--spacing-sm)}
  .contacto .form{padding:var(--spacing-md) var(--spacing-sm)}
}

@media (max-width:480px){
  .site-header,.site-footer{padding:var(--spacing-sm)}
  .grid-rutas{padding:var(--spacing-sm)}
  .split-panels{padding:var(--spacing-sm)}
  .btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:0.9rem}
  .layout-serpentine h1,.layout-zigzag h1{font-size:1.5rem}
  .legal h1{font-size:1.5rem}
  .contacto h1{font-size:1.5rem}
  .faq h2{font-size:1.5rem}
}