/* ==================================================
   METALEST - HEADER + MENU (LIMPIO Y DEFINITIVO)
   Archivo: /media/templates/site/cassiopeia_extended/css/user.css
   ================================================== */


/* =========================
   1) RESET BASICO (QUITA AZUL)
   ========================= */

/* Fondo general blanco (adiós azul del template) */
body,
.site,
.wrapper,
#page,
.container-header {
  background:#ffffff !important;
}


/* =========================
   2) HEADER (LOGO + BUSCADOR)
   ========================= */

.container-header,
header.header{
  background:#ffffff !important;
  box-shadow:none !important;
  padding:12px 0 !important;
  position:relative;
}

/* Limitar tamaño del logo */
.navbar-brand img,
.brand-logo img,
.header .navbar-brand img{
  max-height:110px !important;
  width:auto !important;
  height:auto !important;
  display:block;
}

/* Evitar que el logo “empuje” el layout */
.navbar-brand{
  margin:0 !important;
  padding:0 !important;
}


/* =========================
   3) MENU (POSICIÓN TEMPLATE)
   ========================= */

.container-header .container-nav{
  background:#7a7a7a !important;     /* cajón gris */
  padding:14px 0 !important;
  border-radius: 14px;
}

/* Contenedor interior centrado + margen lateral (aire) */
.container-header .container-nav .grid-child{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;                    /* margen lateral dentro del cajón */
}

/* =========================
   4) MENU LINKS (SIN CUADROS)
   ========================= */

.container-header .mod-menu ul{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:34px;
  list-style:none;
  margin:0;
  padding:0;
}

/* enlaces */
.container-header .mod-menu a{
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:16px !important;
  text-transform:uppercase;
  letter-spacing:0.4px;
  padding:6px 6px !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* hover */
.container-header .mod-menu a:hover{
  opacity:0.85;
}

/* quitar “pills/cuadros” del activo */
.container-header .mod-menu .active > a,
.container-header .mod-menu .current > a,
.container-header .mod-menu a[aria-current="page"],
.container-header .nav-link.active{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}

/* matar líneas/pseudoelementos que dibujan subrayado */
.container-header .mod-menu a::before,
.container-header .mod-menu a::after,
.container-header .nav-link::before,
.container-header .nav-link::after{
  content:none !important;
  display:none !important;
}


/* =========================
   5) BUSCADOR EN EL CAJÓN (DERECHA)
   ========================= */

/* Poner el buscador a la derecha dentro del mismo contenedor */
.container-header .container-nav .grid-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* el menú ocupa la izquierda */
.container-header .container-nav .mod-menu{
  flex:1;
}

/* el buscador a la derecha */
.header-search{
  flex:0 0 auto;
  margin-left:auto;
}

/* ocultar el texto/label “Search” */
.header-search label,
.header-search .form-label,
.header-search .control-label,
.header-search .visually-hidden,
.mod-finder label,
.mod-finder__label,
.finder label,
.finder__label,
.header-search .input-group-text,
.header-search .input-group-prepend,
.header-search .input-group-addon{
  display:none !important;
}

/* caja input */
.header-search input{
  border-radius:6px;
  padding:10px 14px;
  border:1px solid #bdbdbd;
  min-width:220px;
}

/* margen derecho extra para que no “pegue” */
.container-header .container-nav .grid-child{
  padding-right:28px;
}


/* =========================
   6) DROPDOWN
   ========================= */

.container-header .mod-menu ul ul,
.container-header .dropdown-menu{
  background:#7a7a7a !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  border-radius:6px !important;
  padding:8px 0 !important;
  margin-top:8px !important;
  min-width:220px !important;
  z-index:9999 !important;
}

.container-header .mod-menu ul ul a,
.container-header .dropdown-item{
  color:#ffffff !important;
  font-weight:700 !important;
  padding:10px 16px !important;
  display:block !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.container-header .mod-menu ul ul a:hover,
.container-header .dropdown-item:hover{
  background:rgba(255,255,255,0.12) !important;
}


/* =========================
   7) RESPONSIVE
   ========================= */

@media (max-width:992px){

  .container-header .container-nav .grid-child{
    flex-wrap:wrap;
    justify-content:center;
    padding:0 12px;
  }

  .container-header .mod-menu ul{
    justify-content:center !important;
    flex-wrap:wrap;
    gap:16px;
  }

  .header-search{
    margin:10px auto 0;
  }

  .header-search input{
    min-width:260px;
  }

  .navbar-brand img{
    max-height:90px !important;
  }
}
/* ==================================================
   FIX 1: ELIMINAR BLOQUE BAJO EL CAJÓN + DROPDOWN POR ENCIMA
   ================================================== */

/* Evita que el menú pinte “banda” debajo */
.container-header .container-nav .mod-menu,
.container-header .container-nav .mod-menu > ul,
.container-header .container-nav .mod-menu ul {
  background: transparent !important;
}

/* Asegura que el UL no tenga altura rara */
.container-header .container-nav .mod-menu > ul {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Que el dropdown se muestre por encima del resto */
.container-header .container-nav,
.container-header .container-nav .grid-child,
.container-header .container-nav .mod-menu {
  position: relative;
  z-index: 10;
}

.container-header .container-nav .mod-menu ul ul,
.container-header .container-nav .dropdown-menu {
  position: absolute !important;
  z-index: 99999 !important;
}


/* ==================================================
   FIX 2: MARGEN REAL A LA DERECHA DEL BUSCADOR
   ================================================== */

/* Da aire dentro de la barra completa */
.container-header .container-nav{
  padding-right: 26px !important;
}

/* Empuja el buscador hacia dentro */
.header-search{
  margin-right: 18px !important;
}

/* Por si el buscador viene con width 100% del template */
.header-search,
.header-search form,
.header-search .mod-finder,
.header-search .mod-finder__form{
  width: auto !important;
}

.header-search input{
  width: 220px !important;
  max-width: 220px !important;
}
/* ==================================================
   METALEST - AJUSTE MENÚ (blanco) + SUBMENÚ (negro)
   + evitar submenús abiertos por defecto
   ================================================== */

/* 1) MENÚ PRINCIPAL (BLANCO + tipografía más suave) */
.container-header .container-nav .mod-menu > ul > li > a,
.container-header .container-nav .mod-menu > ul > li > span,
.container-header .container-nav .mod-menu > ul > li > a.nav-link {
  color: #ffffff !important;
  font-weight: 600 !important;   /* antes te gustaba más “fina” */
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

/* 2) SUBMENÚS (NEGRO) */
.container-header .container-nav .mod-menu ul ul a,
.container-header .container-nav .dropdown-menu .dropdown-item,
.container-header .container-nav .mod-menu__sub a{
  color: #000000 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* Fondo del dropdown claro */
.container-header .container-nav .mod-menu ul ul,
.container-header .container-nav .dropdown-menu,
.container-header .container-nav .mod-menu__sub{
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
}

/* Hover dropdown */
.container-header .container-nav .mod-menu ul ul a:hover,
.container-header .container-nav .dropdown-menu .dropdown-item:hover,
.container-header .container-nav .mod-menu__sub a:hover{
  background:#f2f2f2 !important;
}

/* 3) EVITAR QUE LOS SUBMENÚS ESTÉN ABIERTOS POR DEFECTO (DESKTOP) */
@media (min-width: 992px){
  .container-header .container-nav .mod-menu li > ul,
  .container-header .container-nav .mod-menu li > .mod-menu__sub,
  .container-header .container-nav .mod-menu li > .dropdown-menu{
    display: none !important;
  }

  .container-header .container-nav .mod-menu li:hover > ul,
  .container-header .container-nav .mod-menu li:hover > .mod-menu__sub,
  .container-header .container-nav .mod-menu li:hover > .dropdown-menu{
    display: block !important;
  }
}

/* 4) Quitar “líneas/cuadros” raros bajo los items */
.container-header .container-nav .mod-menu a::before,
.container-header .container-nav .mod-menu a::after{
  content:none !important;
  display:none !important;
}
/* ==================================================
   AJUSTES: SUBMENU GRIS + MENU CENTRADO EN ALTURA
   ================================================== */

/* 1) Centrar verticalmente los items del menú dentro del cajón */
.container-header .container-nav .mod-menu > ul,
.container-header .container-nav .mod-menu__list{
  align-items: center !important;      /* centrado vertical */
  min-height: 52px;                    /* altura estable del cajón */
}

/* Dar altura consistente a los links para que queden centrados */
.container-header .container-nav .mod-menu > ul > li > a,
.container-header .container-nav .mod-menu > ul > li > span{
  display: flex !important;
  align-items: center !important;
  height: 52px;                        /* mismo alto que el UL */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Submenú con fondo gris (no transparente) */
.container-header .container-nav .mod-menu ul ul,
.container-header .container-nav .dropdown-menu,
.container-header .container-nav .mod-menu__sub{
  background: #d6d6d6 !important;      /* gris visible */
  border: 1px solid #bcbcbc !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Texto submenú negro + separación */
.container-header .container-nav .mod-menu ul ul a,
.container-header .container-nav .dropdown-menu .dropdown-item,
.container-header .container-nav .mod-menu__sub a{
  color:#000 !important;
  padding: 10px 16px !important;
}

/* Hover submenú */
.container-header .container-nav .mod-menu ul ul a:hover,
.container-header .container-nav .dropdown-menu .dropdown-item:hover,
.container-header .container-nav .mod-menu__sub a:hover{
  background:#c2c2c2 !important;
}
/* ==================================================
   SUBMENU - CAJÓN GRIS CLARO CORPORATIVO
   ================================================== */

/* CAJÓN COMPLETO del submenú */
.container-header .container-nav .mod-menu ul ul,
.container-header .container-nav .dropdown-menu,
.container-header .container-nav .mod-menu__sub{
  background:#cfcfcf !important;        /* gris claro */
  border:1px solid #b5b5b5 !important;
  box-shadow:0 12px 22px rgba(0,0,0,0.18);
  padding:6px 0 !important;
}

/* Links dentro del submenú */
.container-header .container-nav .mod-menu ul ul a,
.container-header .container-nav .dropdown-item,
.container-header .container-nav .mod-menu__sub a{
  color:#000 !important;
  padding:10px 18px !important;
  font-weight:500 !important;
}

/* Hover / item seleccionado del submenú */
.container-header .container-nav .mod-menu ul ul a:hover,
.container-header .container-nav .dropdown-item:hover,
.container-header .container-nav .mod-menu__sub a:hover{
  background:#bdbdbd !important;   /* más oscuro que el cajón */
}
/* =========================
   METALEST SLIDER (COMÚN)
   ========================= */

.metalest-slider{
  max-width: 980px;
  margin: 28px auto 10px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.metalest-slides{
  position: relative;
  height: 320px;           /* ajusta si lo quieres más alto/bajo */
}

.metalest-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}

.metalest-slide.is-active{
  opacity: 1;
}

.metalest-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Flechas */
.metalest-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
  z-index: 5;
}

.metalest-arrow.prev{ left: 14px; }
.metalest-arrow.next{ right: 14px; }

.metalest-arrow:hover{
  background: rgba(0,0,0,0.5);
}

/* Dots */
.metalest-dots{
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 6;
}

.metalest-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
}

.metalest-dot.is-active{
  background: rgba(255,255,255,0.95);
}

/* Responsive */
@media (max-width: 992px){
  .metalest-slider{ max-width: 94%; }
  .metalest-slides{ height: 260px; }
}
/* =========================
   CERTIFICADOS (iconos PDF)
   ========================= */
.metalest-certificados{
  max-width: 980px;
  margin: 20px auto 18px;
  padding: 0 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 28px;
  flex-wrap:wrap;
}

.metalest-cert img{
  height: 58px;
  width: auto;
  display:block;
  opacity: 0.95;
}

.metalest-cert:hover img{
  opacity: 1;
}


/* =========================
   FOOTER BLANCO METALEST
   ========================= */

/* Fondo general zona footer */
.container-footer,
.footer,
footer.site-footer{
  background:#ffffff !important;
  border-top:1px solid #e5e5e5 !important;
}

/* Barra final (sin fondo) */
.metalest-footerbar{
  background:transparent !important;
  color:#000 !important;
  margin-top:10px;
  padding-bottom:10px;
}

.metalest-footerbar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.metalest-footerbar__logo img{
  height: 46px;
  width: auto;
  display:block;
}

/* Texto empresa */
.metalest-footerbar__info{
  flex: 1;
  font-size: 14px;
  color: rgba(0,0,0,0.85) !important;
}

.metalest-footerbar__info strong{
  font-weight:700;
  color:#000 !important;
}

/* Botón TOP */
.metalest-footerbar__right{
  font-size: 13px;
}

.metalest-top{
  color: rgba(0,0,0,0.7) !important;
  text-decoration:none;
}

.metalest-top:hover{
  color:#000 !important;
  text-decoration:underline;
}
/* HOME - Imagen FEDER centrada */
.home-feder{
  display:flex;
  justify-content:center;
  margin: 20px 0;
}

.home-feder img{
  max-width: 560px;   /* ajusta si la quieres más grande */
  width: 100%;
  height: auto;
  display:block;
}
/* ==========================
   HOME ESTILO CORPORATIVO
   ========================== */

/* fondo blanco claro zona contenido */
.site-grid,
.com-content-article{
  background:#f8f8f8;
}

/* imagen centrada */
.home-feder{
  display:flex;
  justify-content:center;
  margin: 30px 0;
}

.home-feder img{
  max-width: 560px;
  width:100%;
  height:auto;
}

/* bloque texto */
.home-texto{
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 20px;
  color:#333;
  font-size:15px;
  line-height:1.7;
}

/* párrafos destacados (los dos primeros en color marrón corporativo) */
.home-destacado{
  color:#a64b00;
  font-weight:600;
  margin-bottom:20px;
}

/* frase Europa centrada */
.home-europa{
  text-align:center;
  font-weight:700;
  color:#a64b00;
  margin: 25px 0;
}

/* título sección */
.home-titulo{
  margin-top:30px;
  margin-bottom:15px;
  color:#003366;
  font-weight:700;
}
/* ==========================
   TEXTO LA COMPAÑÍA (compacto)
   ========================== */

.home-texto p{
  margin-bottom:12px;     /* menos separación */
}

.home-texto{
  font-size:14px;         /* ligeramente más pequeño */
  line-height:1.55;       /* más compacto */
}

/* enlace grupo FACI */
.faci-link{
  color:#0b4ea2;
  font-weight:600;
  text-decoration:none;
}

.faci-link:hover{
  text-decoration:underline;
}
/* ==========================
   TEXTO LEGAL FINAL (inglés)
   ========================== */

.home-legal{
  margin-top:40px;
  font-size:12.5px;
  line-height:1.55;
  color:#777;
  max-width:900px;
}

.home-legal p{
  margin-bottom:14px;
}
/* centrar bloque legal final */
.home-legal{
  margin:40px auto 0 auto;   /* centra el bloque */
  text-align:center;         /* centra el texto */
  font-size:12.5px;
  line-height:1.55;
  color:#777;
  max-width:900px;
}
/* Otros */
.productos-acordeon{
  max-width:900px;
  margin:40px auto;
}

.productos-acordeon .item{
  margin-bottom:15px;
}

.productos-acordeon .titulo{
  background:linear-gradient(#f0f0f0,#dcdcdc);
  padding:12px 18px;
  border-radius:20px;
  cursor:pointer;
  font-weight:600;
  position:relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.productos-acordeon .titulo:before{
  content:"+";
  margin-right:10px;
  font-weight:bold;
}

.productos-acordeon .titulo.activo:before{
  content:"−";
}

.productos-acordeon .contenido{
  display:none;
  padding:15px 20px;
}

.productos-acordeon .contenido a{
  color:#b46a00;
  text-decoration:none;
  font-size:16px;
}

.productos-acordeon .contenido a:hover{
  text-decoration:underline;
}
/* =========================
   METALEST - ACORDEÓN PRODUCTOS
   ========================= */
.metalest-acc{
  max-width: 980px;
  margin: 30px auto 50px;
  padding: 0 20px;
}

.metalest-acc__item{
  margin: 0 0 16px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(#eeeeee, #dcdcdc);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  overflow: hidden;
}

.metalest-acc__title{
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.metalest-acc__title::-webkit-details-marker{ display:none; }

/* icono + / - */
.metalest-acc__title::before{
  content:"+";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  width: 18px;
  display:inline-block;
}
.metalest-acc__item[open] .metalest-acc__title::before{
  content:"−";
}

.metalest-acc__body{
  padding: 6px 22px 18px 52px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.metalest-acc__link{
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: #1a1a1a;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
}

.metalest-acc__link:hover{
  text-decoration: underline;
}

/* ===== FIX: fondo sólido en desplegables del menú (Cassiopeia) ===== */

/* El cuadro completo del desplegable */
.container-header ul.mod-menu__sub{
  background: #9a9a9a !important;
  border: none !important;
  opacity: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Cada fila (li) para que no se vea transparente */
.container-header ul.mod-menu__sub > li{
  background: #9a9a9a !important;
}

/* Enlaces */
.container-header ul.mod-menu__sub > li > a{
  display: block;
  background: #9a9a9a !important;
  color: #222 !important;
  text-decoration: none !important;
  padding: .5rem .9rem;
}

/* Hover */
.container-header ul.mod-menu__sub > li > a:hover,
.container-header ul.mod-menu__sub > li > a:focus{
  background: #7a7a7a !important;
  color: #000 !important;
}
/* Forzar texto blanco en el desplegable del menú */

.container-header ul.mod-menu__sub li a{
    color: #ffffff !important;
}

/* Hover del desplegable */

.container-header ul.mod-menu__sub li a:hover{
    color: #ffffff !important;
}
/* ===== Metalest accordion: estilo unificado tipo "OTROS" ===== */

.metalest-acc {
  margin: 20px 0;
}

/* Caja completa (cerrada y abierta) */
.metalest-acc__item {
  margin: 18px 0;
  border: 0;
  border-radius: 28px;
  background: #d7d7d7;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  overflow: hidden;
}

/* Cabecera */
.metalest-acc__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px 18px 56px; /* hueco para + */
  font-weight: 700;
  background: rgba(255,255,255,.12);
  position: relative;
  user-select: none;
}

/* Quitar triángulo nativo */
.metalest-acc__summary::-webkit-details-marker {
  display: none;
}

/* + / - */
.metalest-acc__summary::before {
  content: "+";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.metalest-acc__item[open] .metalest-acc__summary::before {
  content: "–";
}

/* Hover */
.metalest-acc__summary:hover {
  background: rgba(255,255,255,.22);
}

/* Panel interior */
.metalest-acc__panel {
  padding: 14px 26px 18px 56px;
  background: rgba(255,255,255,.10);
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Lista de PDFs */
.metalest-acc__list {
  margin: 0;
  padding-left: 18px;
}

.metalest-acc__list a {
  text-decoration: none;
}

.metalest-acc__list a:hover {
  text-decoration: underline;
}