/* ==========================================================================
   Grupo FideCS — styles.css (base)
   --------------------------------------------------------------------------
   - Paleta de marca y tokens
   - Botones gradiente + CTA
   - Tarjetas (vehículos, casos, testimonios)
   - Animaciones de aparición (reveal) y brillo (sheen)
   - Utilidades: sombras, wrapping de texto, hero chart tweaks
   ========================================================================== */

/* ---------------------- Brand tokens ---------------------- */
:root{
  --brand-1:#0ea5e9;   /* sky-500 */
  --brand-2:#2563eb;   /* blue-600 */
  --brand-3:#6366f1;   /* indigo-500 */
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-600:#475569;
  --muted:#e2e8f0;
  --radius-xl: 16px;
}

html{ scroll-behavior:smooth; }

/* ---------------------- Utilities ---------------------- */
.break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
.shadow-soft{ box-shadow:0 6px 30px rgba(15,23,42,.06),0 2px 10px rgba(15,23,42,.03); }
.shadow-soft-lg{ box-shadow:0 20px 60px rgba(15,23,42,.12),0 8px 20px rgba(15,23,42,.06); }

.section-title{ letter-spacing:-.02em; }
.section-sub{ max-width:60ch; margin-inline:auto; }

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.25rem .75rem; font-size:.8rem;
  border-radius:999px; background:linear-gradient(90deg,#f8fafc,#f1f5f9);
  color:#0f172a; box-shadow:0 1px 3px rgba(15,23,42,.06);
}

/* ---------------------- Buttons ---------------------- */
.btn-gradient{
  background-image:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3));
  color:#fff; font-weight:600; border-radius:12px; padding:.85rem 1.15rem;
  box-shadow:0 10px 26px rgba(37,99,235,.28);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-gradient:hover{ transform:translateY(-1px); filter:saturate(1.05); box-shadow:0 16px 36px rgba(37,99,235,.36); }
.btn-gradient[disabled]{ opacity:.7; cursor:not-allowed; transform:none; }

a.cta{
  border-radius:12px; padding:.55rem 1rem; font-weight:600; color:#fff!important;
  background-image:linear-gradient(90deg,var(--brand-1),var(--brand-2),var(--brand-3));
  box-shadow:0 8px 24px rgba(37,99,235,.25);
  transition:transform .15s ease, box-shadow .2s ease;
}
a.cta:hover{ transform:translateY(-1px); box-shadow:0 12px 32px rgba(37,99,235,.35); }

/* ---------------------- Animations ---------------------- */
@keyframes reveal { from{opacity:0; transform: translateY(18px)} to{opacity:1; transform:none} }
.animate-reveal{ opacity:0; transform:translateY(18px); }
.reveal-now{ animation:reveal .7s var(--delay,0s) ease both; }

@keyframes sheen { 0%{background-position:0% 0;} 100%{background-position:300% 0;} }
@keyframes floatY { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

/* ---------------------- Vehicle cards ---------------------- */
.vehicle-card{ border-radius:20px; overflow:hidden; filter:saturate(.98); }
.vehicle-card .cap{ height:126px; }
.vehicle-card .cap.sky{ background:linear-gradient(180deg,#e0f2fe,#fff); }
.vehicle-card .cap.amber{ background:linear-gradient(180deg,#fef3c7,#fff); }
.vehicle-card .cap.emerald{ background:linear-gradient(180deg,#d1fae5,#fff); }
.vehicle-card:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(15,23,42,.12); }
.vehicle-card .p-6{ border-bottom-left-radius:20px; border-bottom-right-radius:20px; }

/* ---------------------- Casos & Testimonios ---------------------- */
.case-card{ position:relative; overflow:hidden; }
.case-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px; z-index:1;
  background:linear-gradient(90deg, #38bdf8, #22c55e, #f59e0b, #6366f1);
  background-size:300% 100%; animation: sheen 8s linear infinite;
}
.case-card:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(15,23,42,.12); }

.testimonial-card{ position:relative; }
.testimonial-card::before{
  content:"“"; position:absolute; top:10px; left:16px; font-size:44px; line-height:1;
  color:rgba(99,102,241,.18); font-family:serif; pointer-events:none;
}

/* ---------------------- Contact tiles ---------------------- */
.info-tile{ display:flex; height:100%; }
.info-wrap{ overflow-wrap:anywhere; word-break:break-word; }
.info-text{ line-height:1.2; }

/* ---------------------- Inputs (contact form) ---------------------- */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea{
  border-radius:12px; border:1px solid #cbd5e1; padding:.7rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#contactForm input:focus, #contactForm textarea:focus{
  border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.2);
}

/* ---------------------- Hero chart tweaks ---------------------- */
#heroChart text{ font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial; }
#heroChart .chart-dots circle{ filter: drop-shadow(0 1px 4px rgba(2,132,199,.35)); }
#heroChart .chart-dots circle:nth-child(1){ animation: floatY 2.4s ease-in-out infinite; }
#heroChart .chart-dots circle:nth-child(2){ animation: floatY 2.6s ease-in-out infinite .2s; }
#heroChart .chart-dots circle:nth-child(3){ animation: floatY 2.8s ease-in-out infinite .4s; }
#heroChart .chart-dots circle:nth-child(4){ animation: floatY 3.0s ease-in-out infinite .6s; }

/* ---------------------- Small helpers ---------------------- */
.quote{ color:var(--ink-700); font-style:italic; }
.byline{ color:var(--ink-600); font-size:.9rem; }


/* Usability, navigation and accessibility */
[hidden]{display:none!important}
section[id],main[id]{scroll-margin-top:88px}
:focus-visible{outline:3px solid #1d4ed8;outline-offset:4px}
.skip-link{position:fixed;top:8px;left:12px;z-index:100;background:#fff;color:#1e40af;padding:12px 18px;border:2px solid #1e40af;border-radius:8px;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.desktop-nav{display:flex}
.mobile-nav{display:none}
.menu-toggle{align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #cbd5e1;border-radius:10px;font-weight:600;color:#1e40af;background:white}
.mobile-nav a{padding:12px 24px;font-weight:600;color:#334155;min-height:44px}
.mobile-nav a:hover{background:#eff6ff}
.chart-caption,.metric-note{font-size:12px;line-height:1.6;color:#475569;margin-top:12px}
.form-help{font-size:13px;line-height:1.6;color:#475569;margin-top:16px;overflow-wrap:anywhere}
.form-help a,.footer-privacy{color:#1d4ed8;text-decoration:underline;text-underline-offset:3px}
.footer-privacy{display:inline-block;margin-left:12px;padding-block:8px}
.form-message{margin-top:16px;padding:12px 14px;border-radius:10px;line-height:1.6;background:#f0fdf4;color:#166534}
.form-message[data-kind="error"]{color:#9f1239;background:#fff1f2}
#contactForm input,#contactForm textarea{font-size:16px}
#contactForm button{min-height:48px}
.animate-reveal{opacity:1;transform:none}
.vehicle-card .cap{height:64px}
.vehicle-card{display:flex;flex-direction:column}
.vehicle-card>.p-6{flex:1}
.info-tile>div{min-width:0}
.info-tile span.inline-flex{flex-shrink:0}
.btn-gradient,a.cta{background-image:linear-gradient(100deg,#0369a1,#1d4ed8,#4338ca)}
@media(max-width:900px){
 .desktop-nav{display:none}
 .menu-toggle:not([hidden]){display:inline-flex}
 .mobile-nav:not([hidden]){display:flex;flex-direction:column;border-top:1px solid #e2e8f0;background:#fff}
 #site-header:has(#menu-toggle:not([hidden])) .mobile-nav[hidden]{display:none}
 #site-header>div{padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .animate-reveal{opacity:1!important;transform:none!important}
}
.menu-toggle{display:none}
@media(max-width:900px){.menu-toggle:not([hidden]){display:inline-flex}}
#heroChart text{stroke:none;fill:#475569;font-size:14px}
.testimonial-card::before{content:none}