/* =====================================================
   Moventia — Marketplace de tecnología para movilidad urbana
   Hoja de estilos principal
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --color-white:#FFFFFF;
  --color-blue-deep:#173F5F;
  --color-mint:#4E9F7A;
  --color-slate:#334155;
  --color-sand:#E9DFC8;
  --color-gray-light:#F8FAFC;

  --font-heading:'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-soft:0 4px 20px rgba(23,63,95,0.08);
  --shadow-hover:0 10px 30px rgba(23,63,95,0.14);

  --max-width:1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--color-slate);
  background:var(--color-white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto;}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--color-blue-deep);
  line-height:1.25;
  font-weight:700;
}

h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
h3{font-size:1.3rem;}

p{margin-bottom:1rem;}

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

/* ============ HEADER ============ */
.site-header{
  border-bottom:1px solid #E2E8F0;
  background:var(--color-white);
  position:sticky;
  top:0;
  z-index:500;
}

.header-top{
  background:var(--color-blue-deep);
  color:var(--color-white);
  font-size:0.82rem;
}

.header-top .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  flex-wrap:wrap;
  gap:8px;
}

.header-top a{opacity:0.9;}
.header-top a:hover{opacity:1;text-decoration:underline;}
.header-top-links{display:flex;gap:18px;flex-wrap:wrap;}

.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  gap:24px;
}

.logo{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.5rem;
  color:var(--color-blue-deep);
  letter-spacing:-0.02em;
}
.logo span{color:var(--color-mint);}

.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav ul{display:flex;gap:24px;flex-wrap:wrap;}
.main-nav a{
  font-weight:600;
  font-size:0.95rem;
  color:var(--color-slate);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover, .main-nav a.active{
  color:var(--color-blue-deep);
  border-bottom-color:var(--color-mint);
}

.header-actions{display:flex;align-items:center;gap:14px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  border-radius:var(--radius-md);
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-primary{background:var(--color-mint);color:var(--color-white);}
.btn-primary:hover{background:#437f63;box-shadow:var(--shadow-hover);}
.btn-outline{background:transparent;border-color:var(--color-blue-deep);color:var(--color-blue-deep);}
.btn-outline:hover{background:var(--color-blue-deep);color:var(--color-white);}
.btn-sand{background:var(--color-sand);color:var(--color-blue-deep);}
.btn-sand:hover{background:#ddcfa9;}
.btn-sm{padding:9px 16px;font-size:0.85rem;}
.btn-block{width:100%;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{width:26px;height:2px;background:var(--color-blue-deep);display:block;}

/* ============ BREADCRUMB ============ */
.breadcrumb{
  background:var(--color-gray-light);
  padding:14px 0;
  border-bottom:1px solid #E2E8F0;
}
.breadcrumb .container{display:flex;gap:8px;flex-wrap:wrap;font-size:0.85rem;color:var(--color-slate);}
.breadcrumb a{color:var(--color-blue-deep);font-weight:500;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:#94A3B8;}
.breadcrumb .current{color:#64748B;}

/* ============ HERO ============ */
.hero{
  padding:64px 0 56px;
  background:var(--color-gray-light);
}
.hero .container{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero-eyebrow{
  font-weight:700;
  color:var(--color-mint);
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.08em;
  margin-bottom:12px;
}
.hero h1{margin-bottom:18px;}
.hero p.lead{font-size:1.08rem;color:var(--color-slate);max-width:560px;margin-bottom:28px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);}
.hero-stats{
  display:flex;
  gap:32px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-stats div strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.5rem;
  color:var(--color-blue-deep);
}
.hero-stats div span{font-size:0.85rem;color:#64748B;}

.page-hero{
  padding:48px 0 40px;
  background:var(--color-gray-light);
  border-bottom:1px solid #E2E8F0;
}
.page-hero h1{margin-bottom:14px;}
.page-hero p{max-width:760px;color:var(--color-slate);}

/* ============ SECTIONS ============ */
section{padding:64px 0;}
.section-tight{padding:40px 0;}
.section-alt{background:var(--color-gray-light);}
.section-head{max-width:720px;margin-bottom:40px;}
.section-head p{color:var(--color-slate);}
.section-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

/* ============ CATEGORY GRID ============ */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
}
.category-card{
  background:var(--color-white);
  border:1px solid #E2E8F0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.category-card img{height:170px;object-fit:cover;width:100%;}
.category-card-body{padding:20px;}
.category-card-body h3{margin-bottom:8px;font-size:1.1rem;}
.category-card-body p{font-size:0.9rem;color:#64748B;margin-bottom:14px;}
.category-card-body a{font-weight:600;color:var(--color-mint);font-size:0.9rem;}

/* ============ PRODUCT GRID / CARDS ============ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:24px;
}
.product-card{
  background:var(--color-white);
  border:1px solid #E2E8F0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.product-card img{height:190px;object-fit:cover;width:100%;background:var(--color-gray-light);}
.product-card-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-card-tag{font-size:0.72rem;font-weight:700;color:var(--color-mint);text-transform:uppercase;letter-spacing:0.05em;}
.product-card h3{font-size:1.02rem;}
.product-card-specs{font-size:0.83rem;color:#64748B;}
.product-card-price{font-family:var(--font-heading);font-weight:800;color:var(--color-blue-deep);font-size:1.15rem;margin-top:auto;}
.product-card-actions{display:flex;gap:8px;margin-top:10px;}
.fav-btn{
  border:1px solid #E2E8F0;
  background:var(--color-white);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  cursor:pointer;
  font-size:0.85rem;
}
.fav-btn.is-active{border-color:var(--color-mint);color:var(--color-mint);}

/* ============ FILTER SIDEBAR ============ */
.layout-with-sidebar{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:36px;
  align-items:flex-start;
}
.filters-panel{
  background:var(--color-white);
  border:1px solid #E2E8F0;
  border-radius:var(--radius-lg);
  padding:24px;
  position:sticky;
  top:96px;
}
.filters-panel h3{font-size:1rem;margin-bottom:16px;}
.filter-group{margin-bottom:22px;border-bottom:1px solid #EEF2F6;padding-bottom:18px;}
.filter-group:last-child{border-bottom:none;}
.filter-group h4{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--color-slate);margin-bottom:10px;}
.filter-option{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:0.9rem;}
.filter-option input{accent-color:var(--color-mint);}
.range-row{display:flex;gap:8px;}
.range-row input{width:100%;padding:8px 10px;border:1px solid #E2E8F0;border-radius:var(--radius-sm);font-size:0.85rem;}

.results-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}
.results-toolbar select{
  padding:9px 14px;
  border:1px solid #E2E8F0;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  background:var(--color-white);
}

/* ============ COMPARISON TABLE ============ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid #E2E8F0;}
table.compare-table{width:100%;border-collapse:collapse;min-width:720px;background:var(--color-white);}
table.compare-table th, table.compare-table td{
  padding:14px 18px;
  text-align:left;
  font-size:0.9rem;
  border-bottom:1px solid #EEF2F6;
  white-space:nowrap;
}
table.compare-table thead th{
  background:var(--color-blue-deep);
  color:var(--color-white);
  font-family:var(--font-heading);
  font-weight:700;
  white-space:nowrap;
}
table.compare-table tbody tr:nth-child(even){background:var(--color-gray-light);}
table.compare-table tbody th{color:var(--color-blue-deep);font-weight:700;background:var(--color-white);}

/* ============ CONTENT / GUIDES / BLOG ============ */
.article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
}
.article-card{
  border:1px solid #E2E8F0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-white);
  transition:box-shadow .2s ease, transform .2s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.article-card img{height:180px;object-fit:cover;width:100%;}
.article-card-body{padding:20px;}
.article-meta{font-size:0.78rem;color:#94A3B8;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.04em;}
.article-card h3{font-size:1.05rem;margin-bottom:8px;}
.article-card p{font-size:0.9rem;color:#64748B;}

.prose{max-width:760px;}
.prose h2{margin-top:36px;margin-bottom:14px;}
.prose h3{margin-top:26px;margin-bottom:10px;}
.prose p{color:var(--color-slate);}
.prose ul{margin:0 0 20px 20px;list-style:disc;color:var(--color-slate);}
.prose li{margin-bottom:8px;}
.prose img{border-radius:var(--radius-lg);margin:28px 0;}

.callout{
  background:var(--color-gray-light);
  border-left:4px solid var(--color-mint);
  padding:18px 22px;
  border-radius:var(--radius-md);
  margin:24px 0;
  font-size:0.95rem;
}

/* ============ FEATURES / STEPS ============ */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:28px;
}
.step-card h3{font-size:1.05rem;margin-bottom:8px;}
.step-card p{font-size:0.9rem;color:#64748B;}
.step-card .step-index{
  font-family:var(--font-heading);
  font-weight:800;
  color:var(--color-mint);
  font-size:0.85rem;
  margin-bottom:10px;
  letter-spacing:0.05em;
}

/* ============ CTA BAND ============ */
.cta-band{
  background:var(--color-blue-deep);
  color:var(--color-white);
  border-radius:var(--radius-lg);
  padding:48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.cta-band h2{color:var(--color-white);}
.cta-band p{color:#CBD5E1;}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid #E2E8F0;padding:18px 0;}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--color-blue-deep);font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--color-mint);}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{margin-top:12px;color:#64748B;font-size:0.95rem;}

/* ============ FORMS ============ */
.form-card{
  background:var(--color-white);
  border:1px solid #E2E8F0;
  border-radius:var(--radius-lg);
  padding:32px;
}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-weight:600;font-size:0.88rem;margin-bottom:6px;color:var(--color-slate);}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #E2E8F0;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:0.95rem;
  background:var(--color-gray-light);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:2px solid var(--color-mint);
  background:var(--color-white);
}
.form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-success{
  display:none;
  background:#ECFDF5;
  border:1px solid var(--color-mint);
  color:#1F5F44;
  padding:16px 20px;
  border-radius:var(--radius-md);
  margin-bottom:20px;
  font-weight:600;
  font-size:0.92rem;
}
.form-success.is-visible{display:block;}

.info-list{display:grid;gap:16px;margin-top:20px;}
.info-list li{display:flex;gap:12px;font-size:0.95rem;}
.info-list strong{color:var(--color-blue-deep);min-width:120px;display:inline-block;}

/* ============ LEGAL PAGES ============ */
.legal-content{max-width:820px;}
.legal-content h2{margin-top:34px;margin-bottom:12px;font-size:1.3rem;}
.legal-content h3{margin-top:22px;margin-bottom:10px;}
.legal-content p, .legal-content li{color:var(--color-slate);font-size:0.97rem;}
.legal-content ul{margin:0 0 18px 20px;list-style:disc;}
.legal-content ol{margin:0 0 18px 20px;}
.legal-toc{
  background:var(--color-gray-light);
  border-radius:var(--radius-md);
  padding:22px 26px;
  margin-bottom:36px;
}
.legal-toc h2{font-size:1rem;margin-bottom:12px;}
.legal-toc ol{margin-left:18px;}
.legal-toc a{color:var(--color-blue-deep);font-weight:600;}
.legal-updated{font-size:0.85rem;color:#94A3B8;margin-bottom:24px;}

/* ============ SITEMAP ============ */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:32px;}
.sitemap-grid h3{font-size:1rem;margin-bottom:14px;border-bottom:2px solid var(--color-sand);padding-bottom:8px;}
.sitemap-grid li{margin-bottom:10px;font-size:0.92rem;}
.sitemap-grid a:hover{color:var(--color-mint);}

/* ============ FOOTER ============ */
.site-footer{background:var(--color-blue-deep);color:#CBD5E1;padding:56px 0 0;margin-top:64px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-col h4{color:var(--color-white);font-family:var(--font-heading);font-size:0.95rem;margin-bottom:16px;letter-spacing:0.02em;}
.footer-col p{color:#94A3B8;font-size:0.88rem;}
.footer-col ul li{margin-bottom:10px;font-size:0.88rem;}
.footer-col a{color:#CBD5E1;}
.footer-col a:hover{color:var(--color-mint);}
.footer-logo{font-family:var(--font-heading);font-weight:800;font-size:1.4rem;color:var(--color-white);margin-bottom:12px;display:block;}
.footer-logo span{color:var(--color-mint);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0;
  font-size:0.82rem;
  color:#94A3B8;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a{color:#94A3B8;}
.footer-bottom a:hover{color:var(--color-mint);}

/* ============ UTILITIES ============ */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.badge-note{font-size:0.8rem;color:#64748B;}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .hero .container{grid-template-columns:1fr;}
  .layout-with-sidebar{grid-template-columns:1fr;}
  .filters-panel{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 720px){
  .main-nav{
    position:fixed;
    top:0;right:0;bottom:0;
    width:78%;
    max-width:320px;
    background:var(--color-white);
    flex-direction:column;
    align-items:flex-start;
    padding:90px 28px 28px;
    transform:translateX(100%);
    transition:transform .25s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,0.12);
    z-index:600;
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:18px;width:100%;}
  .nav-toggle{display:flex;}
  .header-actions .btn-outline{display:none;}
  .cta-band{flex-direction:column;text-align:center;}
  .footer-grid{grid-template-columns:1fr;}
  .form-two-col{grid-template-columns:1fr;}
}