/* === CRITICAL ABOVE-THE-FOOD CSS ONLY === */
/* Inline this in <style> tag for fastest FCP */

:root {
  --color-primary: #1e40af;    /* Trust blue */
  --color-secondary: #059669;  /* WhatsApp green */
  --color-accent: #f59e0b;     /* CTA orange */
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem;
  --radius: 0.5rem; --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);line-height:1.5;color:var(--color-text);background:var(--color-bg)}

/* Skip Link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000}
.skip-link:focus{left:0;top:0;width:auto;height:auto;padding:var(--spacing-md);background:var(--color-primary);color:#fff;text-decoration:none}

/* Persistent Contact Bar - Fixed Top */
.contact-bar{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,var(--color-primary),#1d4ed8);color:#fff;padding:var(--spacing-xs) 0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.contact-bar__container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;justify-content:center}
.contact-bar__link{display:flex;align-items:center;gap:var(--spacing-xs);color:#fff;text-decoration:none;font-weight:500;font-size:0.875rem;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius);transition:background 0.2s}
.contact-bar__link:hover{background:rgba(255,255,255,0.1)}
.contact-bar__link--whatsapp{background:var(--color-secondary)}
.contact-bar__badge{background:var(--color-accent);color:#000;padding:2px 8px;border-radius:999px;font-size:0.75rem;font-weight:600}
.icon{width:16px;height:16px;flex-shrink:0}

/* Header */
.header{position:sticky;top:40px;z-index:999;background:#fff;box-shadow:var(--shadow)}
.header__container{max-width:1200px;margin:0 auto;padding:var(--spacing-md);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:var(--spacing-xs);text-decoration:none;color:var(--color-primary);font-weight:700;font-size:1.25rem}
.logo__highlight{color:var(--color-secondary)}
.logo__tagline{display:none;font-size:0.75rem;color:#6b7280;margin-left:var(--spacing-xs)}
@media(min-width:768px){.logo__tagline{display:inline}}

/* Navigation */
.nav{display:flex;align-items:center}
.nav__menu{display:none;list-style:none;gap:var(--spacing-md);margin:0;padding:0}
.nav__link{color:var(--color-text);text-decoration:none;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius);transition:color 0.2s}
.nav__link:hover,.nav__link:focus{color:var(--color-primary)}
.nav__link--cta{background:var(--color-secondary);color:#fff;padding:var(--spacing-xs) var(--spacing-lg)}
.nav__toggle{display:block;background:none;border:0;padding:var(--spacing-xs);cursor:pointer}
.nav__toggle-icon{display:block;width:24px;height:2px;background:var(--color-text);position:relative}
.nav__toggle-icon::before,.nav__toggle-icon::after{content:'';position:absolute;width:100%;height:2px;background:inherit;left:0}
.nav__toggle-icon::before{top:-6px}.nav__toggle-icon::after{top:6px}
@media(min-width:768px){
  .nav__menu{display:flex}
  .nav__toggle{display:none}
  .nav__dropdown{position:relative}
  .nav__submenu{position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:var(--shadow);border-radius:var(--radius);padding:var(--spacing-sm);display:none;flex-direction:column;gap:var(--spacing-xs);z-index:100}
  .nav__dropdown:hover .nav__submenu{display:flex}
  .nav__submenu a{padding:var(--spacing-xs);color:var(--color-text);text-decoration:none;border-radius:var(--radius)}
  .nav__submenu a:hover{background:var(--color-bg-alt)}
}

/* Hero Section */
.hero{padding:var(--spacing-xl) var(--spacing-md);background:linear-gradient(135deg,#f0f9ff,#e0f2fe);text-align:center}
.hero__title{font-size:1.75rem;font-weight:800;color:var(--color-primary);margin-bottom:var(--spacing-md);line-height:1.2}
.hero__subtitle{font-size:1.125rem;color:#4b5563;margin-bottom:var(--spacing-lg);max-width:700px;margin-left:auto;margin-right:auto}
.hero__actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-lg)}
.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius);font-weight:600;text-decoration:none;transition:transform 0.1s,box-shadow 0.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--secondary{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary)}
.btn--whatsapp{background:var(--color-secondary);color:#fff}
.hero__trust-badges{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;font-size:0.875rem;color:#374151}
.hero__placeholder{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:var(--radius);padding:var(--spacing-xl);font-size:1.25rem;font-weight:500;color:var(--color-primary);margin-top:var(--spacing-lg)}

/* Sections */
.section{padding:var(--spacing-xl) var(--spacing-md)}
.section--alt{background:var(--color-bg-alt)}
.section__container{max-width:1200px;margin:0 auto}
.section__title{font-size:1.5rem;font-weight:700;color:var(--color-primary);text-align:center;margin-bottom:var(--spacing-sm)}
.section__subtitle{text-align:center;color:#6b7280;margin-bottom:var(--spacing-xl);max-width:600px;margin-left:auto;margin-right:auto}

/* Services Grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg)}
.service-card{background:#fff;border-radius:var(--radius);padding:var(--spacing-lg);box-shadow:var(--shadow);transition:transform 0.2s}
.service-card:hover{transform:translateY(-2px)}
.service-card__icon{font-size:2rem;margin-bottom:var(--spacing-md)}
.service-card__title{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text)}
.service-card__description{color:#4b5563;margin-bottom:var(--spacing-md);font-size:0.9375rem}
.service-card__features{list-style:none;margin-bottom:var(--spacing-md);font-size:0.875rem;color:#374151}
.service-card__features li{margin-bottom:var(--spacing-xs);padding-left:1.25rem;position:relative}
.service-card__features li::before{content:'✓';position:absolute;left:0;color:var(--color-secondary);font-weight:700}

/* Packages Grid */
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg)}
.package-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.package-card__image{background:linear-gradient(135deg,#dbeafe,#93c5fd);padding:var(--spacing-lg);text-align:center;font-size:2rem}
.package-card__content{padding:var(--spacing-lg);flex:1;display:flex;flex-direction:column}
.package-card__title{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm)}
.package-card__description{color:#4b5563;font-size:0.9375rem;margin-bottom:var(--spacing-md);flex:1}
.package-card__features{list-style:none;font-size:0.875rem;color:#374151;margin-bottom:var(--spacing-md)}
.package-card__footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-md);border-top:1px solid #e5e7eb}
.package-card__price{font-weight:700;color:var(--color-primary)}

/* Fleet Grid */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-lg)}
.fleet-card{background:#fff;border-radius:var(--radius);padding:var(--spacing-lg);box-shadow:var(--shadow);text-align:center;position:relative}
.fleet-card--premium{border:2px solid var(--color-accent)}
.fleet-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}
.fleet-card__seats{font-weight:700;color:var(--color-primary)}
.fleet-card__type{font-size:0.875rem;color:#6b7280}
.fleet-card__badge{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:var(--color-accent);color:#000;padding:2px 6px;border-radius:999px;font-size:0.75rem;font-weight:600}
.fleet-card__image{font-size:2.5rem;margin:var(--spacing-md) 0}
.fleet-card__features{list-style:none;text-align:left;font-size:0.875rem;color:#374151;margin-bottom:var(--spacing-md)}
.fleet-card__pricing{margin-bottom:var(--spacing-md)}
.fleet-card__price{display:block;font-size:1.25rem;font-weight:700;color:var(--color-primary)}
.fleet-card__note{font-size:0.75rem;color:#6b7280}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{background:#fff;border-radius:var(--radius);margin-bottom:var(--spacing-sm);box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{padding:var(--spacing-md);font-weight:600;cursor:pointer;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.25rem;font-weight:300}
.faq-item[open] summary::after{content:'−'}
.faq-item__content{padding:0 var(--spacing-md) var(--spacing-md);color:#4b5563;border-top:1px solid #e5e7eb}

/* Contact Form */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1.5fr}}
.contact-methods{display:flex;flex-direction:column;gap:var(--spacing-md)}
.contact-method{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit}
.contact-method__icon{font-size:1.5rem}
.quote-form{background:#fff;padding:var(--spacing-lg);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-group{margin-bottom:var(--spacing-md)}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:500;margin-bottom:var(--spacing-xs);font-size:0.9375rem}
input,select,textarea{width:100%;padding:var(--spacing-sm);border:1px solid #d1d5db;border-radius:var(--radius);font-size:1rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--color-primary);border-color:transparent}
.btn--full{width:100%;justify-content:center}
.form-note{font-size:0.875rem;color:#6b7280;text-align:center;margin-top:var(--spacing-sm)}

/* Footer */
.footer{background:#1f2937;color:#d1d5db;padding:var(--spacing-xl) var(--spacing-md)}
.footer__container{max-width:1200px;margin:0 auto}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}
@media(min-width:768px){.footer__grid{grid-template-columns:2fr 1fr 1fr 1.5fr}}
.footer__brand .logo__text{color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:var(--spacing-md);display:block}
.footer__badges{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-md);font-size:0.875rem}
.footer__links h4{color:#fff;font-weight:600;margin-bottom:var(--spacing-sm)}
.footer__links ul{list-style:none}
.footer__links a{color:#9ca3af;text-decoration:none;display:block;padding:var(--spacing-xs) 0}
.footer__links a:hover{color:#fff}
.footer__contact address{font-style:normal;line-height:1.6;margin-bottom:var(--spacing-md)}
.footer__bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid #374151;font-size:0.875rem}
.footer__seo{color:#6b7280;margin-top:var(--spacing-xs)}

/* Responsive */
@media(max-width:640px){
  .hero__title{font-size:1.5rem}
  .hero__subtitle{font-size:1rem}
  .section__title{font-size:1.25rem}
  .contact-bar__container{justify-content:flex-start;overflow-x:auto;padding:0 var(--spacing-sm)}
  .contact-bar__link span{display:none}
  .contact-bar__link .icon{margin:0}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:high){.btn{border:2px solid currentColor}}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}