/* ==========================================================================
   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; }