/* =====================================================================
   FICHERO DESTINO: /var/www/Belnou/public/mod/pie/pie.css
   Reescritura completa. Footer 2026, minimalista, GRANATE (#982428)
   via tokens de /public/tema/tema.css. Adaptado a las clases REALES
   que genera public/mod/pie/pie.php + pie_view.php.
   NO cambia HTML ni JS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. WRAPPER GENERAL  (.pie)
   Edge-to-edge, separador superior sutil y linea de acento granate.
   --------------------------------------------------------------------- */
.pie{
    margin: 60px 0 0;
    padding: 0 0 0;
    color: var(--color-text);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: relative;
}
/* filo granate de marca en el borde superior */
.pie::before{
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-principal);
}

/* Override SCOPED del ancho del footer (no toca .ajuste global de tema) */
.pie .ajuste{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------------------------------------------------------------
   2. ZONA DE COLUMNAS  (.pie .pie3 > .ajuste > .information)
   --------------------------------------------------------------------- */
.pie .pie3{
    padding: 56px 0 40px;
    min-height: auto;
}

.pie .pie3 .information{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px 64px;
    width: 100%;
}

/* Cada grupo de enlaces = .contentpie3 */
.pie .pie3 .information .contentpie3,
.pie .pie3 .icono .contentpie3{
    display: flex;
    flex-direction: column;
    text-align: left;
    vertical-align: top;
    margin: 0;
    min-width: 180px;
    max-width: 280px;
}

/* Logo dentro de la primera columna (clase .logo_3 / #logopie: hoy no
   sale en el HTML de public, se deja preparado por si se activa) */
.pie .pie3 .information .logo_3{
    flex: 0 0 auto;
    max-width: 260px;
}
.pie .pie3 .information #logopie{
    display: block;
    height: auto;
    max-height: 90px;
    max-width: 100%;
    margin: 0 0 24px 0;
}

/* Titular de cada columna: GRANATE, mayusculas, subrayado-acento */
.pie .pie3 .information label{
    display: inline-block;
    width: fit-content;
    color: var(--color-principal);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    margin: 0 0 18px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-principal-40);
}

/* Enlaces: gris legible, hover granate con micro-desplazamiento */
.pie .pie3 .information a{
    display: inline-block;
    width: fit-content;
    color: var(--color-text-light);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 10px 0;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.pie .pie3 .information a:hover,
.pie .pie3 .information a:focus{
    color: var(--color-principal);
    transform: translateX(4px);
    text-decoration: none;
}

/* Telefono destacado (metodo "fixed"): granate grande */
.pie .pie3 .information .telf{
    margin: 4px 0 10px;
    color: var(--color-principal);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
}

/* Parrafos de contacto/direccion */
.pie .pie3 .information p{
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 6px 0;
}

/* ---------------------------------------------------------------------
   3. ICONOS SOCIALES  (.pie .pie3 .icono ...)
   Dormido: no aparece en el HTML actual de public, preparado en granate.
   --------------------------------------------------------------------- */
.pie .pie3 .icono{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.pie .pie3 .icono .contentpie3{
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-width: auto;
    max-width: none;
}
.pie .pie3 .icono .contentpie3 .container_img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-principal-10);
    transition: background .25s ease, transform .25s ease;
}
.pie .pie3 .icono .contentpie3 .container_img:hover{
    background: var(--color-principal-20);
    transform: translateY(-3px);
}
.pie .pie3 .icono a img{
    width: 22px;
    height: 22px;
    transition: transform .25s ease;
}

/* ---------------------------------------------------------------------
   4. FRANJA INFERIOR GRANATE  (.pie4)
   Full-width, texto blanco, iconos de pago + copyright + logo.
   --------------------------------------------------------------------- */
.pie4{
    background: var(--color-principal);
    color: var(--color-white);
    padding: 26px 0;
}
.pie4 .ajuste{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Iconos de pago: fila a la derecha, monocromo blanco, separador sutil */
.pie4 .imgpay{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 0 0 18px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-white-85);
    border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.35)) 1;
    text-align: right;
}
.pie4 .imgpay img{
    width: 52px;
    height: auto;
    margin: 0;
    opacity: .9;
    filter: brightness(0) invert(1);
    transition: opacity .25s ease, transform .25s ease;
}
.pie4 .imgpay img:hover{
    opacity: 1;
    transform: scale(1.06);
}

/* Copyright + logo */
.pie4 .copyright{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    margin: 0;
}
.pie4 .copyright p{
    margin: 0;
    min-width: 200px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-white-85);
}
.pie4 .copyright img{
    display: inline-block;
    width: 140px;
    height: auto;
    opacity: .95;
    filter: brightness(0) invert(1);
    transition: opacity .25s ease;
}
.pie4 .copyright img:hover{
    opacity: 1;
}

/* ---------------------------------------------------------------------
   5. RESPONSIVE
   --------------------------------------------------------------------- */
@media all and (max-width:1185px){
    .pie .pie3{ padding: 48px 0 36px; }
    .pie .pie3 .information{ gap: 40px 48px; }
    .pie .pie3 .information .contentpie3{ min-width: 160px; max-width: 260px; }
}

@media all and (max-width:900px){
    .pie{ margin-top: 40px; }
    .pie .pie3{ padding: 40px 0 32px; }
    .pie .ajuste{ padding: 0 20px; }

    .pie .pie3 .information{
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .pie .pie3 .information .contentpie3{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    .pie .pie3 .information #logopie{ margin: 0 0 20px 0; max-height: 72px; }
    .pie .pie3 .information .telf{ font-size: 26px; }

    .pie4 .imgpay{ justify-content: flex-start; }
    .pie4 .copyright{
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .pie4 .copyright p{ width: 100%; }
}

@media all and (max-width:700px){
    .pie .ajuste{ padding: 0 18px; }
    .pie .pie3{ padding: 34px 0 28px; }

    /* Grupos apilados y centrados en movil */
    .pie .pie3 .information{
        align-items: center;
        text-align: center;
    }
    .pie .pie3 .information .contentpie3{
        align-items: center;
        text-align: center;
    }
    .pie .pie3 .information label{ margin: 0 auto 14px; }
    .pie .pie3 .information a{ margin: 0 auto 10px; }
    .pie .pie3 .information a:hover{ transform: translateY(-2px); }
    .pie .pie3 .information p,
    .pie .pie3 .information .telf{ text-align: center; }

    .pie4{ padding: 22px 0; }
    .pie4 .imgpay{ justify-content: center; }
    .pie4 .copyright{ align-items: center; text-align: center; }
    .pie4 .copyright p{ text-align: center; }
    .pie4 .copyright img{ margin: 0 auto; display: block; }
}

@media all and (max-width:480px){
    .pie .pie3{ padding: 28px 0 24px; }
    .pie .pie3 .information label{ font-size: 14px; }
    .pie .pie3 .information a,
    .pie .pie3 .information p{ font-size: 14px; }
    .pie .pie3 .information .telf{ font-size: 23px; }
    .pie4 .imgpay img{ width: 44px; }
    .pie4 .copyright p{ font-size: 12px; }
    .pie4 .copyright img{ width: 120px; }
}

/* ---------------------------------------------------------------------
   NOTA: bloques pie1 / pie2 / #slidershow / .botton_chat estaban ya
   comentados y desactivados en el HTML original; se omiten aqui para
   mantener el CSS limpio. Si se reactivan en el .php, avisar para
   restaurar sus estilos recoloreados a granate.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   REDES SOCIALES (nuevo, de belnou.com)
   --------------------------------------------------------------------- */
.pie-social{
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 22px 0;
}
.pie-social .ajuste{
    max-width: 1400px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.pie-social__label{
    font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-light);
}
.pie-social__links{ display: flex; align-items: center; gap: 12px; }
.pie-social__links a{
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-white); border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.pie-social__links a:hover{
    color: var(--color-white); background: var(--color-principal);
    border-color: var(--color-principal); transform: translateY(-3px);
}

/* ---------------------------------------------------------------------
   SUBVENCIONES / AYUDAS OFICIALES (nuevo, de belnou.com)
   --------------------------------------------------------------------- */
.pie-grants{
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
}
.pie-grants .ajuste{
    max-width: 1400px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.pie-grants img{
    height: 54px; width: auto; max-width: 100%;
    opacity: .85; transition: opacity .25s ease;
}
.pie-grants img:hover{ opacity: 1; }

@media (max-width: 700px){
    .pie-social .ajuste{ flex-direction: column; gap: 12px; }
    .pie-grants .ajuste{ gap: 18px; }
    .pie-grants img{ height: 42px; }
}