/* Pie común de toda la web (11-11-2026). Nació en la portada (.pb-pie) y se sacó aquí para usarlo en todas las
   páginas: el marcado es el mismo en todas (lo pone el barrido de herramientas/pie-comun.mjs) y solo depende de
   esta hoja. Fondo noche, la «G» blanca de marca de agua recortada por el borde, logo blanco GTRONIC HONOR, lema,
   redes, columnas Productos / Tienda / Soporte y el copyright.
   La plantilla del sitio (style.css, bootstrap) da estilo a h2, p, a y listas sueltos: aquí todo va con .pie delante
   y el reinicio con :where() para ganarle sin !important. */
.pie {
   --pie-verde: var(--gtronic-verde, #00845c);
   --pie-noche: #13202a;
   --pie-texto: rgba(255, 255, 255, 0.72);
   position: relative;
   display: block;
   /* clip y no hidden: con hidden, la «G» que sobresale hace el pie desplazable por dentro y al enfocar un enlace
      con el teclado el contenido se corría hacia la izquierda */
   overflow: clip;
   isolation: isolate;
   background: var(--pie-noche);
   color: var(--pie-texto);
   font-family: "Montserrat", Arial, sans-serif;
   font-size: 15px;
   font-weight: 400; /* fijo: en la portada el body hereda 300 y en el resto 400 */
   line-height: 1.6;
}

.pie *,
.pie *::before,
.pie *::after {
   box-sizing: border-box;
}

.pie :where(h2, p, ul, li) {
   margin: 0;
   padding: 0;
   text-align: left;
   text-transform: none;
   letter-spacing: 0;
   font-family: inherit;
}

.pie :where(ul) {
   list-style: none;
}

/* las páginas de especificaciones (plantilla Nicepage, .u-body) les ponen 16 px y 1.6 a listas, enlaces e imágenes,
   con más peso que el reinicio de arriba: aquí los mismos valores que heredan en el resto de la web */
footer.pie :is(ul, li, a, img) {
   font-size: 15px;
   line-height: 24px;
}

.pie a:focus-visible {
   outline: 3px solid var(--gtronic-celeste, #13b2eb);
   outline-offset: 3px;
}

.pie::before {
   content: "";
   position: absolute;
   top: -90px;
   right: -70px;
   z-index: -1;
   width: 420px;
   height: 455px;
   background: url(/media/optimizadas/marca/marca-agua-blanca.webp) no-repeat center / contain;
   opacity: 0.05;
}

.pie-contenedor {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

.pie-arriba {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 40px;
   padding-top: 64px;
   padding-bottom: 48px;
}

.pie-logo {
   display: inline-block;
}

.pie-logo img {
   display: block;
   width: 190px;
   max-width: 100%;
   height: auto;
}

.pie .pie-lema {
   margin: 18px 0 22px;
   max-width: 280px;
   color: var(--pie-texto);
   font-size: 14px;
   font-weight: 600;
   line-height: 24px; /* el de los <p> de la plantilla, que es el que tenía en la portada */
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.pie-redes {
   display: flex;
   gap: 10px;
}

.pie .pie-redes a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border: 1.5px solid rgba(255, 255, 255, 0.28);
   border-radius: 50%;
   color: #ffffff;
   text-decoration: none;
   transition: background-color 0.25s ease, border-color 0.25s ease;
}

.pie .pie-redes a:hover,
.pie .pie-redes a:focus-visible {
   background: var(--pie-verde);
   border-color: var(--pie-verde);
   color: #ffffff;
}

.pie .pie-titulo {
   margin: 6px 0 16px;
   color: #ffffff;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.pie-col li + li {
   margin-top: 10px;
}

.pie .pie-col a {
   color: var(--pie-texto);
   font-size: 15px;
   text-decoration: none;
   transition: color 0.2s ease;
}

.pie .pie-col a:hover,
.pie .pie-col a:focus-visible {
   color: #ffffff;
   text-decoration: underline;
   text-decoration-color: var(--pie-verde);
   text-decoration-thickness: 2px;
   text-underline-offset: 5px;
}

.pie-abajo {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pie .pie-abajo p {
   padding: 20px 0;
   color: rgba(255, 255, 255, 0.55);
   font-size: 13px;
   line-height: 24px;
}

@media (max-width: 1024px) {
   /* la marca arriba, a todo el ancho; las tres columnas de enlaces debajo */
   .pie-arriba {
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
   }

   .pie-marca {
      grid-column: 1 / -1;
   }
}

@media (max-width: 768px) {
   .pie-contenedor {
      padding: 0 16px;
   }
}

@media (max-width: 576px) {
   .pie-arriba {
      grid-template-columns: 1fr 1fr;
      gap: 28px 20px;
      padding-top: 44px;
      padding-bottom: 32px;
   }

   .pie-col:first-of-type {
      grid-row: span 2;
   }

   .pie-logo img {
      width: 160px;
   }

   .pie .pie-abajo p {
      text-align: center;
   }
}

@media (prefers-reduced-motion: reduce) {
   .pie .pie-redes a,
   .pie .pie-col a {
      transition: none;
   }
}