/* ============================================================
   Transportes Reyes Romero — Capa de color y atmósfera
   Se carga DESPUÉS de styles.css. Sobreescribe selectivamente
   para añadir gradientes, imágenes de fondo desvanecidas y
   tonos cálidos sin tocar la estructura existente.
   ============================================================ */

:root {
  /* tonos cálidos derivados del rojo / ámbar de marca */
  --paper:       #fbf8f4;          /* blanco crema, sustituye blanco puro */
  --paper-2:     #f5efe6;          /* crema más cálida para secciones alt */
  --warm-line:   #ebe4d8;          /* línea sutil sobre fondo cálido */
  --tint-red:    rgba(200, 16, 46, .06);
  --tint-amber:  rgba(242, 169, 0, .10);
  --ink-soft:    #2a2f3c;

  --grad-brand:  linear-gradient(120deg, var(--red) 0%, #e0561c 55%, var(--amber) 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(200,16,46,.08), rgba(224,86,28,.06) 55%, rgba(242,169,0,.12));
  --grad-paper:  linear-gradient(180deg, #fbf8f4 0%, #f5efe6 100%);
}

/* ---------- Fondo de página: crema cálido en lugar de blanco ---------- */
body {
  background: var(--paper);
  background-image:
    radial-gradient(900px 600px at 12% -10%, rgba(242, 169, 0, .08), transparent 60%),
    radial-gradient(900px 600px at 110% 8%, rgba(200, 16, 46, .07), transparent 60%);
  background-attachment: fixed;
}

/* ---------- Encabezado con tinte cálido ---------- */
.site-header {
  background: rgba(251, 248, 244, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--warm-line);
}
.site-header.is-scrolled {
  background: rgba(251, 248, 244, .97);
}

/* ---------- HERO: degradado y patrón sobre la imagen ---------- */
.hero__overlay {
  background:
    linear-gradient(120deg, rgba(15, 19, 28, .92) 0%, rgba(110, 12, 28, .55) 50%, rgba(242, 169, 0, .28) 100%),
    radial-gradient(80% 60% at 18% 78%, rgba(200, 16, 46, .55), transparent 60%),
    linear-gradient(to top, rgba(10, 12, 18, .78) 0%, rgba(10, 12, 18, 0) 60%);
}
.hero::after {
  /* Línea horizonte sutil al pie del hero, transición al fondo de página */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
  z-index: 0;
}

/* ---------- Beneficios: fondo cálido con foto desvanecida ---------- */
.benefits {
  background:
    linear-gradient(180deg, rgba(251, 248, 244, .92) 0%, rgba(251, 248, 244, .98) 60%, var(--paper) 100%),
    url("../assets/img/flota/flota-11-full.webp") center 35% / cover no-repeat;
  background-attachment: scroll, fixed;
}
.benefits::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(420px 420px at 92% 6%, rgba(200, 16, 46, .14), transparent 65%),
    radial-gradient(380px 380px at 5% 96%, rgba(242, 169, 0, .16), transparent 65%);
}
.benefits .container { z-index: 1; }

/* Tarjetas de beneficio: tinte cálido, borde con degradado al hover */
.benefit {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border: 1px solid var(--warm-line);
  border-radius: var(--radius);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.benefit:hover::before { opacity: 1; }
.benefit:hover { border-color: transparent; }

/* ---------- Sobre nosotros: fondo crema con detalle ---------- */
.about {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 50%, var(--paper) 100%);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 520px; height: 520px;
  top: -180px; left: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.10), transparent 68%);
  pointer-events: none;
}
.about::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 460px; height: 460px;
  bottom: -180px; right: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,169,0,.16), transparent 68%);
  pointer-events: none;
}
.about .container { position: relative; z-index: 1; }
.about__media { position: relative; }
.about__media::before {
  /* Marco con degradado de marca detrás de la foto */
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--grad-brand);
  opacity: .85;
  filter: blur(.5px);
}

.mv-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border-color: var(--warm-line);
  position: relative;
  overflow: hidden;
}
.mv-card::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.10), transparent 70%);
  pointer-events: none;
}
.mv-card:nth-child(2)::after {
  background: radial-gradient(circle, rgba(242,169,0,.16), transparent 70%);
}

/* ---------- Servicios: foto de carretera desvanecida ---------- */
.services {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(251, 248, 244, .94) 100%);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(251, 248, 244, .65) 30%, rgba(251, 248, 244, .85) 100%),
    url("../assets/img/flota/flota-07-full.webp") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}
.services::after {
  /* aro de color rojo que ya existía: refuerza con ámbar */
  content: "";
  position: absolute;
  bottom: -190px; left: -150px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,169,0,.18), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.services .container { position: relative; z-index: 1; }

.service {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border-color: var(--warm-line);
}
.service::before {
  /* la línea superior ya existe; aquí la engrosamos un poco */
  height: 5px;
}
.service--feature {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(242,169,0,.14), transparent 55%),
    linear-gradient(160deg, #1a1f2a 0%, #2a1418 70%, #3b1a14 100%);
  border-color: #2a1418;
}

/* ---------- Cobertura: fondo crema con mapa estilizado ---------- */
.coverage {
  background:
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  position: relative;
  overflow: hidden;
}
.coverage::before {
  /* refuerza el aro rojo existente */
  background: radial-gradient(circle, rgba(200,16,46,.13), transparent 68%) !important;
  width: 520px !important; height: 520px !important;
}
.coverage::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,169,0,.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.region {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border-color: var(--warm-line);
}
.region--all {
  background: linear-gradient(135deg, rgba(242,169,0,.14), rgba(200,16,46,.06));
  border-color: rgba(242,169,0,.35);
}
.unit-card {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(242,169,0,.18), transparent 55%),
    linear-gradient(160deg, #1a1f2a 0%, #2a1418 70%, #3b1a14 100%);
  position: relative;
  overflow: hidden;
}
.unit-card::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.45), transparent 65%);
  pointer-events: none;
}
.sede {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border-color: var(--warm-line);
}

/* ---------- Prueba social: oscuro con halos de color ---------- */
.social-proof {
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(200,16,46,.30), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(242,169,0,.22), transparent 60%),
    linear-gradient(160deg, #14181f 0%, #1a1f2a 50%, #221317 100%);
}
.stat {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
.testimonial {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .10);
}
.marquee__item {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color: rgba(242,169,0,.30);
}

/* ---------- Galería: fondo crema y hover con tinte de marca ---------- */
.gallery { background: var(--paper); }
.filter-btn {
  background: #ffffff;
  border-color: var(--warm-line);
}
.filter-btn:hover { background: #fff7e8; }
.filter-btn.is-active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
}
.gallery__btn::after {
  background: linear-gradient(160deg, rgba(200,16,46,0), rgba(200,16,46,0) 60%, rgba(242,169,0,0));
  transition: background .3s ease;
}
.gallery__btn:hover::after {
  background: linear-gradient(160deg, rgba(200,16,46,.0), rgba(200,16,46,.18) 60%, rgba(242,169,0,.35));
}

/* ---------- Banda CTA: refuerza el degradado existente ---------- */
.cta-band {
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(242,169,0,.55), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(120,12,30,.7), transparent 55%),
    linear-gradient(120deg, #8f0b20 0%, var(--red) 55%, #e0561c 100%);
}
/* Patrón sutil de "rayas de carretera" diagonales */
.cta-band::before {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 2px,
      transparent 2px, transparent 22px) !important;
  border-radius: 0 !important;
  width: 100% !important; height: 100% !important;
  top: 0 !important; right: 0 !important;
  inset: 0 !important;
  opacity: .9;
}

/* ---------- FAQ: fondo crema, imagen sutil de fondo ---------- */
.faq {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  position: relative;
  overflow: hidden;
}
.faq::before {
  /* mancha ámbar/roja como decoración */
  content: "";
  position: absolute;
  top: -150px; left: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.10), transparent 68%);
  pointer-events: none;
}
.faq__item {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  border-color: var(--warm-line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.faq__item[open] {
  background: linear-gradient(180deg, #fff 0%, #fdf5e7 100%);
  border-color: rgba(242,169,0,.5);
  box-shadow: 0 8px 24px rgba(200,16,46,.08);
}

/* ---------- Contacto: fondo cálido y formulario con detalle ---------- */
.contact {
  background:
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  position: relative;
  overflow: hidden;
}
.contact::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,169,0,.16), transparent 68%);
  pointer-events: none;
}
.contact__form-wrap {
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
  border-color: var(--warm-line);
  position: relative;
  overflow: hidden;
}
.contact__form-wrap::before {
  /* barra de marca superior */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--grad-brand);
}
.field__input {
  background: #fdfaf3;
  border-color: var(--warm-line);
}
.field__input:focus-visible {
  background: #fff;
}
.contact-method__icon {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 14px rgba(200,16,46,.25);
}

/* ---------- Pie de página: oscuro con halo de color ---------- */
.site-footer {
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(200,16,46,.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(242,169,0,.16), transparent 60%),
    linear-gradient(180deg, #1a1f2a 0%, #14181f 100%);
}

/* ---------- Botón ámbar: refuerza brillo ---------- */
.btn--amber {
  background: linear-gradient(135deg, #ffc046 0%, var(--amber) 55%, #d99100 100%);
  box-shadow: 0 8px 22px rgba(242,169,0,.45);
}

/* ---------- Stat number: refuerza con color rojo→ámbar ---------- */
.stat__num {
  background: linear-gradient(120deg, #ffd676 0%, var(--amber) 40%, #ff7a4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Barra de progreso: más visible ---------- */
.scroll-progress {
  height: 4px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(242,169,0,.5);
}

/* ---------- Eyebrow: bullet con degradado ---------- */
.eyebrow::before {
  background: var(--grad-brand);
  width: 32px;
  height: 4px;
}

/* ---------- Responsive: en móvil el background-attachment fixed es costoso ---------- */
@media (max-width: 919px) {
  body { background-attachment: scroll; }
  .benefits { background-attachment: scroll, scroll; }
}

/* ---------- Movimiento reducido: respeta la preferencia ---------- */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}