/* Custom minimal additions over Tailwind for subtle effects and global typography */

:root{--c-bg:#ffffff;--c-border:#e2e8f0;--c-border-soft:#eef2f6;--c-primary:#c1121f;--c-accent:#c1121f;--c-text:#0f172a;--c-muted:#64748b;--radius:1.1rem;--shadow-sm:0 1px 2px -1px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px -4px rgba(0,0,0,.08),0 8px 24px -6px rgba(0,0,0,.08);--shadow-focus:0 0 0 3px rgba(193,18,31,.15),0 2px 6px -1px rgba(0,0,0,.1)}

body{font-family:'Inter',system-ui,sans-serif}

/* Utility: keep minimal wrappers safe, no dark theme defaults here */
.hero-video-wrapper { position:relative; }
.hero-video-wrapper video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.backdrop-blur-card { backdrop-filter:blur(14px); }
.form-shadow { box-shadow:0 10px 35px -10px rgba(0,0,0,.12), 0 4px 12px -2px rgba(0,0,0,.08); }
.section-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); }

/* Site-wide readable scale when body (or html) has .bigfont */
/* Updated to match index.php preference */
.bigfont{font-size:17px;line-height:1.5}
@media(min-width:1024px){.bigfont{font-size:18px}}
.bigfont h1{letter-spacing:-.02em}
.bigfont h2{letter-spacing:-.015em}

/* Headings scale up slightly over Tailwind defaults */
.bigfont main h1 { font-size: clamp(2.2rem, 3.4vw + 0.6rem, 3.4rem); line-height:1.08; }
.bigfont main h2 { font-size: clamp(1.7rem, 2.2vw + 0.5rem, 2.4rem); line-height:1.15; }
.bigfont main h3 { font-size: clamp(1.25rem, 1.2vw + 0.6rem, 1.5rem); line-height:1.2; }

/* Body text: paragraphs, lists, and links in main/footer */
.bigfont main p,
.bigfont main li { font-size: 0.98rem; }
.bigfont footer p,
.bigfont footer li,
.bigfont footer a,
.bigfont footer h3 { font-size: 0.95rem; }

/* Ensure footer links don't appear larger than surrounding text */
footer a { font-size: inherit !important; line-height: inherit; }

/* Preserve tiny UI chips/badges and legal microcopy */
/* Keep intentionally small utility sizes approximately small; avoid targeting arbitrary-value classes */
.bigfont .text-xs { font-size: 0.78rem; }

/* KPI numbers: larger, bold, tight leading */
.bigfont .kpi-number {
	font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.kpi-number{font-size:clamp(2.2rem,5vw,3.3rem);line-height:1;font-weight:700;letter-spacing:-.02em} /* From index */

/* Shared components from index */
.focusable:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:6px}
.btn-gradient{background:linear-gradient(90deg,var(--c-primary),#c93a45)}
.btn-gradient:hover{filter:brightness(1.05)}
.card{border:1px solid var(--c-border);background:rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:.4s cubic-bezier(.4,0,.2,1)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.timeline-step{position:relative}
.timeline-step:before{display:none}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="200"]{transition-delay:.2s}
.reveal[data-delay="300"]{transition-delay:.3s}
.gradient-noise:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),transparent 60%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.06),transparent 65%);mix-blend-mode:overlay;pointer-events:none}
.mask-fade-r{mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.92) 20%,#000 55%,rgba(0,0,0,.85) 75%,transparent)}

/* Background art utilities (updated with side imagery) */
.bg-art-left,.bg-art-right{position:relative;overflow:hidden}
.bg-art-left:before,.bg-art-right:before{content:"";position:absolute;inset:0;pointer-events:none;background-size:900px;background-repeat:no-repeat;mix-blend-mode:normal;opacity:.15;filter:saturate(95%) contrast(105%)}
.bg-art-left:before{background-position:-120px center,center;background-image:url('../img/ASISTENCIA VEHICULOS LIGEROS/DSC_2201.jpg');mask-image:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.65) 45%,transparent 75%)}
.bg-art-right:before{background-position:right -120px center,center;background-image:url('../img/ASISTENCIA VEHICULOS PESADOS/DSC_2196.jpg');mask-image:linear-gradient(to left,rgba(0,0,0,.9),rgba(0,0,0,.55) 45%,transparent 75%)}
/* subtle overlay for readability */
.bg-art-left:after,.bg-art-right:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,.92),rgba(255,255,255,.97));pointer-events:none}
.bg-art-right:after{background:linear-gradient(to left,rgba(255,255,255,.92),rgba(255,255,255,.97))}
@media (min-width:1024px){
  .bg-art-left:before{background-size:1000px}
  .bg-art-right:before{background-size:1000px}
}
/* gradient fade for bg-art pseudo elements */
.bg-art-left:before,.bg-art-right:before{opacity:.15;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.75) 55%,rgba(0,0,0,.55) 75%,rgba(0,0,0,0) 100%)}

/* ====== NAV STYLES (from index) ====== */
/* Desktop nav: size, weight, underline hover */
.nav-main a,
.nav-main button{font-size:15px;font-weight:600;padding:0.25rem 0;position:relative}
@media (min-width:1024px){.nav-main a,.nav-main button{font-size:16px}}
.nav-main a:after,
.nav-main button:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:currentColor;border-radius:2px;transition:width .35s}
.nav-main a:hover:after,
.nav-main button:hover:after,
.nav-main a:focus-visible:after,
.nav-main button:focus-visible:after{width:100%}
.nav-main a.is-active{color:#c1121f}
.nav-main a.is-active:after{width:100%}
/* Submenu panel */
.submenu-panel{width:320px;padding:1.25rem;gap:.75rem}
.submenu-panel a{font-size:14px;padding:.4rem 0}
.submenu-panel a:hover{color:#c1121f}

/* Disable underline hover for button-style link in nav */
.nav-main a.no-underline-nav:after,
.nav-main a.no-underline-nav:hover:after,
.nav-main a.no-underline-nav:focus-visible:after{content:none}

/* CTA primary hero button (shared) */
.btn-primary-hero{background:linear-gradient(90deg,#c1121f,#e03140,#c1121f);background-size:220% 100%;transition:background-position .8s,box-shadow .4s;color:#fff;text-decoration:none}
.btn-primary-hero:hover,.btn-primary-hero:focus{background-position:100% 0;box-shadow:0 6px 28px -6px rgba(193,18,31,.45);color:#fff;text-decoration:none}
/* Ensure nav underline is removed for CTA links even without no-underline-nav */
.nav-main a.btn-primary-hero:after,
.nav-main a.btn-primary-hero:hover:after,
.nav-main a.btn-primary-hero:focus-visible:after{content:none}

/* Cookie banner layout */
.cookie-banner{position:fixed;bottom:24px;left:24px;z-index:60;max-width:420px;padding:1.5rem;border-radius:1.5rem;border:1px solid rgba(15,23,42,.12);background:#ffffff;box-shadow:0 18px 55px -20px rgba(15,23,42,.5);display:flex;flex-direction:column;gap:1rem;line-height:1.4}
.cookie-banner__title{font-size:0.95rem;font-weight:600;color:#0f172a}
.cookie-banner__text{font-size:0.9rem;color:#475569}
.cookie-banner__actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.cookie-banner__actions button{flex:1 1 140px;font-size:0.85rem;font-weight:600;border-radius:999px;padding:0.75rem 1.2rem;border:1px solid #c1121f;background:#c1121f;color:#fff;transition:background .2s ease,box-shadow .2s ease}
.cookie-banner__actions button.cookie-secondary{background:transparent;color:#c1121f}
.cookie-banner__actions button:hover{box-shadow:0 10px 30px -12px rgba(193,18,31,.65)}
.cookie-banner__actions button.cookie-secondary:hover{background:rgba(193,18,31,.08);box-shadow:none}
@media (max-width:640px){.cookie-banner{left:18px;right:18px;bottom:18px;padding:1.3rem;max-width:none}}

/* ===== Header Dark Redesign (from index) ===== */
/* Hero fallback dark background only (body stays white) */
.hero-video-wrapper{background:#062e5c}
/* HERO creative video styles */
.hero-video-wrapper{min-height:calc(100vh - 5rem)}
.hero-video-wrapper video{filter:saturate(115%) contrast(108%) brightness(90%)}
.hero-layer-gradient{position:absolute;inset:0;background:radial-gradient(circle at 18% 35%,rgba(13,79,158,.55),transparent 55%),radial-gradient(circle at 85% 70%,rgba(242,159,5,.35),transparent 60%),linear-gradient(to right,rgba(0,0,0,.72),rgba(0,0,0,.35) 48%,rgba(0,0,0,.6));mix-blend-mode:normal}
.hero-noise:after{content:"";position:absolute;inset:0;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP4BwQACfsD/Q5p3ZkAAAAASUVORK5CYII=);opacity:.15;mix-blend-mode:overlay}
.hero-float{position:absolute;inset:0;pointer-events:none}
.hero-float .blob{position:absolute;border-radius:50%;filter:blur(42px);opacity:.35;animation:floatY 11s ease-in-out infinite}
.hero-float .blob:nth-child(1){width:380px;height:380px;left:-120px;top:-60px;background:linear-gradient(135deg,#c1121f,#e03140);animation-duration:13s}
.hero-float .blob:nth-child(2){width:300px;height:300px;right:-90px;bottom:-40px;background:linear-gradient(135deg,#a80f1b,#c93a45);animation-duration:15s;animation-delay:-4s}
@keyframes floatY{0%,100%{transform:translateY(-25px) translateX(0)}50%{transform:translateY(25px) translateX(15px)}}
.hero-metrics{position:absolute;left:0;top:50%;transform:translateY(-50%);display:none}
@media (min-width:1280px){.hero-metrics{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem 1.1rem 1.25rem .75rem;}}
.hero-metric{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#fff;display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);padding:.55rem .75rem;border-radius:999px;backdrop-filter:blur(6px);box-shadow:0 4px 18px -4px rgba(0,0,0,.4)}
.hero-metric span{font-size:.95rem;font-weight:700;letter-spacing:-.5px}
.hero-ring{position:absolute;inset:0;pointer-events:none}
.hero-ring:before{content:"";position:absolute;top:55%;left:52%;width:860px;height:860px;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.08);border-radius:50%;animation:pulseRing 9s linear infinite}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(.85);opacity:.45}55%{opacity:.15}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
.hero-form-glow{position:relative}
.hero-form-glow:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,rgba(13,79,158,.8),rgba(242,159,5,.8),rgba(13,79,158,.8));border-radius:1.3rem;filter:blur(16px);opacity:.35;z-index:-1;animation:glowLoop 8s linear infinite}
@keyframes glowLoop{0%{filter:blur(18px) hue-rotate(0deg)}50%{filter:blur(26px) hue-rotate(40deg)}100%{filter:blur(18px) hue-rotate(0deg)}}
.hero-divider{height:1px;width:100%;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));margin:.25rem 0 1.25rem}
/* Darker hero overlay & adjustments */
.hero-layer-gradient{background:
  radial-gradient(80% 60% at 50% 20%,rgba(0,0,0,.15),transparent 70%),
  linear-gradient(110deg,rgba(6,23,42,.92),rgba(9,34,61,.92) 45%,rgba(10,40,75,.94)),
radial-gradient(circle at 18% 35%,rgba(193,18,31,.25),transparent 60%)}
/* Make hero overlay at 0.7 opacity as requested */
.hero-layer-gradient{opacity:.7}
.hero-video-wrapper video{filter:brightness(55%) saturate(110%) contrast(110%)}
.hero-float,.hero-ring{display:none}
.stat-card{position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 60%);mix-blend-mode:overlay;pointer-events:none;opacity:.4}
.stat-card:hover{background:rgba(255,255,255,.14)}
/* FAQ redesign */
#faq{background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
#faq .faq-wrap{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 6px 24px -8px rgba(0,0,0,.06),0 2px 8px -4px rgba(0,0,0,.05);border-radius:1.25rem;overflow:hidden}
#faq details{transition:background .35s}
#faq details[open]{background:linear-gradient(90deg,#ffffff,#fdfdfd)}
#faq summary{font-size:1rem;line-height:1.35}
#faq details div{font-size:.9rem}
#faq h2{font-size:2.4rem;line-height:1.08;letter-spacing:-.02em}
@media (min-width:1024px){#faq h2{font-size:2.9rem}}
#faq p.lead-faq{font-size:.95rem;line-height:1.6;color:#475569;max-width:52ch}
#faq details + details{border-top:1px solid #e2e8f0}
#faq summary .icon{transition:transform .4s}
#faq details[open] summary .icon{transform:rotate(180deg)}
/* Remove vertical metrics area spacing if existed */
.hero-metrics{display:none!important}

/* Infinite Marquee Slider */
.marquee-container {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden;
  user-select: none;
  gap: 1rem;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  flex-shrink: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-width: 100%;
  animation: scroll 40s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}