@charset "utf-8";

/* ==========================================================
   CAPCALERA INSTOP 2026 - V055
   Versio independent. No s'ha de fusionar amb el CSS general.
   Estetica mes plana i tecnica, inspirada en SCCS.

   Canvis del 055 respecte del 054:
   1. MOBIL. Barra superior en tres columnes simetriques: EMPRESA, ALQUILER
      TOPOGRAFIA i SHOP ocupen el mateix espai i queden centrats.
   2. MOBIL. Logo centrat de forma independent del cercador.
   3. MOBIL. Menu hamburguesa alineat verticalment amb el camp de cerca, sense
      empentar-lo ni dependre de l'amplada del logo.
   4. MOBIL. Lupa fixada a la dreta del camp mitjancant #link-lupa66.
   5. MOBIL. El cercador utilitza tota l'amplada disponible a la dreta del
      boto de menu i elimina marges/max-width que el desplacaven.

   Canvis del 053 respecte del 052:
   1. MOBIL, BARRA DE DALT. .tp-9 (SHOP) portava margin-left:auto, que es
      menjava TOT l'espai lliure de .tops66 (amplada 100% del contenidor)
      i deixava un buit enorme abans de SHOP. Ara margin-left:clamp(20px,
      6vw,48px): un salt que escala una mica amb l'amplada de pantalla
      pero mai baixa de 20px ni supera 48px. SHOP continua sent el darrer
      element visible, pero ja no arrossega tot el sobrant cap a ell.

   Canvis del 052 respecte del 051:
   1. ESCRIPTORI. #barra_cercador_66 tenia padding 50px a dalt i 11px a baix.
      La barra vermella es fixed i tapa els primers 32px, o sigui que en
      quedaven 18 de visibles a dalt contra 11 a baix, i el logo quedava
      descentrat. Ara son 43 = 32 + 11, i el gris de dalt i el de baix
      mesuren igual. A mobil, el mateix: 42 = 32 + 10.
   2. MOBIL, BOTO DEL MENU. Estava clavat amb top:-91px, un numero mesurat
      a ull des de dalt que es desquadra cada cop que canvia l'alcada del
      logo o del cercador. Ara va ancorat a BAIX (bottom:calc(100% + 12px)),
      que nomes depen dels 10px d'encoixinat inferior d'aquest mateix
      fitxer: quedi com quedi la capcalera, el boto sempre cau centrat
      sobre el camp de cerca.
   3. MOBIL, CERCADOR. Com que el boto viu al marge esquerre, el camp de
      cerca ara s'arrambla a la dreta i li deixa 46px lliures. Abans anava
      centrat i el boto se li posava a sobre.
   4. MOBIL, BARRA DE DALT. Les barretes separadores es pintaven amb un
      ::after a tots els elements menys l'ultim; com que a mobil se
      n'amaguen uns quants amb display:none, l'ultim VISIBLE tampoc no era
      l'ultim fill i li quedava una barreta penjant just abans del buit que
      empeny SHOP cap a la dreta. A mobil ara no se'n pinta cap.
   ========================================================== */

:root{
  --cap-red:#b93425;
  --cap-red-dark:#8f281d;
  --cap-text:#404040;
  --cap-muted:#6b6b6b;
  --cap-line:#d7d7d7;
  --cap-soft:#f3f3f3;
  --cap-white:#fff;
  --cap-font:"Open Sans",Arial,Helvetica,sans-serif;
  --logo-lateral-max:370px;
}

/* Reset limitat a la capcalera: no altera la resta del document */
#barra_superior_66,
#barra_superior_66 *,
#barra_cercador_66,
#barra_cercador_66 *,
#barra_menu,
#barra_menu *,
.idioma-float,
.idioma-float *{
  box-sizing:border-box;
}

#barra_superior_66 a,
#barra_cercador_66 a,
#barra_menu a{
  text-decoration:none;
}

/* ==========================================================
   IDIOMA
   ========================================================== */
.idioma-float{
  position:fixed;
  top:62px;
  right:12px;
  z-index:1500;
  font-family:var(--cap-font);
}

#selector-idioma{
  min-height:38px;
  padding:8px 34px 8px 13px;
  border:1px solid var(--cap-red);
  border-radius:2px;
  background-color:var(--cap-red);
  color:#fff;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  appearance:none;
  box-shadow:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpolygon points='0,0 10,0 5,6' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:10px 6px;
}

#selector-idioma:hover,
#selector-idioma:focus{
  background-color:#fff;
  color:var(--cap-red);
  border-color:var(--cap-red);
  outline:none;
}

/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */
#barra_superior_66{
  position:fixed;
  top:0;
  left:0;
  z-index:1200;
  width:100%;
  min-height:32px;
  background:var(--cap-red);
  color:#fff;
  overflow:hidden;
}

.contingut_barra_66{
  width:100%;
  max-width:1046px;
  min-height:32px;
  margin:0 auto;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-family:var(--cap-font);
  font-size:12px;
  line-height:1.2;
}

.tops66{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  min-width:0;
}

.tops66 .topa66{
  position:relative;
  display:flex;
  align-items:stretch;
  background:transparent;
}

.tops66 .topa66::after{
  content:"";
  position:absolute;
  top:8px;
  right:0;
  width:1px;
  height:14px;
  background:rgba(255,255,255,.55);
}

.tops66 .topa66:last-child::after{display:none;}

.tops66 a{
  display:flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  color:#fff;
  background:transparent;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:background-color .18s ease;
}

.tops66 a:hover,
.tops66 a:focus,
.tops66 a:active{
  background:var(--cap-red-dark);
  color:#fff;
  outline:none;
}

/* SHOP SUPERIOR */
.link-shop-carro{
  position:relative;
  top:0;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 36px 0 12px !important;
  vertical-align:top;
}

.link-shop-carro .txt{
  font-size:13px;
  line-height:1;
  font-weight:700;
}

.link-shop-carro .cart-count{
  position:absolute;
  top:5px;
  right:6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:#fff;
  color:var(--cap-red);
  font-family:var(--cap-font);
  font-size:11px;
  line-height:17px;
  font-weight:700;
  text-align:center;
  box-shadow:none;
}

/* ==========================================================
   ZONA LOGO I CERCADOR
   ========================================================== */
#barra_cercador_66{
  width:100%;
  /* 43 = 32 de la barra vermella fixa + 11, els mateixos 11 que a baix */
  padding:43px 0 11px !important;
  background:#ededed;
  border-bottom:1px solid #dedede;
}

#cercador66{
  width:100%;
  max-width:1046px;
  min-height:74px;
  margin:0 auto;
  padding:0 10px;
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(300px,380px) minmax(300px,1fr);
  align-items:center;
  gap:24px;
  color:var(--cap-muted);
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.4;
}

#cercador66 .modul11-66{justify-self:center;}
#cercador66 a img,
#cercador66 > img{max-width:100%;height:auto;}

.modul4-66{
  position:relative;
  top:0;
  max-width:100%;
  height:auto;
}

.modul1-66{
  width:100%;
  max-width:375px;
  margin:0 auto;
}

.modul11-66{
  position:relative;
  top:0;
  left:0;
  width:100%;
  max-width:380px;
  margin:0 auto;
  justify-self:center;
}

.modul1-66 input:not([type="image"]),
.modul11-66 input:not([type="image"]):not(#lupa66),
.textcerca66{
  width:100% !important;
  height:42px !important;
  margin:0;
  padding:0 46px 0 13px;
  border:1px solid #a9a9a9;
  border-radius:0;
  background:#fff;
  color:var(--cap-text);
  font-family:var(--cap-font) !important;
  font-size:17px !important;
  line-height:42px !important;
  font-weight:400;
  letter-spacing:0;
  outline:none;
  box-shadow:none;
}

.textcerca66{
  position:static;
}

.textcerca66::placeholder{
  color:#777;
  opacity:1;
}

.textcerca66:focus{
  border-color:var(--cap-red);
  box-shadow:0 0 0 1px var(--cap-red);
}

/* La lupa pot arribar com a imatge directa o dins de #link-lupa66. */
#link-lupa66{
  position:absolute;
  top:0;
  right:0;
  z-index:20;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:46px;
  height:42px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

#lupa66{
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  left:auto !important;
  z-index:20 !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateY(-50%) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  object-fit:contain;
  cursor:pointer;
}

#link-lupa66 #lupa66{
  position:static !important;
  transform:none !important;
}

#seminuevos{
  position:static;
  float:none;
  display:block;
  width:100%;
  max-width:var(--logo-lateral-max);
  height:auto;
}

/* ==========================================================
   MENU PRINCIPAL
   ========================================================== */
.menu-container33{
  position:relative;
  margin:0;
  padding:0;
  background:#fff;
}

#menu-toggle{display:none;}
.menu-icon{display:none;}

nav.menu{
  position:relative;
  z-index:1000;
  width:100%;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid var(--cap-line);
  background:#fff;
  font-family:var(--cap-font);
}

nav.menu ul{
  margin:0;
  padding:0;
  list-style:none;
}

nav.menu > ul{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
  overflow:visible;
}

nav.menu > ul > li{position:relative;}

nav.menu > ul > li > a{
  position:relative;
  display:block;
  padding:10px 13px;
  color:#4a4a4a;
  font-family:var(--cap-font);
  font-size:13px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:0;
  transition:color .18s ease,background-color .18s ease;
}

nav.menu > ul > li:not(:last-child) > a::after{
  content:"";
  position:absolute;
  top:29%;
  right:0;
  width:1px;
  height:42%;
  background:#dedede;
}

nav.menu > ul > li > a:hover,
nav.menu > ul > li > a:focus{
  background:var(--cap-red);
  color:#fff;
  outline:none;
}

/* Submenus */
nav.menu li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:1000;
  min-width:290px;
  border:1px solid #cfcfcf;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  flex-direction:column;
}

nav.menu li:hover > ul{display:flex;}
nav.menu li ul li{position:relative;}

nav.menu li ul li a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:8px 15px;
  border-bottom:1px solid #e2e2e2;
  color:#4d4d4d;
  font-family:var(--cap-font);
  font-size:14px;
  line-height:1.25;
  font-weight:400;
  transition:background-color .18s ease,color .18s ease;
}

nav.menu li ul li a:hover{
  background:#f2f2f2;
  color:var(--cap-red);
}

nav.menu li ul li:first-child > a{
  background:#ececec;
  color:#333;
  font-weight:600;
}

nav.menu li ul li ul{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  min-width:260px;
  border:1px solid #d7d7d7;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

nav.menu li ul li:hover > ul{
  display:flex;
  flex-direction:column;
}

/* Mega menu dreta */
nav.menu li.mega-right > ul{
  right:20px;
  left:auto;
  width:60vw;
  max-width:800px;
  min-width:400px;
  padding:10px;
  flex-flow:row wrap;
}

nav.menu li.mega-right > ul > li{
  width:25%;
}

/* Mega menu drones */
nav.menu li.mega-drones{position:static;}

nav.menu li.mega-drones > ul.mega-panel{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  z-index:1300;
  width:920px;
  max-width:calc(100vw - 24px);
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-50%);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  overflow:hidden;
  border:1px solid #cfcfcf;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

nav.menu li.mega-drones:hover > ul.mega-panel,
nav.menu li.mega-drones > ul.mega-panel:hover{display:grid;}

nav.menu li.mega-drones > ul.mega-panel > li.mega-col{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

nav.menu li.mega-drones > ul.mega-panel > li.mega-col + li.mega-col{
  border-left:1px solid #ddd;
}

nav.menu li.mega-drones ul.mega-list{
  display:flex !important;
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex-direction:column !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

nav.menu li.mega-drones ul.mega-list > li{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

nav.menu li.mega-drones ul.mega-list > li > a{
  width:100% !important;
  margin:0 !important;
  border-bottom:1px solid #ddd;
}

.menu-img{
  flex:0 0 42px;
  width:42px;
  height:42px;
  margin:0;
  object-fit:contain;
}


/* ==========================================================
   V050 - CERCADOR MES COMPACTE I LOGOS MES VISIBLES
   Redueix el camp central i reserva mes amplada al bloc de marques.
   ========================================================== */
@media (min-width:769px){
  #cercador66{
    grid-template-columns:minmax(210px,250px) minmax(300px,380px) minmax(300px,1fr);
    gap:24px;
  }

  #cercador66 .modul11-66,
  .modul11-66{
    width:100%;
    max-width:380px;
  }

  #cercador66 > a:last-child{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    min-width:300px;
  }

  #seminuevos{
    width:100%;
    max-width:370px;
  }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1200px){
  .idioma-float{display:none;}
}

@media (max-width:768px){
  /* ----------------------------------------------------------
     BARRA SUPERIOR: 3 ELEMENTS VISIBLES, 3 COLUMNES IGUALS
     ---------------------------------------------------------- */
  #barra_superior_66{
    min-height:32px !important;
    padding:0 !important;
    overflow:visible;
  }

  .contingut_barra_66{
    width:100% !important;
    max-width:none !important;
    min-height:32px;
    margin:0 !important;
    padding:0 !important;
    font-family:var(--cap-font);
    font-size:11px;
    letter-spacing:0;
  }

  .tops66{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    gap:0;
  }

  .tops66 .topa66{
    display:none !important;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  .tops66 .topa66.mob-show{
    display:flex !important;
    align-items:stretch;
    justify-content:center;
  }

  .tops66 .topa66::after{display:none !important;}
  .tops66 .tp-9{margin-left:0 !important;}

  .tops66 a,
  .tops66 .link-shop-carro{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100%;
    min-width:0;
    min-height:32px;
    margin:0 !important;
    padding:0 4px !important;
    font-size:10.5px;
    line-height:1.1;
    font-weight:600;
    text-align:center;
    white-space:nowrap;
  }

  .tops66 .link-shop-carro{font-weight:700;}
  .banderes66{display:none !important;}

  /* ----------------------------------------------------------
     LOGO + CERCADOR
     La barra superior es fixed (32px): 42 = 32 + 10px d'aire.
     ---------------------------------------------------------- */
  #barra_cercador_66{
    width:100% !important;
    margin:0 !important;
    padding:42px 0 10px !important;
  }

  #cercador66{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:0;
    margin:0 auto;
    gap:12px;
    padding:8px 12px 4px;
  }

  #cercador66 > a:first-child{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:0;
    padding:0;
  }

  #cercador66 > a:first-child picture{
    display:block;
    width:auto;
    max-width:100%;
    margin:0 auto;
  }

  #cercador66 > a:first-child picture img{
    display:block;
    width:min(275px,72vw) !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
  }

  .modul4-66{
    top:0;
    display:block;
    max-width:220px;
    margin:0 auto;
  }

  /* 58px reservats per al boto del menu (44px + 14px d'aire). */
  #cercador66 .modul11-66,
  .modul11-66{
    position:relative;
    top:0;
    left:0;
    display:block;
    width:calc(100% - 58px) !important;
    max-width:none !important;
    margin:0 0 0 58px !important;
    padding:0;
  }

  .textcerca66{
    position:static;
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:42px !important;
    margin:0 !important;
    padding:0 48px 0 13px !important;
    font-size:16px !important;
    line-height:42px !important;
  }

  /* Lupa sempre a la dreta del camp. */
  #link-lupa66{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:42px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  #link-lupa66 #lupa66,
  #lupa66{
    position:static !important;
    display:block !important;
    width:24px !important;
    height:24px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  #seminuevos,
  #cercador66 map[name="seminuevosMap"]{display:none !important;}

  .cap66-live-panel{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* ----------------------------------------------------------
     MENU HAMBURGUESA
     El boto queda a la mateixa alcada que el camp de cerca.
     14px = 10px de padding inferior de #barra_cercador_66
            + 4px de padding inferior de #cercador66.
     ---------------------------------------------------------- */
  nav.menu > ul{
    display:none;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:space-between;
    background:#fff;
  }

  nav.menu > ul > li{width:50%;}

  nav.menu > ul > li > a{
    padding:12px 13px;
    border-bottom:1px solid #e8e8e8;
    font-size:14px;
    text-align:left;
  }

  nav.menu > ul > li:nth-child(odd) > a{
    border-right:1px solid #e8e8e8;
  }

  .menu-icon{
    display:flex;
    position:absolute;
    top:auto;
    right:auto;
    bottom:calc(100% + 14px);
    left:12px;
    z-index:1100;
    align-items:center;
    justify-content:center;
    width:44px;
    height:42px;
    margin:0;
    padding:0;
    border:1px solid #cfcfcf;
    border-radius:2px;
    background:#fff;
    color:#333;
    font-family:var(--cap-font);
    font-size:22px;
    line-height:1;
    text-align:center;
    cursor:pointer;
  }

  #menu-toggle:checked + .menu-icon + nav.menu > ul{display:flex;}
  nav.menu ul ul,
  nav.menu li:hover > ul{display:none !important;}
  #cart-panel,.bdreta,#cart,.close-cart{display:none !important;}
}

@media (max-width:420px){
  .tops66 a,
  .tops66 .link-shop-carro{
    padding:0 2px !important;
    font-size:10px;
  }

  #cercador66{padding-left:10px;padding-right:10px;}
  .menu-icon{left:10px;}

  #cercador66 .modul11-66,
  .modul11-66{
    width:calc(100% - 56px) !important;
    margin-left:56px !important;
  }
}

/* ==========================================================================
   055  ACCESSIBILITAT DE LA CAPCALERA
   ========================================================================== */

/* Enllac de salt. Nomes s'estila l'enllac: el desti #contingut es un div que
   ja existeix a les .dwt i que te 445 regles al full gran. NO se li toca res.
   L'unica cosa que se li afegeix es outline:none quan rep focus programatic. */
.mg-salta-contingut{
  position:absolute;left:-9999px;top:0;z-index:100000;
  padding:12px 18px;border-radius:4px;
  background:#fff;color:#000;border:2px solid #333;
  font:700 15px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.mg-salta-contingut:focus{left:8px;top:8px;}
#contingut[tabindex]:focus{outline:none;}

/* Submenus accessibles amb teclat. Fins ara nomes obrien amb :hover, i com
   que els <ul> filles estan en display:none els seus enllacos no reben focus:
   ningu que navegui amb teclat pot passar del primer nivell. Els selectors
   repliquen els de :hover que ja hi ha mes amunt, inclos el mega-panel. */
nav.menu li:focus-within > ul{display:flex;}
nav.menu li ul li:focus-within > ul{display:flex;flex-direction:column;}
nav.menu li.mega-drones:focus-within > ul.mega-panel{display:grid;}

@media (max-width:768px){
  /* A mobil els submenus estan desactivats a proposit; no els reobrim. */
  nav.menu li:focus-within > ul{display:none !important;}
}