/* ============================================================
   SERVI BOMBAS RW — styles.css
   CSS tradicional que complementa Tailwind:
   variables, animaciones, efectos custom, componentes complejos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ── VARIABLES GLOBALES ── */
:root {
  --navy:      #002F6C;
  --navy-mid:  #00418A;
  --electric:  #0057FF;
  --elec-soft: #1A6FFF;
  --sky:       #3B9EFF;
  --blue-pale: #E6EFFE;
  --red:       #D72B2B;
  --red-dark:  #B01E1E;
  --rw-red:    #E8251A;
  --white:     #FFFFFF;
  --off-white: #F4F7FF;
  --gray-100:  #EBF0FA;
  --gray-200:  #CDD9F0;
  --text:      #0B1A35;
  --text-muted:#526282;
  --nav-h:     68px;
  --sh-sm: 0 2px 12px rgba(0,47,108,.08);
  --sh-md: 0 8px 32px rgba(0,47,108,.14);
  --sh-lg: 0 20px 60px rgba(0,47,108,.18);
  --tr: 0.26s cubic-bezier(.4,0,.2,1);
}

/* ── RESET MÍNIMO ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; color: var(--text); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
svg { display: block; flex-shrink: 0; }

/* ── FUENTES ── */
.font-display { font-family: 'Barlow Condensed', sans-serif; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════
   navbar.css — Servi Bombas RW
═══════════════════════════════════════════════════════════ */

:root {
  --electric : #1A56E8;
  --navy     : #0F2D6B;
  --navy-mid : #1A3F8F;
  --white    : #FFFFFF;
  --gray-50  : #F8FAFC;
  --gray-100 : #F1F5F9;
  --gray-200 : #E2E8F0;
  --gray-500 : #64748B;
  --gray-700 : #334155;
  --wa-green : #25D366;
  --wa-dark  : #1aab53;
  --nav-h    : 66px;
  --tr       : 200ms ease;
  --radius   : 8px;
  --font     : 'Inter', system-ui, sans-serif;
}

/* ── Compensar nav fijo ─────────────────────────────────── */
body { padding-top: var(--nav-h); }

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
#nav {
  position   : fixed;
  inset      : 0 0 auto 0;
  z-index    : 1000;
  height     : var(--nav-h);
  background : rgba(255,255,255,.97);
  backdrop-filter        : blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  box-shadow : 0 1px 4px rgba(0,0,0,.06);
  transition : box-shadow var(--tr);
}
#nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.10); }

/* ── Contenedor ─────────────────────────────────────────── */
.nav-inner {
  max-width  : 1200px;
  margin     : 0 auto;
  padding    : 0 24px;
  height     : 100%;
  display    : flex;
  align-items: center;
  gap        : 16px;
}

@media (min-width: 1024px) {
  .nav-inner {
    display              : grid;
    grid-template-columns: 1fr auto 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════════ */
.nav-logo {
  justify-self   : start;
  display        : flex;
  align-items    : center;
  text-decoration: none;
  font-family    : var(--font);
  font-size      : 20px;
  font-weight    : 800;
  color          : var(--navy);
  letter-spacing : -0.03em;
  white-space    : nowrap;
  transition     : opacity var(--tr);
  gap            : 4px;
}
.nav-logo:hover { opacity: .78; }
.nav-logo strong { color: #E8211A; font-weight: 800; }

/* ══════════════════════════════════════════════════════════
   LINKS DESKTOP
══════════════════════════════════════════════════════════ */
.nav-desktop {
  display        : flex;
  align-items    : center;
  gap            : 2px;
  justify-content: center;
}

@media (max-width: 1023px) {
  .nav-desktop { display: none; }
}

.nav-link {
  position       : relative;
  font-family    : var(--font);
  font-size      : 12.5px;
  font-weight    : 600;
  color          : var(--gray-500);
  text-transform : uppercase;
  letter-spacing : .08em;
  text-decoration: none;
  padding        : 6px 12px;
  border-radius  : 6px;
  white-space    : nowrap;
  transition     : color var(--tr), background var(--tr);
}
.nav-link::after {
  content      : '';
  position     : absolute;
  bottom       : 0; left: 12px; right: 12px;
  height       : 2px;
  background   : var(--electric);
  border-radius: 2px;
  transform    : scaleX(0);
  transform-origin: center;
  transition   : transform var(--tr);
}
.nav-link:hover        { color: var(--navy); background: var(--gray-50); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active       { color: var(--electric); }
.nav-link.active::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════
   COLUMNA DERECHA
══════════════════════════════════════════════════════════ */
.nav-right {
  justify-self: end;
  margin-left : auto;
  display     : flex;
  align-items : center;
  gap         : 10px;
  flex-shrink : 0;
}

/* ── CTA desktop ────────────────────────────────────────── */
.nav-cta {
  display        : inline-flex;
  align-items    : center;
  gap            : 7px;
  font-family    : var(--font);
  font-size      : 12.5px;
  font-weight    : 700;
  color          : var(--white);
  background     : var(--navy);
  text-transform : uppercase;
  letter-spacing : .07em;
  text-decoration: none;
  padding        : 10px 18px;
  border-radius  : var(--radius);
  white-space    : nowrap;
  transition     : background var(--tr), transform var(--tr), box-shadow var(--tr);
  box-shadow     : 0 2px 8px rgba(15,45,107,.22);
}
.nav-cta:hover {
  background: var(--electric);
  transform : translateY(-1px);
  box-shadow: 0 6px 18px rgba(26,86,232,.32);
}
.nav-cta svg { flex-shrink: 0; }

@media (max-width: 1023px) {
  .nav-cta { display: none; }
}

/* ── Botón WA mobile ───────────────────── */
.nav-wa-mobile{
  /* oculto por defecto */
  display:none;

  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  background:#0066ff;
  border-radius:12px;

  flex-shrink:0;

  transition:.25s;

  box-shadow:0 2px 8px rgba(37,211,102,.35);
}

.nav-wa-mobile:hover{
  transform:translateY(-1px);
  background:#0052cc;
}

.nav-wa-mobile svg{
  width:24px;
  height:24px;
}

/* SOLO mobile */
@media (max-width: 1023px){
  .nav-wa-mobile{
    display:flex;
  }
}

@media (max-width: 1023px) {
  .nav-wa-mobile { display: flex; }
}

/* ── Hamburger ──────────────────────────────────────────── */
.nav-hamburger {
  display        : none;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  gap            : 5px;
  width          : 40px;
  height         : 40px;
  background     : var(--gray-50);
  border         : 1.5px solid var(--gray-200);
  border-radius  : var(--radius);
  cursor         : pointer;
  padding        : 0;
  flex-shrink    : 0;
  transition     : background var(--tr), border-color var(--tr);
}
.nav-hamburger:hover { background: var(--gray-100); }
.nav-hamburger:focus-visible {
  outline       : 2px solid var(--electric);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .nav-hamburger { display: flex; }
}

.hbar {
  display         : block;
  width           : 20px;
  height          : 2px;
  background      : var(--navy);
  border-radius   : 2px;
  transition      : transform .28s ease, opacity .28s ease;
  transform-origin: center;
}
.nav-hamburger[aria-expanded="true"] .hbar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .hbar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] .hbar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════
   DRAWER MOBILE
══════════════════════════════════════════════════════════ */
.nav-drawer {
  position     : fixed;
  top          : var(--nav-h);
  left         : 0;
  right        : 0;
  z-index      : 999;
  background   : var(--white);
  border-bottom: 1px solid var(--gray-100);
  box-shadow   : 0 8px 28px rgba(0,0,0,.10);
  max-height   : 0;
  overflow     : hidden;
  visibility   : hidden;
  opacity      : 0;
  transition   : max-height .32s ease, opacity .22s ease, visibility .22s ease;
}
.nav-drawer.open {
  max-height : calc(100dvh - var(--nav-h));
  overflow-y : auto;
  visibility : visible;
  opacity    : 1;
}

.drawer-inner {
  max-width     : 1200px;
  margin        : 0 auto;
  padding       : 8px 20px 18px;
  display       : flex;
  flex-direction: column;
  gap           : 2px;
}

.drawer-link {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  font-family    : var(--font);
  font-size      : 14px;
  font-weight    : 600;
  color          : var(--gray-700);
  text-transform : uppercase;
  letter-spacing : .07em;
  text-decoration: none;
  padding        : 13px 12px;
  border-radius  : var(--radius);
  border-bottom  : 1px solid var(--gray-100);
  transition     : color var(--tr), background var(--tr);
}
.drawer-link:last-of-type { border-bottom: none; }
.drawer-link:hover { color: var(--electric); background: var(--gray-50); }

.drawer-icon {
  width          : 32px;
  height         : 32px;
  background     : var(--gray-100);
  border-radius  : 8px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : var(--electric);
  flex-shrink    : 0;
  transition     : background var(--tr);
}
.drawer-link:hover .drawer-icon { background: rgba(26,86,232,.1); }

.drawer-wa {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  font-family    : var(--font);
  font-size      : 14px;
  font-weight    : 700;
  color          : var(--white);
  background     : var(--navy);
  text-transform : uppercase;
  letter-spacing : .06em;
  text-decoration: none;
  padding        : 14px 20px;
  border-radius  : 10px;
  margin-top     : 10px;
  transition     : background var(--tr), transform var(--tr);
  box-shadow     : 0 4px 14px rgba(15,45,107,.22);
}
.drawer-wa:hover { background: var(--electric); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════════════════════ */
.nav-overlay {
  display   : none;
  position  : fixed;
  inset     : 0;
  top       : var(--nav-h);
  background: rgba(0,0,0,.32);
  z-index   : 998;
  animation : overlayIn .2s ease;
}
.nav-overlay.visible { display: block; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE EXTRAS
══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .nav-inner   { padding: 0 40px; }
  .nav-desktop { gap: 6px; }
  .nav-link    { font-size: 13px; }
}

/* ═══════════════════════════════════════
   HERO BASE
═══════════════════════════════════════ */
#hero{
  position:relative;
  min-height:100vh;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  overflow:hidden;

  padding-top:calc(var(--nav-h) - 8px);

  background:#2f80ff;
}

/* ═══════════════════════════════════════
   VIDEO FULL WIDTH / HEIGHT
═══════════════════════════════════════ */
.hero-video-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

  z-index:0;

  pointer-events:none;

  filter:
    brightness(1.02)
    saturate(1);
}

/* ═══════════════════════════════════════
   OVERLAY
═══════════════════════════════════════ */
.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(78,145,255,.55) 0%,
      rgba(78,145,255,.50) 45%,
      rgba(126,181,255,.60) 100%
    );

  z-index:1;
}

/* ═══════════════════════════════════════
   CONTENT
═══════════════════════════════════════ */
.hero-content{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1080px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  gap:54px;

  padding:24px 24px 120px;
}

/* ═══════════════════════════════════════
   BOTON URGENCIAS
═══════════════════════════════════════ */
.hero-emergency-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:18px 38px;

  border-radius:14px;

  background:
    linear-gradient(135deg,#ff2d20,#e81d12);

  color:#fff;
  text-decoration:none;

  font-size:15px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;

  box-shadow:
    0 14px 30px rgba(232,37,26,.35);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.hero-emergency-btn:hover{
  transform:translateY(-4px);

  box-shadow:
    0 18px 38px rgba(232,37,26,.44);
}

/* ═══════════════════════════════════════
   TITULO
═══════════════════════════════════════ */
.hero-title{
  margin:0;

  font-size:clamp(3.1rem,7vw,5.8rem);

  line-height:.96;
  letter-spacing:-.04em;

  text-transform:uppercase;
}

.ht-servi{ color:#0066ff; }
.ht-bombas{ color:#ff2b1d; }
.ht-r{ color:#0066ff; }
.ht-w{ color:#ff2b1d; }
.ht-sub{
  display:block;

  margin-top:18px;

  /* mismo estilo del ejemplo */
  font-family:'Poppins', sans-serif;

  font-size:clamp(2.1rem,5vw,3.8rem);

  font-weight:800;

  line-height:1.02;

  letter-spacing:-0.04em;

  color:#111;

  text-align:center;

  max-width:680px;

  margin-inline:auto;

  text-transform:none;
}

/* ═══════════════════════════════════════
   TEXTO
═══════════════════════════════════════ */
.hero-sub{
  max-width:760px;

  margin:0;

  font-size:clamp(1rem,1.8vw,1.14rem);

  line-height:1.9;

  color:rgba(0,0,0,.84);

  font-weight:600;
}

/* ═══════════════════════════════════════
   BOMBAS
═══════════════════════════════════════ */
.hero-pump-icons{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:0;
}

.pump-icon{
  width:114px;
  height:114px;

  border-radius:50%;

  background:#fff;

  border:3px solid #6cb6ff;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  box-shadow:
    0 12px 28px rgba(53,128,255,.22);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.pump-icon:hover{
  transform:translateY(-5px) scale(1.05);

  box-shadow:
    0 18px 36px rgba(53,128,255,.34);
}

.pump-icon img{
  width:82%;
  height:82%;

  object-fit:contain;
}

/* ═══════════════════════════════════════
   BOTONES ABAJO
═══════════════════════════════════════ */
.hero-contact-icons{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:30px;

  margin-top:26px;
}

/* BOTON BASE */
.hero-circle-btn{
  width:68px;
  height:68px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  text-decoration:none;

  flex-shrink:0;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* HOVER */
.hero-circle-btn:hover{
  transform:translateY(-4px) scale(1.05);
}

/* ═══════════════════════════════════════
   WHATSAPP
═══════════════════════════════════════ */
.wa-btn{
  background:#25d366;
  color:#fff;

  box-shadow:
    0 10px 22px rgba(37,211,102,.32);
}

.wa-btn svg{
  width:38px;
  height:38px;

  display:block;
}

/* ═══════════════════════════════════════
   LLAMADA
═══════════════════════════════════════ */
.call-btn{
  background:#ff1f14;
  color:#fff;

  box-shadow:
    0 10px 22px rgba(255,31,20,.28);
}

.call-btn svg{
  width:34px;
  height:34px;

  display:block;
}

/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */
@media (max-width:480px){

  .hero-content{
    gap:40px;

    padding:18px 18px 90px;
  }

  .hero-title{
    font-size:clamp(2.5rem,11vw,3.5rem);
  }

  .ht-sub{
    margin-top:16px;

    font-size:clamp(1.5rem,7vw,2rem);
  }

  .hero-sub{
    font-size:1rem;
    line-height:1.75;
  }

  .pump-icon{
    width:84px;
    height:84px;
  }

  .hero-contact-icons{
    gap:22px;
    margin-top:18px;
  }

  .hero-circle-btn{
    width:60px;
    height:60px;
  }

  .wa-btn svg{
    width:33px;
    height:33px;
  }

  .call-btn svg{
    width:30px;
    height:30px;
  }

}

/* ═══════════════════════════════════════
   MOBILE PEQUEÑO
═══════════════════════════════════════ */
@media (max-width:360px){

  .pump-icon{
    width:72px;
    height:72px;
  }

  .hero-contact-icons{
    gap:16px;
  }

  .hero-circle-btn{
    width:54px;
    height:54px;
  }

  .wa-btn svg{
    width:29px;
    height:29px;
  }

  .call-btn svg{
    width:26px;
    height:26px;
  }

}

/* ── Sección contenedora ────────────────────────────────── */
#marcas {
  position: relative;
}

#marcas::before,
#marcas::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
#marcas::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
#marcas::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.marcas-track-wrap {
  overflow: hidden;
  width: 100%;
}

.marcas-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marcas-scroll 28s linear infinite;
  will-change: transform;
}

.marcas-track:hover {
  animation-play-state: paused;
}

@keyframes marcas-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marca-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 80px;
  padding: 0 24px;
  flex-shrink: 0;
  border-right: 1px solid #EBF0FA;
  transition: opacity .22s ease;
}
.marca-item:hover { opacity: .75; }

.marca-item img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(20%) opacity(.85);
  transition: filter .22s ease;
}
.marca-item:hover img {
  filter: grayscale(0%) opacity(1);
}

/* ══════════════════════════════════
   SERVICIOS
══════════════════════════════════ */
.servicio-card {
  position: relative;
  overflow: hidden;
  transition: all var(--tr);
}
.servicio-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--electric));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}
.servicio-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(15,31,61,0.13); border-color: #c7d9f8 !important; }
.servicio-card:hover::after { transform: scaleX(1); }
.servicio-card.featured::after { display: none; }
.servicio-card.featured:hover { transform: translateY(-5px); }

/* ══════════════════════════════════
   ZONAS
══════════════════════════════════ */
.zona-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* ══════════════════════════════════
   TESTIMONIOS
══════════════════════════════════ */
.testi {
  transition: all var(--tr);
}
.testi:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(15,31,61,0.12);
}

/* Barra de acento inferior izquierda */
.testi-bar {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--navy), var(--electric));
  border-radius: 4px 0 0 4px;
}

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.faq-item { transition: border-color var(--tr); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .36s ease;
}
.faq-item.open .faq-a { max-height: 220px; }
.faq-arrow {
  transition: transform .3s, background .28s, color .28s;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }

/* ══════════════════════════════════
   CTA STRIP
══════════════════════════════════ */
.cta-bg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

/* ══════════════════════════════════
   WA FLOAT
══════════════════════════════════ */
.wa-float {
  animation: floatbob 3s ease-in-out infinite;
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover {
  animation: none;
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 32px rgba(37,211,102,.56) !important;
}
@keyframes floatbob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ══════════════════════════════════
   RESPONSIVE — overrides
══════════════════════════════════ *//* ── NAV breakpoints ────────────────────────────────────── */
@media (max-width: 900px) {
  #desktop-nav   { display: none !important; }
  #nav-hamburger { display: flex !important; }
}
@media (min-width: 901px) {
  #desktop-nav   { display: flex !important; }
  #nav-hamburger { display: none !important; }
  .nav-drawer    { display: none !important; }
}

@media (max-width: 640px) {
  .marca-item {
    width  : 260px;
    height : 150px;
    padding: 0 16px;
  }
  .marca-item img {
    max-height: 180px;
    width: 100%;
  }
  #marcas::before,
  #marcas::after {
    width: 40px;
  }
  .marcas-track {
    animation-duration: 20s;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .marca-item {
    width  : 260px;
    height : 150px;
    padding: 0 20px;
  }
  .marca-item img {
    max-height: 180px;
    width: 100%;
  }
  #marcas::before,
  #marcas::after {
    width: 80px;
  }
}