/* ============================================================
   AmeriCar Rent — hoja de estilos principal
   Extraída del <style> inline del documento. Sin cambios de
   comportamiento visual: mismas reglas, mismo orden.
   ============================================================ */

/* --- Tokens responsive ---
   Cada valor que debe variar por dispositivo vive en una custom property.
   Los media queries de abajo solo redefinen estos tokens; el markup los
   referencia una sola vez vía var(--token), así cada sección se ajusta de
   forma independiente sin pelear con la especificidad de los estilos inline. */
:root{
  --h1-hero:clamp(34px,4.6vw,56px);
  --h2-section:clamp(26px,3.2vw,38px);
  --h2-benefits:clamp(26px,3.2vw,36px);
  --h2-cta:clamp(28px,4vw,44px);

  --py-hero:84px 32px 40px;
  --py-section:110px 32px;
  --py-section-full:100px 0 110px;
  --py-benefits:100px 0;
  --py-cta:100px 32px;
  --py-footer:70px 0 0;
  --booking-card-pad:30px 32px;

  --hero-cols:1.05fr 1fr;
  --hero-gap:36px;
  --nosotros-cols:1fr 1fr;
  --nosotros-gap:70px;
  --nosotros-img-maxw:none;

  --fields-cols:repeat(4,1fr);
  --fleet-cols:repeat(3,minmax(0,340px));
  --steps-cols:repeat(3,1fr);
  --benefits-cols:repeat(4,1fr);
  --footer-cols:1.4fr 1fr 1fr 1.1fr;
  --footer-gap:44px;

  --fab-size:58px;
  --fab-offset:26px;
  --header-px:32px;
}

.hero-visual-full{display:block}
.hero-visual-mobile{display:none}
.steps-track{display:block}

/* Tablet: 768–1024px — aprovecha el ancho real en vez de heredar el mobile */
@media (min-width:768px) and (max-width:1024px){
  :root{
    --py-hero:64px 32px 36px;
    --py-section:80px 32px;
    --py-section-full:72px 0 80px;
    --py-benefits:72px 0;
    --py-cta:72px 32px;
    --py-footer:56px 0 0;

    --fields-cols:repeat(2,1fr);
    --fleet-cols:repeat(2,minmax(0,320px));
    --benefits-cols:repeat(2,1fr);
    --footer-cols:repeat(2,1fr);
    --footer-gap:36px;
    --nosotros-img-maxw:520px;
  }
}

/* Hero y "Sobre nosotros" (texto+imagen) se apilan en mobile Y tablet: la
   composición de 2 columnas está pensada para una columna de ~590px, y
   comprimirla a la mitad de un ancho de tablet/mobile se ve angosto. */
@media (max-width:1024px){
  :root{
    --hero-cols:1fr;
    --hero-gap:28px;
    --nosotros-cols:1fr;
    --nosotros-gap:36px;
  }
  /* Al apilarse, el texto arranca al mismo x que los puntos decorativos
     (que solo "flotan" libres en el margen izquierdo del layout de 2
     columnas en pantallas anchas) — se ocultan para no cruzar el texto. */
  .hero-dots{display:none}
}

/* Mobile: 320–767px */
@media (max-width:767px){
  :root{
    --h1-hero:30px;
    --h2-section:24px;
    --h2-benefits:24px;
    --h2-cta:26px;

    --py-hero:44px 20px 28px;
    --py-section:56px 20px;
    --py-section-full:48px 0 56px;
    --py-benefits:48px 0;
    --py-cta:56px 20px;
    --py-footer:44px 0 0;
    --booking-card-pad:24px 20px;

    --fields-cols:1fr;
    --fleet-cols:1fr;
    --steps-cols:1fr;
    --benefits-cols:1fr;
    --footer-cols:1fr;
    --footer-gap:32px;
    --nosotros-img-maxw:420px;

    --fab-size:48px;
    --fab-offset:14px;
    --header-px:16px;
  }
  .hero-visual-full{display:none}
  .hero-visual-mobile{display:block}
  .steps-track{display:none}
}

/* --- Base --- */
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
input,select,button{font-family:'Inter',sans-serif}
input:focus,select:focus{outline:2px solid #FE0307;outline-offset:1px}
::selection{background:#FE0307;color:#fff}
::-webkit-scrollbar{height:8px;width:8px}

/* --- Animaciones de entrada (keyframes) --- */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
@keyframes stepFill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes stepCardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes stepBadgePulse{0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(254,3,7,.3)}55%{transform:scale(1.03)}100%{transform:scale(1);box-shadow:0 0 0 10px rgba(254,3,7,0)}}
@keyframes heroOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes panelReveal{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes triangleReveal{from{opacity:0;transform:scale(.85)}to{opacity:.05;transform:scale(1)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes imageReveal{from{opacity:0;transform:scale(.92) translateY(24px);clip-path:inset(6% 6% 6% 6% round 4px)}to{opacity:1;transform:scale(1) translateY(0);clip-path:inset(0% 0% 0% 0% round 4px)}}
@keyframes panelFadeScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* --- Revelado por scroll (data-reveal + IntersectionObserver en js/modules/scroll-reveal.js) --- */
[data-reveal]{opacity:0;transform:translateY(26px) scale(.975);filter:blur(3px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
[data-reveal].reveal-media{transform:translateY(14px);filter:none;transition:opacity .5s cubic-bezier(.2,.8,.2,1) .1s,transform .5s cubic-bezier(.2,.8,.2,1) .1s}
[data-reveal].reveal-media.is-visible{transform:translateY(0)}
.reveal-media img{opacity:0;transition:opacity .45s ease}
.reveal-media img.is-loaded{opacity:1}
.fleet-card:nth-child(2){transition-delay:.08s}
.fleet-card:nth-child(3){transition-delay:.16s}
.fleet-card:nth-child(4){transition-delay:.24s}
.fleet-card:nth-child(5){transition-delay:.32s}
.fleet-card:nth-child(6){transition-delay:.4s}
.fleet-card:hover{transition-delay:0s}
.benefit-card:nth-child(2){transition-delay:.08s}
.benefit-card:nth-child(3){transition-delay:.16s}
.benefit-card:nth-child(4){transition-delay:.24s}
.flota-underline{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s ease .35s}
[data-reveal].is-visible .flota-underline{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --- Sección "Cómo funciona" (línea de progreso + tarjetas de paso) --- */
#como-funciona .step-track-fill{clip-path:inset(0 100% 0 0)}
#como-funciona.is-live .step-track-fill{animation:stepFill 2.6s linear .12s both}
#como-funciona .step-card{opacity:0;transform:translateY(18px) scale(.985);transition:transform .6s ease,opacity .6s ease,box-shadow .6s ease}
#como-funciona.is-live .step-card{animation:stepCardIn .72s cubic-bezier(.2,.8,.2,1) both}
#como-funciona.is-live .step-card:nth-child(2){animation-delay:.06s}
#como-funciona.is-live .step-card:nth-child(3){animation-delay:.18s}
#como-funciona.is-live .step-card:nth-child(4){animation-delay:.3s}
#como-funciona .step-badge{position:relative}
#como-funciona.is-live .step-badge{animation:stepBadgePulse .7s cubic-bezier(.2,.8,.2,1) both}
#como-funciona.is-live .step-card:nth-child(2) .step-badge{animation-delay:.2s}
#como-funciona.is-live .step-card:nth-child(3) .step-badge{animation-delay:1.42s}
#como-funciona.is-live .step-card:nth-child(4) .step-badge{animation-delay:2.62s}

/* --- Tarjetas de flota --- */
.fleet-card{transition:transform .35s ease,box-shadow .35s ease}
.fleet-card:hover{transform:translateY(-6px)}
.fleet-card:hover .fleet-card-body{box-shadow:0 24px 48px -18px rgba(8,78,254,.28)}
.fleet-car-img{transition:transform .5s ease}
.fleet-card:hover .fleet-car-img{transform:scale(1.06) translateY(-4px)}

/* --- Navegación --- */
.nav-link{position:relative;padding:8px 2px}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#FE0307;transition:width .25s ease}
.nav-link:hover::after{width:100%}

/* --- Botones --- */
.btn-primary{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(254,3,7,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* --- Tarjetas de beneficios --- */
.icon-circle{transition:transform .3s ease,background .3s ease}
.benefit-card:hover .icon-circle{transform:scale(1.12);background:#FE0307}
.benefit-card:hover .icon-circle svg{stroke:#fff}

/* --- Footer --- */
/* Alineada a la izquierda igual que "Navegación" y "Reserva rápido": una
   lista con íconos se lee de izquierda a derecha (ícono → texto), forzarla
   a la derecha quedaba visualmente inconsistente sin importar qué tan
   exacto fuera el cálculo de bordes. */
@media (min-width:1025px){
  .footer-contact{margin-left:64px}
}

/* --- Interacciones: topbar, marca, menú móvil, footer, FAB --- */
.topbar-link{transition:color .2s ease}
.topbar-link:hover{color:var(--red)}

.brand-logo{transition:opacity .2s ease}
.brand-logo:hover{opacity:.82}

.mobile-menu-link{display:block;transition:color .2s ease}
.mobile-menu-link:hover{color:var(--red)}

.footer-nav-link{transition:color .2s ease}
.footer-nav-link:hover{color:var(--red)}

.contact-link{transition:color .2s ease}
.contact-link:hover{color:var(--red)}
.contact-link:hover svg *{stroke:var(--red)}

.btn-solid{transition:filter .2s ease,transform .2s ease}
.btn-solid:hover{filter:brightness(1.08);transform:translateY(-1px)}

.btn-outline{transition:background .2s ease,border-color .2s ease}
.btn-outline:hover{background:rgba(8,78,254,.06);border-color:var(--navy)}

.fab-whatsapp{transition:transform .2s ease}
.fab-whatsapp:hover{transform:scale(1.08)}

/* --- Campos de fecha + calendario (flatpickr, iniciado en js/modules/booking-form.js) --- */
.date-field{
  width:100%;box-sizing:border-box;cursor:pointer;
  border:1.5px solid rgba(8,78,254,.1);border-radius:9px;
  padding:11px 40px 11px 12px;font-size:14px;font-weight:500;color:#1b2033;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23084EFE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 12px center;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.date-field::placeholder{color:#8a8fa6;font-weight:400}
.date-field:hover{border-color:rgba(8,78,254,.35)}
.date-field:focus,.date-field.active{outline:none;border-color:#084EFE;box-shadow:0 0 0 4px rgba(8,78,254,.12)}
.date-field::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}

.flatpickr-calendar{
  font-family:'Inter',sans-serif;border:none;border-radius:16px;padding:10px 10px 12px;
  width:auto;box-shadow:0 24px 50px -16px rgba(3,27,89,.35),0 0 0 1px rgba(8,78,254,.08);
}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{display:none}
.flatpickr-calendar.open{animation:fadeUp .22s cubic-bezier(.2,.8,.2,1)}
.flatpickr-months{padding:2px 0 8px;align-items:center}
.flatpickr-months .flatpickr-month{height:40px;color:#031B59}
.flatpickr-current-month{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;padding-top:9px}
.flatpickr-current-month span.cur-month{font-weight:700;text-transform:capitalize}
.flatpickr-current-month span.cur-month:hover,.flatpickr-current-month .numInputWrapper:hover{background:none}
.flatpickr-current-month input.cur-year{font-weight:700}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{
  top:12px;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#084EFE;fill:#084EFE;transition:background .2s ease;
}
.flatpickr-months .flatpickr-prev-month{left:12px}
.flatpickr-months .flatpickr-next-month{right:12px}
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{background:rgba(8,78,254,.08)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#084EFE}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:12px;height:12px}
span.flatpickr-weekday{color:#8a8fa6;font-size:11.5px;font-weight:600;text-transform:uppercase}
.flatpickr-day{
  border-radius:10px;border:none;color:#1b2033;font-weight:500;font-size:13.5px;
  max-width:40px;height:40px;line-height:40px;margin:1px 0;transition:background .15s ease,color .15s ease;
}
.flatpickr-day:hover,.flatpickr-day:focus{background:rgba(8,78,254,.08);color:#084EFE}
.flatpickr-day.today{border:none;color:#FE0307;font-weight:700}
.flatpickr-day.today:hover{background:rgba(254,3,7,.08);color:#FE0307}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{
  background:#084EFE;color:#fff;font-weight:700;box-shadow:0 8px 16px -8px rgba(8,78,254,.8);
}
.flatpickr-day.is-pickup,.flatpickr-day.flatpickr-disabled.is-pickup,.flatpickr-day.flatpickr-disabled.is-pickup:hover{background:rgba(8,78,254,.14);color:#084EFE;font-weight:700;cursor:default}
.flatpickr-day.is-between{background:rgba(8,78,254,.06);border-radius:0;color:#031B59}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:#c3c6d4}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:#d4d6e0;background:none;cursor:not-allowed}

/* --- Selector de idioma (js/modules/language-switcher.js; banderas de flag-icons) --- */
.lang-switcher{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 11px 0 6px;cursor:pointer;
  border:1.5px solid rgba(8,78,254,.14);border-radius:999px;background:#fff;
  color:#084EFE;font-weight:700;font-size:13px;letter-spacing:.3px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lang-btn:hover,.lang-switcher.is-open .lang-btn{border-color:#084EFE;box-shadow:0 0 0 4px rgba(8,78,254,.1)}
.lang-btn:focus-visible{outline:none;border-color:#084EFE;box-shadow:0 0 0 4px rgba(8,78,254,.18)}
.lang-btn .fi{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px rgba(3,27,89,.08)}
.lang-chevron{transition:transform .2s ease}
.lang-switcher.is-open .lang-chevron{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:150;min-width:200px;
  margin:0;padding:6px;list-style:none;background:#fff;border-radius:14px;
  box-shadow:0 24px 50px -16px rgba(3,27,89,.35),0 0 0 1px rgba(8,78,254,.08);
  animation:fadeUp .2s cubic-bezier(.2,.8,.2,1);
}
.lang-option{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;cursor:pointer;
  border:none;border-radius:9px;background:none;color:#1b2033;font-size:14.5px;font-weight:500;text-align:start;
}
.lang-option:hover,.lang-option:focus-visible{outline:none;background:rgba(8,78,254,.07);color:#084EFE}
.lang-option .fi{width:24px;height:18px;border-radius:4px;flex-shrink:0;box-shadow:0 0 0 1px rgba(3,27,89,.08)}
.lang-option-name{flex:1}
.lang-check{color:#084EFE;opacity:0}
.lang-option[aria-selected="true"]{font-weight:700;color:#084EFE}
.lang-option[aria-selected="true"] .lang-check{opacity:1}

.lang-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;
  background:rgba(247,247,249,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s ease;
}
.lang-overlay[hidden]{display:none}
.lang-overlay.is-visible{opacity:1}
.lang-overlay-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 44px;
  background:#fff;border-radius:22px;box-shadow:0 40px 70px -30px rgba(8,78,254,.45);
  transform:translateY(10px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.lang-overlay.is-visible .lang-overlay-card{transform:none}
.lang-overlay-flag{position:relative;width:76px;height:76px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.lang-overlay-flag .fi{width:56px;height:56px;border-radius:50%;box-shadow:0 6px 16px -6px rgba(3,27,89,.4)}
.lang-spinner{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(8,78,254,.12);border-top-color:#084EFE;border-right-color:#FE0307;
  animation:langSpin .8s linear infinite;
}
@keyframes langSpin{to{transform:rotate(360deg)}}
.lang-overlay-text{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:#031B59}
.lang-overlay-name{font-size:13.5px;font-weight:600;color:#5a5f78}
/* Hindi, bengalí y árabe tienen trazos por encima/debajo de la línea: necesitan más interlineado
   que los títulos originales (definido inline en index.html, por eso el !important). */
html:lang(hi) :is(h1,h2,h3),html:lang(bn) :is(h1,h2,h3),html:lang(ar) :is(h1,h2,h3){line-height:1.35 !important}
@media (max-width:860px){
  .lang-btn{padding:0 8px 0 5px;gap:5px}
  .lang-btn-code{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lang-spinner{animation-duration:2s}
  .lang-overlay,.lang-overlay-card,.lang-menu{transition:none;animation:none}
}

/* --- Responsive --- */
/* El menú completo no cabe por debajo de ~1024px: ahí se usa el menú hamburguesa. */
@media (max-width:1024px){
  .hide-mobile{display:none !important}
  .mobile-menu-btn{display:flex !important;align-items:center;justify-content:center}
}
@media (max-width:1180px) and (min-width:1025px){
  .main-nav{gap:18px !important;font-size:13px !important}
}

/* --- Ajustes de layout por tamaño de pantalla ---
   Los estilos base están inline en index.html; por eso estas reglas usan !important. */

/* Requisitos para rentar: 4 columnas en escritorio, 2 en tablet, 1 en celular */
@media (max-width:1024px){
  .req-grid{grid-template-columns:repeat(2,1fr) !important;gap:22px 24px}
  .req-grid > div{border-left:none !important;padding-left:0 !important}
}
@media (max-width:560px){
  .req-grid{grid-template-columns:1fr !important;gap:16px}
}

@media (max-width:767px){
  /* Hero: la imagen de los carros ocupa solo su alto real, sin franjas vacías */
  .hero-visual-mobile{height:auto !important;margin-top:0 !important}
  .hero-visual-mobile img{position:static !important;display:block;width:100% !important;height:auto !important}

  /* Cotizador: duración y total lado a lado, botones a todo el ancho */
  .booking-footer{flex-direction:column;align-items:stretch !important;gap:16px !important}
  .booking-results{display:grid !important;grid-template-columns:1fr 1fr;gap:16px !important}
  .booking-actions{display:grid !important;grid-template-columns:1fr;gap:10px !important}
  .booking-actions a{justify-content:center;text-align:center}

  /* Cifras de "Sobre nosotros" en una sola fila */
  .stats-row{display:grid !important;grid-template-columns:repeat(3,1fr);gap:14px !important}

  /* "Cómo funciona": menos relleno lateral en la tarjeta azul */
  .route-card{padding:44px 20px 0 !important;border-radius:22px !important}
  .req-ticket{margin:0 -20px !important;padding:28px 20px 30px !important}
}

/* Celulares angostos (320–400px) */
@media (max-width:400px){
  .brand-logo img{height:36px !important}
  .fleet-title{font-size:15.5px !important;letter-spacing:.3px !important;text-align:center;padding:0 12px}
  .booking-actions a{padding-left:12px !important;padding-right:12px !important;white-space:nowrap}
  #estimateLabel{font-size:17px !important}
}